aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/src/login/LoginPage.jsx83
-rw-r--r--modern/src/login/LogoImage.jsx3
2 files changed, 46 insertions, 40 deletions
diff --git a/modern/src/login/LoginPage.jsx b/modern/src/login/LoginPage.jsx
index 2dac3846..27aad7c9 100644
--- a/modern/src/login/LoginPage.jsx
+++ b/modern/src/login/LoginPage.jsx
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import dayjs from 'dayjs';
import {
- useMediaQuery, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, Snackbar, IconButton, Tooltip, LinearProgress, Box,
+ useMediaQuery, Select, MenuItem, FormControl, Button, TextField, Link, Snackbar, IconButton, Tooltip, LinearProgress, Box,
} from '@mui/material';
import ReactCountryFlag from 'react-country-flag';
import makeStyles from '@mui/styles/makeStyles';
@@ -21,8 +21,11 @@ import { useCatch } from '../reactHelper';
const useStyles = makeStyles((theme) => ({
options: {
position: 'fixed',
- top: theme.spacing(1),
- right: theme.spacing(1),
+ top: theme.spacing(2),
+ right: theme.spacing(2),
+ display: 'flex',
+ flexDirection: 'row',
+ gap: theme.spacing(1),
},
container: {
display: 'flex',
@@ -31,15 +34,16 @@ const useStyles = makeStyles((theme) => ({
},
extraContainer: {
display: 'flex',
- gap: theme.spacing(2),
+ flexDirection: 'row',
+ justifyContent: 'center',
+ gap: theme.spacing(4),
+ marginTop: theme.spacing(2),
},
registerButton: {
minWidth: 'unset',
},
- resetPassword: {
+ link: {
cursor: 'pointer',
- textAlign: 'center',
- marginTop: theme.spacing(2),
},
}));
@@ -152,6 +156,20 @@ const LoginPage = () => {
</IconButton>
</Tooltip>
)}
+ {languageEnabled && (
+ <FormControl>
+ <Select value={language} onChange={(e) => setLanguage(e.target.value)}>
+ {languageList.map((it) => (
+ <MenuItem key={it.code} value={it.code}>
+ <Box component="span" sx={{ mr: 1 }}>
+ <ReactCountryFlag countryCode={it.country} svg />
+ </Box>
+ {it.name}
+ </MenuItem>
+ ))}
+ </Select>
+ </FormControl>
+ )}
</div>
<div className={classes.container}>
{useMediaQuery(theme.breakpoints.down('lg')) && <LogoImage color={theme.palette.primary.main} />}
@@ -207,40 +225,27 @@ const LoginPage = () => {
</Button>
)}
<div className={classes.extraContainer}>
- <Button
- className={classes.registerButton}
- onClick={() => navigate('/register')}
- disabled={!registrationEnabled}
- color="secondary"
- >
- {t('loginRegister')}
- </Button>
- {languageEnabled && (
- <FormControl fullWidth>
- <InputLabel>{t('loginLanguage')}</InputLabel>
- <Select label={t('loginLanguage')} value={language} onChange={(e) => setLanguage(e.target.value)}>
- {languageList.map((it) => (
- <MenuItem key={it.code} value={it.code}>
- <Box component="span" sx={{ mr: 1 }}>
- <ReactCountryFlag countryCode={it.country} svg />
- </Box>
- {it.name}
- </MenuItem>
- ))}
- </Select>
- </FormControl>
+ {registrationEnabled && (
+ <Link
+ onClick={() => navigate('/register')}
+ className={classes.link}
+ underline="none"
+ variant="caption"
+ >
+ {t('loginRegister')}
+ </Link>
+ )}
+ {emailEnabled && (
+ <Link
+ onClick={() => navigate('/reset-password')}
+ className={classes.link}
+ underline="none"
+ variant="caption"
+ >
+ {t('loginReset')}
+ </Link>
)}
</div>
- {emailEnabled && (
- <Link
- onClick={() => navigate('/reset-password')}
- className={classes.resetPassword}
- underline="none"
- variant="caption"
- >
- {t('loginReset')}
- </Link>
- )}
</div>
<Snackbar
open={!!announcement && !announcementShown}
diff --git a/modern/src/login/LogoImage.jsx b/modern/src/login/LogoImage.jsx
index 26ff81e6..e92403ef 100644
--- a/modern/src/login/LogoImage.jsx
+++ b/modern/src/login/LogoImage.jsx
@@ -4,13 +4,14 @@ import { useSelector } from 'react-redux';
import { makeStyles } from '@mui/styles';
import Logo from '../resources/images/logo.svg?react';
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
image: {
alignSelf: 'center',
maxWidth: '240px',
maxHeight: '120px',
width: 'auto',
height: 'auto',
+ margin: theme.spacing(2),
},
}));