From 000139b9ae020547e4e0c9f3069e71669894d640 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Wed, 5 May 2021 16:47:47 +0200
Subject: [PATCH] fix the login

---
 .../src/App.vue                               | 23 +------------------
 .../src/components/nav/TheHeader.vue          | 14 +++++++----
 .../src/store/index.js                        |  2 ++
 .../src/store/modules/auth/actions.js         |  8 +++++++
 .../src/store/modules/auth/getters.js         |  5 ++++
 .../src/store/modules/auth/index.js           | 15 ++++++++++++
 .../src/store/modules/auth/mutations.js       |  8 +++++++
 7 files changed, 48 insertions(+), 27 deletions(-)
 create mode 100644 2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/actions.js
 create mode 100644 2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/getters.js
 create mode 100644 2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/index.js
 create mode 100644 2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/mutations.js

diff --git a/2021-05-05_vuex-11-a-challenge-starting-code/src/App.vue b/2021-05-05_vuex-11-a-challenge-starting-code/src/App.vue
index 0fd3970..d47afcd 100644
--- a/2021-05-05_vuex-11-a-challenge-starting-code/src/App.vue
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/App.vue
@@ -9,28 +9,7 @@ import TheHeader from './components/nav/TheHeader.vue';
 export default {
   components: {
     TheHeader
-  },
-  data() {
-    return {
-      isLoggedIn: false,
-      cart: { items: [], total: 0, qty: 0 },
-    };
-  },
-  provide() {
-    return {
-      isLoggedIn: this.isLoggedIn,
-      login: this.login,
-      logout: this.logout,
-    };
-  },
-  methods: {
-    login() {
-      this.isLoggedIn = true;
-    },
-    logout() {
-      this.isLoggedIn = false;
-    },
-  },
+  }
 };
 </script>
 
diff --git a/2021-05-05_vuex-11-a-challenge-starting-code/src/components/nav/TheHeader.vue b/2021-05-05_vuex-11-a-challenge-starting-code/src/components/nav/TheHeader.vue
index 6564290..eaa08a3 100644
--- a/2021-05-05_vuex-11-a-challenge-starting-code/src/components/nav/TheHeader.vue
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/components/nav/TheHeader.vue
@@ -12,24 +12,28 @@
           <router-link to="/cart">Cart</router-link>
           <base-badge mode="elegant">{{ quantity }}</base-badge>
         </li>
-        <li v-if="isLoggedIn">
+        <li v-if="isAuthenticated">
           <router-link to="/admin">Admin</router-link>
         </li>
       </ul>
     </nav>
     <div>
-      <button v-if="!isLoggedIn" @click="login">Login</button>
-      <button v-if="isLoggedIn" @click="logout">Logout</button>
+      <button v-if="!isAuthenticated" @click="login">Login</button>
+      <button v-if="isAuthenticated" @click="logout">Logout</button>
     </div>
   </header>
 </template>
 
 <script>
+import { mapActions } from 'vuex';
 import { mapGetters } from 'vuex';
 export default {
-  inject: ['isLoggedIn', 'login', 'logout'],
   computed: {
-    ...mapGetters('cart', ['quantity'])
+    ...mapGetters('cart', ['quantity']),
+    ...mapGetters('auth', ['isAuthenticated'])
+  },
+  methods: {
+    ...mapActions('auth', ['login', 'logout'])
   }
 };
 </script>
diff --git a/2021-05-05_vuex-11-a-challenge-starting-code/src/store/index.js b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/index.js
index ae8b857..4fc4a62 100644
--- a/2021-05-05_vuex-11-a-challenge-starting-code/src/store/index.js
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/index.js
@@ -1,10 +1,12 @@
 import { createStore } from 'vuex';
 
+import authModule from './modules/auth/index.js';
 import cartModule from './modules/cart/index.js';
 import productsModule from './modules/products/index.js';
 
 const store = createStore({
   modules: {
+    auth: authModule,
     cart: cartModule,
     products: productsModule
   },
diff --git a/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/actions.js b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/actions.js
new file mode 100644
index 0000000..dec4ba5
--- /dev/null
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/actions.js
@@ -0,0 +1,8 @@
+export default {
+  logout(context) {
+    context.commit('logout');
+  },
+  login(context) {
+    context.commit('login');
+  }
+};
diff --git a/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/getters.js b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/getters.js
new file mode 100644
index 0000000..dc90059
--- /dev/null
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/getters.js
@@ -0,0 +1,5 @@
+export default {
+  isAuthenticated(state) {
+    return state.isLoggedIn;
+  }
+};
diff --git a/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/index.js b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/index.js
new file mode 100644
index 0000000..fc9ba87
--- /dev/null
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/index.js
@@ -0,0 +1,15 @@
+import authActions from './actions.js';
+import authGetters from './getters.js';
+import authMutations from './mutations.js';
+
+export default {
+  namespaced: true,
+  state() {
+    return {
+      isLoggedIn: false
+    };
+  },
+  actions: authActions,
+  getters: authGetters,
+  mutations: authMutations
+};
diff --git a/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/mutations.js b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/mutations.js
new file mode 100644
index 0000000..d07dec9
--- /dev/null
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/auth/mutations.js
@@ -0,0 +1,8 @@
+export default {
+  login(state) {
+    state.isLoggedIn = true;
+  },
+  logout(state) {
+    state.isLoggedIn = false;
+  }
+};