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

Merge remote-tracking branch 'stonith404/main' into main

Browse Source
This commit is contained in:
Elias Schneider
2022-10-16 00:08:37 +02:00
parent 5988d5ffcc c4894e90cb
commit 9d17377bbc
47 changed files with 6692 additions and 881 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/Logo.tsx Normal file
View File

@@ -0,0 +1,34 @@
const Logo = ({ height, width }: { height: number; width: number }) => {
return (
<svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 943.11 911.62"
height={height}
width={width}
>
<ellipse cx="471.56" cy="454.28" rx="471.56" ry="454.28" fill="#46509e" />
<ellipse cx="471.56" cy="390.28" rx="233.66" ry="207" fill="#37474f" />
<path
d="M705.22,849c-36.69,21.14-123.09,64.32-240.64,62.57A469.81,469.81,0,0,1,237.89,849V394.76H705.22Z"
fill="#37474f"
/>
<path
d="M658.81,397.7V873.49a478.12,478.12,0,0,1-374.19,0V397.7c0-95.55,83.78-173,187.1-173S658.81,302.15,658.81,397.7Z"
fill="#fff"
/>
<polygon
points="565.02 431.68 471.56 514.49 378.09 431.68 565.02 431.68"
fill="#46509e"
/>
<ellipse cx="378.09" cy="369.58" rx="23.37" ry="20.7" fill="#37474f" />
<ellipse cx="565.02" cy="369.58" rx="23.37" ry="20.7" fill="#37474f" />
<path
d="M658.49,400.63c0-40-36.6-72.45-81.79-72.45s-81.78,32.41-81.78,72.45a64.79,64.79,0,0,0,7.9,31.05H440.29a64.79,64.79,0,0,0,7.9-31.05c0-40-36.59-72.45-81.78-72.45s-81.79,32.41-81.79,72.45l-46.73-10.35c0-114.31,104.64-207,233.67-207s233.66,92.69,233.66,207Z"
fill="#37474f"
/>
</svg>
);
};
export default Logo;

6
frontend/src/components/navBar/ActionAvatar.tsx
View File

