new funcionality

resources/js/pages/ResetPassword.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import AppLogo from '../components/AppLogo.vue';
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+
+const token = String(route.query.token ?? '');
+const email = String(route.query.email ?? '');
+const missingParams = !token || !email;
+
+const form = reactive({ password: '', password_confirmation: '' });
+const errors = ref<Record<string, string[]>>({});
+const loading = ref(false);
+const success = ref(false);
+
+async function submit(): Promise<void> {
+    loading.value = true;
+    errors.value = {};
+
+    try {
+        await axios.post('/web-api/reset-password', { ...form, token, email });
+        success.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="missingParams">
+                <h1 class="auth-card__title">{{ t('resetPassword.title') }}</h1>
+                <p class="field__error">{{ t('resetPassword.missingParams') }}</p>
+            </template>
+
+            <template v-else-if="!success">
+                <h1 class="auth-card__title">{{ t('resetPassword.title') }}</h1>
+                <p class="auth-card__subtitle">{{ t('resetPassword.subtitle') }}</p>
+
+                <p v-if="errors.email" class="field__error">{{ errors.email[0] }}</p>
+
+                <form class="auth-card__form" @submit.prevent="submit">
+                    <div class="field">
+                        <label class="field__label">{{ t('resetPassword.password') }}</label>
+                        <input v-model="form.password" type="password" required minlength="8" autofocus class="field__input" />
+                        <p v-if="errors.password" class="field__error">{{ errors.password[0] }}</p>
+                    </div>
+
+                    <div class="field">
+                        <label class="field__label">{{ t('resetPassword.passwordConfirm') }}</label>
+                        <input v-model="form.password_confirmation" type="password" required minlength="8" class="field__input" />
+                    </div>
+
+                    <button type="submit" :disabled="loading" class="btn btn--primary btn--pill btn--full">
+                        {{ loading ? t('resetPassword.submitting') : t('resetPassword.submit') }}
+                    </button>
+                </form>
+            </template>
+
+            <template v-else>
+                <h1 class="auth-card__title">{{ t('resetPassword.title') }}</h1>
+                <p class="auth-card__subtitle">{{ t('resetPassword.success') }}</p>
+                <button type="button" class="btn btn--primary btn--pill btn--full" @click="router.push({ name: 'login' })">
+                    {{ t('resetPassword.goToLogin') }}
+                </button>
+            </template>
+        </div>
+    </div>
+</template>