Merge pull request #14 from stonith404/development

Merge development into main

.dockerignore

@@ -1,8 +1,8 @@
 backend/dist/
 backend/node_modules/
+backend/data
 
 frontend/node_modules/
 frontend/.next/
-frontend/dist/
 
 **/.git/

README.md

@@ -37,7 +37,7 @@ The website is now listening available on `http://localhost:3000`, have fun with
 
 ### Upgrade to a new version
 
-Just updated the docker container by running `docker-compose pull && docker-compose up -d`
+Just update the docker container by running `docker compose pull && docker compose up -d`
 
 > Note: If you installed Pingvin Share before it used Sqlite, you unfortunately have to set up the project from scratch again, sorry for that.
 
@@ -65,3 +65,7 @@ Contact me, create an issue or directly create a pull request.
 5. Start the frontend with `npm run dev`
 
 You're all set!
+
+### Testing
+
+At the moment we only have system tests for the backend. To run these tests, run `npm run test:system` in the backend folder.

backend/src/share/share.service.ts

@@ -99,7 +99,14 @@ export class ShareService {
 
   async getSharesByUser(userId: string) {
     return await this.prisma.share.findMany({
-      where: { creator: { id: userId }, expiration: { gt: new Date() } },
+      where: {
+        creator: { id: userId },
+        expiration: { gt: new Date() },
+        uploadLocked: true,
+      },
+      orderBy: {
+        expiration: "desc",
+      },
     });
   }
 

frontend/package-lock.json

@@ -26,7 +26,7 @@
         "next-pwa": "^5.6.0",
         "react": "18.0.0",
         "react-dom": "18.0.0",
-        "tabler-icons-react": "^1.44.0",
+        "react-icons": "^4.4.0",
         "yup": "^0.32.11"
       },
       "devDependencies": {
@@ -6381,6 +6381,14 @@
         "react": ">= 16.8 || 18.0.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -6971,14 +6979,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/tabler-icons-react": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/tabler-icons-react/-/tabler-icons-react-1.44.0.tgz",
-      "integrity": "sha512-AYQQGl55yVe1KHZl+zyDAAwDOcPknKZNC7vgwmjyvpmz4P5Gjb7DtpsOPa1nB0qMYW5Orsrt+1e4qnRoCKgo6A==",
-      "peerDependencies": {
-        "react": ">= 16.8.0"
-      }
-    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -12479,6 +12479,12 @@
         "prop-types": "^15.8.1"
       }
     },
+    "react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -12910,12 +12916,6 @@
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
-    "tabler-icons-react": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/tabler-icons-react/-/tabler-icons-react-1.44.0.tgz",
-      "integrity": "sha512-AYQQGl55yVe1KHZl+zyDAAwDOcPknKZNC7vgwmjyvpmz4P5Gjb7DtpsOPa1nB0qMYW5Orsrt+1e4qnRoCKgo6A==",
-      "requires": {}
-    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",

frontend/package.json

@@ -27,7 +27,7 @@
     "next-pwa": "^5.6.0",
     "react": "18.0.0",
     "react-dom": "18.0.0",
-    "tabler-icons-react": "^1.44.0",
+    "react-icons": "^4.4.0",
     "yup": "^0.32.11"
   },
   "devDependencies": {

frontend/src/components/Logo.tsx

@@ -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;

frontend/src/components/navBar/ActionAvatar.tsx

@@ -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>

frontend/src/components/navBar/NavBar.tsx

@@ -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();
@@ -180,12 +180,7 @@ const NavBar = () => {
       <Container className={classes.header}>
         <NextLink href="/">
           <Group>
-            <Image
+            <Logo height={35} width={35} />
-              src="/img/logo.svg"
-              alt="Pinvgin Share Logo"
-              height={35}
-              width={35}
-            />
             <Text weight={600}>Pingvin Share</Text>
           </Group>
         </NextLink>

frontend/src/components/share/DownloadAllButton.tsx

@@ -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);
@@ -32,21 +33,18 @@ const DownloadAllButton = ({ shareId }: { shareId: string }) => {
     };
   }, []);
 
-  if (!isZipReady)
   return (
-      <Tooltip
+    <Button
-        position="bottom"
+      variant="outline"
-        width={220}
+      loading={isLoading}
-        withArrow
+      onClick={() => {
-        label="The share is preparing. This can take a few minutes."
+        if (!isZipReady) {
+          toast.error("The share is preparing. Try again in a few minutes.");
+        } else {
+          downloadAll();
+        }
+      }}
     >
-        <Button variant="outline" onClick={downloadAll} disabled>
-          Download all
-        </Button>
-      </Tooltip>
-    );
-  return (
-    <Button variant="outline" loading={isLoading} onClick={downloadAll}>
       Download all
     </Button>
   );

frontend/src/components/share/FileList.tsx

@@ -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>

frontend/src/components/upload/Dropzone.tsx

