65 lines
2.0 KiB
Vue
65 lines
2.0 KiB
Vue
<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>
|