import React, { useState } from 'react'; import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, } from '@material-ui/core'; import { useTheme } from '@material-ui/core/styles'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { sessionActions } from '../../store'; import { useLocalization, useTranslation } from '../../LocalizationProvider'; import StartPage from '../../StartPage'; import usePersistedState from '../../common/usePersistedState'; const useStyles = makeStyles((theme) => ({ logoContainer: { textAlign: 'center', color: theme.palette.primary.main, }, resetPassword: { cursor: 'pointer', }, })); const LoginForm = () => { const classes = useStyles(); const dispatch = useDispatch(); const history = useHistory(); 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 ? state.session.server.registration : false)); const emailEnabled = useSelector((state) => (state.session.server ? state.session.server.emailEnabled : false)); const handleSubmit = async (event) => { event.preventDefault(); 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)); history.push('/'); } else { setFailed(true); setPassword(''); } }; const handleSpecialKey = (e) => { if (e.keyCode === 13 && email && password) { handleSubmit(e); } }; return ( {useMediaQuery(theme.breakpoints.down('md')) && ( )} setEmail(e.target.value)} onKeyUp={handleSpecialKey} helperText={failed && 'Invalid username or password'} variant="filled" /> setPassword(e.target.value)} onKeyUp={handleSpecialKey} variant="filled" /> {t('loginLanguage')} {emailEnabled && ( history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')} )} ); }; export default LoginForm;