Add password reset (#1)
This commit is contained in:
konrad
Gitea
parent
17d5738aa3
commit
c0d5f6e99a
8 changed files with 260 additions and 63 deletions
16
src/App.vue
16
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()
|
||||
|
|
|
|||
|
|
@ -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'})
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
95
src/components/user/PasswordReset.vue
Normal file
95
src/components/user/PasswordReset.vue
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
73
src/components/user/RequestPasswordReset.vue
Normal file
73
src/components/user/RequestPasswordReset.vue
Normal 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>
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
4
todo.md
4
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
|
||||
Loading…
Reference in a new issue