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

const form = useForm({
    email: '',
    password: '',
    remember: false,
});

const submit = (): void => {
    form.post('/login', {
        onFinish: () => form.reset('password'),
    });
};
</script>

<template>
    <Head title="Вход" />

    <AuthLayout
        title="Вход в систему"
        subtitle="Защищённый сервис обработки персональных данных"
    >
        <NCard>
            <NForm @submit.prevent="submit">
                <NFormItem
                    label="Email"
                    :feedback="form.errors.email"
                    :validation-status="form.errors.email ? 'error' : undefined"
                >
                    <NInput
                        v-model:value="form.email"
                        type="text"
                        placeholder="user@example.ru"
                        autocomplete="username"
                        :input-props="{ inputmode: 'email' }"
                    >
                        <template #prefix><TbMail /></template>
                    </NInput>
                </NFormItem>

                <NFormItem
                    label="Пароль"
                    :feedback="form.errors.password"
                    :validation-status="
                        form.errors.password ? 'error' : undefined
                    "
                >
                    <NInput
                        v-model:value="form.password"
                        type="password"
                        show-password-on="click"
                        placeholder="••••••••••••"
                        autocomplete="current-password"
                    >
                        <template #prefix><TbLock /></template>
                    </NInput>
                </NFormItem>

                <div class="mb-4">
                    <NCheckbox v-model:checked="form.remember">
                        Запомнить меня
                    </NCheckbox>
                </div>

                <NButton
                    type="primary"
                    block
                    attr-type="submit"
                    :loading="form.processing"
                >
                    Войти
                </NButton>
            </NForm>
        </NCard>
    </AuthLayout>
</template>
