Performed translation for Authentication in src/pages/

- Login.jsx
- SignUp.jsx

Also, added key:value pairs (English + French for now) for all the text in src/locales.

Frontend/src/locales/en.json

@@ -28,7 +28,37 @@
 
   "not_found_title": "Page Not Found",
   "not_found_description": "Sorry, we couldn't find the page you were looking for. It may have been moved or deleted.",
-  "go_home": "Go Home"
+  "go_home": "Go Home",
+
+  "login_title": "Log in",
+  "email_placeholder": "Enter your email",
+  "password_placeholder": "Enter your password",
+  "forgot_password": "Forgot password?",
+  "logging_in": "Logging In...",
+  "login": "Login",
+  "dont_have_account": "Don’t have an account?",
+  "sign_up": "Sign up",
+  "login_successful": "Login successful!",
+  "login_failed": "Login failed.",
+  "an_error_occurred": "An error occurred. Please try again.",
+  "logging_in_toast": "Logging in...",
+
+  "signup_title": "Sign Up",
+  "first_name": "First Name",
+  "last_name": "Last Name",
+  "email_placeholder": "Enter your email",
+  "password_placeholder": "Enter your password",
+  "confirm_password_placeholder": "Confirm your password",
+  "signing_up": "Signing Up...",
+  "sign_up": "Sign Up",
+  "already_have_account": "Already have an account?",
+  "login": "Login",
+  "passwords_do_not_match": "Passwords do not match.",
+  "registering": "Registering...",
+  "signup_failed": "Signup failed.",
+  "folder_creation_failed": "Failed to create user folder.",
+  "signup_success": "Successfully registered and folder created!",
+  "an_error_occurred": "An error occurred. Please try again."
 
 
 }

Frontend/src/locales/fr.json

@@ -28,7 +28,36 @@
 
   "not_found_title": "Page non trouvée",
   "not_found_description": "Désolé, nous n'avons pas pu trouver la page que vous cherchiez. Elle a peut-être été déplacée ou supprimée.",
-  "go_home": "Accueil"
+  "go_home": "Accueil",
+
+  "login_title": "Connexion",
+  "email_placeholder": "Entrez votre e-mail",
+  "password_placeholder": "Entrez votre mot de passe",
+  "forgot_password": "Mot de passe oublié ?",
+  "logging_in": "Connexion...",
+  "login": "Connexion",
+  "dont_have_account": "Vous n'avez pas de compte ?",
+  "sign_up": "S'inscrire",
+  "login_successful": "Connexion réussie !",
+  "login_failed": "Échec de la connexion.",
+  "an_error_occurred": "Une erreur s'est produite. Veuillez réessayer.",
+  "logging_in_toast": "Connexion en cours...",
+
+  "sign_up": "S'inscrire",
+  "first_name": "Prénom",
+  "last_name": "Nom de famille",
+  "email_placeholder": "Entrez votre e-mail",
+  "password_placeholder": "Entrez votre mot de passe",
+  "confirm_password_placeholder": "Confirmez votre mot de passe",
+  "already_have_account": "Vous avez déjà un compte ?",
+  "login": "Connexion",
+  "signing_up": "Inscription...",
+  "passwords_do_not_match": "Les mots de passe ne correspondent pas.",
+  "registering": "Enregistrement...",
+  "signup_failed": "Échec de l'inscription.",
+  "failed_create_folder": "Échec de la création du dossier utilisateur.",
+  "signup_success": "Inscription réussie et dossier créé !",
+  "an_error_occurred": "Une erreur s'est produite. Veuillez réessayer."
 
 
 }

Frontend/src/pages/Authentication/Login.jsx

@@ -2,10 +2,12 @@ import { useState, useEffect } from "react";
 import { FiEye, FiEyeOff } from "react-icons/fi";
 import { Link, useNavigate } from "react-router-dom";
 import toast from "react-hot-toast"; // Import React Hot Toast
