From ad2123389a302cefcac1a773cda601611dccdb8f Mon Sep 17 00:00:00 2001
From: Amy Dang <kirontoo@gmail.com>
Date: Sun, 13 Jun 2021 18:57:57 -0700
Subject: [PATCH 1/4] add signup page (team-hack#29)

---
 src/App.tsx                      |  6 +++-
 src/components/Signup/Signup.css | 51 ++++++++++++++++++++++++++++++++
 src/components/Signup/Signup.tsx | 46 ++++++++++++++++++++++++++++
 src/components/Signup/index.tsx  |  1 +
 4 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Signup/Signup.css
 create mode 100644 src/components/Signup/Signup.tsx
 create mode 100644 src/components/Signup/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 4bb5132..4be9be9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,10 @@ import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import { Page } from "./components/Page";
 // Navbar
 import { Header } from "./components/Header";
+
+// Signup
+import Signup from "./components/Signup";
+
 // Login
 import { Login } from "./components/Login"
 const App = (): JSX.Element => {
@@ -21,7 +25,7 @@ const App = (): JSX.Element => {
                 <Login />
               </Route>
               <Route exact path="/signup">
-                <Page title="Signup" content="This is the signup page" />
+                <Signup />
               </Route>
               <Route path="/">
                 <Page title={"Home Page"} content="This is the home page" />
diff --git a/src/components/Signup/Signup.css b/src/components/Signup/Signup.css
new file mode 100644
index 0000000..feaeec5
--- /dev/null
+++ b/src/components/Signup/Signup.css
@@ -0,0 +1,51 @@
+.signup-page {
+  display: flex;
+  flex-direction: row;
+  height: calc( 100vh - 70px );
+  width: 100%;
+  background: white;
+}
+
+.side-image {
+  width: 50%;
+  height: 100%;
+  background: #c4c4c4;
+}
+
+.signup {
+  margin: 0;
+  height: 100%;
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1em;
+}
+
+.signup-form-button {
+  width: 10em;
+  border: none;
+  background: #c4c4c4;
+  padding: 0.5em 0.5em;
+  cursor: pointer;
+}
+
+.signup-form-button:hover {
+  background: #444444;
+  color: white;
+  font-weight: bold;
+}
+
+.signup-form-input {
+  border-radius: 0;
+  border: 1px solid black;
+  padding: 0.5em;
+}
diff --git a/src/components/Signup/Signup.tsx b/src/components/Signup/Signup.tsx
new file mode 100644
index 0000000..b9f99df
--- /dev/null
+++ b/src/components/Signup/Signup.tsx
@@ -0,0 +1,46 @@
+import React, { 
+  ChangeEvent, 
+  FormEvent, 
+  useState 
+} from "react";
+
+import "./Signup.css";
+
+const Signup = (): JSX.Element => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if( event.target.name == "email") {
+      setEmail( event.target.value );
+    } else {
+      setPassword( event.target.value );
+    }
+  };
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    // prevent page reload
+    event.preventDefault()
+    // request to server create a new user here
+  }
+
+  return (
+    <main className="signup-page">
+      <aside className="side-image">some content goes here</aside>
+      <section className="signup">
+        <h1>Signup</h1>
+        <div className="signup-container">
+          <form className="signup-form" onSubmit={handleSubmit}>
+            <label htmlFor="email">Email</label> 
+            <input className="signup-form-input" id="email" type="email" name="email" onChange={handleChange}/>
+            <label htmlFor="password">Password</label>
+            <input className="signup-form-input" id="password" name="password" type="password" onChange={handleChange}/>
+            <button className="signup-form-button" type="submit">Signup</button>
+          </form>
+        </div>
+      </section>
+    </main>
+  )
+};
+
+export { Signup };
diff --git a/src/components/Signup/index.tsx b/src/components/Signup/index.tsx
new file mode 100644
index 0000000..32de90b
--- /dev/null
+++ b/src/components/Signup/index.tsx
@@ -0,0 +1 @@
+export { Signup as default } from "./Signup";

From d299602127b1ec7d6167d55de8fe9a0522eee9ff Mon Sep 17 00:00:00 2001
From: Amy Dang <kirontoo@gmail.com>
Date: Mon, 14 Jun 2021 20:15:22 -0700
Subject: [PATCH 2/4] use class name instead of form

---
 src/components/Signup/Signup.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Signup/Signup.css b/src/components/Signup/Signup.css
index feaeec5..3ba8381 100644
--- a/src/components/Signup/Signup.css
+++ b/src/components/Signup/Signup.css
@@ -22,7 +22,7 @@
   align-items: center;
 }
 
-form {
+.signup-form {
   width: 100%;
   display: flex;
   flex-direction: column;

From ff0df3da08ebf97c326e063c4e91c1161bbd69b6 Mon Sep 17 00:00:00 2001
From: Amy Dang <kirontoo@gmail.com>
Date: Mon, 14 Jun 2021 20:29:28 -0700
Subject: [PATCH 3/4] made changes to how the state is handled

---
 src/components/Signup/Signup.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/Signup/Signup.tsx b/src/components/Signup/Signup.tsx
index b9f99df..b62af4a 100644
--- a/src/components/Signup/Signup.tsx
+++ b/src/components/Signup/Signup.tsx
@@ -6,15 +6,24 @@ import React, {
 
 import "./Signup.css";
 
-const Signup = (): JSX.Element => {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+const Signup = () => {
+  const formState = {
+    email: '',
+    password: ''
+  };
+
+  const [form, setForm] = useState(formState);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if( event.target.name == "email") {
-      setEmail( event.target.value );
+    const { name, value } = event.target;
+    if (name == "email") {
+      setForm( current => {
+        return { ...current, email: value };
+      });
     } else {
-      setPassword( event.target.value );
+      setForm( current => {
+        return { ...current, password: value };
+      });
     }
   };
 

From 9b472d86ee90f1d7768fd1d0eff35b6084ba195d Mon Sep 17 00:00:00 2001
From: Amy Dang <kirontoo@gmail.com>
Date: Wed, 16 Jun 2021 17:20:51 -0700
Subject: [PATCH 4/4] removed conditional checks

---
 src/components/Signup/Signup.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/Signup/Signup.tsx b/src/components/Signup/Signup.tsx
index b62af4a..ac7c5cd 100644
--- a/src/components/Signup/Signup.tsx
+++ b/src/components/Signup/Signup.tsx
@@ -16,21 +16,17 @@ const Signup = () => {
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
-    if (name == "email") {
-      setForm( current => {
-        return { ...current, email: value };
-      });
-    } else {
-      setForm( current => {
-        return { ...current, password: value };
-      });
-    }
+    setForm( prevState => ({
+      ...prevState,
+      [name]: value
+    }));
   };
 
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     // prevent page reload
     event.preventDefault()
     // request to server create a new user here
+    console.log(form);
   }
 
   return (