Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Kshitij
|
627c6c4658
|
||
|
Kshitij
|
0171618ee4
|
||
|
Kshitij
|
90b3816cc2
|
@@ -0,0 +1 @@
|
|||||||
|
environment-variables.txt
|
||||||
@@ -1 +0,0 @@
|
|||||||
VITE_API_URL=http://192.168.29.61:8081
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
node_modules
|
|
||||||
dist
|
|
||||||
dist-ssr
|
|
||||||
*.local
|
|
||||||
package-lock.json
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/extensions.json
|
|
||||||
.idea
|
|
||||||
.DS_Store
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
import js from '@eslint/js'
|
|
||||||
import globals from 'globals'
|
|
||||||
import react from 'eslint-plugin-react'
|
|
||||||
import reactHooks from 'eslint-plugin-react-hooks'
|
|
||||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
|
||||||
|
|
||||||
export default [
|
|
||||||
{ ignores: ['dist'] },
|
|
||||||
{
|
|
||||||
files: ['**/*.{js,jsx}'],
|
|
||||||
languageOptions: {
|
|
||||||
ecmaVersion: 2020,
|
|
||||||
globals: globals.browser,
|
|
||||||
parserOptions: {
|
|
||||||
ecmaVersion: 'latest',
|
|
||||||
ecmaFeatures: { jsx: true },
|
|
||||||
sourceType: 'module',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
settings: { react: { version: '18.3' } },
|
|
||||||
plugins: {
|
|
||||||
react,
|
|
||||||
'react-hooks': reactHooks,
|
|
||||||
'react-refresh': reactRefresh,
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
...js.configs.recommended.rules,
|
|
||||||
...react.configs.recommended.rules,
|
|
||||||
...react.configs['jsx-runtime'].rules,
|
|
||||||
...reactHooks.configs.recommended.rules,
|
|
||||||
'react/jsx-no-target-blank': 'off',
|
|
||||||
'react-refresh/only-export-components': [
|
|
||||||
'warn',
|
|
||||||
{ allowConstantExport: true },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/image.png" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<link href="/src/styles.css" rel="stylesheet">
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
|
|
||||||
|
|
||||||
<title>Skycrate</title>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
|
|
||||||
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Skycrate",
|
|
||||||
"private": true,
|
|
||||||
"version": "0.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "vite build",
|
|
||||||
"lint": "eslint .",
|
|
||||||
"preview": "vite preview"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@reduxjs/toolkit": "^2.6.0",
|
|
||||||
"@tailwindcss/vite": "^4.0.9",
|
|
||||||
"axios": "^1.8.4",
|
|
||||||
"lucide-react": "^0.476.0",
|
|
||||||
"react": "^19.0.0",
|
|
||||||
"react-dom": "^19.0.0",
|
|
||||||
"react-hot-toast": "^2.5.2",
|
|
||||||
"react-icons": "^5.5.0",
|
|
||||||
"react-redux": "^9.2.0",
|
|
||||||
"react-router-dom": "^7.2.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@eslint/js": "^9.21.0",
|
|
||||||
"@types/react": "^19.0.10",
|
|
||||||
"@types/react-dom": "^19.0.4",
|
|
||||||
"@vitejs/plugin-react": "^4.3.4",
|
|
||||||
"autoprefixer": "^10.4.20",
|
|
||||||
"eslint": "^9.21.0",
|
|
||||||
"eslint-plugin-react": "^7.37.4",
|
|
||||||
"eslint-plugin-react-hooks": "^5.0.0",
|
|
||||||
"eslint-plugin-react-refresh": "^0.4.19",
|
|
||||||
"globals": "^15.15.0",
|
|
||||||
"postcss": "^8.5.3",
|
|
||||||
"tailwindcss": "^4.0.9",
|
|
||||||
"vite": "^6.2.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 317 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 332 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
@@ -1,23 +0,0 @@
|
|||||||
import "./App.css";
|
|
||||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
|
||||||
import Login from "./pages/Authentication/Login";
|
|
||||||
import SignUp from "./pages/Authentication/SignUp";
|
|
||||||
import DrivethruLandingPage from "./pages/UserPages/DrivethruLandingPage";
|
|
||||||
import Dashboard from "./pages/UserPages/Dashboard";
|
|
||||||
import NotFoundPage from "./pages/UserPages/NotFoundPage";
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
return (
|
|
||||||
<Router>
|
|
||||||
<Routes>
|
|
||||||
<Route path="/" element={<DrivethruLandingPage />} />
|
|
||||||
<Route path="/login" element={<Login />} />
|
|
||||||
<Route path="/signup" element={<SignUp />} />
|
|
||||||
<Route path="/Dashboard" element={<Dashboard />} />
|
|
||||||
<Route path="*" element={<NotFoundPage />} />
|
|
||||||
</Routes>
|
|
||||||
</Router>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@@ -1,251 +0,0 @@
|
|||||||
import { useState, useEffect } from "react";
|
|
||||||
import PropTypes from "prop-types";
|
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
|
||||||
import { setCurrentPath } from "../store/pathSlice";
|
|
||||||
import {
|
|
||||||
FileText,
|
|
||||||
FileVideo,
|
|
||||||
FileImage,
|
|
||||||
FileAudio,
|
|
||||||
FileArchive,
|
|
||||||
FileSpreadsheet,
|
|
||||||
FileType2,
|
|
||||||
FileCode2,
|
|
||||||
Presentation,
|
|
||||||
Folder,
|
|
||||||
Download,
|
|
||||||
Trash2,
|
|
||||||
ArrowLeft,
|
|
||||||
} from "lucide-react";
|
|
||||||
|
|
||||||
const API_URL = import.meta.env.VITE_API_URL || "http://localhost:8080";
|
|
||||||
|
|
||||||
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 dispatch = useDispatch();
|
|
||||||
const isUploading = useSelector((state) => state.upload.isUploading);
|
|
||||||
|
|
||||||
const getType = (entry) =>
|
|
||||||
entry.trim().startsWith("📁") ? "Folder" : "File";
|
|
||||||
const getName = (entry) => entry.trim().replace(/^📁\s*|^📄\s*/, "");
|
|
||||||
const isFile = (entry) => getType(entry) === "File";
|
|
||||||
|
|
||||||
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":
|
|
||||||
return <FileText className="text-gray-700 w-5 h-5 mr-2" />;
|
|
||||||
case "mp4":
|
|
||||||
case "mkv":
|
|
||||||
return <FileVideo className="text-purple-500 w-5 h-5 mr-2" />;
|
|
||||||
case "jpg":
|
|
||||||
case "jpeg":
|
|
||||||
case "png":
|
|
||||||
case "gif":
|
|
||||||
return <FileImage className="text-pink-500 w-5 h-5 mr-2" />;
|
|
||||||
case "mp3":
|
|
||||||
case "wav":
|
|
||||||
return <FileAudio className="text-indigo-500 w-5 h-5 mr-2" />;
|
|
||||||
case "zip":
|
|
||||||
case "rar":
|
|
||||||
case "tar":
|
|
||||||
case "gz":
|
|
||||||
return <FileArchive className="text-red-500 w-5 h-5 mr-2" />;
|
|
||||||
case "csv":
|
|
||||||
case "xls":
|
|
||||||
case "xlsx":
|
|
||||||
return <FileSpreadsheet className="text-green-500 w-5 h-5 mr-2" />;
|
|
||||||
case "ppt":
|
|
||||||
case "pptx":
|
|
||||||
return <Presentation className="text-orange-500 w-5 h-5 mr-2" />;
|
|
||||||
case "js":
|
|
||||||
case "html":
|
|
||||||
case "css":
|
|
||||||
case "java":
|
|
||||||
case "py":
|
|
||||||
case "cpp":
|
|
||||||
return <FileCode2 className="text-blue-500 w-5 h-5 mr-2" />;
|
|
||||||
default:
|
|
||||||
return <FileType2 className="text-gray-500 w-5 h-5 mr-2" />;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchFiles = async () => {
|
|
||||||
try {
|
|
||||||
const res = await fetch(
|
|
||||||
`${API_URL}/api/hdfs/listFiles?hdfsPath=${encodeURIComponent(
|
|
||||||
currentPath
|
|
||||||
)}`
|
|
||||||
);
|
|
||||||
const data = await res.json();
|
|
||||||
const filtered = data.filter(
|
|
||||||
(entry) => entry.match(/^ */)[0].length === 0
|
|
||||||
);
|
|
||||||
setFiles(filtered);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to fetch files:", err);
|
|
||||||
setFiles([]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const deleteFileOrFolder = async (name, type, e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
try {
|
|
||||||
const hdfsPath = `${currentPath}/${name}`;
|
|
||||||
const endpoint =
|
|
||||||
type === "File"
|
|
||||||
? `${API_URL}/api/hdfs/deleteFile?hdfsPath=${encodeURIComponent(
|
|
||||||
hdfsPath
|
|
||||||
)}`
|
|
||||||
: `${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();
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to delete:", err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
dispatch(setCurrentPath(currentPath));
|
|
||||||
fetchFiles();
|
|
||||||
}, [currentPath, dispatch, isUploading]);
|
|
||||||
|
|
||||||
const handleOpenFolder = (folderName) => {
|
|
||||||
setCurrentPathState((prev) => `${prev}/${folderName}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
const goBack = () => {
|
|
||||||
if (currentPath === userRoot) return;
|
|
||||||
const parts = currentPath.split("/").filter(Boolean);
|
|
||||||
parts.pop();
|
|
||||||
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.");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
FileTable.propTypes = {
|
|
||||||
initialPath: PropTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FileTable;
|
|
||||||
@@ -1,190 +0,0 @@
|
|||||||
import { useState, useEffect } from "react";
|
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
|
||||||
import PropTypes from "prop-types";
|
|
||||||
import { setIsUploading } from "../store/UploadStatusSlice";
|
|
||||||
|
|
||||||
const FileUploadModal = ({ show, onClose, onUploadSuccess }) => {
|
|
||||||
const currentPath = useSelector((state) => state.path.currentPath);
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const [file, setFile] = useState(null);
|
|
||||||
const [uploading, setUploading] = useState(false);
|
|
||||||
const [uploadMessage, setUploadMessage] = useState("");
|
|
||||||
const [newFolderName, setNewFolderName] = useState("");
|
|
||||||
const [creatingFolder, setCreatingFolder] = useState(false);
|
|
||||||
const [folderMessage, setFolderMessage] = useState("");
|
|
||||||
const username = localStorage.getItem("username");
|
|
||||||
const API_URL = import.meta.env.VITE_API_URL;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleEsc = (e) => {
|
|
||||||
if (e.key === "Escape") onClose();
|
|
||||||
};
|
|
||||||
document.addEventListener("keydown", handleEsc);
|
|
||||||
|
|
||||||
return () => document.removeEventListener("keydown", handleEsc);
|
|
||||||
}, [onClose]);
|
|
||||||
|
|
||||||
const isFolderNameValid = (name) => {
|
|
||||||
return /^[a-zA-Z0-9-_ ]+$/.test(name); // disallow special chars like / \ * ? etc.
|
|
||||||
};
|
|
||||||
|
|
||||||
const uploadFileToHDFS = async () => {
|
|
||||||
if (!file) {
|
|
||||||
setUploadMessage("⚠️ Please select a file before uploading.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const formData = new FormData();
|
|
||||||
|
|
||||||
formData.append("file", file);
|
|
||||||
formData.append("hdfsPath", currentPath);
|
|
||||||
formData.append("uploadedFileName", file.name);
|
|
||||||
formData.append("username", username);
|
|
||||||
|
|
||||||
try {
|
|
||||||
setUploading(true);
|
|
||||||
setUploadMessage("⏳ Uploading file...");
|
|
||||||
const response = await fetch(`${API_URL}/api/hdfs/uploadFile`, {
|
|
||||||
method: "POST",
|
|
||||||
body: formData,
|
|
||||||
});
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorText = await response.text();
|
|
||||||
setUploadMessage(`❌ Upload failed: ${errorText}`);
|
|
||||||
} else {
|
|
||||||
setUploadMessage("✅ File uploaded successfully!");
|
|
||||||
dispatch(setIsUploading(true)); // Dispatch the action to set isUploading to true
|
|
||||||
onUploadSuccess(); // Call the onUploadSuccess prop to notify the parent
|
|
||||||
setTimeout(() => {
|
|
||||||
setUploadMessage("");
|
|
||||||
onClose();
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
setUploadMessage("❌ An error occurred during upload.");
|
|
||||||
} finally {
|
|
||||||
setUploading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const createFolder = async () => {
|
|
||||||
if (!newFolderName.trim()) {
|
|
||||||
setFolderMessage("⚠️ Please enter a folder name.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!isFolderNameValid(newFolderName.trim())) {
|
|
||||||
setFolderMessage("❌ Folder name contains invalid characters.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
setCreatingFolder(true);
|
|
||||||
setFolderMessage("⏳ Creating folder...");
|
|
||||||
const folderPath =
|
|
||||||
currentPath === "/" ? "" : currentPath.replace(/\/$/, "");
|
|
||||||
const newFolderPath = `${folderPath}/${newFolderName}`;
|
|
||||||
console.log(newFolderPath);
|
|
||||||
const response = await fetch(
|
|
||||||
`${API_URL}/api/hdfs/createFolder?hdfsPath=${newFolderPath}`,
|
|
||||||
{ method: "POST" }
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorText = await response.text();
|
|
||||||
setFolderMessage(`❌ Folder creation failed: ${errorText}`);
|
|
||||||
} else {
|
|
||||||
setFolderMessage("✅ Folder created successfully!");
|
|
||||||
dispatch(setIsUploading(true)); // Dispatch the action to set isUploading to true
|
|
||||||
onUploadSuccess(currentPath); // Call the onUploadSuccess prop after folder creation too
|
|
||||||
setNewFolderName("");
|
|
||||||
setTimeout(() => {
|
|
||||||
setFolderMessage("");
|
|
||||||
onClose();
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
setFolderMessage("❌ An error occurred during folder creation.");
|
|
||||||
} finally {
|
|
||||||
setCreatingFolder(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!show) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
||||||
<div className="absolute inset-0 bg-black opacity-40" onClick={onClose} />
|
|
||||||
<div className="relative bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4">
|
|
||||||
<div className="flex items-center justify-between px-6 py-4 border-b">
|
|
||||||
<h2 className="text-xl font-semibold text-gray-800">Manage HDFS</h2>
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="text-gray-600 hover:text-gray-900"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="p-6 space-y-8">
|
|
||||||
{/* File Upload Section */}
|
|
||||||
<div className="bg-gray-50 p-4 rounded-lg shadow-inner">
|
|
||||||
<h3 className="text-lg font-medium text-gray-700 mb-3">
|
|
||||||
Upload File
|
|
||||||
</h3>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
onChange={(e) => setFile(e.target.files[0])}
|
|
||||||
className="w-full mb-3 text-sm text-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
|
|
||||||
/>
|
|
||||||
{file && (
|
|
||||||
<p className="text-sm text-gray-700 mb-2">
|
|
||||||
Selected file: <strong>{file.name}</strong>
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
{uploadMessage && (
|
|
||||||
<p className="text-sm text-gray-600 mb-3">{uploadMessage}</p>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
onClick={uploadFileToHDFS}
|
|
||||||
disabled={uploading}
|
|
||||||
className="w-full py-2 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{uploading ? "⏳ Uploading..." : "Upload File"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Create Folder Section */}
|
|
||||||
<div className="bg-gray-50 p-4 rounded-lg shadow-inner">
|
|
||||||
<h3 className="text-lg font-medium text-gray-700 mb-3">
|
|
||||||
Create Folder
|
|
||||||
</h3>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Folder name"
|
|
||||||
value={newFolderName}
|
|
||||||
onChange={(e) => setNewFolderName(e.target.value)}
|
|
||||||
className="w-full mb-3 px-3 py-2 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-200"
|
|
||||||
/>
|
|
||||||
{folderMessage && (
|
|
||||||
<p className="text-sm text-gray-600 mb-3">{folderMessage}</p>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
onClick={createFolder}
|
|
||||||
disabled={creatingFolder}
|
|
||||||
className="w-full py-2 rounded-lg bg-green-600 text-white font-medium hover:bg-green-700 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{creatingFolder ? "⏳ Creating..." : "Create Folder"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
FileUploadModal.propTypes = {
|
|
||||||
show: PropTypes.bool.isRequired,
|
|
||||||
onClose: PropTypes.func.isRequired,
|
|
||||||
onUploadSuccess: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FileUploadModal;
|
|
||||||
@@ -1,188 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import {
|
|
||||||
Facebook,
|
|
||||||
Twitter,
|
|
||||||
Instagram,
|
|
||||||
Linkedin,
|
|
||||||
Mail,
|
|
||||||
Phone,
|
|
||||||
MapPin,
|
|
||||||
} from "lucide-react";
|
|
||||||
|
|
||||||
const Footer = () => {
|
|
||||||
const [email, setEmail] = useState("");
|
|
||||||
|
|
||||||
//Currently storing user email in localstorage
|
|
||||||
const handleSubscribe = () => {
|
|
||||||
if (email.trim() !== "") {
|
|
||||||
localStorage.setItem("subscribedEmail", email);
|
|
||||||
alert("You have successfully subscribed!");
|
|
||||||
setEmail("");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<footer className="bg-gradient-to-r from-[#4a7cbd] via-[#5b4fd3] to-[#9377ff] w-full pt-16 pb-8">
|
|
||||||
<div className="container mx-auto px-6">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<div className="text-white mr-3">
|
|
||||||
<svg
|
|
||||||
className="w-10 h-10"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M12 2L2 12L12 22L22 12L12 2Z"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="3"
|
|
||||||
fill="none"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 className="text-2xl font-bold text-white">Skycrate</h3>
|
|
||||||
</div>
|
|
||||||
<p className="text-white/90">
|
|
||||||
Your secure cloud storage solution for all your digital needs.
|
|
||||||
</p>
|
|
||||||
<div className="flex space-x-4">
|
|
||||||
<a
|
|
||||||
href="https://facebook.com"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Facebook className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://twitter.com"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Twitter className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://instagram.com"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Instagram className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://linkedin.com"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Linkedin className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Quick Links */}
|
|
||||||
<div>
|
|
||||||
<h4 className="font-semibold text-white mb-4">Quick Links</h4>
|
|
||||||
<ul className="space-y-2">
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="#about"
|
|
||||||
className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
|
|
||||||
>
|
|
||||||
About Us
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="#features"
|
|
||||||
className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
|
|
||||||
>
|
|
||||||
Features
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="#howItWorks"
|
|
||||||
className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
|
|
||||||
>
|
|
||||||
How It Works
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contact Info */}
|
|
||||||
<div>
|
|
||||||
<h4 className="font-semibold text-white mb-4">Contact</h4>
|
|
||||||
<ul className="space-y-2">
|
|
||||||
<li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
|
|
||||||
<Mail className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
|
|
||||||
support@drivethru.com
|
|
||||||
</li>
|
|
||||||
<li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
|
|
||||||
<Phone className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
|
|
||||||
+91 3628206234
|
|
||||||
</li>
|
|
||||||
<li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
|
|
||||||
<MapPin className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
|
|
||||||
123 Cloud Street, Digital City
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Newsletter */}
|
|
||||||
<div>
|
|
||||||
<h4 className="font-semibold text-white mb-4">Stay Updated</h4>
|
|
||||||
<p className="text-white/90 mb-4">
|
|
||||||
Get exclusive tips, updates on new features, and special offers
|
|
||||||
directly in your inbox.
|
|
||||||
</p>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
value={email}
|
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
|
||||||
placeholder="Enter your email"
|
|
||||||
className="w-full px-4 py-2 rounded-md bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:bg-white/20 transition-all duration-200 outline-none focus:ring-2 focus:ring-white/30"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
onClick={handleSubscribe}
|
|
||||||
className="w-full px-4 py-2 rounded-md bg-white text-blue-600 font-medium hover:bg-opacity-90 transition-all duration-200 transform hover:scale-105"
|
|
||||||
>
|
|
||||||
Subscribe to Newsletter
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="h-px w-full bg-white/20 my-8" />
|
|
||||||
|
|
||||||
{/* Bottom Section */}
|
|
||||||
<div className="flex flex-col md:flex-row justify-between items-center text-white/90 text-sm">
|
|
||||||
<p>© {new Date().getFullYear()} Skycrate. All rights reserved.</p>
|
|
||||||
<div className="flex gap-4 mt-4 md:mt-0">
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
|
|
||||||
>
|
|
||||||
Privacy Policy
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
|
|
||||||
>
|
|
||||||
Terms of Service
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
|
|
||||||
>
|
|
||||||
Cookie Policy
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Footer;
|
|
||||||
@@ -1,153 +0,0 @@
|
|||||||
import { useState, useEffect, useRef } from "react";
|
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
|
||||||
import { toast } from "react-hot-toast";
|
|
||||||
|
|
||||||
const Sidebar = () => {
|
|
||||||
const navigate = useNavigate(); // Hook for programmatic navigation
|
|
||||||
const [userMenuOpen, setUserMenuOpen] = useState(false);
|
|
||||||
const menuRef = useRef();
|
|
||||||
|
|
||||||
// Show loading toast and perform logout
|
|
||||||
const handleLogout = () => {
|
|
||||||
const loadingToast = toast.loading("Logging out...");
|
|
||||||
|
|
||||||
// Simulate a delay (for example, network request)
|
|
||||||
setTimeout(() => {
|
|
||||||
// Remove the token from localStorage
|
|
||||||
localStorage.removeItem("token");
|
|
||||||
localStorage.removeItem("username");
|
|
||||||
localStorage.removeItem("expiresIn");
|
|
||||||
|
|
||||||
// Redirect user to the homepage
|
|
||||||
navigate("/");
|
|
||||||
|
|
||||||
// Show success toast after logout
|
|
||||||
toast.update(loadingToast, {
|
|
||||||
render: "Logged out successfully!",
|
|
||||||
type: "success",
|
|
||||||
isLoading: false,
|
|
||||||
autoClose: 2000,
|
|
||||||
});
|
|
||||||
}, 1500);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Close dropdown on outside click
|
|
||||||
useEffect(() => {
|
|
||||||
const handleClickOutside = (e) => {
|
|
||||||
if (menuRef.current && !menuRef.current.contains(e.target)) {
|
|
||||||
setUserMenuOpen(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
document.addEventListener("mousedown", handleClickOutside);
|
|
||||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<nav className="fixed top-0 z-50 h-[60px] w-full bg-white border-b border-gray-200">
|
|
||||||
<div className="p-[15px] h-full lg:px-5 lg:pl-3 flex items-center justify-between">
|
|
||||||
{/* Left Section - Logo & Toggle */}
|
|
||||||
<div className="flex items-center">
|
|
||||||
<button
|
|
||||||
data-drawer-target="logo-sidebar"
|
|
||||||
data-drawer-toggle="logo-sidebar"
|
|
||||||
aria-controls="logo-sidebar"
|
|
||||||
type="button"
|
|
||||||
className="inline-flex items-center p-2 text-lg text-white rounded-lg sm:hidden hover:bg-[#37A0EA] focus:outline-none"
|
|
||||||
>
|
|
||||||
<span className="sr-only">Open sidebar</span>
|
|
||||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path
|
|
||||||
clipRule="evenodd"
|
|
||||||
fillRule="evenodd"
|
|
||||||
d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<Link to="/" className="flex ms-2 md:me-24">
|
|
||||||
<img src="./image.png" className="h-8 me-3" alt="Skycrate Logo" />
|
|
||||||
<span className="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap">
|
|
||||||
Skycrate
|
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right Section - Search & User Menu */}
|
|
||||||
<div className="flex items-center">
|
|
||||||
{/* Search Bar */}
|
|
||||||
<div className="flex items-center justify-end mr-40"></div>
|
|
||||||
|
|
||||||
{/* User Profile & Dropdown */}
|
|
||||||
<div className="relative ms-3">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setUserMenuOpen((o) => !o)}
|
|
||||||
className="flex text-lg bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300"
|
|
||||||
>
|
|
||||||
<span className="sr-only">Open user menu</span>
|
|
||||||
<img
|
|
||||||
className="w-8 h-8 rounded-full"
|
|
||||||
src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
|
||||||
alt="User Photo"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{userMenuOpen && (
|
|
||||||
<div
|
|
||||||
ref={menuRef}
|
|
||||||
className="z-50 absolute right-0 mt-2 w-48 bg-[#1877F2] divide-y divide-gray-100 rounded-sm shadow-sm"
|
|
||||||
>
|
|
||||||
<div className="px-4 py-3" role="none">
|
|
||||||
<p className="text-lg text-white" role="none">
|
|
||||||
{localStorage.getItem("username")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<ul className="py-1" role="none">
|
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
onClick={handleLogout}
|
|
||||||
className="w-full text-left px-4 py-2 text-lg text-white hover:bg-[#37A0EA]"
|
|
||||||
role="menuitem"
|
|
||||||
>
|
|
||||||
Log out
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<aside
|
|
||||||
id="logo-sidebar"
|
|
||||||
className="fixed top-0 left-0 z-40 w-64 h-screen pt-[60px] transition-transform -translate-x-full bg-[#1877F2] border-r border-gray-200 sm:translate-x-0"
|
|
||||||
aria-label="Sidebar"
|
|
||||||
>
|
|
||||||
<div className="h-full px-3 pb-4 overflow-y-auto bg-[#1877F2] custom-scrollbar">
|
|
||||||
<ul className="space-y-2 font-medium">
|
|
||||||
<li>
|
|
||||||
<Link
|
|
||||||
to="#"
|
|
||||||
className="flex items-center p-2 mt-5 pt-4 pb-4 text-white rounded-lg hover:bg-[#37A0EA] group"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
className="w-5 h-5"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="currentColor"
|
|
||||||
>
|
|
||||||
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z" />
|
|
||||||
</svg>
|
|
||||||
<span className="ms-3">Starred</span>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
{/* ...additional sidebar items... */}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Sidebar;
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
@import "tailwindcss";
|
|
||||||
|
|
||||||
/* For WebKit-based browsers */
|
|
||||||
.custom-scrollbar::-webkit-scrollbar {
|
|
||||||
width: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
/* or a color of your choice */
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
||||||
background-color: #a0aec0;
|
|
||||||
/* Customize thumb color */
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
/* Optional: creates padding around thumb */
|
|
||||||
background-clip: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* For Firefox */
|
|
||||||
.custom-scrollbar {
|
|
||||||
scrollbar-width: auto;
|
|
||||||
/* "auto" or "thin" */
|
|
||||||
scrollbar-color: #37A0EA transparent;
|
|
||||||
/* thumb and track colors */
|
|
||||||
}
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
import { StrictMode } from "react";
|
|
||||||
import { createRoot } from "react-dom/client";
|
|
||||||
import "./index.css";
|
|
||||||
import App from "./App.jsx";
|
|
||||||
import { Provider } from "react-redux";
|
|
||||||
import { store } from "./store/store";
|
|
||||||
|
|
||||||
const container = document.getElementById("root");
|
|
||||||
const root = createRoot(container);
|
|
||||||
root.render(
|
|
||||||
<StrictMode>
|
|
||||||
<Provider store={store}>
|
|
||||||
<App />
|
|
||||||
</Provider>
|
|
||||||
</StrictMode>
|
|
||||||
);
|
|
||||||
@@ -1,154 +0,0 @@
|
|||||||
import { useState, useEffect } from "react";
|
|
||||||
import { FiEye, FiEyeOff } from "react-icons/fi";
|
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
|
||||||
import toast from "react-hot-toast"; // Import React Hot Toast
|
|
||||||
|
|
||||||
const API_URL = import.meta.env.VITE_API_URL; // Using .env variable
|
|
||||||
|
|
||||||
const Login = () => {
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
|
||||||
const [email, setEmail] = useState("");
|
|
||||||
const [password, setPassword] = useState("");
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const navigate = useNavigate(); // For navigation
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Check if token is present in localStorage and redirect to Dashboard
|
|
||||||
if (localStorage.getItem("token")) {
|
|
||||||
navigate("/dashboard"); // Redirect to Dashboard
|
|
||||||
}
|
|
||||||
}, [navigate]);
|
|
||||||
|
|
||||||
const togglePassword = () => {
|
|
||||||
setShowPassword(!showPassword);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
// Show loading toast
|
|
||||||
const toastId = toast.loading("Logging in...");
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_URL}/api/login`, {
|
|
||||||
method: "POST",
|
|
||||||
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(`${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);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Show success toast
|
|
||||||
toast.success("Login successful!");
|
|
||||||
|
|
||||||
// Redirect to Dashboard
|
|
||||||
navigate("/dashboard");
|
|
||||||
} else {
|
|
||||||
// Show error toast if login fails
|
|
||||||
toast.error(data.message || "Login failed.");
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// Dismiss the loading toast and show error
|
|
||||||
toast.dismiss(toastId);
|
|
||||||
toast.error("An error occurred. Please try again.", error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
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">
|
|
||||||
Log in
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
<div className="mb-4">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
placeholder="Enter your email"
|
|
||||||
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="Enter your password"
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
{loading ? "Logging In..." : "Login"}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
<div className="text-center mt-6">
|
|
||||||
<p className="text-gray-700">
|
|
||||||
Don’t have an account?{" "}
|
|
||||||
<Link
|
|
||||||
to="/signup"
|
|
||||||
className="text-emerald-500 hover:underline font-medium"
|
|
||||||
>
|
|
||||||
Sign up
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Login;
|
|
||||||
@@ -1,191 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { FiEye, FiEyeOff } from "react-icons/fi";
|
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
|
||||||
import toast, { Toaster } from "react-hot-toast";
|
|
||||||
|
|
||||||
const API_URL = import.meta.env.VITE_API_URL;
|
|
||||||
|
|
||||||
const SignUp = () => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const [formData, setFormData] = useState({
|
|
||||||
firstname: "",
|
|
||||||
lastname: "",
|
|
||||||
email: "",
|
|
||||||
password: "",
|
|
||||||
confirmPassword: "",
|
|
||||||
});
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
|
||||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const handleChange = (e) => {
|
|
||||||
setFormData((prev) => ({
|
|
||||||
...prev,
|
|
||||||
[e.target.name]: e.target.value,
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (formData.password !== formData.confirmPassword) {
|
|
||||||
toast.error("Passwords do not match.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
const toastId = toast.loading("Registering...");
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 1️⃣ Sign up the user
|
|
||||||
const signupRes = await fetch(`${API_URL}/api/signup`, {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({
|
|
||||||
firstname: formData.firstname,
|
|
||||||
lastname: formData.lastname,
|
|
||||||
email: formData.email,
|
|
||||||
password: formData.password,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
const signupData = await signupRes.json();
|
|
||||||
|
|
||||||
if (!signupRes.ok) {
|
|
||||||
toast.error(signupData.message || "Signup failed.", { id: toastId });
|
|
||||||
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}`,
|
|
||||||
{ method: "POST" }
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!folderRes.ok) {
|
|
||||||
// you might choose to roll back user creation or just notify
|
|
||||||
toast.error("Failed to create user folder.", { id: toastId });
|
|
||||||
} else {
|
|
||||||
toast.success("Successfully registered and folder created!", {
|
|
||||||
id: toastId,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3️⃣ Redirect to login after a short delay
|
|
||||||
setTimeout(() => {
|
|
||||||
navigate("/login");
|
|
||||||
}, 1500);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
toast.error("An error occurred. Please try again.", { id: toastId });
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-gray-100 flex items-center justify-center p-6">
|
|
||||||
<Toaster position="top-right" />
|
|
||||||
<div className="w-full max-w-md bg-white rounded-2xl shadow-lg p-8">
|
|
||||||
<h1 className="text-2xl font-bold text-gray-900 mb-6">Sign Up</h1>
|
|
||||||
<form className="space-y-4" onSubmit={handleSubmit}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="firstname"
|
|
||||||
placeholder="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="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="Enter your email"
|
|
||||||
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
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Password Field */}
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type={showPassword ? "text" : "password"}
|
|
||||||
name="password"
|
|
||||||
placeholder="Enter your password"
|
|
||||||
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"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowPassword((v) => !v)}
|
|
||||||
className="absolute right-3 top-4 text-2xl text-gray-500 hover:text-gray-700"
|
|
||||||
>
|
|
||||||
{showPassword ? <FiEyeOff /> : <FiEye />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Confirm Password Field */}
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type={showConfirmPassword ? "text" : "password"}
|
|
||||||
name="confirmPassword"
|
|
||||||
placeholder="Confirm your password"
|
|
||||||
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"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowConfirmPassword((v) => !v)}
|
|
||||||
className="absolute right-3 top-4 text-2xl text-gray-500 hover:text-gray-700"
|
|
||||||
>
|
|
||||||
{showConfirmPassword ? <FiEyeOff /> : <FiEye />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Sign Up Button */}
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={loading}
|
|
||||||
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 ? "Signing Up..." : "Sign Up"}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
{/* Redirect to Login */}
|
|
||||||
<p className="text-center mt-4 text-gray-700">
|
|
||||||
Already have an account?{" "}
|
|
||||||
<Link
|
|
||||||
to="/login"
|
|
||||||
className="text-blue-500 hover:underline font-medium"
|
|
||||||
>
|
|
||||||
Login
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SignUp;
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
import { useState, useEffect } from "react";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import Sidebar from "../../components/Sidebar";
|
|
||||||
import FileList from "../../components/FileList";
|
|
||||||
import FileUploadModal from "../../components/FileUploadModal";
|
|
||||||
import { FiPlus } from "react-icons/fi";
|
|
||||||
|
|
||||||
const Dashboard = () => {
|
|
||||||
const [files, setFiles] = useState([]);
|
|
||||||
const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
|
|
||||||
const [error, setError] = useState("");
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const API_URL = import.meta.env.VITE_API_URL;
|
|
||||||
const isUserLoggedIn = () => {
|
|
||||||
const token = localStorage.getItem("token");
|
|
||||||
const username = localStorage.getItem("username");
|
|
||||||
const expiresIn = localStorage.getItem("expiresIn");
|
|
||||||
|
|
||||||
if (!token || !username || !expiresIn) return false;
|
|
||||||
|
|
||||||
const expiryTime = new Date(expiresIn).getTime();
|
|
||||||
const now = new Date().getTime();
|
|
||||||
|
|
||||||
if (now > expiryTime) {
|
|
||||||
localStorage.clear();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchFiles = async () => {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_URL}/api/hdfs/listFiles?hdfsPath=/`);
|
|
||||||
const data = await response.json();
|
|
||||||
setFiles(data);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to fetch files:", error);
|
|
||||||
setError("Failed to load files. Please try again later.");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isUserLoggedIn()) {
|
|
||||||
navigate("/login");
|
|
||||||
} else {
|
|
||||||
fetchFiles();
|
|
||||||
}
|
|
||||||
}, [navigate]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Sidebar />
|
|
||||||
<div className="p-4 sm:ml-64">
|
|
||||||
<div className="p-4 border-2 border-gray-200 border-dashed rounded-lg mt-14">
|
|
||||||
<div className="w-full flex justify-between items-center">
|
|
||||||
<h1 className="text-2xl font-bold mb-4">Dashboard</h1>
|
|
||||||
<button
|
|
||||||
onClick={() => setIsUploadModalOpen(true)}
|
|
||||||
className="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<FiPlus className="text-2xl" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{error ? (
|
|
||||||
<p className="text-red-500">{error}</p>
|
|
||||||
) : (
|
|
||||||
<FileList files={files} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<FileUploadModal
|
|
||||||
show={isUploadModalOpen}
|
|
||||||
onClose={() => setIsUploadModalOpen(false)}
|
|
||||||
onUploadSuccess={() => {
|
|
||||||
fetchFiles();
|
|
||||||
setIsUploadModalOpen(false);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Dashboard;
|
|
||||||
@@ -1,376 +0,0 @@
|
|||||||
import Footer from "../../components/Footer";
|
|
||||||
import React from "react";
|
|
||||||
import { useState, useEffect } from "react";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
|
|
||||||
const DrivethruLandingPage = () => {
|
|
||||||
const features = [
|
|
||||||
{
|
|
||||||
title: "Easy Upload & Access",
|
|
||||||
description: "Drag & drop, instant access.",
|
|
||||||
icon: (
|
|
||||||
<svg
|
|
||||||
className="w-6 h-6"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Secure & Private",
|
|
||||||
description: "End-to-end encryption.",
|
|
||||||
icon: (
|
|
||||||
<svg
|
|
||||||
className="w-6 h-6"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Seamless Sharing",
|
|
||||||
description: "Share files with one click.",
|
|
||||||
icon: (
|
|
||||||
<svg
|
|
||||||
className="w-6 h-6"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Access Anywhere",
|
|
||||||
description: "Works on all devices.",
|
|
||||||
icon: (
|
|
||||||
<svg
|
|
||||||
className="w-6 h-6"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h.5A2.5 2.5 0 0020 5.5v-1.65"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const howItWorks = [
|
|
||||||
{
|
|
||||||
title: "Create an account",
|
|
||||||
description: "Sign up in seconds.",
|
|
||||||
icon: (
|
|
||||||
<svg
|
|
||||||
className="w-6 h-6"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Upload files",
|
|
||||||
description: "Drag & drop or select from your device.",
|
|
||||||
icon: (
|
|
||||||
<svg
|
|
||||||
className="w-6 h-6"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Manage files",
|
|
||||||
description: "Rename, move, or delete easily.",
|
|
||||||
icon: (
|
|
||||||
<svg
|
|
||||||
className="w-6 h-6"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Access anytime",
|
|
||||||
description: "Open files from any device.",
|
|
||||||
icon: (
|
|
||||||
<svg
|
|
||||||
className="w-6 h-6"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// UseEffect and handle....click function to handle set and handle the animation of features..
|
|
||||||
const [activeIndex, setActiveIndex] = useState(0);
|
|
||||||
const [isPaused, setIsPaused] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isPaused) {
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
setActiveIndex((prevIndex) => (prevIndex + 1) % features.length);
|
|
||||||
}, 3000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}
|
|
||||||
}, [isPaused, features.length]);
|
|
||||||
|
|
||||||
// Handle user interaction
|
|
||||||
const handleFeatureClick = (index) => {
|
|
||||||
setActiveIndex(index);
|
|
||||||
setIsPaused(true);
|
|
||||||
setTimeout(() => setIsPaused(false), 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const [activeIndex1, setActiveIndex1] = useState(0);
|
|
||||||
const [isPaused1, setIsPaused1] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isPaused1) {
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
setActiveIndex1((prevIndex) => (prevIndex + 1) % howItWorks.length);
|
|
||||||
}, 3000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}
|
|
||||||
}, [isPaused1, howItWorks.length]);
|
|
||||||
|
|
||||||
const handleFeatureClick1 = (index) => {
|
|
||||||
setActiveIndex1(index);
|
|
||||||
setIsPaused1(true);
|
|
||||||
setTimeout(() => setIsPaused1(false), 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen overflow-x-hidden bg-white">
|
|
||||||
{/* Hero Section */}
|
|
||||||
<div
|
|
||||||
id="about"
|
|
||||||
className="bg-gradient-to-r from-blue-50 to-white min-h-[90vh] flex items-center relative"
|
|
||||||
>
|
|
||||||
<div className="container mx-auto px-4 md:px-6 lg:px-8 relative z-10">
|
|
||||||
<div className="flex flex-col md:flex-row items-center gap-8 lg:gap-12">
|
|
||||||
{/* Left Side - Text Content */}
|
|
||||||
<div className="w-full md:w-1/2 text-center md:text-left order-1 md:order-1">
|
|
||||||
<div className="flex justify-center md:justify-start items-center mb-6 lg:mb-8">
|
|
||||||
<div className="text-cyan-400 mr-2 md:mr-3">
|
|
||||||
<svg
|
|
||||||
className="w-10 md:w-12 h-10 md:h-12"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M12 2L2 12L12 22L22 12L12 2Z"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="3"
|
|
||||||
fill="none"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-black">
|
|
||||||
Skycrate
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 className="text-xl md:text-2xl font-bold mb-4 md:mb-6 text-black">
|
|
||||||
Store, Access & Share Your Files — Anytime, Anywhere!
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<p className="text-gray-800 mb-6 md:mb-10 text-base md:text-lg">
|
|
||||||
A simple, secure, and fast cloud storage solution for all your
|
|
||||||
files. Upload, organize, and access with ease.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Buttons */}
|
|
||||||
<div className="flex flex-col sm:flex-row justify-center md:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
|
|
||||||
<Link
|
|
||||||
to="/signup"
|
|
||||||
className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium rounded-full px-6 py-4 md:px-8 md:py-6 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl"
|
|
||||||
>
|
|
||||||
Get Started
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="/login"
|
|
||||||
className="bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-full px-6 py-4 md:px-8 md:py-6 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl"
|
|
||||||
>
|
|
||||||
Login
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Right Side - Image */}
|
|
||||||
<div className="w-full md:w-1/2 flex justify-center order-2 md:order-1">
|
|
||||||
<div className="relative p-4 bg-gradient-to-r from-blue-50 to-emerald-50 rounded-2xl max-w-xs sm:max-w-lg md:max-w-md lg:max-w-lvh">
|
|
||||||
<img
|
|
||||||
src="/Dashboard.png"
|
|
||||||
alt="Skycrate Dashboard Interface"
|
|
||||||
className="w-full rounded-xl shadow-2xl transition-shadow duration-300"
|
|
||||||
/>
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-emerald-500/5 rounded-2xl pointer-events-none"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Features Section */}
|
|
||||||
<div
|
|
||||||
id="features"
|
|
||||||
className="w-full max-w-5xl mx-auto p-6 sm:p-8 bg-gray-100 rounded-lg shadow-lg"
|
|
||||||
>
|
|
||||||
<h2 className="text-3xl font-bold text-center mb-8">Key Features</h2>
|
|
||||||
<div className="flex flex-col-reverse md:flex-row items-center gap-8 lg:gap-12">
|
|
||||||
{/* Left Side - Image */}
|
|
||||||
<div className="w-full md:w-1/2 flex justify-center">
|
|
||||||
<img
|
|
||||||
src="/He.png"
|
|
||||||
alt="Feature Illustration"
|
|
||||||
className="w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg object-contain rounded-lg shadow-md"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right Side - Feature List */}
|
|
||||||
<div className="w-full md:w-1/2">
|
|
||||||
<div className="space-y-6">
|
|
||||||
{features.map((feature, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className={`p-5 border-2 rounded-lg cursor-pointer transition-all duration-500 ${
|
|
||||||
index === activeIndex
|
|
||||||
? "border-blue-500 bg-white shadow-lg scale-105"
|
|
||||||
: "border-gray-300"
|
|
||||||
}`}
|
|
||||||
onClick={() => handleFeatureClick(index)}
|
|
||||||
>
|
|
||||||
<div className="flex items-center space-x-4">
|
|
||||||
{feature.icon}
|
|
||||||
<h3 className="text-lg font-semibold">{feature.title}</h3>
|
|
||||||
</div>
|
|
||||||
{index === activeIndex && (
|
|
||||||
<p className="text-gray-600 mt-3 transition-opacity duration-500 opacity-100">
|
|
||||||
{feature.description}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* How It Works Section */}
|
|
||||||
<div
|
|
||||||
id="howItWorks"
|
|
||||||
className="w-full max-w-5xl mx-auto p-6 sm:p-8 bg-gray-100 rounded-lg shadow-lg"
|
|
||||||
>
|
|
||||||
<h2 className="text-3xl font-bold text-center mb-8">How It Works</h2>
|
|
||||||
<div className="flex flex-col md:flex-row items-center gap-8 lg:gap-12">
|
|
||||||
{/* Left Side - Feature List */}
|
|
||||||
<div className="w-full md:w-1/2">
|
|
||||||
<div className="space-y-6">
|
|
||||||
{howItWorks.map((howItWork, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className={`p-5 border-2 rounded-lg cursor-pointer transition-all duration-500 ${
|
|
||||||
index === activeIndex1
|
|
||||||
? "border-blue-500 bg-white shadow-lg scale-105"
|
|
||||||
: "border-gray-300"
|
|
||||||
}`}
|
|
||||||
onClick={() => handleFeatureClick1(index)}
|
|
||||||
>
|
|
||||||
<div className="flex items-center space-x-4">
|
|
||||||
{howItWork.icon}
|
|
||||||
<h3 className="text-lg font-semibold">{howItWork.title}</h3>
|
|
||||||
</div>
|
|
||||||
{index === activeIndex1 && (
|
|
||||||
<p className="text-gray-600 mt-3 transition-opacity duration-500 opacity-100">
|
|
||||||
{howItWork.description}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right Side - Image */}
|
|
||||||
<div className="w-full md:w-1/2 flex justify-center">
|
|
||||||
<img
|
|
||||||
src="/She.png"
|
|
||||||
alt="Feature Illustration"
|
|
||||||
className="w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg object-contain rounded-lg shadow-md"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DrivethruLandingPage;
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
import { Link } from "react-router-dom";
|
|
||||||
|
|
||||||
const NotFoundPage = () => {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center h-screen bg-gray-100 p-4">
|
|
||||||
{/* Placeholder SVG - Replace this with your SVG */}
|
|
||||||
<img
|
|
||||||
src="/404.png"
|
|
||||||
style={{ width: "30%", height: "auto" }}
|
|
||||||
alt="404 Not Found"
|
|
||||||
></img>
|
|
||||||
{/* Page number and title */}
|
|
||||||
<h2 className="text-2xl font-bold mb-4 mt-4">Page Not Found</h2>
|
|
||||||
|
|
||||||
{/* Description text */}
|
|
||||||
<p className="text-center text-gray-700 mb-6">
|
|
||||||
Sorry, we couldn't find the page you were looking for. It may have
|
|
||||||
been moved or deleted.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Call-to-action button */}
|
|
||||||
<Link
|
|
||||||
to="/"
|
|
||||||
className="px-6 py-2 bg-[#1877F2] text-white rounded hover:bg-blue-600 transition duration-200"
|
|
||||||
>
|
|
||||||
Go Home
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NotFoundPage;
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
import { createSlice } from "@reduxjs/toolkit";
|
|
||||||
|
|
||||||
const initialState = {
|
|
||||||
isUploading: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
const uploadStatusSlice = createSlice({
|
|
||||||
name: "uploadStatus",
|
|
||||||
initialState,
|
|
||||||
reducers: {
|
|
||||||
setIsUploading: (state) => {
|
|
||||||
state.isUploading = !state.isUploading;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const { setIsUploading } = uploadStatusSlice.actions;
|
|
||||||
export default uploadStatusSlice.reducer;
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
// src/redux/pathSlice.js
|
|
||||||
import { createSlice } from "@reduxjs/toolkit";
|
|
||||||
|
|
||||||
const initialState = {
|
|
||||||
currentPath: "/",
|
|
||||||
};
|
|
||||||
|
|
||||||
const pathSlice = createSlice({
|
|
||||||
name: "path",
|
|
||||||
initialState,
|
|
||||||
reducers: {
|
|
||||||
setCurrentPath: (state, action) => {
|
|
||||||
state.currentPath = action.payload;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const { setCurrentPath } = pathSlice.actions;
|
|
||||||
export default pathSlice.reducer;
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
// src/redux/store.js
|
|
||||||
import { configureStore } from "@reduxjs/toolkit";
|
|
||||||
import pathReducer from "./pathSlice";
|
|
||||||
import setIsUploadingReducer from "./UploadStatusSlice";
|
|
||||||
|
|
||||||
export const store = configureStore({
|
|
||||||
reducer: {
|
|
||||||
path: pathReducer,
|
|
||||||
upload: setIsUploadingReducer,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
import { defineConfig } from 'vite'
|
|
||||||
import react from '@vitejs/plugin-react'
|
|
||||||
import tailwindcss from '@tailwindcss/vite'
|
|
||||||
|
|
||||||
// https://vite.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [
|
|
||||||
react(),
|
|
||||||
tailwindcss(),
|
|
||||||
],
|
|
||||||
server: {
|
|
||||||
host: 'localhost',
|
|
||||||
port: 5173,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
# Skycrate
|
# CC-MINI (2025)
|
||||||
|
|
||||||
|
`deployment` branch is intended only for pushing deployment files.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
⚠️⚠️ The `frontend` branch has been locked since all changes have been successfully merged into the `main` branch. Please create a new feature branch derived from the `main` branch and submit a pull request for your changes. ⚠️⚠️
|
|
||||||
|
|||||||
@@ -0,0 +1,15 @@
|
|||||||
|
-----BEGIN PGP MESSAGE-----
|
||||||
|
|
||||||
|
hF4DgDtqgMBzTpASAQdAN9Hlcs7Jwec23tYTzz4fnF8+i8sq9hHUR/gwxt4bEzww
|
||||||
|
4/pSfujLd/Hjf95kf1xAJzKw2K0KxKEG6JpWoSNzblKROKnTDshiusYC3ZS4Lzva
|
||||||
|
1MDfAQkCEFd3bEysTE5nhDwCnguTGVMQLVeRcxCxXARG85BSZMCAPBbUzDk0pGU2
|
||||||
|
nl6aiDJEi6Dmh6Du4eIFHhqt+P6L6KKbfLwkclrJX8HI/6n5as4xgDc1rRyqs+11
|
||||||
|
HDzz+ZM+2T5cLExA5GqDD5o0hFAMURtKmaI/C6W5QWjuBs6cQCrFWE3XcfT5daYg
|
||||||
|
eG+y5d8ZvQOytsAkWX6GgSqV0YBRuqbVJh+JpBT9j62LndMR7We297gw+K7nM+/Y
|
||||||
|
r1ZBJFduIT/D4fZbhpf63bRTZO7BO9RGgHPhpubzkb14aznbJlGJjWSzbIetr2uT
|
||||||
|
NKb8JqUY+Kd89299rewXozdwYFfjkT8RYMxhdwlREQD4F9pweaLAaOYFDv7JCqbi
|
||||||
|
hhog/JLw7tv6vcaTOKEDsfnPZemOz65PT6hNevxOUsuHQ89hB7X8nJihXMZqPXva
|
||||||
|
X5dZTwVSzRBk6isrDUU3HqSP+HHYAygpm1uTKJFoavu4WCz9APFjiRoxYQQuA5Yz
|
||||||
|
HUqga7xBYTs3hOHwiSY56gzCm6CA3Z7JbQqcTOfkC8To9w==
|
||||||
|
=rSxA
|
||||||
|
-----END PGP MESSAGE-----
|
||||||
Reference in New Issue
Block a user