Implement password recovery feature with reset token and email notifications

FoodsharingSiegen.Server/Pages/ResetPassword.razor

@@ -0,0 +1,82 @@
+@page "/reset-password/{Token}"
+@using FoodsharingSiegen.Shared.Helper
+@layout LoginLayout
+
+@inherits FoodsharingSiegen.Server.BaseClasses.FsBase
+
+<PageTitle>@AppSettings.Terms.Title - Neues Passwort setzen</PageTitle>
+
+<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh; background-color: #f4f6f8;">
+    <div class="card shadow border-0" style="width: 100%; max-width: 420px; border-radius: 12px; margin: 1rem;">
+        
+        <div class="card-body p-4 p-md-5">
+            <div class="text-center mb-4">
+                <i class="fa-solid fa-leaf mb-3" style="font-size: 3rem; color: #64ae24;"></i>
+                <h4 class="font-weight-bold" style="color: #533a20;"><small style="font-size: .6em;">Einarbeitungen</small> @AppSettings.Terms.Title</h4>
+                <p class="text-muted">Neues Passwort festlegen</p>
+            </div>
+
+            @if (IsInitializing)
+            {
+                <div class="text-center mt-4">
+                    <i class="fas fa-spinner fa-spin fa-2x mb-3" style="color: #64ae24;"></i>
+                    <p>Token wird überprüft...</p>
+                </div>
+            }
+            else if (!IsTokenValid)
+            {
+                <div class="alert alert-danger text-center">
+                    <i class="fas fa-exclamation-triangle fa-2x mb-2 d-block"></i>
+                    Der Link zum Zurücksetzen des Passworts ist ungültig oder abgelaufen. Bitte fordere einen neuen an.
+                </div>
+                <div class="text-center mt-4">
+                    <a href="/forgot-password" class="btn btn-outline-primary w-100 mb-2"><i class="fas fa-redo mr-2"></i> Neuen Link anfordern</a>
+                    <a href="/login" class="btn btn-link w-100" style="color: #64ae24;">Zurück zum Login</a>
+                </div>
+            }
+            else if (IsSuccess)
+            {
+                <div class="alert alert-success text-center">
+                    Passwort erfolgreich aktualisiert. Du kannst dich jetzt anmelden.
+                </div>
+                <div class="text-center mt-4">
+                    <a href="/login" class="btn btn-outline-primary"><i class="fas fa-sign-in-alt mr-2"></i> Zum Login</a>
+                </div>
+            }
+            else
+            {
+                <Validation Validator="ValidationHelper.ValidatePassword" @bind-Status="@IsValidPassword">
+                    <Field>
+                        <FieldLabel>Neues Passwort</FieldLabel>
+                        <TextEdit @bind-Text="NewPassword" Role="TextRole.Password" Placeholder="Passwort (min. 8 Zeichen, min. 1 Zahl)" KeyUp="TextEdit_KeyUp" Size="Size.Large"></TextEdit>
+                    </Field>
+                </Validation>
+
+                <Validation Validator="ValidatePasswordConfirmation" @bind-Status="@IsValidPasswordConfirmation">
+                    <Field Class="mt-3">
+                        <FieldLabel>Passwort bestätigen</FieldLabel>
+                        <TextEdit @bind-Text="ConfirmPassword" Role="TextRole.Password" Placeholder="Passwort bestätigen" KeyUp="TextEdit_KeyUp" Size="Size.Large"></TextEdit>
+                    </Field>
+                </Validation>
+
+                @if (!string.IsNullOrEmpty(ErrorMessage))
+                {
+                    <div class="text-danger mt-3 text-center">
+                        <i class="fas fa-exclamation-triangle mr-1"></i> @ErrorMessage
+                    </div>
+                }
+
+                <Button Class="mt-4 w-100" Color="Color.Primary" Size="Size.Large" Clicked="SubmitReset" Disabled="@(IsValidPassword != ValidationStatus.Success || IsValidPasswordConfirmation != ValidationStatus.Success || IsLoading)">
+                    @if (IsLoading)
+                    {
+                        <i class="fas fa-spinner fa-spin mr-2"></i> <span>Speichern...</span>
+                    }
+                    else
+                    {
+                        <i class="fas fa-save mr-2"></i> <span>Passwort speichern</span>
+                    }
+                </Button>
+            }
+        </div>
+    </div>
+</div>