kamp/pingvin-share
1
0
Fork 0
mirror of https://github.com/stonith404/pingvin-share.git synced 2024-07-02 07:20:38 +02:00
Code

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

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

2
.dockerignore
View File

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

22
.github/workflows/backend-system-tests.yml vendored Normal file
View File

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

4
.github/workflows/build-docker-image.yml vendored
View File

@ -4,8 +4,8 @@ on:
push:
branches: main
paths:
- 'frontend/**'
- 'backend/**'
- "frontend/**"
- "backend/**"
jobs:
build:

6
README.md
View File

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

20
backend/.eslintrc.json
View File

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

4331
backend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
backend/package.json
View File

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

14
backend/prisma/migrations/20221013212615_cascade_delete_on_share/migration.sql Normal file
View File

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

2
backend/prisma/schema.prisma
View File

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

1
backend/src/auth/auth.controller.ts
View File

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

1
backend/src/auth/dto/authRegister.dto.ts
View File

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

2
backend/src/auth/dto/refreshAccessToken.dto.ts
View File

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

2
backend/src/auth/strategy/jwt.strategy.ts
View File

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

3
backend/src/file/dto/file.dto.ts
View File

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

7
backend/src/file/file.controller.ts
View File

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

1
backend/src/file/file.module.ts
View File

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

4
backend/src/file/file.service.ts
View File

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

12
backend/src/file/guard/fileDownload.guard.ts
View File

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

3
backend/src/share/dto/createShare.dto.ts
View File

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

3
backend/src/share/dto/sharePassword.dto.ts
View File

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

16
backend/src/share/guard/shareOwner.guard.ts
View File

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

19
backend/src/share/guard/shareSecurity.guard.ts
View File

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

47
backend/src/share/guard/shareTokenSecurity.guard.ts Normal file
View File

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

12
backend/src/share/share.controller.ts
View File

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

380
backend/src/share/share.service.ts
View File

