Fixed auth

src/components/Login.vue

@@ -41,7 +41,7 @@ export default {
   },
   methods: {
     performLogin() {
-      this.$store.dispatch("performLogin", this.creds).then(() => {
+      this.$store.dispatch("auth/performLogin", this.creds).then(() => {
         this.$router.push({name: 'Dashboard'});
       }).catch(() => {
         this.invalidLogin = true;
@@ -52,14 +52,14 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['authInProgress'])
+    ...mapGetters('auth', ['authInProgress'])
   }
 }
 </script>
 
 <style scoped>
 .text-alert {
-  color: red;
+  color: red !important;
   font-weight: bold;
 }
 

src/components/Register.vue

@@ -23,7 +23,8 @@
       <md-card-actions>
         <md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate" v-if="authInProgress"
                              class="md-accent"></md-progress-spinner>
-        <md-button type="submit" class="md-primary" :disabled="authInProgress && passwordGood">Register</md-button>
+        <md-button type="submit" class="md-primary" :disabled="authInProgress || !passwordGood">Register
+        </md-button>
       </md-card-actions>
     </form>
   </div>
@@ -46,13 +47,13 @@ export default {
   methods: {
     performRegister() {
       const creds = {name: this.form.name, password: this.form.password};
-      this.$store.dispatch("performRegister", creds).then(() => {
+      this.$store.dispatch("auth/performRegister", creds).then(() => {
         this.$router.push({name: 'Dashboard'});
       })
     }
   },
   computed: {
-    ...mapGetters(['authInProgress']),
+    ...mapGetters('auth', ['authInProgress']),
     passwordGood() {
       return this.form.password !== "" && this.form.password === this.form.passwordConfirm;
     }

src/components/WorkspaceDrawerContent.vue

@@ -8,8 +8,8 @@
 
     <md-list>
       <md-list-item>
-        <md-avatar class="md-avatar-icon">J</md-avatar>
+        <md-avatar class="md-avatar-icon">{{ avatarText }}</md-avatar>
-        <span class="md-list-item-text">Joska</span>
+        <span class="md-list-item-text">{{ $store.state.auth.name }}</span>
       </md-list-item>
 
       <md-list-item>
@@ -26,10 +26,15 @@ export default {
   name: "WorkspaceDrawerContent",
   methods: {
     performLogout() {
-      this.$store.dispatch("performLogout").then(() => {
+      this.$store.dispatch("auth/performLogout").then(() => {
         this.$router.push({name: "Welcome"})
       })
     }
+  },
+  computed: {
+    avatarText() {
+      return this.$store.state.auth.name.slice(0,2);
+    }
   }
 }
 </script>

src/router/index.js

@@ -52,7 +52,7 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
 
-    const loggedin = store.getters.isLoggedIn;
+    const loggedin = store.getters["auth/isLoggedIn"];
 
     const visitAllowed = to.matched.some(record => record.meta.allowVisit(loggedin))
 

src/store/auth.js

@@ -8,32 +8,31 @@ const baseURL = process.env.VUE_APP_API_LOCATION;
 Vue.use(Vuex)
 
 export default {
+    namespaced: true,
     state() {
         return {
-            auth: {
             processing: false,
             token: localStorage.getItem(JWT_KEY_NAME) || '',
             name: ''
         }
-        }
     },
     mutations: {
         auth_started(state) {
-            state.auth.processing = true;
+            state.processing = true;
         },
-        auth_success(state, token, name) {
+        auth_success(state, {token, name}) {
-            state.auth.processing = false;
+            state.processing = false;
-            state.auth.token = token;
+            state.token = token;
-            state.auth.name = name;
+            state.name = name;
         },
         auth_fail(state) {
-            state.auth.processing = false;
+            state.processing = false;
-            state.auth.token = '';
+            state.token = '';
-            state.auth.name = '';
+            state.name = '';
         },
         logout(state) {
-            state.auth.token = '';
+            state.token = '';
-            state.auth.name = '';
+            state.name = '';
         }
     },
     actions: {
@@ -47,9 +46,8 @@ export default {
                         return reject();
                     }
 
-                    const user = creds.name;
                     localStorage.setItem(JWT_KEY_NAME, token)
-                    commit('auth_success', token, user)
+                    commit('auth_success', {token, name: creds.name})
                     return resolve(resp);
                 }).catch(err => {
                     commit('auth_fail')
@@ -68,9 +66,9 @@ export default {
                         return reject();
                     }
 
-                    const user = creds.name;
+
                     localStorage.setItem(JWT_KEY_NAME, token)
-                    commit('auth_success', token, user)
+                    commit('auth_success', {token, name: creds.name})
                     resolve(resp)
                 }).catch(err => {
                     commit('auth_fail')
@@ -90,10 +88,10 @@ export default {
     modules: {},
     getters: {
         isLoggedIn(state) {
-            return !!state.auth.token;
+            return !!state.token;
         },
         authInProgress(state) {
-            return state.auth.processing;
+            return state.processing;
         }
     }
 }