Implemented password reset function
This commit is contained in:
parent
5a97bfa413
commit
08c29c1cd6
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -72,12 +72,10 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
|
|||
*/
|
||||
logout({ dispatch, rootState }) {
|
||||
if (rootState.session.currentSession) {
|
||||
dispatch('deleteSession', rootState.session.currentSession.token).catch(
|
||||
error => {
|
||||
console.log(error);
|
||||
void dispatch('clearCurrent', false);
|
||||
}
|
||||
);
|
||||
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);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue