Files
fs-onboarding/FoodsharingSiegen.Server/Pages/UploadVerification.razor
a.beging@eas-solutions.de b3212acf6d
All checks were successful
Build And Push Dev Docker Image / docker (push) Successful in 2m2s
Implement identity verification feature with image upload and token management
2026-04-20 15:54:17 +02:00

96 lines
4.7 KiB
Plaintext

@page "/verify/{Token:guid}"
@using FoodsharingSiegen.Contracts.Entity
@using System.IO
@layout LoginLayout
<div class="row min-vh-100 align-items-center justify-content-center p-0 p-md-5 m-0">
<div class="col-12 col-md-10 col-lg-8 col-xl-5 login-form p-2">
<div class="card shadow-sm border-0">
<div class="card-body p-3 p-md-5">
<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>
<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>
</div>
@if (_isLoading)
{
<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
{
<div class="alert alert-info mb-4">
<strong>Hinweis:</strong> Dies ist die Upload-Seite für den Foodsaver <b>@_prospect.FsId</b>.
</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>
</ul>
</div>
<div class="mb-4 text-center">
<span class="badge bg-secondary mb-2 text-wrap">Es können noch bis zu @(5 - _uploadedCount) Bilder hochgeladen werden</span>
@if (_uploadedCount >= 5)
{
<div class="alert alert-warning py-2 mb-0">Du hast die maximale Anzahl von 5 Bildern erreicht.</div>
}
else
{
<InputFile id="fileInput" OnChange="OnInputFileChange" class="d-none" accept="image/*" />
<label for="fileInput" class="btn btn-outline-success w-100">
<i class="fa-solid fa-images me-2"></i>Bild auswählen
</label>
}
</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>
}
@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 (_uploadedCount > 0)
{
<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. Du kannst diese Seite nun schließen.
</div>
}
}
</div>
</div>
</div>
</div>