diff options
| author | eug-vs <eug-vs@keemail.me> | 2020-11-15 04:42:11 +0300 |
|---|---|---|
| committer | eug-vs <eug-vs@keemail.me> | 2020-11-15 04:42:11 +0300 |
| commit | fc2b1a95e61dcc1bacb624f94b5b77374eb65faa (patch) | |
| tree | 0f0e719b722077644ffe87f1fb4f896edbcd312d /src/containers/BsuFantomSection/LoginForm.tsx | |
| parent | 6d6e0f9d641c9c15a147e0a53fa1db45574560e0 (diff) | |
| download | famcs-kit-fc2b1a95e61dcc1bacb624f94b5b77374eb65faa.tar.gz | |
refactor: LoginSection -> LoginForm
Diffstat (limited to 'src/containers/BsuFantomSection/LoginForm.tsx')
| -rw-r--r-- | src/containers/BsuFantomSection/LoginForm.tsx | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/src/containers/BsuFantomSection/LoginForm.tsx b/src/containers/BsuFantomSection/LoginForm.tsx new file mode 100644 index 0000000..208c1f7 --- /dev/null +++ b/src/containers/BsuFantomSection/LoginForm.tsx @@ -0,0 +1,70 @@ +import React, { useState } from 'react'; +import { ContentSection } from 'react-benzin'; +import { Link, TextField, Button, Grid } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import { useAuth } from '../../hooks/useAuth'; + + +const useStyles = makeStyles(theme => ({ + form: { + width: theme.spacing(50), + display: 'flex', + flexDirection: 'column', + '& > *': { + margin: theme.spacing(1) + } + }, +})); + + +const LoginForm: React.FC = () => { + const classes = useStyles(); + const { login } = useAuth(); + const [username, setUsername] = useState<string>(''); + const [password, setPassword] = useState<string>(''); + + const handleChangeUsername = (event: React.ChangeEvent<HTMLInputElement>) => { + setUsername(event.target.value); + }; + + const handleChangePassword = (event: React.ChangeEvent<HTMLInputElement>) => { + setPassword(event.target.value); + }; + + const handleSubmit = () => login(username, password); + + return ( + <Grid container direction="column" spacing={2}> + <Grid item xs={3}> + <TextField + onChange={handleChangeUsername} + variant="outlined" + label="Username" + fullWidth + /> + </Grid> + <Grid item xs={3}> + <TextField + onChange={handleChangePassword} + variant="outlined" + label="Password" + type="password" + fullWidth + /> + </Grid> + <Grid item xs={3}> + <Button + onClick={handleSubmit} + variant="contained" + size="large" + color="primary" + fullWidth + > + Login + </Button> + </Grid> + </Grid> + ); +}; + +export default LoginForm; |