@ -1,8 +1,8 @@
import {
BadRequestException,
ForbiddenException,
Injectable,
NotFoundException,
BadRequestException,
ForbiddenException,
Injectable,
NotFoundException,
} from "@nestjs/common";
import { ConfigService } from "@nestjs/config";
import { JwtService } from "@nestjs/jwt";
@ -17,195 +17,213 @@ import { CreateShareDTO } from "./dto/createShare.dto";
@Injectable()
export class ShareService {
constructor(
private prisma: PrismaService,
private fileService: FileService,
private config: ConfigService,
private jwtService: JwtService
) {
constructor(
private prisma: PrismaService,
private fileService: FileService,
private config: ConfigService,
private jwtService: JwtService
) {}
async create(share: CreateShareDTO, user: User) {
if (!(await this.isShareIdAvailable(share.id)).isAvailable)
throw new BadRequestException("Share id already in use");
if (!share.security || Object.keys(share.security).length == 0)
share.security = undefined;
if (share.security?.password) {
share.security.password = await argon.hash(share.security.password);
}
async create(share: CreateShareDTO, user: User) {
if (!(await this.isShareIdAvailable(share.id)).isAvailable)
throw new BadRequestException("Share id already in use");
// We have to add an exception for "never" (since moment won't like that)
let expirationDate;
if (share.expiration !== "never") {
expirationDate = moment()
.add(
share.expiration.split("-")[0],
share.expiration.split(
"-"
)[1] as moment.unitOfTime.DurationConstructor
)
.toDate();
if (!share.security || Object.keys(share.security).length == 0)
share.security = undefined;
if (share.security?.password) {
share.security.password = await argon.hash(share.security.password);
}
// We have to add an exception for "never" (since moment won't like that)
let expirationDate;
if (share.expiration !== "never") {
expirationDate = moment()
.add(
share.expiration.split("-")[0],
share.expiration.split("-")[1] as moment.unitOfTime.DurationConstructor
)
.toDate();
// Throw error if expiration date is now
if (expirationDate.setMilliseconds(0) == new Date().setMilliseconds(0))
throw new BadRequestException("Invalid expiration date");
} else {
expirationDate = moment(0).toDate();
}
return await this.prisma.share.create({
data: {
...share,
expiration: expirationDate,
creator: {connect: {id: user.id}},
security: {create: share.security},
},
});
// Throw error if expiration date is now
if (expirationDate.setMilliseconds(0) == new Date().setMilliseconds(0))
throw new BadRequestException("Invalid expiration date");
} else {
expirationDate = moment(0).toDate();
}
async createZip(shareId: string) {
const path = `./data/uploads/shares/${shareId}`;
return await this.prisma.share.create({
data: {
...share,
expiration: expirationDate,
creator: { connect: { id: user.id } },
security: { create: share.security },
},
});
}
const files = await this.prisma.file.findMany({where: {shareId}});
const archive = archiver("zip", {
zlib: {level: 9},
});
const writeStream = fs.createWriteStream(`${path}/archive.zip`);
async createZip(shareId: string) {
const path = `./data/uploads/shares/${shareId}`;
for (const file of files) {
archive.append(fs.createReadStream(`${path}/${file.id}`), {
name: file.name,
});
}
const files = await this.prisma.file.findMany({ where: { shareId } });
const archive = archiver("zip", {
zlib: { level: 9 },
});
const writeStream = fs.createWriteStream(`${path}/archive.zip`);
archive.pipe(writeStream);
await archive.finalize();
for (const file of files) {
archive.append(fs.createReadStream(`${path}/${file.id}`), {
name: file.name,
});
}
async complete(id: string) {
const moreThanOneFileInShare =
(await this.prisma.file.findMany({where: {shareId: id}})).length != 0;
archive.pipe(writeStream);
await archive.finalize();
}
if (!moreThanOneFileInShare)
throw new BadRequestException(
"You need at least on file in your share to complete it."
);
async complete(id: string) {
if (await this.isShareCompleted(id))
throw new BadRequestException("Share already completed");
this.createZip(id).then(() =>
this.prisma.share.update({where: {id}, data: {isZipReady: true}})
);
const moreThanOneFileInShare =
(await this.prisma.file.findMany({ where: { shareId: id } })).length != 0;
return await this.prisma.share.update({
where: {id},
data: {uploadLocked: true},
});
}
async getSharesByUser(userId: string) {
return await this.prisma.share.findMany({
where: {
creator: {id: userId},
// We want to grab any shares that are not expired or have their expiration date set to "never" (unix 0)
OR: [{expiration: {gt: new Date()}}, {expiration: {equals: moment(0).toDate()}}]
},
});
}
async get(id: string) {
let share: any = await this.prisma.share.findUnique({
where: {id},
include: {
files: true,
creator: true,
},
});
if (!share || !share.uploadLocked)
throw new NotFoundException("Share not found");
share.files = share.files.map((file) => {
file["url"] = `http://localhost:8080/file/${file.id}`;
return file;
});
await this.increaseViewCount(share);
return share;
}
async getMetaData(id: string) {
const share = await this.prisma.share.findUnique({
where: {id},
});
if (!share || !share.uploadLocked)
throw new NotFoundException("Share not found");
return share;
}
async remove(shareId: string) {
const share = await this.prisma.share.findUnique({
where: {id: shareId},
});
if (!share) throw new NotFoundException("Share not found");
await this.fileService.deleteAllFiles(shareId);
await this.prisma.share.delete({where: {id: shareId}});
}
async isShareCompleted(id: string) {
return (await this.prisma.share.findUnique({where: {id}})).uploadLocked;
}
async isShareIdAvailable(id: string) {
const share = await this.prisma.share.findUnique({where: {id}});
return {isAvailable: !share};
}
async increaseViewCount(share: Share) {
await this.prisma.share.update({
where: {id: share.id},
data: {views: share.views + 1},
});
}
async exchangeSharePasswordWithToken(shareId: string, password: string) {
const sharePassword = (
await this.prisma.shareSecurity.findFirst({
where: {share: {id: shareId}},
})
).password;
if (!(await argon.verify(sharePassword, password)))
throw new ForbiddenException("Wrong password");
const token = this.generateShareToken(shareId);
return {token};
}
generateShareToken(shareId: string) {
return this.jwtService.sign(
{
shareId,
},
{
expiresIn: "1h",
secret: this.config.get("JWT_SECRET"),
}
);
}
verifyShareToken(shareId: string, token: string) {
try {
const claims = this.jwtService.verify(token, {
secret: this.config.get("JWT_SECRET"),
});
return claims.shareId == shareId;
} catch {
return false;
}
if (!moreThanOneFileInShare)
throw new BadRequestException(
"You need at least on file in your share to complete it."
);
this.createZip(id).then(() =>
this.prisma.share.update({ where: { id }, data: { isZipReady: true } })
);
return await this.prisma.share.update({
where: { id },
data: { uploadLocked: true },
});
}
async getSharesByUser(userId: string) {
return await this.prisma.share.findMany({
where: {
creator: { id: userId },
uploadLocked: true,
// We want to grab any shares that are not expired or have their expiration date set to "never" (unix 0)
OR: [
{ expiration: { gt: new Date() } },
{ expiration: { equals: moment(0).toDate() } },
],
},
orderBy: {
expiration: "desc",
},
});
}
async get(id: string) {
const share: any = await this.prisma.share.findUnique({
where: { id },
include: {
files: true,
creator: true,
},
});
if (!share || !share.uploadLocked)
throw new NotFoundException("Share not found");
return share;
}
async getMetaData(id: string) {
const share = await this.prisma.share.findUnique({
where: { id },
});
if (!share || !share.uploadLocked)
throw new NotFoundException("Share not found");
return share;
}
async remove(shareId: string) {
const share = await this.prisma.share.findUnique({
where: { id: shareId },
});
if (!share) throw new NotFoundException("Share not found");
await this.fileService.deleteAllFiles(shareId);
await this.prisma.share.delete({ where: { id: shareId } });
}
async isShareCompleted(id: string) {
return (await this.prisma.share.findUnique({ where: { id } })).uploadLocked;
}
async isShareIdAvailable(id: string) {
const share = await this.prisma.share.findUnique({ where: { id } });
return { isAvailable: !share };
}
async increaseViewCount(share: Share) {
await this.prisma.share.update({
where: { id: share.id },
data: { views: share.views + 1 },
});
}
async getShareToken(shareId: string, password: string) {
const share = await this.prisma.share.findFirst({
where: { id: shareId },
include: {
security: true,
},
});
if (
share?.security?.password &&
!(await argon.verify(share.security.password, password))
)
throw new ForbiddenException("Wrong password");
const token = await this.generateShareToken(shareId);
await this.increaseViewCount(share);
return { token };
}
async generateShareToken(shareId: string) {
const { expiration } = await this.prisma.share.findUnique({
where: { id: shareId },
});
return this.jwtService.sign(
{
shareId,
},
{
expiresIn: moment(expiration).diff(new Date(), "seconds") + "s",
secret: this.config.get("JWT_SECRET"),
}
);
}
async verifyShareToken(shareId: string, token: string) {
const { expiration } = await this.prisma.share.findUnique({
where: { id: shareId },
});
try {
const claims = this.jwtService.verify(token, {
secret: this.config.get("JWT_SECRET"),
// Ignore expiration if expiration is 0
ignoreExpiration: moment(expiration).isSame(0),
});
return claims.shareId == shareId;
} catch {
return false;
}
}
}

1542
backend/test/system/newman-system-tests.json Normal file
View File

File diff suppressed because it is too large Load Diff

1
backend/test/system/test-file.txt Normal file
View File

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

30
frontend/package-lock.json generated
View File

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

2
frontend/package.json
View File

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

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

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

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

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

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

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

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

@ -1,197 +1,229 @@
import {
Accordion,
Button,
Col,
Checkbox,
Grid,
NumberInput,
PasswordInput,
Select,
Stack,
Text,
TextInput,
Accordion,
Button,
Col,
Checkbox,
Grid,
NumberInput,
PasswordInput,
Select,
Stack,
Text,
TextInput,
} from "@mantine/core";
import {useForm, yupResolver} from "@mantine/form";
import {useModals} from "@mantine/modals";
import { useForm, yupResolver } from "@mantine/form";
import { useModals } from "@mantine/modals";
import * as yup from "yup";
import shareService from "../../services/share.service";
import {ShareSecurity} from "../../types/share.type";
import { ShareSecurity } from "../../types/share.type";
import moment from "moment";
import getConfig from "next/config";
const {publicRuntimeConfig} = getConfig();
const { publicRuntimeConfig } = getConfig();
const PreviewExpiration = ({form}: { form: any }) => {
const value = form.values.never_expires ? "never" : form.values.expiration_num + form.values.expiration_unit;
if (value === "never") return "This share will never expire.";
const PreviewExpiration = ({ form }: { form: any }) => {
const value = form.values.never_expires
? "never"
: form.values.expiration_num + form.values.expiration_unit;
if (value === "never") return "This share will never expire.";
const expirationDate = moment()
.add(
value.split("-")[0],
value.split("-")[1] as moment.unitOfTime.DurationConstructor
)
.toDate();
const expirationDate = moment()
.add(
value.split("-")[0],
value.split("-")[1] as moment.unitOfTime.DurationConstructor
)
.toDate();
if (publicRuntimeConfig.TWELVE_HOUR_TIME === "true")
return `This share will expire on ${moment(expirationDate).format("MMMM Do YYYY, h:mm a")}`;
else
return `This share will expire on ${moment(expirationDate).format("MMMM DD YYYY, HH:mm")}`;
}
if (publicRuntimeConfig.TWELVE_HOUR_TIME === "true")
return `This share will expire on ${moment(expirationDate).format(
"MMMM Do YYYY, h:mm a"
)}`;
else
return `This share will expire on ${moment(expirationDate).format(
"MMMM DD YYYY, HH:mm"
)}`;
};
const CreateUploadModalBody = ({
uploadCallback,
}: {
uploadCallback: (
id: string,
expiration: string,
security: ShareSecurity
) => void;
uploadCallback,
}: {
uploadCallback: (
id: string,
expiration: string,
security: ShareSecurity
) => void;
}) => {
const modals = useModals();
const validationSchema = yup.object().shape({
link: yup
.string()
.required()
.min(3)
.max(100)
.matches(new RegExp("^[a-zA-Z0-9_-]*$"), {
message: "Can only contain letters, numbers, underscores and hyphens",
}),
password: yup.string().min(3).max(30),
maxViews: yup.number().min(1),
});
const form = useForm({
initialValues: {
link: "",
const modals = useModals();
const validationSchema = yup.object().shape({
link: yup
.string()
.required()
.min(3)
.max(50)
.matches(new RegExp("^[a-zA-Z0-9_-]*$"), {
message: "Can only contain letters, numbers, underscores and hyphens",
}),
password: yup.string().min(3).max(30),
maxViews: yup.number().min(1),
});
const form = useForm({
initialValues: {
link: "",
password: undefined,
maxViews: undefined,
expiration_num: 1,
expiration_unit: "-days",
never_expires: false
},
validate: yupResolver(validationSchema),
});
password: undefined,
maxViews: undefined,
expiration_num: 1,
expiration_unit: "-days",
never_expires: false,
},
validate: yupResolver(validationSchema),
});
return (
<form
onSubmit={form.onSubmit(async (values) => {
if (!(await shareService.isShareIdAvailable(values.link))) {
form.setFieldError("link", "This link is already in use");
} else {
const expiration = form.values.never_expires ? "never" : form.values.expiration_num + form.values.expiration_unit;
uploadCallback(values.link, expiration, {
password: values.password,
maxViews: values.maxViews,
});
modals.closeAll();
}
})}
return (
<form
onSubmit={form.onSubmit(async (values) => {
if (!(await shareService.isShareIdAvailable(values.link))) {
form.setFieldError("link", "This link is already in use");
} else {
const expiration = form.values.never_expires
? "never"
: form.values.expiration_num + form.values.expiration_unit;
uploadCallback(values.link, expiration, {
password: values.password,
maxViews: values.maxViews,
});
modals.closeAll();
}
})}
>
<Stack align="stretch">
<Grid align={form.errors.link ? "center" : "flex-end"}>
<Col xs={9}>
<TextInput
variant="filled"
label="Link"
placeholder="myAwesomeShare"
{...form.getInputProps("link")}
/>
</Col>
<Col xs={3}>
<Button
variant="outline"
onClick={() =>
form.setFieldValue(
"link",
Buffer.from(Math.random().toString(), "utf8")
.toString("base64")
.substr(10, 7)
)
}
>
Generate
</Button>
</Col>
</Grid>
<Text
italic
size="xs"
sx={(theme) => ({
color: theme.colors.gray[6],
})}
>
<Stack align="stretch">
<Grid align={form.errors.link ? "center" : "flex-end"}>
<Col xs={9}>
<TextInput
variant="filled"
label="Link"
placeholder="myAwesomeShare"
{...form.getInputProps("link")}
/>
</Col>
<Col xs={3}>
<Button
variant="outline"
onClick={() =>
form.setFieldValue(
"link",
Buffer.from(Math.random().toString(), "utf8")
.toString("base64")
.substr(10, 7)
)
}
>
Generate
</Button>
</Col>
</Grid>
{window.location.origin}/share/
{form.values.link == "" ? "myAwesomeShare" : form.values.link}
</Text>
<Grid align={form.errors.link ? "center" : "flex-end"}>
<Col xs={6}>
<NumberInput
min={1}
max={99999}
precision={0}
variant="filled"
label="Expiration"
placeholder="n"
disabled={form.values.never_expires}
{...form.getInputProps("expiration_num")}
/>
</Col>
<Col xs={6}>
<Select
disabled={form.values.never_expires}
{...form.getInputProps("expiration_unit")}
data={[
// Set the label to singular if the number is 1, else plural
{
value: "-minutes",
label:
"Minute" + (form.values.expiration_num == 1 ? "" : "s"),
},
{
value: "-hours",
label: "Hour" + (form.values.expiration_num == 1 ? "" : "s"),
},
{
value: "-days",
label: "Day" + (form.values.expiration_num == 1 ? "" : "s"),
},
{
value: "-weeks",
label: "Week" + (form.values.expiration_num == 1 ? "" : "s"),
},
{
value: "-months",
label: "Month" + (form.values.expiration_num == 1 ? "" : "s"),
},
{
value: "-years",
label: "Year" + (form.values.expiration_num == 1 ? "" : "s"),
},
]}
/>
</Col>
</Grid>
<Checkbox
label="Never Expires"
{...form.getInputProps("never_expires")}
/>
<Text italic
size="xs"
sx={(theme) => ({
color: theme.colors.gray[6],
})}
>
{window.location.origin}/share/
{form.values.link == "" ? "myAwesomeShare" : form.values.link}
</Text>
<Grid align={form.errors.link ? "center" : "flex-end"}>
<Col xs={6}>
<NumberInput
min={1}
max={99999}
precision={0}
variant="filled"
label="Expiration"
placeholder="n"
disabled={form.values.never_expires}
{...form.getInputProps("expiration_num")}
/>
</Col>
<Col xs={6}>
<Select
disabled={form.values.never_expires}
{...form.getInputProps("expiration_unit")}
data={[
// Set the label to singular if the number is 1, else plural
{value: "-minutes", label: "Minute" + (form.values.expiration_num == 1 ? "" : "s")},
{value: "-hours", label: "Hour" + (form.values.expiration_num == 1 ? "" : "s")},
{value: "-days", label: "Day" + (form.values.expiration_num == 1 ? "" : "s")},
{value: "-weeks", label: "Week" + (form.values.expiration_num == 1 ? "" : "s")},
{value: "-months", label: "Month" + (form.values.expiration_num == 1 ? "" : "s")},
{value: "-years", label: "Year" + (form.values.expiration_num == 1 ? "" : "s")}
]}
/>
</Col>
</Grid>
<Checkbox label="Never Expires" {...form.getInputProps("never_expires")} />
{/* Preview expiration date text */}
<Text
italic
size="xs"
sx={(theme) => ({
color: theme.colors.gray[6],
})}
>
{PreviewExpiration({ form })}
</Text>
{/* Preview expiration date text */}
<Text italic
size="xs"
sx={(theme) => ({
color: theme.colors.gray[6],
})}
>
{PreviewExpiration({form})}
</Text>
<Accordion>
<Accordion.Item value="security" sx={{borderBottom: "none"}}>
<Accordion.Control>Security options</Accordion.Control>
<Accordion.Panel>
<Stack align="stretch">
<PasswordInput
variant="filled"
placeholder="No password"
label="Password protection"
{...form.getInputProps("password")}
/>
<NumberInput
min={1}
type="number"
variant="filled"
placeholder="No limit"
label="Maximal views"
{...form.getInputProps("maxViews")}
/>
</Stack>
</Accordion.Panel>
</Accordion.Item>
</Accordion>
<Button type="submit">Share</Button>
</Stack>
</form>
);
<Accordion>
<Accordion.Item value="security" sx={{ borderBottom: "none" }}>
<Accordion.Control>Security options</Accordion.Control>
<Accordion.Panel>
<Stack align="stretch">
<PasswordInput
variant="filled"
placeholder="No password"
label="Password protection"
{...form.getInputProps("password")}
/>
<NumberInput
min={1}
type="number"
variant="filled"
placeholder="No limit"
label="Maximal views"
{...form.getInputProps("maxViews")}
/>
</Stack>
</Accordion.Panel>
</Accordion.Item>
</Accordion>
<Button type="submit">Share</Button>
</Stack>
</form>
);
};
export default CreateUploadModalBody;

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

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

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

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

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

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

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

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

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

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

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

@ -1,86 +1,84 @@
import {
ActionIcon,
Button,
Stack,
Text,
TextInput,
Title
ActionIcon,
Button,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import { useClipboard } from "@mantine/hooks";
import { useModals } from "@mantine/modals";
import { ModalsContextProps } from "@mantine/modals/lib/context";
import moment from "moment";
import getConfig from "next/config";
import { useRouter } from "next/router";
import { Copy } from "tabler-icons-react";
import { TbCopy } from "react-icons/tb";
import { Share } from "../../types/share.type";
import toast from "../../utils/toast.util";
import getConfig from "next/config";
const {publicRuntimeConfig} = getConfig();
const { publicRuntimeConfig } = getConfig();
const showCompletedUploadModal = (
modals: ModalsContextProps,
share: Share,
) => {
return modals.openModal({
closeOnClickOutside: false,
withCloseButton: false,
closeOnEscape: false,
title: (
<Stack align="stretch" spacing={0}>
<Title order={4}>Share ready</Title>
</Stack>
),
children: <Body share={share}/>,
});
const showCompletedUploadModal = (modals: ModalsContextProps, share: Share) => {
return modals.openModal({
closeOnClickOutside: false,
withCloseButton: false,
closeOnEscape: false,
title: (
<Stack align="stretch" spacing={0}>
<Title order={4}>Share ready</Title>
</Stack>
),
children: <Body share={share} />,
});
};
const Body = ({share}: { share: Share }) => {
const clipboard = useClipboard({timeout: 500});
const modals = useModals();
const router = useRouter();
const link = `${window.location.origin}/share/${share.id}`;
return (
<Stack align="stretch">
<TextInput
variant="filled"
value={link}
rightSection={
<ActionIcon
onClick={() => {
clipboard.copy(link);
toast.success("Your link was copied to the keyboard.");
}}
>
<Copy/>
</ActionIcon>
}
/>
<Text
size="xs"
sx={(theme) => ({
color: theme.colors.gray[6],
})}
>
{/* If our share.expiration is timestamp 0, show a different message */}
{moment(share.expiration).unix() === 0
? "This share will never expire."
: `This share will expire on ${
(publicRuntimeConfig.TWELVE_HOUR_TIME === "true")
? moment(share.expiration).format("MMMM Do YYYY, h:mm a")
: moment(share.expiration).format("MMMM DD YYYY, HH:mm")}`}
</Text>
const Body = ({ share }: { share: Share }) => {
const clipboard = useClipboard({ timeout: 500 });
const modals = useModals();
const router = useRouter();
const link = `${window.location.origin}/share/${share.id}`;
return (
<Stack align="stretch">
<TextInput
variant="filled"
value={link}
rightSection={
<ActionIcon
onClick={() => {
clipboard.copy(link);
toast.success("Your link was copied to the keyboard.");
}}
>
<TbCopy />
</ActionIcon>
}
/>
<Text
size="xs"
sx={(theme) => ({
color: theme.colors.gray[6],
})}
>
{/* If our share.expiration is timestamp 0, show a different message */}
{moment(share.expiration).unix() === 0
? "This share will never expire."
: `This share will expire on ${
publicRuntimeConfig.TWELVE_HOUR_TIME === "true"
? moment(share.expiration).format("MMMM Do YYYY, h:mm a")
: moment(share.expiration).format("MMMM DD YYYY, HH:mm")
}`}
</Text>
<Button
onClick={() => {
modals.closeAll();
router.push("/upload");
}}
>
Done
</Button>
</Stack>
);
<Button
onClick={() => {
modals.closeAll();
router.push("/upload");
}}
>
Done
</Button>
</Stack>
);
};
export default showCompletedUploadModal;

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

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

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

@ -1,131 +1,140 @@
import {
ActionIcon,
Button,
Center,
Group,
LoadingOverlay,
Space,
Stack,
Table,
Text,
Title,
ActionIcon,
Button,
Center,
Group,
LoadingOverlay,
Space,
Stack,
Table,
Text,
Title,
} from "@mantine/core";
import {useClipboard} from "@mantine/hooks";
import {useModals} from "@mantine/modals";
import {NextLink} from "@mantine/next";
import { useClipboard } from "@mantine/hooks";
import { useModals } from "@mantine/modals";
import { NextLink } from "@mantine/next";
import moment from "moment";
import {useEffect, useState} from "react";
import {Link, Trash} from "tabler-icons-react";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { TbLink, TbTrash } from "react-icons/tb";
import Meta from "../../components/Meta";
import useUser from "../../hooks/user.hook";
import shareService from "../../services/share.service";
import {MyShare} from "../../types/share.type";
import { MyShare } from "../../types/share.type";
import toast from "../../utils/toast.util";
import getConfig from "next/config";
const {publicRuntimeConfig} = getConfig();
const { publicRuntimeConfig } = getConfig();
const MyShares = () => {
const modals = useModals();
const clipboard = useClipboard();
const modals = useModals();
const clipboard = useClipboard();
const router = useRouter();
const user = useUser();
const [shares, setShares] = useState<MyShare[]>();
const [shares, setShares] = useState<MyShare[]>();
useEffect(() => {
shareService.getMyShares().then((shares) => setShares(shares));
}, []);
useEffect(() => {
shareService.getMyShares().then((shares) => setShares(shares));
}, []);
if (!shares) return <LoadingOverlay visible/>;
if (!user) {
router.replace("/");
} else {
if (!shares) return <LoadingOverlay visible />;
return (
<>
<Meta title="My shares"/>
<Title mb={30} order={3}>
My shares
</Title>
{shares.length == 0 ? (
<Center style={{height: "70vh"}}>
<Stack align="center" spacing={10}>
<Title order={3}>It's empty here 👀</Title>
<Text>You don't have any shares.</Text>
<Space h={5}/>
<Button component={NextLink} href="/upload" variant="light">
Create one
</Button>
</Stack>
</Center>
) : (
<Table>
<thead>
<tr>
<th>Name</th>
<th>Visitors</th>
<th>Expires at</th>
<th></th>
</tr>
</thead>
<tbody>
{shares.map((share) => (
<tr key={share.id}>
<td>{share.id}</td>
<td>{share.views}</td>
<td>
{moment(share.expiration).unix() === 0
? "Never"
: (publicRuntimeConfig.TWELVE_HOUR_TIME === "true")
? moment(share.expiration).format("MMMM Do YYYY, h:mm a")
: moment(share.expiration).format("MMMM DD YYYY, HH:mm")
}
</td>
<td>
<Group position="right">
<ActionIcon
color="victoria"
variant="light"
size={25}
onClick={() => {
clipboard.copy(
`${window.location.origin}/share/${share.id}`
);
toast.success("Your link was copied to the keyboard.");
}}
>
<Link/>
</ActionIcon>
<ActionIcon
color="red"
variant="light"
size={25}
onClick={() => {
modals.openConfirmModal({
title: `Delete share ${share.id}`,
children: (
<Text size="sm">
Do you really want to delete this share?
</Text>
),
confirmProps: {
color: "red",
},
labels: {confirm: "Confirm", cancel: "Cancel"},
onConfirm: () => {
shareService.remove(share.id);
setShares(
shares.filter((item) => item.id !== share.id)
);
},
});
}}
>
<Trash/>
</ActionIcon>
</Group>
</td>
</tr>
))}
</tbody>
</Table>
)}
</>
<>
<Meta title="My shares" />
<Title mb={30} order={3}>
My shares
</Title>
{shares.length == 0 ? (
<Center style={{ height: "70vh" }}>
<Stack align="center" spacing={10}>
<Title order={3}>It's empty here 👀</Title>
<Text>You don't have any shares.</Text>
<Space h={5} />
<Button component={NextLink} href="/upload" variant="light">
Create one
</Button>
</Stack>
</Center>
) : (
<Table>
<thead>
<tr>
<th>Name</th>
<th>Visitors</th>
<th>Expires at</th>
<th></th>
</tr>
</thead>
<tbody>
{shares.map((share) => (
<tr key={share.id}>
<td>{share.id}</td>
<td>{share.views}</td>
<td>
{moment(share.expiration).unix() === 0
? "Never"
: publicRuntimeConfig.TWELVE_HOUR_TIME === "true"
? moment(share.expiration).format("MMMM Do YYYY, h:mm a")
: moment(share.expiration).format("MMMM DD YYYY, HH:mm")}
</td>
<td>
<Group position="right">
<ActionIcon
color="victoria"
variant="light"
size={25}
onClick={() => {
clipboard.copy(
`${window.location.origin}/share/${share.id}`
);
toast.success(
"Your link was copied to the keyboard."
);
}}
>
<TbLink />
</ActionIcon>
<ActionIcon
color="red"
variant="light"
size={25}
onClick={() => {
modals.openConfirmModal({
title: `Delete share ${share.id}`,
children: (
<Text size="sm">
Do you really want to delete this share?
</Text>
),
confirmProps: {
color: "red",
},
labels: { confirm: "Confirm", cancel: "Cancel" },
onConfirm: () => {
shareService.remove(share.id);
setShares(
shares.filter((item) => item.id !== share.id)
);
},
});
}}
>
<TbTrash />
</ActionIcon>
</Group>
</td>
</tr>
))}
</tbody>
</Table>
)}
</>
);
}
};
export default MyShares;

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

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

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

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

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

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

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

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

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

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

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

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