Merge branch 'development' into main

.github/workflows/backend-system-tests.yml

@@ -0,0 +1,21 @@
+name: Backend system tests
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  integration-tests:
+    runs-on: ubuntu-latest
+    container: node:18-alpine
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          path: backend
+      - name: Install Dependencies
+        run: npm install
+      - name: Create .env file
+        run: mv .env.example .env
+      - name: Run Server and Test with Newman
+        run: npm run test:system

.github/workflows/build-docker-image.yml

@@ -4,8 +4,8 @@ on:
   push:
     branches: main
     paths:
-      - 'frontend/**'
-      - 'backend/**'
+      - "frontend/**"
+      - "backend/**"
 
 jobs:
   build:
@@ -23,4 +23,4 @@ jobs:
         run: |
           docker buildx build --push \
              --tag stonith404/pingvin-share:latest \
-             --platform linux/amd64,linux/arm64 .
+             --platform linux/amd64,linux/arm64,linux/arm/v7 .

backend/.eslintrc.json

@@ -1,18 +1,6 @@
 {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "overrides": [
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module"
-    },
-    "plugins": [
-        "@typescript-eslint"
-    ],
-    "rules": {
-    }
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "root": true
 }

backend/package.json

@@ -6,7 +6,8 @@
     "dev": "dotenv -- nest start --watch",
     "prod": "npx prisma migrate deploy && dotenv node dist/main",
     "lint": "eslint 'src/**/*.ts'",
-    "format": "prettier --write 'src/**/*.ts'"
+    "format": "prettier --write 'src/**/*.ts'",
+    "test:system": "npx prisma migrate reset -f && pm2 start 'nest start' && sleep 5 && newman run ./test/system/newman-system-tests.json ; pm2 delete 0"
   },
   "dependencies": {
     "@nestjs/common": "^9.1.2",
@@ -21,6 +22,7 @@
     "argon2": "^0.29.1",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.13.2",
+    "content-disposition": "^0.5.4",
     "mime-types": "^2.1.35",
     "moment": "^2.29.4",
     "multer": "^1.4.5-lts.1",
@@ -42,19 +44,21 @@
     "@types/node": "^18.7.23",
     "@types/passport-jwt": "^3.0.7",
     "@types/supertest": "^2.0.12",
-    "@typescript-eslint/eslint-plugin": "^5.39.0",
-    "@typescript-eslint/parser": "^5.39.0",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
     "cross-env": "^7.0.3",
     "dotenv-cli": "^6.0.0",
-    "eslint": "^8.0.1",
+    "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "newman": "^5.3.2",
+    "pm2": "^5.2.2",
     "prettier": "^2.7.1",
     "prisma": "^4.4.0",
     "source-map-support": "^0.5.21",
     "ts-loader": "^9.4.1",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "4.1.0",
-    "typescript": "^4.3.5"
+    "typescript": "^4.8.4"
   }
 }

backend/prisma/migrations/20221013212615_cascade_delete_on_share/migration.sql

@@ -0,0 +1,14 @@
+-- RedefineTables
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_RefreshToken" (
+    "token" TEXT NOT NULL PRIMARY KEY,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "expiresAt" DATETIME NOT NULL,
+    "userId" TEXT NOT NULL,
+    CONSTRAINT "RefreshToken_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+INSERT INTO "new_RefreshToken" ("createdAt", "expiresAt", "token", "userId") SELECT "createdAt", "expiresAt", "token", "userId" FROM "RefreshToken";
+DROP TABLE "RefreshToken";
+ALTER TABLE "new_RefreshToken" RENAME TO "RefreshToken";
+PRAGMA foreign_key_check;
+PRAGMA foreign_keys=ON;

backend/prisma/schema.prisma

