aboutsummaryrefslogtreecommitdiff
path: root/modern/src/LoginPage.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2021-05-11 21:19:08 -0700
committerGitHub <noreply@github.com>2021-05-11 21:19:08 -0700
commita6525b4560838e7d0d843f4f9edbaad9ad1ad245 (patch)
treea99bc33abf3b73223be3a9230a8c5693fc554bb3 /modern/src/LoginPage.js
parent17e1f8c7b67a36c4e9384b7c7b930b68c8bfd6f4 (diff)
parentca9d842c875c8867aca8ec7c5f533bde1be3f975 (diff)
downloadtrackermap-web-a6525b4560838e7d0d843f4f9edbaad9ad1ad245.tar.gz
trackermap-web-a6525b4560838e7d0d843f4f9edbaad9ad1ad245.tar.bz2
trackermap-web-a6525b4560838e7d0d843f4f9edbaad9ad1ad245.zip
Merge pull request #848 from mail2bishnoi/login_screen
Login screen update
Diffstat (limited to 'modern/src/LoginPage.js')
-rw-r--r--modern/src/LoginPage.js152
1 files changed, 38 insertions, 114 deletions
diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js
index d3be3978..3d4b17f4 100644
--- a/modern/src/LoginPage.js
+++ b/modern/src/LoginPage.js
@@ -1,140 +1,64 @@
import React, { useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-import { sessionActions } from './store';
-import Button from '@material-ui/core/Button';
-import FormControl from '@material-ui/core/FormControl';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/core';
-import TextField from '@material-ui/core/TextField';
-import RegisterDialog from './RegisterDialog';
-import { useSelector } from 'react-redux';
+import { useMediaQuery, makeStyles, Paper } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
-import t from './common/localization';
+import LoginForm from './components/LoginForm';
const useStyles = makeStyles(theme => ({
root: {
- width: 'auto',
- marginLeft: theme.spacing(3),
- marginRight: theme.spacing(3),
- [theme.breakpoints.up(400 + theme.spacing(3 * 2))]: {
- width: 400,
- marginLeft: 'auto',
- marginRight: 'auto',
+ display: 'flex',
+ height: '100vh',
+ },
+ sidebar: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ background: theme.palette.common.purple,
+ paddingBottom: theme.spacing(5),
+ width: theme.dimensions.sidebarWidth,
+ [theme.breakpoints.down('md')]: {
+ width: theme.dimensions.tabletSidebarWidth,
+ },
+ [theme.breakpoints.down('xs')]: {
+ width: '0px',
},
},
paper: {
- marginTop: theme.spacing(8),
- display: 'flex',
+ display:'flex',
flexDirection: 'column',
+ justifyContent: 'center',
alignItems: 'center',
- padding: theme.spacing(3),
- },
- logo: {
- marginTop: theme.spacing(2)
- },
- buttons: {
- marginTop: theme.spacing(1),
- display: 'flex',
- justifyContent: 'space-evenly',
- '& > *': {
- flexBasis: '40%',
+ flex: 1,
+ boxShadow: '-2px 0px 16px rgba(0, 0, 0, 0.25)',
+ [theme.breakpoints.up('lg')]: {
+ padding: theme.spacing(0, 25, 0, 0)
},
},
+ form: {
+ maxWidth: theme.spacing(52),
+ padding: theme.spacing(5),
+ width: "100%",
+ },
}));
const LoginPage = () => {
- const dispatch = useDispatch();
-
- const [failed, setFailed] = useState(false);
- const [email, setEmail] = useState('');
- const [password, setPassword] = useState('');
- const [registerDialogShown, setRegisterDialogShown] = useState(false);
-
const classes = useStyles();
- const history = useHistory();
-
- const registrationEnabled = useSelector(state => state.session.server ? state.session.server['registration'] : false);
-
- const handleEmailChange = (event) => {
- setEmail(event.target.value);
- }
-
- const handlePasswordChange = (event) => {
- setPassword(event.target.value);
- }
-
- const handleRegister = () => {
- setRegisterDialogShown(true);
- }
-
- const handleRegisterResult = () => {
- setRegisterDialogShown(false);
- }
+ const theme = useTheme();
- const handleLogin = async (event) => {
- event.preventDefault();
- const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) });
- if (response.ok) {
- const user = await response.json();
- dispatch(sessionActions.updateUser(user));
- history.push('/');
- } else {
- setFailed(true);
- setPassword('');
- }
- }
+ const [CurrentForm, setCurrentForm] = useState(() => LoginForm);
+ const matches = useMediaQuery(theme.breakpoints.down('md'));
return (
<main className={classes.root}>
+ <div className={classes.sidebar}>
+ {!matches && <img src='/logo.svg' alt='Traccar' /> }
+ </div>
<Paper className={classes.paper}>
- <img className={classes.logo} src='/logo.svg' alt='Traccar' />
- <form onSubmit={handleLogin}>
-
- <TextField
- margin='normal'
- required
- fullWidth
- error={failed}
- label={t('userEmail')}
- name='email'
- value={email}
- autoComplete='email'
- autoFocus
- onChange={handleEmailChange}
- helperText={failed && 'Invalid username or password'} />
-
- <TextField
- margin='normal'
- required
- fullWidth
- error={failed}
- label={t('userPassword')}
- name='password'
- value={password}
- type='password'
- autoComplete='current-password'
- onChange={handlePasswordChange} />
-
- <FormControl fullWidth margin='normal'>
- <div className={classes.buttons}>
- <Button type='button' variant='contained' onClick={handleRegister} disabled={!registrationEnabled}>
- {t('loginRegister')}
- </Button>
- <Button type='submit' variant='contained' color='primary' disabled={!email || !password}>
- {t('loginLogin')}
- </Button>
- </div>
- </FormControl>
+ <form className={classes.form}>
+ <CurrentForm setCurrentForm={setCurrentForm} />
</form>
-
- {registerDialogShown &&
- <RegisterDialog showDialog={true} onResult={handleRegisterResult} />
- }
-
</Paper>
</main>
- );
+ )
}
-
export default LoginPage;