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))",