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/.env

@@ -1 +1 @@
-VITE_API_URL=http://localhost:8080
+VITE_API_URL=http://localhost:8081

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 }) => {
-  // Read username dynamically to avoid stale null on first load
+const FileList = ({ initialPath }) => {
   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,116 +135,103 @@ const FileTable = ({ initialPath }) => {
     setCurrentPathState(parts.length === 0 ? userRoot : `/${parts.join("/")}`);
   };
 
-  const handleFileDownload = async (hdfsPath, name, event) => {
-    event.stopPropagation();
-    try {
-      const authToken = localStorage.getItem("token");
-      const response = await fetch(
-        `${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.");
-    }
+  // open modal instead of direct download
+  const openDownloadModal = (name, e) => {
+    e.stopPropagation();
+    setDownloadFilename(name);
+    setShowDownloadModal(true);
   };
 
   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>
-        {currentPath !== userRoot && (
-          <button
-            onClick={goBack}
-            className="flex items-center gap-1 text-blue-600 hover:underline text-sm"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            Go Back
-          </button>
-        )}
+    <>
+      <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>
+          {currentPath !== userRoot && (
+            <button
+              onClick={goBack}
+              className="flex items-center gap-1 text-blue-600 hover:underline text-sm"
+            >
+              <ArrowLeft className="w-4 h-4" />
+              Go Back
+            </button>
+          )}
+        </div>
+
+        <table className="w-full text-sm text-left text-black">
+          <thead className="text-xs uppercase bg-blue-50 text-blue-800 border-b border-blue-200">
+            <tr>
+              <th className="px-6 py-3">Name</th>
+              <th className="px-6 py-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {files.length === 0 ? (
+              <tr>
+                <td colSpan="2" className="px-6 py-4 text-gray-500 text-center">
+                  No files found.
+                </td>
+              </tr>
+            ) : (
+              files.map((entry, idx) => {
+                const name = getName(entry);
+                const type = getType(entry);
+                // const hdfsPath = `${currentPath}/${name}`;
+                return (
+                  <tr
+                    key={idx}
+                    onClick={
+                      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" : ""
+                    }`}
+                  >
+                    <td className="px-6 py-4 font-medium flex items-center">
+                      {getIcon(name, type)}
+                      {name}
+                    </td>
+                    <td className="px-6 py-4 space-x-3">
+                      {isFile(entry) && (
+                        <button
+                          onClick={(e) => openDownloadModal(name, e)}
+                          className="text-blue-600 hover:underline inline-flex items-center"
+                        >
+                          <Download className="w-4 h-4 mr-1" />
+                          Download
+                        </button>
+                      )}
+                      <button
+                        onClick={(e) => deleteFileOrFolder(name, type, e)}
+                        className="text-red-600 hover:underline inline-flex items-center"
+                      >
+                        <Trash2 className="w-4 h-4 mr-1" />
+                        Delete
+                      </button>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
       </div>
 
-      <table className="w-full text-sm text-left text-black">
-        <thead className="text-xs uppercase bg-blue-50 text-blue-800 border-b border-blue-200">
-          <tr>
-            <th className="px-6 py-3">Name</th>
-            <th className="px-6 py-3">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {files.length === 0 ? (
-            <tr>
-              <td colSpan="2" className="px-6 py-4 text-gray-500 text-center">
-                No files found.
-              </td>
-            </tr>
-          ) : (
-            files.map((entry, idx) => {
-              const name = getName(entry);
-              const type = getType(entry);
-              const hdfsPath = `${currentPath}/${name}`;
-
-              return (
-                <tr
-                  key={idx}
-                  onClick={
-                    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" : ""
-                  }`}
-                >
-                  <td className="px-6 py-4 font-medium flex items-center">
-                    {getIcon(name, type)}
-                    {name}
-                  </td>
-                  <td className="px-6 py-4 space-x-3">
-                    {isFile(entry) && (
-                      <button
-                        onClick={(e) => handleFileDownload(hdfsPath, name, e)}
-                        className="text-blue-600 hover:underline inline-flex items-center"
-                      >
-                        <Download className="w-4 h-4 mr-1" />
-                        Download
-                      </button>
-                    )}
-                    <button
-                      onClick={(e) => deleteFileOrFolder(name, type, e)}
-                      className="text-red-600 hover:underline inline-flex items-center"
-                    >
-                      <Trash2 className="w-4 h-4 mr-1" />
-                      Delete
-                    </button>
-                  </td>
-                </tr>
-              );
-            })
-          )}
-        </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 = () => {
-    setShowPassword(!showPassword);
+  const togglePassword = () => setShowPassword((prev) => !prev);
+
+  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: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          email,
-          password,
-        }),
+        headers: { "Content-Type": "application/json" },
+        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((username) => {
-            localStorage.setItem("username", username);
-          })
-          .catch((error) => {
-            console.error("Error fetching username:", error);
-          });
+          .then((res) => res.text())
+          .then((username) => localStorage.setItem("username", username))
+          .catch((err) => console.error("Error fetching username:", err));
 
-        // 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,73 +78,107 @@ const Login = () => {
   };
 
   return (
-    <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">
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+      <Toaster position="top-right" />
+      <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}>
-          <div className="mb-4">
-            <div className="flex items-center">
-              <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)}
-                required
-              />
-            </div>
-          </div>
-          <div className="mb-1">
-            <div className="relative">
-              <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)}
-                required
-              />
-              <button
-                type="button"
-                onClick={togglePassword}
-                className="absolute right-2 top-4 text-2xl text-gray-500 hover:text-gray-700"
-              >
-                {showPassword ? <FiEyeOff /> : <FiEye />}
-              </button>
-            </div>
-          </div>
-          <div className="mb-6 ">
-            <Link
-              to="#!"
-              className="text-sm text-blue-600 hover:underline inline-block"
+        <form onSubmit={handleSubmit} noValidate className="space-y-5">
+          {/* Email Field */}
+          <div>
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 mb-1"
             >
+              {t("email_placeholder")}
+            </label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              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>
+
+          {/* 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"
+              value={password}
+              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-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>
+
+          {/* Forgot & Submit */}
+          <div className="flex items-center justify-between">
+            <Link to="#!" className="text-sm text-blue-600 hover:underline">
               {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">
-            {t("dont_have_account")}{" "}
-            <Link
-              to="/signup"
-              className="text-emerald-500 hover:underline font-medium"
-            >
-              {t("sign_up")}
-            </Link>
-          </p>
-        </div>
+
+        <p className="text-center mt-6 text-gray-600">
+          {t("dont_have_account")}{" "}
+          <Link
+            to="/signup"
+            className="text-green-600 hover:underline font-medium"
+          >
+            {t("sign_up")}
+          </Link>
+        </p>
       </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) => ({
-      ...prev,
-      [e.target.name]: e.target.value,
-    }));
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    setErrors((prev) => ({ ...prev, [name]: undefined }));
   };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-
-    if (formData.password !== formData.confirmPassword) {
-      toast.error(t("passwords_do_not_match"));
+    const validation = validate();
+    if (Object.keys(validation).length) {
+      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/signup`, {
+      const signupRes = await fetch(`${API_URL}/api/auth/register`, {
         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>
-        <form className="space-y-4" onSubmit={handleSubmit}>
-          <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"
-            required
-          />
-          <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"
-            required
-          />
-          <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"
-            required
-          />
+        <h1 className="text-2xl font-bold text-gray-900 mb-6">
+          {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"
+                value={formData.firstname}
+                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>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                {t("last_name")}
+              </label>
+              <input
+                type="text"
+                name="lastname"
+                value={formData.lastname}
+                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

docker-compose.yaml

@@ -8,7 +8,7 @@ services:
       #- "9000:9000" # Hadoop; No need to expose since backend will access internally
     user: "hdoop:hdoop"  
     security_opt:
-      - no-new-privileges=true
+      - no-new-privileges:true
     networks:
       - skycrate-internal
     volumes:
@@ -24,7 +24,7 @@ services:
     restart: on-failure:5
     user: "hdoop:hdoop"  
     security_opt:
-      - no-new-privileges=true
+      - no-new-privileges:true
     networks:
       - skycrate-internal
     volumes:
@@ -42,7 +42,7 @@ services:
     restart: on-failure:10
     user: "hdoop:hdoop"  
     security_opt:
-      - no-new-privileges=true
+      - no-new-privileges:true
     networks:
       - skycrate-internal
     environment:
@@ -58,7 +58,7 @@ services:
     restart: on-failure:5
     user: "hdoop:hdoop"  
     security_opt:
-      - no-new-privileges=true
+      - no-new-privileges:true
     networks:
       - skycrate-internal
     environment:
@@ -74,7 +74,7 @@ services:
     restart: on-failure:5
     user: "hdoop:hdoop"  
     security_opt:
-      - no-new-privileges=true
+      - no-new-privileges:true
     networks:
       - skycrate-internal
     environment:
@@ -92,13 +92,13 @@ services:
     restart: on-failure:5
     user: "1000:1000"
     security_opt:
-      - no-new-privileges=true
+      - no-new-privileges:true
     networks:
       - skycrate-internal
     environment:
-      - MYSQL_DATABASE=${DB_NAME}
-      - MYSQL_USER=${DB_USERNAME}
-      - MYSQL_PASSWORD=${DB_PASSWORD}
+      - MYSQL_DATABASE=skycrate
+      - MYSQL_USER=skycrateDB
+      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
       - MYSQL_RANDOM_ROOT_PASSWORD=yes
     volumes:
       - skycrate-db:/var/lib/mysql
@@ -111,42 +111,39 @@ services:
     restart: on-failure:5
     user: "skycrateFront:skycrateFront"
     security_opt:
-      - no-new-privileges=true
+      - no-new-privileges:true
     networks:
       - skycrate-internal
     ports:
       - "80:8080"
+    volumes:
+      - skycrate-frontend:/app
     depends_on:
       - backend
 
   backend:
-    image: kshitijka/skycrate-backend:1.5
+    image: kshitijka/skycrate-backend:1.0
     container_name: skycrate-backend
     restart: on-failure:5
     user: "skycrateBack:skycrateBack"
     security_opt:
-      - no-new-privileges=true
+      - no-new-privileges:true
     networks:
       - skycrate-internal
     ports:
-      - "8080:8080" # If you change, update in Frontend/.env file too and rebuild the image
+      - "8081:8081" # If you change, update in Frontend/.env file too and rebuild the image
     environment:
-      - JWT_SECRET=${JWT_SECRET} # Eg. dO9Yl9NYJOODug8y9ciMVnVMoH44Q6mXilIlZ2LXXYY=
-      - DB_NAME=${DB_NAME}
-      - DB_URI=db:3306
-      - DB_USERNAME=${DB_USERNAME}
-      - DB_PASSWORD=${DB_PASSWORD}
-      - HDFS_URI=hdfs://namenode:9000
-      - HDFS_USER=hadoopuser
-      - SSL_PASSWORD=tempP@ass69 # Do not change for now. Future updates will allow you to change it.
-    env_file:
-      - .env
+      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
+    volumes:
+      - skycrate-backend:/app
 
 volumes:
   skycrate-hadoop_namenode:
   skycrate-hadoop_datanode:
   skycrate-hadoop_historyserver:
   skycrate-db:
+  skycrate-frontend:
+  skycrate-backend:
 
 networks:
   skycrate-internal: