Added file details display

- Added password generator logic to backend
- Added UI for file details
This commit is contained in:
2024-02-16 17:27:06 +01:00
parent 58e3dd0af5
commit 43e0eb1766
6 changed files with 95 additions and 37 deletions

View File

@ -59,43 +59,51 @@
<h3 class="text-lg font-semibold mt-3">File uploaded successfully!</h3>
<div class="flex flex-wrap mt-5 mb-5">
<div class="flex flex-wrap mt-5 mb-5" *ngIf="uploadData && fileUrls">
<div class="w-full px-4">
<div class="grid grid-cols-2 gap-4 items-center">
<div class="text-gray-600 text-right">File Name:</div>
<div>{{uploadData.fileName}}</div>
<div class="text-gray-600 text-right">Is password protected:</div>
<label class="flex items-center space-x-2">
<!-- Use property binding to set checked based on uploadData.passwordProtected -->
<input type="checkbox" class="checkbox checkbox-primary" [checked]="uploadData.passwordProtected" (click)="$event.preventDefault()"/>
<span>{{uploadData.passwordProtected ? 'Yes' : 'No'}}</span>
</label>
<div class="text-gray-600 text-right">Is single download:</div>
<label class="flex items-center space-x-2">
<!-- Use property binding to set checked based on uploadData.singleDownload -->
<input type="checkbox" class="checkbox checkbox-primary" [checked]="uploadData.singleDownload" (click)="$event.preventDefault()"/>
<span>{{uploadData.singleDownload ? 'Yes' : 'No'}}</span>
</label>
<div class="text-gray-600 text-right">Download Password:</div>
<div>{{uploadData.password || 'N/A'}}</div>
<div class="text-gray-600 text-right">File ID:</div>
<div>166554</div>
<div>{{uploadData.fileId}}</div>
<div class="text-gray-600 text-right">Material:</div>
<div>Aluminum & Plastic</div>
<!-- Assuming you have properties for downloadURL and statusURL -->
<div class="text-gray-600 text-right">Download URL:</div>
<div><a href="{{fileUrls.downloadUrl}}" target="_blank">{{fileUrls.downloadUrl}}</a></div>
<div class="text-gray-600 text-right">Color:</div>
<div>Black/Silver</div>
<div class="text-gray-600 text-right">Dimensions:</div>
<div>15 x 15 x 25 cm</div>
<div class="text-gray-600 text-right">Weight:</div>
<div>1.2 kg</div>
<div class="text-gray-600 text-right">Power:</div>
<div>10W LED (included)</div>
<div class="text-gray-600 text-right">Brightness:</div>
<div>700 lumens</div>
<div class="text-gray-600 text-right">Warranty:</div>
<div>2 years</div>
<div class="text-gray-600 text-right">File Status URL:</div>
<div><a href="{{fileUrls.statusUrl}}" target="_blank">{{fileUrls.statusUrl}}</a></div>
</div>
</div>
</div>
<p class="text-sm text-gray-500 mt-1">Your file is now securely stored on our servers.</p>
<div class="mt-4 flex flex-col w-full items-center">
<button class="btn btn-primary w-full max-w-xs">Upload Another File</button>
<button class="btn btn-outline btn-secondary mt-2 w-full max-w-xs">Download a file</button>
<button class="btn btn-success w-full max-w-xs text-white">Copy URL</button>
<button class="btn btn-primary mt-2 w-full max-w-xs">Upload Another File</button>
<button class="btn btn-outline btn-secondary mt-2 w-full max-w-xs">Delete this file</button>
</div>
<a href="#" class="link link-primary mt-4">Manage your uploads</a>
</div>