Implement register and login using vuetify

web/src/pages/Login.vue

@@ -7,11 +7,12 @@ export default {
     },
     data() {
         return {
-            error: false,
+            error: [],
             login: {
                 user: "", 
                 password: ""
-            }
+            },
+            showPassword: false
         }
     },
     mounted () {
@@ -20,14 +21,13 @@ export default {
     methods: {
         formSubmit (e) {
             e.preventDefault();
-            console.log("uiae");
             fetch("/api/v1/user/login", {method: "POST", body: JSON.stringify(this.$data.login)})
                 .then(x => x.json())
                 .then(x => {
                     this.$data.error = ""
                     this.$store.commit("setToken", x.token);
                 })
-                .catch(x => this.$data.error = "Error");
+                .catch(x => this.$data.error = ["The entered credentials are invalid!"]);
 
             // TODO display invalidCredentials
             // TODO redirect to dashboard on success
@@ -37,24 +37,27 @@ export default {
 </script>
 
 <template>
-<form id="loginForm" @submit="formSubmit" class="center-block">
-	<div class="form-group">
-		<label for="username">User</label>
-		<input type="text" class="form-control" placeholder="User" v-model="login.user" />
-	</div>
-
-	<div class="form-group">
-		<label for="password">Password</label>
-		<input type="password" class="form-control" placeholder="Password" v-model="login.password" />
-		<p v-if="error">
-			The entered credentials are invalid
-		</p>
-	</div>
-
-	<input type="submit" value="Login" class="btn btn-default" on/>
-
-	<p>
-		New user? <a href="/register">Register</a> instead!
-	</p>
-</form>
+    <v-container>
+        <v-row>
+            <v-col cols="12">
+                <v-text-field v-model="login.user" type="text" label="Username" />
+            </v-col>
+            <v-col cols="12">
+                <v-text-field v-model="login.password" label="Password"
+                    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'" 
+                    :type="showPassword ? 'text' : 'password'"
+                    @click:append="showPassword = showPassword"
+                    :error-message="error"
+                    error-count="2"
+                    error />
+            </v-col>
+        </v-row>
+        <div class="form-group">
+            {{ error }}
+        </div>
+        <v-btn type="submit" @click="formSubmit">Login</v-btn>
+        <p>
+	        New user? <router-link to="/register">Register</router-link> instead!
+        </p>
+    </v-container>
 </template>