new funcionality

resources/js/pages/ForgotPassword.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import AppLogo from '../components/AppLogo.vue';
+
+const { t } = useI18n();
+
+const form = reactive({ email: '' });
+const errors = ref<Record<string, string[]>>({});
+const loading = ref(false);
+const sent = ref(false);
+
+async function submit(): Promise<void> {
+    loading.value = true;
+    errors.value = {};
+
+    try {
+        await axios.post('/web-api/forgot-password', form);
+        sent.value = true;
+    } catch (e: any) {
+        errors.value = e.response?.data?.errors ?? {};
+    } finally {
+        loading.value = false;
+    }
+}
+</script>
+
+<template>
+    <div class="auth-page">
+        <div class="auth-page__glow"></div>
+
+        <div class="auth-card">
+            <AppLogo class="auth-card__logo" />
+
+            <template v-if="!sent">
+                <h1 class="auth-card__title">{{ t('forgotPassword.title') }}</h1>
+                <p class="auth-card__subtitle">{{ t('forgotPassword.subtitle') }}</p>
+
+                <form class="auth-card__form" @submit.prevent="submit">
+                    <div class="field">
+                        <label class="field__label">{{ t('forgotPassword.email') }}</label>
+                        <input v-model="form.email" type="email" required autofocus class="field__input" />
+                        <p v-if="errors.email" class="field__error">{{ errors.email[0] }}</p>
+                    </div>
+
+                    <button type="submit" :disabled="loading" class="btn btn--primary btn--pill btn--full">
+                        {{ loading ? t('forgotPassword.submitting') : t('forgotPassword.submit') }}
+                    </button>
+                </form>
+            </template>
+
+            <template v-else>
+                <h1 class="auth-card__title">{{ t('forgotPassword.title') }}</h1>
+                <p class="auth-card__subtitle">{{ t('forgotPassword.sent') }}</p>
+            </template>
+
+            <p class="auth-card__footer">
+                <router-link to="/login" class="link">{{ t('forgotPassword.backToLogin') }}</router-link>
+            </p>
+        </div>
+    </div>
+</template>