adds api, guard, tailwind

1 files changed, 30 insertions, 36 deletions

diff --git a/client/components/sign_up/_sign_up.jsx b/client/components/sign_up/_sign_up.jsx
index 13ac6c7..c5d0dcd 100644
--- a/client/components/sign_up/_sign_up.jsx
+++ b/client/components/sign_up/_sign_up.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 SignUp = () => {
-  const [, dispatch] = useContext(SettingsContext);
+  const [, setAuthToken] = useContext(AuthContext);
   const navigate = useNavigate();
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
@@ -46,45 +49,36 @@ export const SignUp = () => {
     });
     if (res.status === 201) {
       const result = await res.json();
-      dispatch({ type: 'update', payload: { jwt: result.token } });
+      setAuthToken(result.token);
       navigate('/');
     }
   };
 
   return (
-    <div>
-      <div>Name</div>
-      <input
-        type="text"
-        value={name}
-        onChange={(e) => setName(e.target.value)}
-      />
-      <div>Email</div>
-      <input
-        type="email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-      />
-      <div>Confirm Email</div>
-      <input
-        type="email"
-        value={emailConfirmation}
-        onChange={(e) => setEmailConfirmation(e.target.value)}
-      />
-      <div>Password</div>
-      <input
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-      <div>Confirm Password</div>
-      <input
-        type="password"
-        value={passwordConfiramation}
-        onChange={(e) => setPasswordConfirmation(e.target.value)}
-      />
-      <div>
-        <button type="button" onClick={signUp}>Sign up</button>
+    <div className="flex flex-row justify-center m-4">
+      <div className="w-96">
+        <Paper>
+          <div>Name</div>
+          <Input type="text" value={name} onChange={(e) => setName(e.target.value)} />
+          <div>Email</div>
+          <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+          <div>Confirm Email</div>
+          <Input type="email" value={emailConfirmation} onChange={(e) => setEmailConfirmation(e.target.value)} />
+          <div>Password</div>
+          <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+          <div>Confirm Password</div>
+          <Input
+            type="password"
+            value={passwordConfiramation}
+            onChange={(e) => setPasswordConfirmation(e.target.value)}
+          />
+          <div className="flex flex-row justify-end mt-2">
+            <Button type="button" onClick={signUp}>
+              Sign up
+            </Button>
+          </div>
+          <div className="flex">{errorMessage}</div>
+        </Paper>
       </div>
     </div>
   );