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