Initial commit

frontend/src/upload/configuration/configuration.component.html

@@ -0,0 +1,19 @@
+<mat-chip-set>
+    <mat-chip>
+        <mat-icon matChipAvatar>difference</mat-icon>
+        <div>
+            Maximum file size: {{ configuration().BodyMaxSize | tcReadableBytes }}
+        </div>
+    </mat-chip>
+    <mat-chip>
+        <mat-icon matChipAvatar>calendar_month</mat-icon>
+        <div>
+            Availability: {{ configuration().DaysFileAvailable }}
+            @if (configuration().DaysFileAvailable === 1) {
+            day
+            } @else {
+            days
+            }
+        </div>
+    </mat-chip>
+</mat-chip-set>

frontend/src/upload/configuration/configuration.component.scss

@@ -0,0 +1,7 @@
+mat-chip-set {
+    margin-bottom: 15px;
+}
+
+mat-chip {
+    background-color: var(--mat-sys-on-secondary);
+}

frontend/src/upload/configuration/configuration.component.ts

@@ -0,0 +1,14 @@
+import { Component, input, signal } from '@angular/core';
+import { Configuration } from '../../http/http.models';
+import { ToReadableBytesPipe } from '../../conversion/to-readable-bytes.pipe';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+@Component({
+  selector: 'tc-configuration',
+  imports: [ToReadableBytesPipe, MatChipsModule, MatIconModule],
+  templateUrl: './configuration.component.html',
+  styleUrl: './configuration.component.scss'
+})
+export class ConfigurationComponent {
+  public readonly configuration = input.required<Configuration>();
+}

frontend/src/upload/file-chooser/file-chooser.component.html

@@ -0,0 +1,10 @@
+<button mat-flat-button type="file" (click)="onClick()">
+    <mat-icon>upload_file</mat-icon>
+    @if (hasFile()) {
+    Change file
+    } @else {
+    Choose file
+    }
+</button>
+
+<input #fileInput type="file" (change)="onFileSelected($event)">

frontend/src/upload/file-chooser/file-chooser.component.scss

@@ -0,0 +1,11 @@
+button {
+    width: 100%;
+
+    mat-icon {
+        display: contents;
+    }
+}
+
+input {
+    display: none;
+}

frontend/src/upload/file-chooser/file-chooser.component.ts

@@ -0,0 +1,38 @@
+import { CommonModule } from '@angular/common';
+import { Component, ElementRef, inject, output, signal, viewChild } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+    selector: 'tc-file-chooser',
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        MatIconModule,
+    ],
+    templateUrl: './file-chooser.component.html',
+    styleUrl: './file-chooser.component.scss'
+})
+export class FileChooserComponent {
+    protected fileInput = viewChild<ElementRef>('fileInput')
+    protected readonly file = output<File>();
+    protected readonly hasFile = signal<boolean>(false);
+
+    protected onClick() {
+        this.fileInput()?.nativeElement.click();
+    }
+
+    protected onFileSelected(event: Event) {
+        event.preventDefault();
+
+        const files = (event.target as HTMLInputElement).files ?? [];
+        const file = files.length > 0 ? files[0] : null;
+
+        if (!file) {
+            return;
+        }
+
+        this.file.emit(file);
+        this.hasFile.set(true);
+    }
+}

frontend/src/upload/file-info/file-info.component.html

@@ -0,0 +1,13 @@
+<mat-card class="info-card" appearance="outlined">
+    <mat-card-header>
+        <mat-card-title>
+            {{ file().name || '-'}}
+        </mat-card-title>
+    </mat-card-header>
+    <mat-card-footer class="footer">
+        <mat-chip-set>
+            <mat-chip>{{ file().size | tcReadableBytes }}</mat-chip>
+            <mat-chip>{{ file().type || 'unknown/unknown'}}</mat-chip>
+        </mat-chip-set>
+    </mat-card-footer>
+</mat-card>

frontend/src/upload/file-info/file-info.component.scss

@@ -0,0 +1,17 @@
+ .info-card {
+     width: 100%;
+     margin-bottom: 20px;
+
+     mat-card-header {
+         padding: 16px;
+     }
+
+     button {
+         width: initial;
+         margin: 0 15px 15px 15px;
+     }
+
+     .footer {
+         padding: 16px;
+     }
+ }

frontend/src/upload/file-info/file-info.component.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { Component, input, } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule } from '@angular/material/chips';
+import { ToReadableBytesPipe } from '../../conversion/to-readable-bytes.pipe';
+
+@Component({
+    selector: 'tc-file-info',
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        MatIconModule,
+        MatCardModule,
+        MatChipsModule,
+        ToReadableBytesPipe],
+    templateUrl: './file-info.component.html',
+    styleUrl: './file-info.component.scss'
+})
+export class FileInfoComponent {
+    public readonly file = input.required<File>();
+}

frontend/src/upload/file-uploader/file-uploader.component.html

