Merge pull request #38 from kirontoo/feature/issue-29/client-side-sig…

…nup-login

add signup page (#29)

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" />

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;
+}
+
+.signup-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;
+}

src/components/Signup/Signup.tsx

@@ -0,0 +1,51 @@
+import React, { 
+  ChangeEvent, 
+  FormEvent, 
+  useState 
+} from "react";
+
+import "./Signup.css";
+
+const Signup = () => {
+  const formState = {
+    email: '',
+    password: ''
+  };
+
+  const [form, setForm] = useState(formState);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    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 (
+    <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 };

src/components/Signup/index.tsx

@@ -0,0 +1 @@
+export { Signup as default } from "./Signup";