Added register page

src/auth/index.js

@@ -44,6 +44,29 @@ export default {
       })
   },
 
+  register (context, creds, redirect) {
+    HTTP.post('register', {
+      username: creds.username,
+      email: creds.email,
+      password: creds.password
+    })
+      .then(response => {
+          // eslint-disable-next-line
+        console.log(response)
+          this.login(context, creds, redirect)
+      })
+      .catch(e => {
+        // Hide the loader
+        context.loading = false
+        if (e.response) {
+          context.error = e.response.data.message
+          if (e.response.status === 401) {
+            context.error = 'Wrong username or password.'
+          }
+        }
+      })
+  },
+
   logout () {
     localStorage.removeItem('token')
     router.push({ name: 'login' })

src/components/user/Login.vue

@@ -18,6 +18,7 @@
 					<div class="field is-grouped">
 						<div class="control">
 							<button type="submit" class="button is-link">Login</button>
+							<router-link :to="{ name: 'register' }" class="button">Register</router-link>
 						</div>
 					</div>
 					<div class="notification is-info" v-if="loading">
@@ -34,8 +35,8 @@
 </template>
 
 <script>
-    import auth from '../auth'
+    import auth from '../../auth'
-    import router from '../router'
+    import router from '../../router'
 
     export default {
         data() {
@@ -70,5 +71,7 @@
 </script>
 
 <style scoped>
-
+	.button {
+		margin: 0 0.4em 0 0;
+	}
 </style>

src/components/user/Register.vue

@@ -0,0 +1,101 @@
+<template>
+	<div class="container has-text-centered">
+		<div class="column is-4 is-offset-4">
+			<h2 class="title">Register</h2>
+			<div class="box">
+				<form id="registerform" @submit.prevent="submit">
+					<div class="field">
+						<div class="control">
+							<input type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
+						</div>
+					</div>
+					<div class="field">
+						<div class="control">
+							<input type="text" class="input" name="email" placeholder="E-mail address" v-model="credentials.email" required>
+						</div>
+					</div>
+					<div class="field">
+						<div class="control">
+							<input type="password" class="input" name="password1" placeholder="Password" v-model="credentials.password" required>
+						</div>
+					</div>
+					<div class="field">
+						<div class="control">
+							<input type="password" class="input" name="password2" placeholder="Retype password" v-model="credentials.password2" required>
+						</div>
+					</div>
+
+					<div class="field is-grouped">
+						<div class="control">
+							<button type="submit" class="button is-link">Register</button>
+							<router-link :to="{ name: 'login' }" class="button">Login</router-link>
+						</div>
+					</div>
+					<div class="notification is-info" v-if="loading">
+						Loading...
+					</div>
+					<div class="notification is-danger" v-if="error">
+						{{ error }}
+					</div>
+				</form>
+
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+    import auth from '../../auth'
+    import router from '../../router'
+
+    export default {
+        data() {
+            return {
+                credentials: {
+                    username: '',
+					email: '',
+                    password: '',
+                    password2: '',
+                },
+                error: '',
+                loading: false
+            }
+        },
+        beforeMount() {
+            // Check if the user is already logged in, if so, redirect him to the homepage
+            if (auth.user.authenticated) {
+                router.push({name: 'home'})
+            }
+        },
+        methods: {
+            submit() {
+                this.loading = true
+
+				// eslint-disable-next-line
+				console.log(this.credentials)
+
+                this.error = ''
+
+				if (this.credentials.password2 !== this.credentials.password) {
+                    this.loading = false
+                    this.error = 'Passwords don\'t match'
+					return
+				}
+
+                let credentials = {
+                    username: this.credentials.username,
+                    email: this.credentials.email,
+                    password: this.credentials.password
+                }
+
+                auth.register(this, credentials, 'home')
+            }
+        }
+    }
+</script>
+
+<style scoped>
+	.button {
+		margin: 0 0.4em 0 0;
+	}
+</style>

src/router/index.js

@@ -2,7 +2,9 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 import HomeComponent from '@/components/Home'
-import LoginComponent from '@/components/Login'
+// User Handling
+import LoginComponent from '@/components/user/Login'
+import RegisterComponent from '@/components/user/Register'
 
 Vue.use(Router)
 
@@ -17,6 +19,11 @@ export default new Router({
       path: '/login',
       name: 'login',
       component: LoginComponent
+    },
+    {
+      path: '/register',
+      name: 'register',
+      component: RegisterComponent
     }
   ]
 })