diff options
Diffstat (limited to 'client/src/components/GuestLogin.tsx')
-rw-r--r-- | client/src/components/GuestLogin.tsx | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/client/src/components/GuestLogin.tsx b/client/src/components/GuestLogin.tsx new file mode 100644 index 0000000..c06bc6e --- /dev/null +++ b/client/src/components/GuestLogin.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import { useDispatch } from 'react-redux'; +import { Button, Container, TextField, Typography } from '@mui/material'; +import { useForm } from 'react-hook-form'; +import { setCredentials } from '../slices/authSlice'; +import { useLoginMutation } from '../slices/apiSlice'; +import type { LoginRequest } from '../slices/apiSlice'; + +function GuestLogin() { + const dispatch = useDispatch(); + const navigate = useNavigate(); + const [login] = useLoginMutation(); + + const { + register, + handleSubmit, + formState: { errors }, + } = useForm<LoginRequest>({ + defaultValues: { + firstName: '', + lastName: '', + }, + }); + + const onSubmit = async (data: LoginRequest) => { + try { + dispatch(setCredentials(await login(data).unwrap())); + navigate('/rsvp'); + } catch (e) { + console.log(e); + } + }; + + return ( + <Container + component="form" + maxWidth="xs" + noValidate + onSubmit={handleSubmit(onSubmit)} + > + <div + style={{ + marginTop: 80, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }} + > + <Typography variant="h6">Guest Login</Typography> + <TextField + label="First Name" + variant="outlined" + margin="normal" + fullWidth + error={!!errors.firstName} + helperText={errors.firstName?.message} + required + {...register('firstName', { required: 'This field is required' })} + /> + <TextField + label="Last Name" + variant="outlined" + margin="normal" + fullWidth + error={!!errors.lastName} + helperText={errors.lastName?.message} + required + {...register('lastName', { required: 'This field is required' })} + /> + <Button type="submit" variant="contained" fullWidth sx={{ mt: 2 }}> + Log in + </Button> + </div> + </Container> + ); +} + +export default GuestLogin; |