From c0d5f6e99a02a73ce03c47b7ec2b9a61bd3fe1b3 Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Thu, 1 Nov 2018 21:34:29 +0000
Subject: [PATCH] Add password reset (#1)

---
 src/App.vue                                  | 16 +++-
 src/components/Home.vue                      |  2 +-
 src/components/user/Login.vue                | 52 +++++------
 src/components/user/PasswordReset.vue        | 95 ++++++++++++++++++++
 src/components/user/Register.vue             | 68 +++++++-------
 src/components/user/RequestPasswordReset.vue | 73 +++++++++++++++
 src/router/index.js                          | 13 +++
 todo.md                                      |  4 +
 8 files changed, 260 insertions(+), 63 deletions(-)
 create mode 100644 src/components/user/PasswordReset.vue
 create mode 100644 src/components/user/RequestPasswordReset.vue

diff --git a/src/App.vue b/src/App.vue
index 1cf9cbd79..96b68a43a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -70,7 +70,12 @@
 				</div>
 			</div>
 			<div v-else>
-				<router-view/>
+				<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" />
@@ -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()
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 32acba073..0e28beff1 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -18,7 +18,7 @@
         },
         beforeMount() {
             // Check if the user is already logged in, if so, redirect him to the homepage
-            if (!auth.user.authenticated) {
+			if (!auth.user.authenticated) {
                 router.push({name: 'login'})
             }
         },
diff --git a/src/components/user/Login.vue b/src/components/user/Login.vue
index c51b5214a..e7dd3596d 100644
--- a/src/components/user/Login.vue
+++ b/src/components/user/Login.vue
@@ -1,33 +1,30 @@
 <template>
-	<div class="container has-text-centered">
-		<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">
-					<div class="field">
-						<div class="control">
-							<input type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
-						</div>
+	<div>
+		<h2 class="title">Login</h2>
+		<div class="box">
+			<form id="loginform" @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 class="field">
-						<div class="control">
-							<input type="password" class="input" name="password" placeholder="Password" v-model="credentials.password" required>
-						</div>
+				</div>
+				<div class="field">
+					<div class="control">
+						<input type="password" class="input" name="password" placeholder="Password" v-model="credentials.password" required>
 					</div>
+				</div>
 
-					<div class="field is-grouped">
-						<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>
-						</div>
+				<div class="field is-grouped">
+					<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 class="notification is-danger" v-if="error">
-						{{ error }}
-					</div>
-				</form>
-
-			</div>
+				</div>
+				<div class="notification is-danger" v-if="error">
+					{{ error }}
+				</div>
+			</form>
 		</div>
 	</div>
 </template>
@@ -72,4 +69,9 @@
 	.button {
 		margin: 0 0.4em 0 0;
 	}
+
+	.reset-password-link{
+		display: inline-block;
+		padding-top: 5px;
+	}
 </style>
diff --git a/src/components/user/PasswordReset.vue b/src/components/user/PasswordReset.vue
new file mode 100644
index 000000000..c42a5ca7f
--- /dev/null
+++ b/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>
diff --git a/src/components/user/Register.vue b/src/components/user/Register.vue
index e489aaff9..8e69532a0 100644
--- a/src/components/user/Register.vue
+++ b/src/components/user/Register.vue
@@ -1,46 +1,42 @@
 <template>
-	<div class="container has-text-centered">
-		<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">
-					<div class="field">
-						<div class="control">
-							<input type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
-						</div>
+	<div>
+		<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 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="text" class="input" name="email" placeholder="E-mail address" v-model="credentials.email" required>
 					</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="password1" placeholder="Password" v-model="credentials.password" required>
 					</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">
+					<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}">Register</button>
-							<router-link :to="{ name: 'login' }" class="button">Login</router-link>
-						</div>
+				<div class="field is-grouped">
+					<div class="control">
+						<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': loading}">Register</button>
+						<router-link :to="{ name: 'login' }" class="button">Login</router-link>
 					</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 class="notification is-info" v-if="loading">
+					Loading...
+				</div>
+				<div class="notification is-danger" v-if="error">
+					{{ error }}
+				</div>
+			</form>
 		</div>
 	</div>
 </template>
diff --git a/src/components/user/RequestPasswordReset.vue b/src/components/user/RequestPasswordReset.vue
new file mode 100644
index 000000000..038a52aef
--- /dev/null
+++ b/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>
diff --git a/src/router/index.js b/src/router/index.js
index a95dc4387..9b723c8ba 100644
--- a/src/router/index.js
+++ b/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',
diff --git a/todo.md b/todo.md
index bcfff01df..63545a6bd 100644
--- a/todo.md
+++ b/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
\ No newline at end of file