Submit login & register forms on Enter key press
This commit is contained in:
parent
505b867e1a
commit
2c0f43717b
@ -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("/");
|
||||
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -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>
|
||||
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user