feat(auth): add password reset and remember me options
Add password reset request and reset endpoints with email verification Add "Remember me" option to login for persistent sessions Create frontend views for forgot and reset password flows
This commit is contained in:
59
frontend/src/views/ForgotPasswordView.vue
Normal file
59
frontend/src/views/ForgotPasswordView.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import PageHeader from '../components/PageHeader.vue';
|
||||
import StatusMessage from '../components/StatusMessage.vue';
|
||||
import { iconMail } from '../icons';
|
||||
import { api } from '../services/api';
|
||||
|
||||
const { t } = useI18n();
|
||||
const email = ref('');
|
||||
const busy = ref(false);
|
||||
const message = ref('');
|
||||
const errorMessage = ref('');
|
||||
|
||||
async function submitResetRequest() {
|
||||
busy.value = true;
|
||||
message.value = '';
|
||||
errorMessage.value = '';
|
||||
|
||||
try {
|
||||
const response = await api.requestPasswordReset({ email: email.value });
|
||||
message.value = response.message;
|
||||
} catch (error) {
|
||||
errorMessage.value = error instanceof Error && error.message ? error.message : t('auth.requestResetFailed');
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="auth-page">
|
||||
<div class="auth-panel">
|
||||
<PageHeader :title="t('auth.requestResetTitle')" :subtitle="t('auth.requestResetSubtitle')">
|
||||
<template #kicker>{{ t('auth.accountAccess') }}</template>
|
||||
</PageHeader>
|
||||
|
||||
<form class="auth-form" @submit.prevent="submitResetRequest">
|
||||
<div class="field">
|
||||
<label for="forgot-password-email">{{ t('auth.email') }}</label>
|
||||
<input id="forgot-password-email" v-model="email" autocomplete="email" required type="email" />
|
||||
</div>
|
||||
|
||||
<StatusMessage v-if="message" variant="success">{{ message }}</StatusMessage>
|
||||
<StatusMessage v-if="errorMessage" variant="danger">{{ errorMessage }}</StatusMessage>
|
||||
|
||||
<button class="ui-button ui-button--primary" :disabled="busy" type="submit">
|
||||
<Icon :icon="iconMail" class="ui-icon" aria-hidden="true" />
|
||||
{{ busy ? t('auth.sending') : t('auth.sendResetLink') }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="auth-switch">
|
||||
<RouterLink to="/login">{{ t('auth.goLogin') }}</RouterLink>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
Reference in New Issue
Block a user