From 2ff55996c057d95324272f0cb112bf7bfbc9de3f Mon Sep 17 00:00:00 2001
From: Ansh101112 <tanshuman145@gmail.com>
Date: Sun, 21 Jul 2024 01:07:38 +0530
Subject: [PATCH] new ui integrated with backend

---
 package-lock.json                             |   4 +-
 src/Admin/AdminLayout.jsx                     |   8 +-
 src/Admin/components/AdminNavbar.jsx          |   2 +-
 .../components/AdminNavbar/AdminNavbar.jsx    |   2 +-
 src/App.jsx                                   |  12 +-
 src/PrivateRoute.jsx                          |   2 +-
 src/User/components/Aside/Aside.jsx           |  53 ++++--
 src/User/components/Buttons/Logout.jsx        |   5 +-
 src/User/components/Navbar/AuthButton.jsx     |   2 +-
 src/User/components/Navbar/MobileMenu.jsx     |  26 ++-
 src/User/components/Navbar/UserNavbar.jsx     |  20 ++-
 src/User/pages/Dashboard/dashboard_cart.jsx   |  23 ++-
 src/User/pages/UserAuth/UserAuth.jsx          | 166 ++++++++++++++----
 13 files changed, 228 insertions(+), 97 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c534c3d7..5565b638 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3401,7 +3401,7 @@
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@types/raf": {
       "version": "3.4.3",
@@ -3414,7 +3414,7 @@
       "version": "18.3.3",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
       "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
