Made ForgetPassword and ResetPassword multilingual. Also added en and fr translations for the same.

Frontend/src/locales/en.json

@@ -35,6 +35,23 @@
   "signup_journey_heading": "Start your Journey",
   "signup_with": "with",
 
+  "forget_password_heading": "Forget Password?",
+  "forget_password_subtitle": "No worries, we'll send you reset instructions.",
+  "forget_password_email_placeholder": "Enter your email",
+  "forget_password_send_email": "Send Email",
+  "forget_password_email_sent": "Email Sent to your Mail",
+  "forget_password_back_to_login": "Back to Login Page",
+
+  "reset_password_heading": "Create New Password",
+  "reset_password_subtitle": "Create your new, unique and secure password here.",
+  "reset_password_new_label": "New Password :",
+  "reset_password_new_placeholder": "Enter your New Password",
+  "reset_password_confirm_label": "Confirm Password :",
+  "reset_password_confirm_placeholder": "Enter your Confirm Password",
+  "reset_password_error": "Password and confirm password do not match. Please enter the same password in both fields.",
+  "reset_password_button": "Reset Password",
+  "reset_password_back_to_login": "Back to Login Page",
+
   "hero_one_stop_solution": "One stop solution for every farmer's need.",
   "hero_plant_alt": "plant",
 

Frontend/src/locales/fr.json

@@ -35,6 +35,23 @@
   "signup_journey_heading": "Commencez votre aventure",
   "signup_with": "avec",
 
+  "forget_password_heading": "Mot de passe oublié ?",
+  "forget_password_subtitle": "Pas d'inquiétude, nous vous enverrons des instructions de réinitialisation.",
+  "forget_password_email_placeholder": "Entrez votre e-mail",
+  "forget_password_send_email": "Envoyer l'e-mail",
+  "forget_password_email_sent": "E-mail envoyé à votre adresse",
+  "forget_password_back_to_login": "Retour à la page de connexion",
+
+  "reset_password_heading": "Créer un nouveau mot de passe",
+  "reset_password_subtitle": "Créez ici votre nouveau mot de passe unique et sécurisé.",
+  "reset_password_new_label": "Nouveau mot de passe :",
+  "reset_password_new_placeholder": "Entrez votre nouveau mot de passe",
+  "reset_password_confirm_label": "Confirmer le mot de passe :",
+  "reset_password_confirm_placeholder": "Entrez à nouveau votre mot de passe",
+  "reset_password_error": "Le mot de passe et sa confirmation ne correspondent pas. Veuillez saisir le même mot de passe dans les deux champs.",
+  "reset_password_button": "Réinitialiser le mot de passe",
+  "reset_password_back_to_login": "Retour à la page de connexion",
+
   "hero_one_stop_solution": "Une solution unique pour tous les besoins des agriculteurs.",
   "hero_plant_alt": "plante",
 

Frontend/src/pages/Password/ForgetPassword.jsx

@@ -1,12 +1,17 @@
 import React, { useRef, useState } from "react";
 import { IoIosKey } from "react-icons/io";
-import { Link } from "react-router-dom";
+import { Link, useOutletContext } from "react-router-dom";
 import { FaArrowLeft } from "react-icons/fa6";
 import { BACKEND_URL } from "../../constants";
