added registration page and login page with some changes in navbar

Frontend/package.json

@@ -10,13 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "firebase": "^10.5.0",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
     "react-router-dom": "^6.16.0",
-    "sort-by": "^1.2.0"
+    "sort-by": "^1.2.0",
+    "sweetalert": "^2.1.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

Frontend/src/Components/Navbar/Navbar.jsx

@@ -1,8 +1,20 @@
-import { useState } from "react";
-import { Link, NavLink } from "react-router-dom";
+import { useContext, useState } from "react";
+import { Link, NavLink, useNavigate } from "react-router-dom";
+import { AuthContext } from "../../Provider/AuthProvider";
 
 const Navbar = () => {
   const [open, setOpen] = useState(true);
+  const { user, userSignOut } = useContext(AuthContext);
+  const navigate = useNavigate();
+
+  const handleLogin = () => {
+    navigate("/login");
+  };
+  const handleLogout = () => {
+    userSignOut()
+      .then(navigate("/login"))
+      .catch((err) => console.log(err.message));
+  };
   const links = (
     <>
       <li>
@@ -11,7 +23,7 @@ const Navbar = () => {
             isPending
               ? "pending"
               : isActive
-              ? " text-teal-700 bg-teal-200 rounded-md font-bold"
+              ? " text-teal-700 bg-teal-300 rounded-md font-bold"
               : ""
           }
           to="/"
@@ -26,7 +38,7 @@ const Navbar = () => {
             isPending
               ? "pending"
               : isActive
-              ? " text-teal-700 bg-teal-200 rounded-md font-bold"
+              ? " text-teal-700 bg-teal-300 rounded-md font-bold"
               : ""
           }
         >
@@ -76,13 +88,43 @@ const Navbar = () => {
         <div className="navbar-center hidden lg:flex">
           <ul className="menu menu-horizontal px-1">{links}</ul>
         </div>
+
+        {/* Navbar End */}
         <div className="navbar-end">
-          <Link
-            to="/login"
-            className="px-5 py-2 bg-teal-300 font-medium rounded-lg hover:bg-teal-600 hover:text-white"
-          >
-            Login
-          </Link>
+          {user ? (
+            <div className="flex items-center space-x-3">
+              <div className="">
+                <img
+                  className="w-7 lg:w-10 h-7 lg:h-10 rounded-full ml-4 lg:ml-2"
+                  src={user?.photoURL}
+                  alt=""
+                />
+                <p className="text-xs font-logoFont text-center">
+                  {user?.displayName}
+                </p>
+              </div>
+              <button
+                onClick={handleLogout}
+                className="px-2 py-1 text-sm lg:text-base lg:px-5 lg:py-2 border hover:border-teal-700 border-teal-300 hover:bg-teal-400 hover:text-black font-medium rounded-md"
+              >
+                Sign Out
+              </button>
+            </div>
+          ) : (
+            <div className="flex items-center">
+              <img
+                className="w-7 lg:w-10 h-7 lg:h-10 rounded-full mr-3"
+                src="https://i.ibb.co/By0YFNn/default-profile-picture-grey-male-icon.png"
+                alt=""
+              />
+              <button
+                onClick={handleLogin}
+                className="px-2 py-1 text-sm lg:text-base lg:px-5 lg:py-2 bg-teal-600 hover:bg-teal-400 hover:text-black text-white rounded-md"
+              >
+                Sign In
+              </button>
+            </div>
+          )}
         </div>
       </div>
     </div>

Frontend/src/Firebase Config/firebase,config,js

@@ -0,0 +1,21 @@
+
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyBqF3JMVJvi74sTf2dFOcp22pa28R6dbas",
+  authDomain: "gadjet-store-8a7cd.firebaseapp.com",
+  projectId: "gadjet-store-8a7cd",
+  storageBucket: "gadjet-store-8a7cd.appspot.com",
+  messagingSenderId: "839068425227",
+  appId: "1:839068425227:web:93b4f86c3526d062057b0e"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+export const auth = getAuth(app);

Frontend/src/Pages/Login.jsx

@@ -1,7 +1,108 @@
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useContext } from "react";
+import swal from "sweetalert";
+import { FcGoogle } from "react-icons/fc";
+import { AuthContext } from "../Provider/AuthProvider";
+
 const Login = () => {
+  const { UserLogin, loginWithGoogle } = useContext(AuthContext);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const handleLogin = (e) => {
+    e.preventDefault();
+    const form = new FormData(e.currentTarget);
+    const userEmail = form.get("email");
+    const userPassword = form.get("password");
+
+    UserLogin(userEmail, userPassword)
+      .then(() => {
+        e.target.reset();
+        swal("Congratulations!", "You logged in Successfully!", "success");
+        navigate(location?.state ? location.state : "/");
+      })
+      .catch((err) => {
+        swal(err.message, "Try again", "warning");
+        e.target.reset();
+        console.log(err.message);
+      });
+  };
+
+  const handleGoogleLogin = () => {
+    loginWithGoogle()
+      .then(() => {
+        swal("Congratulations!", "You logged in Successfully!", "success");
+        navigate(location?.state ? location.state : "/");
+      })
+      .catch((err) => {
+        swal(err.message, "", "warning");
+        console.log(err);
+      });
+  };
+
   return (
-    <div>
-      <h1>Login</h1>
+    <div className="hero min-h-screen bg-base-900">
+      <div className="hero-content flex-col w-full md:w-1/2 lg:w-2/6 lg:max-w-2xl">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold">Please Sign in</h1>
+        </div>
+        <div className="card w-full py-3 shadow-xl bg-base-100">
+          <form onSubmit={handleLogin} className="card-body">
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Email</span>
+              </label>
+              <input
+                type="email"
+                placeholder="email"
+                name="email"
+                className="input input-bordered"
+                required
+              />
+            </div>
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Password</span>
+              </label>
+              <input
+                type="password"
+                name="password"
+                placeholder="password"
+                className="input input-bordered"
+                required
+              />
+            </div>
+            <div className="form-control mt-6">
+              <button className="py-2 rounded-md bg-teal-500 hover:bg-teal-400 hover:text-black text-white font-semibold">
+                Sign In
+              </button>
+            </div>
+          </form>
+
+          <div className=" my-2 px-8 w-full ">
+            <p className="text-sm text-gray-700 mb-3 ml-3">
+              You can also login using Google
+            </p>
+            <button
+              onClick={handleGoogleLogin}
+              className="py-2 rounded-md w-full border bg-teal-200 border-teal-500 hover:bg-teal-400 hover:text-black font-semibold"
+            >
+              <span className="flex justify-center items-center">
+                <p className="mr-2">Sign in with </p>
+                <FcGoogle></FcGoogle>
+                <span className="ml-1">Google</span>
+              </span>
+            </button>
+          </div>
+
+          <span className="text-center text-gray-400">
+            New to this website? Please{" "}
+            <Link to="/registration" className="font-semibold text-teal-700">
+              Sign Up
+            </Link>
+          </span>
+        </div>
+      </div>
     </div>
   );
 };

Frontend/src/Pages/Registration.jsx

@@ -0,0 +1,134 @@
+import { Link, useNavigate } from "react-router-dom";
+import { updateProfile } from "firebase/auth";
+import { useContext } from "react";
+import swal from "sweetalert";
+import { AuthContext } from "../Provider/AuthProvider";
+
+const Registration = () => {
+  const { createNewUser } = useContext(AuthContext);
+  const navigate = useNavigate();
+
+  const handleRegistration = (e) => {
+    e.preventDefault();
+    const form = new FormData(e.currentTarget);
+    const userName = form.get("name");
+    const image = form.get("photourl");
+    const userEmail = form.get("email");
+    const userPassword = form.get("password");
+
+    if (userPassword.length < 6) {
+      e.target.reset();
+      return swal(
+        "Password should be more than 6 letters",
+        "Please try again",
+        "warning"
+      );
+    } else if (!/[A-Z]/.test(userPassword)) {
+      e.target.reset();
+      return swal(
+        "Password should have at least one capital letter",
+        "Please try again",
+        "warning"
+      );
+    } else if (!/[!@#$%^&*()_+{}[\]:;<>,.?~\\-]/.test(userPassword)) {
+      e.target.reset();
+      return swal(
+        "Password should have at least one special character!",
+        "Please try again",
+        "warning"
+      );
+    }
+    createNewUser(userEmail, userPassword)
+      .then((res) => {
+        const user = res.user;
+        updateProfile(user, {
+          displayName: userName,
+          email: userEmail,
+          photoURL: image,
+        });
+        e.target.reset();
+        console.log(user);
+        swal("Congratulations!", "Signed Up Successfully!", "success");
+        navigate("/");
+      })
+      .catch((err) => {
+        e.target.reset();
+        console.log(err);
+      });
+  };
+  return (
+    <div className="hero min-h-screen bg-base-900">
+      <div className="hero-content flex-col w-full md:w-1/2 lg:w-2/6 lg:max-w-2xl">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold">Please Sign Up</h1>
+        </div>
+        <div className="card w-full py-3 shadow-xl bg-base-100">
+          <form onSubmit={handleRegistration} className="card-body">
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Name</span>
+              </label>
+              <input
+                type="text"
+                placeholder="Name"
+                name="name"
+                className="input input-bordered"
+                required
+              />
+            </div>
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Email</span>
+              </label>
+              <input
+                type="email"
+                placeholder="email"
+                name="email"
+                className="input input-bordered"
+                required
+              />
+            </div>
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Photo url</span>
+              </label>
+              <input
+                type="text"
+                placeholder="Photo url"
+                defaultValue="https://source.unsplash.com/random/200x200/?img=1"
+                name="photourl"
+                className="input input-bordered"
+                // required
+              />
+            </div>
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Password</span>
+              </label>
+              <input
+                type="password"
+                placeholder="password"
+                name="password"
+                className="input input-bordered"
+                required
+              />
+            </div>
+            <div className="form-control mt-6">
+              <button className="py-2 rounded-md bg-teal-500 hover:bg-teal-400 hover:text-black text-white font-semibold">
+                Sign Up
+              </button>
+            </div>
+          </form>
+          <span className="text-center text-gray-400">
+            Already have an account? Please{" "}
+            <Link to="/login" className="font-semibold text-teal-700">
+              Sign in
+            </Link>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Registration;