mirror of
https://github.com/stonith404/pingvin-share.git
synced 2024-10-01 00:50:10 +02:00
Added granular control of expiration + 12/24 hour modes
This commit is contained in:
Steve Tautonico
parent
56349c6f4c
commit
5988d5ffcc
@ -1,3 +1,4 @@
|
||||
SHOW_HOME_PAGE=true
|
||||
ALLOW_REGISTRATION=true
|
||||
MAX_FILE_SIZE=1000000000
|
||||
TWELVE_HOUR_TIME=false
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,125 +1,131 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
LoadingOverlay,
|
||||
Space,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
Title,
|
||||
ActionIcon,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
LoadingOverlay,
|
||||
Space,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { useClipboard } from "@mantine/hooks";
|
||||
import { useModals } from "@mantine/modals";
|
||||
import { NextLink } from "@mantine/next";
|
||||
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 { Link, Trash } from "tabler-icons-react";
|
||||
import {useEffect, useState} from "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();
|
||||
const clipboard = useClipboard();
|
||||
const modals = useModals();
|
||||
const clipboard = useClipboard();
|
||||
|
||||
const [shares, setShares] = useState<MyShare[]>();
|
||||
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).unix() === 0
|
||||
? "Never"
|
||||
: 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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
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).unix() === 0
|
||||
? "Never"
|
||||
: (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">
|
||||
<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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user