Added granular control of expiration + 12/24 hour modes
This commit is contained in:
Steve Tautonico
@@ -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 { useModals } from "@mantine/modals";
|
||||
import {useForm, yupResolver} from "@mantine/form";
|
||||
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
|
||||
label="Expiration"
|
||||
{...form.getInputProps("expiration")}
|
||||
data={[
|
||||
{value: "never", label: "Never"},
|
||||
{value: "10-minutes", label: "10 Minutes"},
|
||||
{value: "1-hour", label: "1 Hour"},
|
||||
{value: "1-day", label: "1 Day"},
|
||||
{value: "1-week", label: "1 Week"},
|
||||
{value: "1-month", label: "1 Month"},
|
||||
]}
|
||||
/>
|
||||
<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")} />
|
||||
|
||||
{/* 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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user