first commit
This commit is contained in:
brusnitsyn
218
resources/js/Pages/Auth/Login.vue
Normal file
218
resources/js/Pages/Auth/Login.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import {Head, router, useForm} from '@inertiajs/vue3'
|
||||
import { useAuthStore } from '../../Stores/auth.js'
|
||||
import {
|
||||
NForm, NFormItem, NInput, NButton, NCheckbox,
|
||||
NSpace, NCard, NIcon, NAlert, NModal, darkTheme,
|
||||
NConfigProvider, NLayout, NP
|
||||
} from 'naive-ui'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
|
||||
// Состояние формы
|
||||
const formRef = ref(null)
|
||||
|
||||
const form = useForm({
|
||||
login: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
})
|
||||
|
||||
|
||||
// Состояние UI
|
||||
const loading = ref(false)
|
||||
const forgotLoading = ref(false)
|
||||
const error = ref('')
|
||||
const showForgotPassword = ref(false)
|
||||
|
||||
// Правила валидации
|
||||
const rules = {
|
||||
login: [
|
||||
{ required: true, message: 'Введите логин', trigger: 'blur' },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: 'Введите пароль', trigger: 'blur' },
|
||||
{ min: 3, message: 'Пароль должен содержать минимум 3 символа', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// Обработка входа
|
||||
const handleLogin = async () => {
|
||||
error.value = ''
|
||||
|
||||
try {
|
||||
await formRef.value?.validate()
|
||||
|
||||
loading.value = true
|
||||
|
||||
form.post(
|
||||
'/auth/login',
|
||||
{
|
||||
onSuccess: () => {},
|
||||
onError: (err) => {
|
||||
error.value = err
|
||||
}
|
||||
}
|
||||
)
|
||||
} catch (validationError) {
|
||||
console.log('Ошибка валидации:', validationError)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Восстановление пароля
|
||||
const handleForgotPassword = async () => {
|
||||
forgotLoading.value = true
|
||||
// Здесь будет запрос на восстановление пароля
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
forgotLoading.value = false
|
||||
showForgotPassword.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NConfigProvider :theme="darkTheme">
|
||||
<NLayout embedded>
|
||||
<div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<Head title="Вход в систему" />
|
||||
|
||||
<div class="max-w-md w-full space-y-8">
|
||||
<!-- Логотип и заголовок -->
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center">
|
||||
<div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center">
|
||||
<n-icon size="32" color="white">
|
||||
<Hospital />
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="mt-6 text-3xl font-bold">
|
||||
Метрика
|
||||
</h2>
|
||||
<NP class="mt-2! text-sm" depth="3">
|
||||
Введите данные для входа в систему
|
||||
</NP>
|
||||
</div>
|
||||
|
||||
<!-- Форма входа -->
|
||||
<n-card>
|
||||
<n-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
@submit.prevent="handleLogin"
|
||||
>
|
||||
<n-space vertical size="large">
|
||||
<!-- Email -->
|
||||
<n-form-item label="Логин" path="login">
|
||||
<n-input
|
||||
v-model:value="form.login"
|
||||
placeholder="Ваш логин"
|
||||
size="large"
|
||||
@keydown.enter="handleLogin"
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon><Mail /></n-icon>
|
||||
</template>
|
||||
</n-input>
|
||||
</n-form-item>
|
||||
|
||||
<!-- Пароль -->
|
||||
<n-form-item label="Пароль" path="password">
|
||||
<n-input
|
||||
v-model:value="form.password"
|
||||
type="password"
|
||||
placeholder="Ваш пароль"
|
||||
size="large"
|
||||
show-password-on="click"
|
||||
@keydown.enter="handleLogin"
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon><LockClosed /></n-icon>
|
||||
</template>
|
||||
</n-input>
|
||||
</n-form-item>
|
||||
|
||||
<!-- Запомнить меня -->
|
||||
<n-form-item>
|
||||
<n-checkbox v-model:checked="form.remember">
|
||||
Запомнить меня
|
||||
</n-checkbox>
|
||||
</n-form-item>
|
||||
|
||||
<!-- Ошибки -->
|
||||
<n-alert v-if="error" title="Ошибка входа" type="error">
|
||||
{{ error }}
|
||||
</n-alert>
|
||||
|
||||
<!-- Кнопка входа -->
|
||||
<n-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
@click="handleLogin"
|
||||
block
|
||||
>
|
||||
Войти в систему
|
||||
</n-button>
|
||||
|
||||
<!-- Дополнительные ссылки -->
|
||||
<div class="text-center space-y-3">
|
||||
<div class="text-sm">
|
||||
<n-button text type="primary" @click="showForgotPassword = true">
|
||||
Забыли пароль?
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
<!-- <div class="text-sm text-gray-600">-->
|
||||
<!-- Нет аккаунта?-->
|
||||
<!-- <n-button text type="primary" @click="$inertia.visit(route('register'))">-->
|
||||
<!-- Зарегистрироваться-->
|
||||
<!-- </n-button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</n-space>
|
||||
</n-form>
|
||||
</n-card>
|
||||
|
||||
<!-- Информация о системе -->
|
||||
<NP class="mt-2! text-xs! text-center" depth="3">
|
||||
<p>Метрика v1.0</p>
|
||||
<p>Только для авторизованного персонала</p>
|
||||
</NP>
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно восстановления пароля -->
|
||||
<n-modal v-model:show="showForgotPassword">
|
||||
<n-card
|
||||
style="width: 400px"
|
||||
title="Восстановление пароля"
|
||||
:bordered="false"
|
||||
size="small"
|
||||
>
|
||||
<n-form :model="forgotForm" @submit.prevent="handleForgotPassword">
|
||||
<n-space vertical>
|
||||
<n-form-item label="Email" required>
|
||||
<n-input
|
||||
v-model:value="forgotForm.email"
|
||||
placeholder="Введите ваш email"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-button type="primary" block :loading="forgotLoading">
|
||||
Отправить инструкции
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-form>
|
||||
</n-card>
|
||||
</n-modal>
|
||||
</div>
|
||||
</NLayout>
|
||||
</NConfigProvider>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user