99 lines
2.6 KiB
Vue
99 lines
2.6 KiB
Vue
|
<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>
|