troogs/fs-onboarding
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor UploadVerification page: improve layout, loading indicators, and user instructions for better clarity and usability

Browse Source
This commit is contained in:
a.beging@eas-solutions.de
2026-04-24 13:45:03 +02:00
parent 781da32796
commit 954d57b7a6
1 changed files with 98 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
FoodsharingSiegen.Server/Pages/UploadVerification.razor
View File

@@ -11,8 +11,10 @@
<div class="card-body p-3 p-md-5"> <div class="card-body p-3 p-md-5">
<div class="text-center mb-4"> <div class="text-center mb-4">
<h5 class="mb-0 text-success d-block d-sm-none"><i class="fa-solid fa-address-card me-2"></i><br>Identitätsprüfung</h5> <h5 class="mb-0 text-success d-block d-sm-none"><i
<h4 class="mb-0 text-success d-none d-sm-block"><i class="fa-solid fa-address-card me-2"></i>Identitätsprüfung</h4> class="fa-solid fa-address-card me-2"></i><br>Identitätsprüfung</h5>
<h4 class="mb-0 text-success d-none d-sm-block"><i
class="fa-solid fa-address-card me-2"></i>Identitätsprüfung</h4>
<p class="text-muted mt-2">@(AppSettings.Value.Terms.Title)</p> <p class="text-muted mt-2">@(AppSettings.Value.Terms.Title)</p>
</div> </div>
@@ -50,16 +52,47 @@
<label for="fileInput" class="btn btn-outline-success w-100" style="height: 5rem;"> <label for="fileInput" class="btn btn-outline-success w-100" style="height: 5rem;">
<i class="fa-solid fa-images me-2"></i>Bild auswählen <i class="fa-solid fa-images me-2"></i>Bild auswählen
</label> </label>
<span class="badge bg-secondary mt-2 text-wrap">Es können noch bis zu @(5 - _uploadedCount) Bilder hochgeladen werden</span>
} }
</div> </div>
@if (!string.IsNullOrEmpty(_message))
{
<div class="alert alert-@(_isSuccess ? "success" : "danger") alert-dismissible fade show" role="alert">
@_message
<button type="button" class="btn-close" @onclick="() => _message = null"></button>
</div>
}
@if (_isSuccess)
{
<div class="alert alert-success text-center">
<i class="fa-solid fa-check-circle fa-2x mb-2"></i><br />
Vielen Dank für den Upload. Wenn du alle benötigten Bilder hochgeladen hast, kannst du die Seite
schließen. Du musst nichts weiter tun.
</div>
}
@if (_uploadedCount < 5)
{
<div class="text-center mb-3">
<span class="badge bg-secondary text-wrap">Es können noch bis zu @(5 - _uploadedCount) Bilder
hochgeladen werden</span>
</div>
}
<div class="mb-1 text-muted"> <div class="mb-1 text-muted">
Um dich auf der Foodsharing-Plattform als Foodsaver freischalten zu können, muss ein*e Botschafter*in Name, Adresse und Geburtsdatum im Profil des Foodsavers auf Korrektheit durch Vergleich mit einem Ausweisdokument prüfen. Das ist wichtig, damit die <a href="https://wiki.foodsharing.network/wiki/Rechtsvereinbarung" target="_blank">Rechtsvereinbarung</a> Bestand hat und wir die Zusagen erfüllen, die wir den Spenderbetrieben geben.<br> Um dich auf der Foodsharing-Plattform als Foodsaver freischalten zu können, muss ein*e
Botschafter*in Name, Adresse und Geburtsdatum im Profil des Foodsavers auf Korrektheit durch
Vergleich mit einem Ausweisdokument prüfen. Das ist wichtig, damit die <a
href="https://wiki.foodsharing.network/wiki/Rechtsvereinbarung"
target="_blank">Rechtsvereinbarung</a> Bestand hat und wir die Zusagen erfüllen, die wir den
Spenderbetrieben geben.<br>
</div> </div>
<div class="mb-3 text-muted"> <div class="mb-3 text-muted">
<a class="mt-3" href="https://wiki.foodsharing.network/wiki/Foodsaver#3.4_Verifizierung_(der_Daten),_Foodsaver-Ausweis_und_Freischaltung" target="_blank">Mehr dazu im Wiki</a>. <a class="mt-3"
href="https://wiki.foodsharing.network/wiki/Foodsaver#3.4_Verifizierung_(der_Daten),_Foodsaver-Ausweis_und_Freischaltung"
target="_blank">Mehr dazu im Wiki</a>.
</div> </div>
<div class="mb-4"> <div class="mb-4">
@@ -83,24 +116,8 @@
<span class="ms-2">Bilder werden hochgeladen und verarbeitet...</span> <span class="ms-2">Bilder werden hochgeladen und verarbeitet...</span>
</div> </div>
} }
@if (!string.IsNullOrEmpty(_message))
{
<div class="alert alert-@(_isSuccess ? "success" : "danger") alert-dismissible fade show" role="alert">
@_message
<button type="button" class="btn-close" @onclick="() => _message = null"></button>
</div>
}
@if (_isSuccess)
{
<div class="alert alert-success text-center">
<i class="fa-solid fa-check-circle fa-2x mb-2"></i><br/>
Vielen Dank für den Upload. Wenn du alle benötigten Bilder hochgeladen hast, kannst du die Seite schließen. Du musst nichts weiter tun.
</div>
}
} }
</div> </div>
</div> </div>
</div> </div>
</div> </div>