Add initial project configuration files and PasswordForDownload component for secure file access

.idea/Skycrate.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Skycrate.iml" filepath="$PROJECT_DIR$/.idea/Skycrate.iml" />
+    </modules>
+  </component>
+</project>

.idea/workspace.xml

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="84d52a67-ccf5-4630-9c18-40f188300c16" name="Changes" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="ProjectColorInfo"><![CDATA[{
+  "customColor": "",
+  "associatedIndex": 6
+}]]></component>
+  <component name="ProjectId" id="30mRMsttilCy5M4kqMOoyd9XSWz" />
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "kotlin-language-version-configured": "true"
+  }
+}]]></component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="84d52a67-ccf5-4630-9c18-40f188300c16" name="Changes" comment="" />
+      <created>1754230731355</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1754230731355</updated>
+    </task>
+    <servers />
+  </component>
+</project>

Frontend/src/components/FileList.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { useDispatch, useSelector } from "react-redux";
 import { setCurrentPath } from "../store/pathSlice";
+import PasswordForDownload from "./PasswordForDownload";
 import {
   FileText,
   FileVideo,
@@ -20,16 +21,16 @@ import {
 
 const API_URL = import.meta.env.VITE_API_URL;
 
-const FileTable = ({ initialPath }) => {
+const FileList = ({ initialPath }) => {
-  // Read username dynamically to avoid stale null on first load
   const username = localStorage.getItem("username") || "";
   const userRoot = `/${username}`;
 
-  // Initialize currentPath only once with the correct userRoot
   const [currentPath, setCurrentPathState] = useState(
     () => initialPath || userRoot
   );
   const [files, setFiles] = useState([]);
+  const [showDownloadModal, setShowDownloadModal] = useState(false);
+  const [downloadFilename, setDownloadFilename] = useState("");
   const dispatch = useDispatch();
   const isUploading = useSelector((state) => state.upload.isUploading);
 
@@ -41,7 +42,6 @@ const FileTable = ({ initialPath }) => {
   const getIcon = (name, type) => {
     if (type === "Folder")
       return <Folder className="text-yellow-500 w-5 h-5 mr-2" />;
-
     const ext = name.split(".").pop().toLowerCase();
     switch (ext) {
       case "txt":
@@ -111,7 +111,6 @@ const FileTable = ({ initialPath }) => {
           : `${API_URL}/api/hdfs/deleteFolder?hdfsPath=${encodeURIComponent(
               hdfsPath
             )}`;
-
       const resp = await fetch(endpoint, { method: "DELETE" });
       if (!resp.ok) console.error("Deletion failed:", await resp.text());
       fetchFiles();
@@ -136,38 +135,15 @@ const FileTable = ({ initialPath }) => {
     setCurrentPathState(parts.length === 0 ? userRoot : `/${parts.join("/")}`);
   };
 
-  const handleFileDownload = async (hdfsPath, name, event) => {
+  // open modal instead of direct download
-    event.stopPropagation();
+  const openDownloadModal = (name, e) => {
-    try {
+    e.stopPropagation();
-      const authToken = localStorage.getItem("token");
+    setDownloadFilename(name);
-      const response = await fetch(
+    setShowDownloadModal(true);
-        `${API_URL}/api/hdfs/downloadFile?hdfsEncPath=${encodeURIComponent(
-          hdfsPath
-        )}&localPath=${name}&username=${username}`,
-        {
-          method: "POST",
-          headers: { Authorization: `Bearer ${authToken}` },
-        }
-      );
-
-      if (!response.ok) throw new Error(await response.text());
-      const blob = await response.blob();
-      const url = window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = name;
-      document.body.appendChild(link);
-      link.click();
-      link.remove();
-      window.URL.revokeObjectURL(url);
-      fetchFiles();
-    } catch (error) {
-      console.error("Download failed:", error);
-      alert("Something went wrong while downloading the file.");
-    }
   };
 
   return (
+    <>
       <div className="relative overflow-x-auto rounded-2xl shadow-lg border border-blue-200">
         <div className="flex items-center justify-between px-6 py-4 bg-blue-100 text-black font-semibold text-sm">
           <span className="truncate max-w-[80%]">Path: {currentPath}</span>
@@ -200,13 +176,14 @@ const FileTable = ({ initialPath }) => {
               files.map((entry, idx) => {
                 const name = getName(entry);
                 const type = getType(entry);
-              const hdfsPath = `${currentPath}/${name}`;
+                // const hdfsPath = `${currentPath}/${name}`;
-
                 return (
                   <tr
                     key={idx}
                     onClick={
-                    type === "Folder" ? () => handleOpenFolder(name) : undefined
+                      type === "Folder"
+                        ? () => handleOpenFolder(name)
+                        : undefined
                     }
                     className={`even:bg-blue-50 odd:bg-white border-b border-blue-100 transition hover:bg-blue-100 ${
                       type === "Folder" ? "cursor-pointer" : ""
@@ -219,7 +196,7 @@ const FileTable = ({ initialPath }) => {
                     <td className="px-6 py-4 space-x-3">
                       {isFile(entry) && (
                         <button
-                        onClick={(e) => handleFileDownload(hdfsPath, name, e)}
+                          onClick={(e) => openDownloadModal(name, e)}
                           className="text-blue-600 hover:underline inline-flex items-center"
                         >
                           <Download className="w-4 h-4 mr-1" />
@@ -241,11 +218,20 @@ const FileTable = ({ initialPath }) => {
           </tbody>
         </table>
       </div>
+
+      {showDownloadModal && (
+        <PasswordForDownload
+          filename={downloadFilename}
+          onDownload={fetchFiles}
+          onClose={() => setShowDownloadModal(false)}
+        />
+      )}
+    </>
   );
 };
 
-FileTable.propTypes = {
+FileList.propTypes = {
   initialPath: PropTypes.string,
 };
 
-export default FileTable;
+export default FileList;

Frontend/src/components/FileUploadModal.jsx

@@ -43,10 +43,14 @@ const FileUploadModal = ({ show, onClose, onUploadSuccess }) => {
     try {
       setUploading(true);
       setUploadMessage("⏳ Uploading file...");
-      const response = await fetch(`${API_URL}/api/hdfs/uploadFile`, {
+      const response = await fetch(`${API_URL}/api/files/upload`, {
         method: "POST",
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
         body: formData,
       });
+
       if (!response.ok) {
         const errorText = await response.text();
         setUploadMessage(`❌ Upload failed: ${errorText}`);

Frontend/src/components/PasswordForDownload.jsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+
+const API_URL = import.meta.env.VITE_API_URL;
+
+const PasswordForDownload = ({ filename, onDownload, onClose }) => {
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleDownload = async () => {
+    if (!password) {
+      setError("Password is required");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      const response = await fetch(`${API_URL}/api/files/download`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+        body: JSON.stringify({ filename, password }),
+      });
+
+      if (!response.ok) {
+        const msg = await response.text();
+        throw new Error(msg);
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      window.URL.revokeObjectURL(url);
+
+      onDownload();
+      onClose();
+    } catch (err) {
+      console.error(err);
+      setError(`Download failed: ${err.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+      <div className="bg-white p-6 rounded-lg w-80">
+        <h3 className="text-lg font-semibold mb-4">Enter Password</h3>
+        <input
+          type="password"
+          className="w-full border border-gray-300 rounded px-3 py-2 mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        {error && <p className="text-red-500 text-sm mb-2">{error}</p>}
+        <div className="flex justify-end space-x-2">
+          <button
+            onClick={onClose}
+            disabled={loading}
+            className="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleDownload}
+            disabled={loading}
+            className={`px-4 py-2 text-white rounded ${
+              loading ? "bg-gray-400" : "bg-blue-600 hover:bg-blue-700"
+            }`}
+          >
+            {loading ? "Downloading..." : "Download"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+PasswordForDownload.propTypes = {
+  filename: PropTypes.string.isRequired,
+  onDownload: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default PasswordForDownload;

Frontend/src/pages/Authentication/Login.jsx

@@ -1,78 +1,76 @@
 import { useState, useEffect } 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 from "react-hot-toast"; // Import React Hot Toast
+import toast, { Toaster } 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("");
-  const [loading, setLoading] = useState(false);
   const navigate = useNavigate(); // For navigation
 
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState({});
+
+  // Redirect if already logged in
   useEffect(() => {
-    // Check if token is present in localStorage and redirect to Dashboard
     if (localStorage.getItem("token")) {
-      navigate("/dashboard"); // Redirect to Dashboard
+      navigate("/dashboard");
     }
   }, [navigate]);
 
-  const togglePassword = () => {
+  const togglePassword = () => setShowPassword((prev) => !prev);
-    setShowPassword(!showPassword);
+
+  const validate = () => {
+    const errs = {};
+    if (!email.trim()) errs.email = t("email_required");
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
+      errs.email = t("invalid_email");
+    if (!password) errs.password = t("password_required");
+    return errs;
   };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    setLoading(true);
+    const validation = validate();
+    if (Object.keys(validation).length) {
+      setErrors(validation);
+      return;
+    }
 
-    // Show loading toast
+    setLoading(true);
     const toastId = toast.loading(t("logging_in_toast"));
 
     try {
-      const response = await fetch(`${API_URL}/api/login`, {
+      const response = await fetch(`${API_URL}/api/auth/login`, {
         method: "POST",
-        headers: {
+        headers: { "Content-Type": "application/json" },
-          "Content-Type": "application/json",
+        body: JSON.stringify({ email, password }),
-        },
-        body: JSON.stringify({
-          email,
-          password,
-        }),
       });
-
       const data = await response.json();
-
-      // Dismiss the loading toast after the response
       toast.dismiss(toastId);
 
       if (response.ok) {
-        // On success, store the token in localStorage
         localStorage.setItem("token", data.token);
         localStorage.setItem("expiresIn", data.expiresIn);
+        // fetch username asynchronously
         fetch(`${API_URL}/api/hdfs/getUsernameByEmail?email=${email}`)
-          .then((response) => response.text())
+          .then((res) => res.text())
-          .then((username) => {
+          .then((username) => localStorage.setItem("username", username))
-            localStorage.setItem("username", username);
+          .catch((err) => console.error("Error fetching username:", err));
-          })
-          .catch((error) => {
-            console.error("Error fetching username:", error);
-          });
 
-        // Show success toast
         toast.success(t("login_successful"));
-        // Redirect to Dashboard
         navigate("/dashboard");
       } else {
-        // Show error toast if login fails
         toast.error(data.message || t("login_failed"));
       }
     } catch (error) {
-      // Dismiss the loading toast and show error
       toast.dismiss(toastId);
+      console.error(error);
       toast.error(t("an_error_occurred"));
     } finally {
       setLoading(false);
@@ -80,75 +78,109 @@ const Login = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
-      <div className="w-full max-w-md bg-white rounded-4xl shadow-lg p-8">
+      <Toaster position="top-right" />
-        <h1 className="text-2xl font-bold mb-6 text-gray-900 text-center">
+      <div className="w-full max-w-sm bg-white rounded-2xl shadow-lg p-8">
+        <h1 className="text-2xl font-bold text-gray-800 mb-6 text-center">
           {t("login_title")}
         </h1>
-
+        <form onSubmit={handleSubmit} noValidate className="space-y-5">
-        <form onSubmit={handleSubmit}>
+          {/* Email Field */}
-          <div className="mb-4">
+          <div>
-            <div className="flex items-center">
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              {t("email_placeholder")}
+            </label>
             <input
               type="email"
               id="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)}
+              onChange={(e) => {
+                setEmail(e.target.value);
+                setErrors((prev) => ({ ...prev, email: undefined }));
+              }}
+              className={`w-full border ${
+                errors.email ? "border-red-500" : "border-gray-300"
+              } rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500`}
+              placeholder={t("email_placeholder")}
               required
             />
+            {errors.email && (
+              <p className="text-red-500 text-xs mt-1">{errors.email}</p>
+            )}
           </div>
-          </div>
+
-          <div className="mb-1">
+          {/* Password Field */}
           <div className="relative">
+            <label
+              htmlFor="password"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              {t("password_placeholder")}
+            </label>
             <input
               type={showPassword ? "text" : "password"}
               id="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)}
+              onChange={(e) => {
+                setPassword(e.target.value);
+                setErrors((prev) => ({ ...prev, password: undefined }));
+              }}
+              className={`w-full border ${
+                errors.password ? "border-red-500" : "border-gray-300"
+              } rounded-lg px-4 py-2 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500`}
+              placeholder={t("password_placeholder")}
               required
             />
             <button
               type="button"
               onClick={togglePassword}
-                className="absolute right-2 top-4 text-2xl text-gray-500 hover:text-gray-700"
+              className="absolute right-3 top-8 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>
-          </div>
+
-          <div className="mb-6 ">
+          {/* Forgot & Submit */}
-            <Link
+          <div className="flex items-center justify-between">
-              to="#!"
+            <Link to="#!" className="text-sm text-blue-600 hover:underline">
-              className="text-sm text-blue-600 hover:underline inline-block"
-            >
               {t("forgot_password")}
             </Link>
           </div>
+
           <button
             type="submit"
             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"
+            className={`w-full flex justify-center items-center py-3 ${
+              loading
+                ? "bg-gray-400 cursor-not-allowed"
+                : "bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900"
+            } text-white font-semibold rounded-lg shadow-md transition duration-300`}
           >
-            {loading ? t("logging_in") : t("login")}
+            {loading ? (
+              <FiLoader className="animate-spin text-lg" />
+            ) : (
+              t("login")
+            )}
           </button>
         </form>
-        <div className="text-center mt-6">
+
-          <p className="text-gray-700">
+        <p className="text-center mt-6 text-gray-600">
           {t("dont_have_account")}{" "}
           <Link
             to="/signup"
-              className="text-emerald-500 hover:underline font-medium"
+            className="text-green-600 hover:underline font-medium"
           >
             {t("sign_up")}
           </Link>
         </p>
       </div>
     </div>
-    </div>
   );
 };
 

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")}
+        </h1>
+        <form className="space-y-4" onSubmit={handleSubmit} noValidate>
+          {/* Name Fields */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                {t("first_name")}
+              </label>
               <input
                 type="text"
                 name="firstname"
-            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"
+                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>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                {t("last_name")}
+              </label>
               <input
                 type="text"
                 name="lastname"
-            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"
+                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"
-            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"
+              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