88 lines
4.3 KiB
HTML
88 lines
4.3 KiB
HTML
<div class="container mx-auto p-4 mt-4 animate-in fade-in slide-in-from-left-6 duration-300">
|
|
<h1 class="text-4xl font-bold text-center text-gray-800 mb-2">Download File</h1>
|
|
<div
|
|
*ngIf="!fileDownloadStarted && !fileDownloadFinished"
|
|
>
|
|
<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
|
|
*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)="requestDownload()">
|
|
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>
|
|
<div
|
|
*ngIf="fileDownloadStarted && !fileDownloadFinished"
|
|
>
|
|
<div class="bg-white shadow-lg rounded-lg p-6 flex flex-col items-center justify-center">
|
|
<div class="radial-progress mb-6" [style.--value]="downloadProgress" style="--size:12rem; --thickness: 2rem;" role="progressbar">{{ downloadProgress | number:'1.0-0' }}%</div>
|
|
<h3 class="text-xl font-bold text-center text-gray-800 mb-2">Downloading...</h3>
|
|
<p class="text-gray-600 text-center w-2/3 mb-6">Your file is being downloaded in the background. Please wait...</p>
|
|
<p class="text-gray-600 text-center w-2/3 mb-6">{{ downloadDuration }} seconds passed.</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
*ngIf="fileDownloadFinished"
|
|
>
|
|
<div class="bg-white shadow-lg rounded-lg p-6 flex flex-col items-center justify-center">
|
|
<img class="w-16 mb-6" src="./assets/circle-check-solid.svg" alt="Success">
|
|
<p class="text-xl font-bold text-center text-gray-800 mb-6">Download complete!</p>
|
|
<p class="text-gray-600 text-center w-2/3 mb-3">File {{ fileName }} has been downloaded and saved to your drive.</p>
|
|
<p class="text-gray-600 text-center w-2/3 mb-6">The download took {{ downloadDuration }} seconds.</p>
|
|
<button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4" >
|
|
Save to disk (again)
|
|
</button>
|
|
<button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4" routerLink="/home">
|
|
Back to home
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center justify-center">
|
|
<div *ngIf="fileDownloadStarted && !fileDownloadFinished" class="card w-96 bg-base-100 shadow-xl">
|
|
<div class="card-body flex flex-col items-center justify-center">
|
|
<h2 class="card-title text-center">Did you know?</h2>
|
|
<p class="text-center">{{ funfact }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<dialog #download_not_possible class="modal">
|
|
<div class="modal-box">
|
|
<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">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>
|
|
<div class="invisible h-0 w-0">
|
|
<img src="./assets/circle-check-solid.svg">
|
|
</div>
|