@@ -28,7 +28,7 @@ model RefreshToken {
   expiresAt DateTime
 
   userId String
-  user   User   @relation(fields: [userId], references: [id])
+  user   User   @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
 model Share {

backend/src/auth/auth.controller.ts

@@ -27,6 +27,7 @@ export class AuthController {
   }
 
   @Post("signIn")
+  @HttpCode(200)
   signIn(@Body() dto: AuthSignInDTO) {
     return this.authService.signIn(dto);
   }

backend/src/auth/dto/authRegister.dto.ts

@@ -1,4 +1,3 @@
-import { PickType } from "@nestjs/swagger";
 import { UserDTO } from "src/user/dto/user.dto";
 
 export class AuthRegisterDTO extends UserDTO {}

backend/src/auth/dto/refreshAccessToken.dto.ts

@@ -1,4 +1,4 @@
-import { IsNotEmpty, IsString } from "class-validator";
+import { IsNotEmpty } from "class-validator";
 
 export class RefreshAccessTokenDTO {
   @IsNotEmpty()

backend/src/auth/strategy/jwt.strategy.ts

@@ -14,7 +14,7 @@ export class JwtStrategy extends PassportStrategy(Strategy) {
     });
   }
 
-  async validate(payload: any) {
+  async validate(payload: { sub: string }) {
     const user: User = await this.prisma.user.findUnique({
       where: { id: payload.sub },
     });

backend/src/file/dto/file.dto.ts

@@ -11,9 +11,6 @@ export class FileDTO {
   @Expose()
   size: string;
 
-  @Expose()
-  url: boolean;
-
   share: ShareDTO;
 
   from(partial: Partial<FileDTO>) {

backend/src/file/file.controller.ts

@@ -11,6 +11,7 @@ import {
   UseInterceptors,
 } from "@nestjs/common";
 import { FileInterceptor } from "@nestjs/platform-express";
+import * as contentDisposition from "content-disposition";
 import { Response } from "express";
 import { JwtGuard } from "src/auth/guard/jwt.guard";
 import { FileDownloadGuard } from "src/file/guard/fileDownload.guard";
@@ -41,6 +42,10 @@ export class FileController {
     file: Express.Multer.File,
     @Param("shareId") shareId: string
   ) {
+    // Fixes file names with special characters
+    file.originalname = Buffer.from(file.originalname, "latin1").toString(
+      "utf8"
+    );
     return new ShareDTO().from(await this.fileService.create(file, shareId));
   }
 
@@ -98,7 +103,7 @@ export class FileController {
     res.set({
       "Content-Type": file.metaData.mimeType,
       "Content-Length": file.metaData.size,
-      "Content-Disposition": `attachment ; filename="${file.metaData.name}"`,
+      "Content-Disposition": contentDisposition(file.metaData.name),
     });
 
     return new StreamableFile(file.file);

backend/src/file/file.module.ts

@@ -1,7 +1,6 @@
 import { Module } from "@nestjs/common";
 import { JwtModule } from "@nestjs/jwt";
 import { ShareModule } from "src/share/share.module";
-import { ShareService } from "src/share/share.service";
 import { FileController } from "./file.controller";
 import { FileService } from "./file.service";
 

backend/src/file/file.service.ts

@@ -100,12 +100,12 @@ export class FileService {
     );
   }
 
-  verifyFileDownloadToken(shareId: string, fileId: string, token: string) {
+  verifyFileDownloadToken(shareId: string, token: string) {
     try {
       const claims = this.jwtService.verify(token, {
         secret: this.config.get("JWT_SECRET"),
       });
-      return claims.shareId == shareId && claims.fileId == fileId;
+      return claims.shareId == shareId;
     } catch {
       return false;
     }

backend/src/file/guard/fileDownload.guard.ts

@@ -1,23 +1,17 @@
 import { CanActivate, ExecutionContext, Injectable } from "@nestjs/common";
-import { Reflector } from "@nestjs/core";
 import { Request } from "express";
 import { FileService } from "src/file/file.service";
-import { PrismaService } from "src/prisma/prisma.service";
 
 @Injectable()
 export class FileDownloadGuard implements CanActivate {
-  constructor(
-    private reflector: Reflector,
-    private fileService: FileService,
-    private prisma: PrismaService
-  ) {}
+  constructor(private fileService: FileService) {}
 
   async canActivate(context: ExecutionContext) {
     const request: Request = context.switchToHttp().getRequest();
 
     const token = request.query.token as string;
-    const { shareId, fileId } = request.params;
+    const { shareId } = request.params;
 
-    return this.fileService.verifyFileDownloadToken(shareId, fileId, token);
+    return this.fileService.verifyFileDownloadToken(shareId, token);
   }
 }

backend/src/share/dto/createShare.dto.ts

@@ -1,5 +1,5 @@
 import { Type } from "class-transformer";
-import { IsString, Matches, ValidateNested } from "class-validator";
+import { IsString, Length, Matches, ValidateNested } from "class-validator";
 import { ShareSecurityDTO } from "./shareSecurity.dto";
 
 export class CreateShareDTO {
@@ -7,6 +7,7 @@ export class CreateShareDTO {
   @Matches("^[a-zA-Z0-9_-]*$", undefined, {
     message: "ID only can contain letters, numbers, underscores and hyphens",
   })
+  @Length(3, 50)
   id: string;
 
   @IsString()

backend/src/share/dto/sharePassword.dto.ts

@@ -1,6 +1,3 @@
-import { IsNotEmpty } from "class-validator";
-
 export class SharePasswordDto {
-  @IsNotEmpty()
   password: string;
 }

backend/src/share/guard/shareOwner.guard.ts

@@ -1,16 +1,16 @@
-import { CanActivate, ExecutionContext, Injectable } from "@nestjs/common";
-import { Reflector } from "@nestjs/core";
+import {
+  CanActivate,
+  ExecutionContext,
+  Injectable,
+  NotFoundException,
+} from "@nestjs/common";
 import { User } from "@prisma/client";
 import { Request } from "express";
-import { ExtractJwt } from "passport-jwt";
 import { PrismaService } from "src/prisma/prisma.service";
-import { ShareService } from "src/share/share.service";
 
 @Injectable()
 export class ShareOwnerGuard implements CanActivate {
-  constructor(
-    private prisma: PrismaService
-  ) {}
+  constructor(private prisma: PrismaService) {}
 
   async canActivate(context: ExecutionContext) {
     const request: Request = context.switchToHttp().getRequest();
@@ -26,7 +26,7 @@ export class ShareOwnerGuard implements CanActivate {
       include: { security: true },
     });
 
-
+    if (!share) throw new NotFoundException("Share not found");
 
     return share.creatorId == (request.user as User).id;
   }

backend/src/share/guard/shareSecurity.guard.ts

@@ -21,6 +21,7 @@ export class ShareSecurityGuard implements CanActivate {
 
   async canActivate(context: ExecutionContext) {
     const request: Request = context.switchToHttp().getRequest();
+    const shareToken = request.get("X-Share-Token");
     const shareId = Object.prototype.hasOwnProperty.call(
       request.params,
       "shareId"
@@ -36,19 +37,15 @@ export class ShareSecurityGuard implements CanActivate {
     if (!share || moment().isAfter(share.expiration))
       throw new NotFoundException("Share not found");
 
-    if (!share.security) return true;
-
-    if (share.security.maxViews && share.security.maxViews <= share.views)
-      throw new ForbiddenException(
-        "Maximum views exceeded",
-        "share_max_views_exceeded"
-      );
-
-    if (
-      !this.shareService.verifyShareToken(shareId, request.get("X-Share-Token"))
-    )
+    if (share.security?.password && !shareToken)
       throw new ForbiddenException(
         "This share is password protected",
+        "share_password_required"
+      );
+
+    if (!this.shareService.verifyShareToken(shareId, shareToken))
+      throw new ForbiddenException(
+        "Share token required",
         "share_token_required"
       );
 

backend/src/share/guard/shareTokenSecurity.guard.ts

@@ -0,0 +1,47 @@
+import {
+  CanActivate,
+  ExecutionContext,
+  ForbiddenException,
+  Injectable,
+  NotFoundException,
+} from "@nestjs/common";
+import { Reflector } from "@nestjs/core";
+import { Request } from "express";
+import * as moment from "moment";
+import { PrismaService } from "src/prisma/prisma.service";
+import { ShareService } from "src/share/share.service";
+
+@Injectable()
+export class ShareTokenSecurity implements CanActivate {
+  constructor(
+    private reflector: Reflector,
+    private shareService: ShareService,
+    private prisma: PrismaService
+  ) {}
+
+  async canActivate(context: ExecutionContext) {
+    const request: Request = context.switchToHttp().getRequest();
+    const shareId = Object.prototype.hasOwnProperty.call(
+      request.params,
+      "shareId"
+    )
+      ? request.params.shareId
+      : request.params.id;
+
+    const share = await this.prisma.share.findUnique({
+      where: { id: shareId },
+      include: { security: true },
+    });
+
+    if (!share || moment().isAfter(share.expiration))
+      throw new NotFoundException("Share not found");
+
+    if (share.security?.maxViews && share.security.maxViews <= share.views)
+      throw new ForbiddenException(
+        "Maximum views exceeded",
+        "share_max_views_exceeded"
+      );
+
+    return true;
+  }
+}

backend/src/share/share.controller.ts

@@ -18,6 +18,7 @@ import { ShareMetaDataDTO } from "./dto/shareMetaData.dto";
 import { SharePasswordDto } from "./dto/sharePassword.dto";
 import { ShareOwnerGuard } from "./guard/shareOwner.guard";
 import { ShareSecurityGuard } from "./guard/shareSecurity.guard";
+import { ShareTokenSecurity } from "./guard/shareTokenSecurity.guard";
 import { ShareService } from "./share.service";
 
 @Controller("shares")
@@ -68,11 +69,10 @@ export class ShareController {
     return this.shareService.isShareIdAvailable(id);
   }
 
-  @Post(":id/password")
-  async exchangeSharePasswordWithToken(
-    @Param("id") id: string,
-    @Body() body: SharePasswordDto
-  ) {
-    return this.shareService.exchangeSharePasswordWithToken(id, body.password);
+  @HttpCode(200)
+  @UseGuards(ShareTokenSecurity)
+  @Post(":id/token")
+  async getShareToken(@Param("id") id: string, @Body() body: SharePasswordDto) {
+    return this.shareService.getShareToken(id, body.password);
   }
 }

backend/src/share/share.service.ts

@@ -76,6 +76,9 @@ export class ShareService {
   }
 
   async complete(id: string) {
+    if (await this.isShareCompleted(id))
+      throw new BadRequestException("Share already completed");
+
     const moreThanOneFileInShare =
       (await this.prisma.file.findMany({ where: { shareId: id } })).length != 0;
 
@@ -101,7 +104,7 @@ export class ShareService {
   }
 
   async get(id: string) {
-    let share: any = await this.prisma.share.findUnique({
+    const share : any = await this.prisma.share.findUnique({
       where: { id },
       include: {
         files: true,
@@ -112,13 +115,6 @@ export class ShareService {
     if (!share || !share.uploadLocked)
       throw new NotFoundException("Share not found");
 
-    share.files = share.files.map((file) => {
-      file["url"] = `http://localhost:8080/file/${file.id}`;
-      return file;
-    });
-
-    await this.increaseViewCount(share);
-
     return share;
   }
 
@@ -160,27 +156,36 @@ export class ShareService {
     });
   }
 
-  async exchangeSharePasswordWithToken(shareId: string, password: string) {
-    const sharePassword = (
-      await this.prisma.shareSecurity.findFirst({
-        where: { share: { id: shareId } },
-      })
-    ).password;
+  async getShareToken(shareId: string, password: string) {
+    const share = await this.prisma.share.findFirst({
+      where: { id: shareId },
+      include: {
+        security: true,
+      },
+    });
 
-    if (!(await argon.verify(sharePassword, password)))
+    if (
+      share?.security?.password &&
+      !(await argon.verify(share.security.password, password))
+    )
       throw new ForbiddenException("Wrong password");
 
-    const token = this.generateShareToken(shareId);
+    const token = await this.generateShareToken(shareId);
+    await this.increaseViewCount(share);
     return { token };
   }
 
-  generateShareToken(shareId: string) {
+  async generateShareToken(shareId: string) {
+    const { expiration } = await this.prisma.share.findUnique({
+      where: { id: shareId },
+    });
+    console.log(moment(expiration).diff(new Date(), "seconds"));
     return this.jwtService.sign(
       {
         shareId,
       },
       {
-        expiresIn: "1h",
+        expiresIn: moment(expiration).diff(new Date(), "seconds") + "s",
         secret: this.config.get("JWT_SECRET"),
       }
     );

backend/test/system/test-file.txt

@@ -0,0 +1 @@
+This is a test filed used for uploading in the system test.

frontend/src/components/navBar/NavBar.tsx

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

frontend/src/components/share/CreateUploadModalBody.tsx

@@ -31,7 +31,7 @@ const CreateUploadModalBody = ({
       .string()
       .required()
       .min(3)
-      .max(100)
+      .max(50)
       .matches(new RegExp("^[a-zA-Z0-9_-]*$"), {
         message: "Can only contain letters, numbers, underscores and hyphens",
       }),

frontend/src/components/share/DownloadAllButton.tsx

@@ -25,7 +25,7 @@ const DownloadAllButton = ({ shareId }: { shareId: string }) => {
           setIsZipReady(share.isZipReady);
           if (share.isZipReady) clearInterval(timer);
         })
-        .catch(() => {});
+        .catch(() => clearInterval(timer));
     }, 5000);
     return () => {
       clearInterval(timer);

frontend/src/components/upload/Dropzone.tsx

@@ -1,15 +1,9 @@
-import {
-  Button,
-  Center,
-  createStyles,
-  Group,
-  Text,
-  useMantineTheme,
-} 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 { FileUpload } from "../../types/File.type";
 import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
 import toast from "../../utils/toast.util";
 
@@ -44,9 +38,8 @@ const Dropzone = ({
   setFiles,
 }: {
   isUploading: boolean;
-  setFiles: Dispatch<SetStateAction<File[]>>;
+  setFiles: Dispatch<SetStateAction<FileUpload[]>>;
 }) => {
-  const theme = useMantineTheme();
   const { classes } = useStyles();
   const openRef = useRef<() => void>();
   return (
@@ -62,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}

frontend/src/components/upload/FileList.tsx

@@ -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 { Trash } from "tabler-icons-react";
 import { FileUpload } from "../../types/File.type";
 import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
+import UploadProgressIndicator from "./UploadProgressIndicator";
 
 const FileList = ({
   files,
@@ -15,19 +16,12 @@ 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"
@@ -36,6 +30,8 @@ const FileList = ({
           >
             <Trash />
           </ActionIcon>
+        ) : (
+          <UploadProgressIndicator progress={file.uploadingProgress} />
         )}
       </td>
     </tr>

frontend/src/components/upload/UploadProgressIndicator.tsx

@@ -0,0 +1,20 @@
+import { RingProgress } from "@mantine/core";
+import { CircleCheck, CircleX } from "tabler-icons-react";
+
+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 <CircleCheck color="green" size={22} />;
+  } else {
+    return <CircleX color="red" size={22} />;
+  }
+};
+
+export default UploadProgressIndicator;

frontend/src/pages/account/shares.tsx

@@ -14,9 +14,11 @@ 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 { useRouter } from "next/router";
+import { useState } from "react";
 import { Link, Trash } from "tabler-icons-react";
 import Meta from "../../components/Meta";
+import useUser from "../../hooks/user.hook";
 import shareService from "../../services/share.service";
 import { MyShare } from "../../types/share.type";
 import toast from "../../utils/toast.util";
@@ -24,100 +26,108 @@ import toast from "../../utils/toast.util";
 const MyShares = () => {
   const modals = useModals();
   const clipboard = useClipboard();
+  const router = useRouter();
+  const user = useUser();
 
   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).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>
+  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>
-            ))}
-          </tbody>
-        </Table>
-      )}
-    </>
-  );
+            </thead>
+            <tbody>
+              {shares.map((share) => (
+                <tr key={share.id}>
+                  <td>{share.id}</td>
+                  <td>{share.views}</td>
+                  <td>
+                    {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;

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

@@ -15,12 +15,21 @@ const Share = () => {
   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 +47,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 +74,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}

frontend/src/pages/upload.tsx

@@ -28,39 +28,47 @@ 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")) {
+        try {
+          await shareService.uploadFile(share.id, files[i], progressCallBack);
+        } catch {
+          files[i].uploadingProgress = -1;
+        }
+
+        if (!files.some((f) => f.uploadingProgress != 100)) {
           await shareService.completeShare(share.id);
           setisUploading(false);
-          showCompletedUploadModal(
-            modals,
-
-            share
-          );
+          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);
     }
   };

frontend/src/services/share.service.ts

@@ -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) => {
+const uploadFile = async (
+  shareId: string,
+  file: File,
+  progressCallBack: (uploadingProgress: number) => void
+) => {
   var 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,

frontend/src/types/File.type.ts

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