<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import { NButton, NCard, NForm, NFormItem, NInput } from 'naive-ui';
import AuthLayout from '../../layouts/AuthLayout.vue';

const form = useForm({ code: '' });
const submit = (): void => form.post('/mfa/verify');
</script>

<template>
    <Head title="Подтверждение входа" />

    <AuthLayout
        title="Подтверждение входа"
        subtitle="Код из приложения-аутентификатора или резервный код"
    >
        <NCard>
            <NForm @submit.prevent="submit">
                <NFormItem
                    label="Код"
                    :feedback="form.errors.code"
                    :validation-status="form.errors.code ? 'error' : undefined"
                >
                    <NInput
                        v-model:value="form.code"
                        placeholder="123456"
                        autofocus
                        :input-props="{
                            inputmode: 'numeric',
                            autocomplete: 'one-time-code',
                        }"
                    />
                </NFormItem>

                <NButton
                    type="primary"
                    block
                    attr-type="submit"
                    :loading="form.processing"
                >
                    Подтвердить
                </NButton>
            </NForm>
        </NCard>
    </AuthLayout>
</template>