diff --git a/src/Admin/AdminLayout.jsx b/src/Admin/AdminLayout.jsx
index 928e1c8f..6321195a 100644
--- a/src/Admin/AdminLayout.jsx
+++ b/src/Admin/AdminLayout.jsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-import AdminNavbar from './components/AdminNavbar/AdminNavbar';
+import React from "react";
+import { Outlet } from "react-router-dom";
+import AdminNavbar from "./components/AdminNavbar/AdminNavbar";
 // import AdminFooter from './components/AdminFooter';
 
 const AdminLayout = () => {
   return (
     <div>
-      <AdminNavbar />
+      {/* <AdminNavbar /> */}
       <Outlet />
       {/* <AdminFooter /> */}
     </div>
diff --git a/src/Admin/components/AdminNavbar.jsx b/src/Admin/components/AdminNavbar.jsx
index a672975b..c597d684 100644
--- a/src/Admin/components/AdminNavbar.jsx
+++ b/src/Admin/components/AdminNavbar.jsx
@@ -12,7 +12,7 @@ const AdminNavbar = () => {
       localStorage.removeItem("isLoggedIn");
       localStorage.removeItem("username");
       alert("Logout Successful.");
-      navigate("/login");
+      navigate("/auth");
     }
   };
   return (
diff --git a/src/Admin/components/AdminNavbar/AdminNavbar.jsx b/src/Admin/components/AdminNavbar/AdminNavbar.jsx
index 1fa0d89b..3109ba69 100644
--- a/src/Admin/components/AdminNavbar/AdminNavbar.jsx
+++ b/src/Admin/components/AdminNavbar/AdminNavbar.jsx
@@ -14,7 +14,7 @@ const AdminNavbar = () => {
       localStorage.removeItem("isLoggedIn");
       localStorage.removeItem("username");
       alert("Logout Successful.");
-      navigate("/login");
+      navigate("/auth");
     }
   };
 
diff --git a/src/App.jsx b/src/App.jsx
index 975b91c4..7f78a97b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -69,16 +69,14 @@ import PrintingStationery from "./User/pages/Popular_Categories/Printing-Station
 
 import { Helmet } from "react-helmet";
 
-
 export default function App() {
   return (
     <AuthProvider>
-       <CookieConsentBanner /> {/* CookieConsentBanner component */}
+      <CookieConsentBanner /> {/* CookieConsentBanner component */}
       <Helmet>
         <script src="https://cdn.botpress.cloud/webchat/v2/inject.js"></script>
         <script src="https://mediafiles.botpress.cloud/f910a06e-f7d4-4424-8642-e3cdffe933b5/webchat/v2/config.js"></script>
       </Helmet>
-
       <Routes>
         <Route path="/" element={<UserLayout />}>
           <Route index element={<Home />} />
@@ -154,7 +152,7 @@ export default function App() {
           />
 
           <Route path="team" element={<Team />} />
-          <Route path="auth" element={<UserAuth  />} />
+          <Route path="auth" element={<UserAuth />} />
           <Route path="faq" element={<FAQ />} />
           <Route path="termsAndCondition" element={<TermsAndConditions />} />
           <Route path="feedback" element={<FeedbackModal />} />
@@ -165,6 +163,12 @@ export default function App() {
           <Route path="EPR_Page" element={<EPRPage />} />
 
           <Route element={<PrivateRoute />}>
+            <Route path="/admin" element={<AdminLayout />}>
+              <Route index element={<AdminPanel />} />
+              {/* <Route path="dashboard" element={<AdminDashboard />} /> */}
+              <Route path="vigy_form" element={<VigyForm />} />
+              <Route path="product_form" element={<ProductForm />} />
+            </Route>
             <Route path="dashboard" element={<Dashboard />} />
             <Route path="confirm" element={<Confirmation />} />
             <Route
diff --git a/src/PrivateRoute.jsx b/src/PrivateRoute.jsx
index 34fc5046..1304c12b 100644
--- a/src/PrivateRoute.jsx
+++ b/src/PrivateRoute.jsx
@@ -3,7 +3,7 @@ import { Navigate, Outlet } from "react-router-dom";
 
 const PrivateRoute = () => {
   const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
-  return isLoggedIn ? <Outlet /> : <Navigate to="/login" />;
+  return isLoggedIn ? <Outlet /> : <Navigate to="/auth" />;
 };
 
 export default PrivateRoute;
diff --git a/src/User/components/Aside/Aside.jsx b/src/User/components/Aside/Aside.jsx
index 776d4a3c..3d3cfc97 100644
--- a/src/User/components/Aside/Aside.jsx
+++ b/src/User/components/Aside/Aside.jsx
@@ -56,7 +56,7 @@ const Aside = () => {
       if (result.isConfirmed) {
         localStorage.setItem("isLoggedIn", false);
         localStorage.removeItem("username");
-        navigate("/login");
+        navigate("/auth");
 
         Swal.fire({
           title: "Logout successfully!",
@@ -78,7 +78,8 @@ const Aside = () => {
     <>
       <aside
         className="w-64 bg-[#2d4031] text-white flex flex-col fixed top-0 mt-20 index-"
-        style={{ position: "sticky" }}>
+        style={{ position: "sticky" }}
+      >
         <div className="flex items-center space-x-4 mt-10 ml-5">
           <div className="h-10 bg-green-700 flex items-center justify-center p-8 rounded-lg gap-2">
             <lord-icon
@@ -88,14 +89,16 @@ const Aside = () => {
               }}
               src="https://cdn.lordicon.com/hrjifpbq.json"
               trigger="hover"
-              colors="primary:#ffffff"></lord-icon>
+              colors="primary:#ffffff"
+            ></lord-icon>
             <span className="text-white">{username}</span>
           </div>
         </div>
         <nav className="flex-1 px-4 py-8 space-y-2">
           <Link
             to="#"
-            className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md">
+            className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md"
+          >
             <lord-icon
               style={{
                 height: "20px",
@@ -103,13 +106,15 @@ const Aside = () => {
               }}
               src="https://cdn.lordicon.com/hrjifpbq.json"
               trigger="hover"
-              colors="primary:#ffffff"></lord-icon>
+              colors="primary:#ffffff"
+            ></lord-icon>
             <span>My Profile</span>
           </Link>
 
           <Link
             to="/dashboard_order"
-            className="flex items-center space-x-2 p-2 hover:bg-green-700  rounded-md">
+            className="flex items-center space-x-2 p-2 hover:bg-green-700  rounded-md"
+          >
             <lord-icon
               style={{
                 height: "20px",
@@ -117,13 +122,15 @@ const Aside = () => {
               }}
               src="https://cdn.lordicon.com/xljvqlng.json"
               trigger="hover"
-              colors="primary:#ffffff"></lord-icon>
+              colors="primary:#ffffff"
+            ></lord-icon>
             <span>Orders</span>
           </Link>
 
           <Link
             to="/dashboard_cart"
-            className="flex items-center space-x-2 p-2 hover:bg-green-700  rounded-md relative">
+            className="flex items-center space-x-2 p-2 hover:bg-green-700  rounded-md relative"
+          >
             <lord-icon
               style={{
                 height: "20px",
@@ -131,7 +138,8 @@ const Aside = () => {
               }}
               src="https://cdn.lordicon.com/pbrgppbb.json"
               trigger="hover"
-              colors="primary:#ffffff"></lord-icon>
+              colors="primary:#ffffff"
+            ></lord-icon>
             <span>Cart</span>
             <span className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">
               5
@@ -140,7 +148,8 @@ const Aside = () => {
 
           <Link
             to="#"
-            className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md">
+            className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md"
+          >
             <lord-icon
               style={{
                 height: "20px",
@@ -148,13 +157,15 @@ const Aside = () => {
               }}
               src="https://cdn.lordicon.com/ulnswmkk.json"
               trigger="hover"
-              colors="primary:#ffffff"></lord-icon>
+              colors="primary:#ffffff"
+            ></lord-icon>
             <span>Wishlist</span>
           </Link>
 
           <Link
             to="#"
-            className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md relative">
+            className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md relative"
+          >
             <lord-icon
               style={{
                 height: "20px",
@@ -162,7 +173,8 @@ const Aside = () => {
               }}
               src="https://cdn.lordicon.com/lznlxwtc.json"
               trigger="hover"
-              colors="primary:#ffffff"></lord-icon>
+              colors="primary:#ffffff"
+            ></lord-icon>
             <span>Notifications</span>
             <span className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">
               2
@@ -171,7 +183,8 @@ const Aside = () => {
 
           <Link
             to="/Help"
-            className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md">
+            className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md"
+          >
             <lord-icon
               style={{
                 height: "20px",
@@ -179,12 +192,14 @@ const Aside = () => {
               }}
               src="https://cdn.lordicon.com/ojnjgkun.json"
               trigger="hover"
-              colors="primary:#ffffff"></lord-icon>
+              colors="primary:#ffffff"
+            ></lord-icon>
             <span>Help</span>
           </Link>
           <Link
             to="/contact"
-            className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md">
+            className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md"
+          >
             <lord-icon
               style={{
                 height: "20px",
@@ -192,7 +207,8 @@ const Aside = () => {
               }}
               src="https://cdn.lordicon.com/srsgifqc.json"
               trigger="hover"
-              colors="primary:#ffffff"></lord-icon>
+              colors="primary:#ffffff"
+            ></lord-icon>
             <span>Contact Us</span>
           </Link>
 
@@ -205,7 +221,8 @@ const Aside = () => {
                 padding: "12px 30px",
                 borderRadius: "8px",
                 border: "1px solid #98bf8cff",
-              }}>
+              }}
+            >
               Logout
             </button>
           </div>
diff --git a/src/User/components/Buttons/Logout.jsx b/src/User/components/Buttons/Logout.jsx
index 54a9728f..a6bb54ad 100644
--- a/src/User/components/Buttons/Logout.jsx
+++ b/src/User/components/Buttons/Logout.jsx
@@ -8,7 +8,7 @@ function Logout() {
     if (confirmed) {
       localStorage.setItem("isLoggedIn", false);
       localStorage.removeItem("username");
-      navigate("/login");
+      navigate("/auth");
       alert("Logout Successful.");
     }
   };
@@ -23,7 +23,8 @@ function Logout() {
           padding: "12px 30px",
           borderRadius: "8px",
           border: "1px solid #98bf8cff",
-        }}>
+        }}
+      >
         Logout
       </button>
     </>
diff --git a/src/User/components/Navbar/AuthButton.jsx b/src/User/components/Navbar/AuthButton.jsx
index df2e988a..309fd699 100644
--- a/src/User/components/Navbar/AuthButton.jsx
+++ b/src/User/components/Navbar/AuthButton.jsx
@@ -13,7 +13,7 @@ const AuthButton = ({ isLoggedIn, handleLogout }) =>
     </button>
   ) : (
     <Link
-      to="/login"
+      to="/auth"
       className="ml-4 text-green-800 hover:text-gray-600 flex items-center">
       <button
         type="button"
diff --git a/src/User/components/Navbar/MobileMenu.jsx b/src/User/components/Navbar/MobileMenu.jsx
index e0b8c00c..937605ab 100644
--- a/src/User/components/Navbar/MobileMenu.jsx
+++ b/src/User/components/Navbar/MobileMenu.jsx
@@ -15,46 +15,54 @@ const MobileMenu = ({ isOpen, isLoggedIn, username }) => (
           </div>
         ) : (
           <Link
-            to="/login"
-            className="text-black hover:text-gray-600 px-3 py-2 rounded-md text-lg font-medium flex items-center">
+            to="/auth"
+            className="text-black hover:text-gray-600 px-3 py-2 rounded-md text-lg font-medium flex items-center"
+          >
             <FaUserCircle className="mr-2" />
             Login
           </Link>
         )}
         <Link
           to="Dashboard"
-          className="text-black hover:text-gray-600 block px-4 py-2 text-sm">
+          className="text-black hover:text-gray-600 block px-4 py-2 text-sm"
+        >
           Dashboard
         </Link>
         <Link
           to="popularCategories/fashionAccessories"
-          className="text-black hover:text-gray-600 block px-4 py-2 text-sm">
+          className="text-black hover:text-gray-600 block px-4 py-2 text-sm"
+        >
           Fashion
         </Link>
         <Link
           to="popularCategories/customizedGifts"
-          className="text-black hover:text-gray-600 block px-4 py-2 text-sm">
+          className="text-black hover:text-gray-600 block px-4 py-2 text-sm"
+        >
           Gifts
         </Link>
         <Link
           to="popularCategories/furnitureDecor"
-          className="text-black hover:text-gray-600 block px-4 py-2 text-sm">
+          className="text-black hover:text-gray-600 block px-4 py-2 text-sm"
+        >
           Furniture
         </Link>
         <Link
           to="popularCategories/printingStationery"
-          className="text-black hover:text-gray-600 block px-4 py-2 text-sm">
+          className="text-black hover:text-gray-600 block px-4 py-2 text-sm"
+        >
           Stationary
         </Link>
         <Link
           to="popularCategories/bodyCare"
-          className="text-black hover:text-gray-600 block px-4 py-2 text-sm">
+          className="text-black hover:text-gray-600 block px-4 py-2 text-sm"
+        >
           Body-Care
         </Link>
       </div>
       <Link
         to="/cart"
-        className="text-black hover:text-gray-600 px-3 py-2 rounded-md text-lg font-medium flex items-center">
+        className="text-black hover:text-gray-600 px-3 py-2 rounded-md text-lg font-medium flex items-center"
+      >
         <FaShoppingCart className="mr-2" />
         Cart
       </Link>
diff --git a/src/User/components/Navbar/UserNavbar.jsx b/src/User/components/Navbar/UserNavbar.jsx
index 40c01abe..13bff7be 100644
--- a/src/User/components/Navbar/UserNavbar.jsx
+++ b/src/User/components/Navbar/UserNavbar.jsx
@@ -47,7 +47,7 @@ const UserNavbar = ({ isAdmin }) => {
       if (result.isConfirmed) {
         localStorage.setItem("isLoggedIn", false);
         localStorage.removeItem("username");
-        navigate("/login");
+        navigate("/auth");
 
         Swal.fire({
           title: "Logout successfully!",
@@ -99,7 +99,8 @@ const UserNavbar = ({ isAdmin }) => {
                     <Link
                       key={link.text}
                       to={link.to}
-                      className="text-green-800 hover:text-green-500 hover:underline block px-4 py-2 font-bold text-base">
+                      className="text-green-800 hover:text-green-500 hover:underline block px-4 py-2 font-bold text-base"
+                    >
                       {link.text}
                     </Link>
                   ))}
@@ -126,15 +127,18 @@ const UserNavbar = ({ isAdmin }) => {
                     {showDropdown && (
                       <div
                         ref={dropdownRef}
-                        className="absolute right-0 mt-32 w-48 bg-white rounded-md shadow-lg py-1">
+                        className="absolute right-0 mt-32 w-48 bg-white rounded-md shadow-lg py-1"
+                      >
                         <Link
                           to="/dashboard"
-                          className="block px-4 py-2 text-gray-800 hover:bg-gray-200">
+                          className="block px-4 py-2 text-gray-800 hover:bg-gray-200"
+                        >
                           Dashboard
                         </Link>
                         <button
                           onClick={handleLogout}
-                          className="block px-4 py-2 text-gray-800 hover:bg-gray-200 w-full text-left">
+                          className="block px-4 py-2 text-gray-800 hover:bg-gray-200 w-full text-left"
+                        >
                           Logout
                         </button>
                       </div>
@@ -148,12 +152,14 @@ const UserNavbar = ({ isAdmin }) => {
             <div className="-mr-2 flex md:hidden">
               <button
                 onClick={toggleNavbar}
-                className="inline-flex items-center justify-center p-2 rounded-md text-green-800 hover:text-gray-600 focus:outline-none">
+                className="inline-flex items-center justify-center p-2 rounded-md text-green-800 hover:text-gray-600 focus:outline-none"
+              >
                 <svg
                   className="h-6 w-6"
                   stroke="#15803D"
                   fill="#15803D"
-                  viewBox="0 0 24 24">
+                  viewBox="0 0 24 24"
+                >
                   <path
                     strokeLinecap="round"
                     strokeLinejoin="round"
diff --git a/src/User/pages/Dashboard/dashboard_cart.jsx b/src/User/pages/Dashboard/dashboard_cart.jsx
index cae4811d..ba7e96d7 100644
--- a/src/User/pages/Dashboard/dashboard_cart.jsx
+++ b/src/User/pages/Dashboard/dashboard_cart.jsx
@@ -23,7 +23,8 @@ const currencyFormatter = new Intl.NumberFormat("en-IN", {
 const CartItem = ({ product, onUpdate }) => (
   <div
     className={`${cardClass} flex items-center justify-between mb-4 mt-12`}
-    style={{ border: "1px solid black" }}>
+    style={{ border: "1px solid black" }}
+  >
     <div className="flex items-center">
       <img
         src={product.image}
@@ -54,7 +55,8 @@ const CartItem = ({ product, onUpdate }) => (
       onKeyUp={(e) => {
         if (e.key === "Enter") onUpdate(product, -1 * product.quantity);
       }}
-      tabIndex="0"></lord-icon>
+      tabIndex="0"
+    ></lord-icon>
   </div>
 );
 
@@ -76,14 +78,16 @@ const Subtotal = ({ items }) => {
       <h2 className="text-2xl font-bold mb-6 text-black">Subtotal</h2>
       <div
         className={`${cardClass} space-y-2`}
-        style={{ border: "1px solid black" }}>
+        style={{ border: "1px solid black" }}
+      >
         <p className="text-lg font-semibold text-zinc-800">Order Summary</p>
         <ul className="list-inside text-zinc-700 space-y-1 list-none">
           <hr />
           {items.map((item, index) => (
             <li
               key={index}
-              className="flex items-center justify-between gap-5 py-1">
+              className="flex items-center justify-between gap-5 py-1"
+            >
               <span>{item.title}</span>
               <span>{currencyFormatter.format(item.total)}</span>
             </li>
@@ -121,7 +125,8 @@ const ProceedToCheckout = () => {
           <button
             type="button"
             className={`${buttonBgClass} w-full sm:w-auto`}
-            style={{ minWidth: "375px" }}>
+            style={{ minWidth: "375px" }}
+          >
             Check Out
           </button>
         </Link>
@@ -138,11 +143,12 @@ const LoginToContinue = () => {
         Checkout.
       </p>
       <div className="mt-4 flex flex-col sm:flex-row justify-between space-y-4 sm:space-y-0 sm:space-x-8">
-        <Link to="/login">
+        <Link to="/auth">
           <button
             type="button"
             className={`${buttonBgClass} w-full sm:w-auto`}
-            style={{ minWidth: "425px" }}>
+            style={{ minWidth: "425px" }}
+          >
             Login now
           </button>
         </Link>
@@ -209,7 +215,8 @@ const Dashboard_Cart = () => {
                     <button
                       type="button"
                       className={`${buttonBgClass} w-full sm:w-auto`}
-                      onClick={onClearCart}>
+                      onClick={onClearCart}
+                    >
                       Clear Cart
                     </button>
                   </div>
diff --git a/src/User/pages/UserAuth/UserAuth.jsx b/src/User/pages/UserAuth/UserAuth.jsx
index 6b8e3dc6..d8806ac0 100644
--- a/src/User/pages/UserAuth/UserAuth.jsx
+++ b/src/User/pages/UserAuth/UserAuth.jsx
@@ -1,6 +1,12 @@
 import React, { useState } from "react";
 import { FcGoogle } from "react-icons/fc";
-import { FaFacebook, FaEnvelope, FaLock, FaUser, FaPhone } from "react-icons/fa";
+import {
+  FaFacebook,
+  FaEnvelope,
+  FaLock,
+  FaUser,
+  FaPhone,
+} from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import Swal from "sweetalert2";
@@ -35,19 +41,59 @@ const AuthForm = () => {
         "https://vigybag-backend.onrender.com/api/auth/login",
         { email: loginEmail, password: loginPassword }
       );
+
       localStorage.setItem("isLoggedIn", "true");
-      localStorage.setItem("username", response.data.username);
-      navigate("/");
-      Swal.fire({
-        title: "Login successful!",
-        text: "Thanks for Choosing VigyBag!",
-        icon: "success",
-        confirmButtonText: "Ok",
-      });
+
+      const username = response.data.username;
+      const adminRole = response.data.adminrole;
+
+      // Store username and admin role in localStorage
+      localStorage.setItem("username", username);
+      if (adminRole !== undefined) {
+        localStorage.setItem("adminRole", adminRole);
+      }
+
+      setLoginEmail("");
+      setLoginPassword("");
+
+      if (adminRole === 1) {
+        Swal.fire({
+          title: "Admin login detected",
+          text: `Welcome, ${username}! Redirecting to admin verification page...`,
+          icon: "warning",
+          confirmButtonText: "Ok",
+          customClass: {
+            popup: "custom-popup",
+            title: "custom-title",
+            content: "custom-content",
+            confirmButton: "custom-confirm-button",
+          },
+          timer: 3000,
+          timerProgressBar: true,
+        }).then(() => {
+          navigate("/admin-verification");
+        });
+      } else {
+        Swal.fire({
+          title: "Login successfully!",
+          text: `Welcome, ${username}! Thanks for choosing VigyBag!`,
+          icon: "success",
+          confirmButtonText: "Ok",
+          customClass: {
+            popup: "custom-popup",
+            title: "custom-title",
+            content: "custom-content",
+            confirmButton: "custom-confirm-button",
+          },
+        }).then(() => {
+          navigate("/");
+        });
+      }
     } catch (error) {
+      console.log(error);
       Swal.fire({
         title: "Login failed",
-        text: error.response?.data?.message || "An error occurred",
+        text: error.response?.data?.message,
         icon: "error",
         confirmButtonText: "Ok",
       });
@@ -70,15 +116,12 @@ const AuthForm = () => {
     }
 
     try {
-      await axios.post(
-        "https://vigybag-backend.onrender.com/api/auth/signup",
-        {
-          username,
-          email: signupEmail,
-          password: signupPassword,
-          phone,
-        }
-      );
+      await axios.post("https://vigybag-backend.onrender.com/api/auth/signup", {
+        username,
+        email: signupEmail,
+        password: signupPassword,
+        phone,
+      });
       setIsFlipped(false); // Flip back to login
       Swal.fire({
         title: "Signup successful!",
@@ -89,7 +132,7 @@ const AuthForm = () => {
     } catch (error) {
       Swal.fire({
         title: "Signup failed",
-        text: error.response?.data?.message || "An error occurred",
+        text: error.response?.data?.message,
         icon: "error",
         confirmButtonText: "Ok",
       });
@@ -109,12 +152,19 @@ const AuthForm = () => {
         <div className="mt-40 bg-[#e7f0e7] rounded-lg p-10 shadow-lg flex w-full max-w-7xl h-[75vh] gap-[10vw]">
           {/* Left side */}
           <div className="flex-1 pr-8 mt-[13vh]">
-            <h1 className="text-5xl font-bold text-[#2d3e40] mb-4">Welcome to VigyBag!!</h1>
-            <h2 className="text-3xl text-[#4a7c59] mb-8">Make Your Shopping <br />Eco-Friendly</h2>
+            <h1 className="text-5xl font-bold text-[#2d3e40] mb-4">
+              Welcome to VigyBag!!
+            </h1>
+            <h2 className="text-3xl text-[#4a7c59] mb-8">
+              Make Your Shopping <br />
+              Eco-Friendly
+            </h2>
             <div className="space-x-4">
-              <Link to="/admin/login"><button className="bg-[#2d3e40] text-white px-6 py-2 rounded-full hover:bg-opacity-90 transition duration-300">
-                Login as Admin
-              </button></Link>
+              <Link to="/admin/login">
+                <button className="bg-[#2d3e40] text-white px-6 py-2 rounded-full hover:bg-opacity-90 transition duration-300">
+                  Login as Admin
+                </button>
+              </Link>
               <button className="bg-[#f9efe4] text-[#2d3e40] px-6 py-2 rounded-full border border-[#2d3e40] hover:bg-[#2d3e40] hover:text-white transition duration-300">
                 Login as Vigy
               </button>
@@ -123,15 +173,16 @@ const AuthForm = () => {
 
           {/* Right side - Login/Signup Form */}
           <div className="flex-1">
-            <div className={`flip-container ${isFlipped ? 'flipped' : ''}`}>
+            <div className={`flip-container ${isFlipped ? "flipped" : ""}`}>
               <div className="flipper">
                 {/* Login Form */}
                 <div className="front">
                   <div className="bg-[#2d3e40] rounded-lg p-6 shadow-lg text-white">
                     <h2 className="text-white text-2xl font-semibold text-center mb-6 text-[#4caf50] flex items-center justify-center">
-                      <SlLogin className="mr-2" />Login as a User
+                      <SlLogin className="mr-2" />
+                      Login as a User
                     </h2>
-                    <form onSubmit={handleLogin} className="space-y-4">
+                    <form className="space-y-4">
                       <div className="relative">
                         <FaEnvelope className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
                         <input
@@ -162,29 +213,55 @@ const AuthForm = () => {
                           onChange={(e) => setRememberMe(e.target.checked)}
                           className="mr-2"
                         />
-                        <label htmlFor="rememberMe" className="text-sm">Remember me</label>
-                        <a href="#" className="text-sm text-[#4caf50] hover:underline ml-[15vw]">Forgot password?</a>
+                        <label htmlFor="rememberMe" className="text-sm">
+                          Remember me
+                        </label>
+                        <a
+                          href="#"
+                          className="text-sm text-[#4caf50] hover:underline ml-[15vw]"
+                        >
+                          Forgot password?
+                        </a>
                       </div>
                       <button
                         type="submit"
+                        onClick={handleLogin}
                         className="w-full bg-[#4caf50] text-white p-2 rounded hover:bg-[#45a049] transition duration-300"
                       >
-                        {loading ? <DotLoader color="#ffffff" size={24} /> : "Log in"}
+                        {loading ? (
+                          <DotLoader color="#ffffff" size={24} />
+                        ) : (
+                          "Log in"
+                        )}
                       </button>
                     </form>
                     <div className="mt-4 flex justify-between space-x-2">
-                      <button onClick={() => handleSocialLogin('google')} className="flex-1 flex items-center justify-center bg-white text-black px-4 py-2 rounded text-sm hover:bg-gray-100 transition duration-300">
-                        <FcGoogle className="mr-2" />Continue with Google
+                      <button
+                        onClick={() => handleSocialLogin("google")}
+                        className="flex-1 flex items-center justify-center bg-white text-black px-4 py-2 rounded text-sm hover:bg-gray-100 transition duration-300"
+                      >
+                        <FcGoogle className="mr-2" />
+                        Continue with Google
                       </button>
-                      <button onClick={() => handleSocialLogin('facebook')} className="flex-1 flex items-center justify-center bg-[#1877f2] text-white px-4 py-2 rounded text-sm hover:bg-[#166fe5] transition duration-300">
+                      <button
+                        onClick={() => handleSocialLogin("facebook")}
+                        className="flex-1 flex items-center justify-center bg-[#1877f2] text-white px-4 py-2 rounded text-sm hover:bg-[#166fe5] transition duration-300"
+                      >
                         <FaFacebook className="mr-2" /> Continue with Facebook
                       </button>
                     </div>
                     <p className="text-xs text-center mt-4">
-                      By continuing, you agree to follow Terms of Use and Privacy Policy
+                      By continuing, you agree to follow Terms of Use and
+                      Privacy Policy
                     </p>
                     <p className="text-sm text-center mt-4">
-                      Don't have an account? <button onClick={() => setIsFlipped(true)} className="text-[#4caf50] hover:underline">Sign up</button>
+                      Don't have an account?{" "}
+                      <button
+                        onClick={() => setIsFlipped(true)}
+                        className="text-[#4caf50] hover:underline"
+                      >
+                        Sign up
+                      </button>
                     </p>
                   </div>
                 </div>
@@ -193,7 +270,8 @@ const AuthForm = () => {
                 <div className="back">
                   <div className="bg-[#2d3e40] rounded-lg p-6 shadow-lg text-white">
                     <h2 className="text-white text-2xl font-semibold text-center mb-6 text-[#4caf50] flex items-center justify-center">
-                      <MdAssignmentInd className="mr-2" />SignUp as a User
+                      <MdAssignmentInd className="mr-2" />
+                      SignUp as a User
                     </h2>
                     <form onSubmit={handleSignup} className="space-y-4">
                       <div className="relative">
@@ -255,11 +333,21 @@ const AuthForm = () => {
                         type="submit"
                         className="w-full bg-[#4caf50] text-white p-2 rounded hover:bg-[#45a049] transition duration-300"
                       >
-                        {loading ? <DotLoader color="#ffffff" size={24} /> : "Sign Up"}
+                        {loading ? (
+                          <DotLoader color="#ffffff" size={24} />
+                        ) : (
+                          "Sign Up"
+                        )}
                       </button>
                     </form>
                     <p className="text-sm text-center mt-4">
-                      Already have an account? <button onClick={() => setIsFlipped(false)} className="text-[#4caf50] hover:underline">Log in</button>
+                      Already have an account?{" "}
+                      <button
+                        onClick={() => setIsFlipped(false)}
+                        className="text-[#4caf50] hover:underline"
+                      >
+                        Log in
+                      </button>
                     </p>
                   </div>
                 </div>