3 files changed, 134 insertions, 3 deletions
diff --git a/client/components/router.jsx b/client/components/router.jsx
index a40b06e..6760bea 100644
--- a/client/components/router.jsx
+++ b/client/components/router.jsx
@@ -1,10 +1,21 @@
-import { Routes, Route } from 'react-router-dom';
+import { useContext } from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
 import { Home } from './home/_home';
+import { SettingsContext } from '../utils/settings_context';
+import { SignIn } from './sign_in/_sign_in';
+import { SignUp } from './sign_up/_sign_up';
 
 export const Router = () => {
+  const [settings] = useContext(SettingsContext);
+  const { JWT } = settings;
   return (
     <Routes>
-      <Route path="/" element={<Home />} />
+      <Route
+        path="/"
+        element={JWT ? <Home /> : <Navigate replace to="signin" />} // no JWT means not logged in
+      />
+      <Route path="signin" element={<SignIn />} />
+      <Route path="signup" element={<SignUp />} />
     </Routes>
   );
 };
diff --git a/client/components/sign_in/_sign_in.jsx b/client/components/sign_in/_sign_in.jsx
index 099ecd6..753b2b5 100644
--- a/client/components/sign_in/_sign_in.jsx
+++ b/client/components/sign_in/_sign_in.jsx
@@ -1,3 +1,37 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router';
+
 export const SignIn = () => {
-  return <div>I am the sign in page</div>;
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const navigate = useNavigate();
+
+  const goToSignUp = () => {
+    navigate('/signup');
+  };
+
+  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">Sign in</button>
+      </div>
+      <div>
+        <button type="button" onClick={goToSignUp}>
+          Sign up
+        </button>
+      </div>
+    </div>
+  );
 };
diff --git a/client/components/sign_up/_sign_up.jsx b/client/components/sign_up/_sign_up.jsx
new file mode 100644
index 0000000..bbbd51b
--- /dev/null
+++ b/client/components/sign_up/_sign_up.jsx
@@ -0,0 +1,86 @@
+import { useState } from 'react';
+
+export const SignUp = () => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [emailConfirmation, setEmailConfirmation] = useState('');
+  const [password, setPassword] = useState('');
+  const [passwordConfiramation, setPasswordConfirmation] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const signUp = async () => {
+    if (email === '') {
+      setErrorMessage('Email cannot be blank');
+      return;
+    }
+    if (email !== emailConfirmation) {
+      setErrorMessage('Email does not match.');
+      return;
+    }
+    if (password === '') {
+      setErrorMessage('Password cannot be blank');
+      return;
+    }
+    if (password !== passwordConfiramation) {
+      setErrorMessage('Password does not match');
+      return;
+    }
+    if (name === '') {
+      setErrorMessage('Name cannot be blank.');
+      return;
+    }
+    try {
+      await fetch('/users', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name,
+          email,
+          password,
+        }),
+      });
+    } catch (e) {
+      console.log(e.message);
+    }
+  };
+
+  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>
+    </div>
+  );
+};