Changed to 8080 for backend port.

- changed to "no-new-privileges=true" from ":true"
- added new env vars for backend
- removed volume for frontend and backend
- bumped image version for backend to 1.5

.idea/Skycrate.iml

@@ -1,9 +0,0 @@
-<?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

@@ -1,8 +0,0 @@
-<?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

@@ -1,31 +0,0 @@
-<?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:8081
+VITE_API_URL=http://localhost:8080

Frontend/src/components/FileList.jsx

@@ -2,7 +2,6 @@ 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,
@@ -21,16 +20,16 @@ import {
 
 const API_URL = import.meta.env.VITE_API_URL;
 
-const FileList = ({ initialPath }) => {
+const FileTable = ({ 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);
 
@@ -42,6 +41,7 @@ const FileList = ({ 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,6 +111,7 @@ const FileList = ({ 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();
@@ -135,103 +136,116 @@ const FileList = ({ initialPath }) => {
     setCurrentPathState(parts.length === 0 ? userRoot : `/${parts.join("/")}`);
   };
 
-  // open modal instead of direct download
+  const handleFileDownload = async (hdfsPath, name, event) => {
-  const openDownloadModal = (name, e) => {
+    event.stopPropagation();
-    e.stopPropagation();
+    try {
-    setDownloadFilename(name);
+      const authToken = localStorage.getItem("token");
-    setShowDownloadModal(true);
+      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.");
+    }
   };
 
   return (
-    <>
+    <div className="relative overflow-x-auto rounded-2xl shadow-lg border border-blue-200">
-      <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">
-        <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>
-          <span className="truncate max-w-[80%]">Path: {currentPath}</span>
+        {currentPath !== userRoot && (
-          {currentPath !== userRoot && (
+          <button
-            <button
+            onClick={goBack}
-              onClick={goBack}
+            className="flex items-center gap-1 text-blue-600 hover:underline text-sm"
-              className="flex items-center gap-1 text-blue-600 hover:underline text-sm"
+          >
-            >
+            <ArrowLeft className="w-4 h-4" />
-              <ArrowLeft className="w-4 h-4" />
+            Go Back
-              Go Back
+          </button>
-            </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>
 
-      {showDownloadModal && (
+      <table className="w-full text-sm text-left text-black">
-        <PasswordForDownload
+        <thead className="text-xs uppercase bg-blue-50 text-blue-800 border-b border-blue-200">
-          filename={downloadFilename}
+          <tr>
-          onDownload={fetchFiles}
+            <th className="px-6 py-3">Name</th>
-          onClose={() => setShowDownloadModal(false)}
+            <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>
   );
 };
 
-FileList.propTypes = {
+FileTable.propTypes = {
   initialPath: PropTypes.string,
 };
 
-export default FileList;
+export default FileTable;

Frontend/src/components/FileUploadModal.jsx

@@ -43,14 +43,10 @@ const FileUploadModal = ({ show, onClose, onUploadSuccess }) => {
     try {
       setUploading(true);
       setUploadMessage("⏳ Uploading file...");
-      const response = await fetch(`${API_URL}/api/files/upload`, {
+      const response = await fetch(`${API_URL}/api/hdfs/uploadFile`, {
         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

@@ -1,94 +0,0 @@
-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,76 +1,78 @@
 import { useState, useEffect } from "react";
-import { FiEye, FiEyeOff, FiLoader } from "react-icons/fi";
+import { FiEye, FiEyeOff } from "react-icons/fi";
 import { Link, useNavigate } from "react-router-dom";
-import toast, { Toaster } from "react-hot-toast"; // Import React Hot Toast
+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 navigate = useNavigate(); // For navigation
+  const [showPassword, setShowPassword] = useState(false);
-
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [errors, setErrors] = useState({});
+  const navigate = useNavigate(); // For navigation
 
-  // Redirect if already logged in
   useEffect(() => {
+    // Check if token is present in localStorage and redirect to Dashboard
     if (localStorage.getItem("token")) {
-      navigate("/dashboard");
+      navigate("/dashboard"); // Redirect to Dashboard
     }
   }, [navigate]);
 
-  const togglePassword = () => setShowPassword((prev) => !prev);
+  const togglePassword = () => {
-
+    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();
-    const validation = validate();
-    if (Object.keys(validation).length) {
-      setErrors(validation);
-      return;
-    }
-
     setLoading(true);
+
+    // Show loading toast
     const toastId = toast.loading(t("logging_in_toast"));
 
     try {
-      const response = await fetch(`${API_URL}/api/auth/login`, {
+      const response = await fetch(`${API_URL}/api/login`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: {
-        body: JSON.stringify({ email, password }),
+          "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((res) => res.text())
+          .then((response) => response.text())
-          .then((username) => localStorage.setItem("username", username))
+          .then((username) => {
-          .catch((err) => console.error("Error fetching username:", err));
+            localStorage.setItem("username", username);
+          })
+          .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);
@@ -78,107 +80,73 @@ const Login = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
-      <Toaster position="top-right" />
+      <div className="w-full max-w-md bg-white rounded-4xl shadow-lg p-8">
-      <div className="w-full max-w-sm bg-white rounded-2xl shadow-lg p-8">
+        <h1 className="text-2xl font-bold mb-6 text-gray-900 text-center">
-        <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">
-          {/* 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 */}
+        <form onSubmit={handleSubmit}>
-          <div className="relative">
+          <div className="mb-4">
-            <label
+            <div className="flex items-center">
-              htmlFor="password"
+              <input
-              className="block text-sm font-medium text-gray-700 mb-1"
+                type="email"
-            >
+                id="email"
-              {t("password_placeholder")}
+                placeholder={t("email_placeholder")}
-            </label>
+                className="w-full border border-gray-300 rounded-l-lg px-4 py-4 focus:outline-none focus:border-blue-500"
-            <input
+                value={email}
-              type={showPassword ? "text" : "password"}
+                onChange={(e) => setEmail(e.target.value)}
-              id="password"
+                required
-              value={password}
+              />
-              onChange={(e) => {
+            </div>
-                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>
-
+          <div className="mb-1">
-          {/* Forgot & Submit */}
+            <div className="relative">
-          <div className="flex items-center justify-between">
+              <input
-            <Link to="#!" className="text-sm text-blue-600 hover:underline">
+                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"
+            >
               {t("forgot_password")}
             </Link>
           </div>
-
           <button
             type="submit"
             disabled={loading}
-            className={`w-full flex justify-center items-center py-3 ${
+            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
-                ? "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 ? (
+            {loading ? t("logging_in") : t("login")}
-              <FiLoader className="animate-spin text-lg" />
-            ) : (
-              t("login")
-            )}
           </button>
         </form>
-
+        <div className="text-center mt-6">
-        <p className="text-center mt-6 text-gray-600">
+          <p className="text-gray-700">
-          {t("dont_have_account")}{" "}
+            {t("dont_have_account")}{" "}
-          <Link
+            <Link
-            to="/signup"
+              to="/signup"
-            className="text-green-600 hover:underline font-medium"
+              className="text-emerald-500 hover:underline font-medium"
-          >
+            >
-            {t("sign_up")}
+              {t("sign_up")}
-          </Link>
+            </Link>
-        </p>
+          </p>
+        </div>
       </div>
     </div>
   );

Frontend/src/pages/Authentication/SignUp.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { FiEye, FiEyeOff, FiLoader } from "react-icons/fi";
+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
@@ -7,13 +7,12 @@ import { useTranslation } from "react-i18next"; // for multilinguality
 const API_URL = import.meta.env.VITE_API_URL;
 
 const SignUp = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation(); // for multilinguality
   const navigate = useNavigate();
 
   const [formData, setFormData] = useState({
     firstname: "",
     lastname: "",
-    username: "",
     email: "",
     password: "",
     confirmPassword: "",
@@ -21,30 +20,19 @@ 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) => {
-    const { name, value } = e.target;
+    setFormData((prev) => ({
-    setFormData((prev) => ({ ...prev, [name]: value }));
+      ...prev,
-    setErrors((prev) => ({ ...prev, [name]: undefined }));
+      [e.target.name]: e.target.value,
+    }));
   };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    const validation = validate();
+
-    if (Object.keys(validation).length) {
+    if (formData.password !== formData.confirmPassword) {
-      setErrors(validation);
+      toast.error(t("passwords_do_not_match"));
       return;
     }
 
@@ -52,7 +40,8 @@ const SignUp = () => {
     const toastId = toast.loading(t("registering"));
 
     try {
-      const signupRes = await fetch(`${API_URL}/api/auth/register`, {
+      // 1️⃣ Sign up the user
+      const signupRes = await fetch(`${API_URL}/api/signup`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -60,8 +49,6 @@ const SignUp = () => {
           lastname: formData.lastname,
           email: formData.email,
           password: formData.password,
-          username: formData.username,
-          fullname: `${formData.firstname} ${formData.lastname}`,
         }),
       });
       const signupData = await signupRes.json();
@@ -71,18 +58,25 @@ 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=/${formData.username}`,
+        `${API_URL}/api/hdfs/createFolder?hdfsPath=/${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 });
       }
 
-      setTimeout(() => navigate("/login"), 1500);
+      // 3️⃣ Redirect to login after a short delay
+      setTimeout(() => {
+        navigate("/login");
+      }, 1500);
     } catch (error) {
       console.error(error);
       toast.error(t("an_error_occurred"), { id: toastId });
@@ -95,147 +89,91 @@ 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">
+        <h1 className="text-2xl font-bold text-gray-900 mb-6">{t("sign_up")}</h1>
-          {t("sign_up")}
+        <form className="space-y-4" onSubmit={handleSubmit}>
-        </h1>
+          <input
-        <form className="space-y-4" onSubmit={handleSubmit} noValidate>
+            type="text"
-          {/* Name Fields */}
+            name="firstname"
-          <div className="grid grid-cols-2 gap-4">
+            placeholder={t("first_name")}
-            <div>
+            value={formData.firstname}
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+            onChange={handleChange}
-                {t("first_name")}
+            className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              </label>
+            required
-              <input
+          />
-                type="text"
+          <input
-                name="firstname"
+            type="text"
-                value={formData.firstname}
+            name="lastname"
-                onChange={handleChange}
+            placeholder={t("last_name")}
-                className="w-full border border-gray-300 rounded-lg px-4 py-2 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-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            </div>
+            required
-            <div>
+          />
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+          <input
-                {t("last_name")}
+            type="email"
-              </label>
+            name="email"
-              <input
+            placeholder={t("email_placeholder")}
-                type="text"
+            value={formData.email}
-                name="lastname"
+            onChange={handleChange}
-                value={formData.lastname}
+            className="w-full border border-gray-300 rounded-lg px-4 py-4 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-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-2 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              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"
               required
             />
             <button
               type="button"
               onClick={() => setShowPassword((v) => !v)}
-              className="absolute right-3 top-9 text-xl text-gray-500 hover:text-gray-700"
+              className="absolute right-3 top-4 text-2xl 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-2 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              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"
               required
             />
             <button
               type="button"
               onClick={() => setShowConfirmPassword((v) => !v)}
-              className="absolute right-3 top-9 text-xl text-gray-500 hover:text-gray-700"
+              className="absolute right-3 top-4 text-2xl 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 flex justify-center items-center ${
+            className={`w-full mt-4 py-3 ${
               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 ? (
+            {loading ? t("signing_up") : t("sign_up")}
-              <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=skycrate
+      - MYSQL_DATABASE=${DB_NAME}
-      - MYSQL_USER=skycrateDB
+      - MYSQL_USER=${DB_USERNAME}
-      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
+      - MYSQL_PASSWORD=${DB_PASSWORD}
       - MYSQL_RANDOM_ROOT_PASSWORD=yes
     volumes:
       - skycrate-db:/var/lib/mysql
@@ -111,39 +111,42 @@ 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.0
+    image: kshitijka/skycrate-backend:1.5
     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:
-      - "8081:8081" # If you change, update in Frontend/.env file too and rebuild the image
+      - "8080:8080" # If you change, update in Frontend/.env file too and rebuild the image
     environment:
-      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
+      - JWT_SECRET=${JWT_SECRET} # Eg. dO9Yl9NYJOODug8y9ciMVnVMoH44Q6mXilIlZ2LXXYY=
-    volumes:
+      - DB_NAME=${DB_NAME}
-      - skycrate-backend:/app
+      - 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
 
 volumes:
   skycrate-hadoop_namenode:
   skycrate-hadoop_datanode:
   skycrate-hadoop_historyserver:
   skycrate-db:
-  skycrate-frontend:
-  skycrate-backend:
 
 networks:
   skycrate-internal: