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'; import StartPage from '../../StartPage'; import { useTranslation } from '../../LocalizationProvider'; const useStyles = makeStyles((theme) => ({ register: { fontSize: theme.spacing(3), fontWeight: 500, marginLeft: theme.spacing(2), textTransform: 'uppercase', }, link: { fontSize: theme.spacing(3), fontWeight: 500, marginTop: theme.spacing(0.5), cursor: 'pointer', }, })); const RegisterForm = () => { const classes = useStyles(); const history = useHistory(); const t = useTranslation(); const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [snackbarOpen, setSnackbarOpen] = useState(false); const submitDisabled = () => !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password; const handleRegister = async () => { const response = await fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name, email, password }), }); if (response.ok) { setSnackbarOpen(true); } }; return ( history.push('/login')} autoHideDuration={6000} message={t('loginCreated')} /> history.push('/login')}> {t('loginRegister')} setName(event.target.value)} variant="filled" /> setEmail(event.target.value)} variant="filled" /> setPassword(event.target.value)} variant="filled" /> ); }; export default RegisterForm;