web-development/medium-aws-tutorial-1
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding latest

Browse Source
This commit is contained in:
dtomlinson
2020-03-19 03:31:03 +00:00
parent db39e2212b
commit c17cb242e1
8 changed files with 10105 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
links.md
View File

@@ -76,3 +76,8 @@ Composition API in Vue3:
### Tutorials/Guides (nuxt) ### Tutorials/Guides (nuxt)
<https://strapi.io/blog/build-a-blog-using-nuxt-strapi-and-apollo/> <https://strapi.io/blog/build-a-blog-using-nuxt-strapi-and-apollo/>
## Design
Good free HQ images:
<https://unsplash.com/s/photos/random>

122
src/App.vue
View File

@@ -1,48 +1,90 @@
<template> <template>
<div id="app"> <v-app>
<v-card color="grey lighten-4" flat height="100px"> <v-app-bar
<v-toolbar :color="''" :dark="true"> color="#0b3765"
<v-app-bar-nav-icon></v-app-bar-nav-icon> dark
<v-toolbar-title>AWS Login Tutorial</v-toolbar-title> prominent
<v-spacer></v-spacer> shrink-on-scroll
<v-btn icon> fade-img-on-scroll
<v-icon>mdi-magnify</v-icon> src="https://picsum.photos/1920/1080?random"
</v-btn> app
<v-btn icon> >
<v-icon>mdi-heart</v-icon> <template v-slot:img="{ props }">
</v-btn> <v-img
<v-btn icon> v-bind="props"
<v-icon>mdi-dots-vertical</v-icon> gradient="to top right, #0b376580, #19204880"
</v-btn> ></v-img>
</v-toolbar> </template>
</v-card> <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
<v-app> <v-toolbar-title>AWS Login Tutorial</v-toolbar-title>
<div id="nav"> </v-app-bar>
<router-link to="/">Home</router-link> <!-- <v-spacer></v-spacer> -->
<router-link to="/about">About</router-link> <!-- <v-content class="pa-0"> -->
<router-link to="/signUp">Sign Up</router-link> <v-content>
<router-link to="/signupConfirm">Confirm</router-link> <v-container>
<router-link to="/signIn">Sign In</router-link> <v-row>
</div> <v-card>
<router-view></router-view> <div id="nav">
<br /> <router-link to="/">Home</router-link>
<!-- <h1 v-if="this.email != null"> --> <router-link to="/about">About</router-link>
<h1 v-if="this.$store.getters.authorized != false"> <router-link to="/signUp">Sign Up</router-link>
<!-- Hello {{ this.userEmail }} --> <router-link to="/signupConfirm">Confirm</router-link>
Hello {{ this.$store.getters.userEmail }} <router-link to="/signIn">Sign In</router-link>
</h1> </div>
<h1 v-else>Welcome!</h1> </v-card>
<v-col cols="2"> </v-row>
<router-view></router-view>
<v-row>
<h1 v-if="this.$store.getters.authorized != false">
Hello {{ this.$store.getters.userEmail }}
</h1>
<h1 v-else>Welcome!</h1>
</v-row>
<v-row justify-center> <v-row justify-center>
<v-card class="pa-2 ma-2" <v-card class="pa-2 ma-2"
><v-btn large color="primary" @click="dosignOut" ><v-btn large color="primary" @click="dosignOut"
>Sign Out</v-btn >Sign Out</v-btn
></v-card ></v-card
></v-row ></v-row
></v-col >
> <v-row>s</v-row>
</v-app> <v-row>s</v-row>
</div> <v-row>s</v-row>
<v-row>s</v-row>
<v-row class="pa-10">s</v-row>
<v-row>s</v-row>
<v-row>s</v-row>
<v-row>s</v-row>
<v-row>s</v-row>
<v-row justify="center">
<v-img
class="nice"
src="https://images.unsplash.com/photo-1519444793799-fb6e09f43bfb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60"
max-width="60%"
></v-img>
</v-row>
</v-container>
</v-content>
<!-- <svg class="divider" width="100%" viewBox="0 0 10 1"> -->
<svg class="divider" width="100%" viewBox="0 0 10 1">
<v-container>
<h1>test</h1>
</v-container>
<polygon
stroke="none"
stroke-width="0"
fill="#0b3765"
points="0,0.8 0,1 10,1 10,0.5"
/>
</svg>
<v-footer color="#0b3765">
<v-row justify="center" no-gutters>
<p class="text-center white--text">{{ new Date().getFullYear() }}|</p>
<strong class="text-center white--text"> AWS Tutorial</strong>
<v-spacer></v-spacer>
</v-row>
</v-footer>
</v-app>
</template> </template>
<script> <script>
@@ -84,4 +126,8 @@ export default {
color: $mycol; color: $mycol;
margin-top: 60px; margin-top: 60px;
} }
.nice {
clip-path: polygon(0 60%, 0 100%, 100% 100%, 100% 0);
}
</style> </style>

10011
src/assets/lottie/triangle.json Normal file
View File

File diff suppressed because it is too large Load Diff

2
src/components/Animation.vue
View File

@@ -4,7 +4,7 @@
<script> <script>
import Lottie from "vue-lottie"; import Lottie from "vue-lottie";
import * as delivery from "../assets/lottie/delivery.json"; import * as delivery from "../assets/lottie/halloween.json";
// console.log(delivery) // console.log(delivery)
export default { export default {
name: "Animation", name: "Animation",

1
src/main.js
View File

@@ -11,7 +11,6 @@ Amplify.configure(awsconfig);
Vue.use(Amplify); Vue.use(Amplify);
Vue.component("lottie", Lottie); Vue.component("lottie", Lottie);
console.log(Lottie);
Vue.config.productionTip = false; Vue.config.productionTip = false;

7
src/plugins/vuetify.js
View File

@@ -1,7 +1,6 @@
import Vue from 'vue'; import Vue from "vue";
import Vuetify from 'vuetify/lib'; import Vuetify from "vuetify/lib";
Vue.use(Vuetify); Vue.use(Vuetify);
export default new Vuetify({ export default new Vuetify({});
});

29
src/views/About.vue
View File

@@ -10,38 +10,9 @@
<script> <script>
import Animation from "../components/Animation"; import Animation from "../components/Animation";
// import Lottie from "vue-lottie";
import * as delivery from "@/assets/lottie/halloween.json";
export default { export default {
components: { components: {
animation: Animation animation: Animation
},
methods: {
handleAnimation: function(anim) {
this.anim = anim;
},
stop: function() {
this.anim.stop();
},
play: function() {
this.anim.play();
},
pause: function() {
this.anim.pause();
},
onSpeedChange: function() {
this.anim.setSpeed(this.animationSpeed);
}
},
data() {
return {
defaultOptions: { animationData: delivery },
animationSpeed: 1
};
} }
}; };
</script> </script>

1
vuex.md
View File

@@ -39,4 +39,5 @@ actions = {
... ...
} }
``` ```
Here this handler only needs to do `context.dispatch` and `context.state`. The `{email, password}` will come from the user object we pass as an argument. Inside this handler we can then access any of the state functions we need to do. Here this handler only needs to do `context.dispatch` and `context.state`. The `{email, password}` will come from the user object we pass as an argument. Inside this handler we can then access any of the state functions we need to do.