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

defineProps<{ secret: string; qr: string }>();

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

<template>
    <Head title="Настройка двухфакторной аутентификации" />

    <AuthLayout
        title="Двухфакторная аутентификация"
        subtitle="Отсканируйте QR-код в приложении-аутентификаторе"
    >
        <NCard>
            <div class="mb-4 flex flex-col items-center gap-3">
                <NQrCode :value="qr" :size="180" />
                <NText depth="3" class="text-center text-xs">
                    Или введите ключ вручную:
                    <br />
                    <code>{{ secret }}</code>
                </NText>
            </div>

            <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"
                        :input-props="{
                            inputmode: 'numeric',
                            autocomplete: 'one-time-code',
                        }"
                    />
                </NFormItem>

                <NButton
                    type="primary"
                    block
                    attr-type="submit"
                    :loading="form.processing"
                >
                    Включить
                </NButton>
            </NForm>
        </NCard>
    </AuthLayout>
</template>
