[PLT-26] User Authorization Login/Signup Page

frontend/src/App.jsx

@@ -1,10 +1,17 @@
+import { Route, Routes } from "react-router-dom";
 import Navbar from "./components/Navbar";
+import UserAuthForm from "./pages/UserAuthForm";
 
 function App() {
 
   return (
     <>
-      <Navbar />
+      <Routes>
+        <Route path="/" element={<Navbar />}>
+          <Route path="login" element={<UserAuthForm type="login" />} />
+          <Route path="signup" element={<UserAuthForm type="signup" />} />
+        </Route>
+      </Routes>
     </>
   )
 }

frontend/src/components/InputBox.jsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+
+const InputBox = ({ name, type, id, value, placeholder, icon }) => {
+
+    const [passwordVisible, setPasswordVisible] = useState(false);
+
+    return (
+        <div className="relative w-[100%] mb-4">
+            <input
+                name={name}
+                type={type == "password" ? passwordVisible ? "text" : "password" : type}
+                placeholder={placeholder}
+                defaultValue={value}
+                id={id}
+                className="input-box"
+            />
+
+            <i className={"fi " + icon + " input-icon"}></i>
+
+            {
+                type == "password" ?
+                    <i className={"fi fi-rr-eye" + (!passwordVisible ? "-crossed" : "") + " input-icon left-[auto] right-4 cursor-pointer"}
+                        onClick={() => setPasswordVisible(!passwordVisible)}
+                    ></i>
+                    : ""
+            }
+        </div>
+    )
+}
+
+export default InputBox;

frontend/src/components/Navbar.jsx

