Implement register and login using vuetify

web/src/pages/Register.vue

@@ -0,0 +1,126 @@
+<!--{{define "title"}}Register{{end}}
+
+{{template "base" .}}
+
+{{define "more-head"}}
+<script>
+function checkPasswordMatchUi() {
+    if(checkPasswordMatch())
+        $("#divCheckPasswordMatch").html("Passwords match.");
+    else
+        $("#divCheckPasswordMatch").html("Passwords do not match!");
+}
+
+function checkPasswordMatch() {
+    var password = $("#password").val();
+    var confirmPassword = $("#password_confirm").val();
+    return password == confirmPassword;
+}
+
+$(document).ready(function () {
+    $("#password, #password_confirm").keyup(checkPasswordMatchUi);
+    $('#invalidCredentials').hide(); 
+    $('#loginForm').ajaxForm({
+        beforeSubmit: function(a, b, c) {
+            var match = checkPasswordMatch();
+            if(!match){
+                $("#divCheckPasswordMatch").fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
+            }
+            return match;
+        },
+        success: function() {
+            window.location.href = "/dashboard";
+        },
+        error: function() {
+            $('#invalidCredentials').show();
+        }
+    }); 
+}); 
+</script> 
+{{end}}
+
+{{define "main"}}
+<form id="loginForm" action="/api/v1/user/register" method="POST" class="center-block">
+    <div class="form-group">
+        <label for="password">Password</label>
+        <input type="password" name="password" id="password" class="form-control" placeholder="Password" />
+        <input type="password" id="password_confirm" class="form-control" placeholder="Verify password" />
+    </div>
+    
+    <div id="divCheckPasswordMatch"></div>
+
+    <div id="invalidCredentials">
+        Username already exists
+    </div>
+
+    <input type="submit" value="Login" class="form-control" />
+
+</form>
+{{end}}-->
+
+<script>
+export default {
+    data() {
+        return {
+            login: {
+                email: "",
+                password: "",
+                name: ""
+            }
+        }
+    },
+    methods: {
+        formSubmit (e) {
+            e.preventDefault();
+            fetch("/api/v1/user/register", {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 = ["Something went wrong!"]);
+
+            // TODO display invalidCredentials
+            // TODO redirect to dashboard on success
+        }
+    }
+}
+</script>
+
+<template>
+    <v-container>
+        <v-row>
+            <v-col cols="12">
+                <v-text-field v-model="login.email" type="text" label="E-Mail" />
+            </v-col>
+            <v-col cols="12">
+                <v-text-field v-model="login.name" type="text" label="Name" />
+            </v-col>
+            <v-col cols="6">
+                <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-col cols="6">
+                <v-text-field v-model="login.password" label="Repeat 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">Register</v-btn>
+	    <p>
+		    Existing user? <router-link to="/login">Login</router-link> instead!
+    	</p>
+    </v-container>
+</template>