Add clickable link to reverse share's shares

* Adding an information button to the shares and corrected MyShare interface

* Adding other informations and disk usage

* Adding description, disk usage

* Add case if the expiration is never

* Adding file size and better UI

* UI changes to Information Modal

* Adding description to the My Shares page

* Ran format

* Remove string type

Co-authored-by: Elias Schneider <login@eliasschneider.com>

* Remove string type check

Co-authored-by: Elias Schneider <login@eliasschneider.com>

* Remove string type conversion

Co-authored-by: Elias Schneider <login@eliasschneider.com>

* Variable name changes

Co-authored-by: Elias Schneider <login@eliasschneider.com>

* Remove color

Co-authored-by: Elias Schneider <login@eliasschneider.com>

* Requested changes made

* Ran format

* Adding MediaQuery

---------

Co-authored-by: Elias Schneider <login@eliasschneider.com>

.gitignore

@@ -23,6 +23,7 @@ yarn-error.log*
 
 # env file
 .env
+!/backend/prisma/.env
 
 # vercel
 .vercel

.prettierignore

@@ -0,0 +1 @@
+/backend/src/constants.ts

CHANGELOG.md

@@ -1,3 +1,62 @@
+## [0.15.0](https://github.com/stonith404/pingvin-share/compare/v0.14.1...v0.15.0) (2023-05-09)
+
+
+### Features
+
+* add env variables for port, database url and data dir  ([98c0de7](https://github.com/stonith404/pingvin-share/commit/98c0de78e8a73e3e5bf0928226cfb8a024b566a1))
+* add healthcheck endpoint ([5132d17](https://github.com/stonith404/pingvin-share/commit/5132d177b8ab4e00a7e701e9956222fa2352d42c))
+* allow to configure clamav with environment variables ([1df5c71](https://github.com/stonith404/pingvin-share/commit/1df5c7123e4ca8695f4f1b7d49f46cdf147fb920))
+* configure ports, db url and api url with env variables ([e5071cb](https://github.com/stonith404/pingvin-share/commit/e5071cba1204093197b72e18d024b484e72e360a))
+
+### [0.14.1](https://github.com/stonith404/pingvin-share/compare/v0.14.0...v0.14.1) (2023-04-07)
+
+
+### Bug Fixes
+
+* boolean config variables can't be set to false ([39a7451](https://github.com/stonith404/pingvin-share/commit/39a74510c1f00466acaead39f7bee003b3db60d7))
+
+## [0.14.0](https://github.com/stonith404/pingvin-share/compare/v0.13.1...v0.14.0) (2023-04-01)
+
+
+### Features
+
+* **share, config:** more variables, placeholder and reset default ([#132](https://github.com/stonith404/pingvin-share/issues/132)) ([beece56](https://github.com/stonith404/pingvin-share/commit/beece56327da141c222fd9f5259697df6db9347a))
+
+
+### Bug Fixes
+
+* bool config variable can't be changed ([0e5c673](https://github.com/stonith404/pingvin-share/commit/0e5c67327092e4751208e559a2b0d5ee2b91b6e3))
+
+### [0.13.1](https://github.com/stonith404/pingvin-share/compare/v0.13.0...v0.13.1) (2023-03-14)
+
+
+### Bug Fixes
+
+* empty file can't be uploaded in chrome ([9f2097e](https://github.com/stonith404/pingvin-share/commit/9f2097e788dfb79c2f95085025934c3134a3eb38))
+
+## [0.13.0](https://github.com/stonith404/pingvin-share/compare/v0.12.1...v0.13.0) (2023-03-14)
+
+
+### Features
+
+* add preview modal ([c807d20](https://github.com/stonith404/pingvin-share/commit/c807d208d8f0518f6390f9f0f3d0eb00c12d213b))
+* sort shared files ([b25c30d](https://github.com/stonith404/pingvin-share/commit/b25c30d1ed57230096b17afaf8545c7b0ef2e4b1))
+
+
+### Bug Fixes
+
+* replace "pingvin share" with dynamic app name ([f55aa80](https://github.com/stonith404/pingvin-share/commit/f55aa805167f31864cb07e269a47533927cb533c))
+* set password manually input not shown ([8ff417a](https://github.com/stonith404/pingvin-share/commit/8ff417a013a45a777308f71c4f0d1817bfeed6be))
+* show line breaks in txt preview ([37e765d](https://github.com/stonith404/pingvin-share/commit/37e765ddc7b19554bc6fb50eb969984b58bf3cc5))
+* upload file if it is 0 bytes ([f82099f](https://github.com/stonith404/pingvin-share/commit/f82099f36eb4699385fc16dfb0e0c02e5d55b1e3))
+
+### [0.12.1](https://github.com/stonith404/pingvin-share/compare/v0.12.0...v0.12.1) (2023-03-11)
+
+
+### Bug Fixes
+
+* 48px icon does not update ([753dbe8](https://github.com/stonith404/pingvin-share/commit/753dbe83b770814115a2576c7a50e1bac9dc8ce1))
+
 ## [0.12.0](https://github.com/stonith404/pingvin-share/compare/v0.11.1...v0.12.0) (2023-03-10)
 
 

CONTRIBUTING.md

@@ -1,3 +1,7 @@
+_Read this in another language: [Spanish](/docs/CONTRIBUTING.es.md), [English](/CONTRIBUTING.md), [Simplified Chinese](/docs/CONTRIBUTING.zh-cn.md)_
+
+---
+
 # Contributing
 
 We would ❤️ for you to contribute to Pingvin Share and help make it better! All contributions are welcome, including issues, suggestions, pull requests and more.

Dockerfile

@@ -1,26 +1,26 @@
 # Using node slim because prisma ORM needs libc for ARM builds
 
 # Stage 1: on frontend dependency change
-FROM node:18-slim AS frontend-dependencies
+FROM node:19-slim AS frontend-dependencies
 WORKDIR /opt/app
 COPY frontend/package.json frontend/package-lock.json ./
 RUN npm ci
 
 # Stage 2: on frontend change
-FROM node:18-slim AS frontend-builder
+FROM node:19-slim AS frontend-builder
 WORKDIR /opt/app
 COPY ./frontend .
 COPY --from=frontend-dependencies /opt/app/node_modules ./node_modules
 RUN npm run build
 
 # Stage 3: on backend dependency change
-FROM node:18-slim AS backend-dependencies
+FROM node:19-slim AS backend-dependencies
 WORKDIR /opt/app
 COPY backend/package.json backend/package-lock.json ./
 RUN npm ci
 
 # Stage 4:on backend change
-FROM node:18-slim AS backend-builder
+FROM node:19-slim AS backend-builder
 RUN apt-get update && apt-get install -y openssl
 WORKDIR /opt/app
 COPY ./backend .
@@ -29,9 +29,9 @@ RUN npx prisma generate
 RUN npm run build  && npm prune --production
 
 # Stage 5: Final image
-FROM node:18-slim AS runner
+FROM node:19-slim AS runner
 ENV NODE_ENV=docker
-RUN apt-get update && apt-get install -y openssl
+RUN apt-get update && apt-get install -y curl openssl
 
 WORKDIR /opt/app/frontend
 COPY --from=frontend-builder /opt/app/public ./public
@@ -47,4 +47,6 @@ COPY --from=backend-builder /opt/app/package.json ./
 
 WORKDIR /opt/app
 EXPOSE 3000
+HEALTHCHECK --interval=10s --timeout=3s CMD curl -f http://localhost:3000/api/health || exit 1
+
 CMD cp -rn /tmp/img /opt/app/frontend/public && node frontend/server.js & cd backend && npm run prod

README.md

@@ -1,5 +1,11 @@
 # <div align="center"><img  src="https://user-images.githubusercontent.com/58886915/166198400-c2134044-1198-4647-a8b6-da9c4a204c68.svg" width="40"/> </br>Pingvin Share</div>
 
+---
+
+_Read this in another language: [Spanish](/docs/README.es.md), [English](/README.md), [Simplified Chinese](/docs/README.zh-cn.md)_
+
+---
+
 Pingvin Share is self-hosted file sharing platform and an alternative for WeTransfer.
 
 ## ✨ Features
@@ -16,7 +22,7 @@ Pingvin Share is self-hosted file sharing platform and an alternative for WeTran
 - [Demo](https://pingvin-share.dev.eliasschneider.com)
 - [Review by DB Tech](https://www.youtube.com/watch?v=rWwNeZCOPJA)
 
-<img src="https://user-images.githubusercontent.com/58886915/167101708-b85032ad-f5b1-480a-b8d7-ec0096ea2a43.png" width="700"/>
+<img src="https://user-images.githubusercontent.com/58886915/225038319-b2ef742c-3a74-4eb6-9689-4207a36842a4.png" width="700"/>
 
 ## ⌨️ Setup
 
@@ -33,7 +39,7 @@ The website is now listening on `http://localhost:3000`, have fun with Pingvin S
 
 Required tools:
 
-- [Node.js](https://nodejs.org/en/download/) >= 14
+- [Node.js](https://nodejs.org/en/download/) >= 16
 - [Git](https://git-scm.com/downloads)
 - [pm2](https://pm2.keymetrics.io/) for running Pingvin Share in the background
 
@@ -88,15 +94,53 @@ docker compose up -d
 
 #### Stand-alone
 
-1. Remove the running app
+1. Stop the running app
-   ```
+   ```bash
-   pm2 delete pingvin-share-backend pingvin-share-frontend
+   pm2 stop pingvin-share-backend pingvin-share-frontend
    ```
 2. Repeat the steps from the [installation guide](#stand-alone-installation) except the `git clone` step.
 
-### Custom branding
+   ```bash
+   cd pingvin-share
 
-You can change the name and the logo of the app by visiting the admin configuration page.
+   # Checkout the latest version
+   git fetch --tags && git checkout $(git describe --tags `git rev-list --tags --max-count=1`)
+
+   # Start the backend
+   cd backend
+   npm run build
+   pm2 restart pingvin-share-backend
+
+   # Start the frontend
+   cd ../frontend
+   npm run build
+   pm2 restart pingvin-share-frontend
+   ```
+
+### Configuration
+
+You can customize Pingvin Share by going to the configuration page in your admin dashboard.
+
+#### Environment variables
+
+For installation specific configuration, you can use environment variables. The following variables are available:
+
+##### Backend
+
+| Variable         | Default Value                                      | Description                            |
+| ---------------- | -------------------------------------------------- | -------------------------------------- |
+| `PORT`           | `8080`                                             | The port on which the backend listens. |
+| `DATABASE_URL`   | `file:../data/pingvin-share.db?connection_limit=1` | The URL of the SQLite database.        |
+| `DATA_DIRECTORY` | `./data`                                           | The directory where data is stored.    |
+| `CLAMAV_HOST`    | `127.0.0.1`                                        | The IP address of the ClamAV server.   |
+| `CLAMAV_PORT`    | `3310`                                             | The port number of the ClamAV server.  |
+
+##### Frontend
+
+| Variable  | Default Value           | Description                              |
+| --------- | ----------------------- | ---------------------------------------- |
+| `PORT`    | `3000`                  | The port on which the frontend listens.  |
+| `API_URL` | `http://localhost:8080` | The URL of the backend for the frontend. |
 
 ## 🖤 Contribute
 

backend/Dockerfile

@@ -1,22 +0,0 @@
-FROM node:18 AS deps
-WORKDIR /opt/app
-COPY package.json package-lock.json ./
-COPY prisma ./prisma
-RUN npm ci
-RUN npx prisma generate
-
-
-FROM node:18 As build
-WORKDIR /opt/app
-COPY . .
-COPY --from=deps /opt/app/node_modules ./node_modules
-RUN npm run build
-
-
-FROM node:18 As runner
-WORKDIR /opt/app
-COPY --from=build /opt/app/node_modules ./node_modules
-COPY --from=build /opt/app/dist ./dist
-COPY --from=build /opt/app/prisma ./prisma
-COPY --from=deps /opt/app/package.json ./
-CMD npm run prod

backend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pingvin-share-backend",
-  "version": "0.12.0",
+  "version": "0.15.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pingvin-share-backend",
-      "version": "0.12.0",
+      "version": "0.15.0",
       "dependencies": {
         "@nestjs/common": "^9.3.9",
         "@nestjs/config": "^2.3.1",

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pingvin-share-backend",
-  "version": "0.12.0",
+  "version": "0.15.0",
   "scripts": {
     "build": "nest build",
     "dev": "cross-env NODE_ENV=development nest start --watch",

backend/prisma/.env

@@ -0,0 +1,2 @@
+#This file is only used to set a default value for the database url
+DATABASE_URL="file:../data/pingvin-share.db"

backend/prisma/migrations/20230319120712_edited_value/migration.sql

@@ -0,0 +1,23 @@
+-- RedefineTables
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Config" (
+    "updatedAt" DATETIME NOT NULL,
+    "name" TEXT NOT NULL,
+    "category" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "value" TEXT,
+    "defaultValue" TEXT NOT NULL DEFAULT '',
+    "description" TEXT NOT NULL,
+    "obscured" BOOLEAN NOT NULL DEFAULT false,
+    "secret" BOOLEAN NOT NULL DEFAULT true,
+    "locked" BOOLEAN NOT NULL DEFAULT false,
+    "order" INTEGER NOT NULL,
+
+    PRIMARY KEY ("name", "category")
+);
+INSERT INTO "new_Config" ("category", "description", "locked", "name", "obscured", "order", "secret", "type", "updatedAt", "value") SELECT "category", "description", "locked", "name", "obscured", "order", "secret", "type", "updatedAt", "value" FROM "Config";
+DROP TABLE "Config";
+ALTER TABLE "new_Config" RENAME TO "Config";
+
+PRAGMA foreign_key_check;
+PRAGMA foreign_keys=ON;

backend/prisma/schema.prisma

@@ -4,7 +4,7 @@ generator client {
 
 datasource db {
   provider = "sqlite"
-  url      = "file:../data/pingvin-share.db"
+  url      = env("DATABASE_URL")
 }
 
 model User {
@@ -131,15 +131,16 @@ model ShareSecurity {
 model Config {
   updatedAt DateTime @updatedAt
 
-  name        String
+  name         String
-  category    String
+  category     String
-  type        String
+  type         String
-  value       String
+  defaultValue String @default("")
-  description String
+  value        String?
-  obscured    Boolean @default(false)
+  description  String
-  secret      Boolean @default(true)
+  obscured     Boolean @default(false)
-  locked      Boolean @default(false)
+  secret       Boolean @default(true)
-  order       Int
+  locked       Boolean @default(false)
+  order        Int
 
   @@id([name, category])
 }

backend/prisma/seed/config.seed.ts

@@ -1,12 +1,11 @@
 import { Prisma, PrismaClient } from "@prisma/client";
 import * as crypto from "crypto";
-
 const configVariables: ConfigVariables = {
   internal: {
     jwtSecret: {
       description: "Long random string used to sign JWT tokens",
       type: "string",
-      value: crypto.randomBytes(256).toString("base64"),
+      defaultValue: crypto.randomBytes(256).toString("base64"),
       locked: true,
     },
   },
@@ -14,20 +13,20 @@ const configVariables: ConfigVariables = {
     appName: {
       description: "Name of the application",
       type: "string",
-      value: "Pingvin Share",
+      defaultValue: "Pingvin Share",
       secret: false,
     },
     appUrl: {
       description: "On which URL Pingvin Share is available",
       type: "string",
-      value: "http://localhost:3000",
+      defaultValue: "http://localhost:3000",
 
       secret: false,
     },
     showHomePage: {
       description: "Whether to show the home page",
       type: "boolean",
-      value: "true",
+      defaultValue: "true",
       secret: false,
     },
   },
@@ -35,21 +34,21 @@ const configVariables: ConfigVariables = {
     allowRegistration: {
       description: "Whether registration is allowed",
       type: "boolean",
-      value: "true",
+      defaultValue: "true",
 
       secret: false,
     },
     allowUnauthenticatedShares: {
       description: "Whether unauthorized users can create shares",
       type: "boolean",
-      value: "false",
+      defaultValue: "false",
 
       secret: false,
     },
     maxSize: {
       description: "Maximum share size in bytes",
       type: "number",
-      value: "1073741824",
+      defaultValue: "1073741824",
 
       secret: false,
     },
@@ -59,7 +58,7 @@ const configVariables: ConfigVariables = {
       description:
         "Whether to allow emails to share recipients. Only enable this if you have enabled SMTP.",
       type: "boolean",
-      value: "false",
+      defaultValue: "false",
 
       secret: false,
     },
@@ -67,53 +66,53 @@ const configVariables: ConfigVariables = {
       description:
         "Subject of the email which gets sent to the share recipients.",
       type: "string",
-      value: "Files shared with you",
+      defaultValue: "Files shared with you",
     },
     shareRecipientsMessage: {
       description:
-        "Message which gets sent to the share recipients. {creator} and {shareUrl} will be replaced with the creator's name and the share URL.",
+        "Message which gets sent to the share recipients.\n\nAvailable variables:\n{creator} - The username of the creator of the share\n{shareUrl} - The URL of the share\n{desc} - The description of the share\n{expires} - The expiration date of the share\n\nVariables will be replaced with the actual values.",
       type: "text",
-      value:
+      defaultValue:
-        "Hey!\n{creator} shared some files with you. View or download the files with this link: {shareUrl}\nShared securely with Pingvin Share 🐧",
+        "Hey!\n\n{creator} shared some files with you, view or download the files with this link: {shareUrl}\n\nThe share will expire {expires}.\n\nNote: {desc}\n\nShared securely with Pingvin Share 🐧",
     },
     reverseShareSubject: {
       description:
         "Subject of the email which gets sent when someone created a share with your reverse share link.",
       type: "string",
-      value: "Reverse share link used",
+      defaultValue: "Reverse share link used",
     },
     reverseShareMessage: {
       description:
         "Message which gets sent when someone created a share with your reverse share link. {shareUrl} will be replaced with the creator's name and the share URL.",
       type: "text",
-      value:
+      defaultValue:
-        "Hey!\nA share was just created with your reverse share link: {shareUrl}\nShared securely with Pingvin Share 🐧",
+        "Hey!\n\nA share was just created with your reverse share link: {shareUrl}\n\nShared securely with Pingvin Share 🐧",
     },
     resetPasswordSubject: {
       description:
         "Subject of the email which gets sent when a user requests a password reset.",
       type: "string",
-      value: "Pingvin Share password reset",
+      defaultValue: "Pingvin Share password reset",
     },
     resetPasswordMessage: {
       description:
         "Message which gets sent when a user requests a password reset. {url} will be replaced with the reset password URL.",
       type: "text",
-      value:
+      defaultValue:
-        "Hey!\nYou requested a password reset. Click this link to reset your password: {url}\nThe link expires in a hour.\nPingvin Share 🐧",
+        "Hey!\n\nYou requested a password reset. Click this link to reset your password: {url}\nThe link expires in a hour.\n\nPingvin Share 🐧",
     },
     inviteSubject: {
       description:
         "Subject of the email which gets sent when an admin invites an user.",
       type: "string",
-      value: "Pingvin Share invite",
+      defaultValue: "Pingvin Share invite",
     },
     inviteMessage: {
       description:
         "Message which gets sent when an admin invites an user. {url} will be replaced with the invite URL and {password} with the password.",
       type: "text",
-      value:
+      defaultValue:
-        "Hey!\nYou were invited to Pingvin Share. Click this link to accept the invite: {url}\nYour password is: {password}\nPingvin Share 🐧",
+        "Hey!\n\nYou were invited to Pingvin Share. Click this link to accept the invite: {url}\n\nYour password is: {password}\n\nPingvin Share 🐧",
     },
   },
   smtp: {
@@ -121,33 +120,33 @@ const configVariables: ConfigVariables = {
       description:
         "Whether SMTP is enabled. Only set this to true if you entered the host, port, email, user and password of your SMTP server.",
       type: "boolean",
-      value: "false",
+      defaultValue: "false",
       secret: false,
     },
     host: {
       description: "Host of the SMTP server",
       type: "string",
-      value: "",
+      defaultValue: "",
     },
     port: {
       description: "Port of the SMTP server",
       type: "number",
-      value: "0",
+      defaultValue: "0",
     },
     email: {
       description: "Email address which the emails get sent from",
       type: "string",
-      value: "",
+      defaultValue: "",
     },
     username: {
       description: "Username of the SMTP server",
       type: "string",
-      value: "",
+      defaultValue: "",
     },
     password: {
       description: "Password of the SMTP server",
       type: "string",
-      value: "",
+      defaultValue: "",
       obscured: true,
     },
   },
@@ -162,7 +161,15 @@ type ConfigVariables = {
   };
 };
 
-const prisma = new PrismaClient();
+const prisma = new PrismaClient({
+  datasources: {
+    db: {
+      url:
+        process.env.DATABASE_URL ||
+        "file:../data/pingvin-share.db?connection_limit=1",
+    },
+  },
+});
 
 async function seedConfigVariables() {
   for (const [category, configVariablesOfCategory] of Object.entries(

backend/src/auth/auth.service.ts

@@ -6,7 +6,7 @@ import {
 } from "@nestjs/common";
 import { JwtService } from "@nestjs/jwt";
 import { User } from "@prisma/client";
-import { PrismaClientKnownRequestError } from "@prisma/client/runtime";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import * as argon from "argon2";
 import * as moment from "moment";
 import { ConfigService } from "src/config/config.service";

backend/src/auth/authTotp.service.ts

@@ -8,6 +8,7 @@ import { User } from "@prisma/client";
 import * as argon from "argon2";
 import { authenticator, totp } from "otplib";
 import * as qrcode from "qrcode-svg";
+import { ConfigService } from "src/config/config.service";
 import { PrismaService } from "src/prisma/prisma.service";
 import { AuthService } from "./auth.service";
 import { AuthSignInTotpDTO } from "./dto/authSignInTotp.dto";
@@ -16,7 +17,8 @@ import { AuthSignInTotpDTO } from "./dto/authSignInTotp.dto";
 export class AuthTotpService {
   constructor(
     private prisma: PrismaService,
-    private authService: AuthService
+    private authService: AuthService,
+    private config: ConfigService
   ) {}
 
   async signInTotp(dto: AuthSignInTotpDTO) {
@@ -95,7 +97,7 @@ export class AuthTotpService {
 
     const otpURL = totp.keyuri(
       user.username || user.email,
-      "pingvin-share",
+      this.config.get("general.appName"),
       secret
     );
 

backend/src/clamscan/clamscan.service.ts

@@ -1,20 +1,22 @@
-import { Injectable } from "@nestjs/common";
+import { Injectable, Logger } from "@nestjs/common";
 import * as NodeClam from "clamscan";
 import * as fs from "fs";
 import { FileService } from "src/file/file.service";
 import { PrismaService } from "src/prisma/prisma.service";
+import { CLAMAV_HOST, CLAMAV_PORT, SHARE_DIRECTORY } from "../constants";
 
 const clamscanConfig = {
   clamdscan: {
-    host: process.env.NODE_ENV == "docker" ? "clamav" : "127.0.0.1",
+    host: CLAMAV_HOST,
-    port: 3310,
+    port: CLAMAV_PORT,
     localFallback: false,
   },
   preference: "clamdscan",
 };
-
 @Injectable()
 export class ClamScanService {
+  private readonly logger = new Logger(ClamScanService.name);
+
   constructor(
     private fileService: FileService,
     private prisma: PrismaService
@@ -23,11 +25,11 @@ export class ClamScanService {
   private ClamScan: Promise<NodeClam | null> = new NodeClam()
     .init(clamscanConfig)
     .then((res) => {
-      console.log("ClamAV is active");
+      this.logger.log("ClamAV is active");
       return res;
     })
     .catch(() => {
-      console.log("ClamAV is not active");
+      this.logger.log("ClamAV is not active");
       return null;
     });
 
@@ -39,14 +41,14 @@ export class ClamScanService {
     const infectedFiles = [];
 
     const files = fs
-      .readdirSync(`./data/uploads/shares/${shareId}`)
+      .readdirSync(`${SHARE_DIRECTORY}/${shareId}`)
       .filter((file) => file != "archive.zip");
 
     for (const fileId of files) {
       const { isInfected } = await clamScan
-        .isInfected(`./data/uploads/shares/${shareId}/${fileId}`)
+        .isInfected(`${SHARE_DIRECTORY}/${shareId}/${fileId}`)
         .catch(() => {
-          console.log("ClamAV is not active");
+          this.logger.log("ClamAV is not active");
           return { isInfected: false };
         });
 
@@ -78,7 +80,7 @@ export class ClamScanService {
         },
       });
 
-      console.log(
+      this.logger.warn(
         `Share ${shareId} deleted because it contained ${infectedFiles.length} malicious file(s)`
       );
     }

backend/src/config/config.service.ts

@@ -21,10 +21,12 @@ export class ConfigService {
 
     if (!configVariable) throw new Error(`Config variable ${key} not found`);
 
-    if (configVariable.type == "number") return parseInt(configVariable.value);
+    const value = configVariable.value ?? configVariable.defaultValue;
-    if (configVariable.type == "boolean") return configVariable.value == "true";
+
+    if (configVariable.type == "number") return parseInt(value);
+    if (configVariable.type == "boolean") return value == "true";
     if (configVariable.type == "string" || configVariable.type == "text")
-      return configVariable.value;
+      return value;
   }
 
   async getByCategory(category: string) {
@@ -35,8 +37,9 @@ export class ConfigService {
 
     return configVariables.map((variable) => {
       return {
-        key: `${variable.category}.${variable.name}`,
         ...variable,
+        key: `${variable.category}.${variable.name}`,
+        value: variable.value ?? variable.defaultValue,
       };
     });
   }
@@ -48,8 +51,9 @@ export class ConfigService {
 
     return configVariables.map((variable) => {
       return {
-        key: `${variable.category}.${variable.name}`,
         ...variable,
+        key: `${variable.category}.${variable.name}`,
+        value: variable.value ?? variable.defaultValue,
       };
     });
   }
@@ -77,7 +81,9 @@ export class ConfigService {
     if (!configVariable || configVariable.locked)
       throw new NotFoundException("Config variable not found");
 
-    if (
+    if (value === "") {
+      value = null;
+    } else if (
       typeof value != configVariable.type &&
       typeof value == "string" &&
       configVariable.type != "text"
@@ -94,7 +100,7 @@ export class ConfigService {
           name: key.split(".")[1],
         },
       },
-      data: { value: value.toString() },
+      data: { value: value === null ? null : value.toString() },
     });
 
     this.configVariables = await this.prisma.config.findMany();

backend/src/config/dto/adminConfig.dto.ts

@@ -8,6 +8,9 @@ export class AdminConfigDTO extends ConfigDTO {
   @Expose()
   secret: boolean;
 
+  @Expose()
+  defaultValue: string;
+
   @Expose()
   updatedAt: Date;
 

backend/src/config/dto/updateConfig.dto.ts

@@ -1,11 +1,10 @@
-import { IsNotEmpty, IsString, ValidateIf } from "class-validator";
+import { IsNotEmpty, IsString } from "class-validator";
 
 class UpdateConfigDTO {
   @IsString()
   key: string;
 
   @IsNotEmpty()
-  @ValidateIf((dto) => dto.value !== "")
   value: string | number | boolean;
 }
 

backend/src/config/logo.service.ts

@@ -18,7 +18,7 @@ export class LogoService {
   }
 
   async createPWAIcons(file: Buffer) {
-    const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
+    const sizes = [48, 72, 96, 128, 144, 152, 192, 384, 512];
 
     for (const size of sizes) {
       const resized = await sharp(file).resize(size).toBuffer();

backend/src/constants.ts

@@ -0,0 +1,5 @@
+export const DATA_DIRECTORY = process.env.DATA_DIRECTORY || "./data";
+export const SHARE_DIRECTORY =  `${DATA_DIRECTORY}/uploads/shares` 
+export const DATABASE_URL = process.env.DATABASE_URL || "file:../data/pingvin-share.db?connection_limit=1";
+export const CLAMAV_HOST = process.env.CLAMAV_HOST || (process.env.NODE_ENV == "docker" ? "clamav" : "127.0.0.1");
+export const CLAMAV_PORT = parseInt(process.env.CLAMAV_PORT) || 3310;

backend/src/email/email.service.ts

@@ -1,11 +1,17 @@
-import { Injectable, InternalServerErrorException } from "@nestjs/common";
+import {
+  Injectable,
+  InternalServerErrorException,
+  Logger,
+} from "@nestjs/common";
 import { User } from "@prisma/client";
+import * as moment from "moment";
 import * as nodemailer from "nodemailer";
 import { ConfigService } from "src/config/config.service";
 
 @Injectable()
 export class EmailService {
   constructor(private config: ConfigService) {}
+  private readonly logger = new Logger(EmailService.name);
 
   getTransporter() {
     if (!this.config.get("smtp.enabled"))
@@ -22,44 +28,63 @@ export class EmailService {
     });
   }
 
-  async sendMailToShareRecepients(
+  private async sendMail(email: string, subject: string, text: string) {
+    await this.getTransporter()
+      .sendMail({
+        from: `"${this.config.get("general.appName")}" <${this.config.get(
+          "smtp.email"
+        )}>`,
+        to: email,
+        subject,
+        text,
+      })
+      .catch((e) => {
+        this.logger.error(e);
+        throw new InternalServerErrorException("Failed to send email");
+      });
+  }
+
+  async sendMailToShareRecipients(
     recipientEmail: string,
     shareId: string,
-    creator?: User
+    creator?: User,
+    description?: string,
+    expiration?: Date
   ) {
     if (!this.config.get("email.enableShareEmailRecipients"))
       throw new InternalServerErrorException("Email service disabled");
 
     const shareUrl = `${this.config.get("general.appUrl")}/share/${shareId}`;
 
-    await this.getTransporter().sendMail({
+    await this.sendMail(
-      from: `"${this.config.get("general.appName")}" <${this.config.get(
+      recipientEmail,
-        "smtp.email"
+      this.config.get("email.shareRecipientsSubject"),
-      )}>`,
+      this.config
-      to: recipientEmail,
-      subject: this.config.get("email.shareRecipientsSubject"),
-      text: this.config
         .get("email.shareRecipientsMessage")
         .replaceAll("\\n", "\n")
         .replaceAll("{creator}", creator?.username ?? "Someone")
-        .replaceAll("{shareUrl}", shareUrl),
+        .replaceAll("{shareUrl}", shareUrl)
-    });
+        .replaceAll("{desc}", description ?? "No description")
+        .replaceAll(
+          "{expires}",
+          moment(expiration).unix() != 0
+            ? moment(expiration).fromNow()
+            : "in: never"
+        )
+    );
   }
 
   async sendMailToReverseShareCreator(recipientEmail: string, shareId: string) {
     const shareUrl = `${this.config.get("general.appUrl")}/share/${shareId}`;
 
-    await this.getTransporter().sendMail({
+    await this.sendMail(
-      from: `"${this.config.get("general.appName")}" <${this.config.get(
+      recipientEmail,
-        "smtp.email"
+      this.config.get("email.reverseShareSubject"),
-      )}>`,
+      this.config
-      to: recipientEmail,
-      subject: this.config.get("email.reverseShareSubject"),
-      text: this.config
         .get("email.reverseShareMessage")
         .replaceAll("\\n", "\n")
-        .replaceAll("{shareUrl}", shareUrl),
+        .replaceAll("{shareUrl}", shareUrl)
-    });
+    );
   }
 
   async sendResetPasswordEmail(recipientEmail: string, token: string) {
@@ -67,47 +92,42 @@ export class EmailService {
       "general.appUrl"
     )}/auth/resetPassword/${token}`;
 
-    await this.getTransporter().sendMail({
+    await this.sendMail(
-      from: `"${this.config.get("general.appName")}" <${this.config.get(
+      recipientEmail,
-        "smtp.email"
+      this.config.get("email.resetPasswordSubject"),
-      )}>`,
+      this.config
-      to: recipientEmail,
-      subject: this.config.get("email.resetPasswordSubject"),
-      text: this.config
         .get("email.resetPasswordMessage")
-        .replaceAll("{url}", resetPasswordUrl),
+        .replaceAll("\\n", "\n")
-    });
+        .replaceAll("{url}", resetPasswordUrl)
+    );
   }
 
   async sendInviteEmail(recipientEmail: string, password: string) {
     const loginUrl = `${this.config.get("general.appUrl")}/auth/signIn`;
 
-    await this.getTransporter().sendMail({
+    await this.sendMail(
-      from: `"${this.config.get("general.appName")}" <${this.config.get(
+      recipientEmail,
-        "smtp.email"
+      this.config.get("email.inviteSubject"),
-      )}>`,
+      this.config
-      to: recipientEmail,
-      subject: this.config.get("email.inviteSubject"),
-      text: this.config
         .get("email.inviteMessage")
         .replaceAll("{url}", loginUrl)
-        .replaceAll("{password}", password),
+        .replaceAll("{password}", password)
-    });
+    );
   }
 
   async sendTestMail(recipientEmail: string) {
-    try {
+    await this.getTransporter()
-      await this.getTransporter().sendMail({
+      .sendMail({
         from: `"${this.config.get("general.appName")}" <${this.config.get(
           "smtp.email"
         )}>`,
         to: recipientEmail,
         subject: "Test email",
         text: "This is a test email",
+      })
+      .catch((e) => {
+        this.logger.error(e);
+        throw new InternalServerErrorException(e.message);
       });
-    } catch (e) {
-      console.error(e);
-      throw new InternalServerErrorException(e.message);
-    }
   }
 }

backend/src/file/file.controller.ts

@@ -32,7 +32,8 @@ export class FileController {
   ) {
     const { id, name, chunkIndex, totalChunks } = query;
 
-    const data = body.toString().split(",")[1];
+    // Data can be empty if the file is empty
+    const data = body.toString().split(",")[1] ?? "";
 
     return await this.fileService.create(
       data,
@@ -51,7 +52,7 @@ export class FileController {
     const zip = this.fileService.getZip(shareId);
     res.set({
       "Content-Type": "application/zip",
-      "Content-Disposition": contentDisposition(`pingvin-share-${shareId}.zip`),
+      "Content-Disposition": contentDisposition(`${shareId}.zip`),
     });
 
     return new StreamableFile(zip);

backend/src/file/file.service.ts

@@ -11,6 +11,7 @@ import * as fs from "fs";
 import * as mime from "mime-types";
 import { ConfigService } from "src/config/config.service";
 import { PrismaService } from "src/prisma/prisma.service";
+import { SHARE_DIRECTORY } from "../constants";
 
 @Injectable()
 export class FileService {
@@ -39,7 +40,7 @@ export class FileService {
     let diskFileSize: number;
     try {
       diskFileSize = fs.statSync(
-        `./data/uploads/shares/${shareId}/${file.id}.tmp-chunk`
+        `${SHARE_DIRECTORY}/${shareId}/${file.id}.tmp-chunk`
       ).size;
     } catch {
       diskFileSize = 0;
@@ -78,18 +79,18 @@ export class FileService {
     }
 
     fs.appendFileSync(
-      `./data/uploads/shares/${shareId}/${file.id}.tmp-chunk`,
+      `${SHARE_DIRECTORY}/${shareId}/${file.id}.tmp-chunk`,
       buffer
     );
 
     const isLastChunk = chunk.index == chunk.total - 1;
     if (isLastChunk) {
       fs.renameSync(
-        `./data/uploads/shares/${shareId}/${file.id}.tmp-chunk`,
+        `${SHARE_DIRECTORY}/${shareId}/${file.id}.tmp-chunk`,
-        `./data/uploads/shares/${shareId}/${file.id}`
+        `${SHARE_DIRECTORY}/${shareId}/${file.id}`
       );
       const fileSize = fs.statSync(
-        `./data/uploads/shares/${shareId}/${file.id}`
+        `${SHARE_DIRECTORY}/${shareId}/${file.id}`
       ).size;
       await this.prisma.file.create({
         data: {
@@ -111,9 +112,7 @@ export class FileService {
 
     if (!fileMetaData) throw new NotFoundException("File not found");
 
-    const file = fs.createReadStream(
+    const file = fs.createReadStream(`${SHARE_DIRECTORY}/${shareId}/${fileId}`);
-      `./data/uploads/shares/${shareId}/${fileId}`
-    );
 
     return {
       metaData: {
@@ -126,13 +125,13 @@ export class FileService {
   }
 
   async deleteAllFiles(shareId: string) {
-    await fs.promises.rm(`./data/uploads/shares/${shareId}`, {
+    await fs.promises.rm(`${SHARE_DIRECTORY}/${shareId}`, {
       recursive: true,
       force: true,
     });
   }
 
   getZip(shareId: string) {
-    return fs.createReadStream(`./data/uploads/shares/${shareId}/archive.zip`);
+    return fs.createReadStream(`${SHARE_DIRECTORY}/${shareId}/archive.zip`);
   }
 }

backend/src/jobs/jobs.service.ts

@@ -1,13 +1,16 @@
-import { Injectable } from "@nestjs/common";
+import { Injectable, Logger } from "@nestjs/common";
 import { Cron } from "@nestjs/schedule";
 import * as fs from "fs";
 import * as moment from "moment";
 import { FileService } from "src/file/file.service";
 import { PrismaService } from "src/prisma/prisma.service";
 import { ReverseShareService } from "src/reverseShare/reverseShare.service";
+import { SHARE_DIRECTORY } from "../constants";
 
 @Injectable()
 export class JobsService {
+  private readonly logger = new Logger(JobsService.name);
+
   constructor(
     private prisma: PrismaService,
     private reverseShareService: ReverseShareService,
@@ -34,8 +37,9 @@ export class JobsService {
       await this.fileService.deleteAllFiles(expiredShare.id);
     }
 
-    if (expiredShares.length > 0)
+    if (expiredShares.length > 0) {
-      console.log(`job: deleted ${expiredShares.length} expired shares`);
+      this.logger.log(`Deleted ${expiredShares.length} expired shares`);
+    }
   }
 
   @Cron("0 * * * *")
@@ -50,10 +54,11 @@ export class JobsService {
       await this.reverseShareService.remove(expiredReverseShare.id);
     }
 
-    if (expiredReverseShares.length > 0)
+    if (expiredReverseShares.length > 0) {
-      console.log(
+      this.logger.log(
-        `job: deleted ${expiredReverseShares.length} expired reverse shares`
+        `Deleted ${expiredReverseShares.length} expired reverse shares`
       );
+    }
   }
 
   @Cron("0 0 * * *")
@@ -61,31 +66,31 @@ export class JobsService {
     let filesDeleted = 0;
 
     const shareDirectories = fs
-      .readdirSync("./data/uploads/shares", { withFileTypes: true })
+      .readdirSync(SHARE_DIRECTORY, { withFileTypes: true })
       .filter((dirent) => dirent.isDirectory())
       .map((dirent) => dirent.name);
 
     for (const shareDirectory of shareDirectories) {
       const temporaryFiles = fs
-        .readdirSync(`./data/uploads/shares/${shareDirectory}`)
+        .readdirSync(`${SHARE_DIRECTORY}/${shareDirectory}`)
         .filter((file) => file.endsWith(".tmp-chunk"));
 
       for (const file of temporaryFiles) {
         const stats = fs.statSync(
-          `./data/uploads/shares/${shareDirectory}/${file}`
+          `${SHARE_DIRECTORY}/${shareDirectory}/${file}`
         );
         const isOlderThanOneDay = moment(stats.mtime)
           .add(1, "day")
           .isBefore(moment());
 
         if (isOlderThanOneDay) {
-          fs.rmSync(`./data/uploads/shares/${shareDirectory}/${file}`);
+          fs.rmSync(`${SHARE_DIRECTORY}/${shareDirectory}/${file}`);
           filesDeleted++;
         }
       }
     }
 
-    console.log(`job: deleted ${filesDeleted} temporary files`);
+    this.logger.log(`Deleted ${filesDeleted} temporary files`);
   }
 
   @Cron("0 * * * *")
@@ -107,7 +112,8 @@ export class JobsService {
     const deletedTokensCount =
       refreshTokenCount + loginTokenCount + resetPasswordTokenCount;
 
-    if (deletedTokensCount > 0)
+    if (deletedTokensCount > 0) {
-      console.log(`job: deleted ${deletedTokensCount} expired refresh tokens`);
+      this.logger.log(`Deleted ${deletedTokensCount} expired refresh tokens`);
+    }
   }
 }

backend/src/main.ts

@@ -6,6 +6,7 @@ import * as bodyParser from "body-parser";
 import * as cookieParser from "cookie-parser";
 import * as fs from "fs";
 import { AppModule } from "./app.module";
+import { DATA_DIRECTORY } from "./constants";
 
 async function bootstrap() {
   const app = await NestFactory.create<NestExpressApplication>(AppModule);
@@ -16,7 +17,9 @@ async function bootstrap() {
   app.use(cookieParser());
   app.set("trust proxy", true);
 
-  await fs.promises.mkdir("./data/uploads/_temp", { recursive: true });
+  await fs.promises.mkdir(`${DATA_DIRECTORY}/uploads/_temp`, {
+    recursive: true,
+  });
 
   app.setGlobalPrefix("api");
 
@@ -30,6 +33,6 @@ async function bootstrap() {
     SwaggerModule.setup("api/swagger", app, document);
   }
 
-  await app.listen(8080);
+  await app.listen(parseInt(process.env.PORT) || 8080);
 }
 bootstrap();

backend/src/prisma/prisma.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from "@nestjs/common";
 import { PrismaClient } from "@prisma/client";
+import { DATABASE_URL } from "../constants";
 
 @Injectable()
 export class PrismaService extends PrismaClient {
@@ -7,7 +8,7 @@ export class PrismaService extends PrismaClient {
     super({
       datasources: {
         db: {
-          url: "file:../data/pingvin-share.db?connection_limit=1",
+          url: DATABASE_URL,
         },
       },
     });

backend/src/share/dto/myShare.dto.ts

@@ -1,7 +1,13 @@
-import { Expose, plainToClass } from "class-transformer";
+import { Expose, plainToClass, Type } from "class-transformer";
 import { ShareDTO } from "./share.dto";
+import {FileDTO} from "../../file/dto/file.dto";
+import {OmitType} from "@nestjs/swagger";
 
-export class MyShareDTO extends ShareDTO {
+export class MyShareDTO extends OmitType(ShareDTO, [
+  "files",
+  "from",
+  "fromList",
+] as const) {
   @Expose()
   views: number;
 
@@ -11,6 +17,10 @@ export class MyShareDTO extends ShareDTO {
   @Expose()
   recipients: string[];
 
+  @Expose()
+  @Type(() => OmitType(FileDTO, ["share", "from"] as const))
+  files: Omit<FileDTO, "share" | "from">[];
+
   from(partial: Partial<MyShareDTO>) {
     return plainToClass(MyShareDTO, partial, { excludeExtraneousValues: true });
   }

backend/src/share/share.service.ts

@@ -16,6 +16,7 @@ import { EmailService } from "src/email/email.service";
 import { FileService } from "src/file/file.service";
 import { PrismaService } from "src/prisma/prisma.service";
 import { ReverseShareService } from "src/reverseShare/reverseShare.service";
+import { SHARE_DIRECTORY } from "../constants";
 import { CreateShareDTO } from "./dto/createShare.dto";
 
 @Injectable()
@@ -65,7 +66,7 @@ export class ShareService {
       }
     }
 
-    fs.mkdirSync(`./data/uploads/shares/${share.id}`, {
+    fs.mkdirSync(`${SHARE_DIRECTORY}/${share.id}`, {
       recursive: true,
     });
 
@@ -99,7 +100,7 @@ export class ShareService {
   }
 
   async createZip(shareId: string) {
-    const path = `./data/uploads/shares/${shareId}`;
+    const path = `${SHARE_DIRECTORY}/${shareId}`;
 
     const files = await this.prisma.file.findMany({ where: { shareId } });
     const archive = archiver("zip", {
@@ -142,12 +143,14 @@ export class ShareService {
         this.prisma.share.update({ where: { id }, data: { isZipReady: true } })
       );
 
-    // Send email for each recepient
+    // Send email for each recipient
-    for (const recepient of share.recipients) {
+    for (const recipient of share.recipients) {
-      await this.emailService.sendMailToShareRecepients(
+      await this.emailService.sendMailToShareRecipients(
-        recepient.email,
+        recipient.email,
         share.id,
-        share.creator
+        share.creator,
+        share.description,
+        share.expiration
       );
     }
 
@@ -163,7 +166,7 @@ export class ShareService {
     }
 
     // Check if any file is malicious with ClamAV
-    this.clamScanService.checkAndRemove(share.id);
+    void this.clamScanService.checkAndRemove(share.id);
 
     if (share.reverseShare) {
       await this.prisma.reverseShare.update({
@@ -172,7 +175,7 @@ export class ShareService {
       });
     }
 
-    return await this.prisma.share.update({
+    return this.prisma.share.update({
       where: { id },
       data: { uploadLocked: true },
     });
@@ -192,17 +195,15 @@ export class ShareService {
       orderBy: {
         expiration: "desc",
       },
-      include: { recipients: true },
+      include: { recipients: true, files: true },
     });
 
-    const sharesWithEmailRecipients = shares.map((share) => {
+    return shares.map((share) => {
       return {
         ...share,
         recipients: share.recipients.map((recipients) => recipients.email),
       };
     });
-
-    return sharesWithEmailRecipients;
   }
 
   async get(id: string): Promise<any> {
@@ -222,7 +223,7 @@ export class ShareService {
       throw new NotFoundException("Share not found");
     return {
       ...share,
-      hasPassword: share.security?.password ? true : false,
+      hasPassword: !!share.security?.password,
     };
   }
 
@@ -278,7 +279,7 @@ export class ShareService {
       share?.security?.password &&
       !(await argon.verify(share.security.password, password))
     ) {
-      throw new ForbiddenException("Wrong password");
+      throw new ForbiddenException("Wrong password", "wrong_password");
     }
 
     if (share.security?.maxViews && share.security.maxViews <= share.views) {

backend/src/user/user.service.ts

@@ -1,5 +1,5 @@
 import { BadRequestException, Injectable } from "@nestjs/common";
-import { PrismaClientKnownRequestError } from "@prisma/client/runtime";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import * as argon from "argon2";
 import * as crypto from "crypto";
 import { EmailService } from "src/email/email.service";
@@ -29,7 +29,7 @@ export class UserSevice {
     if (!dto.password) {
       const randomPassword = crypto.randomUUID();
       hash = await argon.hash(randomPassword);
-      this.emailService.sendInviteEmail(dto.email, randomPassword);
+      await this.emailService.sendInviteEmail(dto.email, randomPassword);
     } else {
       hash = await argon.hash(dto.password);
     }

docs/CONTRIBUTING.es.md

@@ -0,0 +1,95 @@
+_Leer esto en otro idioma: [Inglés](/CONTRIBUTING.md), [Español](/docs/CONTRIBUTING.es.md), [Chino Simplificado](/docs/CONTRIBUTING.zh-cn.md)_
+
+---
+
+# Contribuyendo
+
+¡Nos ❤️ encantaría que contribuyas a Pingvin Share y nos ayudes a hacerlo mejor! Todas las contribuciones son bienvenidas, incluyendo problemas, sugerencias, _pull requests_ y más.
+
+## Para comenzar
+
+Si encontraste un error, tienes una sugerencia o algo más, simplemente crea un problema (issue) en GitHub y nos pondremos en contacto contigo 😊.
+
+## Para hacer una Pull Request
+
+Antes de enviar la pull request para su revisión, asegúrate de que:
+
+- El nombre de la pull request sigue las [especificaciones de Commits Convencionales](https://www.conventionalcommits.org/):
+
+  `<tipo>[ámbito opcional]: <descripción>`
+
+  ejemplo:
+
+  ```
+  feat(share): agregar protección con contraseña
+  ```
+
+  Donde `tipo` puede ser:
+
+  - **feat** - es una nueva función
+  - **doc** - cambios solo en la documentación
+  - **fix** - una corrección de error
+  - **refactor** - cambios en el código que no solucionan un error ni agregan una función
+
+- Tu pull requests tiene una descripción detallada.
+
+- Ejecutaste `npm run format` para formatear el código.
+
+<details>
+  <summary>¿No sabes como crear una pull request? Aprende cómo crear una pull request</summary>
+
+1. Crea un fork del repositorio haciendo clic en el botón `Fork` en el repositorio de Pingvin Share.
+
+2. Clona tu fork en tu máquina con `git clone`.
+
+```
+$ git clone https://github.com/[your_username]/pingvin-share
+```
+
+3. Trabajar - hacer commit - repetir
+
+4. Haz un `push` de tus cambios a GitHub.
+
+```
+$ git push origin [nombre_de_tu_nueva_rama]
+```
+
+5. Envía tus cambios para su revisión. Si vas a tu repositorio en GitHub, verás un botón `Comparar y crear pull requests`. Haz clic en ese botón.
+6. Inicia una Pull Request
+7. Ahora envía la pull requests y haz clic en `Crear pull requests`
+8. Espera a que alguien revise tu solicitud y apruebe o rechace tus cambios. Puedes ver los comentarios en la página de la solicitud en GitHub.
+
+</details>
+
+## Instalación del proyecto
+
+Pingvin Share consiste de un frontend y un backend.
+
+### Backend
+
+El backend está hecho con [Nest.js](https://nestjs.com) y usa Typescript.
+
+#### Instalación
+
+1. Abrimos la carpeta `backend`
+2. Instalamos las dependencias con `npm install`
+3. Haz un `push` del esquema de la base de datos a la base de datos ejecutando `npx prisma db push`
+4. Rellena la base de datos ejecutando `npx prisma db seed`
+5. Inicia el backend con `npm run dev`
+
+### Frontend
+
+El frontend está hecho con [Next.js](https://nextjs.org) y usa Typescript.
+
+#### Instalación
+
+1. Primero inicia el backend
+2. Abre la carpeta `frontend`
+3. Instala las dependencias con `npm install`
+4. Inicia el frontend con `npm run dev`
+
+¡Ya está todo listo!
+
+### Testing
+
+Por el momento, solo tenemos pruebas para el backend. Para ejecutar estas pruebas, debes ejecutar el comando `npm run test:system` en la carpeta del backend.

docs/CONTRIBUTING.zh-cn.md

@@ -0,0 +1,97 @@
+_选择合适的语言阅读: [西班牙语](/docs/CONTRIBUTING.es.md), [英语](/CONTRIBUTING.md), [简体中文](/docs/CONTRIBUTING.zh-cn.md)_
+
+---
+
+# 提交贡献
+
+我们非常感谢你 ❤️ 为 Pingvin Share 提交贡献使其变得更棒! 欢迎任何形式的贡献，包括 issues, 建议, PRs 和其他形式
+
+## 小小的开始
+
+你找到了一个 bug，有新特性建议或者其他提议，请在 GitHub 建立一个 issue 以便我和你联络 😊
+
+## 提交一个 Pull Request
+
+在你提交 PR 前请确保
+
+- PR 的名字遵守 [Conventional Commits specification](https://www.conventionalcommits.org):
+
+  `<type>[optional scope]: <description>`
+
+  例如:
+
+  ```
+  feat(share): add password protection
+  ```
+
+  `TYPE` 可以是:
+
+  - **feat** - 这是一个新特性 feature
+  - **doc** - 仅仅改变了文档部分 documentation
+  - **fix** - 修复了一个 bug
+  - **refactor** - 更新了代码，但是并非出于增加新特性 feature 或修复 bug 的目的
+
+- 请在 PR 中附详细的解释说明
+- 使用 `npm run format` 格式化你的代码
+
+<details>
+  <summary>不知道怎么发起一个 PR？ 点开了解怎么发起一个 PR </summary>
+
+1. 点击 Pingvin Share 仓库的 `Fork` 按钮，复制一份你的仓库
+
+2. 通过 `git clone` 将你的仓库克隆到本地
+
+```
+$ git clone https://github.com/[你的用户名]/pingvin-share
+```
+
+3. 进行你的修改 - 提交 commit 你的修改 - 重复直到完成
+
+4. 将你的修改提交到 GitHub
+
+```
+$ git push origin [你的新分支的名字]
+```
+
+5. 提交你的代码以便代码审查
+
+   如果你进入你 fork 的 Github 仓库，你会看到一个 `Compare & pull request` 按钮，点击该按钮
+
+6. 发起一个 PR
+7. 点击 `Create pull request` 来提交你的 PR
+8. 等待代码审查，通过或以某些原因拒绝
+
+</details>
+
+## 配置开发项目
+
+Pingvin Share 包括前端和后端部分
+
+### 后端
+
+后端使用 [Nest.js](https://nestjs.com) 建立，使用 Typescript
+
+#### 搭建
+
+1. 打开 `backend` 文件夹
+2. 使用 `npm install` 安装依赖
+3. 通过 `npx prisma db push` 配置数据库结构
+4. 通过 `npx prisma db seed` 初始化数据库数据
+5. 通过 `npm run dev` 启动后端
+
+### 前端
+
+后端使用 [Next.js](https://nextjs.org) 建立，使用 Typescript
+
+#### 搭建
+
+1. 首先启动后端
+2. 打开 `frontend` 文件夹
+3. 通过 `npm install` 安装依赖
+4. 通过 `npm run dev` 启动前端
+
+开发项目配置完成
+
+### 测试
+
+目前阶段我们只有后端的系统测试，在 `backend` 文件夹运行 `npm run test:system` 来执行系统测试

docs/README.es.md

@@ -0,0 +1,128 @@
+# <div align="center"><img  src="https://user-images.githubusercontent.com/58886915/166198400-c2134044-1198-4647-a8b6-da9c4a204c68.svg" width="40"/> </br>Pingvin Share</div>
+
+---
+
+_Leer esto en otro idioma: [Inglés](/README.md), [Español](/docs/README.es.md), [Chino Simplificado](/docs/README.zh-cn.md)_
+
+---
+
+Pingvin Share es una plataforma de intercambio de archivos autoalojada y una alternativa a WeTransfer.
+
+## ✨ Características
+
+- Compartir archivos utilizando un enlace
+- Tamaño de archivo ilimitado (unicamente restringido por el espacio en disco)
+- Establecer una fecha de caducidad para los recursos compartidos
+- Uso compartido seguro con límites de visitantes y contraseñas
+- Destinatarios de correo electrónico
+- Integración con ClamAV para escaneos de seguridad
+
+## 🐧 Conoce Pingvin Share
+
+- [Demo](https://pingvin-share.dev.eliasschneider.com)
+- [Reseña por DB Tech](https://www.youtube.com/watch?v=rWwNeZCOPJA)
+
+<img src="https://user-images.githubusercontent.com/58886915/225038319-b2ef742c-3a74-4eb6-9689-4207a36842a4.png" width="700"/>
+
+## ⌨️ Instalación
+
+> Nota: Pingvin Share está en sus primeras etapas y puede contener errores.
+
+### Instalación con Docker (recomendada)
+
+1. Descarge el archivo `docker-compose.yml`
+2. Ejecute `docker-compose up -d`
+
+El sitio web ahora está esperando conexiones en `http://localhost:3000`, ¡diviértase usando Pingvin Share 🐧!
+
+### Instalación autónoma
+
+Herramientas requeridas:
+
+- [Node.js](https://nodejs.org/en/download/) >= 16
+- [Git](https://git-scm.com/downloads)
+- [pm2](https://pm2.keymetrics.io/) para ejecutar Pingvin Share en segundo plano
+
+```bash
+git clone https://github.com/stonith404/pingvin-share
+cd pingvin-share
+
+# Consultar la última versión
+git fetch --tags && git checkout $(git describe --tags `git rev-list --tags --max-count=1`)
+
+# Iniciar el backend
+cd backend
+npm install
+npm run build
+pm2 start --name="pingvin-share-backend" npm -- run prod
+
+# Iniciar el frontend
+cd ../frontend
+npm install
+npm run build
+pm2 start --name="pingvin-share-frontend" npm -- run start
+```
+
+El sitio web ahora está esperando conexiones en `http://localhost:3000`, ¡diviértase usando Pingvin Share 🐧!
+
+### Integraciones
+
+#### ClamAV (Unicamente con Docker)
+
+ClamAV se utiliza para escanear los recursos compartidos en busca de archivos maliciosos y eliminarlos si los encuentra.
+
+1. Añade el contenedor ClamAV al stack de Docker Compose (ver `docker-compose.yml`) e inicie el contenedor.
+2. Docker esperará a que ClamAV se inicie antes de iniciar Pingvin Share. Esto puede tardar uno o dos minutos.
+3. Los registros de Pingvin Share ahora deberían decir "ClamAV está activo".
+
+Por favor, ten en cuenta que ClamAV necesita muchos [recursos](https://docs.clamav.net/manual/Installing/Docker.html#memory-ram-requirements).
+
+### Recursos adicionales
+
+- [Instalación en Synology NAS (Inglés)](https://mariushosting.com/how-to-install-pingvin-share-on-your-synology-nas/)
+
+### Actualizar a una nueva versión
+
+Dado que Pingvin Share se encuentra en una fase inicial, consulte las notas de la versión para conocer los cambios de última hora antes de actualizar.
+
+#### Docker
+
+```bash
+docker compose pull
+docker compose up -d
+```
+
+#### Instalación autónoma
+
+1. Deten la aplicación en ejecución
+
+   ```bash
+   pm2 stop pingvin-share-backend pingvin-share-frontend
+   ```
+
+2. Repite los pasos de la [guía de instalación](#instalación-autonoma) excepto el paso de `git clone`.
+
+   ```bash
+   cd pingvin-share
+
+   # Consultar la última versión
+   git fetch --tags && git checkout $(git describe --tags `git rev-list --tags --max-count=1`)
+
+   # Iniciar el backend
+   cd backend
+   npm run build
+   pm2 restart pingvin-share-backend
+
+   # Iniciar frontend
+   cd ../frontend
+   npm run build
+   pm2 restart pingvin-share-frontend
+   ```
+
+### Marca personalizada
+
+Puedes cambiar el nombre y el logotipo de la aplicación visitando la página de configuración de administrador.
+
+## 🖤 Contribuye
+
+¡Eres bienvenido a contribuir a Pingvin Share! Sige la [guía de contribución](/CONTRIBUTING.md) para empezar.

docs/README.zh-cn.md

@@ -0,0 +1,126 @@
+# <div align="center"><img  src="https://user-images.githubusercontent.com/58886915/166198400-c2134044-1198-4647-a8b6-da9c4a204c68.svg" width="40"/> </br>Pingvin Share</div>
+
+---
+
+_选择合适的语言阅读: [西班牙语](/docs/README.es.md), [英语](/README.md), [简体中文](/docs/README.zh-cn.md)_
+
+---
+
+Pingvin Share 是一个可自建的文件分享平台，是 WeTransfer 的一个替代品
+
+## ✨ 特性
+
+- 通过可自定义后缀的链接分享文件
+- 可自定义任意大小的文件上传限制 (受制于托管所在的硬盘大小)
+- 对共享链接设置有效期限
+- 对共享链接设置访问次数和访问密码
+- 通过邮件自动发送共享链接
+- 整合 ClamAV 进行反病毒检查
+
+## 🐧 了解一下 Pingvin Share
+
+- [示例网站](https://pingvin-share.dev.eliasschneider.com)
+- [DB Tech 推荐视频](https://www.youtube.com/watch?v=rWwNeZCOPJA)
+
+<img src="https://user-images.githubusercontent.com/58886915/225038319-b2ef742c-3a74-4eb6-9689-4207a36842a4.png" width="700"/>
+
+## ⌨️ 自建指南
+
+> 注意：Pingvin Share 仍处于开发阶段并且可能存在 bugs
+
+### Docker 部署 (推荐)
+
+1. 下载 `docker-compose.yml`
+2. 运行命令 `docker-compose up -d`
+
+现在网站运行在 `http://localhost:3000`，尝试一下你本地的 Pingvin Share 🐧!
+
+### Stand-alone 部署
+
+必须的依赖:
+
+- [Node.js](https://nodejs.org/en/download/) >= 16
+- [Git](https://git-scm.com/downloads)
+- [pm2](https://pm2.keymetrics.io/) 用于后台运行 Pingvin Share
+
+```bash
+git clone https://github.com/stonith404/pingvin-share
+cd pingvin-share
+
+# 获取最新的版本
+git fetch --tags && git checkout $(git describe --tags `git rev-list --tags --max-count=1`)
+
+# 启动后端 backend
+cd backend
+npm install
+npm run build
+pm2 start --name="pingvin-share-backend" npm -- run prod
+
+# 启动前端 frontend
+cd ../frontend
+npm install
+npm run build
+pm2 start --name="pingvin-share-frontend" npm -- run start
+```
+
+现在网站运行在 `http://localhost:3000`，尝试一下你本地的 Pingvin Share 🐧!
+
+### 整合组件
+
+#### ClamAV (仅限 Docker 部署)
+
+扫描上传文件中是否存在可疑文件，如果存在 ClamAV 会自动移除
+
+1. 在 docker-compose 配置中添加 ClamAV 容器 (见 `docker-compose.yml` 注释部分) 并启动容器
+2. Docker 会在启动 Pingvin Share 前启动 ClamAV，也许会花费 1-2 分钟
+3. Pingvin Share 日志中应该有 "ClamAV is active"
+
+请注意 ClamAV 会消耗很多 [系统资源(特别是内存)](https://docs.clamav.net/manual/Installing/Docker.html#memory-ram-requirements)
+
+### 更多资源
+
+- [群晖 NAS 配置](https://mariushosting.com/how-to-install-pingvin-share-on-your-synology-nas/)
+
+### 升级
+
+因为 Pingvin Share 仍处在开发阶段，在升级前请务必阅读 release notes 避免不可逆的改变
+
+#### Docker 升级
+
+```bash
+docker compose pull
+docker compose up -d
+```
+
+#### Stand-alone 升级
+
+1. 停止正在运行的 app
+   ```bash
+   pm2 stop pingvin-share-backend pingvin-share-frontend
+   ```
+2. 重复 [installation guide](#stand-alone-installation) 中的步骤，除了 `git clone` 这一步
+
+   ```bash
+   cd pingvin-share
+
+   # 获取最新的版本
+   git fetch --tags && git checkout $(git describe --tags `git rev-list --tags --max-count=1`)
+
+   # 启动后端 backend
+   cd backend
+   npm run build
+   pm2 restart pingvin-share-backend
+
+   # 启动前端 frontend
+   cd ../frontend
+   npm run build
+   pm2 restart pingvin-share-frontend
+   ```
+
+### 自定义品牌
+
+你可以在管理员配置页面改变网站的名字和 logo
+
+## 🖤 提交贡献
+
+非常欢迎向 Pingvin Share 提交贡献! 请阅读 [contribution guide](/CONTRIBUTING.md) 来提交你的贡献

frontend/next.config.js

@@ -19,4 +19,7 @@ module.exports = withPWA({
   output: "standalone", env: {
     VERSION: version,
   },
+  serverRuntimeConfig: {
+    apiURL: process.env.API_URL ?? 'http://localhost:8080',
+  },
 });

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pingvin-share-frontend",
-  "version": "0.12.0",
+  "version": "0.15.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pingvin-share-frontend",
-      "version": "0.12.0",
+      "version": "0.15.0",
       "dependencies": {
         "@emotion/react": "^11.10.6",
         "@emotion/server": "^11.10.0",

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pingvin-share-frontend",
-  "version": "0.12.0",
+  "version": "0.15.0",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

frontend/src/components/account/showEnableTotpModal.tsx

@@ -7,7 +7,6 @@ import {
   Stack,
   Text,
   TextInput,
-  Title,
   Tooltip,
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
@@ -27,7 +26,7 @@ const showEnableTotpModal = (
   }
 ) => {
   return modals.openModal({
-    title: <Title order={4}>Enable TOTP</Title>,
+    title: "Enable TOTP",
     children: (
       <CreateEnableTotpModal options={options} refreshUser={refreshUser} />
     ),

frontend/src/components/account/showShareInformationsModal.tsx

@@ -0,0 +1,85 @@
+import { Text, Divider, Progress, Stack, Group, Flex } from "@mantine/core";
+import { ModalsContextProps } from "@mantine/modals/lib/context";
+import { MyShare } from "../../types/share.type";
+import moment from "moment";
+import { byteToHumanSizeString } from "../../utils/fileSize.util";
+import CopyTextField from "../upload/CopyTextField";
+import { FileMetaData } from "../../types/File.type";
+
+const showShareInformationsModal = (
+  modals: ModalsContextProps,
+  share: MyShare,
+  appUrl: string,
+  maxShareSize: number
+) => {
+  const link = `${appUrl}/share/${share.id}`;
+
+  let shareSize: number = 0;
+  for (let file of share.files as FileMetaData[])
+    shareSize += parseInt(file.size);
+
+  const formattedShareSize = byteToHumanSizeString(shareSize);
+  const formattedMaxShareSize = byteToHumanSizeString(maxShareSize);
+  const shareSizeProgress = (shareSize / maxShareSize) * 100;
+
+  const formattedCreatedAt = moment(share.createdAt).format("LLL");
+  const formattedExpiration =
+    moment(share.expiration).unix() === 0
+      ? "Never"
+      : moment(share.expiration).format("LLL");
+
+  return modals.openModal({
+    title: "Share informations",
+
+    children: (
+      <Stack align="stretch" spacing="md">
+        <Text size="sm" color="lightgray">
+          <b>ID:</b> {share.id}
+        </Text>
+
+        <Text size="sm" color="lightgray">
+          <b>Description:</b> {share.description || "No description"}
+        </Text>
+
+        <Text size="sm" color="lightgray">
+          <b>Created at:</b> {formattedCreatedAt}
+        </Text>
+
+        <Text size="sm" color="lightgray">
+          <b>Expires at:</b> {formattedExpiration}
+        </Text>
+
+        <Divider />
+
+        <CopyTextField link={link} />
+
+        <Divider />
+
+        <Text size="sm" color="lightgray">
+          <b>Size:</b> {formattedShareSize} / {formattedMaxShareSize} (
+          {shareSizeProgress.toFixed(1)}%)
+        </Text>
+
+        <Flex align="center" justify="center">
+          {shareSize / maxShareSize < 0.1 && (
+            <Text size="xs" color="lightgray" style={{ marginRight: "4px" }}>
+              {formattedShareSize}
+            </Text>
+          )}
+          <Progress
+            value={shareSizeProgress}
+            label={shareSize / maxShareSize >= 0.1 ? formattedShareSize : ""}
+            style={{ width: shareSize / maxShareSize < 0.1 ? "70%" : "80%" }}
+            size="xl"
+            radius="xl"
+          />
+          <Text size="xs" color="lightgray" style={{ marginLeft: "4px" }}>
+            {formattedMaxShareSize}
+          </Text>
+        </Flex>
+      </Stack>
+    ),
+  });
+};
+
+export default showShareInformationsModal;

frontend/src/components/admin/configuration/AdminConfigInput.tsx

@@ -18,10 +18,13 @@ const AdminConfigInput = ({
 }) => {
   const form = useForm({
     initialValues: {
-      stringValue: configVariable.value,
+      stringValue: configVariable.value ?? configVariable.defaultValue,
-      textValue: configVariable.value,
+      textValue: configVariable.value ?? configVariable.defaultValue,
-      numberValue: parseInt(configVariable.value),
+      numberValue: parseInt(
-      booleanValue: configVariable.value == "true",
+        configVariable.value ?? configVariable.defaultValue
+      ),
+      booleanValue:
+        (configVariable.value ?? configVariable.defaultValue) == "true",
     },
   });
 
@@ -35,29 +38,38 @@ const AdminConfigInput = ({
       {configVariable.type == "string" &&
         (configVariable.obscured ? (
           <PasswordInput
-            style={{ width: "100%" }}
+            style={{
+              width: "100%",
+            }}
             {...form.getInputProps("stringValue")}
             onChange={(e) => onValueChange(configVariable, e.target.value)}
           />
         ) : (
           <TextInput
-            style={{ width: "100%" }}
+            style={{
+              width: "100%",
+            }}
             {...form.getInputProps("stringValue")}
+            placeholder={configVariable.defaultValue}
             onChange={(e) => onValueChange(configVariable, e.target.value)}
           />
         ))}
 
       {configVariable.type == "text" && (
         <Textarea
-          style={{ width: "100%" }}
+          style={{
+            width: "100%",
+          }}
           autosize
           {...form.getInputProps("textValue")}
+          placeholder={configVariable.defaultValue}
           onChange={(e) => onValueChange(configVariable, e.target.value)}
         />
       )}
       {configVariable.type == "number" && (
         <NumberInput
           {...form.getInputProps("numberValue")}
+          placeholder={configVariable.defaultValue}
           onChange={(number) => onValueChange(configVariable, number)}
         />
       )}

frontend/src/components/admin/users/showCreateUserModal.tsx

@@ -5,7 +5,6 @@ import {
   Stack,
   Switch,
   TextInput,
-  Title,
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
@@ -19,7 +18,7 @@ const showCreateUserModal = (
   getUsers: () => void
 ) => {
   return modals.openModal({
-    title: <Title order={5}>Create user</Title>,
+    title: "Create user",
     children: (
       <Body modals={modals} smtpEnabled={smtpEnabled} getUsers={getUsers} />
     ),
@@ -79,13 +78,12 @@ const Body = ({
               })}
             />
           )}
-          {form.values.setPasswordManually ||
+          {(form.values.setPasswordManually || !smtpEnabled) && (
-            (!smtpEnabled && (
+            <PasswordInput
-              <PasswordInput
+              label="Password"
-                label="Password"
+              {...form.getInputProps("password")}
-                {...form.getInputProps("password")}
+            />
-              />
+          )}
-            ))}
           <Switch
             styles={{
               body: {

frontend/src/components/admin/users/showUpdateUserModal.tsx

@@ -6,7 +6,6 @@ import {
   Stack,
   Switch,
   TextInput,
-  Title,
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
@@ -21,7 +20,7 @@ const showUpdateUserModal = (
   getUsers: () => void
 ) => {
   return modals.openModal({
-    title: <Title order={5}>Update {user.username}</Title>,
+    title: `Update ${user.username}`,
     children: <Body user={user} modals={modals} getUsers={getUsers} />,
   });
 };

frontend/src/components/core/SortIcon.tsx

@@ -0,0 +1,41 @@
+import { ActionIcon } from "@mantine/core";
+import { Dispatch, SetStateAction } from "react";
+import { TbChevronDown, TbChevronUp, TbSelector } from "react-icons/tb";
+
+export type TableSort = {
+  property?: string;
+  direction: "asc" | "desc";
+};
+
+const TableSortIcon = ({
+  sort,
+  setSort,
+  property,
+}: {
+  sort: TableSort;
+  setSort: Dispatch<SetStateAction<TableSort>>;
+  property: string;
+}) => {
+  if (sort.property === property) {
+    return (
+      <ActionIcon
+        onClick={() =>
+          setSort({
+            property,
+            direction: sort.direction === "asc" ? "desc" : "asc",
+          })
+        }
+      >
+        {sort.direction === "asc" ? <TbChevronDown /> : <TbChevronUp />}
+      </ActionIcon>
+    );
+  } else {
+    return (
+      <ActionIcon onClick={() => setSort({ property, direction: "asc" })}>
+        <TbSelector />
+      </ActionIcon>
+    );
+  }
+};
+
+export default TableSortIcon;

frontend/src/components/share/FileList.tsx

@@ -1,5 +1,6 @@
 import {
   ActionIcon,
+  Box,
   Group,
   Skeleton,
   Stack,
@@ -8,9 +9,7 @@ import {
 } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useModals } from "@mantine/modals";
-import mime from "mime-types";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
-
-import Link from "next/link";
 import { TbDownload, TbEye, TbLink } from "react-icons/tb";
 import useConfig from "../../hooks/config.hook";
 import shareService from "../../services/share.service";
@@ -18,13 +17,17 @@ import { FileMetaData } from "../../types/File.type";
 import { Share } from "../../types/share.type";
 import { byteToHumanSizeString } from "../../utils/fileSize.util";
 import toast from "../../utils/toast.util";
+import TableSortIcon, { TableSort } from "../core/SortIcon";
+import showFilePreviewModal from "./modals/showFilePreviewModal";
 
 const FileList = ({
   files,
+  setShare,
   share,
   isLoading,
 }: {
   files?: FileMetaData[];
+  setShare: Dispatch<SetStateAction<Share | undefined>>;
   share: Share;
   isLoading: boolean;
 }) => {
@@ -32,6 +35,32 @@ const FileList = ({
   const config = useConfig();
   const modals = useModals();
 
+  const [sort, setSort] = useState<TableSort>({
+    property: undefined,
+    direction: "desc",
+  });
+
+  const sortFiles = () => {
+    if (files && sort.property) {
+      const sortedFiles = files.sort((a: any, b: any) => {
+        if (sort.direction === "asc") {
+          return b[sort.property!].localeCompare(a[sort.property!], undefined, {
+            numeric: true,
+          });
+        } else {
+          return a[sort.property!].localeCompare(b[sort.property!], undefined, {
+            numeric: true,
+          });
+        }
+      });
+
+      setShare({
+        ...share,
+        files: sortedFiles,
+      });
+    }
+  };
+
   const copyFileLink = (file: FileMetaData) => {
     const link = `${config.get("general.appUrl")}/api/shares/${
       share.id
@@ -52,55 +81,70 @@ const FileList = ({
     }
   };
 
+  useEffect(sortFiles, [sort]);
+
   return (
-    <Table>
+    <Box sx={{ display: "block", overflowX: "auto" }}>
-      <thead>
+      <Table>
-        <tr>
+        <thead>
-          <th>Name</th>
+          <tr>
-          <th>Size</th>
+            <th>
-          <th></th>
+              <Group spacing="xs">
-        </tr>
+                Name
-      </thead>
+                <TableSortIcon sort={sort} setSort={setSort} property="name" />
-      <tbody>
+              </Group>
-        {isLoading
+            </th>
-          ? skeletonRows
+            <th>
-          : files!.map((file) => (
+              <Group spacing="xs">
-              <tr key={file.name}>
+                Size
-                <td>{file.name}</td>
+                <TableSortIcon sort={sort} setSort={setSort} property="size" />
-                <td>{byteToHumanSizeString(parseInt(file.size))}</td>
+              </Group>
-                <td>
+            </th>
-                  <Group position="right">
+            <th></th>
-                    {shareService.doesFileSupportPreview(file.name) && (
+          </tr>
+        </thead>
+        <tbody>
+          {isLoading
+            ? skeletonRows
+            : files!.map((file) => (
+                <tr key={file.name}>
+                  <td>{file.name}</td>
+                  <td>{byteToHumanSizeString(parseInt(file.size))}</td>
+                  <td>
+                    <Group position="right">
+                      {shareService.doesFileSupportPreview(file.name) && (
+                        <ActionIcon
+                          onClick={() =>
+                            showFilePreviewModal(share.id, file, modals)
+                          }
+                          size={25}
+                        >
+                          <TbEye />
+                        </ActionIcon>
+                      )}
+                      {!share.hasPassword && (
+                        <ActionIcon
+                          size={25}
+                          onClick={() => copyFileLink(file)}
+                        >
+                          <TbLink />
+                        </ActionIcon>
+                      )}
                       <ActionIcon
-                        component={Link}
-                        href={`/share/${share.id}/preview/${
-                          file.id
-                        }?type=${mime.contentType(file.name)}`}
-                        target="_blank"
                         size={25}
+                        onClick={async () => {
+                          await shareService.downloadFile(share.id, file.id);
+                        }}
                       >
-                        <TbEye />
+                        <TbDownload />
                       </ActionIcon>
-                    )}
+                    </Group>
-                    {!share.hasPassword && (
+                  </td>
-                      <ActionIcon size={25} onClick={() => copyFileLink(file)}>
+                </tr>
-                        <TbLink />
+              ))}
-                      </ActionIcon>
+        </tbody>
-                    )}
+      </Table>
-                    <ActionIcon
+    </Box>
-                      size={25}
-                      onClick={async () => {
-                        await shareService.downloadFile(share.id, file.id);
-                      }}
-                    >
-                      <TbDownload />
-                    </ActionIcon>
-                  </Group>
-                </td>
-              </tr>
-            ))}
-      </tbody>
-    </Table>
   );
 };
 

frontend/src/components/share/FilePreview.tsx

@@ -0,0 +1,157 @@
+import { Button, Center, Stack, Text, Title } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import Link from "next/link";
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import api from "../../services/api.service";
+
+const FilePreviewContext = React.createContext<{
+  shareId: string;
+  fileId: string;
+  mimeType: string;
+  setIsNotSupported: Dispatch<SetStateAction<boolean>>;
+}>({
+  shareId: "",
+  fileId: "",
+  mimeType: "",
+  setIsNotSupported: () => {},
+});
+
+const FilePreview = ({
+  shareId,
+  fileId,
+  mimeType,
+}: {
+  shareId: string;
+  fileId: string;
+  mimeType: string;
+}) => {
+  const [isNotSupported, setIsNotSupported] = useState(false);
+  if (isNotSupported) return <UnSupportedFile />;
+
+  return (
+    <Stack>
+      <FilePreviewContext.Provider
+        value={{ shareId, fileId, mimeType, setIsNotSupported }}
+      >
+        <FileDecider />
+      </FilePreviewContext.Provider>
+      <Button
+        variant="subtle"
+        component={Link}
+        onClick={() => modals.closeAll()}
+        target="_blank"
+        href={`/api/shares/${shareId}/files/${fileId}?download=false`}
+      >
+        View original file
+      </Button>
+    </Stack>
+  );
+};
+
+const FileDecider = () => {
+  const { mimeType, setIsNotSupported } = React.useContext(FilePreviewContext);
+
+  if (mimeType == "application/pdf") {
+    return <PdfPreview />;
+  } else if (mimeType.startsWith("video/")) {
+    return <VideoPreview />;
+  } else if (mimeType.startsWith("image/")) {
+    return <ImagePreview />;
+  } else if (mimeType.startsWith("audio/")) {
+    return <AudioPreview />;
+  } else if (mimeType.startsWith("text/")) {
+    return <TextPreview />;
+  } else {
+    setIsNotSupported(true);
+    return null;
+  }
+};
+
+const AudioPreview = () => {
+  const { shareId, fileId, setIsNotSupported } =
+    React.useContext(FilePreviewContext);
+  return (
+    <Center style={{ minHeight: 200 }}>
+      <Stack align="center" spacing={10} style={{ width: "100%" }}>
+        <audio controls style={{ width: "100%" }}>
+          <source
+            src={`/api/shares/${shareId}/files/${fileId}?download=false`}
+            onError={() => setIsNotSupported(true)}
+          />
+        </audio>
+      </Stack>
+    </Center>
+  );
+};
+
+const VideoPreview = () => {
+  const { shareId, fileId, setIsNotSupported } =
+    React.useContext(FilePreviewContext);
+  return (
+    <video width="100%" controls>
+      <source
+        src={`/api/shares/${shareId}/files/${fileId}?download=false`}
+        onError={() => setIsNotSupported(true)}
+      />
+    </video>
+  );
+};
+
+const ImagePreview = () => {
+  const { shareId, fileId, setIsNotSupported } =
+    React.useContext(FilePreviewContext);
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={`/api/shares/${shareId}/files/${fileId}?download=false`}
+      alt={`${fileId}_preview`}
+      width="100%"
+      onError={() => setIsNotSupported(true)}
+    />
+  );
+};
+
+const TextPreview = () => {
+  const { shareId, fileId } = React.useContext(FilePreviewContext);
+  const [text, setText] = useState<string | null>(null);
+
+  useEffect(() => {
+    api
+      .get(`/shares/${shareId}/files/${fileId}?download=false`)
+      .then((res) => setText(res.data));
+  }, [shareId, fileId]);
+
+  return (
+    <Center style={{ minHeight: 200 }}>
+      <Stack align="center" spacing={10} style={{ width: "100%" }}>
+        <Text sx={{ whiteSpace: "pre-wrap" }} size="sm">
+          {text}
+        </Text>
+      </Stack>
+    </Center>
+  );
+};
+
+const PdfPreview = () => {
+  const { shareId, fileId } = React.useContext(FilePreviewContext);
+  if (typeof window !== "undefined") {
+    window.location.href = `/api/shares/${shareId}/files/${fileId}?download=false`;
+  }
+  return null;
+};
+
+const UnSupportedFile = () => {
+  return (
+    <Center style={{ minHeight: 200 }}>
+      <Stack align="center" spacing={10}>
+        <Title order={3}>Preview not supported</Title>
+        <Text>
+          A preview for thise file type is unsupported. Please download the file
+          to view it.
+        </Text>
+      </Stack>
+    </Center>
+  );
+};
+
+export default FilePreview;

frontend/src/components/share/modals/showCompletedReverseShareModal.tsx

@@ -1,9 +1,7 @@
-import { ActionIcon, Button, Stack, TextInput, Title } from "@mantine/core";
+import { Button, Stack } from "@mantine/core";
-import { useClipboard } from "@mantine/hooks";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
-import { TbCopy } from "react-icons/tb";
+import CopyTextField from "../../upload/CopyTextField";
-import toast from "../../../utils/toast.util";
 
 const showCompletedReverseShareModal = (
   modals: ModalsContextProps,
@@ -14,11 +12,7 @@ const showCompletedReverseShareModal = (
     closeOnClickOutside: false,
     withCloseButton: false,
     closeOnEscape: false,
-    title: (
+    title: "Reverse share link",
-      <Stack align="stretch" spacing={0}>
-        <Title order={4}>Reverse share link</Title>
-      </Stack>
-    ),
     children: <Body link={link} getReverseShares={getReverseShares} />,
   });
 };
@@ -30,28 +24,11 @@ const Body = ({
   link: string;
   getReverseShares: () => void;
 }) => {
-  const clipboard = useClipboard({ timeout: 500 });
   const modals = useModals();
 
   return (
     <Stack align="stretch">
-      <TextInput
+      <CopyTextField link={link} />
-        readOnly
-        variant="filled"
-        value={link}
-        rightSection={
-          window.isSecureContext && (
-            <ActionIcon
-              onClick={() => {
-                clipboard.copy(link);
-                toast.success("Your link was copied to the keyboard.");
-              }}
-            >
-              <TbCopy />
-            </ActionIcon>
-          )
-        }
-      />
 
       <Button
         onClick={() => {

frontend/src/components/share/modals/showCreateReverseShareModal.tsx

@@ -8,7 +8,6 @@ import {
   Stack,
   Switch,
   Text,
-  Title,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useModals } from "@mantine/modals";
@@ -25,7 +24,7 @@ const showCreateReverseShareModal = (
   getReverseShares: () => void
 ) => {
   return modals.openModal({
-    title: <Title order={4}>Create reverse share</Title>,
+    title: "Create reverse share",
     children: (
       <Body
         showSendEmailNotificationOption={showSendEmailNotificationOption}

frontend/src/components/share/modals/showFilePreviewModal.tsx

@@ -0,0 +1,21 @@
+import { ModalsContextProps } from "@mantine/modals/lib/context";
+import mime from "mime-types";
+import { FileMetaData } from "../../../types/File.type";
+import FilePreview from "../FilePreview";
+
+const showFilePreviewModal = (
+  shareId: string,
+  file: FileMetaData,
+  modals: ModalsContextProps
+) => {
+  const mimeType = (mime.contentType(file.name) || "").split(";")[0];
+  return modals.openModal({
+    size: "xl",
+    title: file.name,
+    children: (
+      <FilePreview shareId={shareId} fileId={file.id} mimeType={mimeType} />
+    ),
+  });
+};
+
+export default showFilePreviewModal;

frontend/src/components/share/showEnterPasswordModal.tsx

@@ -1,57 +1,52 @@
-import { Button, PasswordInput, Stack, Text, Title } from "@mantine/core";
+import { Button, PasswordInput, Stack, Text } from "@mantine/core";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import { useState } from "react";
 
 const showEnterPasswordModal = (
   modals: ModalsContextProps,
-  submitCallback: any
+  submitCallback: (password: string) => Promise<void>
 ) => {
   return modals.openModal({
     closeOnClickOutside: false,
     withCloseButton: false,
     closeOnEscape: false,
-    title: (
+    title: "Password required",
-      <>
-        <Title order={4}>Password required</Title>
-        <Text size="sm">
-          This access this share please enter the password for the share.
-        </Text>
-      </>
-    ),
     children: <Body submitCallback={submitCallback} />,
   });
 };
 
-const Body = ({ submitCallback }: { submitCallback: any }) => {
+const Body = ({
+  submitCallback,
+}: {
+  submitCallback: (password: string) => Promise<void>;
+}) => {
   const [password, setPassword] = useState("");
   const [passwordWrong, setPasswordWrong] = useState(false);
   return (
-    <>
+    <Stack align="stretch">
-      <Stack align="stretch">
+      <Text size="sm">
-        <PasswordInput
+        This access this share please enter the password for the share.
-          variant="filled"
+      </Text>
-          placeholder="Password"
+
-          error={passwordWrong && "Wrong password"}
+      <form
-          onFocus={() => setPasswordWrong(false)}
+        onSubmit={(e) => {
-          onChange={(e) => setPassword(e.target.value)}
+          e.preventDefault();
-          value={password}
+          submitCallback(password);
-        />
+        }}
-        <Button
+      >
-          onClick={() =>
+        <Stack>
-            submitCallback(password)
+          <PasswordInput
-              .then((res: any) => res)
+            variant="filled"
-              .catch((e: any) => {
+            placeholder="Password"
-                const error = e.response.data.message;
+            error={passwordWrong && "Wrong password"}
-                if (error == "Wrong password") {
+            onFocus={() => setPasswordWrong(false)}
-                  setPasswordWrong(true);
+            onChange={(e) => setPassword(e.target.value)}
-                }
+            value={password}
-              })
+          />
-          }
+          <Button type="submit">Submit</Button>
-        >
+        </Stack>
-          Submit
+      </form>
-        </Button>
+    </Stack>
-      </Stack>
-    </>
   );
 };
 

frontend/src/components/share/showErrorModal.tsx

@@ -1,4 +1,4 @@
-import { Button, Stack, Text, Title } from "@mantine/core";
+import { Button, Stack, Text } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import { useRouter } from "next/router";
@@ -12,7 +12,7 @@ const showErrorModal = (
     closeOnClickOutside: false,
     withCloseButton: false,
     closeOnEscape: false,
-    title: <Title order={4}>{title}</Title>,
+    title: title,
 
     children: <Body text={text} />,
   });

frontend/src/components/upload/CopyTextField.tsx

@@ -0,0 +1,48 @@
+import { useRef, useState } from "react";
+import toast from "../../utils/toast.util";
+import { ActionIcon, TextInput } from "@mantine/core";
+import { TbCheck, TbCopy } from "react-icons/tb";
+import { useClipboard } from "@mantine/hooks";
+
+function CopyTextField(props: { link: string }) {
+  const clipboard = useClipboard({ timeout: 500 });
+  const [checkState, setCheckState] = useState(false);
+  const [textClicked, setTextClicked] = useState(false);
+  const timerRef = useRef<number | ReturnType<typeof setTimeout> | undefined>(
+    undefined
+  );
+
+  const copyLink = () => {
+    clipboard.copy(props.link);
+    toast.success("Your link was copied to the keyboard.");
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      setCheckState(false);
+    }, 1500);
+    setCheckState(true);
+  };
+
+  return (
+    <TextInput
+      readOnly
+      label="Link"
+      variant="filled"
+      value={props.link}
+      onClick={() => {
+        if (!textClicked) {
+          copyLink();
+          setTextClicked(true);
+        }
+      }}
+      rightSection={
+        window.isSecureContext && (
+          <ActionIcon onClick={copyLink}>
+            {checkState ? <TbCheck /> : <TbCopy />}
+          </ActionIcon>
+        )
+      }
+    />
+  );
+}
+
+export default CopyTextField;

frontend/src/components/upload/modals/showCompletedUploadModal.tsx

@@ -1,19 +1,10 @@
-import {
+import { Button, Stack, Text } from "@mantine/core";
-  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 { useRouter } from "next/router";
-import { TbCopy } from "react-icons/tb";
 import { Share } from "../../../types/share.type";
-import toast from "../../../utils/toast.util";
+import CopyTextField from "../CopyTextField";
 
 const showCompletedUploadModal = (
   modals: ModalsContextProps,
@@ -24,40 +15,20 @@ const showCompletedUploadModal = (
     closeOnClickOutside: false,
     withCloseButton: false,
     closeOnEscape: false,
-    title: (
+    title: "Share ready",
-      <Stack align="stretch" spacing={0}>
-        <Title order={4}>Share ready</Title>
-      </Stack>
-    ),
     children: <Body share={share} appUrl={appUrl} />,
   });
 };
 
 const Body = ({ share, appUrl }: { share: Share; appUrl: string }) => {
-  const clipboard = useClipboard({ timeout: 500 });
   const modals = useModals();
   const router = useRouter();
 
   const link = `${appUrl}/share/${share.id}`;
+
   return (
     <Stack align="stretch">
-      <TextInput
+      <CopyTextField link={link} />
-        readOnly
-        variant="filled"
-        value={link}
-        rightSection={
-          window.isSecureContext && (
-            <ActionIcon
-              onClick={() => {
-                clipboard.copy(link);
-                toast.success("Your link was copied to the keyboard.");
-              }}
-            >
-              <TbCopy />
-            </ActionIcon>
-          )
-        }
-      />
       <Text
         size="xs"
         sx={(theme) => ({

frontend/src/components/upload/modals/showCreateUploadModal.tsx

@@ -37,7 +37,7 @@ const showCreateUploadModal = (
   uploadCallback: (createShare: CreateShare) => void
 ) => {
   return modals.openModal({
-    title: <Title order={4}>Share</Title>,
+    title: "Share",
     children: (
       <CreateUploadModalBody
         options={options}

frontend/src/middleware.ts

@@ -22,7 +22,7 @@ export async function middleware(request: NextRequest) {
 
   // Get config from backend
   const config = await (
-    await fetch("http://localhost:8080/api/configs")
+    await fetch(`${request.nextUrl.origin}/api/configs`)
   ).json();
 
   const getConfig = (key: string) => {

frontend/src/pages/_app.tsx

@@ -11,6 +11,7 @@ import axios from "axios";
 import { getCookie, setCookie } from "cookies-next";
 import { GetServerSidePropsContext } from "next";
 import type { AppProps } from "next/app";
+import getConfig from "next/config";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import Header from "../components/header/Header";
@@ -117,6 +118,8 @@ function App({ Component, pageProps }: AppProps) {
 // Fetch user and config variables on server side when the first request is made
 // These will get passed as a page prop to the App component and stored in the contexts
 App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
+  const { apiURL } = getConfig().serverRuntimeConfig;
+
   let pageProps: {
     user?: CurrentUser;
     configVariables?: Config[];
@@ -130,15 +133,13 @@ App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
   if (ctx.req) {
     const cookieHeader = ctx.req.headers.cookie;
 
-    pageProps.user = await axios(`http://localhost:8080/api/users/me`, {
+    pageProps.user = await axios(`${apiURL}/api/users/me`, {
       headers: { cookie: cookieHeader },
     })
       .then((res) => res.data)
       .catch(() => null);
 
-    pageProps.configVariables = (
+    pageProps.configVariables = (await axios(`${apiURL}/api/configs`)).data;
-      await axios(`http://localhost:8080/api/configs`)
-    ).data;
 
     pageProps.route = ctx.req.url;
   }

frontend/src/pages/account/reverseShares.tsx

@@ -1,6 +1,7 @@
 import {
   Accordion,
   ActionIcon,
+  Anchor,
   Box,
   Button,
   Center,
@@ -34,6 +35,8 @@ const MyShares = () => {
 
   const [reverseShares, setReverseShares] = useState<MyReverseShare[]>();
 
+  const appUrl = config.get("general.appUrl");
+
   const getReverseShares = () => {
     shareService
       .getMyReverseShares()
@@ -119,9 +122,11 @@ const MyShares = () => {
                           <Accordion.Panel>
                             {reverseShare.shares.map((share) => (
                               <Group key={share.id} mb={4}>
-                                <Text maw={120} truncate>
+                                <Anchor href={`${appUrl}/share/${share.id}`}>
-                                  {share.id}
+                                  <Text maw={120} truncate>
-                                </Text>
+                                    {share.id}
+                                  </Text>
+                                </Anchor>
                                 <ActionIcon
                                   color="victoria"
                                   variant="light"
@@ -129,9 +134,7 @@ const MyShares = () => {
                                   onClick={() => {
                                     if (window.isSecureContext) {
                                       clipboard.copy(
-                                        `${config.get(
+                                        `${appUrl}/share/${share.id}`
-                                          "general.appUrl"
-                                        )}/share/${share.id}`
                                       );
                                       toast.success(
                                         "The share link was copied to the keyboard."

frontend/src/pages/account/shares.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   Center,
   Group,
+  MediaQuery,
   Space,
   Stack,
   Table,
@@ -15,7 +16,7 @@ import { useModals } from "@mantine/modals";
 import moment from "moment";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import { TbLink, TbTrash } from "react-icons/tb";
+import { TbLink, TbTrash, TbInfoCircle } from "react-icons/tb";
 import showShareLinkModal from "../../components/account/showShareLinkModal";
 import CenterLoader from "../../components/core/CenterLoader";
 import Meta from "../../components/Meta";
@@ -23,6 +24,7 @@ import useConfig from "../../hooks/config.hook";
 import shareService from "../../services/share.service";
 import { MyShare } from "../../types/share.type";
 import toast from "../../utils/toast.util";
+import showShareInformationsModal from "../../components/account/showShareInformationsModal";
 
 const MyShares = () => {
   const modals = useModals();
@@ -60,6 +62,10 @@ const MyShares = () => {
             <thead>
               <tr>
                 <th>Name</th>
+                <MediaQuery smallerThan="md" styles={{ display: "none" }}>
+                  <th>Description</th>
+                </MediaQuery>
+
                 <th>Visitors</th>
                 <th>Expires at</th>
                 <th></th>
@@ -69,6 +75,18 @@ const MyShares = () => {
               {shares.map((share) => (
                 <tr key={share.id}>
                   <td>{share.id}</td>
+                  <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
+                    <td
+                      style={{
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        maxWidth: "300px",
+                      }}
+                    >
+                      {share.description || ""}
+                    </td>
+                  </MediaQuery>
                   <td>{share.views}</td>
                   <td>
                     {moment(share.expiration).unix() === 0
@@ -77,6 +95,21 @@ const MyShares = () => {
                   </td>
                   <td>
                     <Group position="right">
+                      <ActionIcon
+                        color="blue"
+                        variant="light"
+                        size={25}
+                        onClick={() => {
+                          showShareInformationsModal(
+                            modals,
+                            share,
+                            config.get("general.appUrl"),
+                            parseInt(config.get("share.maxSize"))
+                          );
+                        }}
+                      >
+                        <TbInfoCircle />
+                      </ActionIcon>
                       <ActionIcon
                         color="victoria"
                         variant="light"

frontend/src/pages/admin/config/[category].tsx

@@ -67,7 +67,7 @@ export default function AppShellDemo() {
           toast.success("Configurations updated successfully");
         })
         .catch(toast.axiosError);
-      config.refresh();
+      void config.refresh();
     }
   };
 
@@ -75,8 +75,12 @@ export default function AppShellDemo() {
     const index = updatedConfigVariables.findIndex(
       (item) => item.key === configVariable.key
     );
+
     if (index > -1) {
-      updatedConfigVariables[index] = configVariable;
+      updatedConfigVariables[index] = {
+        ...updatedConfigVariables[index],
+        ...configVariable,
+      };
     } else {
       setUpdatedConfigVariables([...updatedConfigVariables, configVariable]);
     }
@@ -132,9 +136,24 @@ export default function AppShellDemo() {
                       <Title order={6}>
                         {configVariableToFriendlyName(configVariable.name)}
                       </Title>
-                      <Text color="dimmed" size="sm" mb="xs">
+                      {configVariable.description.split("\n").length == 1 ? (
-                        {configVariable.description}
+                        <Text color="dimmed" size="sm" mb="xs">
-                      </Text>
+                          {configVariable.description}
+                        </Text>
+                      ) : (
+                        configVariable.description.split("\n").map((line) => (
+                          <Text
+                            key={line}
+                            color="dimmed"
+                            size="sm"
+                            style={{
+                              marginBottom: line === "" ? "1rem" : "0",
+                            }}
+                          >
+                            {line}
+                          </Text>
+                        ))
+                      )}
                     </Stack>
                     <Stack></Stack>
                     <Box style={{ width: isMobile ? "100%" : "50%" }}>

frontend/src/pages/api/[...all].tsx

@@ -1,5 +1,6 @@
 import { NextApiRequest, NextApiResponse } from "next";
 import httpProxyMiddleware from "next-http-proxy-middleware";
+import getConfig from "next/config";
 
 export const config = {
   api: {
@@ -8,11 +9,13 @@ export const config = {
   },
 };
 
+const { apiURL } = getConfig().serverRuntimeConfig;
+
 export default (req: NextApiRequest, res: NextApiResponse) => {
   return httpProxyMiddleware(req, res, {
     headers: {
       "X-Forwarded-For": req.socket?.remoteAddress ?? "",
     },
-    target: "http://localhost:8080",
+    target: apiURL,
   });
 };

frontend/src/pages/api/health.tsx

@@ -0,0 +1,14 @@
+import axios from "axios";
+import { NextApiRequest, NextApiResponse } from "next";
+import getConfig from "next/config";
+
+const { apiURL } = getConfig().serverRuntimeConfig;
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  const apiStatus = await axios
+    .get(`${apiURL}/api/configs`)
+    .then(() => "OK")
+    .catch(() => "ERROR");
+
+  res.status(apiStatus == "OK" ? 200 : 500).send(apiStatus);
+};

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

@@ -9,6 +9,7 @@ import showEnterPasswordModal from "../../../components/share/showEnterPasswordM
 import showErrorModal from "../../../components/share/showErrorModal";
 import shareService from "../../../services/share.service";
 import { Share as ShareType } from "../../../types/share.type";
+import toast from "../../../utils/toast.util";
 
 export function getServerSideProps(context: GetServerSidePropsContext) {
   return {
@@ -28,12 +29,15 @@ const Share = ({ shareId }: { shareId: string }) => {
         getFiles();
       })
       .catch((e) => {
-        if (e.response.data.error == "share_max_views_exceeded") {
+        const { error } = e.response.data;
+        if (error == "share_max_views_exceeded") {
           showErrorModal(
             modals,
             "Visitor limit exceeded",
             "The visitor limit from this share has been exceeded."
           );
+        } else {
+          toast.axiosError(e);
         }
       });
   };
@@ -85,7 +89,12 @@ const Share = ({ shareId }: { shareId: string }) => {
         {share?.files.length > 1 && <DownloadAllButton shareId={shareId} />}
       </Group>
 
-      <FileList files={share?.files} share={share!} isLoading={!share} />
+      <FileList
+        files={share?.files}
+        setShare={setShare}
+        share={share!}
+        isLoading={!share}
+      />
     </>
   );
 };

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

@@ -1,94 +0,0 @@
-import { Center, Stack, Text, Title } from "@mantine/core";
-import { GetServerSidePropsContext } from "next";
-import { useState } from "react";
-
-export function getServerSideProps(context: GetServerSidePropsContext) {
-  const { shareId, fileId } = context.params!;
-
-  const mimeType = context.query.type as string;
-
-  return {
-    props: { shareId, fileId, mimeType },
-  };
-}
-
-const UnSupportedFile = () => {
-  return (
-    <Center style={{ height: "70vh" }}>
-      <Stack align="center" spacing={10}>
-        <Title order={3}>Preview not supported</Title>
-        <Text>
-          A preview for thise file type is unsupported. Please download the file
-          to view it.
-        </Text>
-      </Stack>
-    </Center>
-  );
-};
-
-const FilePreview = ({
-  shareId,
-  fileId,
-  mimeType,
-}: {
-  shareId: string;
-  fileId: string;
-  mimeType: string;
-}) => {
-  const [isNotSupported, setIsNotSupported] = useState(false);
-
-  if (isNotSupported) return <UnSupportedFile />;
-
-  if (mimeType == "application/pdf") {
-    if (typeof window !== "undefined") {
-      window.location.href = `/api/shares/${shareId}/files/${fileId}?download=false`;
-    }
-    return null;
-  } else if (mimeType.startsWith("video/")) {
-    return (
-      <video
-        width="100%"
-        controls
-        onError={() => {
-          setIsNotSupported(true);
-        }}
-      >
-        <source src={`/api/shares/${shareId}/files/${fileId}?download=false`} />
-      </video>
-    );
-  } else if (mimeType.startsWith("image/")) {
-    return (
-      // eslint-disable-next-line @next/next/no-img-element
-      <img
-        onError={() => {
-          setIsNotSupported(true);
-        }}
-        src={`/api/shares/${shareId}/files/${fileId}?download=false`}
-        alt={`${fileId}_preview`}
-        width="100%"
-      />
-    );
-  } else if (mimeType.startsWith("audio/")) {
-    return (
-      <Center style={{ height: "70vh" }}>
-        <Stack align="center" spacing={10} style={{ width: "100%" }}>
-          <audio
-            controls
-            style={{ width: "100%" }}
-            onError={() => {
-              setIsNotSupported(true);
-            }}
-          >
-            <source
-              src={`/api/shares/${shareId}/files/${fileId}?download=false`}
-            />
-          </audio>
-        </Stack>
-      </Center>
-    );
-  } else {
-    return <UnSupportedFile />;
-  }
-};
-
-export default FilePreview;

frontend/src/pages/upload/index.tsx

@@ -59,7 +59,10 @@ const Upload = ({
 
         setFileProgress(1);
 
-        const chunks = Math.ceil(file.size / chunkSize);
+        let chunks = Math.ceil(file.size / chunkSize);
+
+        // If the file is 0 bytes, we still need to upload 1 chunk
+        if (chunks == 0) chunks++;
 
         for (let chunkIndex = 0; chunkIndex < chunks; chunkIndex++) {
           const from = chunkIndex * chunkSize;
@@ -78,7 +81,7 @@ const Upload = ({
                       name: file.name,
                     },
                     chunkIndex,
-                    Math.ceil(file.size / chunkSize)
+                    chunks
                   )
                   .then((response) => {
                     fileId = response.id;

frontend/src/services/config.service.ts

@@ -23,10 +23,12 @@ const get = (key: string, configVariables: Config[]): any => {
 
   if (!configVariable) throw new Error(`Config variable ${key} not found`);
 
-  if (configVariable.type == "number") return parseInt(configVariable.value);
+  const value = configVariable.value ?? configVariable.defaultValue;
-  if (configVariable.type == "boolean") return configVariable.value == "true";
+
+  if (configVariable.type == "number") return parseInt(value);
+  if (configVariable.type == "boolean") return value == "true";
   if (configVariable.type == "string" || configVariable.type == "text")
-    return configVariable.value;
+    return value;
 };
 
 const finishSetup = async (): Promise<AdminConfig[]> => {

frontend/src/services/share.service.ts

@@ -12,16 +12,7 @@ import {
 import api from "./api.service";
 
 const create = async (share: CreateShare) => {
-  const { id, expiration, recipients, security, description } = share;
+  return (await api.post("shares", share)).data;
-  return (
-    await api.post("shares", {
-      id,
-      expiration,
-      recipients,
-      security,
-      description,
-    })
-  ).data;
 };
 
 const completeShare = async (id: string) => {
@@ -53,7 +44,7 @@ const isShareIdAvailable = async (id: string): Promise<boolean> => {
 };
 
 const doesFileSupportPreview = (fileName: string) => {
-  const mimeType = mime.contentType(fileName);
+  const mimeType = (mime.contentType(fileName) || "").split(";")[0];
 
   if (!mimeType) return false;
 
@@ -61,6 +52,7 @@ const doesFileSupportPreview = (fileName: string) => {
     mimeType.startsWith("video/"),
     mimeType.startsWith("image/"),
     mimeType.startsWith("audio/"),
+    mimeType.startsWith("text/"),
     mimeType == "application/pdf",
   ];
 

frontend/src/styles/mantine.style.ts

@@ -16,4 +16,14 @@ export default <MantineThemeOverride>{
     ],
   },
   primaryColor: "victoria",
+  components: {
+    Modal: {
+      styles: (theme) => ({
+        title: {
+          fontSize: theme.fontSizes.lg,
+          fontWeight: 700,
+        },
+      }),
+    },
+  },
 };

frontend/src/types/config.type.ts

@@ -1,5 +1,6 @@
 type Config = {
   key: string;
+  defaultValue: string;
   value: string;
   type: string;
 };

frontend/src/types/share.type.ts

@@ -24,7 +24,7 @@ export type ShareMetaData = {
 
 export type MyShare = Share & {
   views: number;
-  cratedAt: Date;
+  createdAt: Date;
 };
 
 export type MyReverseShare = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pingvin-share",
-  "version": "0.12.0",
+  "version": "0.15.0",
   "scripts": {
     "format": "cd frontend && npm run format && cd ../backend && npm run format",
     "lint": "cd frontend && npm run lint && cd ../backend && npm run lint",