feat: improve share security

frontend/src/components/share/CreateUploadModalBody.tsx

@@ -31,7 +31,7 @@ const CreateUploadModalBody = ({
       .string()
       .required()
       .min(3)
-      .max(100)
+      .max(50)
       .matches(new RegExp("^[a-zA-Z0-9_-]*$"), {
         message: "Can only contain letters, numbers, underscores and hyphens",
       }),

frontend/src/components/share/DownloadAllButton.tsx

@@ -25,7 +25,7 @@ const DownloadAllButton = ({ shareId }: { shareId: string }) => {
           setIsZipReady(share.isZipReady);
           if (share.isZipReady) clearInterval(timer);
         })
-        .catch(() => {});
+        .catch(() => clearInterval(timer));
     }, 5000);
     return () => {
       clearInterval(timer);

frontend/src/pages/account/shares.tsx

@@ -14,9 +14,11 @@ import { useClipboard } from "@mantine/hooks";
 import { useModals } from "@mantine/modals";
 import { NextLink } from "@mantine/next";
 import moment from "moment";
-import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { useState } from "react";
 import { Link, Trash } from "tabler-icons-react";
 import Meta from "../../components/Meta";
+import useUser from "../../hooks/user.hook";
 import shareService from "../../services/share.service";
 import { MyShare } from "../../types/share.type";
 import toast from "../../utils/toast.util";
@@ -24,100 +26,108 @@ import toast from "../../utils/toast.util";
 const MyShares = () => {
   const modals = useModals();
   const clipboard = useClipboard();
+  const router = useRouter();
+  const user = useUser();
 
   const [shares, setShares] = useState<MyShare[]>();
 
-  useEffect(() => {
-    shareService.getMyShares().then((shares) => setShares(shares));
-  }, []);
+  // useEffect(() => {
+  //   shareService.getMyShares().then((shares) => setShares(shares));
+  // }, []);
 
-  if (!shares) return <LoadingOverlay visible />;
-  return (
-    <>
-      <Meta title="My shares" />
-      <Title mb={30} order={3}>
-        My shares
-      </Title>
-      {shares.length == 0 ? (
-        <Center style={{ height: "70vh" }}>
-          <Stack align="center" spacing={10}>
-            <Title order={3}>It's empty here 👀</Title>
-            <Text>You don't have any shares.</Text>
-            <Space h={5} />
-            <Button component={NextLink} href="/upload" variant="light">
-              Create one
-            </Button>
-          </Stack>
-        </Center>
-      ) : (
-        <Table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Visitors</th>
-              <th>Expires at</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            {shares.map((share) => (
-              <tr key={share.id}>
-                <td>{share.id}</td>
-                <td>{share.views}</td>
-                <td>
-                  {moment(share.expiration).format("MMMM DD YYYY, HH:mm")}
-                </td>
-                <td>
-                  <Group position="right">
-                    <ActionIcon
-                      color="victoria"
-                      variant="light"
-                      size={25}
-                      onClick={() => {
-                        clipboard.copy(
-                          `${window.location.origin}/share/${share.id}`
-                        );
-                        toast.success("Your link was copied to the keyboard.");
-                      }}
-                    >
-                      <Link />
-                    </ActionIcon>
-                    <ActionIcon
-                      color="red"
-                      variant="light"
-                      size={25}
-                      onClick={() => {
-                        modals.openConfirmModal({
-                          title: `Delete share ${share.id}`,
-                          children: (
-                            <Text size="sm">
-                              Do you really want to delete this share?
-                            </Text>
-                          ),
-                          confirmProps: {
-                            color: "red",
-                          },
-                          labels: { confirm: "Confirm", cancel: "Cancel" },
-                          onConfirm: () => {
-                            shareService.remove(share.id);
-                            setShares(
-                              shares.filter((item) => item.id !== share.id)
-                            );
-                          },
-                        });
-                      }}
-                    >
-                      <Trash />
-                    </ActionIcon>
-                  </Group>
-                </td>
+  if (!user) {
+    router.replace("/");
+  } else {
+    if (!shares) return <LoadingOverlay visible />;
+    return (
+      <>
+        <Meta title="My shares" />
+        <Title mb={30} order={3}>
+          My shares
+        </Title>
+        {shares.length == 0 ? (
+          <Center style={{ height: "70vh" }}>
+            <Stack align="center" spacing={10}>
+              <Title order={3}>It's empty here 👀</Title>
+              <Text>You don't have any shares.</Text>
+              <Space h={5} />
+              <Button component={NextLink} href="/upload" variant="light">
+                Create one
+              </Button>
+            </Stack>
+          </Center>
+        ) : (
+          <Table>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Visitors</th>
+                <th>Expires at</th>
+                <th></th>
               </tr>
-            ))}
-          </tbody>
-        </Table>
-      )}
-    </>
-  );
+            </thead>
+            <tbody>
+              {shares.map((share) => (
+                <tr key={share.id}>
+                  <td>{share.id}</td>
+                  <td>{share.views}</td>
+                  <td>
+                    {moment(share.expiration).format("MMMM DD YYYY, HH:mm")}
+                  </td>
+                  <td>
+                    <Group position="right">
+                      <ActionIcon
+                        color="victoria"
+                        variant="light"
+                        size={25}
+                        onClick={() => {
+                          clipboard.copy(
+                            `${window.location.origin}/share/${share.id}`
+                          );
+                          toast.success(
+                            "Your link was copied to the keyboard."
+                          );
+                        }}
+                      >
+                        <Link />
+                      </ActionIcon>
+                      <ActionIcon
+                        color="red"
+                        variant="light"
+                        size={25}
+                        onClick={() => {
+                          modals.openConfirmModal({
+                            title: `Delete share ${share.id}`,
+                            children: (
+                              <Text size="sm">
+                                Do you really want to delete this share?
+                              </Text>
+                            ),
+                            confirmProps: {
+                              color: "red",
+                            },
+                            labels: { confirm: "Confirm", cancel: "Cancel" },
+                            onConfirm: () => {
+                              shareService.remove(share.id);
+                              setShares(
+                                shares.filter((item) => item.id !== share.id)
+                              );
+                            },
+                          });
+                        }}
+                      >
+                        <Trash />
+                      </ActionIcon>
+                    </Group>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        )}
+      </>
+    );
+  }
 };
 
 export default MyShares;

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

@@ -15,12 +15,21 @@ const Share = () => {
   const shareId = router.query.shareId as string;
   const [fileList, setFileList] = useState<any[]>([]);
 
-  const submitPassword = async (password: string) => {
+  const getShareToken = async (password?: string) => {
     await shareService
-      .exchangeSharePasswordWithToken(shareId, password)
+      .getShareToken(shareId, password)
       .then(() => {
         modals.closeAll();
         getFiles();
+      })
+      .catch((e) => {
+        if (e.response.data.error == "share_max_views_exceeded") {
+          showErrorModal(
+            modals,
+            "Visitor limit exceeded",
+            "The visitor limit from this share has been exceeded."
+          );
+        }
       });
   };
 
@@ -38,14 +47,10 @@ const Share = () => {
             "Not found",
             "This share can't be found. Please check your link."
           );
+        } else if (error == "share_password_required") {
+          showEnterPasswordModal(modals, getShareToken);
         } else if (error == "share_token_required") {
-          showEnterPasswordModal(modals, submitPassword);
-        } else if (error == "share_max_views_exceeded") {
-          showErrorModal(
-            modals,
-            "Visitor limit exceeded",
-            "The visitor limit from this share has been exceeded."
-          );
+          getShareToken();
         } else if (error == "forbidden") {
           showErrorModal(
             modals,
@@ -69,9 +74,7 @@ const Share = () => {
         description="Look what I've shared with you."
       />
       <Group position="right" mb="lg">
-        <DownloadAllButton
-          shareId={shareId}
-        />
+        <DownloadAllButton shareId={shareId} />
       </Group>
       <FileList
         files={fileList}

frontend/src/services/share.service.ts

@@ -44,9 +44,8 @@ const getMyShares = async (): Promise<MyShare[]> => {
   return (await api.get("shares")).data;
 };
 
-const exchangeSharePasswordWithToken = async (id: string, password: string) => {
-  const { token } = (await api.post(`/shares/${id}/password`, { password }))
-    .data;
+const getShareToken = async (id: string, password?: string) => {
+  const { token } = (await api.post(`/shares/${id}/token`, { password })).data;
 
   localStorage.setItem(`share_${id}_token`, token);
 };
@@ -87,7 +86,7 @@ const uploadFile = async (
 export default {
   create,
   completeShare,
-  exchangeSharePasswordWithToken,
+  getShareToken,
   get,
   remove,
   getMetaData,