@@ -0,0 +1,35 @@
+@let configuration = config();
+@let uploadedFile = file();
+@let canUpload = uploadAllowed();
+
+<h1>Upload new file</h1>
+
+<div class="container">
+    @if (configuration !== null) {
+    <tc-configuration [configuration]="configuration"></tc-configuration>
+    }
+
+    @if (uploadedFile) {
+    <tc-file-info [file]="uploadedFile"></tc-file-info>
+    }
+
+    <div class="buttons">
+        <tc-file-chooser (file)="onFile($event)"></tc-file-chooser>
+
+        @if (!uploadedFile || canUpload) {
+        <button mat-flat-button type="file" (click)="onUploadClick()" [disabled]="!canUpload">
+            <mat-icon>cloud_upload</mat-icon>
+            Upload file
+        </button>
+        } @else {
+        <button mat-flat-button type="file" (click)="onUploadClick()" disabled="true">
+            <mat-icon>cloud_upload</mat-icon>
+            File too large.
+        </button>
+        }
+    </div>
+</div>
+
+<p>
+    Some explaination about what this does yada yada
+</p>

frontend/src/upload/file-uploader/file-uploader.component.scss

@@ -0,0 +1,23 @@
+.container {
+    line-break: anywhere;
+
+    .buttons {
+        width: 100%;
+        margin: 15px 0;
+        display: flex;
+        gap: 15px;
+        align-content: stretch;
+        flex-wrap: wrap;
+
+        tc-file-chooser,
+        button {
+            min-width: 150px;
+            flex-grow: 1;
+        }
+    }
+
+    .error-message {
+        display: flex;
+        color: #d00;
+    }
+}

frontend/src/upload/file-uploader/file-uploader.component.ts

@@ -0,0 +1,67 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, DestroyRef, inject, output, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { Configuration, UploadResponse } from '../../http/http.models';
+import { HttpService } from '../../http/http.service';
+import { ConfigurationComponent } from '../configuration/configuration.component';
+import { FileChooserComponent } from '../file-chooser/file-chooser.component';
+import { FileInfoComponent } from '../file-info/file-info.component';
+
+@Component({
+  selector: 'tc-file-uploader',
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCardModule,
+    MatChipsModule,
+    ConfigurationComponent,
+    FileInfoComponent,
+    FileChooserComponent,
+  ],
+  templateUrl: './file-uploader.component.html',
+  styleUrl: './file-uploader.component.scss'
+})
+export class FileUploaderComponent {
+  public readonly encryptedFile = output<UploadResponse>();
+
+  private readonly httpService = inject(HttpService);
+  private readonly destroyRef = inject(DestroyRef)
+
+  protected readonly config = signal<Configuration | null>(null);
+  protected readonly file = signal<File | null>(null);
+
+  protected readonly uploadAllowed = computed(() => {
+    const configuration = this.config();
+    const file = this.file();
+
+    return !!configuration && !!file && file.size <= configuration.BodyMaxSize;
+  });
+
+  constructor() {
+    this.httpService.loadOptions()
+      // TODO: Error handling
+      .pipe(takeUntilDestroyed())
+      .subscribe(this.config.set);
+  }
+
+  protected onFile(file: File) {
+    this.file.set(file);
+  }
+
+  protected onUploadClick() {
+    const file = this.file();
+    if (!file) {
+      return;
+    }
+
+    this.httpService.uploadFile(file)
+      // TODO: Error handling
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(response => this.encryptedFile.emit(response));
+  }
+}

frontend/src/upload/upload-information/upload-information.component.html

@@ -0,0 +1,7 @@
+<div class="container">
+    <h1>Success!</h1>
+    <p>Your file has been uploaded successfully.</p>
+
+    Link to file: /api/files/{{ file().id }}/download<br>
+    Key: {{ file().key }}
+</div>

frontend/src/upload/upload-information/upload-information.component.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, input, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { UploadResponse } from '../../http/http.models';
+
+@Component({
+    selector: 'tc-upload-information',
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        MatIconModule,
+        MatCardModule,
+        MatChipsModule,
+    ],
+    templateUrl: './upload-information.component.html',
+    styleUrl: './upload-information.component.scss'
+})
+export class UploadInformationComponent {
+    readonly file = input.required<UploadResponse>();
+}

frontend/src/upload/upload.component.html

@@ -0,0 +1,6 @@
+@let file = encryptedFile();
+@if (file) {
+<tc-upload-information [file]="file"></tc-upload-information>
+} @else {
+<tc-file-uploader (encryptedFile)="onEncryptedFile($event)"></tc-file-uploader>
+}

frontend/src/upload/upload.component.scss

@@ -0,0 +1,23 @@
+.container {
+    line-break: anywhere;
+
+    .buttons {
+        width: 100%;
+        margin: 15px 0;
+        display: flex;
+        gap: 15px;
+        align-content: stretch;
+        flex-wrap: wrap;
+
+        tc-file-chooser,
+        button {
+            min-width: 150px;
+            flex-grow: 1;
+        }
+    }
+
+    .error-message {
+        display: flex;
+        color: #d00;
+    }
+}

frontend/src/upload/upload.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { UploadResponse } from '../http/http.models';
+import { FileUploaderComponent } from "./file-uploader/file-uploader.component";
+import { UploadInformationComponent } from './upload-information/upload-information.component';
+
+@Component({
+  selector: 'tc-upload',
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCardModule,
+    MatChipsModule,
+    FileUploaderComponent,
+    UploadInformationComponent,
+  ],
+  templateUrl: './upload.component.html',
+  styleUrl: './upload.component.scss'
+})
+export class UploadComponent {
+  protected readonly encryptedFile = signal<UploadResponse | null>(null);
+
+  protected onEncryptedFile(encryptedFile: UploadResponse) {
+    this.encryptedFile.set(encryptedFile);
+  }
+}