59 lines
2.0 KiB
Vue
59 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import Button from '@/components/ui/Button.vue';
|
|
import Input from '@/components/ui/Input.vue';
|
|
import Message from '@/components/ui/Message.vue';
|
|
import { useTranslations } from '@/composables/useVanguard';
|
|
import AuthLayout from '@/layouts/AuthLayout.vue';
|
|
|
|
const { __ } = useTranslations();
|
|
|
|
const form = useForm({ code: '' });
|
|
|
|
function submit() {
|
|
form.post(route('auth.token.validate'), {
|
|
onFinish: () => form.reset('code'),
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AuthLayout :title="__('Two-Factor Authentication')">
|
|
<div class="rounded-lg border border-slate-200 bg-white shadow-sm">
|
|
<div class="p-6">
|
|
<h5 class="mt-2 mb-4 text-center text-sm font-semibold tracking-wider text-slate-600 uppercase">
|
|
{{ __('Two-Factor Authentication') }}
|
|
</h5>
|
|
|
|
<Message v-if="form.errors.code" severity="error" class="mb-4">
|
|
{{ form.errors.code }}
|
|
</Message>
|
|
|
|
<form class="space-y-4" autocomplete="off" @submit.prevent="submit">
|
|
<div>
|
|
<label for="code" class="sr-only">{{ __('Token') }}</label>
|
|
<Input
|
|
id="code"
|
|
v-model="form.code"
|
|
class="w-full"
|
|
:placeholder="__('2FA Code')"
|
|
:invalid="Boolean(form.errors.code)"
|
|
inputmode="numeric"
|
|
autocomplete="one-time-code"
|
|
autofocus
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
:label="__('Validate')"
|
|
class="w-full"
|
|
size="large"
|
|
:loading="form.processing"
|
|
/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</AuthLayout>
|
|
</template>
|