Implemented password verification

frontend/src/app/download/download.component.html

@@ -6,13 +6,24 @@
     <p class="text-md text-center text-gray-600 mb-6">Access your files quickly and securely</p>
     <div class="bg-white shadow-lg rounded-lg p-6 flex flex-col items-center justify-center">
       <img class="w-56 mt-6 mb-6" src="./assets/cloud-arrow-down-solid.svg">
-      <input type="text" class="input input-bordered text-center w-full max-w-md mb-6" placeholder="Enter download code/link" [(ngModel)]="inputFileId"/>
+      <input type="text" class="input input-bordered text-center w-full max-w-md mb-6" placeholder="Enter download code/link"
-      <input
+             [(ngModel)]="inputFileId"
-        *ngIf="downloadInfo && downloadInfo.passwordProtected && downloadInfo.downloadable"
+      (keydown.enter)="requestDownload()"/>
-        type="password" class="input input-bordered text-center w-full max-w-md mb-6" placeholder="Enter file password..." [(ngModel)]="filePassword"/>
 
+      <div class="mb-6 w-full flex flex-col items-center justify-center">
+        <input
+          *ngIf="downloadInfo && downloadInfo.passwordProtected && downloadInfo.downloadable"
+          [ngClass]="{'input-error': passwordWrong}"
+          type="password"
+          class="input input-bordered text-center w-full max-w-md"
+          placeholder="Enter file password..."
+          [(ngModel)]="filePassword"/>
+        <div class="label" *ngIf="passwordWrong">
+          <span class="label-text-alt text-red-500">Password wrong | Check capslock</span>
+        </div>
+      </div>
 
-      <button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4" (click)="requestDownload()">
+      <button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4 mt-3" (click)="requestDownload()">
         Download
       </button>
       <button

frontend/src/app/download/download.component.ts

@@ -2,7 +2,7 @@ import {Component, ElementRef, ViewChild} from '@angular/core';
 import axios from "axios";
 import {DevelopmentStore} from "../../store/DevelopmentStore";
 import {FormsModule} from "@angular/forms";
-import {DecimalPipe, NgIf} from "@angular/common";
+import {DecimalPipe, NgClass, NgIf} from "@angular/common";
 import funfacts from "../../assets/funfacts";
 import {RouterLink} from "@angular/router";
 
@@ -13,7 +13,8 @@ import {RouterLink} from "@angular/router";
     FormsModule,
     NgIf,
     DecimalPipe,
-    RouterLink
+    RouterLink,
+    NgClass
   ],
   templateUrl: './download.component.html',
   styleUrl: './download.component.scss'
@@ -22,7 +23,7 @@ export class DownloadComponent {
 
   @ViewChild('download_not_possible') download_not_possible: ElementRef<HTMLDialogElement> | undefined;
 
-  inputFileId: string = "2402171";
+  inputFileId: string = "2402183";
   fileId: string = "";
   filePassword: string = "";
   fileName: string = "";
@@ -33,6 +34,7 @@ export class DownloadComponent {
   waitingForPassword: boolean = false;
   downloadProgress: number = 0;
   downloadDuration: string = "";
+  passwordWrong: boolean = false;
 
   funfact: string = "";
 
@@ -44,6 +46,12 @@ export class DownloadComponent {
 
   requestDownload() {
 
+    if(this.waitingForPassword) {
+      console.log("Requesting download with password");
+      this.downloadFile();
+      return;
+    }
+
     console.log(this.inputFileId);
     this.fileId = this.inputFileId; // TODO: Implement link extraction logic
 
@@ -61,6 +69,7 @@ export class DownloadComponent {
       return;
     }
     else if(this.downloadInfo?.passwordProtected) {
+      this.waitingForPassword = true;
       console.log("Password protected");
     }
   }
@@ -114,7 +123,7 @@ export class DownloadComponent {
     this.fileDownloadStarted = true;
     axios({
       method: 'get',
-      url: this.developmentStore.getBaseUrl() + 'api/v1/download?fileId=' + this.fileId,
+      url: this.developmentStore.getBaseUrl() + 'api/v1/download?fileId=' + this.fileId + '&password=' + this.filePassword,
       responseType: 'arraybuffer',
       headers: {
         'Access-Control-Allow-Origin': '*', // Allow CORS
@@ -163,9 +172,15 @@ export class DownloadComponent {
       document.body.removeChild(a);
     })
     .catch(error => {
+      this.fileDownloadStarted = false;
+      this.wrongPassword();
       console.error('Error during download request:', error);
     });
   }
+
+  private wrongPassword() {
+    this.passwordWrong = true;
+  }
 }
 interface DownloadInfo {
   downloadable: boolean;