notkshitij/Skycrate
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Performed translation for Authentication in src/pages/

Browse Source 
- Login.jsx
- SignUp.jsx

Also, added key:value pairs (English + French for now) for all the text in src/locales.
This commit is contained in:
K
2025-06-26 23:29:24 +05:30
parent 41435aa4fc
commit 2cce8d89ca
4 changed files with 91 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/src/pages/Authentication/Login.jsx
+13 -12
View File
@@ -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
+17 -17
View File
@@ -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!", {
id: toastId,
});
toast.success(t("signup_success"), { 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>