Added error modal for share and download

safeshare/safeshare-frontend/package-lock.json

@@ -15,6 +15,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-drag-drop-files": "^2.3.10",
+        "react-modal": "^3.16.1",
         "react-router-dom": "^6.17.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
@@ -8121,6 +8122,11 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "node_modules/exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -14838,6 +14844,29 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -17149,6 +17178,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

safeshare/safeshare-frontend/package.json

@@ -10,6 +10,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-drag-drop-files": "^2.3.10",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

safeshare/safeshare-frontend/src/pages/downloadFile.js

@@ -1,10 +1,38 @@
 import React, {useState} from 'react';
 import axios from 'axios';
 import {Link} from 'react-router-dom';
+import Modal from 'react-modal';
+
+const customStyles = {
+    content: {
+        top: '50%',
+        left: '50%',
+        right: 'auto',
+        bottom: 'auto',
+        marginRight: '-50%',
+        transform: 'translate(-50%, -50%)',
+    },
+};
 
 function DownloadFile() {
     const [passcode, setPasscode] = useState('');
+    const [errorMsg, setErrorcode] = useState('');
     const [fileData, setFileData] = useState(null);
+    let subtitle;
+    const [modalIsOpen, setIsOpen] = React.useState(false);
+
+    function openModal() {
+        setIsOpen(true);
+    }
+
+    function afterOpenModal() {
+        // references are now sync'd and can be accessed.
+        subtitle.style.color = '#f00';
+    }
+
+    function closeModal() {
+        setIsOpen(false);
+    }
 
     const handlePasscodeChange = (e) => {
         setPasscode(e.target.value);
@@ -43,6 +71,9 @@ function DownloadFile() {
                 })
                 .catch(error => {
                     console.log(error);
+                    openModal()
+                    // change the error message once error msg add into response
+                    setErrorcode("File not found")
                 });
         }
     };
@@ -50,6 +81,22 @@ function DownloadFile() {
 
     return (
         <div className="h-screen flex flex-col items-center justify-center bg-gray-100">
+            <div>
+                <Modal
+                    isOpen={modalIsOpen}
+                    onAfterOpen={afterOpenModal}
+                    onRequestClose={closeModal}
+                    style={customStyles}
+                    contentLabel="Error Modal"
+                    ariaHideApp={false}
+                >
+                    <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Error</h2>
+                    <div className="sm (640px) py-2">
+                        {errorMsg}
+                    </div>
+                    <button className="bg-red-500 hover:bg-blue-600 text-white py-2 px-4 mx-2 rounded-lg w-48" onClick={closeModal}>close</button>
+                </Modal>
+            </div>
             <div className="border p-6 rounded-lg bg-white shadow-md w-96 relative">
                 <Link to="/" className="absolute top-2 right-2 text-gray-600 text-sm hover:text-blue-600">
                     Back

safeshare/safeshare-frontend/src/pages/shareFile.js

@@ -2,13 +2,41 @@ import React, { useState } from 'react';
 import { FileUploader } from 'react-drag-drop-files';
 import axios from 'axios';
 import { Link } from 'react-router-dom';
+import Modal from 'react-modal';
+
+const customStyles = {
+    content: {
+        top: '50%',
+        left: '50%',
+        right: 'auto',
+        bottom: 'auto',
+        marginRight: '-50%',
+        transform: 'translate(-50%, -50%)',
+    },
+};
 
 function ShareFile() {
     const [file, setFile] = useState(null);
     const [passcode, setPasscode] = useState('');
+    const [errorMsg, setErrorcode] = useState('');
     const [ttl, setTtl] = useState('');
     const [shareableLink, setShareableLink] = useState('');
     const [notification, setNotification] = useState('');
+    let subtitle;
+    const [modalIsOpen, setIsOpen] = React.useState(false);
+
+    function openModal() {
+        setIsOpen(true);
+    }
+
+    function afterOpenModal() {
+        // references are now sync'd and can be accessed.
+        subtitle.style.color = '#f00';
+    }
+
+    function closeModal() {
+        setIsOpen(false);
+    }
 
     const handleFileUpload = (file) => {
         setFile(file);
@@ -43,6 +71,8 @@ function ShareFile() {
                 .catch((error) => {
                     // Handle errors here
                     console.error('File upload failed', error);
+                    openModal()
+                    setErrorcode(error.response.data.msg)
                 });
         }
     };
@@ -58,6 +88,22 @@ function ShareFile() {
 
     return (
         <div className="h-screen flex flex-col items-center justify-center bg-gray-100">
+            <div>
+                <Modal
+                    isOpen={modalIsOpen}
+                    onAfterOpen={afterOpenModal}
+                    onRequestClose={closeModal}
+                    style={customStyles}
+                    contentLabel="Error Modal"
+                    ariaHideApp={false}
+                >
+                    <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Error</h2>
+                    <div className="sm (640px) py-2">
+                        {errorMsg}
+                    </div>
+                    <button className="bg-red-500 hover:bg-blue-600 text-white py-2 px-4 mx-2 rounded-lg w-48" onClick={closeModal}>close</button>
+                </Modal>
+            </div>
             <div className="border p-6 rounded-lg bg-white shadow-md w-96 relative">
                 <Link to="/" className="absolute top-2 right-2 text-gray-600 text-sm hover:text-blue-600">
                     Back
@@ -93,7 +139,7 @@ function ShareFile() {
                         <label className="block text-sm font-medium text-gray-700">
                             Download Here:
                         </label>
-                        <a href={shareableLink} className="text-lg font-bold text-blue-600">{shareableLink}</a>
+                        <a href={shareableLink} className="px-6 py-3 text-blue-100 no-underline bg-blue-500 rounded hover:bg-blue-600 hover:underline hover:text-blue-200">Download file</a>
                     </div>
                 )}
                 {notification && (