81 lines
2.6 KiB
Vue
81 lines
2.6 KiB
Vue
<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>
|