feat: allow unauthenticated uploads

2022-10-18 14:27:14 +02:00
parent 41c3bafbd7
commit 84d29dff68
17 changed files with 340 additions and 249 deletions
--- a/frontend/src/components/upload/modals/showCompletedUploadModal.tsx
+++ b/frontend/src/components/upload/modals/showCompletedUploadModal.tsx
@@ -0,0 +1,82 @@
+import {
+  ActionIcon,
+  Button,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { useClipboard } from "@mantine/hooks";
+import { useModals } from "@mantine/modals";
+import { ModalsContextProps } from "@mantine/modals/lib/context";
+import moment from "moment";
+import getConfig from "next/config";
+import { useRouter } from "next/router";
+import { TbCopy } from "react-icons/tb";
+import { Share } from "../../../types/share.type";
+import toast from "../../../utils/toast.util";
+
+const { publicRuntimeConfig } = getConfig();
+
+const showCompletedUploadModal = (modals: ModalsContextProps, share: Share) => {
+  return modals.openModal({
+    closeOnClickOutside: false,
+    withCloseButton: false,
+    closeOnEscape: false,
+    title: (
+      <Stack align="stretch" spacing={0}>
+        <Title order={4}>Share ready</Title>
+      </Stack>
+    ),
+    children: <Body share={share} />,
+  });
+};
+
+const Body = ({ share }: { share: Share }) => {
+  const clipboard = useClipboard({ timeout: 500 });
+  const modals = useModals();
+  const router = useRouter();
+  const link = `${window.location.origin}/share/${share.id}`;
+  return (
+    <Stack align="stretch">
+      <TextInput
+        variant="filled"
+        value={link}
+        rightSection={
+          <ActionIcon
+            onClick={() => {
+              clipboard.copy(link);
+              toast.success("Your link was copied to the keyboard.");
+            }}
+          >
+            <TbCopy />
+          </ActionIcon>
+        }
+      />
+      <Text
+        size="xs"
+        sx={(theme) => ({
+          color: theme.colors.gray[6],
+        })}
+      >
+        {/* If our share.expiration is timestamp 0, show a different message */}
+        {moment(share.expiration).unix() === 0
+          ? "This share will never expire."
+          : `This share will expire on ${moment(share.expiration).format(
+              "LLL"
+            )}`}
+      </Text>
+
+      <Button
+        onClick={() => {
+          modals.closeAll();
+          router.push("/upload");
+        }}
+      >
+        Done
+      </Button>
+    </Stack>
+  );
+};
+
+export default showCompletedUploadModal;