Projekt

Obecné

Profil

Stáhnout (4.33 KB) Statistiky
| Větev: | Tag: | Revize:
1
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 } from './userThunks'
15
import { RootState } from '../redux/store'
16
import { resetLoggingIn } from './userSlice'
17
import { Box } from '@mui/system'
18

    
19
export interface LoginDialogProps {
20
    maxWidth?: DialogProps['maxWidth']
21
}
22

    
23
const LoginDialog: FunctionComponent<LoginDialogProps> = ({
24
    maxWidth,
25
}) => {
26
    const [open, setOpen] = useState(true)
27

    
28
    const dispatch = useDispatch()
29
    const navigate = useNavigate()
30
    dispatch(resetLoggingIn())
31
    const validationSchema = yup.object().shape({
32
        username: yup.string().required('Username is required'),
33
        password: yup.string().required('Password is required'),
34
    })
35

    
36
    const isLoggingIn = useSelector(
37
        (state: RootState) => state.user.isLoggingIn
38
    )
39

    
40
    const formik = useFormik({
41
        initialValues: {
42
            username: '',
43
            password: '',
44
        },
45
        validationSchema,
46
        onSubmit: () => {
47
            dispatch(
48
                logIn({
49
                    username: formik.values.username,
50
                    password: formik.values.password,
51
                })
52
            )
53
        },
54
    })
55

    
56
    const onCancel = () => {
57
        formik.resetForm()
58
        navigate('/')
59
    }
60

    
61
    return (
62
        <Fragment>
63
            <Dialog
64
                open={open}
65
                fullWidth={true}
66
                onClose={onCancel}
67
                maxWidth="md"
68
            >
69
                <Typography sx={{ ml: 2, mt: 2 }} variant="h5" fontWeight="600">
70
                    Login
71
                </Typography>
72
                <DialogContent>
73
                    <form onSubmit={formik.handleSubmit}>
74
                        <TextField
75
                            fullWidth
76
                            label="Name"
77
                            name="username"
78
                            sx={{ mb: 2 }}
79
                            value={formik.values.username}
80
                            onChange={formik.handleChange}
81
                            error={
82
                                Boolean(formik.errors.username) &&
83
                                formik.touched.username
84
                            }
85
                            helperText={
86
                                formik.errors.username &&
87
                                formik.touched.username &&
88
                                formik.errors.username
89
                            }
90
                        />
91
                        <TextField
92
                            fullWidth
93
                            label="Password"
94
                            name="password"
95
                            type="password"
96
                            sx={{ mb: 2 }}
97
                            value={formik.values.password}
98
                            onChange={formik.handleChange}
99
                            error={
100
                                Boolean(formik.errors.password) &&
101
                                formik.touched.password
102
                            }
103
                            helperText={
104
                                formik.errors.password &&
105
                                formik.touched.password &&
106
                                formik.errors.password
107
                            }
108
                        />
109
                        <Fragment>
110
                            <Button
111
                                sx={{mb: 2}}
112
                                type="submit"
113
                                variant="contained"
114
                                fullWidth
115
                                disabled={isLoggingIn}
116
                            >
117
                                Log in
118
                            </Button>
119
                        </Fragment>
120
                    </form>
121

    
122
                    <Link component={RouterLink} to="/resetPassword">
123
                        Forgot password?
124
                    </Link>
125
                    <Box sx={{mb: 1}} />
126
                </DialogContent>
127
            </Dialog>
128
        </Fragment>
129
    )
130
}
131

    
132
export default LoginDialog
(2-2/7)