iio/pingvin-share
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: Added "never" expiration date

Browse Source
This commit is contained in:
Steve Tautonico
2022-10-12 16:59:04 -04:00
parent 69ee88aebc
commit 56349c6f4c
9 changed files with 406 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
frontend/src/components/share/CreateUploadModalBody.tsx
View File

@@ -1,14 +1,14 @@
import {
Accordion,
Button,
Col,
Grid,
NumberInput,
PasswordInput,
Select,
Stack,
Text,
TextInput,
Accordion,
Button,
Col,
Grid,
NumberInput,
PasswordInput,
Select,
Stack,
Text,
TextInput,
} from "@mantine/core";
import { useForm, yupResolver } from "@mantine/form";
import { useModals } from "@mantine/modals";
@@ -17,129 +17,127 @@ import shareService from "../../services/share.service";
import { ShareSecurity } from "../../types/share.type";
const CreateUploadModalBody = ({
uploadCallback,
}: {
uploadCallback: (
id: string,
expiration: string,
security: ShareSecurity
) => void;
uploadCallback,
}: {
uploadCallback: (
id: string,
expiration: string,
security: ShareSecurity
) => void;
}) => {
const modals = useModals();
const validationSchema = yup.object().shape({
link: yup
.string()
.required()
.min(3)
.max(100)
.matches(new RegExp("^[a-zA-Z0-9_-]*$"), {
message: "Can only contain letters, numbers, underscores and hyphens",
}),
password: yup.string().min(3).max(30),
maxViews: yup.number().min(1),
});
const form = useForm({
initialValues: {
link: "",
const modals = useModals();
const validationSchema = yup.object().shape({
link: yup
.string()
.required()
.min(3)
.max(100)
.matches(new RegExp("^[a-zA-Z0-9_-]*$"), {
message: "Can only contain letters, numbers, underscores and hyphens",
}),
password: yup.string().min(3).max(30),
maxViews: yup.number().min(1),
});
const form = useForm({
initialValues: {
link: "",
password: undefined,
maxViews: undefined,
expiration: "1-day",
},
validate: yupResolver(validationSchema),
});
password: undefined,
maxViews: undefined,
expiration: "1-day",
},
validate: yupResolver(validationSchema),
});
return (
<form
onSubmit={form.onSubmit(async (values) => {
if (!(await shareService.isShareIdAvailable(values.link))) {
form.setFieldError("link", "This link is already in use");
} else {
uploadCallback(values.link, values.expiration, {
password: values.password,
maxViews: values.maxViews,
});
modals.closeAll();
}
})}
>
<Stack align="stretch">
<Grid align={form.errors.link ? "center" : "flex-end"}>
<Col xs={9}>
<TextInput
variant="filled"
label="Link"
placeholder="myAwesomeShare"
{...form.getInputProps("link")}
/>
</Col>
<Col xs={3}>
<Button
variant="outline"
onClick={() =>
form.setFieldValue(
"link",
Buffer.from(Math.random().toString(), "utf8")
.toString("base64")
.substr(10, 7)
)
}
>
Generate
</Button>
</Col>
</Grid>
<Text
size="xs"
sx={(theme) => ({
color: theme.colors.gray[6],
})}
return (
<form
onSubmit={form.onSubmit(async (values) => {
if (!(await shareService.isShareIdAvailable(values.link))) {
form.setFieldError("link", "This link is already in use");
} else {
uploadCallback(values.link, values.expiration, {
password: values.password,
maxViews: values.maxViews,
});
modals.closeAll();
}
})}
>
{window.location.origin}/share/
{form.values.link == "" ? "myAwesomeShare" : form.values.link}
</Text>
<Select
label="Expiration"
{...form.getInputProps("expiration")}
data={[
{
value: "10-minutes",
label: "10 Minutes",
},
{ value: "1-hour", label: "1 Hour" },
{ value: "1-day", label: "1 Day" },
{ value: "1-week".toString(), label: "1 Week" },
{ value: "1-month", label: "1 Month" },
]}
/>
<Accordion>
<Accordion.Item value="security" sx={{ borderBottom: "none" }}>
<Accordion.Control>Security options</Accordion.Control>
<Accordion.Panel>
<Stack align="stretch">
<PasswordInput
variant="filled"
placeholder="No password"
label="Password protection"
{...form.getInputProps("password")}
<Stack align="stretch">
<Grid align={form.errors.link ? "center" : "flex-end"}>
<Col xs={9}>
<TextInput
variant="filled"
label="Link"
placeholder="myAwesomeShare"
{...form.getInputProps("link")}
/>
</Col>
<Col xs={3}>
<Button
variant="outline"
onClick={() =>
form.setFieldValue(
"link",
Buffer.from(Math.random().toString(), "utf8")
.toString("base64")
.substr(10, 7)
)
}
>
Generate
</Button>
</Col>
</Grid>
<Text
size="xs"
sx={(theme) => ({
color: theme.colors.gray[6],
})}
>
{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"},
]}
/>
<NumberInput
min={1}
type="number"
variant="filled"
placeholder="No limit"
label="Maximal views"
{...form.getInputProps("maxViews")}
/>
</Stack>
</Accordion.Panel>
</Accordion.Item>
</Accordion>
<Button type="submit">Share</Button>
</Stack>
</form>
);
<Accordion>
<Accordion.Item value="security" sx={{borderBottom: "none"}}>
<Accordion.Control>Security options</Accordion.Control>
<Accordion.Panel>
<Stack align="stretch">
<PasswordInput
variant="filled"
placeholder="No password"
label="Password protection"
{...form.getInputProps("password")}
/>
<NumberInput
min={1}
type="number"
variant="filled"
placeholder="No limit"
label="Maximal views"
{...form.getInputProps("maxViews")}
/>
</Stack>
</Accordion.Panel>
</Accordion.Item>
</Accordion>
<Button type="submit">Share</Button>
</Stack>
</form>
);
};
export default CreateUploadModalBody;

