Implemented password reset function

This commit is contained in:
Ferdinand Thiessen 2021-01-18 16:05:05 +01:00
parent 5a97bfa413
commit 08c29c1cd6
4 changed files with 164 additions and 30 deletions

View File

@ -1,8 +1,5 @@
<template>
<q-page
padding
class="fit row justify-center items-center content-center"
>
<q-page padding class="fit row justify-center items-center content-center">
<q-card class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center">
<q-toolbar class="bg-primary text-white">
<q-toolbar-title>
@ -11,16 +8,13 @@
</q-toolbar>
<q-card-section>
<q-form
ref="LoginForm"
@submit="doLogin"
class="q-gutter-md"
>
<q-form ref="LoginForm" @submit="doLogin" class="q-gutter-md">
<q-input
filled
v-model="userid"
label="Benutzername oder E-Mail"
:rules="rules"
tabindex="1"
/>
<q-input
filled
@ -28,13 +22,17 @@
type="password"
label="Password"
:rules="rules"
tabindex="2"
/>
<div class="row justify-end">
<div class="row justify-between">
<q-btn
label="Login"
type="submit"
color="primary"
label="Passwort vergessen"
type="a"
@click="doReset"
color="secondary"
tabindex="4"
/>
<q-btn label="Login" type="submit" color="primary" tabindex="3" />
</div>
</q-form>
</q-card-section>
@ -54,24 +52,20 @@ export default defineComponent({
/* Stuff for the real login page */
const userid = ref('');
const password = ref('');
const rules = [
(val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!',
];
const rules = [(val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!'];
function doLogin() {
Loading.show({
message: 'Du wirst angemeldet',
message: 'Du wirst angemeldet'
});
root.$store
.dispatch('session/login', {
userid: userid.value,
password: password.value,
password: password.value
})
.then(() => {
const x = root.$route.query['redirect'];
void root.$router.push(
typeof x === 'string' ? { path: x } : mainRoute
);
void root.$router.push(typeof x === 'string' ? { path: x } : mainRoute);
})
.catch((error: { status: number } | undefined) => {
if (error && error.status === 401) {
@ -82,7 +76,7 @@ export default defineComponent({
message: 'Benutzername oder Passwort sind falsch.',
timeout: 10000,
progress: true,
actions: [{ icon: 'mdi-close', color: 'white' }],
actions: [{ icon: 'mdi-close', color: 'white' }]
});
}
})
@ -91,7 +85,38 @@ export default defineComponent({
});
}
return { userid, password, doLogin, rules };
},
function doReset() {
if (userid.value == '') {
Notify.create({
group: false,
type: 'negative',
message: 'Der Benutzername darf nicht leer sein.',
timeout: 10000,
progress: true,
actions: [{ icon: 'mdi-close', color: 'white' }]
});
return;
}
root.$store
.dispatch('session/requestPasswordReset', {
userid: userid.value
})
.then(() => {
userid.value = '';
password.value = '';
Notify.create({
group: false,
type: 'ongoing',
message:
'Sollte der Benutzername korrekt und vorhanden sein, erhälst du jetzt eine E-Mail.',
timeout: 10000,
progress: true,
actions: [{ icon: 'mdi-close', color: 'white' }]
});
});
}
return { userid, password, doLogin, doReset, rules };
}
});
</script>

98
src/pages/Reset.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<q-page padding class="fit row justify-center items-center content-center">
<q-card class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center">
<q-toolbar class="bg-primary text-white">
<q-toolbar-title>
Passwort vergessen
</q-toolbar-title>
</q-toolbar>
<q-card-section>
<q-form ref="ResetForm" @submit="doReset" class="q-gutter-md">
<q-input
filled
v-model="password"
type="password"
label="Passwort"
:rules="rules"
hint="Min. 8 Zeichen"
tabindex="1"
/>
<q-input
filled
v-model="password2"
type="password"
label="Passwort Wiederholung"
:rules="rules"
tabindex="2"
/>
<div class="row justify-end">
<q-btn label="Zurücksetzen" type="submit" color="primary" />
</div>
</q-form>
</q-card-section>
</q-card>
</q-page>
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { Loading, Notify } from 'quasar';
export default defineComponent({
// name: 'PageName'
setup(_, { root }) {
const mainRoute = { name: 'dashboard' };
const password = ref('');
const password2 = ref('');
const rules = [
(val: string) =>
(val && val.length >= 8) || 'Das Passwort muss mindestens 8 Zeichen lang sein!'
];
function doReset() {
if (password.value !== password2.value) {
Notify.create({
group: false,
type: 'negative',
message: 'Die Passwörter stimmen nicht überein!',
timeout: 10000,
progress: true,
actions: [{ icon: 'mdi-close', color: 'white' }]
});
password2.value = '';
return;
}
Loading.show({
message: 'Das Passwort wird zurückgesetzt'
});
root.$store
.dispatch('session/resetPassword', {
password: password.value,
token: root.$route.query.token
})
.catch(error => {
if (error.status == 403) {
Notify.create({
group: false,
type: 'negative',
message: 'Der Link ist abgelaufen!',
timeout: 10000,
progress: true,
actions: [{ icon: 'mdi-close', color: 'white' }]
});
}
})
.finally(() => {
Loading.hide();
void root.$router.replace({ name: 'login' });
});
}
return { password, password2, doReset, rules };
}
});
</script>

View File

@ -72,12 +72,10 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
*/
logout({ dispatch, rootState }) {
if (rootState.session.currentSession) {
dispatch('deleteSession', rootState.session.currentSession.token).catch(
error => {
dispatch('deleteSession', rootState.session.currentSession.token).catch(error => {
console.log(error);
void dispatch('clearCurrent', false);
}
);
});
} else {
void dispatch('clearCurrent', false);
}
@ -145,6 +143,14 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
.finally(() => {
commit('setLoading', false);
});
},
requestPasswordReset({}, data) {
return axios.post('/auth/reset', data);
},
resetPassword({}, data) {
return axios.post('/auth/reset', data).catch((error: AxiosError) => {
return Promise.reject(error.response);
});
}
};

View File

@ -11,6 +11,11 @@ const routes: RouteConfig[] = [
path: 'login',
component: () => import('pages/Login.vue')
},
{
name: 'password_reset',
path: 'reset',
component: () => import('pages/Reset.vue')
},
{
name: 'about_out',
path: 'about',