From 1f5222c069d17170fd0c5893a2e606b58de76fd3 Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Fri, 24 Sep 2021 23:54:40 -0300
Subject: [PATCH] Added routing and structure to the login and register

---
 public/css_styles/styles.css                  |  4 +++
 public/css_styles/styles.css.map              |  2 +-
 public/sass_styles/_banner-login.scss         |  2 +-
 public/sass_styles/_header.scss               |  4 +++
 src/App.js                                    | 32 ++++++++++++++----
 src/components/BannerLogin.jsx                |  4 +--
 src/components/Header.jsx                     |  2 +-
 .../Identify Childrens/LoginForm.jsx          | 13 ++++++++
 .../Identify Childrens/RegisterForm.jsx       | 14 ++++++++
 src/components/Identify.jsx                   | 33 +++++++++++++++++++
 10 files changed, 98 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Identify Childrens/LoginForm.jsx
 create mode 100644 src/components/Identify Childrens/RegisterForm.jsx
 create mode 100644 src/components/Identify.jsx

diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css
index 09f78e4..1218ac7 100644
--- a/public/css_styles/styles.css
+++ b/public/css_styles/styles.css
@@ -6,6 +6,9 @@
   justify-content: center;
   height: 17vh;
 }
+.header-main-page a {
+  text-decoration: none;
+}
 .header-main-page h1 {
   color: #ffffff;
   font-size: 7vh;
@@ -68,6 +71,7 @@
   font-weight: bold;
   color: #ffffff;
   height: 6vh;
+  cursor: pointer;
 }
 .banner-login .button-container .register {
   border: solid 1px #ffffff;
diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map
index 6d49a41..bfe202f 100644
--- a/public/css_styles/styles.css.map
+++ b/public/css_styles/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss"],"names":[],"mappings":"AACA;EACI,kBCqCS;EDnCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;EAEA;ECXJ;EACA;EAQA;EACA;EACA;;ADKA;EACI;EAEA;ECnBJ;EACA;EAQA;EACA;EACA;;ADYI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AE5CpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFsBO;;AEnBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFMG;EELH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFJG;EEMH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFnBO;EEoBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHsBO;EGrBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHXL;EGYK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH/CE;;;AGwDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBNwBU;;AMtBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPCD;EOAC,kBPCF;;;AAYd;EACI;EACA;;;AAGJ;EACI;EACA,kBAvBe","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss"],"names":[],"mappings":"AACA;EACI,kBCqCS;EDnCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EAEA;ECfJ;EACA;EAQA;EACA;EACA;;ADSA;EACI;EAEA;ECvBJ;EACA;EAQA;EACA;EACA;;ADgBI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AEhDpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFsBO;;AEnBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFMG;EELH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFJG;EEMH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFnBO;EEoBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHsBO;EGrBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHXL;EGYK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH/CE;;;AGwDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBNwBU;;AMtBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPCD;EOAC,kBPCF;;;AAYd;EACI;EACA;;;AAGJ;EACI;EACA,kBAvBe","file":"styles.css"}
\ No newline at end of file
diff --git a/public/sass_styles/_banner-login.scss b/public/sass_styles/_banner-login.scss
index 3158332..e37f7f9 100644
--- a/public/sass_styles/_banner-login.scss
+++ b/public/sass_styles/_banner-login.scss
@@ -32,7 +32,7 @@
             color: #ffffff;
 
             height: 6vh;
-
+            cursor: pointer;
         }
 
         .register {
diff --git a/public/sass_styles/_header.scss b/public/sass_styles/_header.scss
index a947973..a951f74 100644
--- a/public/sass_styles/_header.scss
+++ b/public/sass_styles/_header.scss
@@ -9,6 +9,10 @@
 
     height: 17vh;
 
+    a {
+        text-decoration: none;
+    }
+
     h1 {
         color: #ffffff;
 
diff --git a/src/App.js b/src/App.js
index 83cddd9..1ec7feb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,15 +4,33 @@ import GoDownArrow from "./components/GoDownArrow";
 import Header from "./components/Header";
 import MainPomodoro from "./components/MainPomodoro";
 
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
+
+import Identify from "./components/Identify";
+
 function App() {
   return (
-    <>
-      <Header />
-      <BannerLogin />
-      <MainPomodoro />
-      <GoDownArrow />
-      <AboutThis />
-    </>
+    <Router>
+      <>
+        <Header />
+        <Switch>
+          <Route path="/identify">
+            <Identify />
+          </Route>
+          <Route path="/">
+            <BannerLogin />
+            <MainPomodoro />
+            <GoDownArrow />
+            <AboutThis />
+          </Route>
+        </Switch>
+      </>
+    </Router>
   );
 }
 
diff --git a/src/components/BannerLogin.jsx b/src/components/BannerLogin.jsx
index 472f2cd..e955025 100644
--- a/src/components/BannerLogin.jsx
+++ b/src/components/BannerLogin.jsx
@@ -8,8 +8,8 @@ const BannerLogin = () => {
         <div className="banner-login">
             <p>Access to integrate and save your progress with Clockify!</p>
             <div className="button-container">
-                <button className="register">Register</button>
-                <button className="login">Login</button>
+                <button className="register" onClick={() => {window.location = '/identify?act=r'}}>Register</button>
+                <button className="login" onClick={() => {window.location = '/identify?act=l'}}>Login</button>
             </div>
         </div>
     )
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 4f6ba83..fcc8824 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -8,7 +8,7 @@ const Header = () => {
     
     return (
         <header className="header-main-page">
-            <h1>Pomodoro Timer</h1>
+            <a href="/"><h1>Pomodoro Timer</h1></a>
             <h3>Made By <span className="selectable"><a target="_blank" href="https://www.behance.net/franpessano" rel="noreferrer">Francisco Pessano</a></span></h3>
         </header>
     )
diff --git a/src/components/Identify Childrens/LoginForm.jsx b/src/components/Identify Childrens/LoginForm.jsx
new file mode 100644
index 0000000..41e53db
--- /dev/null
+++ b/src/components/Identify Childrens/LoginForm.jsx	
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const LoginForm = () => {
+    return (
+        <form>
+            <input type="email" placeholder="email"></input>
+            <input type="password" placeholder="password"></input>
+            <input type="submit"></input>
+        </form>
+    )
+}
+
+export default LoginForm
diff --git a/src/components/Identify Childrens/RegisterForm.jsx b/src/components/Identify Childrens/RegisterForm.jsx
new file mode 100644
index 0000000..226c69a
--- /dev/null
+++ b/src/components/Identify Childrens/RegisterForm.jsx	
@@ -0,0 +1,14 @@
+import React from 'react'
+
+const RegisterForm = () => {
+    return (
+        <form>
+            <input type="email" placeholder="email"></input>
+            <input type="password" placeholder="password"></input>
+            <input type="password" placeholder="confirm password"></input>
+            <input type="submit"></input>
+        </form>
+    )
+}
+
+export default RegisterForm
diff --git a/src/components/Identify.jsx b/src/components/Identify.jsx
new file mode 100644
index 0000000..0e882e1
--- /dev/null
+++ b/src/components/Identify.jsx
@@ -0,0 +1,33 @@
+import React, {useState} from 'react'
+import LoginForm from './Identify Childrens/LoginForm'
+import RegisterForm from './Identify Childrens/RegisterForm'
+
+
+const Identify = () => {
+    const [act, setAct] = useState('register')
+
+    
+
+    return (
+        <div>
+            <nav>
+                <div>
+                    <h2>LOGIN</h2>
+                </div>
+                <div>
+                    <h2>REGISTER</h2>
+                </div>
+            </nav>
+            <div>
+            {
+                act === 'login' ? <LoginForm /> : null    
+            }
+            {
+                act === 'register' ? <RegisterForm /> : null
+            }
+            </div>
+        </div>
+    )
+}
+
+export default Identify