added login stuff

src/components/Login.vue

@@ -1,44 +1,66 @@
 <template>
   <div>
-    <form novalidate @submit.prevent="performLogin">
+
+    <form novalidate @submit.prevent="performLogin" @input="loginCredsChanged">
       <md-card-content>
+        <md-content class="text-alert" v-if="invalidLogin">Wrong username or password</md-content>
         <md-field>
           <label>Username</label>
-          <md-input :disabled="processing"></md-input>
+          <md-input :disabled="authInProgress" v-model="creds.name"></md-input>
         </md-field>
 
         <md-field>
           <label>Password</label>
-          <md-input :disabled="processing" type="password"></md-input>
+          <md-input :disabled="authInProgress" v-model="creds.password" type="password"></md-input>
         </md-field>
 
       </md-card-content>
 
       <md-card-actions>
-        <md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate" v-if="processing"
+        <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="processing">Login</md-button>
+        <md-button type="submit" class="md-primary" :disabled="authInProgress">Login</md-button>
       </md-card-actions>
     </form>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   name: "Login",
   data() {
     return {
-      processing: false
+      creds: {
+        name: "",
+        password: ""
+      },
+      invalidLogin: false
     }
   },
   methods: {
     performLogin() {
-      this.processing = true;
+      this.$store.dispatch("performLogin", this.creds).then(() => {
+        this.$router.push({name: 'Dashboard'});
+      }).catch(() => {
+        this.invalidLogin = true;
+      })
+    },
+    loginCredsChanged() {
+      this.invalidLogin = false;
     }
+  },
+  computed: {
+    ...mapGetters(['authInProgress'])
   }
 }
 </script>
 
 <style scoped>
+.text-alert {
+  color: red;
+  font-weight: bold;
+}
 
 </style>

src/components/Register.vue

@@ -5,41 +5,56 @@
 
         <md-field>
           <label>Username</label>
-          <md-input :disabled="processing"></md-input>
+          <md-input v-model="form.name" :disabled="authInProgress"></md-input>
         </md-field>
 
         <md-field :md-toggle-password="false">
           <label>Password</label>
-          <md-input type="password" :disabled="processing"></md-input>
+          <md-input v-model="form.password" type="password" :disabled="authInProgress"></md-input>
         </md-field>
 
         <md-field :md-toggle-password="false">
           <label>Confirm password</label>
-          <md-input :disabled="processing" type="password"></md-input>
+          <md-input v-model="form.passwordConfirm" :disabled="authInProgress" type="password"></md-input>
         </md-field>
 
       </md-card-content>
 
       <md-card-actions>
-        <md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate" v-if="processing"
+        <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="processing">Register</md-button>
+        <md-button type="submit" class="md-primary" :disabled="authInProgress && passwordGood">Register</md-button>
       </md-card-actions>
     </form>
   </div>
 </template>
 
 <script>
+import {mapGetters} from "vuex";
+
 export default {
   name: "Register",
   data() {
     return {
-      processing: false
+      form: {
+        name: "",
+        password: "",
+        passwordConfirm: ""
+      }
     }
   },
   methods: {
     performRegister() {
-      this.processing = true;
+      const creds = {name: this.form.name, password: this.form.password};
+      this.$store.dispatch("performRegister", creds).then(() => {
+        this.$router.push({name: 'Dashboard'});
+      })
+    }
+  },
+  computed: {
+    ...mapGetters(['authInProgress']),
+    passwordGood() {
+      return this.form.password !== "" && this.form.password === this.form.passwordConfirm;
     }
   }
 }

src/components/WorkspaceDrawerContent.vue

@@ -13,7 +13,7 @@
       </md-list-item>
 
       <md-list-item>
-        <md-button class="md-raised md-accent">Logout</md-button>
+        <md-button class="md-raised md-accent" @click="performLogout">Logout</md-button>
       </md-list-item>
 
     </md-list>
@@ -23,7 +23,14 @@
 
 <script>
 export default {
-  name: "WorkspaceDrawerContent"
+  name: "WorkspaceDrawerContent",
+  methods: {
+    performLogout() {
+      this.$store.dispatch("performLogout").then(() => {
+        this.$router.push({name: "Welcome"})
+      })
+    }
+  }
 }
 </script>