core/panel/login.tsx

113 lines
3.3 KiB
TypeScript
Raw Normal View History

2025-05-16 06:23:48 +00:00
/**
* Компонент страницы входа
* @module LoginPage
*/
import { useNavigate } from '@solidjs/router'
import { Component, createSignal, onMount } from 'solid-js'
import { login, isAuthenticated } from './auth'
/**
* Компонент страницы входа
*/
const LoginPage: Component = () => {
const [email, setEmail] = createSignal('')
const [password, setPassword] = createSignal('')
const [isLoading, setIsLoading] = createSignal(false)
const [error, setError] = createSignal<string | null>(null)
const navigate = useNavigate()
/**
* Проверка авторизации при загрузке компонента
* и перенаправление если пользователь уже авторизован
*/
onMount(() => {
// Если пользователь уже авторизован, перенаправляем на админ-панель
if (isAuthenticated()) {
window.location.href = '/admin'
}
})
/**
* Обработчик отправки формы входа
* @param e - Событие отправки формы
*/
const handleSubmit = async (e: Event) => {
e.preventDefault()
// Очищаем пробелы в email
const cleanEmail = email().trim()
if (!cleanEmail || !password()) {
setError('Пожалуйста, заполните все поля')
return
}
setIsLoading(true)
setError(null)
try {
// Используем функцию login из модуля auth
const loginSuccessful = await login({
email: cleanEmail,
password: password()
})
if (loginSuccessful) {
// Используем прямое перенаправление для надежности
window.location.href = '/admin'
} else {
throw new Error('Вход не выполнен')
}
} catch (err) {
console.error('Ошибка при входе:', err)
setError(err instanceof Error ? err.message : 'Неизвестная ошибка')
setIsLoading(false)
}
}
return (
<div class="login-page">
<div class="login-container">
<h1>Вход в систему</h1>
{error() && <div class="error-message">{error()}</div>}
<form onSubmit={handleSubmit}>
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
value={email()}
onInput={(e) => setEmail(e.currentTarget.value)}
disabled={isLoading()}
autocomplete="username"
required
/>
</div>
<div class="form-group">
<label for="password">Пароль</label>
<input
type="password"
id="password"
value={password()}
onInput={(e) => setPassword(e.currentTarget.value)}
disabled={isLoading()}
autocomplete="current-password"
required
/>
</div>
<button type="submit" disabled={isLoading()}>
{isLoading() ? 'Вход...' : 'Войти'}
</button>
</form>
</div>
</div>
)
}
export default LoginPage