feat: reverse shares (#86)

* add first concept * add reverse share funcionality to frontend * allow creator to limit share expiration * moved reverse share in seperate module * add table to manage reverse shares * delete complete share if reverse share was deleted * optimize function names * add db migration * enable reverse share email notifications * fix config variable descriptions * fix migration for new installations
2023-01-26 13:44:04 +01:00
parent 1ceb07b89e
commit 4a5fb549c6
43 changed files with 1456 additions and 280 deletions
--- a/frontend/src/components/upload/Dropzone.tsx
+++ b/frontend/src/components/upload/Dropzone.tsx
@@ -4,7 +4,7 @@ import { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
 import { TbCloudUpload, TbUpload } from "react-icons/tb";
 import useConfig from "../../hooks/config.hook";
 import { FileUpload } from "../../types/File.type";
-import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
+import { byteToHumanSizeString } from "../../utils/fileSize.util";
 import toast from "../../utils/toast.util";

 const useStyles = createStyles((theme) => ({
@@ -33,10 +33,12 @@ const useStyles = createStyles((theme) => ({

 const Dropzone = ({
  isUploading,
+  maxShareSize,
  files,
  setFiles,
 }: {
  isUploading: boolean;
+  maxShareSize: number;
  files: FileUpload[];
  setFiles: Dispatch<SetStateAction<FileUpload[]>>;
 }) => {
@@ -58,10 +60,10 @@ const Dropzone = ({
            0
          );

-          if (fileSizeSum > config.get("MAX_SHARE_SIZE")) {
+          if (fileSizeSum > maxShareSize) {
            toast.error(
-              `Your files exceed the maximum share size of ${byteStringToHumanSizeString(
-                config.get("MAX_SHARE_SIZE")
+              `Your files exceed the maximum share size of ${byteToHumanSizeString(
+                maxShareSize
              )}.`
            );
          } else {
@@ -84,9 +86,8 @@ const Dropzone = ({
          </Text>
          <Text align="center" size="sm" mt="xs" color="dimmed">
            Drag&apos;n&apos;drop files here to start your share. We can accept
-            only files that are less than{" "}
-            {byteStringToHumanSizeString(config.get("MAX_SHARE_SIZE"))} in
-            total.
+            only files that are less than {byteToHumanSizeString(maxShareSize)}{" "}
+            in total.
          </Text>
        </div>
      </MantineDropzone>
--- a/frontend/src/components/upload/ExpirationPreview.tsx
+++ b/frontend/src/components/upload/ExpirationPreview.tsx
@@ -1,19 +0,0 @@
-import moment from "moment";
-
-const ExpirationPreview = ({ form }: { form: any }) => {
-  const value = form.values.never_expires
-    ? "never"
-    : form.values.expiration_num + form.values.expiration_unit;
-  if (value === "never") return "This share will never expire.";
-
-  const expirationDate = moment()
-    .add(
-      value.split("-")[0],
-      value.split("-")[1] as moment.unitOfTime.DurationConstructor
-    )
-    .toDate();
-
-  return `This share will expire on ${moment(expirationDate).format("LLL")}`;
-};
-
-export default ExpirationPreview;
--- a/frontend/src/components/upload/FileList.tsx
+++ b/frontend/src/components/upload/FileList.tsx
@@ -2,7 +2,7 @@ import { ActionIcon, Table } from "@mantine/core";
 import { Dispatch, SetStateAction } from "react";
 import { TbTrash } from "react-icons/tb";
 import { FileUpload } from "../../types/File.type";
-import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
+import { byteToHumanSizeString } from "../../utils/fileSize.util";
 import UploadProgressIndicator from "./UploadProgressIndicator";

 const FileList = ({
@@ -19,7 +19,7 @@ const FileList = ({
  const rows = files.map((file, i) => (
    <tr key={i}>
      <td>{file.name}</td>
-      <td>{byteStringToHumanSizeString(file.size.toString())}</td>
+      <td>{byteToHumanSizeString(file.size)}</td>
      <td>
        {file.uploadingProgress == 0 ? (
          <ActionIcon
--- a/frontend/src/components/upload/modals/showCreateUploadModal.tsx
+++ b/frontend/src/components/upload/modals/showCreateUploadModal.tsx
@@ -5,7 +5,6 @@ import {
  Checkbox,
  Col,
  Grid,
-  Group,
  MultiSelect,
  NumberInput,
  PasswordInput,
@@ -24,12 +23,13 @@ import { TbAlertCircle } from "react-icons/tb";
 import * as yup from "yup";
 import shareService from "../../../services/share.service";
 import { CreateShare } from "../../../types/share.type";
-import ExpirationPreview from "../ExpirationPreview";
+import { getExpirationPreview } from "../../../utils/date.util";

 const showCreateUploadModal = (
  modals: ModalsContextProps,
  options: {
    isUserSignedIn: boolean;
+    isReverseShare: boolean;
    appUrl: string;
    allowUnauthenticatedShares: boolean;
    enableEmailRecepients: boolean;
@@ -54,6 +54,7 @@ const CreateUploadModalBody = ({
  uploadCallback: (createShare: CreateShare) => void;
  options: {
    isUserSignedIn: boolean;
+    isReverseShare: boolean;
    appUrl: string;
    allowUnauthenticatedShares: boolean;
    enableEmailRecepients: boolean;
@@ -89,7 +90,7 @@ const CreateUploadModalBody = ({
    validate: yupResolver(validationSchema),
  });
  return (
-    <Group>
+    <>
      {showNotSignedInAlert && !options.isUserSignedIn && (
        <Alert
          withCloseButton
@@ -161,72 +162,78 @@ const CreateUploadModalBody = ({
            {options.appUrl}/share/
            {form.values.link == "" ? "myAwesomeShare" : form.values.link}
          </Text>
-          <Grid align={form.errors.link ? "center" : "flex-end"}>
-            <Col xs={6}>
-              <NumberInput
-                min={1}
-                max={99999}
-                precision={0}
-                variant="filled"
-                label="Expiration"
-                placeholder="n"
-                disabled={form.values.never_expires}
-                {...form.getInputProps("expiration_num")}
+          {!options.isReverseShare && (
+            <>
+              <Grid align={form.errors.link ? "center" : "flex-end"}>
+                <Col xs={6}>
+                  <NumberInput
+                    min={1}
+                    max={99999}
+                    precision={0}
+                    variant="filled"
+                    label="Expiration"
+                    placeholder="n"
+                    disabled={form.values.never_expires}
+                    {...form.getInputProps("expiration_num")}
+                  />
+                </Col>
+                <Col xs={6}>
+                  <Select
+                    disabled={form.values.never_expires}
+                    {...form.getInputProps("expiration_unit")}
+                    data={[
+                      // Set the label to singular if the number is 1, else plural
+                      {
+                        value: "-minutes",
+                        label:
+                          "Minute" +
+                          (form.values.expiration_num == 1 ? "" : "s"),
+                      },
+                      {
+                        value: "-hours",
+                        label:
+                          "Hour" + (form.values.expiration_num == 1 ? "" : "s"),
+                      },
+                      {
+                        value: "-days",
+                        label:
+                          "Day" + (form.values.expiration_num == 1 ? "" : "s"),
+                      },
+                      {
+                        value: "-weeks",
+                        label:
+                          "Week" + (form.values.expiration_num == 1 ? "" : "s"),
+                      },
+                      {
+                        value: "-months",
+                        label:
+                          "Month" +
+                          (form.values.expiration_num == 1 ? "" : "s"),
+                      },
+                      {
+                        value: "-years",
+                        label:
+                          "Year" + (form.values.expiration_num == 1 ? "" : "s"),
+                      },
+                    ]}
+                  />
+                </Col>
+              </Grid>
+              <Checkbox
+                label="Never Expires"
+                {...form.getInputProps("never_expires")}
              />
-            </Col>
-            <Col xs={6}>
-              <Select
-                disabled={form.values.never_expires}
-                {...form.getInputProps("expiration_unit")}
-                data={[
-                  // Set the label to singular if the number is 1, else plural
-                  {
-                    value: "-minutes",
-                    label:
-                      "Minute" + (form.values.expiration_num == 1 ? "" : "s"),
-                  },
-                  {
-                    value: "-hours",
-                    label:
-                      "Hour" + (form.values.expiration_num == 1 ? "" : "s"),
-                  },
-                  {
-                    value: "-days",
-                    label: "Day" + (form.values.expiration_num == 1 ? "" : "s"),
-                  },
-                  {
-                    value: "-weeks",
-                    label:
-                      "Week" + (form.values.expiration_num == 1 ? "" : "s"),
-                  },
-                  {
-                    value: "-months",
-                    label:
-                      "Month" + (form.values.expiration_num == 1 ? "" : "s"),
-                  },
-                  {
-                    value: "-years",
-                    label:
-                      "Year" + (form.values.expiration_num == 1 ? "" : "s"),
-                  },
-                ]}
-              />
-            </Col>
-          </Grid>
-          <Checkbox
-            label="Never Expires"
-            {...form.getInputProps("never_expires")}
-          />
-          {/* Preview expiration date text */}
-          <Text
-            italic
-            size="xs"
-            sx={(theme) => ({
-              color: theme.colors.gray[6],
-            })}
-          >
-            {ExpirationPreview({ form })}
-          </Text>
+              <Text
+                italic
+                size="xs"
+                sx={(theme) => ({
+                  color: theme.colors.gray[6],
+                })}
+              >
+                {getExpirationPreview("share", form)}
+              </Text>
+            </>
+          )}
          <Accordion>
            <Accordion.Item value="description" sx={{ borderBottom: "none" }}>
              <Accordion.Control>Description</Accordion.Control>
@@ -296,7 +303,7 @@ const CreateUploadModalBody = ({
          <Button type="submit">Share</Button>
        </Stack>
      </form>
-    </Group>
+    </>
  );
 };