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

FoodsharingSiegen.Server/Pages/UploadVerification.razor

@@ -11,8 +11,10 @@
             <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>                  
+                    <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>
                         </div>
@@ -50,16 +52,47 @@
                                     <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>
-                            <span class="badge bg-secondary mt-2 text-wrap">Es können noch bis zu @(5 - _uploadedCount) Bilder hochgeladen werden</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 (_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>
+                                    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>.
+                                    <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">
@@ -83,22 +116,6 @@
                                         <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 (_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>