90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
/**
|
||
* Компонент страницы входа
|
||
* @module LoginPage
|
||
*/
|
||
|
||
import { useNavigate } from '@solidjs/router'
|
||
import { createSignal, onMount } from 'solid-js'
|
||
import publyLogo from '../assets/publy.svg?url'
|
||
import { useAuth } from '../context/auth'
|
||
import styles from '../styles/Login.module.css'
|
||
import Button from '../ui/Button'
|
||
|
||
/**
|
||
* Компонент страницы входа
|
||
*/
|
||
const LoginPage = () => {
|
||
console.log('[LoginPage] Initializing...')
|
||
const [username, setUsername] = createSignal('')
|
||
const [password, setPassword] = createSignal('')
|
||
const [error, setError] = createSignal<string | null>(null)
|
||
const [loading, setLoading] = createSignal(false)
|
||
const auth = useAuth()
|
||
const navigate = useNavigate()
|
||
|
||
onMount(() => {
|
||
console.log('[LoginPage] Component mounted')
|
||
// Если пользователь уже авторизован, редиректим на админ-панель
|
||
if (auth.isAuthenticated()) {
|
||
console.log('[LoginPage] User already authenticated, redirecting to admin...')
|
||
navigate('/admin')
|
||
}
|
||
})
|
||
|
||
const handleSubmit = async (e: Event) => {
|
||
e.preventDefault()
|
||
setError(null)
|
||
setLoading(true)
|
||
|
||
try {
|
||
await auth.login(username(), password())
|
||
navigate('/admin')
|
||
} catch (error) {
|
||
setError(error instanceof Error ? error.message : 'Ошибка при входе')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div class={styles['login-container']}>
|
||
<form class={styles['login-form']} onSubmit={handleSubmit}>
|
||
<img src={publyLogo} alt="Logo" class={styles['login-logo']} />
|
||
<h1>Вход в панель администратора</h1>
|
||
|
||
{error() && <div class={styles['error-message']}>{error()}</div>}
|
||
|
||
<div class={styles['form-group']}>
|
||
<label for="username">Имя пользователя</label>
|
||
<input
|
||
id="username"
|
||
type="text"
|
||
value={username()}
|
||
onInput={(e) => setUsername(e.currentTarget.value)}
|
||
disabled={loading()}
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div class={styles['form-group']}>
|
||
<label for="password">Пароль</label>
|
||
<input
|
||
id="password"
|
||
type="password"
|
||
value={password()}
|
||
onInput={(e) => setPassword(e.currentTarget.value)}
|
||
disabled={loading()}
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<Button type="submit" variant="primary" disabled={loading()} loading={loading()}>
|
||
{loading() ? 'Вход...' : 'Войти'}
|
||
</Button>
|
||
</form>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default LoginPage
|