@@ -2,7 +2,7 @@ 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";
@@ -67,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
@@ -89,7 +89,7 @@ const Dropzone = ({
           disabled={isUploading}
           onClick={() => openRef.current && openRef.current()}
         >
-          {<Upload />}
+          {<TbUpload />}
         </Button>
       </Center>
     </div>

frontend/src/components/upload/FileList.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Table } from "@mantine/core";
 import { Dispatch, SetStateAction } from "react";
-import { 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";
@@ -28,7 +28,7 @@ const FileList = ({
             size={25}
             onClick={() => remove(i)}
           >
-            <Trash />
+            <TbTrash />
           </ActionIcon>
         ) : (
           <UploadProgressIndicator progress={file.uploadingProgress} />

frontend/src/components/upload/UploadProgressIndicator.tsx

@@ -1,6 +1,5 @@
 import { RingProgress } from "@mantine/core";
-import { CircleCheck, CircleX } from "tabler-icons-react";
+import { TbCircleCheck, TbCircleX } from "react-icons/tb";
-
 const UploadProgressIndicator = ({ progress }: { progress: number }) => {
   if (progress > 0 && progress < 100) {
     return (
@@ -10,10 +9,10 @@ const UploadProgressIndicator = ({ progress }: { progress: number }) => {
         size={25}
       />
     );
-  } else if (progress == 100) {
+  } else if (progress >= 100) {
-    return <CircleCheck color="green" size={22} />;
+    return <TbCircleCheck color="green" size={22} />;
   } else {
-    return <CircleX color="red" size={22} />;
+    return <TbCircleX color="red" size={22} />;
   }
 };
 

frontend/src/components/upload/showCompletedUploadModal.tsx

@@ -1,25 +1,20 @@
 import {
   ActionIcon,
   Button,
-  Group,
   Stack,
   Text,
   TextInput,
-  Title
+  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 { 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";
-
+const showCompletedUploadModal = (modals: ModalsContextProps, share: Share) => {
-const showCompletedUploadModal = (
-  modals: ModalsContextProps,
-  share: Share,
-) => {
   return modals.openModal({
     closeOnClickOutside: false,
     withCloseButton: false,
@@ -50,7 +45,7 @@ const Body = ({ share }: { share: Share }) => {
               toast.success("Your link was copied to the keyboard.");
             }}
           >
-            <Copy />
+            <TbCopy />
           </ActionIcon>
         }
       />

frontend/src/pages/_app.tsx

@@ -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 }) {
+function App({ Component, pageProps }: AppProps) {
-  const { Component, pageProps } = props;
-
   const systemTheme = useColorScheme();
 
-  const [colorScheme, setColorScheme] = useState<ColorScheme>(
+  const [colorScheme, setColorScheme] = useState<ColorScheme>();
-    props.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",
-  };
-};

frontend/src/pages/account/shares.tsx

@@ -15,8 +15,8 @@ import { useModals } from "@mantine/modals";
 import { NextLink } from "@mantine/next";
 import moment from "moment";
 import { useRouter } from "next/router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
-import { Link, Trash } from "tabler-icons-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";
@@ -31,9 +31,9 @@ const MyShares = () => {
 
   const [shares, setShares] = useState<MyShare[]>();
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   shareService.getMyShares().then((shares) => setShares(shares));
+    shareService.getMyShares().then((shares) => setShares(shares));
-  // }, []);
+  }, []);
 
   if (!user) {
     router.replace("/");
@@ -89,7 +89,7 @@ const MyShares = () => {
                           );
                         }}
                       >
-                        <Link />
+                        <TbLink />
                       </ActionIcon>
                       <ActionIcon
                         color="red"
@@ -116,7 +116,7 @@ const MyShares = () => {
                           });
                         }}
                       >
-                        <Trash />
+                        <TbTrash />
                       </ActionIcon>
                     </Group>
                   </td>

frontend/src/pages/index.tsx

@@ -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>
                 }
               >

frontend/src/pages/share/[shareId].tsx

@@ -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,10 +9,14 @@ import showEnterPasswordModal from "../../components/share/showEnterPasswordModa
 import showErrorModal from "../../components/share/showErrorModal";
 import shareService from "../../services/share.service";
 
-const Share = () => {
+export function getServerSideProps(context: GetServerSidePropsContext) {
-  const router = useRouter();
+  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 getShareToken = async (password?: string) => {

frontend/src/pages/upload.tsx

@@ -56,13 +56,27 @@ const Upload = () => {
           files[i].uploadingProgress = -1;
         }
 
-        if (!files.some((f) => f.uploadingProgress != 100)) {
+        if (
-          await shareService.completeShare(share.id);
+          files.every(
+            (file) =>
+              file.uploadingProgress >= 100 || file.uploadingProgress == -1
+          )
+        ) {
+          const fileErrorCount = files.filter(
+            (file) => file.uploadingProgress == -1
+          ).length;
           setisUploading(false);
+          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) {
       if (axios.isAxiosError(e)) {
         toast.error(e.response?.data?.message ?? "An unkown error occured.");

frontend/src/services/share.service.ts

@@ -72,7 +72,7 @@ const uploadFile = async (
   file: File,
   progressCallBack: (uploadingProgress: number) => void
 ) => {
-  var formData = new FormData();
+  let formData = new FormData();
   formData.append("file", file);
 
   return (

frontend/src/utils/toast.util.tsx

@@ -1,9 +1,8 @@
 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",
@@ -13,7 +12,7 @@ const error = (message: string) =>
 
 const success = (message: string) =>
   showNotification({
-    icon: <Check />,
+    icon: <TbCheck />,
     color: "green",
     radius: "md",
     title: "Success",