aswi2022code-of-duty-gitlab/frontend/src/features/Auth/LoginDialog.tsx @ 8dd364ad

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 } from './userThunks'
import { RootState } from '../redux/store'
import { resetLoggingIn } from './userSlice'

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

const LoginDialog: FunctionComponent<CreateIndexDialogProps> = ({
    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'),
    })

    const isLoggingIn = useSelector(
        (state: RootState) => state.user.isLoggingIn
    )

    const formik = useFormik({
        initialValues: {
            username: '',
            password: '',
        },
        validationSchema,
        onSubmit: () => {
            dispatch(
                logIn({
                    username: formik.values.username,
                    password: formik.values.password,
                })
            )
        },
    })

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

    return (
        <Fragment>
            <Dialog
                open={open}
                fullWidth={true}
                onClose={onCancel}
                maxWidth="md"
            >
                <Typography sx={{ ml: 2, mt: 2 }} variant="h5" fontWeight="600">
                    Login
                </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="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
                            }
                        />
                        <Fragment>
                            <Button
                                type="submit"
                                variant="contained"
                                fullWidth
                                disabled={isLoggingIn}
                            >
                                Log in
                            </Button>
                        </Fragment>
                    </form>

                    <Link component={RouterLink} to="/resetPassword">
                        Forgot password?
                    </Link>
                </DialogContent>
            </Dialog>
        </Fragment>
    )
}

export default LoginDialog