diff options
Diffstat (limited to 'src/features/auth/GuestLogin.tsx')
-rw-r--r-- | src/features/auth/GuestLogin.tsx | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/src/features/auth/GuestLogin.tsx b/src/features/auth/GuestLogin.tsx new file mode 100644 index 0000000..fb305f7 --- /dev/null +++ b/src/features/auth/GuestLogin.tsx @@ -0,0 +1,61 @@ +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { useDispatch } from 'react-redux'; +import { Button, Grid, Paper, TextField, Typography } from '@mui/material'; + +import { setCredentials } from './authSlice'; +import { useLoginMutation } from '../../apiSlice'; +import type { LoginRequest } from './authSlice'; + +function GuestLogin() { + const dispatch = useDispatch(); + const navigate = useNavigate(); + + // TODO: use react-hook-form + const [formState, setFormState] = useState<LoginRequest>({ + firstName: '', + lastName: '' + }); + + const [login] = useLoginMutation(); + + const handleChange = ({ + target: { name, value }, + }: React.ChangeEvent<HTMLInputElement>) => + setFormState(prev => ({ ...prev, [name]: value })); + + const handleSubmit = async () => { + try { + const user = await login(formState).unwrap(); + dispatch(setCredentials(user)); + navigate('/rsvp'); + } catch (e) { + console.log(e); + } + }; + + return ( + <Paper> + <Grid container spacing={2}> + <Grid item xs={12} md={12} lg={12}> + <Typography variant="h6"> + Guest Login + </Typography> + </Grid> + <Grid item xs={12} md={6} lg={6}> + <TextField label="First Name" variant="outlined" onChange={handleChange} /> + </Grid> + <Grid item xs={12} md={6} lg={6}> + <TextField label="Last Name" variant="outlined" onChange={handleChange} /> + </Grid> + <Grid item> + <Button onClick={handleSubmit} variant="contained"> + Login + </Button> + </Grid> + </Grid> + </Paper> + ); +} + +export default GuestLogin; |