From ad3e673e54653cb21641492d5b96d0fb28b905a8 Mon Sep 17 00:00:00 2001
From: christodharma <13521009@std.stei.itb.ac.id>
Date: Thu, 16 Nov 2023 08:00:00 +0700
Subject: [PATCH] feat: Authentication Pages TODO: Login handling TODO: Input
 validations style: button feat: Popup (this is unused atm but may be useful
 later)

---
 src/App.tsx                                |  3 +
 src/assets/styles/Button/Button.css        |  2 +-
 src/components/NavigationBar/index.tsx     | 91 ++++++++++++----------
 src/components/Popup/index.tsx             | 31 ++++++++
 src/pages/AboutPage/view/index.tsx         |  2 +-
 src/pages/AuthPage/index.tsx               | 29 +++++++
 src/pages/AuthPage/view/Login/index.tsx    | 45 +++++++++++
 src/pages/AuthPage/view/Register/index.tsx | 59 ++++++++++++++
 8 files changed, 221 insertions(+), 41 deletions(-)
 create mode 100644 src/components/Popup/index.tsx
 create mode 100644 src/pages/AuthPage/index.tsx
 create mode 100644 src/pages/AuthPage/view/Login/index.tsx
 create mode 100644 src/pages/AuthPage/view/Register/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index d4c8e13..480fbe2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import './App.css';
 import Layout from './components/Layout'
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import AboutPage from './pages/AboutPage';
+import AuthPage from './pages/AuthPage';
 
 function App() {
   return (
@@ -27,6 +28,8 @@ function App() {
       <Routes>
         <Route path="/" element={<Layout />}>
           <Route index element={<AboutPage />} />
+          <Route path="login" element={<AuthPage />} />
+          <Route path="register" element={<AuthPage/>}/>
           {/* <Route path="myprofile" element={<MyProfile />} />
           <Route path="product" element={<Product />} /> */}
           {/* TODO: Make a not found page (like below) */}
diff --git a/src/assets/styles/Button/Button.css b/src/assets/styles/Button/Button.css
index c503a1b..cdd0002 100644
--- a/src/assets/styles/Button/Button.css
+++ b/src/assets/styles/Button/Button.css
@@ -4,6 +4,6 @@
 
 @layer components {
   .btn-primary {
-    @apply hover:bg-black/[0.1] transition ease-in-out duration-150 p-1
+    @apply hover:backdrop-brightness-[70%] transition duration-150 p-1 text-center
   }
 }
diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx
index e0a8985..80fdc9b 100644
--- a/src/components/NavigationBar/index.tsx
+++ b/src/components/NavigationBar/index.tsx
@@ -3,50 +3,63 @@ import ReactDOM from 'react-dom/client';
 import { Bars3Icon , ShoppingCartIcon, UserIcon, MagnifyingGlassIcon, BookOpenIcon} from '@heroicons/react/24/solid';
 import logo from '../../assets/images/logo.svg';
 import '../../assets/styles/Button/Button.css'
+import { useLocation } from "react-router-dom";
 
 const NavigationBar = () => {
+    const location = useLocation();
+    const NavbarExcludedPages = ["/login", "/register"]
+    if (NavbarExcludedPages.indexOf(location.pathname) != -1) {
+        return null;
+    }
     return (
-        <div className=
-        "bg-quaternary flex p-3 items-center gap-2 justify-start">
-            <div className="btn-primary flex items-stretch"> 
-                <button >
-                    <Bars3Icon className="h-6 w-6 text-tertiary "/>
-                </button>
-            </div>
-            <div className="ml-0 btn-primary">
-                <a href="/">
-                <img 
-                    src={logo}
-                    className="h-6"
-                    ></img>
-                </a>
-            </div>
-            <div className="sm:grow max-w-sm bg-black/10 rounded-full text-center ml-auto sm:mx-auto btn-primary hover:bg-black/20">
-                <div className="text-white gap-1 flex">
-                    <MagnifyingGlassIcon className="text-inherit inline h-6 w-6"/>
-                    <input className="placeholder:italic bg-transparent placeholder:text-inherit text-inherit inline" placeholder="Search..">
-                    </input>
+        <>
+            <div className=
+            "fixed w-full bg-quaternary flex p-3 items-center gap-2 justify-start">
+                <div className="btn-primary flex items-stretch"> 
+                    <button >
+                        <Bars3Icon className="h-6 w-6 text-tertiary "/>
+                    </button>
+                </div>
+                <div className="ml-0 btn-primary">
+                    <a href="/">
+                    <img 
+                        src={logo}
+                        className="h-6"
+                        ></img>
+                    </a>
+                </div>
+                <div className="sm:grow max-w-sm bg-black/10 rounded-full text-center ml-auto sm:mx-auto btn-primary">
+                    <div className="text-white gap-1 flex">
+                        <MagnifyingGlassIcon className="text-inherit inline h-6 w-6"/>
+                        <input className="placeholder:italic bg-transparent placeholder:text-inherit text-inherit inline grow" placeholder="Search..">
+                        </input>
+                    </div>
+                </div>
+                <div className="sm:ml-auto btn-primary text-tertiary">
+                    <a>
+                        <BookOpenIcon className="h-6 w-6 inline"/>
+                        <p className="text-inherit hidden md:inline">Catalog</p>
+                    </a>
+                </div>
+                <div className="btn-primary text-tertiary">
+                    <a>           
+                        <ShoppingCartIcon className="h-6 w-6 inline"/>
+                        <p className="text-inherit hidden md:inline">Cart</p>    
+                    </a>
+                </div>
+                <div className="btn-primary text-tertiary">
+                    <button>
+                        <UserIcon className="h-6 w-6 inline"/>
+                        <p className="text-inherit hidden md:inline">Account</p>
+                    </button>
+                </div>
+                <div className="bg-secondary btn-primary text-tertiary rounded px-4 hover:bg-quinary">
+                    <a href="/login">
+                        <p className="text-inherit inline">Log In</p>
+                    </a>
                 </div>
             </div>
-            <div className="sm:ml-auto btn-primary text-tertiary">
-                <button>
-                    <BookOpenIcon className="h-6 w-6 inline"/>
-                    <p className="text-inherit hidden sm:inline">Catalog</p>
-                </button>
-            </div>
-            <div className="btn-primary text-tertiary">
-                <button>           
-                    <ShoppingCartIcon className="h-6 w-6 inline"/>
-                    <p className="text-inherit hidden sm:inline">Cart</p>    
-                </button>
-            </div>
-            <div className="btn-primary text-tertiary">
-                <button>
-                    <UserIcon className="h-6 w-6 inline"/>
-                    <p className="text-inherit hidden sm:inline">Account</p>
-                </button>
-            </div>
-        </div>
+        </>
     )
 }
 
diff --git a/src/components/Popup/index.tsx b/src/components/Popup/index.tsx
new file mode 100644
index 0000000..8da0fde
--- /dev/null
+++ b/src/components/Popup/index.tsx
@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+
+const Popup = ({ isOpen, onClose, children } : any) => {
+  useEffect(() => {
+    const handleOutsideClick = (event : any) => {
+      if (isOpen && event.target === event.currentTarget) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('click', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, [isOpen, onClose]);
+
+  return (
+    <>
+      {isOpen && (
+        <div className="fixed w-full h-full bg-[#2E3137]/70 flex justify-center items-center">
+          <div className="rounded ring-4 ring-quaternary bg-white">
+              {children}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Popup;
diff --git a/src/pages/AboutPage/view/index.tsx b/src/pages/AboutPage/view/index.tsx
index 6ce3dd5..8822d8c 100644
--- a/src/pages/AboutPage/view/index.tsx
+++ b/src/pages/AboutPage/view/index.tsx
@@ -6,7 +6,7 @@ import "../../../assets/styles/L2RWipeReveal/L2RWipeReveal.css"
 function AboutPageView() {
     return (
         <div className = 
-        "flex flex-col flex-nowrap justify-center items-center text-tertiary text-center">
+        "flex flex-col flex-nowrap justify-center items-center text-tertiary text-center pt-14">
             <title>
                 About Saranghaengbok
             </title>
diff --git a/src/pages/AuthPage/index.tsx b/src/pages/AuthPage/index.tsx
new file mode 100644
index 0000000..0948b2f
--- /dev/null
+++ b/src/pages/AuthPage/index.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import LoginView from "./view/Login";
+import logo from '../../assets/images/logo.svg'
+import { useLocation } from "react-router-dom";
+import RegisterView from "./view/Register";
+
+const AuthPage = () => {
+    const location = useLocation();
+    var view;
+    if (location.pathname === "/login") {
+        view = (<LoginView/>)
+    } else if (location.pathname === "/register") {
+        view = (<RegisterView />)
+    }
+    return (
+        <div className="flex flex-col items-center gap-12">
+            <a href="/" className="w-[25%] my-12 ">
+                <img src={logo}
+                className="bg-primary rounded"/>
+            </a>
+            <>
+                {view}
+            </>
+        </div>
+    )
+}
+
+export default AuthPage
\ No newline at end of file
diff --git a/src/pages/AuthPage/view/Login/index.tsx b/src/pages/AuthPage/view/Login/index.tsx
new file mode 100644
index 0000000..77d1a43
--- /dev/null
+++ b/src/pages/AuthPage/view/Login/index.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import ReactDOM from "react-dom/client"
+const LoginView = () => {
+    return (
+        <div className="rounded ring-quaternary ring-1 shadow-2xl bg-white w-fit pb-4">
+            <h1
+            className="px-4 py-6 text-3xl font-bold">
+                Login
+            </h1>
+            <form className="text-black flex flex-col px-12 gap-2">
+                <label 
+                htmlFor="username"
+                className="font-bold">
+                    Username
+                </label>
+                <input 
+                type="text" 
+                id="username"
+                className="ring-1 ring-black p-1 rounded"
+                required>
+                </input>
+                <label 
+                htmlFor="password"
+                className="font-bold mt-4">
+                    Password
+                </label>
+                <input 
+                type="password" 
+                id="password"
+                className="ring-1 ring-black p-1 rounded"
+                required>
+                </input>
+                <button
+                type="submit"
+                className="bg-secondary text-white rounded-full min-h-fit h-8 mx-6 my-4">
+                    Log In
+                </button>
+                <p>
+                    Don't have an account? <strong><a href="/register">Register</a></strong></p>
+            </form>
+        </div>
+    )
+}
+
+export default LoginView
\ No newline at end of file
diff --git a/src/pages/AuthPage/view/Register/index.tsx b/src/pages/AuthPage/view/Register/index.tsx
new file mode 100644
index 0000000..9f7aead
--- /dev/null
+++ b/src/pages/AuthPage/view/Register/index.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import ReactDOM from "react-dom"
+
+const RegisterView = () => {
+    return (
+        <div className="rounded ring-quaternary ring-1 shadow-2xl bg-white w-fit pb-4">
+            <h1
+            className="px-4 py-6 text-3xl font-bold">
+                Register
+            </h1>
+            <form className="text-black flex flex-col px-12 gap-4">
+                <label 
+                htmlFor="email"
+                className="font-bold">
+                    Email
+                </label>
+                <input 
+                type="text" 
+                id="email"
+                className="ring-1 ring-black p-1 rounded invalid:ring-red-600 invalid:ring-2"
+                required
+                pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
+                </input>
+                <label 
+                htmlFor="username"
+                className="font-bold">
+                    Username
+                </label>
+                <input 
+                type="text" 
+                id="username"
+                className="ring-1 ring-black p-1 rounded"
+                required>
+                </input>
+                <label 
+                htmlFor="password"
+                className="font-bold">
+                    Password
+                </label>
+                <input 
+                type="password" 
+                id="password"
+                className="ring-1 ring-black p-1 rounded"
+                required>
+                </input>
+                <button
+                type="submit"
+                className="bg-secondary text-white rounded-full min-h-fit h-8 mx-6 my-4">
+                    Register
+                </button>
+                <p>
+                    Already have an account? <strong><a href="/login">Login</a></strong>
+                </p>
+            </form>
+        </div>
+    )
+}
+
+export default RegisterView;
\ No newline at end of file
-- 
GitLab