Submit login & register forms on Enter key press

TaikoWebUI/Pages/Login.razor

@@ -3,8 +3,10 @@
 @inject AuthService AuthService
 @inject NavigationManager NavigationManager
 @inject BreadcrumbsStateContainer BreadcrumbsStateContainer
+@inject IKeyInterceptorFactory KeyInterceptorFactory
 
 @page "/Login"
+@using MudBlazor.Services
 
 
 @if (!AuthService.IsLoggedIn)
@@ -21,13 +23,14 @@
                         <MudForm @ref="loginForm">
                             <div style="display:flex;flex-direction:column;gap:15px;">
                                 <MudTextField @bind-value="inputAccessCode" InputType="InputType.Text" T="string"
-                                                FullWidth="true" Required="@true" RequiredError="Access code is required"
+                                              FullWidth="true" Required="@true" OnKeyUp="HandleKeyDown"
+                                              RequiredError="Access code is required"
                                               Label=@Localizer["Access Code"] Variant="Variant.Outlined" Margin="Margin.Dense" />
                                 <MudTextField @bind-Value="inputPassword" InputType="InputType.Password"
-                                                T="string" FullWidth="true" Required="@true"
+                                              T="string" FullWidth="true" Required="@true" OnKeyUp="HandleKeyDown"
                                               RequiredError="Password is required"
                                               Label=@Localizer["Password"] Variant="Variant.Outlined" Margin="Margin.Dense" />
-                                <MudButton OnClick="OnLogin" FullWidth="true" StartIcon="@Icons.Material.Filled.Login" Color="Color.Primary" Variant="Variant.Filled">@Localizer["Log In"]</MudButton>
+                                <MudButton OnClick="Submit" FullWidth="true" StartIcon="@Icons.Material.Filled.Login" Color="Color.Primary" Variant="Variant.Filled">@Localizer["Log In"]</MudButton>
                             </div>
                         </MudForm>
                     </MudCardContent>
@@ -35,7 +38,8 @@
             </MudItem>
         </MudGrid>
     </MudContainer>
