eab78a0291
* оптимизация доставки контента до клиента * переписал запросы выборок * убрал из подсчета переведенных * добавил сохранение метрикам для вывода в дашборд
220 lines
8.8 KiB
Vue
220 lines
8.8 KiB
Vue
<script setup>
|
||
import { ref, reactive } from 'vue'
|
||
import {Head, router, useForm} from '@inertiajs/vue3'
|
||
import { useAuthStore } from '../../Stores/auth.js'
|
||
import { TbUser, TbLock } from 'vue-icons-plus/tb'
|
||
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><TbUser /></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><TbLock /></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>
|