Added granular control of expiration + 12/24 hour modes

frontend/.env.example

@@ -1,3 +1,4 @@
 SHOW_HOME_PAGE=true
 ALLOW_REGISTRATION=true
 MAX_FILE_SIZE=1000000000
+TWELVE_HOUR_TIME=false

frontend/next.config.js

@@ -5,7 +5,8 @@ const nextConfig = {
     ALLOW_REGISTRATION: process.env.ALLOW_REGISTRATION,
     SHOW_HOME_PAGE: process.env.SHOW_HOME_PAGE,
     MAX_FILE_SIZE: process.env.MAX_FILE_SIZE,
-    BACKEND_URL: process.env.BACKEND_URL
+    BACKEND_URL: process.env.BACKEND_URL,
+    TWELVE_HOUR_TIME: process.env.TWELVE_HOUR_TIME
   }
 }
 

frontend/src/components/share/CreateUploadModalBody.tsx

@@ -2,6 +2,7 @@ import {
     Accordion,
     Button,
     Col,
+    Checkbox,
     Grid,
     NumberInput,
     PasswordInput,
@@ -10,11 +11,32 @@ import {
     Text,
     TextInput,
 } from "@mantine/core";
-import { useForm, yupResolver } from "@mantine/form";
+import {useForm, yupResolver} from "@mantine/form";
-import { useModals } from "@mantine/modals";
+import {useModals} from "@mantine/modals";
 import * as yup from "yup";
 import shareService from "../../services/share.service";
-import { ShareSecurity } from "../../types/share.type";
+import {ShareSecurity} from "../../types/share.type";
+import moment from "moment";
+import getConfig from "next/config";
+
+const {publicRuntimeConfig} = getConfig();
+
+const PreviewExpiration = ({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();
+
+    if (publicRuntimeConfig.TWELVE_HOUR_TIME === "true")
+        return `This share will expire on ${moment(expirationDate).format("MMMM Do YYYY, h:mm a")}`;
+    else
+        return `This share will expire on ${moment(expirationDate).format("MMMM DD YYYY, HH:mm")}`;
+}
 
 const CreateUploadModalBody = ({
                                    uploadCallback,
@@ -44,7 +66,9 @@ const CreateUploadModalBody = ({
 
             password: undefined,
             maxViews: undefined,
-            expiration: "1-day",
+            expiration_num: 1,
+            expiration_unit: "-days",
+            never_expires: false
         },
         validate: yupResolver(validationSchema),
     });
@@ -55,7 +79,8 @@ const CreateUploadModalBody = ({
                 if (!(await shareService.isShareIdAvailable(values.link))) {
                     form.setFieldError("link", "This link is already in use");
                 } else {
-                    uploadCallback(values.link, values.expiration, {
+                    const expiration = form.values.never_expires ? "never" : form.values.expiration_num + form.values.expiration_unit;
+                    uploadCallback(values.link, expiration, {
                         password: values.password,
                         maxViews: values.maxViews,
                     });
@@ -90,7 +115,7 @@ const CreateUploadModalBody = ({
                     </Col>
                 </Grid>
 
-                <Text
+                <Text italic
                     size="xs"
                     sx={(theme) => ({
                         color: theme.colors.gray[6],
@@ -99,18 +124,47 @@ const CreateUploadModalBody = ({
                     {window.location.origin}/share/
                     {form.values.link == "" ? "myAwesomeShare" : form.values.link}
                 </Text>
-                <Select
+                <Grid align={form.errors.link ? "center" : "flex-end"}>
+                    <Col xs={6}>
+                        <NumberInput
+                            min={1}
+                            max={99999}
+                            precision={0}
+                            variant="filled"
                             label="Expiration"
-                    {...form.getInputProps("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={[
-                        {value: "never", label: "Never"},
+                                // Set the label to singular if the number is 1, else plural
-                        {value: "10-minutes", label: "10 Minutes"},
+                                {value: "-minutes", label: "Minute" + (form.values.expiration_num == 1 ? "" : "s")},
-                        {value: "1-hour", label: "1 Hour"},
+                                {value: "-hours", label: "Hour" + (form.values.expiration_num == 1 ? "" : "s")},
-                        {value: "1-day", label: "1 Day"},
+                                {value: "-days", label: "Day" + (form.values.expiration_num == 1 ? "" : "s")},
-                        {value: "1-week", label: "1 Week"},
+                                {value: "-weeks", label: "Week" + (form.values.expiration_num == 1 ? "" : "s")},
-                        {value: "1-month", label: "1 Month"},
+                                {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],
+                    })}
+                >
+                    {PreviewExpiration({form})}
+                </Text>
+
                 <Accordion>
                     <Accordion.Item value="security" sx={{borderBottom: "none"}}>
                         <Accordion.Control>Security options</Accordion.Control>

frontend/src/components/upload/showCompletedUploadModal.tsx

@@ -14,6 +14,9 @@ import { useRouter } from "next/router";
 import { Copy } from "tabler-icons-react";
 import { Share } from "../../types/share.type";
 import toast from "../../utils/toast.util";
+import getConfig from "next/config";
+
+const {publicRuntimeConfig} = getConfig();
 
 const showCompletedUploadModal = (
     modals: ModalsContextProps,
@@ -62,7 +65,10 @@ const Body = ({share}: { share: Share }) => {
                 {/* 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")}`}
+                    : `This share will expire on ${
+                        (publicRuntimeConfig.TWELVE_HOUR_TIME === "true")
+                            ? moment(share.expiration).format("MMMM Do YYYY, h:mm a")
+                            : moment(share.expiration).format("MMMM DD YYYY, HH:mm")}`}
             </Text>
 
             <Button

frontend/src/pages/account/shares.tsx

@@ -10,16 +10,19 @@ import {
     Text,
     Title,
 } from "@mantine/core";
-import { useClipboard } from "@mantine/hooks";
+import {useClipboard} from "@mantine/hooks";
-import { useModals } from "@mantine/modals";
+import {useModals} from "@mantine/modals";
-import { NextLink } from "@mantine/next";
+import {NextLink} from "@mantine/next";
 import moment from "moment";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
-import { Link, Trash } from "tabler-icons-react";
+import {Link, Trash} from "tabler-icons-react";
 import Meta from "../../components/Meta";
 import shareService from "../../services/share.service";
-import { MyShare } from "../../types/share.type";
+import {MyShare} from "../../types/share.type";
 import toast from "../../utils/toast.util";
+import getConfig from "next/config";
+
+const {publicRuntimeConfig} = getConfig();
 
 const MyShares = () => {
     const modals = useModals();
@@ -31,19 +34,19 @@ const MyShares = () => {
         shareService.getMyShares().then((shares) => setShares(shares));
     }, []);
 
-  if (!shares) return <LoadingOverlay visible />;
+    if (!shares) return <LoadingOverlay visible/>;
     return (
         <>
-      <Meta title="My shares" />
+            <Meta title="My shares"/>
             <Title mb={30} order={3}>
                 My shares
             </Title>
             {shares.length == 0 ? (
-        <Center style={{ height: "70vh" }}>
+                <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} />
+                        <Space h={5}/>
                         <Button component={NextLink} href="/upload" variant="light">
                             Create one
                         </Button>
@@ -67,7 +70,10 @@ const MyShares = () => {
                             <td>
                                 {moment(share.expiration).unix() === 0
                                     ? "Never"
-                      : moment(share.expiration).format("MMMM DD YYYY, HH:mm")}
+                                    : (publicRuntimeConfig.TWELVE_HOUR_TIME === "true")
+                                        ? moment(share.expiration).format("MMMM Do YYYY, h:mm a")
+                                        : moment(share.expiration).format("MMMM DD YYYY, HH:mm")
+                                }
                             </td>
                             <td>
                                 <Group position="right">
@@ -82,7 +88,7 @@ const MyShares = () => {
                                             toast.success("Your link was copied to the keyboard.");
                                         }}
                                     >
-                      <Link />
+                                        <Link/>
                                     </ActionIcon>
                                     <ActionIcon
                                         color="red"
@@ -99,7 +105,7 @@ const MyShares = () => {
                                                 confirmProps: {
                                                     color: "red",
                                                 },
-                          labels: { confirm: "Confirm", cancel: "Cancel" },
+                                                labels: {confirm: "Confirm", cancel: "Cancel"},
                                                 onConfirm: () => {
                                                     shareService.remove(share.id);
                                                     setShares(
@@ -109,7 +115,7 @@ const MyShares = () => {
                                             });
                                         }}
                                     >
-                      <Trash />
+                                        <Trash/>
                                     </ActionIcon>
                                 </Group>
                             </td>