[Fixed]: Add the Changes in Login Page (amanjaiman1#493)

[fixed]:
Profile Pic Issue
Email Aavtar Issue
Add Validation form
Add Reload To privated routes
Rebase the firebase adminpanel

Closed  amanjaiman1#494

admin/index.js

@@ -4,6 +4,7 @@ const fb = require("./config");
 const auth = fb.auth();
 const app = express();
 const cors = require("cors");
+
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.use(cors());

package.json

@@ -36,7 +36,8 @@
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-fontawesome": "^1.7.1",
-    "react-icons": "^4.10.1",
+    "react-google-recaptcha": "^3.1.0",
+    "react-icons":"^4.10.1",
     "react-loader-spinner": "^5.3.4",
     "react-parallax-tilt": "^1.7.151",
     "react-redux": "^8.0.5",

src/components/Avatar/index.jsx

@@ -2,6 +2,8 @@ import React from "react";
 import { cn } from "../../utils/utils";
 
 function Avatar({ title, user, className, ...rest }) {
+  const defaultProfilePic =
+    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpPsDc4aXHKSmc9M7sBCaUJnwFs7xww7vlgq2Ix_XGgA&s";
   return (
     <div
       {...rest}
@@ -11,8 +13,8 @@ function Avatar({ title, user, className, ...rest }) {
       )}
     >
       <img
-        referrerpolicy="no-referrer"
-        src={`${user?.profilePic}`}
+        referrerPolicy="no-referrer"
+        src={`${user?.profilePic ? user?.profilePic : defaultProfilePic}`}
         alt="User Profile"
         className="rounded-full h-full w-full cursor-pointer hover:scale-110 transform transition-transform"
       />

src/components/CustomizerTopbar/index.jsx

@@ -45,7 +45,8 @@ function CustomizerTopbar() {
           Logout
         </Button>
         <span className="ml-2">
-          Welcome, {userInfo?.data?.fullName ? userInfo?.data?.fullName : "XXXX"}
+          Welcome,{" "}
+          {userInfo?.data?.fullName ? userInfo?.data?.fullName : "Guest User"}
         </span>
         <Avatar
           user={userInfo?.data}

src/utils/PrivateRoute.jsx

@@ -25,7 +25,14 @@ function PrivateRoute({ children }) {
       }
       setloading(false);
     }
+    window.addEventListener("storage", async () => {
+      window.location.reload();
+    });
+
     getVerify();
+    return () => {
+      window.removeEventListener("storage", () => {});
+    };
   }, []);
   return loading ? (
     <h1>Loading...</h1>

src/views/auth/Login.jsx

@@ -58,7 +58,7 @@ const Login = () => {
         return;
       }
       let userInfo = { ...user.data(), uid: user.id };
-      console.log(data);
+      // console.log(data);
       Cookies.set("access_token", data.user.accessToken, { expires: 3600 });
       localStorage.setItem("userInfo", JSON.stringify(userInfo));
       navigate("/app/customizer");
@@ -72,13 +72,24 @@ const Login = () => {
       return;
     }
     try {
-      await signInWithEmailAndPassword(auth, email, password);
-      Cookies.set("access_token", email, { expires: 7 });
+      const userInfo = await signInWithEmailAndPassword(auth, email, password);
+      // console.log(userInfo);
+      const user = await getDoc(doc(db, "users", userInfo.user.uid));
+
+      if (!user.exists()) {
+        toast.error("User Not Found");
+        return;
+      }
+      // console.log(user.data());
+
+      let userfb = { ...user.data(), uid: user.id };
+      Cookies.set("access_token", userInfo.user.accessToken, { expires: 3600 });
+      localStorage.setItem("userInfo", JSON.stringify(userfb));
       navigate("/app/customizer");
     } catch (error) {
       // let type = ;
       createError(error.code, "error");
-      // console.log(error.message);
+      console.log(error.message);
       // setError(true);
     }
   };

src/views/auth/SignUp.jsx

@@ -18,6 +18,8 @@ import ToastMake from "../../utils/toastMaker";
 import { async } from "regenerator-runtime";
 import { doc, setDoc } from "firebase/firestore";
 import Cookies from "js-cookie";