@@ -1,6 +1,6 @@
import { ActionIcon, Avatar, Menu } from "@mantine/core";
import { NextLink } from "@mantine/next";
import { DoorExit, Link } from "tabler-icons-react";
import { TbDoorExit, TbLink } from "react-icons/tb";;
import authService from "../../services/auth.service";
const ActionAvatar = () => {
@@ -15,7 +15,7 @@ const ActionAvatar = () => {
<Menu.Item
component={NextLink}
href="/account/shares"
icon={<Link size={14} />}
icon={<TbLink size={14} />}
>
My shares
</Menu.Item>
@@ -23,7 +23,7 @@ const ActionAvatar = () => {
onClick={async () => {
authService.signOut();
}}
icon={<DoorExit size={14} />}
icon={<TbDoorExit size={14} />}
>
Sign out
</Menu.Item>

19
frontend/src/components/navBar/NavBar.tsx
View File

@@ -5,7 +5,6 @@ import {
createStyles,
Group,
Header,
Image,
Paper,
Stack,
Text,
@@ -16,6 +15,7 @@ import { NextLink } from "@mantine/next";
import getConfig from "next/config";
import { ReactNode, useEffect, useState } from "react";
import useUser from "../../hooks/user.hook";
import Logo from "../Logo";
import ActionAvatar from "./ActionAvatar";
const { publicRuntimeConfig } = getConfig();
@@ -152,14 +152,12 @@ const NavBar = () => {
const { classes, cx } = useStyles();
const items = (
<>
{(user ? authenticatedLinks : unauthenticatedLinks).map((link) => {
{(user ? authenticatedLinks : unauthenticatedLinks).map((link, i) => {
if (link.component) {
return (
<>
<Box pl={5} py={15}>
{link.component}
</Box>
</>
<Box pl={5} py={15} key={i}>
{link.component}
</Box>
);
}
return (
@@ -182,12 +180,7 @@ const NavBar = () => {
<Container className={classes.header}>
<NextLink href="/">
<Group>
<Image
src="/img/logo.svg"
alt="Pinvgin Share Logo"
height={35}
width={35}
/>
<Logo height={35} width={35} />
<Text weight={600}>Pingvin Share</Text>
</Group>
</NextLink>

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

@@ -1,197 +1,229 @@
import {
Accordion,
Button,
Col,
Checkbox,
Grid,
NumberInput,
PasswordInput,
Select,
Stack,
Text,
TextInput,
Accordion,
Button,
Col,
Checkbox,
Grid,
NumberInput,
PasswordInput,
Select,
Stack,
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 { 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 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();
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")}`;
}
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,
}: {
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(50)
.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_num: 1,
expiration_unit: "-days",
never_expires: false
},
validate: yupResolver(validationSchema),
});
password: undefined,
maxViews: undefined,
expiration_num: 1,
expiration_unit: "-days",
never_expires: false,
},
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 {
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,
});
modals.closeAll();
}
})}
return (
<form
onSubmit={form.onSubmit(async (values) => {
if (!(await shareService.isShareIdAvailable(values.link))) {
form.setFieldError("link", "This link is already in use");
} else {
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,
});
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
italic
size="xs"
sx={(theme) => ({
color: theme.colors.gray[6],
})}
>
<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>
{window.location.origin}/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")}
/>
</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")}
/>
<Text italic
size="xs"
sx={(theme) => ({
color: theme.colors.gray[6],
})}
>
{window.location.origin}/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")}
/>
</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>
{/* 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>
<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>
);
<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;

30
frontend/src/components/share/DownloadAllButton.tsx
View File

@@ -1,6 +1,7 @@
import { Button, Tooltip } from "@mantine/core";
import { Button } from "@mantine/core";
import { useEffect, useState } from "react";
import shareService from "../../services/share.service";
import toast from "../../utils/toast.util";
const DownloadAllButton = ({ shareId }: { shareId: string }) => {
const [isZipReady, setIsZipReady] = useState(false);
@@ -25,28 +26,25 @@ const DownloadAllButton = ({ shareId }: { shareId: string }) => {
setIsZipReady(share.isZipReady);
if (share.isZipReady) clearInterval(timer);
})
.catch(() => {});
.catch(() => clearInterval(timer));
}, 5000);
return () => {
clearInterval(timer);
};
}, []);
if (!isZipReady)
return (
<Tooltip
position="bottom"
width={220}
withArrow
label="The share is preparing. This can take a few minutes."
>
<Button variant="outline" onClick={downloadAll} disabled>
Download all
</Button>
</Tooltip>
);
return (
<Button variant="outline" loading={isLoading} onClick={downloadAll}>
<Button
variant="outline"
loading={isLoading}
onClick={() => {
if (!isZipReady) {
toast.error("The share is preparing. Try again in a few minutes.");
} else {
downloadAll();
}
}}
>
Download all
</Button>
);

6
frontend/src/components/share/FileList.tsx
View File

@@ -1,5 +1,5 @@
import { ActionIcon, Loader, Skeleton, Table } from "@mantine/core";
import { CircleCheck, Download } from "tabler-icons-react";
import { TbCircleCheck, TbDownload } from "react-icons/tb";;
import shareService from "../../services/share.service";
import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
@@ -39,7 +39,7 @@ const FileList = ({
file.uploadingState != "finished" ? (
<Loader size={22} />
) : (
<CircleCheck color="green" size={22} />
<TbCircleCheck color="green" size={22} />
)
) : (
<ActionIcon
@@ -48,7 +48,7 @@ const FileList = ({
await shareService.downloadFile(shareId, file.id);
}}
>
<Download />
<TbDownload />
</ActionIcon>
)}
</td>

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

@@ -1,14 +1,9 @@
import {
Button,
Center,
createStyles,
Group,
Text,
} from "@mantine/core";
import { Button, Center, createStyles, Group, Text } from "@mantine/core";
import { Dropzone as MantineDropzone } from "@mantine/dropzone";
import getConfig from "next/config";
import { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
import { CloudUpload, Upload } from "tabler-icons-react";
import { TbCloudUpload, TbUpload } from "react-icons/tb";
import { FileUpload } from "../../types/File.type";
import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
import toast from "../../utils/toast.util";
@@ -43,7 +38,7 @@ const Dropzone = ({
setFiles,
}: {
isUploading: boolean;
setFiles: Dispatch<SetStateAction<File[]>>;
setFiles: Dispatch<SetStateAction<FileUpload[]>>;
}) => {
const { classes } = useStyles();
const openRef = useRef<() => void>();
@@ -60,7 +55,11 @@ const Dropzone = ({
if (files.length > 100) {
toast.error("You can't upload more than 100 files per share.");
} else {
setFiles(files);
const newFiles = files.map((file) => {
(file as FileUpload).uploadingProgress = 0;
return file as FileUpload;
});
setFiles(newFiles);
}
}}
className={classes.dropzone}
@@ -68,7 +67,7 @@ const Dropzone = ({
>
<div style={{ pointerEvents: "none" }}>
<Group position="center">
<CloudUpload size={50} />
<TbCloudUpload size={50} />
</Group>
<Text align="center" weight={700} size="lg" mt="xl">
Upload files
@@ -90,7 +89,7 @@ const Dropzone = ({
disabled={isUploading}
onClick={() => openRef.current && openRef.current()}
>
{<Upload />}
{<TbUpload />}
</Button>
</Center>
</div>

18
frontend/src/components/upload/FileList.tsx
View File

@@ -1,8 +1,9 @@
import { ActionIcon, Loader, Table } from "@mantine/core";
import { ActionIcon, Table } from "@mantine/core";
import { Dispatch, SetStateAction } from "react";
import { CircleCheck, Trash } from "tabler-icons-react";
import { TbTrash } from "react-icons/tb";;
import { FileUpload } from "../../types/File.type";
import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
import UploadProgressIndicator from "./UploadProgressIndicator";
const FileList = ({
files,
@@ -15,27 +16,22 @@ const FileList = ({
files.splice(index, 1);
setFiles([...files]);
};
const rows = files.map((file, i) => (
<tr key={i}>
<td>{file.name}</td>
<td>{byteStringToHumanSizeString(file.size.toString())}</td>
<td>
{file.uploadingState ? (
file.uploadingState != "finished" ? (
<Loader size={22} />
) : (
<CircleCheck color="green" size={22} />
)
) : (
{file.uploadingProgress == 0 ? (
<ActionIcon
color="red"
variant="light"
size={25}
onClick={() => remove(i)}
>
<Trash />
<TbTrash />
</ActionIcon>
) : (
<UploadProgressIndicator progress={file.uploadingProgress} />
)}
</td>
</tr>

19
frontend/src/components/upload/UploadProgressIndicator.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { RingProgress } from "@mantine/core";
import { TbCircleCheck, TbCircleX } from "react-icons/tb";
const UploadProgressIndicator = ({ progress }: { progress: number }) => {
if (progress > 0 && progress < 100) {
return (
<RingProgress
sections={[{ value: progress, color: "victoria" }]}
thickness={3}
size={25}
/>
);
} else if (progress >= 100) {
return <TbCircleCheck color="green" size={22} />;
} else {
return <TbCircleX color="red" size={22} />;
}
};
export default UploadProgressIndicator;

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

@@ -1,86 +1,84 @@
import {
ActionIcon,
Button,
Stack,
Text,
TextInput,
Title
ActionIcon,
Button,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import { useClipboard } from "@mantine/hooks";
import { useModals } from "@mantine/modals";
import { ModalsContextProps } from "@mantine/modals/lib/context";
import moment from "moment";
import getConfig from "next/config";
import { useRouter } from "next/router";
import { Copy } from "tabler-icons-react";
import { TbCopy } from "react-icons/tb";
import { Share } from "../../types/share.type";
import toast from "../../utils/toast.util";
import getConfig from "next/config";
const {publicRuntimeConfig} = getConfig();
const { publicRuntimeConfig } = getConfig();
const showCompletedUploadModal = (
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}/>,
});
const showCompletedUploadModal = (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} />,
});
};
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 ${
(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>
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.");
}}
>
<TbCopy />
</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 ${
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
onClick={() => {
modals.closeAll();
router.push("/upload");
}}
>
Done
</Button>
</Stack>
);
<Button
onClick={() => {
modals.closeAll();
router.push("/upload");
}}
>
Done
</Button>
</Stack>
);
};
export default showCompletedUploadModal;