Revize b523c74d

Creation of administration page and user registration
re #9627

frontend/src/features/Auth/RegisterDialog.tsx

@@ -1 @@
-import { useFormik } from "formik"
+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'
 
-const register = () => {
+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'),
+
+    })
 
-    return <></>
+    const formik = useFormik({
+        initialValues: {
+            username: '',
+            password: '',
+            confirmationPassword: '',
+            email: '',
+        },
+        validationSchema,
+        onSubmit: () => {
+            dispatch(
+                register({
+                    username: 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