Enhance SignUp component with username field, validation, and loading state

Frontend/src/pages/Authentication/SignUp.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { FiEye, FiEyeOff } from "react-icons/fi";
+import { FiEye, FiEyeOff, FiLoader } 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
@@ -7,12 +7,13 @@ import { useTranslation } from "react-i18next"; // for multilinguality
 const API_URL = import.meta.env.VITE_API_URL;
 
 const SignUp = () => {
-  const { t } = useTranslation(); // for multilinguality
+  const { t } = useTranslation();
   const navigate = useNavigate();
 
   const [formData, setFormData] = useState({
     firstname: "",
     lastname: "",
+    username: "",
     email: "",
     password: "",
     confirmPassword: "",
@@ -20,19 +21,30 @@ const SignUp = () => {
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState({});
+
+  const validate = () => {
+    const errs = {};
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email))
+      errs.email = t("invalid_email");
+    if (formData.password.length < 8) errs.password = t("password_too_short");
+    if (formData.password !== formData.confirmPassword)
+      errs.confirmPassword = t("passwords_do_not_match");
+    if (formData.username.length < 3) errs.username = t("username_too_short");
+    return errs;
+  };
 
   const handleChange = (e) => {
-    setFormData((prev) => ({
+    const { name, value } = e.target;
-      ...prev,
+    setFormData((prev) => ({ ...prev, [name]: value }));
-      [e.target.name]: e.target.value,
+    setErrors((prev) => ({ ...prev, [name]: undefined }));
-    }));
   };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-
+    const validation = validate();
-    if (formData.password !== formData.confirmPassword) {
+    if (Object.keys(validation).length) {
-      toast.error(t("passwords_do_not_match"));
+      setErrors(validation);
       return;
     }
 
@@ -40,8 +52,7 @@ const SignUp = () => {
     const toastId = toast.loading(t("registering"));
 
     try {
-      // 1️⃣ Sign up the user
+      const signupRes = await fetch(`${API_URL}/api/auth/register`, {
-      const signupRes = await fetch(`${API_URL}/api/signup`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -49,6 +60,8 @@ const SignUp = () => {
           lastname: formData.lastname,
           email: formData.email,
           password: formData.password,
+          username: formData.username,
+          fullname: `${formData.firstname} ${formData.lastname}`,
         }),
       });
       const signupData = await signupRes.json();
@@ -58,25 +71,18 @@ const SignUp = () => {
         return;
       }
 
-      // 2️⃣ Build username and create HDFS folder
-      const username =
-        `${formData.firstname}${formData.lastname}`.toLowerCase();
       const folderRes = await fetch(
-        `${API_URL}/api/hdfs/createFolder?hdfsPath=/${username}`,
+        `${API_URL}/api/hdfs/createFolder?hdfsPath=/${formData.username}`,
         { method: "POST" }
       );
 
       if (!folderRes.ok) {
-        // you might choose to roll back user creation or just notify
         toast.error(t("failed_create_folder"), { id: toastId });
       } else {
         toast.success(t("signup_success"), { id: toastId });
       }
 
-      // 3️⃣ Redirect to login after a short delay
+      setTimeout(() => navigate("/login"), 1500);
-      setTimeout(() => {
-        navigate("/login");
-      }, 1500);
     } catch (error) {
       console.error(error);
       toast.error(t("an_error_occurred"), { id: toastId });
@@ -89,91 +95,147 @@ 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">{t("sign_up")}</h1>
+        <h1 className="text-2xl font-bold text-gray-900 mb-6">
-        <form className="space-y-4" onSubmit={handleSubmit}>
+          {t("sign_up")}
-          <input
+        </h1>
-            type="text"
+        <form className="space-y-4" onSubmit={handleSubmit} noValidate>
-            name="firstname"
+          {/* Name Fields */}
-            placeholder={t("first_name")}
+          <div className="grid grid-cols-2 gap-4">
-            value={formData.firstname}
+            <div>
-            onChange={handleChange}
+              <label className="block text-sm font-medium text-gray-700 mb-1">
-            className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                {t("first_name")}
-            required
+              </label>
-          />
+              <input
-          <input
+                type="text"
-            type="text"
+                name="firstname"
-            name="lastname"
+                value={formData.firstname}
-            placeholder={t("last_name")}
+                onChange={handleChange}
-            value={formData.lastname}
+                className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            onChange={handleChange}
+                required
-            className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
-            required
+            </div>
-          />
+            <div>
-          <input
+              <label className="block text-sm font-medium text-gray-700 mb-1">
-            type="email"
+                {t("last_name")}
-            name="email"
+              </label>
-            placeholder={t("email_placeholder")}
+              <input
-            value={formData.email}
+                type="text"
-            onChange={handleChange}
+                name="lastname"
-            className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                value={formData.lastname}
-            required
+                onChange={handleChange}
-          />
+                className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+              />
+            </div>
+          </div>
+
+          {/* Username Field */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              {t("username")}
+            </label>
+            <input
+              type="text"
+              name="username"
+              placeholder={t("Enter your username")}
+              value={formData.username}
+              onChange={handleChange}
+              className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              required
+            />
+            {errors.username && (
+              <p className="text-red-500 text-xs mt-1">{errors.username}</p>
+            )}
+          </div>
+
+          {/* Email Field */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              {t("email_placeholder")}
+            </label>
+            <input
+              type="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              required
+            />
+            {errors.email && (
+              <p className="text-red-500 text-xs mt-1">{errors.email}</p>
+            )}
+          </div>
 
           {/* Password Field */}
           <div className="relative">
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              {t("password_placeholder")}
+            </label>
             <input
               type={showPassword ? "text" : "password"}
               name="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"
+              className="w-full border border-gray-300 rounded-lg px-4 py-2 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500"
               required
             />
             <button
               type="button"
               onClick={() => setShowPassword((v) => !v)}
-              className="absolute right-3 top-4 text-2xl text-gray-500 hover:text-gray-700"
+              className="absolute right-3 top-9 text-xl text-gray-500 hover:text-gray-700"
             >
               {showPassword ? <FiEyeOff /> : <FiEye />}
             </button>
+            {errors.password && (
+              <p className="text-red-500 text-xs mt-1">{errors.password}</p>
+            )}
           </div>
 
           {/* Confirm Password Field */}
           <div className="relative">
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              {t("confirm_password_placeholder")}
+            </label>
             <input
               type={showConfirmPassword ? "text" : "password"}
               name="confirmPassword"
-              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"
+              className="w-full border border-gray-300 rounded-lg px-4 py-2 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500"
               required
             />
             <button
               type="button"
               onClick={() => setShowConfirmPassword((v) => !v)}
-              className="absolute right-3 top-4 text-2xl text-gray-500 hover:text-gray-700"
+              className="absolute right-3 top-9 text-xl text-gray-500 hover:text-gray-700"
             >
               {showConfirmPassword ? <FiEyeOff /> : <FiEye />}
             </button>
+            {errors.confirmPassword && (
+              <p className="text-red-500 text-xs mt-1">
+                {errors.confirmPassword}
+              </p>
+            )}
           </div>
 
           {/* Sign Up Button */}
           <button
             type="submit"
             disabled={loading}
-            className={`w-full mt-4 py-3 ${
+            className={`w-full mt-4 py-3 flex justify-center items-center ${
               loading
                 ? "bg-gray-400 cursor-not-allowed"
                 : "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 ? t("signing_up") : t("sign_up")}
+            {loading ? (
+              <FiLoader className="animate-spin text-xl" />
+            ) : (
+              t("sign_up")
+            )}
           </button>
         </form>
 
-        {/* Redirect to Login */}
         <p className="text-center mt-4 text-gray-700">
           {t("already_have_account")}{" "}
           <Link