From 67ce2e737198cd350ff9db36c1a9061a05a0d03c Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Wed, 21 Sep 2022 23:24:58 +0200
Subject: [PATCH] feat: init sign up page

---
 front/components/auth/HeaderProfileBox.tsx | 45 ++++++++++++++++++----
 front/components/ui/elements/menu.tsx      |  6 ++-
 front/pages/index.tsx                      |  2 +-
 front/pages/login.tsx                      |  5 ++-
 front/pages/signup.tsx                     | 43 ++++++++++++++++++---
 5 files changed, 84 insertions(+), 17 deletions(-)

diff --git a/front/components/auth/HeaderProfileBox.tsx b/front/components/auth/HeaderProfileBox.tsx
index acbda9cd..d75bb8db 100644
--- a/front/components/auth/HeaderProfileBox.tsx
+++ b/front/components/auth/HeaderProfileBox.tsx
@@ -7,12 +7,20 @@ export const HeaderProfileBox = () => {
     <ProfileArea>
       {" "}
       <span>HeaderProfileBox</span>{" "}
-      <Link href="/login">
-        <a>Login</a>
-      </Link>{"     "}
-      <Link href="/signup">
-          <a>Sign up</a>
-        </Link>
+      <UnidentifiedArea>
+        <ul>
+          <li>
+            <Link href="/login">
+              <a>Login</a>
+            </Link>
+          </li>
+          <li>
+            <Link href="/signup">
+              <a>Sign up</a>
+            </Link>
+          </li>
+        </ul>
+      </UnidentifiedArea>
     </ProfileArea>
   );
 };
@@ -27,11 +35,32 @@ const ProfileArea = styled.div`
     display: block;
     top: 32px;
     right: -20px;
-    padding-right: 20px;
+    padding: 6px;
     font-size: 12px;
     margin: 3px;
-    background-color: gray;
+    background-color: #19191939;
+    border-radius: 5px;
     color: white;
     width: auto;
   }
 `;
+
+const UnidentifiedArea = styled.div`
+  display: flex;
+  place-items: stretch;
+  flex-grow: 1;
+
+  ul {
+    display: flex;
+    place-items: center;
+    list-style: none;
+    padding-left: 20px;
+
+    li {
+      padding-right: 20px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #171717;
+    }
+  }
+`;
diff --git a/front/components/ui/elements/menu.tsx b/front/components/ui/elements/menu.tsx
index 53332704..1f2e15de 100644
--- a/front/components/ui/elements/menu.tsx
+++ b/front/components/ui/elements/menu.tsx
@@ -8,7 +8,11 @@ export const Menu = () => {
     <GlobalHeader>
       <LogoArea>
         <Logo>
-          <img src="./learnhouse_logo.png" alt="" />
+          <Link href={"/"}>
+            <a>
+              <img src="./learnhouse_logo.png" alt="" />
+            </a>
+          </Link>
         </Logo>
         <div id="accounts"></div>
       </LogoArea>
diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index aa71efb2..4f2c3f8c 100644
--- a/front/pages/index.tsx
+++ b/front/pages/index.tsx
@@ -5,7 +5,7 @@ import Layout from "../components/ui/layout";
 const Home: NextPage = () => {
   return (
     <div>
-      <Layout>
+      <Layout title="Index">
         <Title>Home</Title>
       </Layout>
     </div>
diff --git a/front/pages/login.tsx b/front/pages/login.tsx
index 363facd7..f888e029 100644
--- a/front/pages/login.tsx
+++ b/front/pages/login.tsx
@@ -8,7 +8,8 @@ const Login = () => {
 
   const handleSubmit = (e: any) => {
     e.preventDefault();
-    console.log(email, password);
+    console.log({ email, password });
+    alert(JSON.stringify({ email, password }));
   };
 
   const handleEmailChange = (e: any) => {
@@ -21,7 +22,7 @@ const Login = () => {
 
   return (
     <div>
-      <Layout>
+      <Layout title="Login">
         <Title>Login</Title>
 
         <form>
diff --git a/front/pages/signup.tsx b/front/pages/signup.tsx
index 46204395..41359817 100644
--- a/front/pages/signup.tsx
+++ b/front/pages/signup.tsx
@@ -3,10 +3,43 @@ import Layout from "../components/ui/layout";
 import { Title } from "../components/ui/styles/title";
 
 const SignUp = () => {
-  return <div>
-  <Layout>
-    <Title>Sign up </Title>
-  </Layout>
-</div>;
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [username, setUsername] = React.useState("");
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+    console.log({ email, password, username });
+    alert(JSON.stringify({ email, password, username }));
+  };
+
+  const handleEmailChange = (e: any) => {
+    setEmail(e.target.value);
+  };
+
+  const handlePasswordChange = (e: any) => {
+    setPassword(e.target.value);
+  };
+
+  const handleUsernameChange = (e: any) => {
+    setUsername(e.target.value);
+  };
+
+  return (
+    <div>
+      <Layout title="Sign up">
+        <Title>Sign up </Title>
+
+        <form>
+          <input onChange={handleUsernameChange} type="text" placeholder="username" />
+          <input onChange={handleEmailChange} type="text" placeholder="email" />
+          <input onChange={handlePasswordChange} type="password" placeholder="password" />
+          <button onClick={handleSubmit} type="submit">
+            Sign up
+          </button>
+        </form>
+      </Layout>
+    </div>
+  );
 };
 export default SignUp;