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;