diff options
Diffstat (limited to 'modern/src/login/LoginPage.js')
-rw-r--r-- | modern/src/login/LoginPage.js | 40 |
1 files changed, 25 insertions, 15 deletions
diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js index 5b690cdc..cc010427 100644 --- a/modern/src/login/LoginPage.js +++ b/modern/src/login/LoginPage.js @@ -1,12 +1,24 @@ import React, { useState } from 'react'; import { - Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, Snackbar, IconButton, Tooltip, -} from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/Close'; -import CachedIcon from '@material-ui/icons/Cached'; -import { useTheme } from '@material-ui/core/styles'; + Grid, + useMediaQuery, + InputLabel, + Select, + MenuItem, + FormControl, + Button, + TextField, + Link, + Snackbar, + IconButton, + Tooltip, +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import CloseIcon from '@mui/icons-material/Close'; +import CachedIcon from '@mui/icons-material/Cached'; +import { useTheme } from '@mui/material/styles'; import { useDispatch, useSelector } from 'react-redux'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { sessionActions } from '../store'; import { useLocalization, useTranslation } from '../common/components/LocalizationProvider'; import LoginLayout from './LoginLayout'; @@ -30,7 +42,7 @@ const useStyles = makeStyles((theme) => ({ const LoginPage = () => { const classes = useStyles(); const dispatch = useDispatch(); - const history = useHistory(); + const navigate = useNavigate(); const theme = useTheme(); const t = useTranslation(); @@ -58,7 +70,7 @@ const LoginPage = () => { if (response.ok) { const user = await response.json(); dispatch(sessionActions.updateUser(user)); - history.push('/'); + navigate('/'); } else { throw Error(await response.text()); } @@ -82,7 +94,7 @@ const LoginPage = () => { </IconButton> </Tooltip> <Grid container direction="column" spacing={2}> - {useMediaQuery(theme.breakpoints.down('md')) + {useMediaQuery(theme.breakpoints.down('lg')) && ( <Grid item className={classes.logoContainer}> <svg height="64" width="240"> @@ -103,7 +115,6 @@ const LoginPage = () => { onChange={(e) => setEmail(e.target.value)} onKeyUp={handleSpecialKey} helperText={failed && 'Invalid username or password'} - variant="filled" /> </Grid> <Grid item> @@ -119,7 +130,6 @@ const LoginPage = () => { autoFocus={!!email} onChange={(e) => setPassword(e.target.value)} onKeyUp={handleSpecialKey} - variant="filled" /> </Grid> <Grid item> @@ -136,14 +146,14 @@ const LoginPage = () => { </Grid> <Grid item container spacing={2}> <Grid item> - <Button onClick={() => history.push('/register')} disabled={!registrationEnabled} color="secondary"> + <Button onClick={() => navigate('/register')} disabled={!registrationEnabled} color="secondary"> {t('loginRegister')} </Button> </Grid> <Grid item xs> - <FormControl variant="filled" fullWidth> + <FormControl fullWidth> <InputLabel>{t('loginLanguage')}</InputLabel> - <Select value={language} onChange={(e) => setLanguage(e.target.value)}> + <Select label={t('loginLanguage')} value={language} onChange={(e) => setLanguage(e.target.value)}> {languageList.map((it) => <MenuItem key={it.code} value={it.code}>{it.name}</MenuItem>)} </Select> </FormControl> @@ -152,7 +162,7 @@ const LoginPage = () => { {emailEnabled && ( <Grid item container justifyContent="flex-end"> <Grid item> - <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link> + <Link onClick={() => navigate('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link> </Grid> </Grid> )} |