Max665/sharepulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added password field

Browse Source 
- Added download error modal
- Added password field show logic
- Redesigned UI
This commit is contained in:
Max W.
2024-02-17 00:14:43 +01:00
parent 374d4dc40d
commit f30961f1f0
5 changed files with 83 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/app/download/download.component.html
View File

@ -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>