adds api, guard, tailwind

1 files changed, 23 insertions, 25 deletions

diff --git a/client/components/sign_in/_sign_in.jsx b/client/components/sign_in/_sign_in.jsx
index a6e802c..295a7c9 100644
--- a/client/components/sign_in/_sign_in.jsx
+++ b/client/components/sign_in/_sign_in.jsx
@@ -1,9 +1,12 @@
 import { useContext, useState } from 'react';
 import { useNavigate } from 'react-router';
-import { SettingsContext } from '../../utils/settings_context';
+import { AuthContext } from '../../utils/auth_context';
+import { Paper } from '../common/paper';
+import { Input } from '../common/input';
+import { Button } from '../common/button';
 
 export const SignIn = () => {
-  const [, dispatch] = useContext(SettingsContext);
+  const [, setAuthToken] = useContext(AuthContext);
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const navigate = useNavigate();
@@ -25,7 +28,7 @@ export const SignIn = () => {
     });
     if (res.status === 201) {
       const result = await res.json();
-      dispatch({ type: 'update', payload: { jwt: result.token } });
+      setAuthToken(result.token);
       navigate('/');
     } else {
       console.error('An issue occurred when logging in.');
@@ -33,28 +36,23 @@ export const SignIn = () => {
   };
 
   return (
-    <div>
-      <div>Email</div>
-      <input
-        type="email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-      />
-      <div>Password</div>
-      <input
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-      <div>
-        <button type="button" onClick={signIn}>
-          Sign in
-        </button>
-      </div>
-      <div>
-        <button type="button" onClick={goToSignUp}>
-          Sign up
-        </button>
+    <div className="flex flex-row justify-center m-4">
+      <div className="w-96">
+        <Paper>
+          <div>Email</div>
+          <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+          <div>Password</div>
+          <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+          <div className="flex flex-row justify-end mt-2">
+            <Button type="button" onClick={goToSignUp}>
+              Sign up
+            </Button>
+            <div className="pl-2" />
+            <Button type="button" onClick={signIn}>
+              Sign in
+            </Button>
+          </div>
+        </Paper>
       </div>
     </div>
   );