Merge branch 'master' of github.com:traccar/traccar-web into fix-key-issue

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>
         )}