Replaced static text in LoginPage.jsx with translation function t(key, language).

Frontend/src/pages/Login/LoginPage.jsx

@@ -1,15 +1,20 @@
 import React, { useRef } from "react";
 import { useDispatch } from "react-redux";
-import { Link, useNavigate } from "react-router-dom";
+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
 
 const LoginPage = () => {
+  // Get language from outlet context
+  const { language } = useOutletContext();
+
+  console.log("LoginPage language:", language);
+
   const emailElement = useRef();
   const passwordElement = useRef();
 
   const navigate = useNavigate();
-
   const dispatch = useDispatch();
 
   const handleLogin = async (event) => {
@@ -33,7 +38,7 @@ const LoginPage = () => {
     emailElement.current.value = "";
     passwordElement.current.value = "";
 
-    if (user.success == true) {
+    if (user.success === true) {
       navigate("/");
     }
   };
@@ -44,45 +49,45 @@ const LoginPage = () => {
         <div className="rounded-lg shadow-md ">
           <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">
-              Welcome Back!
+              {t("login_welcome_back", language)}
             </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">
-          <h1 className="text-2xl font-bold text-gray-50 mb-4">Login</h1>
+          <h1 className="text-2xl font-bold text-gray-50 mb-4">{t("login_title", language)}</h1>
           <p className="text-gray-100 mb-6">
-            Welcome back! Please login to your account.
+            {t("login_subtitle", language)}
           </p>
           <form className="space-y-6" onSubmit={handleLogin}>
             <div>
               <label
-                for="username"
+                htmlFor="username"
                 className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
               >
-                Email
+                {t("login_email_label", language)}
               </label>
               <input
                 type="email"
                 id="username"
                 ref={emailElement}
                 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="username@gmail.com"
+                placeholder={t("login_email_placeholder", language)}
                 required
               />
             </div>
             <div>
               <label
-                for="password"
+                htmlFor="password"
                 className="block mb-2 text-sm font-medium text-gray-100 dark:text-white"
               >
-                Password
+                {t("login_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="********"
+                placeholder={t("login_password_placeholder", language)}
                 required
               />
             </div>
@@ -95,17 +100,17 @@ const LoginPage = () => {
                   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"
                 />
                 <label
-                  for="remember_me"
+                  htmlFor="remember_me"
                   className="ml-2 text-sm font-medium text-gray-100 dark:text-gray-300"
                 >
-                  Remember Me
+                  {t("login_remember_me", language)}
                 </label>
               </div>
               <Link
                 to={"/user/forgetpassword"}
                 className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
               >
-                Forgot Password?
+                {t("login_forgot_password", language)}
               </Link>
             </div>
             <div className="flex justify-center">
@@ -113,16 +118,16 @@ const LoginPage = () => {
                 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"
               >
-                Login
+                {t("login_button", language)}
               </button>
             </div>
             <p className="text-gray-100 text-center mt-4">
-              New User?{" "}
+              {t("login_new_user", language)}{" "}
               <Link
                 to={"/user/signup"}
                 className="text-blue-600 hover:underline"
               >
-                Signup
+                {t("login_signup", language)}
               </Link>
             </p>
           </form>
@@ -133,3 +138,4 @@ const LoginPage = () => {
 };
 
 export default LoginPage;
+