Added confirm password text box and show/hide password toggles in both password fields.

- Display meaningful error messages on login failure, including rate limiting (429)
- Added fallback for unexpected JSON responses from the server
- Integrated `Message` component for error display
- Cleaned up form value clearing and error state management

Backend/.gitignore

@@ -1,3 +1,5 @@
+package-lock.json
+
 # Logs
 logs
 *.log

Backend/Controllers/user.controller.js

@@ -4,11 +4,28 @@ const { uploadOnCloudinary } = require("../Utils/cloudinary.js");
 const sendEmail = require("../Utils/sendmail.js");
 const crypto = require("crypto");
 const jwt = require("jsonwebtoken");
+const sha1 = require("sha1");
+const axios = require("axios");
 
 // Register or Sign up new User -- Done
 const registerUser = catchAsyncErrors(async (req, res) => {
   const { name, email, password, role } = req.body;
 
+// Strong password policy
+  const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/;
+  if (!strongPasswordRegex.test(password)) {
+    return res.status(400).json({ success: false, message: "Password must be at least 8 characters long and include uppercase, lowercase, number, and special character." });
+  }
+
+// Check for data breach with haveibeenpwned.com
+  const hashed = sha1(password).toUpperCase();
+  const prefix = hashed.slice(0, 5);
+  const suffix = hashed.slice(5);
+  const response = await axios.get(`https://api.pwnedpasswords.com/range/${prefix}`);
+  if (response.data.includes(suffix)) {
+    return res.status(400).json({ success: false, message: "This password has appeared in a data breach. Please choose a different one." });
+  }
+
   const user = await User.create({
     name,
     email,

Backend/Database/DB_connect.js

@@ -3,19 +3,23 @@ const catchAsyncErrors = require("../Middlewares/catchAsyncErrors.js");
 
 const DB_connect = catchAsyncErrors(async () => {
   try {
-    const connectionInstance = await mongoose.connect(
-      `${process.env.MONGODB_URI}/${process.env.DATABASE_NAME}`
-    );
+    const dbUri = `${process.env.MONGODB_URI}/${process.env.DATABASE_NAME}?authSource=admin`;
+    const connectionInstance = await mongoose.connect(dbUri, {
+      useNewUrlParser: true,
+      useUnifiedTopology: true,
+    });
 
     if (!connectionInstance) {
       console.log("MongoDB connection failed");
-    }
-    console.log(
-      "MongoDB connected Successfully on server : " +
+    } else {
+      console.log(
+        "MongoDB connected Successfully to:",
         connectionInstance.connection.host
-    );
+      );
+    }
   } catch (error) {
     console.log("MongoDB connection failed due to some error :", error);
   }
 });
+
 module.exports = DB_connect;

Backend/Middlewares/rateLimiter.js

@@ -0,0 +1,11 @@
+const rateLimit = require("express-rate-limit");
+
+const loginLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 5, // limit each IP to 5 login requests per windowMs
+  message: "Too many login attempts. Try again in 15 minutes.",
+  standardHeaders: true,
+  legacyHeaders: false,
+});
+
+module.exports = { loginLimiter };

Backend/Routes/user.routes.js

@@ -19,11 +19,13 @@ const { checkAuthenticated } = require("../Middlewares/authentication.js");
 
 const upload = require("../Middlewares/multer.js");
 
+const { loginLimiter } = require("../Middlewares/rateLimiter");
+
 const router = express.Router();
 
 router.route("/register").post(registerUser);
 
-router.route("/login").post(loginUser);
+router.route("/login").post(loginLimiter, loginUser);
 
 router.route("/password/forgot").post(forgetPassword);
 

Backend/app.js

@@ -1,6 +1,7 @@
 const express = require("express");
 const cors = require("cors");
 const cookieParser = require("cookie-parser");
+const helmet = require("helmet");
 
 const userRoute = require("./Routes/user.routes.js");
 const farmRoute = require("./Routes/farm.routes.js");
@@ -17,6 +18,8 @@ dotenv.config({
 
 const app = express();
 
+app.use(helmet()); // Secure headers
+
 const corsOptions = {
   origin: process.env.FRONTEND_URI,
   methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
@@ -43,4 +46,12 @@ app.use("/api/v1/finance", financeRoute);
 
 app.use("/api/v1/task", taskRoute);
 
+// Redirect HTTP to HTTPS (works behind proxy)
+app.use((req, res, next) => {
+  if (req.headers["x-forwarded-proto"] !== "https" && process.env.NODE_ENV === "production") {
+    return res.redirect(`https://${req.headers.host}${req.url}`);
+  }
+  next();
+});
+
 module.exports = app;

Backend/package.json

@@ -11,16 +11,20 @@
   "description": "",
   "dependencies": {
     "@google/generative-ai": "^0.24.1",
+    "axios": "^1.6.8",
     "bcrypt": "^6.0.0",
     "cloudinary": "^2.7.0",
     "cookie-parser": "^1.4.7",
     "cors": "^2.8.5",
     "dotenv": "^16.5.0",
     "express": "^5.1.0",
+    "express-rate-limit": "^6.7.0",
+    "helmet": "^7.0.0",
     "jsonwebtoken": "^9.0.2",
     "mongoose": "^8.16.0",
     "multer": "^2.0.1",
     "nodemailer": "^7.0.3",
+    "sha1": "^1.1.1",
     "socket.io": "^4.8.1"
   },
   "devDependencies": {

Frontend/package.json

@@ -26,7 +26,9 @@
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.1",
     "react-typewriter-effect": "^1.1.0",
-    "socket.io-client": "^4.7.5"
+    "socket.io-client": "^4.7.5",
+    "axios": "^1.6.8",
+    "sha1": "^1.1.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

Frontend/src/App.jsx

@@ -62,7 +62,7 @@ function App() {
         <LanguageSwitcher language={language} setLanguage={setLanguage} />
 
         {/* 3. Pass language as prop to Navbar2 and Outlet if needed */}
-        <Navbar2 language={language} />
+        
         <Outlet context={{ language }} />
 
         <div

Frontend/src/components/Message.jsx

@@ -1,12 +1,18 @@
 import React from "react";
 
-const Message = ({ message }) => {
+const Message = ({ message, type = "error" }) => {
   const date = new Date();
+
+  const background =
+    type === "error"
+      ? "bg-red-100 border border-red-400 text-red-700"
+      : "bg-gray-100 border border-gray-300 text-gray-800";
+
   return (
-    <div className="w-auto h-auto bg-gray-200 rounded-md text-start p-3 mx-4">
-      <p className="">{message}</p>
-      <p className="text-end text-sm ">
-        {date.getDate()}/{date.getMonth()}/{date.getFullYear()}{" "}
+    <div className={`rounded-md p-3 ${background}`}>
+      <p className="font-medium">{message}</p>
+      <p className="text-end text-sm text-gray-600">
+        {date.getDate()}/{date.getMonth() + 1}/{date.getFullYear()}{" "}
         {date.toLocaleTimeString()}
       </p>
     </div>

Frontend/src/pages/Home/Cards.jsx

@@ -53,7 +53,7 @@ export const HeroSecn = ({ language = "en" }) => {
 
 export const CardWithImage = ({ language = "en" }) => {
   return (
-    <div className="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+    <div className="max-w-sm  rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
       <a href="#">
         <img
           className="rounded-t-lg"
@@ -97,18 +97,25 @@ export const CardWithImage = ({ language = "en" }) => {
   );
 };
 
-export const CardOnlyText = ({ headingText, bodyText, href, language = "en" }) => {
+export const CardOnlyText = ({
+  headingText,
+  bodyText,
+  href,
+  language = "en",
+}) => {
   return (
     <div>
       <a
         href={href}
         target="_blank"
-        className="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
+        className="block max-w-sm min-h-[275px] p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
       >
         <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
           {headingText}
         </h5>
-        <p className="font-normal text-gray-50 dark:text-gray-400">{bodyText}</p>
+        <p className="font-normal text-gray-50 dark:text-gray-400">
+          {bodyText}
+        </p>
       </a>
     </div>
   );
@@ -116,7 +123,7 @@ export const CardOnlyText = ({ headingText, bodyText, href, language = "en" }) =
 
 export const CardWithButton = ({ language = "en" }) => {
   return (
-    <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+    <div className="max-w-sm min-h-[290px] p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
       <a target="_blank" href="#">
         <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
           {t("card_with_button_title", language)}
@@ -153,10 +160,11 @@ export const CardWithButton = ({ language = "en" }) => {
 
 export const CardWithOnlyImage = ({ language = "en" }) => {
   return (
-    <div className="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
+    <div className="w-full h-full  object-cover max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
       <a
         href="https://theprint.in/economy/telangana-is-the-success-story-of-indian-agritech-ai-tools-soil-testing-e-commerce-more/1630359/"
         target="_blank"
+        className="w-full h-full"
       >
         <img
           className="rounded-lg"
@@ -208,4 +216,3 @@ export const CardLayout = ({ language = "en" }) => {
     </div>
   );
 };
-

Frontend/src/pages/Home/Hero2.jsx

@@ -43,7 +43,7 @@ function Hero2(props) {
 
   return (
     <div>
-      <Navbar2 language={language} />
+      
       <ScrollReveal direction="up">
         <HeroSecn language={language} />
       </ScrollReveal>

Frontend/src/pages/Home/HomePage.jsx

@@ -4,11 +4,13 @@ import Hero from "./Hero";
 import Testimonial from "./Testimonial";
 import Hero2 from "./Hero2";
 import Footer from "./Footer";
+import Navbar2 from "../../components/Navbar2";
 
 const HomePage = () => {
   return (
     <>
       <div className=" bg-[url(/images/bgphoto.png)] bg-no-repeat bg-cover">
+        <Navbar2 />
         <Hero2 />
 
         <Footer />

Frontend/src/pages/Login/LoginPage.jsx

@@ -1,45 +1,63 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { useDispatch } from "react-redux";
 import { Link, useNavigate, useOutletContext } from "react-router-dom";
 import { userSliceActions } from "../../store/userSlice";
 import { BACKEND_URL } from "../../constants";
-import { t } from "../../service/translation"; // Adjust path as needed
+import { t } from "../../service/translation";
+import Message from "../../components/Message"; // Import Message component
 
 const LoginPage = () => {
-  // Get language from outlet context
   const { language } = useOutletContext();
-
-  console.log("LoginPage language:", language);
-
   const emailElement = useRef();
   const passwordElement = useRef();
 
+  const [error, setError] = useState(""); // For showing errors
+
   const navigate = useNavigate();
   const dispatch = useDispatch();
 
   const handleLogin = async (event) => {
     event.preventDefault();
-    const responce = await fetch(`${BACKEND_URL}/api/v1/login`, {
-      method: "POST",
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        email: emailElement.current.value,
-        password: passwordElement.current.value,
-      }),
-    });
+    setError(""); // Clear previous error
   
-    const user = await responce.json();
+    try {
+      const response = await fetch(`${BACKEND_URL}/api/v1/login`, {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email: emailElement.current.value,
+          password: passwordElement.current.value,
+        }),
+      });
   
-    dispatch(userSliceActions.addUser(user.data));
+      if (response.status === 429) {
+        setError("Too many login attempts. Please try again after 15 minutes.");
+        return;
+      }
   
-    emailElement.current.value = "";
-    passwordElement.current.value = "";
+      let data;
+      try {
+        data = await response.json();
+      } catch (jsonError) {
+        setError("Unexpected server response. Please try again.");
+        return;
+      }
   
-    if (user.success === true) {
-      navigate("/");
+      if (data.success === true) {
+        dispatch(userSliceActions.addUser(data.data));
+        navigate("/");
+      } else {
+        setError(data.message || "Login failed. Please check your credentials.");
+      }
+  
+      emailElement.current.value = "";
+      passwordElement.current.value = "";
+    } catch (err) {
+      console.error("Login error:", err);
+      setError("Something went wrong. Please try again.");
     }
   };
 
@@ -55,9 +73,15 @@ const LoginPage = () => {
         </div>
         <div className="backdrop-blur-md bg-gradient-to-tr from-slate-300/10 to-slate-200/30 rounded-lg shadow-md lg:p-36">
           <h1 className="text-2xl font-bold text-gray-50 mb-4">{t("login_title", language)}</h1>
-          <p className="text-gray-100 mb-6">
-            {t("login_subtitle", language)}
-          </p>
+          <p className="text-gray-100 mb-6">{t("login_subtitle", language)}</p>
+
+          {/* Show error message */}
+          {error && (
+            <div className="my-4">
+              <Message message={error} type="error" />
+            </div>
+          )}
+
           <form className="space-y-6" onSubmit={handleLogin}>
             <div>
               <label
@@ -116,17 +140,14 @@ const LoginPage = () => {
             <div className="flex justify-center">
               <button
                 type="submit"
-                className="text-white w-1/2 backdrop-blur-lg bg-gradient-to-tr from-slate-100/15 to-slate-200/15 shadow-lg   hover:backdrop-blur-lg focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+                className="text-white w-1/2 backdrop-blur-lg bg-gradient-to-tr from-slate-100/15 to-slate-200/15 shadow-lg hover:backdrop-blur-lg focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
               >
                 {t("login_button", language)}
               </button>
             </div>
             <p className="text-gray-100 text-center mt-4">
               {t("login_new_user", language)}{" "}
-              <Link
-                to={"/user/signup"}
-                className="text-blue-600 hover:underline"
-              >
+              <Link to={"/user/signup"} className="text-blue-600 hover:underline">
                 {t("login_signup", language)}
               </Link>
             </p>
@@ -138,4 +159,3 @@ const LoginPage = () => {
 };
 
 export default LoginPage;
-

Frontend/src/pages/Login/MainLoginPage.jsx

@@ -6,8 +6,6 @@ import Container from "../../components/Container.jsx";
 const MainLoginPage = ({ language = "en" }) => {
   return (
     <>
-      {/* If Navbar2 is used here, pass language */}
-      <Navbar2 language={language} />
       <Container>
         {/* Pass language to Outlet context for nested routes */}
         <Outlet context={{ language }} />
@@ -17,4 +15,3 @@ const MainLoginPage = ({ language = "en" }) => {
 };
 
 export default MainLoginPage;
-

Frontend/src/pages/Login/SignupPage.jsx

@@ -1,52 +1,117 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { BACKEND_URL } from "../../constants";
 import { t } from "../../service/translation";
 import { useOutletContext } from "react-router-dom";
+import { isPasswordPwned } from "../../utils/passwordUtils";
 
 const SignupPage = (props) => {
   const outletContext = useOutletContext?.();
-  const language =
-    (outletContext && outletContext.language) || props.language || "en";
+  const language = (outletContext && outletContext.language) || props.language || "en";
 
   const firstNameElement = useRef();
   const lastNameElement = useRef();
   const emailElement = useRef();
-  const roleElement = useRef();
   const passwordElement = useRef();
+  const confirmPasswordElement = useRef();
+
+  const [error, setError] = useState("");
+  const [passwordStrength, setPasswordStrength] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   const navigate = useNavigate();
 
+  const evaluatePasswordStrength = (password) => {
+    let score = 0;
+    if (password.length >= 8) score++;
+    if (/[a-z]/.test(password)) score++;
+    if (/[A-Z]/.test(password)) score++;
+    if (/\d/.test(password)) score++;
+    if (/[@$!%*?&]/.test(password)) score++;
+
+    if (score <= 2) return "Weak";
+    if (score === 3 || score === 4) return "Moderate";
+    return "Strong";
+  };
+
+  const handlePasswordChange = (e) => {
+    const pwd = e.target.value;
+    passwordElement.current.value = pwd;
+    setPasswordStrength(evaluatePasswordStrength(pwd));
+  };
+
   const handleRegisteration = async (event) => {
     event.preventDefault();
+    setError("");
+
+    const password = passwordElement.current.value;
+    const confirmPassword = confirmPasswordElement.current.value;
+
+    const strongPasswordRegex =
+      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/;
+
+    if (!strongPasswordRegex.test(password)) {
+      setError(
+        "Password must be at least 8 characters long and include uppercase, lowercase, number, and special character."
+      );
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const pwned = await isPasswordPwned(password);
+      if (pwned) {
+        setError("This password previously appeared in a data breach. Please use a new password.");
+        setLoading(false);
+        return;
+      }
+    } catch (err) {
+      console.error("Password breach check failed:", err);
+      setError("Something went wrong while checking password security. Try again.");
+      setLoading(false);
+      return;
+    }
 
     const user = {
-      name:
-        firstNameElement.current.value + " " + lastNameElement.current.value,
+      name: `${firstNameElement.current.value} ${lastNameElement.current.value}`,
       email: emailElement.current.value,
-      password: passwordElement.current.value,
+      password: password,
     };
 
-    event.preventDefault();
+    try {
+      const response = await fetch(`${BACKEND_URL}/api/v1/register`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(user),
+        credentials: "include",
+      });
 
-    const responce = await fetch(`${BACKEND_URL}/api/v1/register`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(user),
-      credentials: "include",
-    });
-    const data = await responce.json();
+      const data = await response.json();
+
+      if (data.success === true) {
+        navigate("/user/login");
+      } else {
+        setError(data.message || "Registration failed. Please try again.");
+      }
+    } catch (err) {
+      console.error("Registration error:", err);
+      setError("Something went wrong on the server. Please try again later.");
+    }
 
     firstNameElement.current.value = "";
     lastNameElement.current.value = "";
     emailElement.current.value = "";
     passwordElement.current.value = "";
-
-    if (data.success == true) {
-      navigate("/user/login");
-    }
+    confirmPasswordElement.current.value = "";
+    setPasswordStrength("");
+    setLoading(false);
   };
 
   return (
@@ -57,39 +122,32 @@ const SignupPage = (props) => {
             {t("signup_register_heading", language)}
           </h1>
           <p className="text-gray-100">{t("signup_welcome", language)}</p>
-          <p className="text-gray-100 mb-6">
-            {t("signup_subtitle", language)}
-          </p>
-          <form action="#" className="space-y-6" onSubmit={handleRegisteration}>
+          <p className="text-gray-100 mb-6">{t("signup_subtitle", language)}</p>
+
+          <form className="space-y-6" onSubmit={handleRegisteration}>
             <div className="flex flex-col gap-5 sm:flex-row">
               <div className="w-full">
-                <label
-                  htmlFor="firstName"
-                  className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
-                >
+                <label htmlFor="firstName" className="block mb-2 text-sm font-medium text-gray-100">
                   {t("signup_first_name_label", language)}
                 </label>
                 <input
                   type="text"
                   id="firstName"
                   ref={firstNameElement}
-                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5"
                   placeholder={t("signup_first_name_placeholder", language)}
                   required
                 />
               </div>
               <div className="w-full">
-                <label
-                  htmlFor="LastName"
-                  className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
-                >
+                <label htmlFor="lastName" className="block mb-2 text-sm font-medium text-gray-100">
                   {t("signup_last_name_label", language)}
                 </label>
                 <input
                   type="text"
-                  id="LastName"
+                  id="lastName"
                   ref={lastNameElement}
-                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5"
                   placeholder={t("signup_last_name_placeholder", language)}
                   required
                 />
@@ -97,61 +155,120 @@ const SignupPage = (props) => {
             </div>
 
             <div>
-              <label
-                htmlFor="email"
-                className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
-              >
+              <label htmlFor="email" className="block mb-2 text-sm font-medium text-gray-100">
                 {t("signup_email_label", language)}
               </label>
               <input
                 type="email"
                 id="email"
                 ref={emailElement}
-                className="bg-gray-50 border border-gray-300 text-black text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                className="bg-gray-50 border border-gray-300 text-black text-sm rounded-lg block w-full p-2.5"
                 placeholder={t("signup_email_placeholder", language)}
                 required
               />
             </div>
+
+            {/* Password */}
             <div>
-              <label
-                htmlFor="password"
-                className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-              >
+              <label htmlFor="password" className="block mb-2 text-sm font-medium text-gray-100">
                 {t("signup_password_label", language)}
               </label>
-              <input
-                type="password"
-                id="password"
-                ref={passwordElement}
-                className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                placeholder={t("signup_password_placeholder", language)}
-                required
-              />
-            </div>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center">
+              <div className="relative">
                 <input
-                  id="remember_me"
-                  type="checkbox"
-                  value=""
-                  className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                  type={showPassword ? "text" : "password"}
+                  id="password"
+                  ref={passwordElement}
+                  onChange={handlePasswordChange}
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 pr-10"
+                  placeholder={t("signup_password_placeholder", language)}
+                  required
                 />
-                <label
-                  htmlFor="remember_me"
-                  className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+                <button
+                  type="button"
+                  onClick={() => setShowPassword((prev) => !prev)}
+                  className="absolute right-2 top-2 text-sm text-blue-500"
                 >
-                  {t("signup_remember_me", language)}
-                </label>
+                  {showPassword ? "Hide" : "Show"}
+                </button>
+              </div>
+
+              {/* Password Strength */}
+              {passwordStrength && (
+                <>
+                  <div className="mt-2 text-sm font-medium">
+                    Password strength:{" "}
+                    <span
+                      className={
+                        passwordStrength === "Weak"
+                          ? "text-red-500"
+                          : passwordStrength === "Moderate"
+                          ? "text-yellow-500"
+                          : "text-green-500"
+                      }
+                    >
+                      {passwordStrength}
+                    </span>
+                  </div>
+                  <div className="w-full h-2 rounded bg-gray-200 mt-1">
+                    <div
+                      className={`h-2 rounded transition-all duration-300 ${
+                        passwordStrength === "Weak"
+                          ? "bg-red-500 w-1/4"
+                          : passwordStrength === "Moderate"
+                          ? "bg-yellow-500 w-2/4"
+                          : "bg-green-500 w-full"
+                      }`}
+                    ></div>
+                  </div>
+                </>
+              )}
+            </div>
+
+            {/* Confirm Password */}
+            <div>
+              <label htmlFor="confirmPassword" className="block mb-2 text-sm font-medium text-gray-100">
+                Confirm Password
+              </label>
+              <div className="relative">
+                <input
+                  type={showConfirmPassword ? "text" : "password"}
+                  id="confirmPassword"
+                  ref={confirmPasswordElement}
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 pr-10"
+                  placeholder="Re-enter your password"
+                  required
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowConfirmPassword((prev) => !prev)}
+                  className="absolute right-2 top-2 text-sm text-blue-500"
+                >
+                  {showConfirmPassword ? "Hide" : "Show"}
+                </button>
               </div>
             </div>
+
+            {error && <p className="text-red-500 text-sm font-medium">{error}</p>}
+
+            {loading && (
+              <div className="flex justify-center text-white font-medium">
+                Checking if password was leaked...
+                <div className="ml-2 animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-blue-500"></div>
+              </div>
+            )}
+
             <div className="flex justify-center">
               <button
                 type="submit"
-                className="text-white w-1/2 backdrop-blur-lg bg-gradient-to-tr from-slate-100/15 to-slate-200/15 shadow-lg hover:backdrop-blur-lg focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+                disabled={loading}
+                className={`text-white w-1/2 backdrop-blur-lg bg-gradient-to-tr from-slate-100/15 to-slate-200/15 shadow-lg hover:backdrop-blur-lg focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 ${
+                  loading ? "opacity-50 cursor-not-allowed" : ""
+                }`}
               >
                 {t("signup_register_button", language)}
               </button>
             </div>
+
             <p className="text-gray-600 text-center mt-4">
               {t("signup_already_have_account", language)}{" "}
               <Link to={"/user/login"} className="text-blue-600 hover:underline">
@@ -162,7 +279,7 @@ const SignupPage = (props) => {
         </div>
 
         <div className="rounded-lg shadow-md text-center w-auto">
-          <div className="flex flex-col items-center justify-center h-full ">
+          <div className="flex flex-col items-center justify-center h-full">
             <h1 className="text-6xl font-bold text-white mb-4 md:text-6xl lg:text-9xl ml-8">
               {t("signup_journey_heading", language)}
               <br />

Frontend/src/utils/passwordUtils.js

@@ -0,0 +1,22 @@
+export async function isPasswordPwned(password) {
+  const sha1 = await hashPassword(password);
+  const prefix = sha1.substring(0, 5);
+  const suffix = sha1.substring(5);
+
+  const response = await fetch(`https://api.pwnedpasswords.com/range/${prefix}`);
+  const text = await response.text();
+
+  const found = text
+    .split("\n")
+    .some((line) => line.split(":")[0] === suffix.toUpperCase());
+
+  return found;
+}
+
+async function hashPassword(password) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(password);
+  const hashBuffer = await crypto.subtle.digest("SHA-1", data);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("").toUpperCase();
+}

README.md

@@ -12,5 +12,6 @@ Crop Compass is a centralized management dashboard designed for farmers, enablin
 - Financial planning tools with expense and revenue tracking
 - AI-powered recommendations and disease detection capabilities
 - Utilizes Google Gemini for predictive crop health analysis
+- Multilingual (currently available in English, Hindi, Marathi and French!)
 
 ---