Projekt

Obecné

Profil

Stáhnout (6.52 KB) Statistiky
| Větev: | Tag: | Revize:
1 b523c74d Schwobik
import { Fragment, FunctionComponent, useEffect, useState } from 'react'
2
import Dialog, { DialogProps } from '@mui/material/Dialog'
3
import {
4
    Button,
5
    DialogContent,
6
    Link,
7
    TextField,
8
    Typography,
9
} from '@mui/material'
10
import { useFormik } from 'formik'
11
import * as yup from 'yup'
12
import { useDispatch, useSelector } from 'react-redux'
13
import { Link as RouterLink, useNavigate } from 'react-router-dom'
14
import {logIn, register} from './userThunks'
15
import { RootState } from '../redux/store'
16
import { resetLoggingIn } from './userSlice'
17
import { Box } from '@mui/system'
18 627f4d82 Schwobik
import {unwrapResult} from "@reduxjs/toolkit"
19 6129910f Vaclav Honzik
20 b523c74d Schwobik
export interface RegisterDialogProps {
21
    maxWidth?: DialogProps['maxWidth']
22
}
23
24
const RegisterDialog: FunctionComponent<RegisterDialogProps> = ({
25
                                                              maxWidth,
26
                                                          }) => {
27
    const [open, setOpen] = useState(true)
28
29
    const dispatch = useDispatch()
30
    const navigate = useNavigate()
31
    dispatch(resetLoggingIn())
32
    const validationSchema = yup.object().shape({
33
        username: yup.string().required('Username is required'),
34
        password: yup.string().required('Password is required'),
35
        confirmationPassword: yup.string().oneOf([yup.ref('password'), null], 'Passwords must match'),
36
        email: yup.string().required('Email is required'),
37
38
    })
39 6129910f Vaclav Honzik
40 b523c74d Schwobik
    const formik = useFormik({
41
        initialValues: {
42
            username: '',
43
            password: '',
44
            confirmationPassword: '',
45
            email: '',
46
        },
47
        validationSchema,
48
        onSubmit: () => {
49 627f4d82 Schwobik
            const response = dispatch(
50 b523c74d Schwobik
                register({
51 627f4d82 Schwobik
                    name: formik.values.username,
52 b523c74d Schwobik
                    passwords: {
53
                        password: formik.values.password,
54
                        confirmationPassword: formik.values.confirmationPassword,
55
                    },
56
                    permissions: {
57
                        canRead: false,
58
                        canWrite: false,
59
                        canDelete: false,
60
                    },
61
                    email: formik.values.email,
62
                })
63
            )
64 627f4d82 Schwobik
65 b523c74d Schwobik
        },
66
    })
67
68
    const onCancel = () => {
69
        formik.resetForm()
70
        navigate('/Administration')
71
    }
72
73
    return (
74
        <Fragment>
75
            <Dialog
76
                open={open}
77
                fullWidth={true}
78
                onClose={onCancel}
79
                maxWidth="md"
80
            >
81
                <Typography sx={{ ml: 2, mt: 2 }} variant="h5" fontWeight="600">
82
                    Register new user
83
                </Typography>
84
                <DialogContent>
85
                    <form onSubmit={formik.handleSubmit}>
86
                        <TextField
87
                            fullWidth
88
                            label="Name"
89
                            name="username"
90
                            sx={{ mb: 2 }}
91
                            value={formik.values.username}
92
                            onChange={formik.handleChange}
93
                            error={
94
                                Boolean(formik.errors.username) &&
95
                                formik.touched.username
96
                            }
97
                            helperText={
98
                                formik.errors.username &&
99
                                formik.touched.username &&
100
                                formik.errors.username
101
                            }
102
                        />
103
                        <TextField
104
                            fullWidth
105
                            label="E-mail"
106
                            name="email"
107
                            type="email"
108
                            sx={{ mb: 2 }}
109
                            value={formik.values.email}
110
                            onChange={formik.handleChange}
111
                            error={
112
                                Boolean(formik.errors.email) &&
113
                                formik.touched.email
114
                            }
115
                            helperText={
116
                                formik.errors.email &&
117
                                formik.touched.email &&
118
                                formik.errors.email
119
                            }
120
                        />
121
                        <TextField
122
                            fullWidth
123
                            label="Password"
124
                            name="password"
125
                            type="password"
126
                            sx={{ mb: 2 }}
127
                            value={formik.values.password}
128
                            onChange={formik.handleChange}
129
                            error={
130
                                Boolean(formik.errors.password) &&
131
                                formik.touched.password
132
                            }
133
                            helperText={
134
                                formik.errors.password &&
135
                                formik.touched.password &&
136
                                formik.errors.password
137
                            }
138
                        />
139
                        <TextField
140
                            fullWidth
141
                            label="Confirm Password"
142
                            name="confirmationPassword"
143
                            type="password"
144
                            sx={{ mb: 2 }}
145
                            value={formik.values.confirmationPassword}
146
                            onChange={formik.handleChange}
147
                            error={
148
                                Boolean(formik.errors.confirmationPassword) &&
149
                                formik.touched.confirmationPassword
150
                            }
151
                            helperText={
152
                                formik.errors.confirmationPassword &&
153
                                formik.touched.confirmationPassword &&
154
                                formik.errors.confirmationPassword
155
                            }
156
                        />
157
                        <Fragment>
158
                            <Button
159
                                sx={{mb: 2}}
160
                                type="submit"
161
                                variant="contained"
162
                                fullWidth
163
                            >
164
                                Register
165
                            </Button>
166
                        </Fragment>
167
                    </form>
168
169
                    <Box sx={{mb: 1}} />
170
                </DialogContent>
171
            </Dialog>
172
        </Fragment>
173
    )
174 6129910f Vaclav Honzik
}
175 b523c74d Schwobik
176
export default RegisterDialog