aboutsummaryrefslogtreecommitdiff
path: root/modern/src/login
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/login')
-rw-r--r--modern/src/login/LoginLayout.js14
-rw-r--r--modern/src/login/LoginPage.js40
-rw-r--r--modern/src/login/RegisterPage.js18
-rw-r--r--modern/src/login/ResetPasswordPage.js17
4 files changed, 48 insertions, 41 deletions
diff --git a/modern/src/login/LoginLayout.js b/modern/src/login/LoginLayout.js
index 4a2bf43a..cfdd837c 100644
--- a/modern/src/login/LoginLayout.js
+++ b/modern/src/login/LoginLayout.js
@@ -1,6 +1,7 @@
import React from 'react';
-import { useMediaQuery, makeStyles, Paper } from '@material-ui/core';
-import { useTheme } from '@material-ui/core/styles';
+import { useMediaQuery, Paper } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { useTheme } from '@mui/material/styles';
const useStyles = makeStyles((theme) => ({
root: {
@@ -15,10 +16,10 @@ const useStyles = makeStyles((theme) => ({
background: theme.palette.primary.main,
paddingBottom: theme.spacing(5),
width: theme.dimensions.sidebarWidth,
- [theme.breakpoints.down('md')]: {
+ [theme.breakpoints.down('lg')]: {
width: theme.dimensions.sidebarWidthTablet,
},
- [theme.breakpoints.down('xs')]: {
+ [theme.breakpoints.down('sm')]: {
width: '0px',
},
},
@@ -54,12 +55,11 @@ const LoginLayout = ({ children }) => {
<>
<main className={classes.root}>
<div className={classes.sidebar}>
- {!useMediaQuery(theme.breakpoints.down('md'))
- && (
+ {!useMediaQuery(theme.breakpoints.down('lg')) && (
<svg height="64" width="240">
<use xlinkHref="/logo.svg#img" />
</svg>
- )}
+ )}
</div>
<Paper className={classes.paper}>
<form className={classes.form}>
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>
)}
diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js
index 78728b58..986bf894 100644
--- a/modern/src/login/RegisterPage.js
+++ b/modern/src/login/RegisterPage.js
@@ -1,9 +1,10 @@
import React, { useState } from 'react';
import {
- Grid, Button, TextField, Typography, Link, makeStyles, Snackbar,
-} from '@material-ui/core';
-import { useHistory } from 'react-router-dom';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+ Grid, Button, TextField, Typography, Link, Snackbar,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { useNavigate } from 'react-router-dom';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import LoginLayout from './LoginLayout';
import { useTranslation } from '../common/components/LocalizationProvider';
import { snackBarDurationShortMs } from '../common/util/duration';
@@ -26,7 +27,7 @@ const useStyles = makeStyles((theme) => ({
const RegisterPage = () => {
const classes = useStyles();
- const history = useHistory();
+ const navigate = useNavigate();
const t = useTranslation();
const [name, setName] = useState('');
@@ -51,7 +52,7 @@ const RegisterPage = () => {
<LoginLayout>
<Snackbar
open={snackbarOpen}
- onClose={() => history.push('/login')}
+ onClose={() => navigate('/login')}
autoHideDuration={snackBarDurationShortMs}
message={t('loginCreated')}
/>
@@ -59,7 +60,7 @@ const RegisterPage = () => {
<Grid container item>
<Grid item>
<Typography className={classes.link} color="primary">
- <Link onClick={() => history.push('/login')}>
+ <Link onClick={() => navigate('/login')}>
<ArrowBackIcon />
</Link>
</Typography>
@@ -80,7 +81,6 @@ const RegisterPage = () => {
autoComplete="name"
autoFocus
onChange={(event) => setName(event.target.value)}
- variant="filled"
/>
</Grid>
<Grid item>
@@ -93,7 +93,6 @@ const RegisterPage = () => {
value={email}
autoComplete="email"
onChange={(event) => setEmail(event.target.value)}
- variant="filled"
/>
</Grid>
<Grid item>
@@ -106,7 +105,6 @@ const RegisterPage = () => {
type="password"
autoComplete="current-password"
onChange={(event) => setPassword(event.target.value)}
- variant="filled"
/>
</Grid>
<Grid item>
diff --git a/modern/src/login/ResetPasswordPage.js b/modern/src/login/ResetPasswordPage.js
index 93e154e3..c3e91fe6 100644
--- a/modern/src/login/ResetPasswordPage.js
+++ b/modern/src/login/ResetPasswordPage.js
@@ -1,9 +1,10 @@
import React, { useState } from 'react';
import {
- Grid, Button, TextField, Typography, Link, makeStyles, Snackbar,
-} from '@material-ui/core';
-import { useHistory } from 'react-router-dom';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+ Grid, Button, TextField, Typography, Link, Snackbar,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { useNavigate } from 'react-router-dom';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import LoginLayout from './LoginLayout';
import { useTranslation } from '../common/components/LocalizationProvider';
import useQuery from '../common/util/useQuery';
@@ -27,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
const ResetPasswordPage = () => {
const classes = useStyles();
- const history = useHistory();
+ const navigate = useNavigate();
const t = useTranslation();
const query = useQuery();
@@ -62,7 +63,7 @@ const ResetPasswordPage = () => {
<LoginLayout>
<Snackbar
open={snackbarOpen}
- onClose={() => history.push('/login')}
+ onClose={() => navigate('/login')}
autoHideDuration={snackBarDurationShortMs}
message={!token ? t('loginResetSuccess') : t('loginUpdateSuccess')}
/>
@@ -70,7 +71,7 @@ const ResetPasswordPage = () => {
<Grid container item>
<Grid item>
<Typography className={classes.link} color="primary">
- <Link onClick={() => history.push('/login')}>
+ <Link onClick={() => navigate('/login')}>
<ArrowBackIcon />
</Link>
</Typography>
@@ -93,7 +94,6 @@ const ResetPasswordPage = () => {
value={email}
autoComplete="email"
onChange={(event) => setEmail(event.target.value)}
- variant="filled"
/>
</Grid>
)
@@ -108,7 +108,6 @@ const ResetPasswordPage = () => {
type="password"
autoComplete="current-password"
onChange={(event) => setPassword(event.target.value)}
- variant="filled"
/>
</Grid>
)}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-13 15:08:23 +0000