Replaced static text in LoginPage.jsx with translation function t(key, language).
This commit is contained in:
@@ -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("/");
|
||||
}
|
||||
};
|
||||
@@ -41,48 +46,48 @@ const LoginPage = () => {
|
||||
return (
|
||||
<section className="bg-[url(/images/loginBG.png)] bg-cover font-sans flex flex-col justify-center md:p-5 w-full min-h-screen max-h-screen">
|
||||
<div className="flex justify-between items-center h-full">
|
||||
<div className=" rounded-lg shadow-md ">
|
||||
<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!
|
||||
<h1 className="text-6xl font-bold text-white mb-4 md:text-6xl lg:text-9xl ml-8">
|
||||
{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>
|
||||
<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">
|
||||
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,34 +100,34 @@ 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">
|
||||
<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"
|
||||
>
|
||||
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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user