local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add password reset (#1)

Browse source
This commit is contained in:
konrad 2018-11-01 21:34:29 +00:00 committed by Gitea
parent 17d5738aa3
commit c0d5f6e99a
8 changed files with 260 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/App.vue
View file

@ -70,7 +70,12 @@
</div> </div>
</div> </div>
<div v-else> <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>
</div> </div>
<notifications position="bottom left" /> <notifications position="bottom left" />
@ -81,6 +86,7 @@
import auth from './auth' import auth from './auth'
import {HTTP} from './http-common' import {HTTP} from './http-common'
import message from './message' import message from './message'
import router from './router'
export default { export default {
name: 'app', name: 'app',
@ -92,6 +98,14 @@
namespaces: [], 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() { created() {
if (this.user.authenticated) { if (this.user.authenticated) {
this.loadNamespaces() this.loadNamespaces()

2
src/components/Home.vue
View file

@ -18,7 +18,7 @@
}, },
beforeMount() { beforeMount() {
// Check if the user is already logged in, if so, redirect him to the homepage // 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'}) router.push({name: 'login'})
} }
}, },

52
src/components/user/Login.vue
View file

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

95
src/components/user/PasswordReset.vue Normal file
View file

@ -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>

68
src/components/user/Register.vue
View file

@ -1,46 +1,42 @@
<template> <template>
<div class="container has-text-centered"> <div>
<div class="column is-4 is-offset-4"> <h2 class="title">Register</h2>
<img src="images/logo-full.svg"/> <div class="box">
<h2 class="title">Register</h2> <form id="registerform" @submit.prevent="submit">
<div class="box"> <div class="field">
<form id="registerform" @submit.prevent="submit"> <div class="control">
<div class="field"> <input type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
<div class="control">
<input type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
</div>
</div> </div>
<div class="field"> </div>
<div class="control"> <div class="field">
<input type="text" class="input" name="email" placeholder="E-mail address" v-model="credentials.email" required> <div class="control">
</div> <input type="text" class="input" name="email" placeholder="E-mail address" v-model="credentials.email" required>
</div> </div>
<div class="field"> </div>
<div class="control"> <div class="field">
<input type="password" class="input" name="password1" placeholder="Password" v-model="credentials.password" required> <div class="control">
</div> <input type="password" class="input" name="password1" placeholder="Password" v-model="credentials.password" required>
</div> </div>
<div class="field"> </div>
<div class="control"> <div class="field">
<input type="password" class="input" name="password2" placeholder="Retype password" v-model="credentials.password2" required> <div class="control">
</div> <input type="password" class="input" name="password2" placeholder="Retype password" v-model="credentials.password2" required>
</div> </div>
</div>
<div class="field is-grouped"> <div class="field is-grouped">
<div class="control"> <div class="control">
<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': loading}">Register</button> <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> <router-link :to="{ name: 'login' }" class="button">Login</router-link>
</div>
</div> </div>
<div class="notification is-info" v-if="loading"> </div>
Loading... <div class="notification is-info" v-if="loading">
</div> Loading...
<div class="notification is-danger" v-if="error"> </div>
{{ error }} <div class="notification is-danger" v-if="error">
</div> {{ error }}
</form> </div>
</form>
</div>
</div> </div>
</div> </div>
</template> </template>

73
src/components/user/RequestPasswordReset.vue Normal file
View file

@ -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>

13
src/router/index.js
View file

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

4
todo.md
View file

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