@@ -1,41 +1,46 @@
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, Outlet } from "react-router-dom";
 
 const Navbar = () => {
 
     const [searchBoxVisibility, setSearchBoxVisibility] = useState(false);
     return (
-        <nav className="z-10 sticky top-0 flex items-center gap-12 w-full px-[5vw] py-5 h-[80px] border-b border-grey bg-white">
-            <Link to="/" className="flex-none w-10">
-                <img src="logo.png" alt="" className="w-full" />
-            </Link>
-            <div className={"absolute bg-white w-full left-0 top-full mt-0.5 border-b border-grey py-4 px-[5vw] md:border-0 md:block md:relative md:inset-0 md:p-0 md:w-auto md:opacity-100 md:pointer-events-auto " + (searchBoxVisibility ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none duration-100")}>
-                <input
-                    type="text"
-                    placeholder="Search"
-                    className="w-full md:w-auto bg-gray-100 p-4 pl-6 pr-[12%] md:pr-6 rounded-full placeholder:text-dark-grey md:pl-12 outline-none"
-                />
-                <i className="fi fi-rr-search absolute right-[10%] md:pointer-events-none md:left-5 top-1/2 -translate-y-1/2 text-xl text-dark-grey"></i>
-            </div>
+        <>
+            <nav className="navbar">
+                <Link to="/" className="flex-none w-10">
+                    <img src="logo.png" alt="" className="w-full" />
+                </Link>
+                <div className={"absolute bg-white w-full left-0 top-full mt-0.5 border-b border-gray-200 py-4 px-[5vw] md:border-0 md:relative md:inset-0 md:p-0 md:w-auto " + (searchBoxVisibility ? "show" : "hidden md:block")}
+                >
+                    <input
+                        type="text"
+                        placeholder="Search"
+                        className="w-full md:w-auto bg-gray-100 p-4 pl-6 pr-[12%] md:pr-6 rounded-full placeholder:text-dark-grey md:pl-12"
+                    />
+                    <i className="fi fi-rr-search absolute right-[10%] md:pointer-events-none md:left-5 top-1/2 -translate-y-1/2 text-xl text-dark-grey"></i>
+                </div>
 
-            <div className="flex items-center gap-3 md:gap-6 ml-auto">
-                <button className="md:hidden bg-gray-100 w-12 h-12 rounded-full flex items-center justify-center" onClick={() => setSearchBoxVisibility(!searchBoxVisibility)}>
-                    <i className="fi fi-rr-search text-xl"></i>
-                </button>
+                <div className="flex items-center gap-3 md:gap-6 ml-auto">
+                    <button className="md:hidden bg-gray-100 w-12 h-12 rounded-full flex items-center justify-center" onClick={() => setSearchBoxVisibility(!searchBoxVisibility)}>
+                        <i className="fi fi-rr-search text-xl"></i>
+                    </button>
 
-                <Link to="/editor" className="hidden md:flex items-center gap-2 text-gray-700 hover:text-black hover:bg-gray-200 p-3 px-4 rounded-lg transition">
-                    <i className="fi fi-rr-file-edit"></i>
-                    <p>Write</p>
-                </Link>
+                    <Link to="/editor" className="hidden md:flex items-center gap-2 text-gray-700 hover:text-black hover:bg-gray-200 p-3 px-4 rounded-lg transition">
+                        <i className="fi fi-rr-file-edit"></i>
+                        <p>Write</p>
+                    </Link>
 
-                <Link className="bg-black text-white py-2 px-5 rounded-full hover:bg-gray-800 transition" to="/api/signin">
-                    Sign In
-                </Link>
-                <Link className="bg-gray-200 text-gray-800 py-2 px-5 rounded-full hidden md:block hover:bg-gray-300 transition" to="/api/signup">
-                    Sign Up
-                </Link>
-            </div>
-        </nav>
+                    <Link className="bg-black text-white py-2 px-5 rounded-full hover:bg-gray-800 transition" to="/login">
+                        Login
+                    </Link>
+                    <Link className="bg-gray-200 text-gray-800 py-2 px-5 rounded-full hidden md:block hover:bg-gray-300 transition" to="/signup">
+                        Sign Up
+                    </Link>
+                </div>
+            </nav>
+
+            <Outlet />
+        </>
     )
 }
 

frontend/src/index.css

@@ -1,3 +1,125 @@
 @import url('https://fonts.googleapis.com/css2?family=Gelasio&family=Inter:wght@400;500&display=swap');
 @import "@flaticon/flaticon-uicons/css/all/all";
 @import "tailwindcss";
+
+@layer components {
+    * {
+        @apply m-0 p-0 box-border text-base duration-100;
+    }
+
+    html {
+        @apply overflow-x-hidden;
+    }
+
+    body {
+        @apply font-normal text-black;
+    }
+
+    i {
+        @apply mt-0.5;
+    }
+
+    section {
+        @apply py-4 px-[5vw] md:px-[7vw] lg:px-[10vw];
+    }
+
+    img {
+        @apply w-full h-full object-cover;
+    }
+
+    .navbar {
+        @apply z-10 sticky top-0 flex items-center gap-12 w-full px-[5vw] py-5 h-[80px] border-b border-gray-200 bg-white;
+    }
+
+    .h-cover {
+        @apply min-h-[calc(100vh-80px)];
+    }
+
+    .center {
+        @apply block mx-auto;
+    }
+
+    .btn-dark {
+        @apply whitespace-nowrap bg-black text-white rounded-full py-3 px-6 text-xl capitalize hover:opacity-80;
+    }
+
+    .btn-light {
+        @apply whitespace-nowrap rounded-full py-3 px-6 text-xl capitalize hover:opacity-80 bg-gray-200 text-black;
+    }
+
+    .input-box {
+        @apply w-[100%] rounded-md p-4 bg-gray-200 pl-12 border border-gray-200 focus:bg-transparent placeholder:text-black;
+    }
+
+    input:disabled,
+    input:disabled~.input-icon {
+        @apply opacity-50;
+    }
+
+    .input-icon {
+        @apply absolute left-4 top-1/2 -translate-y-1/2;
+    }
+
+    .link {
+        @apply text-gray-600 hover:text-black hover:bg-gray-200 p-3 px-4 block opacity-75;
+    }
+
+    .hide {
+        @apply opacity-0 pointer-events-none duration-100;
+    }
+
+    .show {
+        @apply opacity-100 pointer-events-auto;
+    }
+
+    .sidebar-link {
+        @apply flex gap-4 items-center py-5 text-gray-600 hover:text-black;
+    }
+
+    .sidebar-link.active {
+        @apply text-black border-r-2 border-black pl-6 bg-gray-50 -ml-6 md:rounded-tl-lg md:rounded-bl-lg max-md:border-none;
+    }
+
+    #textEditor h2,
+    h2 {
+        @apply text-4xl leading-normal font-bold max-md:text-3xl max-md:leading-snug;
+    }
+
+    #textEditor h3,
+    h3 {
+        @apply text-3xl leading-loose max-md:text-2xl max-md:leading-normal;
+    }
+
+    #textEditor *,
+    .blog-page-content * {
+        @apply text-xl leading-10 md:text-2xl;
+    }
+
+    #textEditor a,
+    .blog-page-content a {
+        @apply text-purple-600 underline hover:opacity-50;
+    }
+
+    .tag {
+        @apply p-3 bg-gray-200 rounded-full px-6 capitalize;
+    }
+
+    .blog-title {
+        @apply text-2xl font-medium leading-7 line-clamp-3 sm:line-clamp-2;
+    }
+
+    .blog-index {
+        @apply text-4xl sm:text-3xl lg:text-5xl font-bold text-gray-600 leading-none;
+    }
+}
+
+.ce-block__content,
+.ce-toolbar__content {
+    max-width: 900px;
+}
+
+.cdx-settings-button[data-tune='withBorder'],
+.cdx-settings-button[data-tune='withBackground'],
+.cdx-settings-button[data-tune='stretched'] {
+    display: none;
+}

frontend/src/pages/UserAuthForm.jsx

@@ -0,0 +1,76 @@
+import InputBox from "../components/InputBox";
+import { Link } from "react-router-dom";
+
+const UserAuthForm = ({ type }) => {
+    return (
+        <section className="py-4 px-[5vw] md:px-[7vw] lg:px-[10vw] h-cover flex items-center justify-center">
+            <form className="w-[80%] max-w-[400px]">
+                <h1 className="text-4xl font-gelasio capitalize text-center mb-24">
+                    {type == "login"? "Welcome back": "Join us today"}
+                </h1>
+
+                {
+                    type != "login" ?
+                    <InputBox 
+                        name="fullname"
+                        type="text"
+                        placeholder="Full Name"
+                        icon="fi-rr-user"
+                    />
+                    : ""
+                }
+
+                <InputBox 
+                    name="email"
+                    type="email"
+                    placeholder="Email"
+                    icon="fi-rr-envelope"
+                />
+
+                <InputBox
+                    name="password"
+                    type="password"
+                    placeholder="Password"
+                    icon="fi-rr-key"
+                />
+
+                <button
+                    className="btn-dark center mt-14"
+                    type="submit"
+                >
+                    {type == "login"? "Login": "Sign Up"}
+                </button>
+
+                <div className="relative w-full flex items-center gap-2 my-10 opacity-10 uppercase text-black font-bold">
+                    <hr className="w-1/2 border-black" />
+                    <p>or</p>
+                    <hr className="w-1/2 border-black" />
+                </div>
+
+                <button className="btn-dark flex items-center justify-center gap-4 w-[90%] center">
+                    <img src="google.png" alt="" className="w-5" />
+                    continue with google
+                </button>
+
+                {
+                    type == "login" ?
+                    <p className="mt-6 text-gray-700 text-xl text-center">
+                        Don't have an account ? 
+                        <Link to="/signup" className="text-black text-xl ml-1 underline">
+                        Join us today
+                        </Link>
+                    </p>
+                    :
+                    <p className="mt-6 text-gray-700 text-xl text-center">
+                        Already a member ? 
+                        <Link to="/login" className="text-black text-xl ml-1 underline">
+                        Sign in here
+                        </Link>
+                    </p>
+                }
+            </form>
+        </section>
+    )
+}
+
+export default UserAuthForm;