finished tutorial

src/views/About.vue

@@ -1,5 +1,49 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <!-- <br /> -->
+    <v-card class="d-inline-flex">
+      <animation></animation>
+    </v-card>
   </div>
 </template>
+
+<script>
+import Animation from "../components/Animation";
+// import Lottie from "vue-lottie";
+import * as delivery from "@/assets/lottie/halloween.json";
+export default {
+  components: {
+    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>
+
+<style lang="scss" scoped></style>

src/views/Home.vue

@@ -1,11 +1,49 @@
 <template>
   <div>
-    <!-- <h1>Hello {{ this.$store.getters.userEmail }}</h1> -->
+    <v-btn rounded color="primary" class="padme" @click="showJWT"
+      >Show JWT</v-btn
+    >
+    <h1 style=""></h1>
   </div>
 </template>
 
 <script>
-
+import { Auth } from "aws-amplify";
+import Lottie from "vue-lottie";
+export default {
+  data() {
+    return {
+      jwt: "",
+      tempHeaders: {}
+    };
+  },
+  methods: {
+    async showJWT() {
+      try {
+        this.jwt = await Auth.currentSession();
+        this.tempHeaders = {
+          Authorization: `Bearer ${(await Auth.currentSession())
+            .getIdToken()
+            .getJwtToken()}`
+        };
+      } finally {
+        console.log(this.jwt);
+        let id = this.jwt.getIdToken();
+        console.log(id);
+        let jwt = id.getJwtToken();
+        console.log(jwt);
+        console.log(this.tempHeaders)
+        alert(this.tempHeaders.Authorization)
+        console.log(Lottie)
+        // alert(this.jwt);
+      }
+    }
+  }
+};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.padme {
+  margin-left: 10px;
+}
+</style>

src/views/Untitled-5.md

@@ -0,0 +1,134 @@
+# Managing sign in/out + displaying name
+
+## Create the Vuex store
+
+### state
+
+Your state should contain 3 items:
+
+- authorized:bool = flag if logged in or not.
+- user: str = user object.
+- userEmail: str = username or email.
+
+### mutations
+
+You should define two mutations (to update this state):
+
+```javascript
+  mutations: {
+    user(state, user) {
+      state.authorized =
+        !!user && user.attributes && user.attributes.email_verified;
+      state.user = user;
+    },
+    userEmail(state, userEmail) {
+      state.userEmail = userEmail;
+    }
+  },
+```
+
+- When you set the user state you should check to make sure the user object you pass in exists and set the authorized flag at the same time.
+
+### actions
+
+You should define an action that fetches the user. This should call the `getUser` method of whatever auth system you're using and pass this in to the method.
+
+This `getUser` dispatch should either get the user and set the store state, or set it to null if no user exists. This way, any interaction with `getUser` will make sure the store is up to date.
+
+```javascript
+  actions: {
+    async fetchUser({ commit }) {
+      try {
+        const user = await Auth.currentAuthenticatedUser();
+        const expires =
+          user.getSignInUserSession().getIdToken().payload.exp -
+          Math.floor(new Date().getTime() / 1000);
+        console.log(`Token expires in ${expires} seconds.`);
+        commit("user", user);
+        commit("userEmail", user.attributes.email);
+      } catch (err) {
+        commit("user", null);
+        commit("userEmail", null);
+      }
+    }
+  },
+```
+
+### getters
+
+You should define getters to access the state. These getters will cache - so they will only update if one of the things used to calculate the state updates.
+
+```javascript
+  getters: {
+    userEmail: state => {
+      return state.userEmail;
+    },
+    authorized: state => {
+      return state.authorized;
+    }
+  }
+```
+
+## Triggering state for apps
+
+In addition to getting the user to determine router actions, you should get the user in the main component so you can set the state.
+
+In the main view (parent of all components `App.vue`) you should define a `created` method. This method should:
+
+- Fetch the user.
+- Change the state to reflect this.
+
+```javascript
+  async created() {
+    try {
+      await this.$store.dispatch("fetchUser");
+    } catch (error) {
+      console.log(error);
+    } finally {
+      console.log(this.email);
+      console.log(this.$store.state.userEmail);
+    }
+  },
+```
+
+This needs to be done right at the start to make sure this triggers a state change before anything else.
+
+In the views for signing in/out/registering etc you should make sure that when you call the auth methods you wrote, that you also update the state at this time.
+This way, any component in the app can use the state to determine if someone is logged in, and display/toggle components dynamically.
+
+A signin method for a button might look like:
+
+```javascript
+    async submit() {
+      if (this.$refs.form.validate()) {
+        console.log(
+          `SIGN IN username: ${this.username}, password: ${this.password}`
+        );
+        try {
+          await signIn(this.username, this.password);
+        } catch (err) {
+          console.log(err);
+        } finally {
+          this.$store.dispatch("fetchUser");
+        }
+        console.log("Signed in");
+      }
+    }
+```
+
+A sign out button might look like:
+
+```javascript
+    async dosignOut() {
+      try {
+        await signOut();
+      } finally {
+        this.$store.dispatch("fetchUser");
+      }
+    }
+```
+
+Remember:
+
+- Call `this.$store.dispatch("fetchUser)` when you sign in - do it in a try/finally block to make sure the state gets updated after the ajax call.
+- Call `this.$store.dispatch("fetchUser)` when you sign out do it in a try/finally bock to make sure the state gets updated after the ajax call.