-} else
+}
+else
 {
     // Already logged in, redirect to Dashboard
     NavigationManager.NavigateTo("/");

TaikoWebUI/Pages/Login.razor.cs

@@ -1,10 +1,14 @@
-namespace TaikoWebUI.Pages;
+using MudBlazor.Services;
+using static MudBlazor.CategoryTypes;
+
+namespace TaikoWebUI.Pages;
 
 public partial class Login
 {
     private string inputAccessCode = "";
     private MudForm loginForm = default!;
     private string inputPassword = "";
+    bool debounce = false;
 
     protected override async Task OnInitializedAsync()
     {
@@ -22,6 +26,7 @@ public partial class Login
 
     private async Task OnLogin()
     {
+        debounce = true;
         var result = await AuthService.Login(inputAccessCode, inputPassword);
         var options = new DialogOptions { DisableBackdropClick = true };
         switch (result)
@@ -66,4 +71,27 @@ public partial class Login
                 break;
         }
     }
+
+    internal void HandleKeyDown(KeyboardEventArgs args)
+    {
+        if (debounce) { debounce = !debounce; return; }
+        switch (args.Key)
+        {
+            case "Enter":
+                _ = Submit();
+                break;
+        }
+    }
+
+    private async Task Submit()
+    {
+        if (loginForm != null)
+        {
+            await loginForm.Validate();
+            if (loginForm.IsValid)
+            {
+                await OnLogin();
+            }
+        }
+    }
 }

TaikoWebUI/Pages/Register.razor

@@ -27,27 +27,28 @@ else
                     <MudCardContent>
                         <MudForm @ref="registerForm">
                             <div style="display:flex;flex-direction:column;gap:15px;">
-                            <MudTextField @bind-value="accessCode" InputType="InputType.Text" T="string"
+                                <MudTextField @bind-value="AccessCode" InputType="InputType.Text" T="string"
-                                          FullWidth="true" Required="@true" RequiredError=@Localizer["Access Code is required"]
+                                              FullWidth="true" Required="@true" OnKeyUp="HandleKeyDown"
+                                              RequiredError=@Localizer["Access Code is required"]
                                               Label=@Localizer["Access Code"] Variant="Variant.Outlined" Margin="Margin.Dense" />
                                 @if (AuthService.RegisterWithLastPlayTime)
                                 {
                                     <MudTextField @bind-value="inviteCode" InputType="InputType.Text" T="string"
-                                              FullWidth="true" Label=@Localizer["Invite Code (Optional)"]/>
+                                                  FullWidth="true" Label=@Localizer["Invite Code (Optional)"] />
                                     <MudDatePicker @ref="datePicker" Label=@Localizer["Last Play Date"] @bind-Date="date" AutoClose="true" Variant="Variant.Outlined" Margin="Margin.Dense" />
                                     <MudTimePicker @ref="timePicker" AmPm="true" Label=@Localizer["Last Play Time(5 Min Around Credit End)"] @bind-Time="time" AutoClose="true" Variant="Variant.Outlined" Margin="Margin.Dense" />
                                 }
-                            <MudTextField @bind-Value="password" InputType="InputType.Password"
+                                <MudTextField @bind-Value="Password" InputType="InputType.Password"
-                                          T="string" FullWidth="true" Required="@true"
+                                              T="string" FullWidth="true" Required="@true" OnKeyUp="HandleKeyDown"
                                               RequiredError=@Localizer["Password is Required"]
                                               Label=@Localizer["Password"] Variant="Variant.Outlined" Margin="Margin.Dense">
                                 </MudTextField>
-                            <MudTextField @bind-Value="confirmPassword" InputType="InputType.Password"
+                                <MudTextField @bind-Value="ConfirmPassword" InputType="InputType.Password"
-                                          T="string" FullWidth="true" Required="@true"
+                                              T="string" FullWidth="true" Required="@true" OnKeyUp="HandleKeyDown"
                                               RequiredError=@Localizer["Confirm Password is Required"]
                                               Label=@Localizer["Confirm Password"] Variant="Variant.Outlined" Margin="Margin.Dense">
                                 </MudTextField>
-                            <MudButton OnClick="OnRegister" FullWidth="true" StartIcon="@Icons.Material.Filled.AddCard" Color="Color.Primary" Variant="Variant.Filled">@Localizer["Register"]</MudButton>
+                                <MudButton OnClick="Submit" FullWidth="true" StartIcon="@Icons.Material.Filled.AddCard" Color="Color.Primary" Variant="Variant.Filled">@Localizer["Register"]</MudButton>
                             </div>
                         </MudForm>
                     </MudCardContent>

TaikoWebUI/Pages/Register.razor.cs

@@ -1,10 +1,19 @@
-namespace TaikoWebUI.Pages;
+using System.ComponentModel.DataAnnotations;
+
+namespace TaikoWebUI.Pages;
 
 public partial class Register
 {
-    private string accessCode = "";
+    [Required]
-    private string confirmPassword = "";
+    private string AccessCode { get; set; } = "";
-    private string password = "";
+
+    [Required]
+    private string Password { get; set; } = "";
+
+    [Required]
+    [Compare(nameof(Password))]
+    private string ConfirmPassword { get; set; } = "";
+
     private MudForm registerForm = default!;
 
     private MudDatePicker datePicker = new();
@@ -12,6 +21,7 @@ public partial class Register
     private DateTime? date = DateTime.Today;
     private TimeSpan? time = new TimeSpan(00, 45, 00);
     private string inviteCode = "";
+    bool debounce = false;
 
     protected override async Task OnInitializedAsync()
     {
@@ -24,8 +34,9 @@ public partial class Register
 
     private async Task OnRegister()
     {
+        debounce = true;
         var inputDateTime = date!.Value.Date + time!.Value;
-        var result = await AuthService.Register(accessCode, inputDateTime, password, confirmPassword, inviteCode);
+        var result = await AuthService.Register(AccessCode, inputDateTime, Password, ConfirmPassword, inviteCode);
         var options = new DialogOptions { DisableBackdropClick = true };
         switch (result)
         {
@@ -71,7 +82,7 @@ public partial class Register
                 await DialogService.ShowMessageBox(
                     Localizer["Error"],
                     (MarkupString)
-                    (string) Localizer["Register Wrong Last Play Time Error"],
+                    (string)Localizer["Register Wrong Last Play Time Error"],
                     Localizer["Dialog OK"], null, null, options);
                 break;
             case 6:
@@ -82,4 +93,27 @@ public partial class Register
                 break;
         }
     }
+
+    internal void HandleKeyDown(KeyboardEventArgs args)
+    {
+        if (debounce) { debounce = !debounce; return; }
+        switch (args.Key)
+        {
+            case "Enter":
+                _ = Submit();
+                break;
+        }
+    }
+
+    private async Task Submit()
+    {
+        if (registerForm != null)
+        {
+            await registerForm.Validate();
+            if (registerForm.IsValid)
+            {
+                await OnRegister();
+            }
+        }
+    }
 }