Register fixed

src/components/Login.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
 
-    <form novalidate @submit.prevent="performLogin" @input="loginCredsChanged">
+    <form novalidate @submit.prevent="performLogin" @input="invalidLogin = false">
       <md-card-content>
         <md-content class="text-alert" v-if="invalidLogin">Wrong username or password</md-content>
         <md-field>
@@ -18,7 +18,7 @@
 
       <md-card-actions>
         <md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate" v-if="authInProgress"
-                             class="md-accent"></md-progress-spinner>
+                             class="md-accent"/>
         <md-button type="submit" class="md-primary" :disabled="authInProgress">Login</md-button>
       </md-card-actions>
     </form>
@@ -46,9 +46,6 @@ export default {
       }).catch(() => {
         this.invalidLogin = true;
       })
-    },
-    loginCredsChanged() {
-      this.invalidLogin = false;
     }
   },
   computed: {

src/components/Register.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <form novalidate @submit.prevent="performRegister">
+    <form novalidate @submit.prevent="performRegister" @input="duplicate = false">
       <md-card-content>
-
+        <md-content class="text-alert" v-if="duplicate">Username already taken</md-content>
         <md-field>
           <label>Username</label>
           <md-input v-model="form.name" :disabled="authInProgress"></md-input>
@@ -22,7 +22,7 @@
 
       <md-card-actions>
         <md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate" v-if="authInProgress"
-                             class="md-accent"></md-progress-spinner>
+                             class="md-accent"/>
         <md-button type="submit" class="md-primary" :disabled="authInProgress || !passwordGood">Register
         </md-button>
       </md-card-actions>
@@ -41,7 +41,8 @@ export default {
         name: "",
         password: "",
         passwordConfirm: ""
-      }
+      },
+      duplicate: false
     }
   },
   methods: {
@@ -49,6 +50,9 @@ export default {
       const creds = {name: this.form.name, password: this.form.password};
       this.$store.dispatch("auth/performRegister", creds).then(() => {
         this.$router.push({name: 'Dashboard'});
+      }).catch(() => {
+        // Interpret any error returned by the server as conflict
+        this.duplicate = true;
       })
     }
   },
@@ -62,5 +66,8 @@ export default {
 </script>
 
 <style scoped>
-
+.text-alert {
+  color: red !important;
+  font-weight: bold;
+}
 </style>