aswi2022code-of-duty-gitlab/frontend/src/features/Auth/RegisterDialog.tsx @ 2d3a4e2b

import { Fragment, FunctionComponent, useEffect, useState } from 'react'
import Dialog, { DialogProps } from '@mui/material/Dialog'
import {
    Button,
    DialogContent,
    Link,
    TextField,
    Typography,
} from '@mui/material'
import { useFormik } from 'formik'
import * as yup from 'yup'
import { useDispatch, useSelector } from 'react-redux'
import { Link as RouterLink, useNavigate } from 'react-router-dom'
import {logIn, register} from './userThunks'
import { RootState } from '../redux/store'
import { resetLoggingIn } from './userSlice'
import { Box } from '@mui/system'
import {unwrapResult} from "@reduxjs/toolkit"

export interface RegisterDialogProps {
    maxWidth?: DialogProps['maxWidth']
}

const RegisterDialog: FunctionComponent<RegisterDialogProps> = ({
                                                              maxWidth,
                                                          }) => {
    const [open, setOpen] = useState(true)

    const dispatch = useDispatch()
    const navigate = useNavigate()
    dispatch(resetLoggingIn())
    const validationSchema = yup.object().shape({
        username: yup.string().required('Username is required'),
        password: yup.string().required('Password is required'),
        confirmationPassword: yup.string().oneOf([yup.ref('password'), null], 'Passwords must match'),
        email: yup.string().required('Email is required'),

    })

    const formik = useFormik({
        initialValues: {
            username: '',
            password: '',
            confirmationPassword: '',
            email: '',
        },
        validationSchema,
        onSubmit: () => {
            const response = dispatch(
                register({
                    name: formik.values.username,
                    passwords: {
                        password: formik.values.password,
                        confirmationPassword: formik.values.confirmationPassword,
                    },
                    permissions: {
                        canRead: false,
                        canWrite: false,
                        canDelete: false,
                    },
                    email: formik.values.email,
                })
            )

        },
    })

    const onCancel = () => {
        formik.resetForm()
        navigate('/Administration')
    }

    return (
        <Fragment>
            <Dialog
                open={open}
                fullWidth={true}
                onClose={onCancel}
                maxWidth="md"
            >
                <Typography sx={{ ml: 2, mt: 2 }} variant="h5" fontWeight="600">
                    Register new user
                </Typography>
                <DialogContent>
                    <form onSubmit={formik.handleSubmit}>
                        <TextField
                            fullWidth
                            label="Name"
                            name="username"
                            sx={{ mb: 2 }}
                            value={formik.values.username}
                            onChange={formik.handleChange}
                            error={
                                Boolean(formik.errors.username) &&
                                formik.touched.username
                            }
                            helperText={
                                formik.errors.username &&
                                formik.touched.username &&
                                formik.errors.username
                            }
                        />
                        <TextField
                            fullWidth
                            label="E-mail"
                            name="email"
                            type="email"
                            sx={{ mb: 2 }}
                            value={formik.values.email}
                            onChange={formik.handleChange}
                            error={
                                Boolean(formik.errors.email) &&
                                formik.touched.email
                            }
                            helperText={
                                formik.errors.email &&
                                formik.touched.email &&
                                formik.errors.email
                            }
                        />
                        <TextField
                            fullWidth
                            label="Password"
                            name="password"
                            type="password"
                            sx={{ mb: 2 }}
                            value={formik.values.password}
                            onChange={formik.handleChange}
                            error={
                                Boolean(formik.errors.password) &&
                                formik.touched.password
                            }
                            helperText={
                                formik.errors.password &&
                                formik.touched.password &&
                                formik.errors.password
                            }
                        />
                        <TextField
                            fullWidth
                            label="Confirm Password"
                            name="confirmationPassword"
                            type="password"
                            sx={{ mb: 2 }}
                            value={formik.values.confirmationPassword}
                            onChange={formik.handleChange}
                            error={
                                Boolean(formik.errors.confirmationPassword) &&
                                formik.touched.confirmationPassword
                            }
                            helperText={
                                formik.errors.confirmationPassword &&
                                formik.touched.confirmationPassword &&
                                formik.errors.confirmationPassword
                            }
                        />
                        <Fragment>
                            <Button
                                sx={{mb: 2}}
                                type="submit"
                                variant="contained"
                                fullWidth
                            >
                                Register
                            </Button>
                        </Fragment>
                    </form>

                    <Box sx={{mb: 1}} />
                </DialogContent>
            </Dialog>
        </Fragment>
    )
}

export default RegisterDialog