From 3902da1747a3e32db0b67f1162eafd4860b3d27a Mon Sep 17 00:00:00 2001
From: Joseph Ditton <jditton.atomic@gmail.com>
Date: Sat, 20 Nov 2021 19:34:10 -0700
Subject: working on signup implementation

---
 client/app.jsx                         | 23 +++++++--
 client/components/router.jsx           | 15 +++++-
 client/components/sign_in/_sign_in.jsx | 36 +++++++++++++-
 client/components/sign_up/_sign_up.jsx | 86 ++++++++++++++++++++++++++++++++++
 client/utils/settings_context.js       |  3 ++
 5 files changed, 156 insertions(+), 7 deletions(-)
 create mode 100644 client/components/sign_up/_sign_up.jsx
 create mode 100644 client/utils/settings_context.js

(limited to 'client')

diff --git a/client/app.jsx b/client/app.jsx
index 5ae62df..6414fad 100644
--- a/client/app.jsx
+++ b/client/app.jsx
@@ -1,10 +1,25 @@
-import { BrowserRouter } from 'react-router-dom';
+import { useReducer } from 'react';
+import { HashRouter } from 'react-router-dom';
 import { Router } from './components/router';
+import { SettingsContext } from './utils/settings_context';
+
+const settingsReducer = (state, action) => {
+  switch (action.type) {
+    case 'update': {
+      return { ...state, ...action.payload };
+    }
+  }
+  return state;
+};
 
 export const App = () => {
+  const [settings, dispatch] = useReducer(settingsReducer, window.SETTINGS);
+
   return (
-    <BrowserRouter>
-      <Router />
-    </BrowserRouter>
+    <SettingsContext.Provider value={[settings, dispatch]}>
+      <HashRouter>
+        <Router />
+      </HashRouter>
+    </SettingsContext.Provider>
   );
 };
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>
+  );
+};
diff --git a/client/utils/settings_context.js b/client/utils/settings_context.js
new file mode 100644
index 0000000..6c088b2
--- /dev/null
+++ b/client/utils/settings_context.js
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const SettingsContext = createContext({});
-- 
cgit v1.2.3-70-g09d2