add group creation
This commit is contained in:
207
src/client/components/authentication/SignIn.tsx
Normal file
207
src/client/components/authentication/SignIn.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import FormLabel from '@mui/material/FormLabel';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Link from '@mui/material/Link';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import GroupAddIcon from '@mui/icons-material/GroupAdd';
|
||||
import ForgotPassword from '../ForgotPassword';
|
||||
import Card from '../Card';
|
||||
import { createUser, fetchGroupByCode, fetchUser } from '../../serverApi';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { useStore } from '../../Store';
|
||||
|
||||
const SignIn = observer(() => {
|
||||
const [emailInput, setEmailInput] = React.useState('');
|
||||
const [emailError, setEmailError] = React.useState('');
|
||||
const [groupInput, setGroupInput] = React.useState('');
|
||||
const [groupError, setGroupError] = React.useState('');
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
|
||||
const {setLoggedIn, setCurrentView, setGroup, setUser} = useStore();
|
||||
const theme = useTheme();
|
||||
|
||||
React.useEffect(() => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const groupParam = params.get('gruppe');
|
||||
if (groupParam) {
|
||||
setGroupInput(groupParam);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleEnterGroup = async (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!isMailValid() || !isGroupValid()) return;
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const groupData = await fetchGroupByCode(groupInput);
|
||||
|
||||
if (!groupData) {
|
||||
setGroupError('Gruppencode existiert nicht.');
|
||||
return;
|
||||
}
|
||||
|
||||
let user = await fetchUser(emailInput);
|
||||
|
||||
if (!user) {
|
||||
user = await createUser(emailInput);
|
||||
if (!user) throw new Error('Error creating user');
|
||||
}
|
||||
|
||||
await cookieStore.set('user', JSON.stringify(user));
|
||||
await cookieStore.set('group', JSON.stringify(groupData));
|
||||
setGroup(groupData);
|
||||
setUser(user);
|
||||
|
||||
setLoggedIn(true);
|
||||
setCurrentView('group');
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Error during sign-in process:', error);
|
||||
} finally {
|
||||
setLoading(false); }
|
||||
};
|
||||
|
||||
const isMailValid = (): boolean => {
|
||||
let isValid = true;
|
||||
if (!/\S+@\S+\.\S+/.test(emailInput)) {
|
||||
setEmailError('Bitte gib eine gültige E-Mail Adresse ein.');
|
||||
isValid = false;
|
||||
} else {
|
||||
setEmailError('');
|
||||
}
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const isGroupValid = (): boolean => {
|
||||
let isValid = true;
|
||||
if (!/^[A-Z0-9]{6}$/.test(groupInput)) {
|
||||
setGroupError('Bitte gib einen gültigen Gruppencode ein.');
|
||||
isValid = false;
|
||||
} else {
|
||||
setGroupError('');
|
||||
}
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const handleClickNewGroup = () => {
|
||||
setCurrentView('newGroup');
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Stack direction="column" justifyContent="space-between"
|
||||
sx={{
|
||||
height: '100dvh',
|
||||
minHeight: '100%',
|
||||
padding: theme.spacing(2),
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
padding: theme.spacing(4),
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Card variant="outlined">
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="h4"
|
||||
sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
|
||||
>
|
||||
{'Gruppe beitreten'}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel htmlFor="email">E-Mail</FormLabel>
|
||||
<TextField
|
||||
error={emailError !== ''}
|
||||
helperText={emailError}
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="ren@tier.de"
|
||||
autoComplete="email"
|
||||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
onBlur={isMailValid}
|
||||
onChange={event => setEmailInput(event.target.value)}
|
||||
value={emailInput}
|
||||
color={emailError ? 'error' : 'primary'} />
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel htmlFor="password">{'Gruppencode'}</FormLabel>
|
||||
<TextField
|
||||
error={groupError !== ''}
|
||||
helperText={groupError}
|
||||
name="groupcode"
|
||||
placeholder="Gruppe123"
|
||||
type="text"
|
||||
id="groupcode"
|
||||
autoComplete="current-groupcode"
|
||||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
onBlur={isGroupValid}
|
||||
onChange={event => setGroupInput(event.target.value.toUpperCase())}
|
||||
value={groupInput}
|
||||
color={groupError ? 'error' : 'primary'} />
|
||||
</FormControl>
|
||||
<ForgotPassword open={open} handleClose={handleClose} />
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
onClick={event => {void handleEnterGroup(event)}}
|
||||
loading={loading}
|
||||
>
|
||||
{'Beitreten'}
|
||||
</Button>
|
||||
<Link
|
||||
component="button"
|
||||
type="button"
|
||||
onClick={handleClickOpen}
|
||||
variant="body2"
|
||||
sx={{ alignSelf: 'center' }}
|
||||
>
|
||||
{'Gruppencode vergessen?'}
|
||||
</Link>
|
||||
</Box>
|
||||
<Divider>oder</Divider>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
onClick={handleClickNewGroup}
|
||||
startIcon={<GroupAddIcon />}
|
||||
>
|
||||
{'Neue Gruppe erstellen'}
|
||||
</Button>
|
||||
</Box>
|
||||
</Card>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default SignIn;
|
||||
Reference in New Issue
Block a user