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 t from './../common/localization'; import RegisterForm from './RegisterForm'; import ResetPasswordForm from './ResetPasswordForm'; const useStyles = makeStyles(theme => ({ logoContainer: { textAlign: 'center', color: theme.palette.primary.main, }, resetPassword: { cursor: 'pointer', } })); const forms = { register: () => RegisterForm, resetPassword: () => ResetPasswordForm, }; const LoginForm = ({ setCurrentForm }) => { const classes = useStyles(); const dispatch = useDispatch(); const history = useHistory(); const theme = useTheme(); const [failed, setFailed] = useState(false); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const registrationEnabled = useSelector(state => state.session.server ? state.session.server['registration'] : false); const handleEmailChange = (event) => { setEmail(event.target.value); } const handlePasswordChange = (event) => { setPassword(event.target.value); } const handleLogin = async (event) => { event.preventDefault(); const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) }); if (response.ok) { const user = await response.json(); dispatch(sessionActions.updateUser(user)); history.push('/'); } else { setFailed(true); setPassword(''); } } return ( {useMediaQuery(theme.breakpoints.down('md')) && } {t('loginLanguage')} setCurrentForm(forms.resetPassword)} className={classes.resetPassword} underline="none">{t('loginReset')} ) } export default LoginForm;