signup and login page

Resolves sign up and login page

app/auth/layout.jsx

@@ -0,0 +1,18 @@
+import { Inter } from "next/font/google";
+import AuthImage from "../../src/components/auth/AuthImage"
+
+const inter = Inter({ subsets: ["latin"] });
+
+
+export default async function RootLayout({ children }) {
+  return (
+    <section className={inter.className}>
+      <div className="flex">
+        <div className="bg-authBg bg-cover bg-center bg-[#0D35FB] h-screen lg:w-1/2 hidden lg:flex justify-center items-end">
+          <AuthImage />
+        </div>
+        <div className="w-full lg:w-1/2">{children}</div>
+      </div>
+    </section>
+  );
+}

app/login/page.tsx → app/auth/login/page.tsx

@@ -3,6 +3,8 @@ import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { signIn, useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
+import { FaEye } from "react-icons/fa";
+import { FaEyeSlash } from "react-icons/fa";
 
 const Login = () => {
   const router = useRouter();
@@ -63,51 +65,64 @@ const Login = () => {
   return (
     // Render login form if user is not authenticated
     sessionStatus !== "authenticated" && (
-      <div className="flex min-h-screen flex-col items-center justify-between p-24">
-        <div className="p-8 rounded w-[28rem]">
-          <h1 className="text-4xl text-center font-semibold mb-8 text-blue-500">
-            Login
-          </h1>
-          <form onSubmit={handleSubmit}>
+      <div className="flex flex-col justify-start lg:min-h-screen">
+        <div className="flex flex-col justify-stretch gap-[1rem] items-start p-4 sm:px-24">
+          <div className="flex flex-col justify-center items-center mb-4 mx-auto">
+            <h1 className="text-4xl text-center font-bold mb-2 text-[#000000]">
+              Welcome Back!
+            </h1>
+            <p className="text-[1rem] text-center text-[rgb(119,118,128)] font-medium">Kindly enter your login details</p>            
+          </div>
+
+          <form onSubmit={handleSubmit} className="w-full flex flex-col justify-center">
             {/* Email input field */}
-            <input
-              type="text"
-              className="rounded-md appearance-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm mb-4"
-              placeholder="Email"
-              required
-            />
+            <label htmlFor="email" className="text-[#1f1f1f] flex flex-col  sm:text-sm">
+              Email
+              <input
+                type="text"
+                className="rounded-md shadow appearance-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm mb-4"
+                placeholder="Enter Your Email"
+                required
+              />
+            </label>
             {/* Password input field */}
+            <label htmlFor="password" className="text-[#1f1f1f] flex flex-col  sm:text-sm">
+              Password
             <input
               type="password"
-              className="rounded-md appearance-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm mb-4"
-              placeholder="Password"
+              className="rounded-md shadow appearance-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"
+              placeholder="Enter Your Password"
               required
             />
+            </label>
+            <Link href="#" className="flex flex-row justify-end items-center text-[0.75rem] mb-4">
+              <p className="hover:text-blue-500">Forgot password?</p>
+            </Link>
             {/* Submit button */}
             <button
               type="submit"
-              className="w-full bg-blue-500 rounded-lg text-white py-2 hover:bg-blue-600 text-lg"
+              className="w-full bg-[#0D35FB] rounded-lg text-white py-2 hover:bg-blue-600 text-lg"
             >
-              Sign In
+              Log In
             </button>
             {/* Error message */}
             <p className="text-red-600 text-[16px] mb-4">{error && error}</p>
           </form>
+          <div className="w-full flex flex-row justify-center items-center text-gray-500 pb-4">- or -</div>
           {/* Sign in with Google button */}
           <button
-            className="w-full bg-black text-white py-2 rounded hover:bg-gray-800 text-lg"
+            className="w-full bg-white text-[#0B195B] py-2 border-2 rounded-lg border-blue-600 text-lg"
             onClick={() => {
               signIn("google"); // Sign in with Google
             }}
           >
             Sign In with Google
           </button>
           {/* Or register link */}
-          <div className="text-center text-gray-500 mt-4">- OR -</div>
+          {/* <div className="w-full flex flex-row justify-center items-center text-gray-500 mt-4">- OR -</div> */}
           <Link
-            className="block text-center text-blue-500 hover:underline mt-2 text-lg"
-            href="/signup"
-          >
+            className="block text-center mx-auto text-blue-500 hover:underline mt-2 text-lg"
+            href="/auth/signup">
             Register Here
           </Link>
         </div>

app/auth/signup/page.tsx

@@ -0,0 +1,122 @@
+"use client";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { FaEye } from "react-icons/fa";
+import { FaEyeSlash } from "react-icons/fa";
+
+const Signup = () => {
+  const [error, setError] = useState("");
+  const router = useRouter();
+
+  const isValEmail = (email: string) => {
+    const emailRegex =
+      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return emailRegex.test(email);
+  };
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    const email = e.target[0].value;
+    const password = e.target[1].value;
+
+    if (!isValEmail(email)) {
+      setError("This email is invalid");
+      return;
+    }
+
+    if (!password || password.lengh < 8) {
+      setError("This password is invalid");
+      return;
+    }
+
+    try {
+      const res = await fetch("api/register", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email,
+          password,
+        }),
+      });
+
+      if (res.status === 400) {
+        setError("This email is already registered");
+      }
+      if (res.status === 200) {
+        setError("");
+        router.push("/auth/login");
+      }
+    } catch (error) {
+      setError("Error, try again");
+      console.log(error);
+    }
+  };
+
+  return (
+    <div className="flex flex-col justify-start items-center lg:min-h-screen">
+      <div className="flex flex-col justify-stretch items-center p-4 sm:px-24">
+        <div className="flex flex-col mb-8">
+          <h1 className="text-[2.5rem] text-center font-bold mb-4 text-[#000000]">
+            Sign up
+          </h1>
+          <p className="text-[1rem] px-2 text-center text-[rgb(119,118,128)] font-medium">Create a personal account for your event by completing the requirement</p>
+        </div>
+        <form onSubmit={handleSubmit} className="w-full flex flex-col justify-center">
+          <label htmlFor="name" className="text-[#1f1f1f] flex flex-col  sm:text-sm">
+            Name
+            <input
+              className="px-3 py-3 shadow border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md w-full flex appearance-none focus:outline-none focus:shadow-outline focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm mb-4"
+              type="text"
+              id="name"
+              placeholder="Enter Your Name"
+              required
+            />            
+          </label>        
+
+          <label htmlFor="email" className="text-[#1f1f1f] flex flex-col  sm:text-sm">
+            Email
+            <input
+            className="px-3 py-3 shadow border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md w-full flex appearance-none focus:outline-none focus:shadow-outline focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm mb-4"
+            type="text"
+            id="email"
+            placeholder="Enter Your Email"
+            required
+          />            
+          </label>
+          <label htmlFor="password" className="text-[#1f1f1f] flex flex-col  sm:text-sm">
+            Password
+            <input
+            type="password"
+            id="password"
+            placeholder="Enter Your Password"
+            className="px-3 py-3 shadow border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md w-full flex appearance-none focus:outline-none focus:shadow-outline focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm mb-4"
+            required
+          />
+          {/* <button>
+            <FaEye />
+          </button>
+          <button>
+            <FaEyeSlash />
+          </button> */}
+          </label>
+          <button
+            type="submit"
+            className="w-full bg-[#0D35FB] rounded-lg text-white py-2 hover:bg-blue-600 text-lg"
+          >
+            Create Account
+          </button>
+          <p className="text-red-600 text-[16px] mb-4">{error && error}</p>
+        </form>
+        <div className="w-full flex flex-row justify-center items-center text-gray-500 pb-4">- or -</div>
+        <button className="w-full border-2 border-blue-600 py-2 rounded-lg bg-white text-lg text-[#0B195B] hover:border-[#0B195B]">Continue with Google</button>
+        <Link href="/auth/login" className="block text-center text-blue-500 hover:underline mt-2 text-lg">
+          Login with an existing account
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Signup;

app/dashboard/page.tsx

@@ -96,4 +96,4 @@ const NewEvent = () => (
     </div>
 );
 
-export default Dashboard;
+export default Dashboard;

src/components/Navbar.jsx

@@ -48,15 +48,15 @@ const Navbar = () => {
               />
             </svg>
           </Link>
-          <Link href="/login">
+          <Link href="/">
             <span>Overview</span>
           </Link>
-          <Link href="/signup">
+          <Link href="/">
             <span>Pricing</span>
           </Link>
         </li>
         <li className=" hidden md:flex transition-all ">
-          <Link href="/signup">
+          <Link href="/auth/signup">
             <Button text="Sign Up" />
           </Link>
         </li>

src/components/auth/AuthImage.jsx

@@ -0,0 +1,17 @@
+"use client"
+import {usePathname} from "next/navigation"
+import authImg1 from "../../../public/assets/authImg1.png"
+import authImg2 from "../../../public/assets/authImg2.png"
+import React from 'react'
+import Image from "next/image"
+
+const AuthImage = () => {
+    const pathname = usePathname()
+  return (
+    <div>
+        {pathname == "/auth/login" ? <Image placeholder="blur" src={authImg2} width={450} /> : <Image placeholder="blur" src={authImg1} width={450} /> }
+    </div>
+  )
+}
+
+export default AuthImage

tailwind.config.js

@@ -8,7 +8,11 @@ module.exports = {
   ],
   theme: {
     extend: {
+      colors: {
+        primary: "#0D35FB",
+      },
       backgroundImage: {
+        "authBg": "url(../public/assets/authBg.png)",
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",