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
|