+import { useTranslation } from "react-i18next"; // for multilinguality
 
 const API_URL = import.meta.env.VITE_API_URL; // Using .env variable
 
 const Login = () => {
+  const { t } = useTranslation(); // for multilinguality
   const [showPassword, setShowPassword] = useState(false);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -28,7 +30,7 @@ const Login = () => {
     setLoading(true);
 
     // Show loading toast
-    const toastId = toast.loading("Logging in...");
+    const toastId = toast.loading(t("logging_in_toast"));
 
     try {
       const response = await fetch(`${API_URL}/api/login`, {
@@ -61,18 +63,17 @@ const Login = () => {
           });
 
         // Show success toast
-        toast.success("Login successful!");
+        toast.success(t("login_successful"));
-
         // Redirect to Dashboard
         navigate("/dashboard");
       } else {
         // Show error toast if login fails
-        toast.error(data.message || "Login failed.");
+        toast.error(data.message || t("login_failed"));
       }
     } catch (error) {
       // Dismiss the loading toast and show error
       toast.dismiss(toastId);
-      toast.error("An error occurred. Please try again.", error);
+      toast.error(t("an_error_occurred"));
     } finally {
       setLoading(false);
     }
@@ -82,7 +83,7 @@ const Login = () => {
     <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
       <div className="w-full max-w-md bg-white rounded-4xl shadow-lg p-8">
         <h1 className="text-2xl font-bold mb-6 text-gray-900 text-center">
-          Log in
+          {t("login_title")}
         </h1>
 
         <form onSubmit={handleSubmit}>
@@ -91,7 +92,7 @@ const Login = () => {
               <input
                 type="email"
                 id="email"
-                placeholder="Enter your email"
+                placeholder={t("email_placeholder")}
                 className="w-full border border-gray-300 rounded-l-lg px-4 py-4 focus:outline-none focus:border-blue-500"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
@@ -104,7 +105,7 @@ const Login = () => {
               <input
                 type={showPassword ? "text" : "password"}
                 id="password"
-                placeholder="Enter your password"
+                placeholder={t("password_placeholder")}
                 className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:border-blue-500 pr-10"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
@@ -124,7 +125,7 @@ const Login = () => {
               to="#!"
               className="text-sm text-blue-600 hover:underline inline-block"
             >
-              Forgot password?
+              {t("forgot_password")}
             </Link>
           </div>
           <button
@@ -132,17 +133,17 @@ const Login = () => {
             disabled={loading}
             className="w-full py-3 bg-gradient-to-r from-[#1877F2] to-[#0E458C] hover:from-[#0E458C] hover:to-[#1877F2] text-white font-semibold rounded-full shadow-md transition duration-300"
           >
-            {loading ? "Logging In..." : "Login"}
+            {loading ? t("logging_in") : t("login")}
           </button>
         </form>
         <div className="text-center mt-6">
           <p className="text-gray-700">
-            Don’t have an account?{" "}
+            {t("dont_have_account")}{" "}
             <Link
               to="/signup"
               className="text-emerald-500 hover:underline font-medium"
             >
-              Sign up
+              {t("sign_up")}
             </Link>
           </p>
         </div>

Frontend/src/pages/Authentication/SignUp.jsx

@@ -2,10 +2,12 @@ import { useState } from "react";
 import { FiEye, FiEyeOff } from "react-icons/fi";
 import { Link, useNavigate } from "react-router-dom";
 import toast, { Toaster } from "react-hot-toast";
+import { useTranslation } from "react-i18next"; // for multilinguality
 
 const API_URL = import.meta.env.VITE_API_URL;
 
 const SignUp = () => {
+  const { t } = useTranslation(); // for multilinguality
   const navigate = useNavigate();
 
   const [formData, setFormData] = useState({
@@ -30,12 +32,12 @@ const SignUp = () => {
     e.preventDefault();
 
     if (formData.password !== formData.confirmPassword) {
-      toast.error("Passwords do not match.");
+      toast.error(t("passwords_do_not_match"));
       return;
     }
 
     setLoading(true);
-    const toastId = toast.loading("Registering...");
+    const toastId = toast.loading(t("registering"));
 
     try {
       // 1️⃣ Sign up the user
@@ -52,7 +54,7 @@ const SignUp = () => {
       const signupData = await signupRes.json();
 
       if (!signupRes.ok) {
-        toast.error(signupData.message || "Signup failed.", { id: toastId });
+        toast.error(signupData.message || t("signup_failed"), { id: toastId });
         return;
       }
 
@@ -66,11 +68,9 @@ const SignUp = () => {
 
       if (!folderRes.ok) {
         // you might choose to roll back user creation or just notify
-        toast.error("Failed to create user folder.", { id: toastId });
+        toast.error(t("failed_create_folder"), { id: toastId });
       } else {
-        toast.success("Successfully registered and folder created!", {
+        toast.success(t("signup_success"), { id: toastId });
-          id: toastId,
-        });
       }
 
       // 3️⃣ Redirect to login after a short delay
@@ -79,7 +79,7 @@ const SignUp = () => {
       }, 1500);
     } catch (error) {
       console.error(error);
-      toast.error("An error occurred. Please try again.", { id: toastId });
+      toast.error(t("an_error_occurred"), { id: toastId });
     } finally {
       setLoading(false);
     }
@@ -89,12 +89,12 @@ const SignUp = () => {
     <div className="min-h-screen bg-gray-100 flex items-center justify-center p-6">
       <Toaster position="top-right" />
       <div className="w-full max-w-md bg-white rounded-2xl shadow-lg p-8">
-        <h1 className="text-2xl font-bold text-gray-900 mb-6">Sign Up</h1>
+        <h1 className="text-2xl font-bold text-gray-900 mb-6">{t("sign_up")}</h1>
         <form className="space-y-4" onSubmit={handleSubmit}>
           <input
             type="text"
             name="firstname"
-            placeholder="First Name"
+            placeholder={t("first_name")}
             value={formData.firstname}
             onChange={handleChange}
             className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -103,7 +103,7 @@ const SignUp = () => {
           <input
             type="text"
             name="lastname"
-            placeholder="Last Name"
+            placeholder={t("last_name")}
             value={formData.lastname}
             onChange={handleChange}
             className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -112,7 +112,7 @@ const SignUp = () => {
           <input
             type="email"
             name="email"
-            placeholder="Enter your email"
+            placeholder={t("email_placeholder")}
             value={formData.email}
             onChange={handleChange}
             className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -124,7 +124,7 @@ const SignUp = () => {
             <input
               type={showPassword ? "text" : "password"}
               name="password"
-              placeholder="Enter your password"
+              placeholder={t("password_placeholder")}
               value={formData.password}
               onChange={handleChange}
               className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10"
@@ -144,7 +144,7 @@ const SignUp = () => {
             <input
               type={showConfirmPassword ? "text" : "password"}
               name="confirmPassword"
-              placeholder="Confirm your password"
+              placeholder={t("confirm_password_placeholder")}
               value={formData.confirmPassword}
               onChange={handleChange}
               className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10"
@@ -169,18 +169,18 @@ const SignUp = () => {
                 : "bg-gradient-to-r from-[#10B981] to-[#07533A] hover:from-[#0E458C] hover:to-[#1877F2]"
             } text-white font-semibold rounded-lg shadow-md transition duration-300`}
           >
-            {loading ? "Signing Up..." : "Sign Up"}
+            {loading ? t("signing_up") : t("sign_up")}
           </button>
         </form>
 
         {/* Redirect to Login */}
         <p className="text-center mt-4 text-gray-700">
-          Already have an account?{" "}
+          {t("already_have_account")}{" "}
           <Link
             to="/login"
             className="text-blue-500 hover:underline font-medium"
           >
-            Login
+            {t("login")}
           </Link>
         </p>
       </div>