Added translation for SignupPage.jsx along with en and fr translations.

Frontend/src/locales/en.json

@@ -17,6 +17,24 @@
   "login_signup": "Signup",
   "main_login_heading": "Welcome to the Login Portal",
 
+  "signup_register_heading": "Register Your account",
+  "signup_welcome": "Welcome to Crop Compass.",
+  "signup_subtitle": "Please register your new account.",
+  "signup_first_name_label": "First Name",
+  "signup_first_name_placeholder": "John",
+  "signup_last_name_label": "Last Name",
+  "signup_last_name_placeholder": "Doe",
+  "signup_email_label": "Email",
+  "signup_email_placeholder": "user@mail.com",
+  "signup_password_label": "Password",
+  "signup_password_placeholder": "At least 6 unique Characters.. ",
+  "signup_remember_me": "Remember Me",
+  "signup_register_button": "Register your Account",
+  "signup_already_have_account": "Already have an Account?",
+  "signup_login": "Login",
+  "signup_journey_heading": "Start your Journey",
+  "signup_with": "with",
+
   "hero_one_stop_solution": "One stop solution for every farmer's need.",
   "hero_plant_alt": "plant",
 

Frontend/src/locales/fr.json

@@ -17,6 +17,24 @@
   "login_signup": "S'inscrire",
   "main_login_heading": "Bienvenue sur le portail de connexion",
 
+  "signup_register_heading": "Enregistrez votre compte",
+  "signup_welcome": "Bienvenue sur Crop Compass.",
+  "signup_subtitle": "Veuillez enregistrer votre nouveau compte.",
+  "signup_first_name_label": "Prénom",
+  "signup_first_name_placeholder": "Jean",
+  "signup_last_name_label": "Nom",
+  "signup_last_name_placeholder": "Dupont",
+  "signup_email_label": "E-mail",
+  "signup_email_placeholder": "utilisateur@mail.com",
+  "signup_password_label": "Mot de passe",
+  "signup_password_placeholder": "Au moins 6 caractères uniques.. ",
+  "signup_remember_me": "Se souvenir de moi",
+  "signup_register_button": "Enregistrer votre compte",
+  "signup_already_have_account": "Vous avez déjà un compte ?",
+  "signup_login": "Connexion",
+  "signup_journey_heading": "Commencez votre aventure",
+  "signup_with": "avec",
+
   "hero_one_stop_solution": "Une solution unique pour tous les besoins des agriculteurs.",
   "hero_plant_alt": "plante",
 

Frontend/src/pages/Login/SignupPage.jsx

@@ -1,8 +1,14 @@
 import React, { useRef } 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";
+
+const SignupPage = (props) => {
+  const outletContext = useOutletContext?.();
+  const language =
+    (outletContext && outletContext.language) || props.language || "en";
 
-const SignupPage = () => {
   const firstNameElement = useRef();
   const lastNameElement = useRef();
   const emailElement = useRef();
@@ -46,57 +52,45 @@ const SignupPage = () => {
   return (
     <section className="bg-[url(https://i.pinimg.com/736x/6c/d2/cc/6cd2cc05a7e464a78bdf1124b4ad30f1.jpg)] bg-cover font-sans flex flex-col justify-center min-h-screen max-h-screen">
       <div className="flex justify-between items-center w-full h-full p-5">
-        {/* <div className="bg-gradient-to-br from-purple-300 to-pink-200 rounded-lg shadow-md  min-h-40 object-center md:hidden">
-          <div className="flex flex-col items-center justify-center h-full relative">
-            <img
-              src="/images/background1.jpg"
-              alt=""
-              className="absolute order-3 w-full h-full"
-            />
-            <h1 className="text-6xl font-bold text-white mb-4 md:text-6xl lg:text-9xl relative ml-8">
-              Welcome to Crop Compass
-            </h1>
-          </div>
-        </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 h-[95vh]">
           <h1 className="text-2xl font-bold text-gray-50 mb-4">
-            Register Your account
+            {t("signup_register_heading", language)}
           </h1>
-          <p className="text-gray-100">Welcome to Crop Compass.</p>
+          <p className="text-gray-100">{t("signup_welcome", language)}</p>
           <p className="text-gray-100 mb-6">
-            Please register your new account.
+            {t("signup_subtitle", language)}
           </p>
           <form action="#" className="space-y-6" onSubmit={handleRegisteration}>
             <div className="flex flex-col gap-5 sm:flex-row">
               <div className="w-full">
                 <label
-                  htmlFor="username"
+                  htmlFor="firstName"
                   className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
                 >
-                  First Name
+                  {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"
-                  placeholder="John"
+                  placeholder={t("signup_first_name_placeholder", language)}
                   required
                 />
               </div>
               <div className="w-full">
                 <label
-                  htmlFor="username"
+                  htmlFor="LastName"
                   className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
                 >
-                  Last Name
+                  {t("signup_last_name_label", language)}
                 </label>
                 <input
                   type="text"
                   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"
-                  placeholder="Doe"
+                  placeholder={t("signup_last_name_placeholder", language)}
                   required
                 />
               </div>
@@ -104,17 +98,17 @@ const SignupPage = () => {
 
             <div>
               <label
-                htmlFor="username"
+                htmlFor="email"
                 className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
               >
-                Email
+                {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"
-                placeholder="user@mail.com"
+                placeholder={t("signup_email_placeholder", language)}
                 required
               />
             </div>
@@ -123,14 +117,14 @@ const SignupPage = () => {
                 htmlFor="password"
                 className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
               >
-                Password
+                {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="At least 6 unique Characters.. "
+                placeholder={t("signup_password_placeholder", language)}
                 required
               />
             </div>
@@ -146,29 +140,22 @@ const SignupPage = () => {
                   htmlFor="remember_me"
                   className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
                 >
-                  Remember Me
+                  {t("signup_remember_me", language)}
                 </label>
               </div>
-              <a
-                href="#"
-                className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-              ></a>
             </div>
-            <div className=" flex justify-center">
+            <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"
               >
-                Register your Account
+                {t("signup_register_button", language)}
               </button>
             </div>
             <p className="text-gray-600 text-center mt-4">
-              Already have an Account ?{" "}
+              {t("signup_already_have_account", language)}{" "}
-              <Link
+              <Link to={"/user/login"} className="text-blue-600 hover:underline">
-                to={"/user/login"}
+                {t("signup_login", language)}
-                className="text-blue-600 hover:underline"
-              >
-                Login
               </Link>
             </p>
           </form>
@@ -176,26 +163,15 @@ const SignupPage = () => {
 
         <div className="rounded-lg shadow-md text-center w-auto">
           <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">
+            <h1 className="text-6xl font-bold text-white mb-4 md:text-6xl lg:text-9xl ml-8">
-              Start your Journey
+              {t("signup_journey_heading", language)}
+              <br />
+              {t("signup_with", language)}
               <br />
-              with <br />
               Crop Compass
             </h1>
           </div>
         </div>
-        {/* <div className=" backdrop-blur-sm  rounded-lg shadow-md md:block">
-            <div className="flex flex-col items-center justify-center h-full relative text-center">
-              <img
-                src="/images/background1.jpg"
-                alt=""
-                className="absolute order-3 w-full h-full"
-              />
-              <h1 className="text-5xl font-bold text-white mb-4 md:text-5xl lg:text-8xl relative ml-8 text-center">
-                Welcome to MentorFlux!
-              </h1>
-            </div>
-          </div> */}
       </div>
     </section>
   );