Refactor UploadVerification page: improve layout, loading indicators, and user instructions for better clarity and usability
This commit is contained in:
a.beging@eas-solutions.de
@@ -11,96 +11,113 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@if (_isLoading)
|
|
||||||
{
|
|
||||||
<div class="text-center my-5">
|
|
||||||
<div class="spinner-border text-success" role="status">
|
|
||||||
<span class="visually-hidden">Laden...</span>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="mt-3 text-muted">Lade Daten...</p>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
else if (_prospect == null)
|
|
||||||
{
|
|
||||||
<div class="alert alert-danger" role="alert">
|
|
||||||
<i class="fa-solid fa-triangle-exclamation me-2"></i> @(_message ?? "Der Link ist ungültig oder abgelaufen. Bitte fordere einen neuen Link an.")
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<div class="alert alert-info mb-4">
|
|
||||||
<strong>Hinweis:</strong> Dies ist die Upload-Seite für Foodsaver <b>@_prospect.FsId</b>.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-3 text-center">
|
@if (_isLoading)
|
||||||
|
|
||||||
@if (_uploadedCount >= 5)
|
|
||||||
{
|
{
|
||||||
<div class="alert alert-warning py-2 mb-0">Du hast die maximale Anzahl von 5 Bildern erreicht.</div>
|
<div class="text-center my-5">
|
||||||
|
<div class="spinner-border text-success" role="status">
|
||||||
|
<span class="visually-hidden">Laden...</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-3 text-muted">Lade Daten...</p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
else if (_prospect == null)
|
||||||
|
{
|
||||||
|
<div class="alert alert-danger" role="alert">
|
||||||
|
<i class="fa-solid fa-triangle-exclamation me-2"></i> @(_message ?? "Der Link ist ungültig oder abgelaufen. Bitte fordere einen neuen Link an.")
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<InputFile id="fileInput" OnChange="OnInputFileChange" class="d-none" accept="image/*" />
|
<div class="alert alert-info mb-4">
|
||||||
<label for="fileInput" class="btn btn-outline-success w-100" style="height: 5rem;">
|
<strong>Hinweis:</strong> Dies ist die Upload-Seite für Foodsaver <b>@_prospect.FsId</b>.
|
||||||
<i class="fa-solid fa-images me-2"></i>Bild auswählen
|
|
||||||
</label>
|
|
||||||
<span class="badge bg-secondary mt-2 text-wrap">Es können noch bis zu @(5 - _uploadedCount) Bilder hochgeladen werden</span>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-4">
|
|
||||||
<h5 class="fw-bold">Anleitung:</h5>
|
|
||||||
<ul class="text-muted">
|
|
||||||
<li>Lade hier die Vorder- und Rückseite deines Personalausweises oder Reisepasses hoch</li>
|
|
||||||
<li>Dein Name und Adresse müssen gut und lesbar erkennbar sein</li>
|
|
||||||
<li>Wir nutzen diese Bilder ausschließlich zur Identitätsprüfung</li>
|
|
||||||
<li>Ausschließlich die Botschafter haben Zugriff auf diese Bilder</li>
|
|
||||||
<li>Die Bilder werden nach der Überprüfung sofort und unwiderruflich von uns gelöscht</li>
|
|
||||||
<li>Bereits hochgeladene Bilder werden hier hier aus Datenschutzgründen nicht angezeigt</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@if (_isUploading)
|
|
||||||
{
|
|
||||||
<div class="text-center my-3">
|
|
||||||
<div class="spinner-border text-primary spinner-border-sm" role="status">
|
|
||||||
<span class="visually-hidden">Laden...</span>
|
|
||||||
</div>
|
</div>
|
||||||
<span class="ms-2">Bilder werden hochgeladen und verarbeitet...</span>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
@if (!string.IsNullOrEmpty(_message))
|
<div class="mb-3 text-center">
|
||||||
{
|
|
||||||
<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)
|
@if (_uploadedCount >= 5)
|
||||||
{
|
{
|
||||||
<div class="alert alert-success text-center">
|
<div class="alert alert-warning py-2 mb-0">Du hast die maximale Anzahl von 5 Bildern erreicht.</div>
|
||||||
<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.
|
else
|
||||||
|
{
|
||||||
|
<InputFile id="fileInput" OnChange="OnInputFileChange" class="d-none" accept="image/*" />
|
||||||
|
<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
|
||||||
|
</label>
|
||||||
|
}
|
||||||
|
</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">
|
||||||
|
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 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>.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-4">
|
||||||
|
<h5 class="fw-bold">Anleitung:</h5>
|
||||||
|
<ul class="text-muted">
|
||||||
|
<li>Lade hier die Vorder- und Rückseite deines Personalausweises oder Reisepasses hoch</li>
|
||||||
|
<li>Dein Name und Adresse müssen gut und lesbar erkennbar sein</li>
|
||||||
|
<li>Wir nutzen diese Bilder ausschließlich zur Identitätsprüfung</li>
|
||||||
|
<li>Ausschließlich die Botschafter haben Zugriff auf diese Bilder</li>
|
||||||
|
<li>Die Bilder werden nach der Überprüfung sofort und unwiderruflich von uns gelöscht</li>
|
||||||
|
<li>Bereits hochgeladene Bilder werden hier hier aus Datenschutzgründen nicht angezeigt</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (_isUploading)
|
||||||
|
{
|
||||||
|
<div class="text-center my-3">
|
||||||
|
<div class="spinner-border text-primary spinner-border-sm" role="status">
|
||||||
|
<span class="visually-hidden">Laden...</span>
|
||||||
|
</div>
|
||||||
|
<span class="ms-2">Bilder werden hochgeladen und verarbeitet...</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
</div>
|
||||||
}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user