Revize 8370b6c1

login simple form impl + slice for user state

frontend/src/features/Auth/Login.tsx

@@ +1 @@
+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 { PasswordDto, UserDto } from '../../swagger/data-contracts'
+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({
+                    name: formik.values.username,
+                    passwords: {
+                        password: formik.values.password,
+                        confirmationPassword: '',
+                    } as PasswordDto,
+                } as UserDto)
+            )
+        },
+    })
+
+    // 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>
+            <p>Credentials = admin:password</p>
 
-        </>
+            <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
+export default Login