2
frontend/src/components/share/showEnterPasswordModal.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Group, PasswordInput, Stack, Text, Title } from "@mantine/core";
import { Button, PasswordInput, Stack, Text, Title } from "@mantine/core";
import { ModalsContextProps } from "@mantine/modals/lib/context";
import { useState } from "react";

2
frontend/src/components/share/showErrorModal.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Group, Stack, Text, Title } from "@mantine/core";
import { Button, Stack, Text, Title } from "@mantine/core";
import { useModals } from "@mantine/modals";
import { ModalsContextProps } from "@mantine/modals/lib/context";
import { useRouter } from "next/router";

2
frontend/src/components/upload/Dropzone.tsx
View File

@@ -4,7 +4,6 @@ import {
createStyles,
Group,
Text,
useMantineTheme,
} from "@mantine/core";
import { Dropzone as MantineDropzone } from "@mantine/dropzone";
import getConfig from "next/config";
@@ -46,7 +45,6 @@ const Dropzone = ({
isUploading: boolean;
setFiles: Dispatch<SetStateAction<File[]>>;
}) => {
const theme = useMantineTheme();
const { classes } = useStyles();
const openRef = useRef<() => void>();
return (

120
frontend/src/components/upload/showCompletedUploadModal.tsx
View File

@@ -1,11 +1,10 @@
import {
ActionIcon,
Button,
Group,
Stack,
Text,
TextInput,
Title
ActionIcon,
Button,
Stack,
Text,
TextInput,
Title
} from "@mantine/core";
import { useClipboard } from "@mantine/hooks";
import { useModals } from "@mantine/modals";
@@ -17,62 +16,65 @@ import { Share } from "../../types/share.type";
import toast from "../../utils/toast.util";
const showCompletedUploadModal = (
modals: ModalsContextProps,
share: Share,
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} />,
});
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.");
}}
>
<Copy />
</ActionIcon>
}
/>
<Text
size="xs"
sx={(theme) => ({
color: theme.colors.gray[6],
})}
>
Your share expires at {moment(share.expiration).format("LLL")}
</Text>
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.");
}}
>
<Copy/>
</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>
);
<Button
onClick={() => {
modals.closeAll();
router.push("/upload");
}}
>
Done
</Button>
</Stack>
);
};
export default showCompletedUploadModal;