brister/jsmr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Updated login page.
All checks were successful
ci / build-test (push) Successful in 2m29s
Details
ci / publish-image (push) Successful in 1m44s
Details

Browse Source
This commit is contained in:
Brian Bicknell
2026-05-04 01:52:35 -04:00
parent abcc82437f
commit 2bd7e3b970
1 changed files with 110 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
JSMR.UI.Blazor/Pages/Login.razor
View File

@@ -1,12 +1,17 @@
@page "/login" @page "/login"
@layout LoginLayout @layout LoginLayout
@using AntDesign
@using JSMR.UI.Blazor.Services @using JSMR.UI.Blazor.Services
@using MudBlazor.Charts
@using System.ComponentModel.DataAnnotations
@inject SessionState Session @inject SessionState Session
@inject NavigationManager Nav @inject NavigationManager Nav
<h3>Login</h3> @* <h3>Login</h3> *@
<PageTitle>Sign In - JSMR</PageTitle>
@if (Session.IsAuthenticated) @if (Session.IsAuthenticated)
{ {
@@ -15,27 +20,82 @@
} }
else else
{ {
<div style="max-width: 360px;"> <div class="login-container">
<BitCard> <AntDesign.Card Title=@("Sign In") Class="ant-blurred-card">
<BitStack> <Body>
<BitTextField Label="Username" @bind-Value="username"></BitTextField> <AntDesign.Form Model="@loginModel" Layout="FormLayout.Vertical">
<BitTextField Label="Password" @bind-Value="password" Type="BitInputType.Password"></BitTextField> <AntDesign.FormItem Label="Username">
<BitButton OnClick="LoginAsync" IsEnabled="@(!busy)">Login</BitButton> <AntDesign.Input @bind-Value="context.Username"></AntDesign.Input>
</AntDesign.FormItem>
<AntDesign.FormItem Label="Password">
<AntDesign.InputPassword @bind-Value="context.Password"></AntDesign.InputPassword>
</AntDesign.FormItem>
<AntDesign.Button Class="login-button" OnClick="Login2Async" Disabled="@(busy)" Type="AntDesign.ButtonType.Primary">Sign In</AntDesign.Button>
</AntDesign.Form>
</Body>
</AntDesign.Card>
@if (!string.IsNullOrWhiteSpace(error)) @if (!string.IsNullOrWhiteSpace(error))
{ {
<p style="color: crimson; margin-top: 8px;">@error</p> <Alert Type="AlertType.Error" Message="@error" ShowIcon="false" />
} }
</BitStack>
</BitCard>
</div> </div>
} }
<style>
body {
background-image: url(https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ETkNSJ-oUGwAAAAAQ_AAAAgAegCCAQ/original);
background-size: cover;
}
.ant-card-head-title {
display: flex;
justify-content: center;
}
.ant-form-item-required {
display: flex;
flex-direction: row-reverse;
gap: .25rem;
align-items: flex-start;
}
.login-container {
max-width: 450px;
padding: 1rem;
margin: auto;
display: flex;
flex-direction: column;
gap: .5rem;
}
.login-button {
width: 100%;
}
.ant-blurred-card {
background-color: color-mix(in srgb, #141414 70%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
</style>
@code { @code {
private string username = ""; private string username = "";
private string password = ""; private string password = "";
private bool busy; private bool busy;
private string? error; private string? error;
private LoginModel loginModel = new();
public class LoginModel
{
[Required]
public string? Username { get; set; }
[Required]
public string? Password { get; set; }
}
private async Task LoginAsync() private async Task LoginAsync()
{ {
busy = true; busy = true;
@@ -61,6 +121,43 @@ else
} }
} }
private async Task Login2Async()
{
busy = true;
error = null;
try
{
if (string.IsNullOrWhiteSpace(loginModel.Username))
{
error = "Username is required.";
return;
}
if (string.IsNullOrWhiteSpace(loginModel.Password))
{
error = "Password is required.";
return;
}
var ok = await Session.LoginAsync(loginModel.Username, loginModel.Password);
if (!ok)
{
error = "Invalid username or password.";
return;
}
Nav.NavigateTo("/");
}
catch (Exception ex)
{
error = ex.Message;
}
finally
{
busy = false;
}
}
private async Task Logout() private async Task Logout()
{ {
busy = true; busy = true;