Design: Authentication Pages

app/(root)/about/data.js

@@ -25,6 +25,6 @@ export const statsData = [
  {
  icon: FcSalesPerformance,
  stat: "33K",
- desc: "Monthly Sales On Our Site",
+ desc: "Large Sales",
  },
 ];

app/(root)/about/page.jsx

@@ -24,6 +24,7 @@ const About = () => {
  width={700}
  src={"/images/about-1.jpg"}
  alt="Image-1"
+ priority
  />
  </div>
  </div>

app/admin/layout.js

@@ -1,4 +1,4 @@
-import AdminSidebar from "@/components/adminComponents/AdminSidebar";
+import AdminSidebar from "./_components/AdminSidebar";
 import "../globals.css";
 
 export const metadata = {

app/admin/products/page.jsx

@@ -1,4 +1,4 @@
-import Product from "@/components/adminComponents/Product";
+import Product from "../_components/Product";
 import React from "react";
 
 const AllProductsPage = () => {

app/auth/_components/LoginForm.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import OAuthProviders from "./OAuthProviders";
+import Link from "next/link";
+
+const LoginForm = () => {
+ return (
+ <div className="w-[25rem] overflow-hidden p-4 h-full flex justify-center flex-col">
+ <h1 className="text-3xl font-semibold text-left w-full mb-6">
+ Log Into Your Account
+ </h1>
+ <form action="" className="flex flex-col gap-y-6 p-3">
+ <input
+ type="text"
+ name="useremail"
+ id="useremail"
+ placeholder="Enter Your Email"
+ className="border-b-2 border-gray-400 focus:border-red-500 outline-none p-2 transition"
+ />
+ <input
+ type="text"
+ name="password"
+ id="password"
+ placeholder="Enter Your Password"
+ className="border-b-2 border-gray-400 focus:border-red-500 outline-none p-2 transition"
+ />
+ <button
+ type="submit"
+ className="bg-red-500 w-full p-2 text-white rounded-md hover:bg-red-400 transition"
+ >
+ Create Account
+ </button>
+ </form>
+ <div className="w-full text-center">or</div>
+
+ <div className="w-full p-3">
+ <OAuthProviders />
+ </div>
+ <div className="more flex items-center justify-between w-full p-3">
+ <p>Already have an Account?</p>
+ <Link
+ href={"/auth/sign-up"}
+ className="text-green-700 underline font-semibold font-sans"
+ >
+ SignUp
+ </Link>
+ </div>
+ </div>
+ );
+};
+
+export default LoginForm;

app/auth/_components/OAuthButton.jsx

@@ -0,0 +1,19 @@
+"use client";
+// import { signIn } from "next-auth/react";
+// import { redirect } from "next/dist/server/api-utils";
+import {FcGoogle, FcReddit} from 'react-icons/fc'
+
+export default function OAuthButton({ auth, type }) {
+ return (
+ <button
+ type="button"
+ className="flex items-center justify-center gap-x-2 w-full rounded-md p-4 text-sm font-semibold focus-visible:outline focus-visible:outline-2 bg-gray-200 hover:bg-gray-300"
+ // onClick={() => {
+ // signIn(auth?.id || "");
+ // }}
+ >
+ {auth.type === "github" ? <FcReddit size={20} /> : <FcGoogle size={20} />}
+ {auth ? auth.name : "Loading"}
+ </button>
+ );
+}

app/auth/_components/OAuthProviders.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import OAuthButton from "./OAuthButton";
+
+const OAuthProviders = () => {
+ const Providers = [
+ { name: "Continue With Google", type: "google" },
+ { name: "Continue With GitHub", type: "github" },
+ ];
+ return (
+ <div className="w-full flex flex-col items-center justify-center gap-3">
+ {Providers.map((provider) => {
+ return (
+ <OAuthButton
+ auth={provider}
+
+ key={provider.name}
+ />
+ );
+ })}
+ </div>
+ );
+};
+
+export default OAuthProviders;

app/auth/_components/SignUpForm.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import OAuthProviders from "./OAuthProviders";
+import Link from "next/link";
+
+const SignUpForm = () => {
+ return (
+ <div className="w-[25rem] overflow-hidden p-4 h-full flex justify-center flex-col">
+ <h1 className="text-3xl font-semibold text-left w-full mb-6">
+ Create An Account
+ </h1>
+ <form action="" className="flex flex-col gap-y-4 p-2">
+ <input
+ type="text"
+ name="useremail"
+ id="useremail"
+ placeholder="Enter Your Email"
+ className="border-b-2 border-gray-400 focus:border-red-500 outline-none p-2 transition autofill:bg-none"
+ />
+ <input
+ type="text"
+ name="phonenumber"
+ id="phonenumber"
+ placeholder="Enter Your Phone Number"
+ className="border-b-2 border-gray-400 focus:border-red-500 outline-none p-2 transition"
+ />
+ <input
+ type="password"
+ name="password"
+ id="password"
+ placeholder="Enter Your Password"
+ className="border-b-2 border-gray-400 focus:border-red-500 outline-none p-2 transition"
+ />
+ <button
+ type="submit"
+ className="bg-red-500 w-full p-2 text-white rounded-md hover:bg-red-400 transition"
+ >
+ Create Account
+ </button>
+ </form>
+ <div className="w-full text-center">or</div>
+ <div className="w-full p-3">
+ <OAuthProviders />
+ </div>
+ <div className="more flex items-center justify-between w-full p-3">
+ <p>Already have an Account?</p>
+ <Link
+ href={"/auth/sign-in"}
+ className="text-green-700 underline font-semibold font-sans"
+ >
+ SignIn
+ </Link>
+ </div>
+ </div>
+ );
+};
+
+export default SignUpForm;

app/auth/sign-in/page.jsx

@@ -0,0 +1,24 @@
+import Image from "next/image";
+import React from "react";
+import LoginForm from "../_components/LoginForm";
+import Link from "next/link";
+
+const SignIn = () => {
+ return (
+ <div className="w-full h-screen flex items-center flex-row">
+ <div className="w-full h-full hidden md:flex items-center justify-center">
+ <Image
+ height={700}
+ width={700}
+ src={"/images/image.png"}
+ alt="Image-1"
+ />
+ </div>
+ <div className="h-full w-full flex items-center justify-center py-11">
+ <LoginForm />
+ </div>
+ </div>
+ );
+};
+
+export default SignIn;

app/auth/sign-up/page.jsx

@@ -0,0 +1,24 @@
+import Image from "next/image";
+import React from "react";
+import SignUpForm from "../_components/SignUpForm";
+
+const SignUp = () => {
+ return (
+ <div className="w-full h-screen flex items-center flex-row">
+ <div className="w-full h-full hidden md:flex items-center justify-center">
+ <Image
+ height={700}
+ width={700}
+ src={"/images/image.png"}
+ alt="Image-1"
+ />
+ </div>
+ <div className="h-full w-full flex items-center justify-center flex-col py-11">
+ <SignUpForm />
+
+ </div>
+ </div>
+ );
+};
+
+export default SignUp;

components/reuseable/SignInButton.jsx

@@ -0,0 +1,11 @@
+import Link from "next/link";
+
+const SignInButton = ({ className, href, children }) => {
+ return (
+ <Link href={href} className={"p-1 " + className}>
+ {children}
+ </Link>
+ );
+};
+
+export default SignInButton;

components/shared/Header/SaleHeader.jsx

@@ -4,7 +4,7 @@ import React from "react";
 const SaleHeader = () => {
  return (
  <div className="flex items-center justify-center bg-black text-white md:text-md text-sm px-1 md:gap-x-6 ">
- <ShopNow link={"/shop"}>
+ <ShopNow link={"/productdetails/11"}>
  <p className="w-full text-ellipsis line-clamp-2 text-center text-md">
  Summer Sale for all suits with free delievery - OF 50% !{" "}
  <span className="underline font-semibold">Shop Now</span>

components/shared/Header/UserControls.jsx

@@ -1,6 +1,8 @@
 "use client";
 import { PiShoppingCartThin } from "react-icons/pi";
 import { CiHeart } from "react-icons/ci";
+import Link from "next/link";
+import SignInButton from "@/components/reuseable/SignInButton";
 
 const UserControls = () => {
  const session = false;
@@ -17,7 +19,10 @@ const UserControls = () => {
  <div>User</div>
  </>
  ) : (
- <div>Sign in</div>
+ <div className="flex items-center justify-end gap-2">
+ <SignInButton href={'/auth/sign-in'} className={'shadow p-2 px-3 rounded border hover:bg-gray-100 transition '}>Sign In</SignInButton>
+ <SignInButton href={'/auth/sign-up'} className={'bg-black text-white hover:bg-gray-800 transition p-2 px-3 rounded-md font-sans'}>Sign Up</SignInButton>
+ </div>
  )}
  </>
  );

components/shared/Header/index.jsx

@@ -11,7 +11,7 @@ const Header = ({ children }) => {
  <header className="w-full ">
  <SaleHeader />
 
- <div className="w-full h-14 border-b border-black flex items-center justify-between px-3 md:px-2 lg:px-11 p-2">
+ <div className="w-full h-14 border-b border-black flex items-center justify-between px-3 md:px-2 lg:px-11 p-2 ">
  <div className="mobile-nav md:hidden">
  <MobileNavbar />
  </div>
@@ -22,7 +22,7 @@ const Header = ({ children }) => {
  <Navbar />
  </div>
 
- <div className="search flex items-center justify-center gap-x-3">
+ <div className="search flex items-center justify-between gap-3">
  <div className="hidden md:block">
  <Suspense fallback={<div>Loading</div>}>