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

FoodsharingSiegen.Server/Pages/Login.razor

@@ -4,24 +4,42 @@
 
 @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">
-                <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 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>
 
-            <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>
+            }
 
+            <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>

FoodsharingSiegen.Server/Pages/Login.razor.cs

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

FoodsharingSiegen.Server/Pages/Settings.razor.cs

@@ -20,6 +20,7 @@ namespace FoodsharingSiegen.Server.Pages
                 NavigationManager.NavigateTo("/");
                 return;
             }
+            TestMailReceiver = CurrentUser.Mail ?? string.Empty;
             await Task.CompletedTask;
         }