Added password field
- Added download error modal - Added password field show logic - Redesigned UI
This commit is contained in:
parent
374d4dc40d
commit
f30961f1f0
@ -3,29 +3,41 @@
|
||||
<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">
|
||||
<div class="w-full max-w-md mb-6 relative">
|
||||
<input type="text" class="input input-bordered text-center w-full pl-10" placeholder="Enter download code/link" />
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<span class="text-gray-500 sm:text-sm">
|
||||
<i class="fas fa-link"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary w-full max-w-xs flex justify-center items-center mb-4" (click)="checkFile()">
|
||||
<input type="text" class="input input-bordered text-center w-full max-w-md mb-6" placeholder="Enter download code/link" [(ngModel)]="inputFileId"/>
|
||||
<input
|
||||
*ngIf="downloadInfo && downloadInfo.passwordProtected && downloadInfo.downloadable"
|
||||
type="password" class="input input-bordered text-center w-full max-w-md mb-6" placeholder="Enter file password..." [(ngModel)]="filePassword"/>
|
||||
|
||||
|
||||
<button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4" (click)="checkFile()">
|
||||
Download
|
||||
</button>
|
||||
<button
|
||||
(click)="download_not_possible.showModal()"
|
||||
class="btn btn-secondary btn-outline w-full max-w-md flex justify-center items-center mb-4">
|
||||
Reset
|
||||
</button>
|
||||
<p class="text-gray-600 text-center w-2/3">Files are available for a limited time. Ensure the code or link is correct and the file is still downloadable.</p>
|
||||
</div>
|
||||
</div>
|
||||
<dialog #password_modal class="modal">
|
||||
<dialog #download_not_possible class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg">Please enter the file password</h3>
|
||||
<p class="py-4">Please enter the download password:</p>
|
||||
<input type="password" placeholder="Password..." class="input input-bordered w-full max-w-xs" />
|
||||
<div class="modal-action">
|
||||
<h3 class="font-bold text-lg">The file cant be downloaded!</h3>
|
||||
<div class="flex items-center justify-center flex-col w-full">
|
||||
<img class="w-24 mt-6 mb-6" src="./assets/poop-solid.svg">
|
||||
<h4 class="text-xl mb-1">Oh no...</h4>
|
||||
<p class="text-gray-400 mb-6">What happened here?</p>
|
||||
<p class="text-gray-800 text-center mb-3">The file you are trying to download is not available anymore.</p>
|
||||
<p class="text-gray-800 text-center mb-6">This issue may occur if the download limit has been reached or the download period has expired.</p>
|
||||
<form method="dialog">
|
||||
<button class="btn">Cancel download</button>
|
||||
<button class="btn">Okay</button>
|
||||
</form>
|
||||
</div>
|
||||
<form method="dialog">
|
||||
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
|
||||
</form>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
@ -1,23 +1,43 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {Component, ElementRef, ViewChild} from '@angular/core';
|
||||
import axios from "axios";
|
||||
import {DevelopmentStore} from "../../store/DevelopmentStore";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {NgIf} from "@angular/common";
|
||||
|
||||
@Component({
|
||||
selector: 'app-download',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [
|
||||
FormsModule,
|
||||
NgIf
|
||||
],
|
||||
templateUrl: './download.component.html',
|
||||
styleUrl: './download.component.scss'
|
||||
})
|
||||
export class DownloadComponent {
|
||||
|
||||
fileId: string = "";
|
||||
@ViewChild('download_not_possible') download_not_possible: ElementRef<HTMLDialogElement> | undefined;
|
||||
|
||||
constructor() {
|
||||
inputFileId: string = "";
|
||||
fileId: string = "";
|
||||
filePassword: string = "";
|
||||
downloadInfo: DownloadInfo | null = null;
|
||||
|
||||
|
||||
constructor(private developmentStore: DevelopmentStore) {
|
||||
this.speedTest();
|
||||
}
|
||||
|
||||
checkFile() {
|
||||
console.log("Moin")
|
||||
|
||||
console.log(this.inputFileId);
|
||||
this.fileId = this.inputFileId; // TODO: Implement link extraction logic
|
||||
|
||||
this.getDownloadInfo();
|
||||
}
|
||||
|
||||
checkPassword() {
|
||||
|
||||
}
|
||||
|
||||
private speedTest() {
|
||||
@ -25,7 +45,7 @@ export class DownloadComponent {
|
||||
|
||||
axios({
|
||||
method: 'get',
|
||||
url: 'http://localhost:/api/v1/speed-test',
|
||||
url: this.developmentStore.getBaseUrl() + 'api/v1/speed-test',
|
||||
responseType: 'arraybuffer',
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*', // Allow CORS
|
||||
@ -44,4 +64,29 @@ export class DownloadComponent {
|
||||
console.error('Error during download test:', error);
|
||||
});
|
||||
}
|
||||
|
||||
private getDownloadInfo() {
|
||||
axios({
|
||||
method: 'get',
|
||||
url: this.developmentStore.getBaseUrl() + 'api/v1/download-info?fileId=' + this.fileId,
|
||||
responseType: 'json',
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*', // Allow CORS
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.downloadInfo = response.data;
|
||||
console.log(response.data);
|
||||
return response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during download info request:', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
interface DownloadInfo {
|
||||
downloadable: boolean;
|
||||
passwordProtected: boolean;
|
||||
singleDownload: boolean;
|
||||
fileId: string;
|
||||
}
|
||||
|
||||
@ -147,7 +147,7 @@ export class UploadComponent {
|
||||
|
||||
axios({
|
||||
method: 'post',
|
||||
url: 'http://localhost/api/v1/upload-speed-test',
|
||||
url: this.developmentStore.getBaseUrl() + 'api/v1/upload-speed-test',
|
||||
data: uint8View,
|
||||
headers: {
|
||||
'Content-Type': 'application/octet-stream',
|
||||
|
||||
1
frontend/src/assets/poop-solid.svg
Normal file
1
frontend/src/assets/poop-solid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#2b3440" d="M254.4 6.6c3.5-4.3 9-6.5 14.5-5.7C315.8 7.2 352 47.4 352 96c0 11.2-1.9 22-5.5 32H352c35.3 0 64 28.7 64 64c0 19.1-8.4 36.3-21.7 48H408c39.8 0 72 32.2 72 72c0 23.2-11 43.8-28 57c34.1 5.7 60 35.3 60 71c0 39.8-32.2 72-72 72H72c-39.8 0-72-32.2-72-72c0-35.7 25.9-65.3 60-71c-17-13.2-28-33.8-28-57c0-39.8 32.2-72 72-72h13.7C104.4 228.3 96 211.1 96 192c0-35.3 28.7-64 64-64h16.2c44.1-.1 79.8-35.9 79.8-80c0-9.2-1.5-17.9-4.3-26.1c-1.8-5.2-.8-11.1 2.8-15.4z"/></svg>
|
||||
|
After Width: | Height: | Size: 694 B |
@ -75,10 +75,13 @@ public class Download extends ApiRestController {
|
||||
public ResponseEntity<Object> getDownloadInfo(@RequestParam String fileId) {
|
||||
FileUpload fileUpload = fileService.getFileUploadByFileId(fileId);
|
||||
|
||||
boolean downloadable = !fileUpload.isSingleDownload() || fileUpload.getDownloadCount() == 0;
|
||||
|
||||
Map<String, Object> response = new HashMap<>();
|
||||
response.put("fileId", fileUpload.getFileId());
|
||||
response.put("passwordProtected", fileUpload.isPasswordProtected());
|
||||
response.put("singleDownload", fileUpload.isSingleDownload());
|
||||
response.put("downloadable", downloadable);
|
||||
|
||||
return new ResponseEntity<>(response, HttpStatus.OK);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user