Bug #181 (1067 - Gitlab): login bug

COMET.Web.Common.Tests/Components/LoginTestFixture.cs

@@ -25,6 +25,8 @@
 
 namespace COMET.Web.Common.Tests.Components
 {
+    using AngleSharp.Dom;
+
     using Bunit;
 
     using COMET.Web.Common.Components;
@@ -36,8 +38,9 @@
     using COMET.Web.Common.ViewModels.Components;
 
     using Microsoft.AspNetCore.Components.Forms;
+    using Microsoft.AspNetCore.Components.Web;
     using Microsoft.Extensions.DependencyInjection;
-
+    using Microsoft.JSInterop;
     using Moq;
 
     using NUnit.Framework;
@@ -70,6 +73,36 @@
             this.context.CleanContext();
         }
 
+        [Test]
+        public async Task VerifyFocusingAndBluring()
+        {
+            var renderer = this.context.RenderComponent<Login>();
+
+            Assert.That(renderer.Instance.FieldsFocusedStatus, Is.EqualTo(new Dictionary<string, bool>()
+            {
+                { "SourceAddress", false },
+                { "UserName", false },
+                { "Password", false }
+            }));
+
+            Assert.IsFalse(renderer.Instance.FieldsFocusedStatus["UserName"]);
+            const string fieldToFocusOn = "Username";
+
+            renderer.Instance.HandleFieldFocus(fieldToFocusOn);
+
+            foreach (var fieldStatus in renderer.Instance.FieldsFocusedStatus)
+            {
+                Assert.That(fieldStatus.Value, fieldStatus.Key == fieldToFocusOn ? Is.True : Is.False);
+            }
+
+            renderer.Instance.HandleFieldBlur(fieldToFocusOn);
+
+            foreach (var fieldStatus in renderer.Instance.FieldsFocusedStatus)
+            {
+                Assert.That(fieldStatus.Value, Is.False);
+            }
+        }
+
         [Test]
         public async Task VerifyPerformLogin()
         {
@@ -79,6 +112,13 @@
             this.authenticationService.Setup(x => x.Login(It.IsAny<AuthenticationDto>()))
                 .ReturnsAsync(AuthenticationStateKind.ServerFail);
 
+            Assert.That(renderer.Instance.FieldsFocusedStatus, Is.EqualTo(new Dictionary<string, bool>()
+            {
+                { "SourceAddress", false },
+                { "UserName", false },
+                { "Password", false }
+            }));
+
             await renderer.InvokeAsync(editForm.Instance.OnValidSubmit.InvokeAsync);
 
             Assert.Multiple(() =>

COMET.Web.Common/Components/Login.razor

@@ -24,35 +24,69 @@
 
 <EditForm Context="editFormContext" Model="@(this.ViewModel.AuthenticationDto)" OnValidSubmit="this.ExecuteLogin">
 	<DataAnnotationsValidator/>
-	<DxFormLayout CaptionPosition="CaptionPosition.Vertical">
-		@if (string.IsNullOrEmpty(this.ViewModel.serverConnectionService.ServerAddress))
-		{
-			<DxFormLayoutItem Caption="Source Address:" ColSpanLg="12">
-				<Template>
-					<DxTextBox Id="sourceaddress" @bind-Text="@(this.ViewModel.AuthenticationDto.SourceAddress)"
-							   ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
-							   NullText="Enter the url for the server"
-							   Enabled="@string.IsNullOrEmpty(this.RequestedServer)" />
-				</Template>
-			</DxFormLayoutItem>
-		}
-		<DxFormLayoutItem Caption="UserName:" BeginRow="true" ColSpanLg="12">
-			<Template>
-				<DxTextBox Id="username" @bind-Text="@(this.ViewModel.AuthenticationDto.UserName)"
-				           ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
-				           NullText="Enter your username"/>
-			</Template>
-		</DxFormLayoutItem>
-		<DxFormLayoutItem Caption="Password:" BeginRow="true" ColSpanLg="12">
-			<Template>
-				<DxTextBox Id="password" @bind-Text="@(this.ViewModel.AuthenticationDto.Password)"
-				           ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
-				           NullText="Enter your password"
-				           Password="true"/>
-			</Template>
-		</DxFormLayoutItem>
-	</DxFormLayout>
-	<ValidationSummary/>
+    <DxFormLayout CaptionPosition="CaptionPosition.Vertical">
+        @if (string.IsNullOrEmpty(this.ViewModel.serverConnectionService.ServerAddress))
+        {
+            <DxFormLayoutItem Caption="Source Address:" ColSpanLg="12">
+                <Template>
+                    <DxTextBox Id="sourceaddress" @bind-Text="@(this.ViewModel.AuthenticationDto.SourceAddress)"
+                               ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
+                               NullText="Enter the url for the server"
+                               BindValueMode="BindValueMode.OnInput"
+                               @onfocus="@(() => this.HandleFieldFocus("SourceAddress"))"
+                               @onblur="@(() => this.HandleFieldBlur("SourceAddress"))"
+                               Enabled="@string.IsNullOrEmpty(this.RequestedServer)" />
+                </Template>
+            </DxFormLayoutItem>
+        }
+        <DxFormLayoutItem Caption="UserName:" BeginRow="true" ColSpanLg="12">
+            <Template>
+                <DxTextBox Id="username" @bind-Text="@(this.ViewModel.AuthenticationDto.UserName)"
+                           ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
+                           NullText="Enter your username"
+                           BindValueMode="BindValueMode.OnInput"
+                           @onfocus="@(() => this.HandleFieldFocus("UserName"))"
+                           @onblur="@(() => this.HandleFieldBlur("UserName"))" />
+            </Template>
+        </DxFormLayoutItem>
+        <DxFormLayoutItem Caption="Password:" BeginRow="true" ColSpanLg="12">
+            <Template>
+                <DxTextBox Id="password" @bind-Text="@(this.ViewModel.AuthenticationDto.Password)"
+                           ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
+                           NullText="Enter your password"
+                           BindValueMode="BindValueMode.OnInput"
+                           @onfocus="@(() => this.HandleFieldFocus("Password"))"
+                           @onblur="@(() => this.HandleFieldBlur("Password"))"
+                           Password="true"/>
+            </Template>
+        </DxFormLayoutItem>
+    </DxFormLayout>
+
+    <ul class="validation-errors">
+        @foreach (var fieldFocusedStatus in this.fieldsFocusedStatus)
+        {
+            if (fieldFocusedStatus.Value)
+            {
+                continue;
+            }
+
+            @if (fieldFocusedStatus.Key == "SourceAddress" && !string.IsNullOrEmpty(editFormContext.GetValidationMessages(() => this.ViewModel.AuthenticationDto.SourceAddress).FirstOrDefault()))
+            {
+                <li class="validation-message"><ValidationMessage For="() => this.ViewModel.AuthenticationDto.SourceAddress" /></li>
+            }
+
+            @if (fieldFocusedStatus.Key == "UserName" && !string.IsNullOrEmpty(editFormContext.GetValidationMessages(() => this.ViewModel.AuthenticationDto.UserName).FirstOrDefault()))
+            {
+                <li class="validation-message"><ValidationMessage For="() => this.ViewModel.AuthenticationDto.UserName" /></li>
+            }
+
+            @if (fieldFocusedStatus.Key == "Password" && !string.IsNullOrEmpty(editFormContext.GetValidationMessages(() => this.ViewModel.AuthenticationDto.Password).FirstOrDefault()))
+            {
+                <li class="validation-message"><ValidationMessage For="() => this.ViewModel.AuthenticationDto.Password" /></li>
+            }
+        }
+    </ul>
+
 
 	@if (!string.IsNullOrEmpty(this.ErrorMessage))
 	{

COMET.Web.Common/Components/Login.razor.cs

@@ -29,6 +29,7 @@ namespace COMET.Web.Common.Components
     using COMET.Web.Common.ViewModels.Components;
 
     using Microsoft.AspNetCore.Components;
+    using Microsoft.AspNetCore.Components.Web;
 
     using ReactiveUI;
 
@@ -64,6 +65,20 @@ public partial class Login
         /// </summary>
         public bool LoginEnabled { get; set; } = true;
 
+        /// <summary>
+        /// The dictionary of focus status from the fields, used by blazor component
+        /// </summary>
+        private Dictionary<string, bool> fieldsFocusedStatus;
+
+        /// <summary>
+        /// The dictionary of focus status from the fields
+        /// </summary>
+        public Dictionary<string, bool> FieldsFocusedStatus
+        {
+            get => this.fieldsFocusedStatus;
+            private set => this.fieldsFocusedStatus = value;
+        }
+
         /// <summary>
         /// Method invoked when the component is ready to start, having received its
         /// initial parameters from its parent in the render tree.
@@ -72,6 +87,13 @@ protected override void OnInitialized()
         {
             base.OnInitialized();
 
+            this.fieldsFocusedStatus = new Dictionary<string, bool>()
+            {
+                { "SourceAddress", false },
+                { "UserName", false },
+                { "Password", false }
+            };
+
             this.Disposables.Add(this.WhenAnyValue(x => x.ViewModel.AuthenticationState)
                 .Subscribe(_ => this.ComputeDisplayProperties()));
         }
@@ -120,5 +142,23 @@ private async Task ExecuteLogin()
             await this.ViewModel.ExecuteLogin();
             this.LoginEnabled = true;
         }
+
+        /// <summary>
+        /// Handles the focus event of the given fieldName
+        /// </summary>
+        /// <param name="fieldName">Form field name, as indexed in <see cref="FieldsFocusedStatus"/></param>
+        public void HandleFieldFocus(string fieldName)
+        {
+            this.fieldsFocusedStatus[fieldName] = true; // Set the field as focused
+        }
+
+        /// <summary>
+        /// Handles the blur event of the given fieldName
+        /// </summary>
+        /// <param name="fieldName">Form field name, as indexed in <see cref="FieldsFocusedStatus"/></param>
+        public void HandleFieldBlur(string fieldName)
+        {
+            this.fieldsFocusedStatus[fieldName] = false; // Set the field as not focused when it loses focus
+        }
     }
 }