feat: add confirm dialog for leaving the page if an upload is in progress

frontend/src/pages/share/[shareId]/edit.tsx

@@ -2,12 +2,13 @@ import { LoadingOverlay } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { GetServerSidePropsContext } from "next";
 import { useEffect, useState } from "react";
+import Meta from "../../../components/Meta";
 import showErrorModal from "../../../components/share/showErrorModal";
+import EditableUpload from "../../../components/upload/EditableUpload";
+import useConfirmLeave from "../../../hooks/confirm-leave.hook";
+import useTranslate from "../../../hooks/useTranslate.hook";
 import shareService from "../../../services/share.service";
 import { Share as ShareType } from "../../../types/share.type";
-import useTranslate from "../../../hooks/useTranslate.hook";
-import EditableUpload from "../../../components/upload/EditableUpload";
-import Meta from "../../../components/Meta";
 
 export function getServerSideProps(context: GetServerSidePropsContext) {
   return {
@@ -18,9 +19,15 @@ export function getServerSideProps(context: GetServerSidePropsContext) {
 const Share = ({ shareId }: { shareId: string }) => {
   const t = useTranslate();
   const modals = useModals();
+
   const [isLoading, setIsLoading] = useState(true);
   const [share, setShare] = useState<ShareType>();
 
+  useConfirmLeave({
+    message: t("upload.notify.confirm-leave"),
+    enabled: isLoading,
+  });
+
   useEffect(() => {
     shareService
       .getFromOwner(shareId)

frontend/src/pages/upload/index.tsx

@@ -11,6 +11,7 @@ import FileList from "../../components/upload/FileList";
 import showCompletedUploadModal from "../../components/upload/modals/showCompletedUploadModal";
 import showCreateUploadModal from "../../components/upload/modals/showCreateUploadModal";
 import useConfig from "../../hooks/config.hook";
+import useConfirmLeave from "../../hooks/confirm-leave.hook";
 import useTranslate from "../../hooks/useTranslate.hook";
 import useUser from "../../hooks/user.hook";
 import shareService from "../../services/share.service";
@@ -39,6 +40,11 @@ const Upload = ({
   const [files, setFiles] = useState<FileUpload[]>([]);
   const [isUploading, setisUploading] = useState(false);
 
+  useConfirmLeave({
+    message: t("upload.notify.confirm-leave"),
+    enabled: isUploading,
+  });
+
   const chunkSize = useRef(parseInt(config.get("share.chunkSize")));
 
   maxShareSize ??= parseInt(config.get("share.maxSize"));