95 lines
2.3 KiB
TypeScript
95 lines
2.3 KiB
TypeScript
import { Box, Button, TextField, Typography } from '@mui/material';
|
||
|
||
interface AuthFormProps {
|
||
config: {
|
||
username: string;
|
||
password: string;
|
||
};
|
||
handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||
onLogin: () => void;
|
||
}
|
||
|
||
const AuthForm = ({ config, handleInputChange, onLogin }: AuthFormProps) => {
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '1.5vw',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<Typography variant="h6">Логин</Typography>
|
||
<TextField
|
||
required
|
||
name="username"
|
||
variant="outlined"
|
||
value={config.username}
|
||
onChange={handleInputChange}
|
||
sx={{
|
||
width: '100%',
|
||
// '& .MuiFormLabel-root': {
|
||
// color: 'white',
|
||
// },
|
||
'& .MuiInputBase-input': {
|
||
color: 'white',
|
||
},
|
||
'& .MuiInput-underline:after': {
|
||
borderBottomColor: '#B2BAC2',
|
||
},
|
||
'& .MuiOutlinedInput-root': {
|
||
'& fieldset': {
|
||
borderColor: '#E0E3E7',
|
||
color: 'white',
|
||
},
|
||
'&:hover fieldset': {
|
||
borderColor: '#B2BAC2',
|
||
},
|
||
'&.Mui-focused fieldset': {
|
||
borderColor: '#6F7E8C',
|
||
},
|
||
},
|
||
}}
|
||
/>
|
||
<Typography variant="h6">Пароль</Typography>
|
||
<TextField
|
||
required
|
||
type="password"
|
||
name="password"
|
||
variant="outlined"
|
||
value={config.password}
|
||
onChange={handleInputChange}
|
||
sx={{
|
||
width: '100%',
|
||
// '& .MuiFormLabel-root': {
|
||
// color: 'white',
|
||
// },
|
||
'& .MuiInputBase-input': {
|
||
color: 'white',
|
||
},
|
||
'& .MuiInput-underline:after': {
|
||
borderBottomColor: '#B2BAC2',
|
||
},
|
||
'& .MuiOutlinedInput-root': {
|
||
'& fieldset': {
|
||
borderColor: '#E0E3E7',
|
||
color: 'white',
|
||
},
|
||
'&:hover fieldset': {
|
||
borderColor: '#B2BAC2',
|
||
},
|
||
'&.Mui-focused fieldset': {
|
||
borderColor: '#6F7E8C',
|
||
},
|
||
},
|
||
}}
|
||
/>
|
||
<Button onClick={onLogin} variant="contained">
|
||
Войти
|
||
</Button>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default AuthForm;
|