129 lines
3.7 KiB
TypeScript
129 lines
3.7 KiB
TypeScript
import { useState } from "react";
|
||
import { Box, Button, TextField, Typography, InputAdornment, IconButton } from '@mui/material';
|
||
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
|
||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||
import GradientTextField from '../GradientTextField';
|
||
import GradientVisibilityToggleIcon from '../../assets/Icons/GradientVisibilityToggleIcon'
|
||
import { useNavigate } from 'react-router-dom'
|
||
|
||
interface AuthFormProps {
|
||
config: {
|
||
username: string;
|
||
password: string;
|
||
};
|
||
handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||
onLogin: () => void;
|
||
}
|
||
|
||
const AuthForm = ({ config, handleInputChange, onLogin }: AuthFormProps) => {
|
||
const [showPassword, setShowPassword] = useState(false);
|
||
const navigate = useNavigate();
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '1.5vw',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<GradientTextField
|
||
label="Никнейм"
|
||
required
|
||
name="username"
|
||
value={config.username}
|
||
onChange={handleInputChange}
|
||
sx={{
|
||
mt: '2.5vw',
|
||
mb: '0vw'
|
||
}}
|
||
/>
|
||
<GradientTextField
|
||
label="Пароль"
|
||
required
|
||
type={showPassword ? "text" : "password"}
|
||
name="password"
|
||
value={config.password}
|
||
onChange={handleInputChange}
|
||
sx={{
|
||
'& .MuiInputBase-input': {
|
||
color: 'white',
|
||
padding: '1rem 0.7rem 1.1rem 1.5rem',
|
||
fontFamily: 'Benzin-Bold',
|
||
},
|
||
}}
|
||
InputProps={{
|
||
endAdornment: (
|
||
<InputAdornment position="end" sx={{ margin: '0' }}>
|
||
<IconButton
|
||
disableRipple
|
||
disableFocusRipple
|
||
disableTouchRipple
|
||
onClick={() => setShowPassword((prev) => !prev)}
|
||
edge="end"
|
||
sx={{
|
||
color: "white",
|
||
margin: '0',
|
||
padding: '0',
|
||
'& MuiTouchRipple-root css-r3djoj-MuiTouchRipple-root': {
|
||
display: 'none',
|
||
},
|
||
}}>
|
||
<GradientVisibilityToggleIcon
|
||
crossed={showPassword} // когда type="text" -> перечеркнуть
|
||
sx={{ fontSize: "2.5vw", mr: '0.5vw' }}
|
||
/>
|
||
</IconButton>
|
||
</InputAdornment>
|
||
),
|
||
}}
|
||
/>
|
||
<Button onClick={onLogin} variant="contained"
|
||
sx={{
|
||
transition: 'transform 0.3s ease',
|
||
width: '60%',
|
||
mt: 2,
|
||
background: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
|
||
fontFamily: 'Benzin-Bold',
|
||
borderRadius: '2.5vw',
|
||
fontSize: '2vw',
|
||
'&:hover': {
|
||
transform: 'scale(1.02)',
|
||
|
||
},
|
||
}}>
|
||
Войти
|
||
</Button>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: 'flex-end',
|
||
}}
|
||
>
|
||
<Typography
|
||
onClick={() => navigate('/registration')}
|
||
sx={{
|
||
fontFamily: 'Benzin-Bold',
|
||
fontSize: '1vw',
|
||
textTransform: 'uppercase',
|
||
letterSpacing: '0.08em',
|
||
cursor: 'pointer',
|
||
backgroundImage:
|
||
'linear-gradient(71deg, #F27121 0%, #E940CD 60%, #8A2387 100%)',
|
||
WebkitBackgroundClip: 'text',
|
||
WebkitTextFillColor: 'transparent',
|
||
textShadow: '0 0 15px rgba(0,0,0,0.9)',
|
||
'&:hover': {
|
||
opacity: 1,
|
||
},
|
||
}}
|
||
>
|
||
Зарегистрироваться
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default AuthForm;
|