aswi2022code-of-duty-gitlab/frontend/src/features/Auth/Login.tsx @ 0d90d67b

import { Button, TextField, Typography } from '@mui/material'
import { useFormik } from 'formik'
import { Fragment, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import * as yup from 'yup'
import { SchemaOf } from 'yup'
import { RootState } from '../redux/store'
import { logIn } from './userThunks'

interface LoginFields {
    username: string
    password: string
}

const Login = () => {
    const validationSchema: SchemaOf<LoginFields> = yup.object().shape({
        username: yup.string().required('Username is required'),
        password: yup.string().required('Password is required'),
    })

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

    // Redirect to home if the user is logged in
    const userLoggedIn = useSelector(
        (state: RootState) => state.user.isLoggedIn
    )
    const navigate = useNavigate()
    useEffect(() => {
        if (userLoggedIn) {
            navigate('/')
        }
    }, [userLoggedIn, navigate])

    return (
        <Fragment>
            <Typography variant="h3">Login</Typography>

            <form onSubmit={formik.handleSubmit}>
                <TextField
                    label="Username"
                    name="username"
                    fullWidth
                    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
                    type="password"
                    label="Password"
                    name="password"
                    fullWidth
                    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
                    }
                    sx={{ mb: 2 }}
                />
                <Button
                    size="large"
                    variant="contained"
                    color="primary"
                    type="submit"
                    fullWidth
                >
                    Login
                </Button>
            </form>
        </Fragment>
    )
}

export default Login