import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Button, TextField, Typography, Snackbar, IconButton, } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { useNavigate } from 'react-router-dom'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import LoginLayout from './LoginLayout'; import { useTranslation } from '../common/components/LocalizationProvider'; import { snackBarDurationShortMs } from '../common/util/duration'; import { useCatch } from '../reactHelper'; import { sessionActions } from '../store'; const useStyles = makeStyles((theme) => ({ container: { display: 'flex', flexDirection: 'column', gap: theme.spacing(2), }, header: { display: 'flex', alignItems: 'center', }, title: { fontSize: theme.spacing(3), fontWeight: 500, marginLeft: theme.spacing(1), textTransform: 'uppercase', }, })); const RegisterPage = () => { const classes = useStyles(); const dispatch = useDispatch(); const navigate = useNavigate(); const t = useTranslation(); const server = useSelector((state) => state.session.server); const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [snackbarOpen, setSnackbarOpen] = useState(false); const handleSubmit = useCatch(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); } else { throw Error(await response.text()); } }); return (
{!server.newServer && ( navigate('/login')}> )} {t('loginRegister')}
setName(event.target.value)} /> setEmail(event.target.value)} /> setPassword(event.target.value)} />
{ dispatch(sessionActions.updateServer({ ...server, newServer: false })); navigate('/login'); }} autoHideDuration={snackBarDurationShortMs} message={t('loginCreated')} />
); }; export default RegisterPage;