2 files changed, 105 insertions, 0 deletions
diff --git a/client/src/features/auth/GuestLogin.tsx b/client/src/features/auth/GuestLogin.tsx
new file mode 100644
index 0000000..4da7e45
--- /dev/null
+++ b/client/src/features/auth/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 './authSlice';
+import { useLoginMutation } from '../../apiSlice';
+import type { LoginRequest } from '../../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;
diff --git a/client/src/features/auth/authSlice.ts b/client/src/features/auth/authSlice.ts
new file mode 100644
index 0000000..bff2bdd
--- /dev/null
+++ b/client/src/features/auth/authSlice.ts
@@ -0,0 +1,26 @@
+import { createSlice } from '@reduxjs/toolkit';
+import type { RootState } from '../../store';
+import type { Guest } from '../../apiSlice';
+
+type AuthState = {
+  guest?: Guest;
+  token?: string;
+};
+
+const authSlice = createSlice({
+  name: 'auth',
+  initialState: { guest: undefined, token: undefined } as AuthState,
+  reducers: {
+    setCredentials: (state, action) => {
+      const { guest, token } = action.payload;
+      state.guest = guest;
+      state.token = token;
+    },
+  },
+});
+
+export const { setCredentials } = authSlice.actions;
+
+export default authSlice.reducer;
+
+export const selectCurrentGuest = (state: RootState) => state.auth.guest;