Reset hesla

src/pages/public/user/ForgottenPasswordPage.vue

@@ -17,35 +17,29 @@ useMeta(() => metaData({
   title: "Zapomenuté heslo",
 }));
 
-const registerUser = () => {
+const requestPasswordChange = () => {
   if (!form.value.validate()) return;
 
-  return api.post('/forgotten-password', formData).then(response => {
-    useAuthStore().login({email: formData.email, password: formData.password}).then(() => {
-      $q.notify(successObject("Registrace úspěšná, vítej!"));
-      router.push({name: "myFlights"});
-    })
-
+  return api.post('/forgotten-password/request', formData).then(response => {
+    $q.notify(successObject("Žádost o změnu hesla odeslána, zkontroluj si svůj e-mail."))
   }).catch(({response}) => {
-    if (response.detail === 'User already exists') {
-      $q.notify(errorObject("Uživatel s tímto e-mailem je již registrovaný. Zkus se přihlásit."));
+    if (response.status === 404) {
+      $q.notify(errorObject(`E-mail ${formData.email} není registrovaný.`));
     } else {
-      $q.notify(errorObject("Registrace se nepovedla, zkus to prosím znovu za chvíli"));
+      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({
-  name: "",
   email: "",
-  password: ""
 });
 
 
 const rules = {
   email: [isRequired, isValidEmail],
-  password: [isRequired, minLength(4)]
 }
 </script>
 
@@ -62,7 +56,7 @@ const rules = {
             <q-form
               ref="form"
               class="q-px-sm q-pt-xl q-pb-lg"
-              @submit.prevent="registerUser"
+              @submit.prevent="requestPasswordChange"
             >
 
               <q-input square clearable v-model="formData.email" type="email" label="E-mail" :rules="rules.email">
@@ -75,7 +69,7 @@ const rules = {
           </q-card-section>
           <q-card-actions class="q-px-lg">
             <q-btn
-              @click="registerUser"
+              @click="requestPasswordChange"
               unelevated
               size="lg"
               color="primary"

src/pages/public/user/PasswordResetPage.vue

@@ -0,0 +1,121 @@
+<script setup>
+import {onMounted, reactive, ref} from "vue";
+import {useRoute, useRouter} from "vue-router";
+import {useMeta, useQuasar} from "quasar";
+import {errorObject, successObject} from "src/composables/dialog";
+import {useAppStore} from "stores/App";
+import {isRequired, isValidEmail, minLength} from "src/composables/form/rules";
+import {api} from "boot/axios";
+import {useAuthStore} from "stores/Auth";
+import {metaData} from "src/composables/meta";
+import {formatDatetime} from "../../../composables/datetimeUtils";
+
+const router = useRouter();
+const route = useRoute();
+const $q = useQuasar();
+
+useAppStore().setPageTitle("Změna hesla");
+useMeta(() => metaData({
+  title: "Změna hesla",
+}));
+
+const tokenInfo = reactive({
+  email: "",
+  name: "",
+  validity: null
+});
+const loadingTokenInfo = ref(true);
+
+onMounted(() => {
+  api.get(`/forgotten-password/token/${route.params.token}`).then((resp) => {
+    tokenInfo.email = resp.data.user_email;
+    tokenInfo.name = resp.data.user_name;
+    tokenInfo.validity = new Date(resp.data.token_validity);
+  }).finally(() => loadingTokenInfo.value = false);
+})
+
+const resetPassword = () => {
+  if (!form.value.validate()) return;
+
+  return api.post('/forgotten-password/reset', formData).then(response => {
+    useAuthStore().login({email: tokenInfo.email, password: formData.password}).then(() => {
+      $q.notify(successObject("Heslo úspěšně změněno. Vítej zpět!"));
+      router.push({name: "myFlights"});
+    });
+  }).catch(({response}) => {
+    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({
+  password: "",
+  token: route.params.token
+});
+
+
+const rules = {
+  password: [isRequired],
+}
+</script>
+
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-page-container>
+      <q-page class="row justify-center">
+        <q-card flat square style="width:95%; max-width: 450px; height: 500px">
+          <q-card-section class="bg-primary">
+            <h4 class="text-h5 text-white q-my-md">Změna hesla</h4>
+          </q-card-section>
+          <q-card-section>
+            <q-form
+              ref="form"
+              class="q-px-sm q-pt-xl q-pb-lg"
+              @submit.prevent="resetPassword"
+            >
+
+              <div v-if="loadingTokenInfo" class="text-center">
+                <q-spinner size="70px" color="blue-3"/>
+              </div>
+              <div v-else>
+
+                <q-banner class="bg-blue-1 q-mb-lg ">
+                  Token pro reset hesla je platný do {{ formatDatetime(tokenInfo.validity) }}.
+                </q-banner>
+
+
+                <q-input square clearable :model-value="tokenInfo.email" disable type="email" label="E-mail">
+                  <template v-slot:prepend>
+                    <q-icon name="email"/>
+                  </template>
+                </q-input>
+
+                <q-input square clearable v-model="formData.password" type="password" label="Nové heslo" :rules="rules.password">
+                  <template v-slot:prepend>
+                    <q-icon name="lock"/>
+                  </template>
+                </q-input>
+              </div>
+
+            </q-form>
+          </q-card-section>
+          <q-card-actions class="q-px-lg">
+            <q-btn
+              @click="resetPassword"
+              :disable="loadingTokenInfo"
+              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-page>
+    </q-page-container>
+  </q-layout>
+</template>