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;

20
frontend/src/pages/_app.tsx
View File

@@ -8,9 +8,6 @@ import {
import { useColorScheme } from "@mantine/hooks";
import { ModalsProvider } from "@mantine/modals";
import { NotificationsProvider } from "@mantine/notifications";
import { setCookies } from "cookies-next";
import { GetServerSidePropsContext } from "next";
import cookies from "next-cookies";
import type { AppProps } from "next/app";
import { useEffect, useState } from "react";
import Footer from "../components/Footer";
@@ -23,14 +20,10 @@ import globalStyle from "../styles/mantine.style";
import { CurrentUser } from "../types/user.type";
import { GlobalLoadingContext } from "../utils/loading.util";
function App(props: AppProps & { colorScheme: ColorScheme }) {
const { Component, pageProps } = props;
function App({ Component, pageProps }: AppProps) {
const systemTheme = useColorScheme();
const [colorScheme, setColorScheme] = useState<ColorScheme>(
props.colorScheme
);
const [colorScheme, setColorScheme] = useState<ColorScheme>();
const [isLoading, setIsLoading] = useState(true);
const [user, setUser] = useState<CurrentUser | null>(null);
@@ -47,9 +40,6 @@ function App(props: AppProps & { colorScheme: ColorScheme }) {
}, []);
useEffect(() => {
setCookies("color-schema", systemTheme, {
maxAge: 60 * 60 * 24 * 30,
});
setColorScheme(systemTheme);
}, [systemTheme]);
@@ -87,9 +77,3 @@ function App(props: AppProps & { colorScheme: ColorScheme }) {
}
export default App;
App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => {
return {
colorScheme: cookies(ctx)["color-schema"] || "light",
};
};

235
frontend/src/pages/account/shares.tsx
View File

@@ -1,131 +1,140 @@
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 { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { TbLink, TbTrash } from "react-icons/tb";
import Meta from "../../components/Meta";
import useUser from "../../hooks/user.hook";
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 { publicRuntimeConfig } = getConfig();
const MyShares = () => {
const modals = useModals();
const clipboard = useClipboard();
const modals = useModals();
const clipboard = useClipboard();
const router = useRouter();
const user = useUser();
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/>;
if (!user) {
router.replace("/");
} else {
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>
)}
</>
<>
<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."
);
}}
>
<TbLink />
</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)
);
},
});
}}
>
<TbTrash />
</ActionIcon>
</Group>
</td>
</tr>
))}
</tbody>
</Table>
)}
</>
);
}
};
export default MyShares;

5
frontend/src/pages/index.tsx
View File

