Add password reset (#1)

src/App.vue

@@ -70,9 +70,14 @@
 				</div>
 			</div>
 			<div v-else>
+				<div class="container has-text-centered">
+					<div class="column is-4 is-offset-4">
+						<img src="images/logo-full.svg"/>
 							<router-view/>
 					</div>
 				</div>
+			</div>
+		</div>
 		<notifications position="bottom left" />
 	</div>
 </template>
@@ -81,6 +86,7 @@
     import auth from './auth'
     import {HTTP} from './http-common'
 	import message from './message'
+    import router from './router'
 
     export default {
         name: 'app',
@@ -92,6 +98,14 @@
                 namespaces: [],
             }
         },
+		beforeMount() {
+            // Password reset
+            if(this.$route.query.userPasswordReset !== undefined) {
+				localStorage.removeItem('passwordResetToken') // Delete an eventually preexisting old token
+				localStorage.setItem('passwordResetToken', this.$route.query.userPasswordReset)
+                router.push({name: 'passwordReset'})
+			}
+		},
         created() {
             if (this.user.authenticated) {
                 this.loadNamespaces()

src/components/user/Login.vue

@@ -1,7 +1,5 @@
 <template>
-	<div class="container has-text-centered">
+	<div>
-		<div class="column is-4 is-offset-4">
-			<img src="images/logo-full.svg"/>
 		<h2 class="title">Login</h2>
 		<div class="box">
 			<form id="loginform" @submit.prevent="submit">
@@ -20,14 +18,13 @@
 					<div class="control">
 						<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': loading}">Login</button>
 						<router-link :to="{ name: 'register' }" class="button">Register</router-link>
+						<router-link :to="{ name: 'getPasswordReset' }" class="reset-password-link">Reset your password</router-link>
 					</div>
 				</div>
 				<div class="notification is-danger" v-if="error">
 					{{ error }}
 				</div>
 			</form>
-
-			</div>
 		</div>
 	</div>
 </template>
@@ -72,4 +69,9 @@
 	.button {
 		margin: 0 0.4em 0 0;
 	}
+
+	.reset-password-link{
+		display: inline-block;
+		padding-top: 5px;
+	}
 </style>

src/components/user/PasswordReset.vue

@@ -0,0 +1,95 @@
+<template>
+	<div>
+		<h2 class="title">Reset your password</h2>
+		<div class="box">
+			<form id="form" @submit.prevent="submit" v-if="!successMessage">
+				<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-primary" v-bind:class="{ 'is-loading': loading}">Reset your password</button>
+					</div>
+				</div>
+				<div class="notification is-info" v-if="loading">
+					Loading...
+				</div>
+				<div class="notification is-danger" v-if="error">
+					{{ error }}
+				</div>
+			</form>
+			<div v-if="successMessage" class="has-text-centered">
+				<div class="notification is-success">
+					{{ successMessage }}
+				</div>
+				<router-link :to="{ name: 'login' }" class="button is-primary">Login</router-link>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+    import {HTTP} from '../../http-common'
+
+    export default {
+        data() {
+            return {
+                credentials: {
+                    password: '',
+                    password2: '',
+                },
+                error: '',
+				successMessage: '',
+                loading: false
+            }
+        },
+        methods: {
+            submit() {
+                this.loading = true
+                this.error = ''
+
+                if (this.credentials.password2 !== this.credentials.password) {
+                    this.loading = false
+                    this.error = 'Passwords don\'t match'
+                    return
+                }
+
+				let resetPasswordPayload = {
+                    token: localStorage.getItem('passwordResetToken'),
+					new_password: this.credentials.password
+				}
+
+                HTTP.post(`user/password/reset`, resetPasswordPayload)
+                    .then(response => {
+						this.handleSuccess(response)
+                        localStorage.removeItem('passwordResetToken')
+                    })
+                    .catch(e => {
+                        this.error = e.response.data.message
+                    })
+            },
+            handleError(e) {
+                this.loading = false
+                this.error = e.response.data.message
+            },
+            handleSuccess(e) {
+                this.loading = false
+                this.successMessage = e.data.message
+            }
+        }
+    }
+</script>
+
+<style scoped>
+	.button {
+		margin: 0 0.4em 0 0;
+	}
+</style>

src/components/user/Register.vue

@@ -1,7 +1,5 @@
 <template>
-	<div class="container has-text-centered">
+	<div>
-		<div class="column is-4 is-offset-4">
-			<img src="images/logo-full.svg"/>
 		<h2 class="title">Register</h2>
 		<div class="box">
 			<form id="registerform" @submit.prevent="submit">
@@ -39,8 +37,6 @@
 					{{ error }}
 				</div>
 			</form>
-
-			</div>
 		</div>
 	</div>
 </template>

src/components/user/RequestPasswordReset.vue

@@ -0,0 +1,73 @@
+<template>
+	<div>
+		<h2 class="title">Reset your password</h2>
+		<div class="box">
+			<form id="loginform" @submit.prevent="submit" v-if="!isSuccess">
+				<div class="field">
+					<div class="control">
+						<input type="text" class="input" name="username" placeholder="Username" v-model="username" required>
+					</div>
+				</div>
+
+				<div class="field is-grouped">
+					<div class="control">
+						<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': loading}">Send me a password reset link</button>
+						<router-link :to="{ name: 'login' }" class="button">Login</router-link>
+					</div>
+				</div>
+				<div class="notification is-danger" v-if="error">
+					{{ error }}
+				</div>
+			</form>
+			<div v-if="isSuccess" class="has-text-centered">
+				<div class="notification is-success">
+					Check your inbox! You should have a mail with instructions on how to reset your password.
+				</div>
+				<router-link :to="{ name: 'login' }" class="button is-primary">Login</router-link>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+    import {HTTP} from '../../http-common'
+
+    export default {
+        data() {
+            return {
+                username: '',
+                error: '',
+                isSuccess: false,
+                loading: false
+            }
+        },
+        methods: {
+            submit() {
+                this.loading = true
+                this.error = ''
+                let credentials = {
+                    user_name: this.username,
+                }
+
+                HTTP.post(`user/password/token`, credentials)
+                    .then(() => {
+                        this.loading = false
+						this.isSuccess = true
+                    })
+                    .catch(e => {
+                        this.handleError(e)
+                    })
+            },
+            handleError(e) {
+                this.loading = false
+                this.error = e.response.data.message
+            },
+        }
+    }
+</script>
+
+<style scoped>
+	.button {
+		margin: 0 0.4em 0 0;
+	}
+</style>

src/router/index.js

@@ -5,6 +5,8 @@ import HomeComponent from '@/components/Home'
 // User Handling
 import LoginComponent from '@/components/user/Login'
 import RegisterComponent from '@/components/user/Register'
+import PasswordResetComponent from '@/components/user/PasswordReset'
+import GetPasswordResetComponent from '@/components/user/RequestPasswordReset'
 // List Handling
 import ShowListComponent from '@/components/lists/ShowList'
 import NewListComponent from '@/components/lists/NewList'
@@ -20,6 +22,7 @@ import NewTeamComponent from '@/components/teams/NewTeam'
 Vue.use(Router)
 
 export default new Router({
+  mode:'history',
   routes: [
     {
       path: '/',
@@ -31,6 +34,16 @@ export default new Router({
       name: 'login',
       component: LoginComponent
     },
+    {
+      path: '/get-password-reset',
+      name: 'getPasswordReset',
+      component: GetPasswordResetComponent
+    },
+    {
+      path: '/password-reset',
+      name: 'passwordReset',
+      component: PasswordResetComponent
+    },
     {
       path: '/register',
       name: 'register',

todo.md

@@ -58,3 +58,7 @@
 * [ ] Erklärungen zu was wie funktioniert -> wiki?
 * [ ] Google fonts raus (sollen von lokal geladen werden)
 * [ ] Ladeanimationen erst nach 100ms anzeigen, sonst wird das überflüssigerweise angezeigt
+
+* [ ] Userstuff
+    * [ ] Email-Verification
+    * [x] Password forgot