Enhance login page with improved UI and error handling for invalid credentials

This commit is contained in:
troogs
2026-04-18 01:57:31 +02:00
parent b7a7a8e078
commit 3687e573e0
2 changed files with 36 additions and 11 deletions

View File

@@ -4,24 +4,42 @@
@inherits FoodsharingSiegen.Server.BaseClasses.FsBase @inherits FoodsharingSiegen.Server.BaseClasses.FsBase
<PageTitle>@AppSettings.Terms.Title</PageTitle> <PageTitle>@AppSettings.Terms.Title - Login</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">Bitte melde dich an, um fortzufahren.</p>
</div>
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
<div class="card" style="width: 100%; max-width: 380px;">
<div class="card-header">@AppSettings.Terms.Title</div>
<div class="card-body">
<Validation Validator="ValidationHelper.ValidateMail" @bind-Status="@IsValidMail"> <Validation Validator="ValidationHelper.ValidateMail" @bind-Status="@IsValidMail">
<TextEdit @bind-Text="MailAddress" Role="TextRole.Email" Placeholder="E-Mail" Class="mt-0" KeyUp="TextEdit_KeyUp"></TextEdit> <Field>
<FieldLabel>E-Mail Adresse</FieldLabel>
<TextEdit @bind-Text="MailAddress" Role="TextRole.Email" Placeholder="E-Mail" KeyUp="TextEdit_KeyUp" Size="Size.Large"></TextEdit>
</Field>
</Validation> </Validation>
<Validation Validator="ValidationHelper.ValidatePassword" @bind-Status="@IsValidPassword"> <Validation Validator="ValidationHelper.ValidatePassword" @bind-Status="@IsValidPassword">
<TextEdit @bind-Text="Password" Role="TextRole.Password" Placeholder="Passwort" Class="my-3" KeyUp="TextEdit_KeyUp"></TextEdit> <Field Class="mt-3">
<FieldLabel>Passwort</FieldLabel>
<TextEdit @bind-Text="Password" Role="TextRole.Password" Placeholder="Passwort" KeyUp="TextEdit_KeyUp" Size="Size.Large"></TextEdit>
</Field>
</Validation> </Validation>
<div class="d-flex justify-content-center"> @if (!string.IsNullOrEmpty(LoginErrorMessage))
<Button Clicked="PerformLogin" Disabled="@(IsValidMail != ValidationStatus.Success || IsValidPassword != ValidationStatus.Success)">Einloggen</Button> {
<div class="text-danger mt-3 text-center">
<i class="fas fa-exclamation-triangle mr-1"></i> @LoginErrorMessage
</div> </div>
}
<Button Class="mt-4 w-100" Color="Color.Primary" Size="Size.Large" Clicked="PerformLogin" Disabled="@(IsValidMail != ValidationStatus.Success || IsValidPassword != ValidationStatus.Success)">
<i class="fas fa-sign-in-alt mr-2"></i> Einloggen
</Button>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -33,6 +33,11 @@ namespace FoodsharingSiegen.Server.Pages
/// </summary> /// </summary>
private string? Password { get; set; } private string? Password { get; set; }
/// <summary>
/// Gets or sets the login error message
/// </summary>
private string? LoginErrorMessage { get; set; }
#endregion #endregion
#region Private Method PerformLogin #region Private Method PerformLogin
@@ -42,12 +47,14 @@ namespace FoodsharingSiegen.Server.Pages
/// </summary> /// </summary>
private async Task PerformLogin() private async Task PerformLogin()
{ {
LoginErrorMessage = null;
//Todo Eingaben Validieren [04.04.22 - Andre Beging] //Todo Eingaben Validieren [04.04.22 - Andre Beging]
if (string.IsNullOrWhiteSpace(MailAddress) || string.IsNullOrWhiteSpace(Password)) if (string.IsNullOrWhiteSpace(MailAddress) || string.IsNullOrWhiteSpace(Password))
{ {
MailAddress = string.Empty; MailAddress = string.Empty;
Password = string.Empty; Password = string.Empty;
LoginErrorMessage = "E-Mail-Adresse oder Passwort ist ungültig.";
return; return;
} }
@@ -55,7 +62,7 @@ namespace FoodsharingSiegen.Server.Pages
if (loginR.Success) if (loginR.Success)
NavigationManager.NavigateTo("/", true); NavigationManager.NavigateTo("/", true);
else else
await Notification.Error(loginR.ErrorMessage)!; LoginErrorMessage = "E-Mail-Adresse oder Passwort ist ungültig.";
} }
#endregion #endregion