+import ReCAPTCHA from "react-google-recaptcha";
+
 const Signup = () => {
   const [loading, setLoading] = useState(false);
   useEffect(() => {
@@ -29,8 +31,11 @@ const Signup = () => {
   const navigate = useNavigate();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const [name, setName] = useState("");
   const [submitDisabled, setSubmitDisabled] = useState(false);
+  const [captchaToken, setCaptchaToken] = useState(null); // Added state for reCAPTCHA token
+
   const handleSignUpWithGoogle = (e) => {
     signInWithPopup(auth, googleProvider).then(async (data) => {
       const user = await setDoc(doc(db, "users", data.user.uid), {
@@ -39,18 +44,43 @@ const Signup = () => {
         profilePic: data.user.photoURL,
       }).catch((err) => console.log(err));
       let userInfo = { ...user, uid: data.user.uid };
-      console.log(data);
+      // console.log(data);
       Cookies.set("access_token", data.user.accessToken, { expires: 3600 });
       localStorage.setItem("userInfo", JSON.stringify(userInfo));
       navigate("/app/customizer");
     });
   };
+
   const handleRegistration = (e) => {
     e.preventDefault();
     if (!email || !password || !name) {
       ToastMake("Fields can't be empty!!", "error");
       return;
     }
+    if (!validateEmail(email)) {
+      ToastMake("Please enter a valid email address!", "error");
+      return;
+    }
+
+    if (!validatePassword(password)) {
+      ToastMake(
+        "Password must contain at least one lowercase letter, one uppercase letter, one number, one special character, and be at least 8 characters long!",
+        "error"
+      );
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      ToastMake("Passwords do not match!", "error");
+      return;
+    }
+
+    // Check if the reCAPTCHA token is available
+    if (!captchaToken) {
+      ToastMake("Please verify that you're not a robot!", "error");
+      return;
+    }
+
     createUserWithEmailAndPassword(auth, email, password)
       .then(async (res) => {
         const user = res.user;
@@ -73,34 +103,83 @@ const Signup = () => {
         setSubmitDisabled(false);
       });
   };
-  return (
-    <section className="loginSec flex items-center justify-center">
-      <div className="flex w-full">
-        <div className="w-1/2">
-          <div className="flex flex-col items-center justify-center h-screen w-full ml-5">
-            <h1 className="text-7xl text-white leading-tight font-semibold animate-[lights_5s_750ms_linear_infinite]">
-              Welcome ! <br /> to Fashion Froze
-            </h1>
-            <p className="text-xl max-sm:text-[10px] mt-2 text-[#cadfff] ">
-              Where creativity meets your wardrobe
-            </p>
-          </div>
-        </div>
-        <div className="shape flex ml-10 items-center max-sm:p-10 p-10 w-1/2 w-100%">
-          {/* image container */}
 
-          <div className="loginDiv p-10 rounded-[10px] shadow-lg border max-sm:w-[200px] max-sm:-10 max-sm:h-[] w-[500px] ">
-            <h2 className="text-3xl text-white max-sm:text-2xl ">Sign up</h2>
-            <p className="text-sm text-white max-sm:text-[10px] mt-2">
-              Just some details to get you in.!
-            </p>
+  function onChange(value) {
+    console.log("Captcha value:", value);
+    setCaptchaToken(value); // Update reCAPTCHA token when user interacts with reCAPTCHA
+  }
 
-            {/* form inputs */}
+  const validateEmail = (email) => {
+    // Email validation regex pattern
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailPattern.test(email);
+  };
+
+  const validatePassword = (password) => {
+    // Password validation regex pattern
+    const passwordPattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}$/;
+    return passwordPattern.test(password);
+  };
 
-            <form
-              action=""
-              className="flex flex-col gap-4 "
-              onSubmit={handleRegistration}
+  return (
+    <section className="loginSec min-h-screen flex items-center justify-center">
+      <div className="loginDiv shape flex rounded-[10px] shadow-lg items-center max-sm:p-10 p-10">
+        {/* image container */}
+        <div className="max-sm:w-[200px] max-sm:-10 max-sm:h-[] w-[500px]">
+          <h2 className="text-3xl max-sm:text-2xl text-[#cadfff]">
+            Welcome to
+            <span className="font-semibold"> Fashion Froze </span>
+          </h2>
+          <p className="text-sm max-sm:text-[10px] mt-2 text-[#3cdcf5]">
+            Where creativity meets your wardrobe
+          </p>
+
+          {/* Form inputs */}
+          <form
+            action=""
+            className="flex flex-col gap-4 "
+            onSubmit={handleRegistration}
+          >
+            <input
+              className="p-2 mt-8 max-sm:mt-4 max-sm:h-8 rounded-[5px] border font-normal"
+              type="UserName"
+              name="UserName"
+              placeholder="UserName"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+            <input
+              className="p-2 max-sm:h-8 rounded-[5px] border font-normal"
+              type="email"
+              name="email"
+              placeholder="Email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+            <input
+              className="p-2 max-sm:h-8 rounded-[5px] border w-full"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              name="password"
+              placeholder="Password"
+            />
+            <input
+              className="p-2 max-sm:h-8 rounded-[5px] border w-full"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              name="confirmPassword"
+              placeholder="Confirm Password"
+            />
+            <ReCAPTCHA
+              sitekey="6LfTrjcnAAAAAFmUQ6swpJDy55CYtU7JsbjaS5bA"
+              onChange={onChange}
+            />
+            <button
+              className={`bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-xl text-white p-3 hover:scale-105 duration-300 max-w-full ${
+                submitDisabled ? "cursor-not-allowed pointer-events-none" : ""
+              }`}
             >
               <input
                 className="bg-transparent outline-0 text-white p-2 mt-8 max-sm:mt-4 max-sm:h-8 border-2 placeholder-white rounded-[5px] font-normal"