diff --git a/client/src/screens/browse/components/file-display/assets/cross.svg b/client/src/screens/browse/components/file-display/assets/cross.svg new file mode 100644 index 00000000..3f98f5d4 --- /dev/null +++ b/client/src/screens/browse/components/file-display/assets/cross.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/screens/browse/components/file-display/assets/tick.svg b/client/src/screens/browse/components/file-display/assets/tick.svg new file mode 100644 index 00000000..294d863c --- /dev/null +++ b/client/src/screens/browse/components/file-display/assets/tick.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/screens/browse/components/file-display/components/ConfirmDialog.jsx b/client/src/screens/browse/components/file-display/components/ConfirmDialog.jsx new file mode 100644 index 00000000..02ddfd47 --- /dev/null +++ b/client/src/screens/browse/components/file-display/components/ConfirmDialog.jsx @@ -0,0 +1,118 @@ +import React from "react"; +import tick from "../assets/tick.svg"; +import cross from "../assets/cross.svg"; + +const styles = { + overlay: { + position: "fixed", + top: 0, + left: 0, + right: 0, + bottom: 0, + backgroundColor: "rgba(0, 0, 0, 0.4)", + display: "flex", + alignItems: "center", + justifyContent: "center", + zIndex: 1000, + }, + dialog: { + backgroundColor: "#fff", + padding: "25px 30px", + borderRadius: "8px", + maxWidth: "400px", + width: "90%", + boxShadow: "0 4px 20px rgba(0, 0, 0, 0.2)", + textAlign: "center", + fontFamily: "sans-serif", + }, + + iconImage: { + width: "80px", + height: "80px", + margin:"1em", + }, + heading: { + fontSize:"2em", + }, + message: { + fontSize: "1em", + color: "#374151", + margin: "1em", + }, + buttonGroup: { + display: "flex", + justifyContent: "center", + gap: "1em", + }, + confirmBtn: { + display: "flex", + alignItems: "center", + backgroundColor: "#22c55e", + color: "#fff", + border: "none", + padding: "10px 18px", + borderRadius: "5px", + cursor: "pointer", + fontWeight: "bold", + fontSize:"1em", + }, + deleteBtn: { + display: "flex", + alignItems: "center", + backgroundColor: "#ef4444", + color: "#fff", + border: "none", + padding: "10px 18px", + borderRadius: "5px", + cursor: "pointer", + fontWeight: "bold", + fontSize:"1em", + }, + cancelBtn: { + backgroundColor: "#9ca3af", + color: "#fff", + border: "none", + padding: "10px 18px", + borderRadius: "5px", + cursor: "pointer", + fontWeight: "bold", + fontSize:"1em", + }, +}; + +const ConfirmDialog = ({ isOpen, type, onConfirm, onCancel }) => { + if (!isOpen) return null; + + const isDelete = type === "delete"; + + const message = isDelete + ? "Do you want to permanently delete this file? This action cannot be undone." + : "Do you want to verify this file? Once verified, it will be visible to all users."; + + return ( +
+
+ {isDelete +

Are you sure?

+

{message}

+
+ + +
+
+
+ ); +}; + +export default ConfirmDialog; diff --git a/client/src/screens/browse/components/file-display/index.jsx b/client/src/screens/browse/components/file-display/index.jsx index 2dce8a7c..63e0934a 100644 --- a/client/src/screens/browse/components/file-display/index.jsx +++ b/client/src/screens/browse/components/file-display/index.jsx @@ -1,4 +1,5 @@ import "./styles.scss"; +import React, { useState } from "react"; import { formatFileName, formatFileSize, formatFileType } from "../../../../utils/formatFile"; import { AddToFavourites } from "../../../../api/User"; import { toast } from "react-toastify"; @@ -12,11 +13,16 @@ import capitalise from "../../../../utils/capitalise.js"; import Share from "../../../share"; import { verifyFile, unverifyFile } from "../../../../api/File"; import { RemoveFileFromFolder, UpdateFileVerificationStatus } from "../../../../actions/filebrowser_actions.js"; +import ConfirmDialog from "./components/ConfirmDialog.jsx"; const FileDisplay = ({ file, path, code }) => { const user = useSelector((state) => state.user?.user); const fileSize = formatFileSize(file.size); const fileType = formatFileType(file.name); + const [showDialog, setShowDialog] = useState(false); + const [dialogType, setDialogType] = useState("verify"); + const [onConfirmAction, setOnConfirmAction] = useState(() => () => {}); + let name = file.name; let _dispName = formatFileName(name); let contributor = file.name; @@ -92,9 +98,11 @@ if (!file.isVerified && !currentUser?.isBR) { dispatch(UpdateFavourites(resp?.data?.favourites)); } }; -const handleVerify = async () => { - const confirmAction = window.confirm("Are you sure you want to verify this file?"); - if (!confirmAction) return; +const handleVerify = () => { +// const confirmAction = window.confirm("Are you sure you want to verify this file?"); +// if (!confirmAction) return; + setDialogType("verify"); + setOnConfirmAction(()=> async()=>{ try { console.log("Verifying file:", file._id); @@ -107,13 +115,18 @@ const handleVerify = async () => { } catch (err) { console.error("Error verifying:", err); toast.error("Failed to verify file."); + } finally{ + setShowDialog(false); } +}); + setShowDialog(true); }; -const handleUnverify = async () => { - const confirmAction = window.confirm("Are you sure you want to permanently delete this file?"); - if (!confirmAction) return; - +const handleUnverify = () => { +// const confirmAction = window.confirm("Are you sure you want to permanently delete this file?"); +// if (!confirmAction) return; + setDialogType("delete"); + setOnConfirmAction(()=>async()=>{ try { console.log("Deleting file:", file._id); await unverifyFile(file._id, file.fileId, currFolderId); @@ -124,7 +137,11 @@ const handleUnverify = async () => { } catch (err) { console.error("Error deleting:", err); toast.error("Failed to delete file."); - } + } finally { + setShowDialog(false); + } +}); + setShowDialog(true); }; @@ -188,6 +205,13 @@ const handleUnverify = async () => { + setShowDialog(false)} + /> + ); }; diff --git a/client/yarn.lock b/client/yarn.lock index 66057e70..b06eafa0 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -487,6 +487,11 @@ electron-to-chromium@^1.4.251: resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz" integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA== +esbuild-darwin-arm64@0.15.16: + version "0.15.16" + resolved "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.16.tgz" + integrity sha512-fMXaUr5ou0M4WnewBKsspMtX++C1yIa3nJ5R2LSbLCfJT3uFdcRoU/NZjoM4kOMKyOD9Sa/2vlgN8G07K3SJnw== + esbuild@^0.15.9: version "0.15.16" resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.15.16.tgz" @@ -551,6 +556,11 @@ form-data@^4.0.0: combined-stream "^1.0.8" mime-types "^2.1.12" +fsevents@~2.3.2: + version "2.3.2" + resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz" + integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== + function-bind@^1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz" diff --git a/server/yarn.lock b/server/yarn.lock index 12f358fc..46c8594e 100644 --- a/server/yarn.lock +++ b/server/yarn.lock @@ -1541,6 +1541,11 @@ fs.realpath@^1.0.0: resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== +fsevents@~2.3.2: + version "2.3.2" + resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz" + integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== + function-bind@^1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"