140 lines
3.9 KiB
TypeScript
140 lines
3.9 KiB
TypeScript
import { useState } from 'react';
|
||
import { useNavigate, Link as RouterLink } from 'react-router-dom';
|
||
import {
|
||
Box,
|
||
Container,
|
||
Paper,
|
||
TextField,
|
||
Button,
|
||
Typography,
|
||
Link,
|
||
Alert,
|
||
} from '@mui/material';
|
||
import { CloudUpload as CloudIcon } from '@mui/icons-material';
|
||
import { useAuth } from '../hooks/useAuth';
|
||
|
||
export default function RegisterPage() {
|
||
const navigate = useNavigate();
|
||
const { register } = useAuth();
|
||
const [email, setEmail] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
const [confirmPassword, setConfirmPassword] = useState('');
|
||
const [error, setError] = useState('');
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setError('');
|
||
|
||
if (password !== confirmPassword) {
|
||
setError('Пароли не совпадают');
|
||
return;
|
||
}
|
||
|
||
if (password.length < 8) {
|
||
setError('Пароль должен быть не менее 8 символов');
|
||
return;
|
||
}
|
||
|
||
setLoading(true);
|
||
|
||
try {
|
||
await register(email, password);
|
||
navigate('/login');
|
||
} catch (err: any) {
|
||
setError(err.response?.data?.detail || 'Ошибка регистрации');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
minHeight: '100vh',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
}}
|
||
>
|
||
<Container maxWidth="sm">
|
||
<Paper
|
||
elevation={24}
|
||
sx={{
|
||
p: 4,
|
||
borderRadius: 3,
|
||
}}
|
||
>
|
||
<Box sx={{ textAlign: 'center', mb: 3 }}>
|
||
<CloudIcon sx={{ fontSize: 64, color: 'primary.main', mb: 2 }} />
|
||
<Typography variant="h4" fontWeight="bold" gutterBottom>
|
||
Регистрация
|
||
</Typography>
|
||
<Typography variant="body1" color="text.secondary">
|
||
Создайте аккаунт для доступа к облачному хранилищу
|
||
</Typography>
|
||
</Box>
|
||
|
||
<form onSubmit={handleSubmit}>
|
||
<TextField
|
||
fullWidth
|
||
label="Email"
|
||
type="email"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
margin="normal"
|
||
required
|
||
autoFocus
|
||
/>
|
||
<TextField
|
||
fullWidth
|
||
label="Пароль"
|
||
type="password"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
margin="normal"
|
||
required
|
||
helperText="Минимум 8 символов"
|
||
/>
|
||
<TextField
|
||
fullWidth
|
||
label="Подтверждение пароля"
|
||
type="password"
|
||
value={confirmPassword}
|
||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||
margin="normal"
|
||
required
|
||
/>
|
||
|
||
{error && (
|
||
<Alert severity="error" sx={{ mt: 2 }}>
|
||
{error}
|
||
</Alert>
|
||
)}
|
||
|
||
<Button
|
||
type="submit"
|
||
fullWidth
|
||
variant="contained"
|
||
size="large"
|
||
disabled={loading}
|
||
sx={{ mt: 3, mb: 2 }}
|
||
>
|
||
{loading ? 'Регистрация...' : 'Зарегистрироваться'}
|
||
</Button>
|
||
|
||
<Box sx={{ textAlign: 'center' }}>
|
||
<Typography variant="body2">
|
||
Уже есть аккаунт?{' '}
|
||
<Link component={RouterLink} to="/login" underline="hover">
|
||
Войти
|
||
</Link>
|
||
</Typography>
|
||
</Box>
|
||
</form>
|
||
</Paper>
|
||
</Container>
|
||
</Box>
|
||
);
|
||
}
|