@@ -12,10 +12,9 @@ import { NextLink } from "@mantine/next";
import getConfig from "next/config";
import Image from "next/image";
import { useRouter } from "next/router";
import { Check } from "tabler-icons-react";
import { TbCheck } from "react-icons/tb";
import Meta from "../components/Meta";
import useUser from "../hooks/user.hook";
const { publicRuntimeConfig } = getConfig();
const useStyles = createStyles((theme) => ({
@@ -101,7 +100,7 @@ export default function Home() {
size="sm"
icon={
<ThemeIcon size={20} radius="xl">
<Check size={12} />
<TbCheck size={12} />
</ThemeIcon>
}
>

39
frontend/src/pages/share/[shareId].tsx
View File

@@ -1,6 +1,6 @@
import { Group } from "@mantine/core";
import { useModals } from "@mantine/modals";
import { useRouter } from "next/router";
import { GetServerSidePropsContext } from "next";
import { useEffect, useState } from "react";
import Meta from "../../components/Meta";
import DownloadAllButton from "../../components/share/DownloadAllButton";
@@ -9,18 +9,31 @@ import showEnterPasswordModal from "../../components/share/showEnterPasswordModa
import showErrorModal from "../../components/share/showErrorModal";
import shareService from "../../services/share.service";
const Share = () => {
const router = useRouter();
export function getServerSideProps(context: GetServerSidePropsContext) {
return {
props: { shareId: context.params!.shareId },
};
}
const Share = ({ shareId }: { shareId: string }) => {
const modals = useModals();
const shareId = router.query.shareId as string;
const [fileList, setFileList] = useState<any[]>([]);
const submitPassword = async (password: string) => {
const getShareToken = async (password?: string) => {
await shareService
.exchangeSharePasswordWithToken(shareId, password)
.getShareToken(shareId, password)
.then(() => {
modals.closeAll();
getFiles();
})
.catch((e) => {
if (e.response.data.error == "share_max_views_exceeded") {
showErrorModal(
modals,
"Visitor limit exceeded",
"The visitor limit from this share has been exceeded."
);
}
});
};
@@ -38,14 +51,10 @@ const Share = () => {
"Not found",
"This share can't be found. Please check your link."
);
} else if (error == "share_password_required") {
showEnterPasswordModal(modals, getShareToken);
} else if (error == "share_token_required") {
showEnterPasswordModal(modals, submitPassword);
} else if (error == "share_max_views_exceeded") {
showErrorModal(
modals,
"Visitor limit exceeded",
"The visitor limit from this share has been exceeded."
);
getShareToken();
} else if (error == "forbidden") {
showErrorModal(
modals,
@@ -69,9 +78,7 @@ const Share = () => {
description="Look what I've shared with you."
/>
<Group position="right" mb="lg">
<DownloadAllButton
shareId={shareId}
/>
<DownloadAllButton shareId={shareId} />
</Group>
<FileList
files={fileList}

62
frontend/src/pages/upload.tsx
View File

@@ -28,39 +28,61 @@ const Upload = () => {
security: ShareSecurity
) => {
setisUploading(true);
try {
files.forEach((file) => {
file.uploadingState = "inProgress";
});
setFiles([...files]);
setFiles((files) =>
files.map((file) => {
file.uploadingProgress = 1;
return file;
})
);
const share = await shareService.create(id, expiration, security);
for (let i = 0; i < files.length; i++) {
await shareService.uploadFile(share.id, files[i]);
const progressCallBack = (bytesProgress: number) => {
setFiles((files) => {
return files.map((file, callbackIndex) => {
if (i == callbackIndex) {
file.uploadingProgress = Math.round(
(100 * bytesProgress) / files[i].size
);
}
return file;
});
});
};
files[i].uploadingState = "finished";
setFiles([...files]);
if (!files.some((f) => f.uploadingState == "inProgress")) {
await shareService.completeShare(share.id);
try {
await shareService.uploadFile(share.id, files[i], progressCallBack);
} catch {
files[i].uploadingProgress = -1;
}
if (
files.every(
(file) =>
file.uploadingProgress >= 100 || file.uploadingProgress == -1
)
) {
const fileErrorCount = files.filter(
(file) => file.uploadingProgress == -1
).length;
setisUploading(false);
showCompletedUploadModal(
modals,
share
);
setFiles([]);
if (fileErrorCount > 0) {
toast.error(
`${fileErrorCount} file(s) failed to upload. Try again.`
);
} else {
await shareService.completeShare(share.id);
showCompletedUploadModal(modals, share);
setFiles([]);
}
}
}
} catch (e) {
files.forEach((file) => {
file.uploadingState = undefined;
});
if (axios.isAxiosError(e)) {
toast.error(e.response?.data?.message ?? "An unkown error occured.");
} else {
toast.error("An unkown error occured.");
}
setFiles([...files]);
setisUploading(false);
}
};

23
frontend/src/services/share.service.ts
View File

@@ -44,9 +44,8 @@ const getMyShares = async (): Promise<MyShare[]> => {
return (await api.get("shares")).data;
};
const exchangeSharePasswordWithToken = async (id: string, password: string) => {
const { token } = (await api.post(`/shares/${id}/password`, { password }))
.data;
const getShareToken = async (id: string, password?: string) => {
const { token } = (await api.post(`/shares/${id}/token`, { password })).data;
localStorage.setItem(`share_${id}_token`, token);
};
@@ -68,16 +67,26 @@ const downloadFile = async (shareId: string, fileId: string) => {
window.location.href = await getFileDownloadUrl(shareId, fileId);
};
const uploadFile = async (shareId: string, file: File) => {
var formData = new FormData();
const uploadFile = async (
shareId: string,
file: File,
progressCallBack: (uploadingProgress: number) => void
) => {
let formData = new FormData();
formData.append("file", file);
return (await api.post(`shares/${shareId}/files`, formData)).data;
return (
await api.post(`shares/${shareId}/files`, formData, {
onUploadProgress: (progressEvent) =>
progressCallBack(progressEvent.loaded),
})
).data;
};
export default {
create,
completeShare,
exchangeSharePasswordWithToken,
getShareToken,
get,
remove,
getMetaData,

3
frontend/src/types/File.type.ts
View File

@@ -1,2 +1 @@
export type FileUpload = File & { uploadingState?: UploadState };
export type UploadState = "finished" | "inProgress" | undefined;
export type FileUpload = File & { uploadingProgress: number };

9
frontend/src/utils/toast.util.tsx
View File

@@ -1,19 +1,18 @@
import { showNotification } from "@mantine/notifications";
import { Check, X } from "tabler-icons-react";
import { TbCheck, TbX } from "react-icons/tb";
const error = (message: string) =>
showNotification({
icon: <X />,
icon: <TbX />,
color: "red",
radius: "md",
title: "Error",
message: message,
});
const success = (message: string) =>
showNotification({
icon: <Check />,
icon: <TbCheck />,
color: "green",
radius: "md",
title: "Success",