1
0
mirror of synced 2025-02-07 07:01:16 +01:00

Submit login & register forms on Enter key press

This commit is contained in:
Farewell_ 2024-10-31 10:34:00 +01:00
parent 505b867e1a
commit 2c0f43717b
4 changed files with 107 additions and 40 deletions

View File

@ -3,11 +3,13 @@
@inject AuthService AuthService
@inject NavigationManager NavigationManager
@inject BreadcrumbsStateContainer BreadcrumbsStateContainer
@inject IKeyInterceptorFactory KeyInterceptorFactory
@page "/Login"
@using MudBlazor.Services
@if (!AuthService.IsLoggedIn)
@if (!AuthService.IsLoggedIn)
{
// Not logged in, show login form
<MudContainer>
@ -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"
Label=@Localizer["Access Code"] Variant="Variant.Outlined" Margin="Margin.Dense" />
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"
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>
T="string" FullWidth="true" Required="@true" OnKeyUp="HandleKeyDown"
RequiredError="Password is required"
Label=@Localizer["Password"] Variant="Variant.Outlined" Margin="Margin.Dense" />
<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("/");

View File

@ -1,15 +1,19 @@
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()
{
await base.OnInitializedAsync();
if (AuthService.LoginRequired && !AuthService.IsLoggedIn)
{
await AuthService.LoginWithAuthToken();
@ -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();
}
}
}
}

View File

@ -12,8 +12,8 @@
}
else if (AuthService.IsLoggedIn)
{
// User is already logged in. Redirect to dashboard.
NavigationManager.NavigateTo("/");
// User is already logged in. Redirect to dashboard.
NavigationManager.NavigateTo("/");
}
else
{
@ -27,28 +27,29 @@ else
<MudCardContent>
<MudForm @ref="registerForm">
<div style="display:flex;flex-direction:column;gap:15px;">
<MudTextField @bind-value="accessCode" InputType="InputType.Text" T="string"
FullWidth="true" Required="@true" 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)"]/>
<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"
T="string" FullWidth="true" Required="@true"
RequiredError=@Localizer["Password is Required"]
Label=@Localizer["Password"] Variant="Variant.Outlined" Margin="Margin.Dense">
</MudTextField>
<MudTextField @bind-Value="confirmPassword" InputType="InputType.Password"
T="string" FullWidth="true" Required="@true"
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>
</div>
<MudTextField @bind-value="AccessCode" InputType="InputType.Text" T="string"
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)"] />
<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"
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"
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="Submit" FullWidth="true" StartIcon="@Icons.Material.Filled.AddCard" Color="Color.Primary" Variant="Variant.Filled">@Localizer["Register"]</MudButton>
</div>
</MudForm>
</MudCardContent>
</MudCard>

View File

@ -1,10 +1,19 @@
namespace TaikoWebUI.Pages;
using System.ComponentModel.DataAnnotations;
namespace TaikoWebUI.Pages;
public partial class Register
{
private string accessCode = "";
private string confirmPassword = "";
private string password = "";
[Required]
private string AccessCode { get; set; } = "";
[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();
}
}
}
}