rentierroulette/src/client/components/authentication/SignIn.tsx

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;