+import { t } from "../../service/translation";
+
+const ForgetPassword = (props) => {
+  // Get language from context or props, default to 'en'
+  const outletContext = useOutletContext?.();
+  const language =
+    (outletContext && outletContext.language) || props.language || "en";
 
-const ForgetPassword = () => {
   const emailElement = useRef();
-
   const [status, setStatus] = useState(false);
 
   const handleForgetPassword = async (event) => {
@@ -29,15 +34,18 @@ const ForgetPassword = () => {
       setStatus(true);
     }
   };
+
   return (
     <div className="w-full h-[78vh] flex justify-center items-center">
-      <div className="">
+      <div>
         <div className="flex flex-col items-center gap-12">
           <div className="flex flex-col items-center gap-3">
             <IoIosKey className="text-5xl bg-purple-200 p-2 rounded-full text-purple-500" />
-            <h2 className="text-3xl font-bold font-sans">Forget Password?</h2>
+            <h2 className="text-3xl font-bold font-sans">
+              {t("forget_password_heading", language)}
+            </h2>
             <p className="text-gray-500">
-              No worries, we'll send you resent instructions.
+              {t("forget_password_subtitle", language)}
             </p>
           </div>
           <form
@@ -49,7 +57,7 @@ const ForgetPassword = () => {
               <input
                 type="email"
                 id="email"
-                placeholder="Enter your email"
+                placeholder={t("forget_password_email_placeholder", language)}
                 className="w-full rounded-md border-gray-400 border-2"
                 ref={emailElement}
               />
@@ -58,14 +66,17 @@ const ForgetPassword = () => {
               type="submit"
               className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
             >
-              {status === false ? "Send Email" : "Email Sent to your Mail"}
+              {status === false
+                ? t("forget_password_send_email", language)
+                : t("forget_password_email_sent", language)}
             </button>
 
             <Link
               to={"/user/login"}
               className="text-center text-gray-600 inline-flex items-center justify-center gap-2"
             >
-              <FaArrowLeft className="text-lg" /> Back to Login Page
+              <FaArrowLeft className="text-lg" />{" "}
+              {t("forget_password_back_to_login", language)}
             </Link>
           </form>
         </div>
@@ -75,3 +86,4 @@ const ForgetPassword = () => {
 };
 
 export default ForgetPassword;
+

Frontend/src/pages/Password/ResetPassword.jsx

@@ -1,20 +1,23 @@
 import React, { useRef, useState } from "react";
 import { RiLockPasswordFill } from "react-icons/ri";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams, useOutletContext } from "react-router-dom";
 import { FaArrowLeft } from "react-icons/fa6";
 import { BACKEND_URL } from "../../constants";
+import { t } from "../../service/translation";
 
-const ResetPassword = () => {
+const ResetPassword = (props) => {
   const [secure, setSecure] = useState(true);
 
   const newPassworElement = useRef();
   const confirmPassworElement = useRef();
 
   const navigate = useNavigate();
-
   const { token } = useParams();
 
- 
+  // Get language from context or props, default to 'en'
+  const outletContext = useOutletContext?.();
+  const language =
+    (outletContext && outletContext.language) || props.language || "en";
 
   const handleResetPassword = async (event) => {
     event.preventDefault();
@@ -41,8 +44,6 @@ const ResetPassword = () => {
 
       const data = await responce.json();
 
-      
-
       if (data.success === true) {
         navigate("/user/login");
       }
@@ -50,81 +51,81 @@ const ResetPassword = () => {
   };
 
   return (
-    <>
-      <div className="w-full h-[78vh] flex justify-center items-center">
-        <div className="">
-          <div className="flex flex-col items-center gap-10">
-            <div className="flex flex-col items-center gap-3">
-              <RiLockPasswordFill className="text-5xl bg-purple-200 p-2 rounded-full text-purple-500" />
-              <h2 className="text-3xl font-bold font-sans">
-                Create New Password
-              </h2>
-              <p className="text-gray-500">
-                Create your new, unique and secure password here.
-              </p>
-            </div>
-            <form
-              className="flex flex-col w-full gap-5"
-              onSubmit={handleResetPassword}
-            >
-              <div className="flex flex-col gap-2">
-                <label
-                  htmlFor="passwordNew"
-                  className="text-gray-500 font-semibold"
-                >
-                  New Password :
-                </label>
-                <input
-                  type="password"
-                  id="passwordNew"
-                  ref={newPassworElement}
-                  placeholder="Enter your New Password"
-                  className="w-full rounded-md border-gray-400 border-2"
-                />
-              </div>
-              <div className="flex flex-col gap-2">
-                <label
-                  htmlFor="passwordConfirm"
-                  className="text-gray-500 font-semibold"
-                >
-                  Confirm Password :
-                </label>
-                <input
-                  type="password"
-                  id="passwordConfirm"
-                  ref={confirmPassworElement}
-                  placeholder="Enter your Confirm Password"
-                  className="w-full rounded-md border-gray-400 border-2"
-                />
-              </div>
-
-              <p
-                className={`text-red-800 text-sm underline w-96 text-center ${
-                  secure && "hidden"
-                } `}
-              >
-                Password and confirm Password is not same.Please Enter new
-                password and confirm Password same
-              </p>
-
-              <button
-                type="submit"
-                className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
-              >
-                Reset Password
-              </button>
-
-              <Link
-                to={"/user/login"}
-                className="text-center text-gray-600 inline-flex items-center justify-center gap-2"
-              >
-                <FaArrowLeft className="text-lg" /> Back to Login Page
-              </Link>
-            </form>
+    <div className="w-full h-[78vh] flex justify-center items-center">
+      <div>
+        <div className="flex flex-col items-center gap-10">
+          <div className="flex flex-col items-center gap-3">
+            <RiLockPasswordFill className="text-5xl bg-purple-200 p-2 rounded-full text-purple-500" />
+            <h2 className="text-3xl font-bold font-sans">
+              {t("reset_password_heading", language)}
+            </h2>
+            <p className="text-gray-500">
+              {t("reset_password_subtitle", language)}
+            </p>
           </div>
+          <form
+            className="flex flex-col w-full gap-5"
+            onSubmit={handleResetPassword}
+          >
+            <div className="flex flex-col gap-2">
+              <label
+                htmlFor="passwordNew"
+                className="text-gray-500 font-semibold"
+              >
+                {t("reset_password_new_label", language)}
+              </label>
+              <input
+                type="password"
+                id="passwordNew"
+                ref={newPassworElement}
+                placeholder={t("reset_password_new_placeholder", language)}
+                className="w-full rounded-md border-gray-400 border-2"
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <label
+                htmlFor="passwordConfirm"
+                className="text-gray-500 font-semibold"
+              >
+                {t("reset_password_confirm_label", language)}
+              </label>
+              <input
+                type="password"
+                id="passwordConfirm"
+                ref={confirmPassworElement}
+                placeholder={t("reset_password_confirm_placeholder", language)}
+                className="w-full rounded-md border-gray-400 border-2"
+              />
+            </div>
+
+            <p
+              className={`text-red-800 text-sm underline w-96 text-center ${
+                secure && "hidden"
+              } `}
+            >
+              {t("reset_password_error", language)}
+            </p>
+
+            <button
+              type="submit"
+              className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
+            >
+              {t("reset_password_button", language)}
+            </button>
+
+            <Link
+              to={"/user/login"}
+              className="text-center text-gray-600 inline-flex items-center justify-center gap-2"
+            >
+              <FaArrowLeft className="text-lg" />{" "}
+              {t("reset_password_back_to_login", language)}
+            </Link>
+          </form>
         </div>
       </div>
-    </>
+    </div>
   );
 };
+
 export default ResetPassword;
+