notkshitij/CropCompass
1
1
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Activity

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

Browse Source
This commit is contained in:
K
2025-06-20 23:24:53 +05:30
parent 911b08ba71
commit 9e170a91ef
3 changed files with 68 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/src/locales/en.json
+18
View File
@@ -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
+18
View File
@@ -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
+32 -56
View File
@@ -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 ?{" "}
<Link
to={"/user/login"}
className="text-blue-600 hover:underline"
>
Login
{t("signup_already_have_account", language)}{" "}
<Link to={"/user/login"} className="text-blue-600 hover:underline">
{t("signup_login", language)}
</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">
Start your Journey
<h1 className="text-6xl font-bold text-white mb-4 md:text-6xl lg:text-9xl ml-8">
{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>
);