78 lines
3.8 KiB
TypeScript
78 lines
3.8 KiB
TypeScript
import { useState, FormEvent } from 'react';
|
||
import { Link, Navigate } from 'react-router-dom';
|
||
import { useAuth } from '@/hooks/useAuth';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
|
||
export default function RegisterPage() {
|
||
const { user, register } = useAuth();
|
||
const [username, setUsername] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
const [confirm, setConfirm] = useState('');
|
||
const [error, setError] = useState('');
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
if (user) return <Navigate to="/feed" replace />;
|
||
|
||
const handleSubmit = async (e: FormEvent) => {
|
||
e.preventDefault();
|
||
setError('');
|
||
if (password !== confirm) { setError('Пароли не совпадают'); return; }
|
||
setLoading(true);
|
||
try { await register(username, password); }
|
||
catch (err: any) { setError(err.response?.data?.error || 'Ошибка регистрации'); }
|
||
finally { setLoading(false); }
|
||
};
|
||
|
||
return (
|
||
<div className="flex min-h-screen items-center justify-center p-5" style={{ background: 'linear-gradient(135deg, #fafaf9 0%, #f0f0ef 100%)' }}>
|
||
<div className="w-full max-w-sm animate-rise">
|
||
<div className="text-center mb-10">
|
||
<div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-xl shadow-sm"
|
||
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
|
||
<svg className="h-8 w-8 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
|
||
<path d="M12 2C7.58 2 4 5.58 4 10c0 3.78 2.58 7.02 6 8.12V20h4v-1.88c3.42-1.1 6-4.34 6-8.12 0-4.42-3.58-8-8-8z" />
|
||
<circle cx="12" cy="10" r="3" />
|
||
</svg>
|
||
</div>
|
||
<h1 className="text-2xl font-bold text-gradient">Catstagram</h1>
|
||
<p className="text-sm text-[var(--fg-secondary)] mt-1.5">Присоединяйтесь к сообществу</p>
|
||
</div>
|
||
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
<Input value={username} onChange={(e) => setUsername(e.target.value)}
|
||
placeholder="Имя пользователя" minLength={3} required autoFocus
|
||
className="h-12 text-sm rounded-xl bg-white border focus-ring" />
|
||
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)}
|
||
placeholder="Пароль (мин. 4 символа)" minLength={4} required
|
||
className="h-12 text-sm rounded-xl bg-white border focus-ring" />
|
||
<Input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)}
|
||
placeholder="Подтвердите пароль" required
|
||
className="h-12 text-sm rounded-xl bg-white border focus-ring" />
|
||
|
||
{error && (
|
||
<div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-xs font-medium animate-rise">
|
||
<span>⚠️</span><span>{error}</span>
|
||
</div>
|
||
)}
|
||
|
||
<Button type="submit" disabled={loading}
|
||
className="w-full h-12 rounded-xl text-sm font-semibold transition-all active:scale-[0.98]"
|
||
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
|
||
{loading ? (
|
||
<span className="flex items-center gap-2">
|
||
<span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
|
||
Создание...
|
||
</span>
|
||
) : 'Создать аккаунт'}
|
||
</Button>
|
||
</form>
|
||
|
||
<p className="mt-8 text-center text-sm text-[var(--fg-secondary)]">
|
||
Уже есть аккаунт?{' '}
|
||
<Link to="/login" className="font-semibold text-[var(--primary)] hover:opacity-80 transition-opacity">Войти</Link>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |