Improved UI for verification/deletion of files

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 (
+    <div style={styles.overlay}>
+      <div style={styles.dialog}>
+          <img
+            src={isDelete ? cross : tick}
+            alt={isDelete ? "Delete" : "Verify"}
+            style={styles.iconImage}
+          />
+        <h3 style={styles.heading}>Are you sure?</h3>
+        <p style={styles.message}>{message}</p>
+        <div style={styles.buttonGroup}>
+          <button
+            style={isDelete ? styles.deleteBtn : styles.confirmBtn}
+            onClick={onConfirm}
+          >
+            {isDelete ? "Delete" : "Verify"}
+          </button>
+          <button style={styles.cancelBtn} onClick={onCancel}>
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmDialog;

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 () => {
                 </div>
             </div>
             <Share link={`${clientRoot}/browse/${currCourseCode.toLowerCase()}/${currFolderId}`} />
+            <ConfirmDialog
+            isOpen={showDialog}
+            type={dialogType}
+            onConfirm={onConfirmAction}
+            onCancel={() => setShowDialog(false)}
+            />
+
         </div>
     );
 };

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"

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"