import React, { useState } from 'react'; import { 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 LockOpenIcon from '@mui/icons-material/LockOpen'; import { useTheme } from '@mui/material/styles'; import { useDispatch, useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { sessionActions } from '../store'; import { useLocalization, useTranslation } from '../common/components/LocalizationProvider'; import LoginLayout from './LoginLayout'; import usePersistedState from '../common/util/usePersistedState'; import logoSvg from '../resources/images/logo.svg'; import { nativePostMessage } from '../common/components/NativeInterface'; const useStyles = makeStyles((theme) => ({ options: { position: 'fixed', top: theme.spacing(1), right: theme.spacing(1), }, container: { display: 'flex', flexDirection: 'column', gap: theme.spacing(2), }, logoContainer: { textAlign: 'center', color: theme.palette.primary.main, }, extraContainer: { display: 'flex', gap: theme.spacing(2), }, registerButton: { minWidth: 'unset', }, resetPassword: { cursor: 'pointer', textAlign: 'right', }, })); const LoginPage = () => { const classes = useStyles(); const dispatch = useDispatch(); const navigate = useNavigate(); const theme = useTheme(); const t = useTranslation(); const { languages, language, setLanguage } = useLocalization(); const languageList = Object.entries(languages).map((values) => ({ code: values[0], name: values[1].name })); const [failed, setFailed] = useState(false); const [email, setEmail] = usePersistedState('loginEmail', ''); const [password, setPassword] = useState(''); const registrationEnabled = useSelector((state) => state.session.server?.registration); const emailEnabled = useSelector((state) => state.session.server?.emailEnabled); const [announcementShown, setAnnouncementShown] = useState(false); const announcement = useSelector((state) => state.session.server?.announcement); const handleSubmit = async (event) => { event.preventDefault(); try { const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`), }); if (response.ok) { const user = await response.json(); dispatch(sessionActions.updateUser(user)); nativePostMessage('login'); navigate('/'); } else { throw Error(await response.text()); } } catch (error) { setFailed(true); setPassword(''); } }; const handleSpecialKey = (e) => { if (e.keyCode === 13 && email && password) { handleSubmit(e); } }; return (
window.localStorage.setItem('legacyApp', true) || window.location.replace('/')}> {(window.appInterface || (window.webkit && window.webkit.messageHandlers.appInterface)) && ( navigate('/change-server')}> )}
{useMediaQuery(theme.breakpoints.down('lg')) && (
)} setEmail(e.target.value)} onKeyUp={handleSpecialKey} helperText={failed && 'Invalid username or password'} /> setPassword(e.target.value)} onKeyUp={handleSpecialKey} />
{t('loginLanguage')}
{emailEnabled && ( navigate('/reset-password')} className={classes.resetPassword} underline="none" > {t('loginReset')} )}
setAnnouncementShown(true)}> )} />
); }; export default LoginPage;