Login Page

FoodsharingSiegen.Server/Pages/Login.razor

@@ -1,29 +1,26 @@
 @page "/login"
-@using FoodsharingSiegen.Server.Service
 @using FoodsharingSiegen.Server.Auth
 @layout LoginLayout
 
 @inject AuthService AuthService
 @inject NavigationManager NavigationManager
 
-@code
+<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
-{
+    <div class="card" style="width: 100%; max-width: 380px;">
-    private string? Mailaddress { get; set; }
+        <div class="card-header">FS Siegen</div>
+        <div class="card-body">
+            <Validation Validator="ValidateMail" @bind-Status="@IsValidMail">
+                <TextEdit @bind-Text="Mailaddress" Role="TextRole.Email" Placeholder="E-Mail" Class="mt-0" KeyUp="TextEdit_KeyUp"></TextEdit>
+            </Validation>
 
-    private string? Password { get; set; }
+            <Validation Validator="ValidatePassword" @bind-Status="@IsValidPassword">
+                <TextEdit @bind-Text="Password" Role="TextRole.Password" Placeholder="Passwort" Class="my-3" KeyUp="TextEdit_KeyUp"></TextEdit>
+            </Validation>
 
-    private async Task PerformLogin()
+            <div class="d-flex justify-content-center">
-    {
+                <Button Clicked="PerformLogin" Disabled="@(IsValidMail != ValidationStatus.Success || IsValidPassword != ValidationStatus.Success)">Einloggen</Button>
-    //Todo Eingaben Validieren [04.04.22 - Andre Beging]
+            </div>
 
-        var loginR = await AuthService.Login(Mailaddress, Password);
+        </div>
-        if (loginR.Success)
+    </div>
-        {
+</div>
-            NavigationManager.NavigateTo("/", true);
-        }
-    }
-}
-
-<TextEdit @bind-Text="Mailaddress" Placeholder="Mail"></TextEdit>
-<TextEdit @bind-Text="Password" Placeholder="Password"></TextEdit>
-<Button Clicked="PerformLogin">Go</Button>

FoodsharingSiegen.Server/Pages/Login.razor.cs

@@ -0,0 +1,123 @@
+using System.Text.RegularExpressions;
+using Blazorise;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace FoodsharingSiegen.Server.Pages
+{
+    /// <summary>
+    /// The login class (a. beging, 11.04.2022)
+    /// </summary>
+    public partial class Login
+    {
+        #region Public Properties
+
+        /// <summary>
+        /// Gets or sets the value of the is valid mail (ab)
+        /// </summary>
+        public ValidationStatus IsValidMail { get; set; }
+
+        /// <summary>
+        /// Gets or sets the value of the is valid password (ab)
+        /// </summary>
+        public ValidationStatus IsValidPassword { get; set; }
+
+        #endregion
+
+        #region Private Properties
+
+        /// <summary>
+        /// Gets or sets the value of the mailaddress (ab)
+        /// </summary>
+        private string? Mailaddress { get; set; }
+
+        /// <summary>
+        /// Gets or sets the value of the password (ab)
+        /// </summary>
+        private string? Password { get; set; }
+
+        #endregion
+
+        #region Private Method PerformLogin
+
+        /// <summary>
+        /// Performs the login (a. beging, 11.04.2022)
+        /// </summary>
+        private async Task PerformLogin()
+        {
+            //Todo Eingaben Validieren [04.04.22 - Andre Beging]
+
+            if (string.IsNullOrWhiteSpace(Mailaddress) || string.IsNullOrWhiteSpace(Password))
+            {
+                Mailaddress = string.Empty;
+                Password = string.Empty;
+                return;
+            }
+        
+            var loginR = await AuthService.Login(Mailaddress, Password);
+            if (loginR.Success)
+            {
+                NavigationManager.NavigateTo("/", true);
+            }
+        }
+
+        #endregion
+
+        #region Private Method TextEdit_KeyUp
+
+        /// <summary>
+        /// Texts the edit key up using the specified arg (a. beging, 11.04.2022)
+        /// </summary>
+        /// <param name="arg">The arg</param>
+        private async Task TextEdit_KeyUp(KeyboardEventArgs arg)
+        {
+            if (arg.Key == "Enter") await PerformLogin();
+        }
+
+        #endregion
+
+        #region Private Method ValidateMail
+
+        /// <summary>
+        /// Validates the mail using the specified args (a. beging, 11.04.2022)
+        /// </summary>
+        /// <param name="args">The args</param>
+        private void ValidateMail(ValidatorEventArgs args)
+        {
+            var email = Convert.ToString(args.Value);
+
+            if (string.IsNullOrWhiteSpace(email))
+            {
+                args.Status = ValidationStatus.None;
+                return;
+            }
+
+            var isMatch = Regex.IsMatch(email, "^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,6}$", RegexOptions.IgnoreCase);
+
+            args.Status = isMatch ? ValidationStatus.Success : ValidationStatus.Error;
+        }
+
+        #endregion
+
+        #region Private Method ValidatePassword
+
+        /// <summary>
+        /// Validates the password using the specified args (a. beging, 11.04.2022)
+        /// </summary>
+        /// <param name="args">The args</param>
+        private void ValidatePassword(ValidatorEventArgs args)
+        {
+            var password = Convert.ToString(args.Value);
+            if (string.IsNullOrWhiteSpace(password))
+            {
+                args.Status = ValidationStatus.None;
+                return;
+            }
+
+            var isValid = password.Length > 3;
+            
+            args.Status = isValid ? ValidationStatus.Success : ValidationStatus.Error;
+        }
+
+        #endregion
+    }
+}

FoodsharingSiegen.Server/Shared/LoginLayout.razor

@@ -4,8 +4,6 @@
 
 <div class="page">
     <main>
-        <article class="content px-4">
+        @Body
-            @Body
-        </article>
     </main>
 </div>