91 lines
2.5 KiB
Vue
91 lines
2.5 KiB
Vue
<script setup>
|
|
import {reactive, ref} from "vue";
|
|
import {useMeta, useQuasar} from "quasar";
|
|
import {errorObject, successObject} from "src/composables/dialog";
|
|
import {useAppStore} from "stores/App";
|
|
import {isRequired, isValidEmail} from "src/composables/form/rules";
|
|
import {api} from "boot/axios";
|
|
import {metaData} from "src/composables/meta";
|
|
|
|
const $q = useQuasar();
|
|
|
|
useAppStore().setPageTitle("Zapomenuté heslo");
|
|
useMeta(() => metaData({
|
|
title: "Zapomenuté heslo",
|
|
index: false
|
|
}));
|
|
|
|
const requestPasswordChange = async () => {
|
|
if (!form.value.validate()) return;
|
|
|
|
try {
|
|
await api.post('/forgotten-password/request', formData);
|
|
$q.notify(successObject("Žádost o změnu hesla odeslána, zkontroluj si svůj e-mail."));
|
|
} catch (e) {
|
|
const {response} = e;
|
|
if (response.status === 404) {
|
|
$q.notify(errorObject(`E-mail ${formData.email} není registrovaný.`));
|
|
} else {
|
|
console.error(response)
|
|
$q.notify(errorObject("Při odesílání se stala chyba. Zkus to za chvíli znovu."));
|
|
}
|
|
}
|
|
}
|
|
|
|
const form = ref(null);
|
|
const formData = reactive({
|
|
email: "",
|
|
});
|
|
|
|
|
|
const rules = {
|
|
email: [isRequired, isValidEmail],
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-layout view="lHh Lpr lFf">
|
|
<q-page-container>
|
|
|
|
<q-page class="row justify-center">
|
|
|
|
<q-form
|
|
ref="form"
|
|
class="q-px-sm q-pt-xl q-pb-lg"
|
|
style="width:95%; max-width: 450px; height: 500px"
|
|
@submit.prevent="requestPasswordChange"
|
|
>
|
|
|
|
<q-card flat square>
|
|
<q-card-section class="bg-primary">
|
|
<h4 class="text-h5 text-white q-my-md">Zapomenuté heslo</h4>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<q-input v-model="formData.email" type="email" label="E-mail" :rules="rules.email">
|
|
<template v-slot:prepend>
|
|
<q-icon name="email"/>
|
|
</template>
|
|
</q-input>
|
|
|
|
</q-card-section>
|
|
<q-card-actions>
|
|
<q-btn
|
|
@click="requestPasswordChange"
|
|
unelevated
|
|
size="lg"
|
|
color="primary"
|
|
class="full-width"
|
|
label="Resetovat heslo"
|
|
/>
|
|
</q-card-actions>
|
|
<q-card-section class="text-center q-pa-sm">
|
|
<router-link :to="{name: 'login'}" class="text-grey-6">Zpět na login</router-link>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-form>
|
|
|
|
</q-page>
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|