feat(KAN-21): rebuild login verification and two-factor flows
This commit is contained in:
@@ -1,5 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { Form, Head } from '@inertiajs/vue3';
|
||||
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';
|
||||
@@ -7,94 +11,114 @@ 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 { Spinner } from '@/components/ui/spinner';
|
||||
import AuthBase from '@/layouts/AuthLayout.vue';
|
||||
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;
|
||||
}>();
|
||||
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>
|
||||
<AuthBase
|
||||
title="Log in to your account"
|
||||
description="Enter your email and password below to log in"
|
||||
<AuthFlowLayout
|
||||
:title="t('auth.login.title')"
|
||||
:description="t('auth.login.description')"
|
||||
:icon="LogIn"
|
||||
>
|
||||
<Head title="Log in" />
|
||||
|
||||
<div
|
||||
<Head :title="t('auth.login.submit')" />
|
||||
<FeedbackState
|
||||
v-if="status"
|
||||
class="mb-4 text-center text-sm font-medium text-green-600"
|
||||
state="success"
|
||||
:title="t('auth.login.statusTitle')"
|
||||
:description="status"
|
||||
/>
|
||||
<form
|
||||
:action="store.url()"
|
||||
method="post"
|
||||
class="grid gap-5"
|
||||
@submit.prevent="submit"
|
||||
>
|
||||
{{ status }}
|
||||
</div>
|
||||
|
||||
<Form
|
||||
v-bind="store.form()"
|
||||
:reset-on-success="['password']"
|
||||
v-slot="{ errors, processing }"
|
||||
class="flex flex-col gap-6"
|
||||
>
|
||||
<div class="grid gap-6">
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email address</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
required
|
||||
autofocus
|
||||
:tabindex="1"
|
||||
autocomplete="email"
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
<InputError :message="errors.email" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<Label for="password">Password</Label>
|
||||
<TextLink
|
||||
v-if="canResetPassword"
|
||||
:href="request()"
|
||||
class="text-sm"
|
||||
:tabindex="5"
|
||||
>
|
||||
Forgot password?
|
||||
</TextLink>
|
||||
</div>
|
||||
<PasswordInput
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
:tabindex="2"
|
||||
autocomplete="current-password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
<InputError :message="errors.password" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<Label for="remember" class="flex items-center space-x-3">
|
||||
<Checkbox id="remember" name="remember" :tabindex="3" />
|
||||
<span>Remember me</span>
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
class="mt-4 w-full"
|
||||
:tabindex="4"
|
||||
:disabled="processing"
|
||||
data-test="login-button"
|
||||
>
|
||||
<Spinner v-if="processing" />
|
||||
Log in
|
||||
</Button>
|
||||
<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>
|
||||
</Form>
|
||||
</AuthBase>
|
||||
<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>
|
||||
|
||||
@@ -1,133 +1,173 @@
|
||||
<script setup lang="ts">
|
||||
import { Form, Head } from '@inertiajs/vue3';
|
||||
import { computed, ref } from 'vue';
|
||||
import { Head, useForm } from '@inertiajs/vue3';
|
||||
import { KeyRound, ShieldCheck } from 'lucide-vue-next';
|
||||
import { computed, nextTick, onUnmounted, ref, useTemplateRef } from 'vue';
|
||||
import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
|
||||
import InputError from '@/components/InputError.vue';
|
||||
import TextLink from '@/components/TextLink.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
InputOTP,
|
||||
InputOTPGroup,
|
||||
InputOTPSlot,
|
||||
} from '@/components/ui/input-otp';
|
||||
import AuthLayout from '@/layouts/AuthLayout.vue';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { useFormProtection } from '@/composables/useFormProtection';
|
||||
import { useLocalization } from '@/composables/useLocalization';
|
||||
import AuthFlowLayout from '@/layouts/auth/AuthFlowLayout.vue';
|
||||
import { login } from '@/routes/index';
|
||||
import { store } from '@/routes/two-factor/login';
|
||||
import type { TwoFactorConfigContent } from '@/types';
|
||||
|
||||
const authConfigContent = computed<TwoFactorConfigContent>(() => {
|
||||
if (showRecoveryInput.value) {
|
||||
return {
|
||||
title: 'Recovery code',
|
||||
description:
|
||||
'Please confirm access to your account by entering one of your emergency recovery codes.',
|
||||
buttonText: 'login using an authentication code',
|
||||
};
|
||||
const { t } = useLocalization();
|
||||
const recovery = ref(false);
|
||||
const form = useForm({ code: '', recovery_code: '' }).dontRemember(
|
||||
'code',
|
||||
'recovery_code',
|
||||
);
|
||||
const protection = useFormProtection(form, { isDirty: () => false });
|
||||
const codeInput = useTemplateRef('codeInput');
|
||||
const recoveryInput = useTemplateRef('recoveryInput');
|
||||
const fieldError = computed(() =>
|
||||
recovery.value
|
||||
? (form.errors.recovery_code ?? form.errors.code)
|
||||
: form.errors.code,
|
||||
);
|
||||
const toggleMode = async (): Promise<void> => {
|
||||
if (form.processing) {
|
||||
return;
|
||||
}
|
||||
|
||||
return {
|
||||
title: 'Authentication code',
|
||||
description:
|
||||
'Enter the authentication code provided by your authenticator application.',
|
||||
buttonText: 'login using a recovery code',
|
||||
};
|
||||
});
|
||||
|
||||
const showRecoveryInput = ref<boolean>(false);
|
||||
|
||||
const toggleRecoveryMode = (clearErrors: () => void): void => {
|
||||
showRecoveryInput.value = !showRecoveryInput.value;
|
||||
clearErrors();
|
||||
code.value = '';
|
||||
recovery.value = !recovery.value;
|
||||
form.resetAndClearErrors();
|
||||
protection.clearFeedback();
|
||||
await nextTick();
|
||||
(recovery.value ? recoveryInput.value : codeInput.value)?.$el?.focus();
|
||||
};
|
||||
|
||||
const code = ref<string>('');
|
||||
const pasteCode = (event: ClipboardEvent): void => {
|
||||
const code = event.clipboardData?.getData('text').replace(/\s/g, '') ?? '';
|
||||
if (/^[0-9]{6}$/.test(code)) {
|
||||
event.preventDefault();
|
||||
form.code = code;
|
||||
}
|
||||
};
|
||||
const submit = (): void => {
|
||||
form.transform((data) =>
|
||||
recovery.value
|
||||
? { recovery_code: data.recovery_code.trim() }
|
||||
: { code: data.code },
|
||||
);
|
||||
protection.submit(store(), { onSuccess: () => form.reset() });
|
||||
};
|
||||
onUnmounted(() => form.reset());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AuthLayout
|
||||
:title="authConfigContent.title"
|
||||
:description="authConfigContent.description"
|
||||
<AuthFlowLayout
|
||||
:title="
|
||||
t(
|
||||
recovery
|
||||
? 'auth.twoFactor.recoveryTitle'
|
||||
: 'auth.twoFactor.title',
|
||||
)
|
||||
"
|
||||
:description="
|
||||
t(
|
||||
recovery
|
||||
? 'auth.twoFactor.recoveryDescription'
|
||||
: 'auth.twoFactor.description',
|
||||
)
|
||||
"
|
||||
:icon="recovery ? KeyRound : ShieldCheck"
|
||||
>
|
||||
<Head title="Two-factor authentication" />
|
||||
|
||||
<div class="space-y-6">
|
||||
<template v-if="!showRecoveryInput">
|
||||
<Form
|
||||
v-bind="store.form()"
|
||||
class="space-y-4"
|
||||
reset-on-error
|
||||
@error="code = ''"
|
||||
#default="{ errors, processing, clearErrors }"
|
||||
<Head :title="t('auth.twoFactor.title')" />
|
||||
<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.twoFactor.pending')"
|
||||
@retry="submit"
|
||||
/>
|
||||
<div v-if="!recovery" class="gap-stack grid">
|
||||
<Label for="code">{{ t('auth.twoFactor.code') }}</Label>
|
||||
<Input
|
||||
id="code"
|
||||
key="code"
|
||||
ref="codeInput"
|
||||
v-model="form.code"
|
||||
name="code"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
autocomplete="one-time-code"
|
||||
pattern="[0-9]{6}"
|
||||
minlength="6"
|
||||
maxlength="6"
|
||||
required
|
||||
autofocus
|
||||
:disabled="form.processing"
|
||||
:invalid="Boolean(fieldError)"
|
||||
aria-describedby="code-hint code-error"
|
||||
class="h-14 text-center font-mono text-2xl tracking-[0.35em] md:text-2xl"
|
||||
@paste="pasteCode"
|
||||
/>
|
||||
<p id="code-hint" class="text-caption text-muted-foreground">
|
||||
{{ t('auth.twoFactor.codeHint') }}
|
||||
</p>
|
||||
<InputError id="code-error" :message="fieldError" />
|
||||
</div>
|
||||
<div v-else class="gap-stack grid">
|
||||
<Label for="recovery_code">{{
|
||||
t('auth.twoFactor.recoveryCode')
|
||||
}}</Label>
|
||||
<Input
|
||||
id="recovery_code"
|
||||
key="recovery"
|
||||
ref="recoveryInput"
|
||||
v-model="form.recovery_code"
|
||||
name="recovery_code"
|
||||
type="text"
|
||||
autocomplete="one-time-code"
|
||||
autocapitalize="none"
|
||||
:spellcheck="false"
|
||||
required
|
||||
:disabled="form.processing"
|
||||
:invalid="Boolean(fieldError)"
|
||||
aria-describedby="recovery-hint recovery-error"
|
||||
class="font-mono"
|
||||
/>
|
||||
<p
|
||||
id="recovery-hint"
|
||||
class="text-caption text-muted-foreground"
|
||||
>
|
||||
<input type="hidden" name="code" :value="code" />
|
||||
<div
|
||||
class="flex flex-col items-center justify-center space-y-3 text-center"
|
||||
>
|
||||
<div class="flex w-full items-center justify-center">
|
||||
<InputOTP
|
||||
id="otp"
|
||||
v-model="code"
|
||||
:maxlength="6"
|
||||
:disabled="processing"
|
||||
autofocus
|
||||
>
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot
|
||||
v-for="index in 6"
|
||||
:key="index"
|
||||
:index="index - 1"
|
||||
/>
|
||||
</InputOTPGroup>
|
||||
</InputOTP>
|
||||
</div>
|
||||
<InputError :message="errors.code" />
|
||||
</div>
|
||||
<Button type="submit" class="w-full" :disabled="processing"
|
||||
>Continue</Button
|
||||
>
|
||||
<div class="text-muted-foreground text-center text-sm">
|
||||
<span>or you can </span>
|
||||
<button
|
||||
type="button"
|
||||
class="text-foreground hover:decoration-current! underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out dark:decoration-neutral-500"
|
||||
@click="() => toggleRecoveryMode(clearErrors)"
|
||||
>
|
||||
{{ authConfigContent.buttonText }}
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<Form
|
||||
v-bind="store.form()"
|
||||
class="space-y-4"
|
||||
reset-on-error
|
||||
#default="{ errors, processing, clearErrors }"
|
||||
>
|
||||
<Input
|
||||
name="recovery_code"
|
||||
type="text"
|
||||
placeholder="Enter recovery code"
|
||||
:autofocus="showRecoveryInput"
|
||||
required
|
||||
/>
|
||||
<InputError :message="errors.recovery_code" />
|
||||
<Button type="submit" class="w-full" :disabled="processing"
|
||||
>Continue</Button
|
||||
>
|
||||
|
||||
<div class="text-muted-foreground text-center text-sm">
|
||||
<span>or you can </span>
|
||||
<button
|
||||
type="button"
|
||||
class="text-foreground hover:decoration-current! underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out dark:decoration-neutral-500"
|
||||
@click="() => toggleRecoveryMode(clearErrors)"
|
||||
>
|
||||
{{ authConfigContent.buttonText }}
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
{{ t('auth.twoFactor.recoveryHint') }}
|
||||
</p>
|
||||
<InputError id="recovery-error" :message="fieldError" />
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
class="w-full"
|
||||
:loading="form.processing"
|
||||
:loading-label="t('auth.twoFactor.pending')"
|
||||
>{{ t('auth.twoFactor.submit') }}</Button
|
||||
>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
class="w-full whitespace-normal"
|
||||
:disabled="form.processing"
|
||||
@click="toggleMode"
|
||||
>{{
|
||||
t(
|
||||
recovery
|
||||
? 'auth.twoFactor.useCode'
|
||||
: 'auth.twoFactor.useRecovery',
|
||||
)
|
||||
}}</Button
|
||||
>
|
||||
</form>
|
||||
<template #footer
|
||||
><TextLink :href="login()">{{
|
||||
t('auth.backToLogin')
|
||||
}}</TextLink></template
|
||||
>
|
||||
</AuthFlowLayout>
|
||||
</template>
|
||||
|
||||
@@ -1,49 +1,124 @@
|
||||
<script setup lang="ts">
|
||||
import { Form, Head } from '@inertiajs/vue3';
|
||||
import TextLink from '@/components/TextLink.vue';
|
||||
import { Head, router, useForm, usePage } from '@inertiajs/vue3';
|
||||
import { Mail } from 'lucide-vue-next';
|
||||
import { computed } from 'vue';
|
||||
import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
|
||||
import FeedbackState from '@/components/FeedbackState.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import AuthLayout from '@/layouts/AuthLayout.vue';
|
||||
import { logout } from '@/routes/index';
|
||||
import { useFormProtection } from '@/composables/useFormProtection';
|
||||
import { useLocalization } from '@/composables/useLocalization';
|
||||
import AuthFlowLayout from '@/layouts/auth/AuthFlowLayout.vue';
|
||||
import { dashboard, logout } from '@/routes/index';
|
||||
import { send } from '@/routes/verification';
|
||||
|
||||
defineProps<{
|
||||
status?: string;
|
||||
}>();
|
||||
const props = defineProps<{ status?: string }>();
|
||||
const { t } = useLocalization();
|
||||
const page = usePage();
|
||||
const email = computed(() => page.props.auth.user?.email);
|
||||
const resendForm = useForm({});
|
||||
const logoutForm = useForm({});
|
||||
const resendProtection = useFormProtection(resendForm);
|
||||
const logoutProtection = useFormProtection(logoutForm);
|
||||
const busy = computed(() => resendForm.processing || logoutForm.processing);
|
||||
const sent = computed(
|
||||
() =>
|
||||
resendProtection.state.value === 'success' ||
|
||||
(resendProtection.state.value === 'idle' &&
|
||||
props.status === 'verification-link-sent'),
|
||||
);
|
||||
const resend = (): void => {
|
||||
if (!busy.value) {
|
||||
resendProtection.submit(send(), { preserveScroll: true });
|
||||
}
|
||||
};
|
||||
const signOut = (): void => {
|
||||
if (!busy.value) {
|
||||
logoutProtection.submit(logout());
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AuthLayout
|
||||
title="Verify email"
|
||||
description="Please verify your email address by clicking on the link we just emailed to you."
|
||||
<AuthFlowLayout
|
||||
:title="t('auth.verify.title')"
|
||||
:description="t('auth.verify.description')"
|
||||
:icon="Mail"
|
||||
>
|
||||
<Head title="Email verification" />
|
||||
|
||||
<Head :title="t('auth.verify.title')" />
|
||||
<div
|
||||
v-if="status === 'verification-link-sent'"
|
||||
class="mb-4 text-center text-sm font-medium text-green-600"
|
||||
v-if="email"
|
||||
class="gap-stack bg-muted p-card grid rounded-md border"
|
||||
>
|
||||
A new verification link has been sent to the email address you
|
||||
provided during registration.
|
||||
<p class="text-label text-muted-foreground uppercase tracking-wide">
|
||||
{{ t('auth.verify.emailLabel') }}
|
||||
</p>
|
||||
<p class="text-body break-all font-medium">{{ email }}</p>
|
||||
</div>
|
||||
|
||||
<Form
|
||||
v-bind="send.form()"
|
||||
class="space-y-6 text-center"
|
||||
v-slot="{ processing }"
|
||||
<FeedbackState
|
||||
v-if="sent"
|
||||
state="success"
|
||||
:title="t('auth.verify.sentTitle')"
|
||||
:description="t('auth.verify.sentDescription')"
|
||||
/>
|
||||
<form
|
||||
:action="send.url()"
|
||||
method="post"
|
||||
class="gap-column grid"
|
||||
@submit.prevent="resend"
|
||||
>
|
||||
<Button :disabled="processing" variant="secondary">
|
||||
<Spinner v-if="processing" />
|
||||
Resend verification email
|
||||
</Button>
|
||||
|
||||
<TextLink
|
||||
:href="logout()"
|
||||
as="button"
|
||||
class="mx-auto block text-sm"
|
||||
<AuthFormFeedback
|
||||
:state="
|
||||
resendProtection.state.value === 'success'
|
||||
? 'idle'
|
||||
: resendProtection.state.value
|
||||
"
|
||||
:response-status="resendProtection.responseStatus.value"
|
||||
:loading-title="t('auth.verify.pending')"
|
||||
@retry="resend"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
class="w-full"
|
||||
:disabled="busy"
|
||||
:loading="resendForm.processing"
|
||||
:loading-label="t('auth.verify.pending')"
|
||||
>{{ t('auth.verify.resend') }}</Button
|
||||
>
|
||||
Log out
|
||||
</TextLink>
|
||||
</Form>
|
||||
</AuthLayout>
|
||||
</form>
|
||||
<div class="gap-stack pt-column grid border-t">
|
||||
<p class="text-body text-muted-foreground">
|
||||
{{ t('auth.verify.help') }}
|
||||
</p>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
:disabled="busy"
|
||||
@click="router.visit(dashboard())"
|
||||
>{{ t('auth.verify.continue') }}</Button
|
||||
>
|
||||
</div>
|
||||
<form
|
||||
:action="logout.url()"
|
||||
method="post"
|
||||
class="gap-card grid"
|
||||
@submit.prevent="signOut"
|
||||
>
|
||||
<AuthFormFeedback
|
||||
:state="logoutProtection.state.value"
|
||||
:response-status="logoutProtection.responseStatus.value"
|
||||
:loading-title="t('auth.signingOut')"
|
||||
@retry="signOut"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="ghost"
|
||||
class="w-full"
|
||||
:disabled="busy"
|
||||
:loading="logoutForm.processing"
|
||||
:loading-label="t('auth.signingOut')"
|
||||
>{{ t('auth.signOut') }}</Button
|
||||
>
|
||||
</form>
|
||||
<template #footer>{{ t('auth.verify.wrongAccount') }}</template>
|
||||
</AuthFlowLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user