125 lines
4.8 KiB
Vue
125 lines
4.8 KiB
Vue
<script setup lang="ts">
|
|
import { Head, useForm } from '@inertiajs/vue3';
|
|
import { LogIn } from 'lucide-vue-next';
|
|
import { onUnmounted } from 'vue';
|
|
import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
|
|
import FeedbackState from '@/components/FeedbackState.vue';
|
|
import InputError from '@/components/InputError.vue';
|
|
import PasswordInput from '@/components/PasswordInput.vue';
|
|
import TextLink from '@/components/TextLink.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { useFormProtection } from '@/composables/useFormProtection';
|
|
import { useLocalization } from '@/composables/useLocalization';
|
|
import AuthFlowLayout from '@/layouts/auth/AuthFlowLayout.vue';
|
|
import { store } from '@/routes/login';
|
|
import { request } from '@/routes/password';
|
|
|
|
defineProps<{ status?: string; canResetPassword: boolean }>();
|
|
const { t } = useLocalization();
|
|
// Credentials stay in memory only; no remembered form key or browser storage.
|
|
const form = useForm({ email: '', password: '', remember: false }).dontRemember(
|
|
'password',
|
|
);
|
|
const protection = useFormProtection(form, { isDirty: () => false });
|
|
const submit = (): void =>
|
|
protection.submit(store(), {
|
|
onSuccess: () => form.reset('password'),
|
|
});
|
|
onUnmounted(() => form.reset('password'));
|
|
</script>
|
|
|
|
<template>
|
|
<AuthFlowLayout
|
|
:title="t('auth.login.title')"
|
|
:description="t('auth.login.description')"
|
|
:icon="LogIn"
|
|
>
|
|
<Head :title="t('auth.login.submit')" />
|
|
<FeedbackState
|
|
v-if="status"
|
|
state="success"
|
|
:title="t('auth.login.statusTitle')"
|
|
:description="status"
|
|
/>
|
|
<form
|
|
:action="store.url()"
|
|
method="post"
|
|
class="grid gap-5"
|
|
@submit.prevent="submit"
|
|
>
|
|
<AuthFormFeedback
|
|
:state="protection.state.value"
|
|
:response-status="protection.responseStatus.value"
|
|
:loading-title="t('auth.login.pending')"
|
|
@retry="submit"
|
|
/>
|
|
<div class="gap-stack grid">
|
|
<Label for="email">{{ t('auth.login.email') }}</Label>
|
|
<Input
|
|
id="email"
|
|
v-model="form.email"
|
|
name="email"
|
|
type="email"
|
|
inputmode="email"
|
|
autocomplete="username"
|
|
autocapitalize="none"
|
|
:spellcheck="false"
|
|
required
|
|
autofocus
|
|
:disabled="form.processing"
|
|
:placeholder="t('auth.login.emailPlaceholder')"
|
|
:invalid="Boolean(form.errors.email)"
|
|
aria-describedby="email-error"
|
|
/>
|
|
<InputError id="email-error" :message="form.errors.email" />
|
|
</div>
|
|
<div class="gap-stack grid">
|
|
<Label for="password">{{ t('auth.login.password') }}</Label>
|
|
<PasswordInput
|
|
id="password"
|
|
v-model="form.password"
|
|
name="password"
|
|
autocomplete="current-password"
|
|
required
|
|
:disabled="form.processing"
|
|
:invalid="Boolean(form.errors.password)"
|
|
aria-describedby="password-error"
|
|
/>
|
|
<InputError
|
|
id="password-error"
|
|
:message="form.errors.password"
|
|
/>
|
|
</div>
|
|
<div class="gap-card flex flex-wrap items-center justify-between">
|
|
<Label for="remember" class="min-h-control gap-stack">
|
|
<Checkbox
|
|
id="remember"
|
|
v-model="form.remember"
|
|
name="remember"
|
|
:disabled="form.processing"
|
|
/>
|
|
{{ t('auth.login.remember') }}
|
|
</Label>
|
|
<TextLink
|
|
v-if="canResetPassword"
|
|
:href="request()"
|
|
class="min-h-control text-body inline-flex items-center"
|
|
>{{ t('auth.login.forgot') }}</TextLink
|
|
>
|
|
</div>
|
|
<Button
|
|
type="submit"
|
|
class="w-full"
|
|
:loading="form.processing"
|
|
:loading-label="t('auth.login.pending')"
|
|
data-test="login-button"
|
|
>{{ t('auth.login.submit') }}</Button
|
|
>
|
|
</form>
|
|
<template #footer>{{ t('auth.login.help') }}</template>
|
|
</AuthFlowLayout>
|
|
</template>
|