OK. I'll continue in more detail. I created a project Net8 from a Blazor web application with personal accounts and Auto rendering mode and including sample pages. Visual Studio has generated sample pages to implement Identity. I am conducting an experiment with the Login page. Initially, its code is like this:
@page "/Account/Login"
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Authentication
@using Microsoft.AspNetCore.Identity
@using BlazorApp3.Data
@inject SignInManager<ApplicationUser> SignInManager
@inject ILogger<Login> Logger
@inject NavigationManager NavigationManager
@inject IdentityRedirectManager RedirectManager
<PageTitle>Log in</PageTitle>
<h1>Log in</h1>
<div class="row">
<div class="col-md-4">
<section>
<StatusMessage Message="@errorMessage" />
<EditForm Model="Input" method="post" OnValidSubmit="LoginUser" FormName="login">
<DataAnnotationsValidator />
<h2>Use a local account to log in.</h2>
<hr />
<ValidationSummary class="text-danger" role="alert" />
<div class="form-floating mb-3">
<InputText @bind-Value="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="name@example.com" />
<label for="email" class="form-label">Email</label>
<ValidationMessage For="() => Input.Email" class="text-danger" />
</div>
<div class="form-floating mb-3">
<InputText type="password" @bind-Value="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" placeholder="password" />
<label for="password" class="form-label">Password</label>
<ValidationMessage For="() => Input.Password" class="text-danger" />
</div>
<div class="checkbox mb-3">
<label class="form-label">
<InputCheckbox @bind-Value="Input.RememberMe" class="darker-border-checkbox form-check-input" />
Remember me
</label>
</div>
<div>
<button type="submit" class="w-100 btn btn-lg btn-primary">Log in</button>
</div>
<div>
<p>
<a href="Account/ForgotPassword">Forgot your password?</a>
</p>
<p>
<a href="@(NavigationManager.GetUriWithQueryParameters("Account/Register", new Dictionary<string, object?> { ["ReturnUrl"] = ReturnUrl }))">Register as a new user</a>
</p>
<p>
<a href="Account/ResendEmailConfirmation">Resend email confirmation</a>
</p>
</div>
</EditForm>
</section>
</div>
<div class="col-md-6 col-md-offset-2">
<section>
<h3>Use another service to log in.</h3>
<hr />
<ExternalLoginPicker />
</section>
</div>
</div>
@code {
private string? errorMessage;
[CascadingParameter]
private HttpContext HttpContext { get; set; } = default!;
[SupplyParameterFromForm]
private InputModel Input { get; set; } = new();
[SupplyParameterFromQuery]
private string? ReturnUrl { get; set; }
protected override async Task OnInitializedAsync()
{
if (HttpMethods.IsGet(HttpContext.Request.Method))
{
// Clear the existing external cookie to ensure a clean login process
await HttpContext.SignOutAsync(IdentityConstants.ExternalScheme);
}
}
public async Task LoginUser()
{
// This doesn't count login failures towards account lockout
// To enable password failures to trigger account lockout, set lockoutOnFailure: true
var result = await SignInManager.PasswordSignInAsync(Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false);
if (result.Succeeded)
{
Logger.LogInformation("User logged in.");
RedirectManager.RedirectTo(ReturnUrl);
}
else if (result.RequiresTwoFactor)
{
RedirectManager.RedirectTo(
"Account/LoginWith2fa",
new() { ["returnUrl"] = ReturnUrl, ["rememberMe"] = Input.RememberMe });
}
else if (result.IsLockedOut)
{
Logger.LogWarning("User account locked out.");
RedirectManager.RedirectTo("Account/Lockout");
}
else
{
errorMessage = "Error: Invalid login attempt.";
}
}
private sealed class InputModel
{
[Required]
[EmailAddress]
public string Email { get; set; } = "";
[Required]
[DataType(DataType.Password)]
public string Password { get; set; } = "";
[Display(Name = "Remember me?")]
public bool RememberMe { get; set; }
}
}
Next, I wanted to replace all the standard components with Radzen components. The Radzen Login component could not be used. The standard Input Text components when using the binding @bind-Value="Input.Email" in HTML markup have name="Input.Email" (as I understand it for binding the model). So I used RadzenTextBox with the assignment Name="Input.Email". Everything worked like this:
<EditForm id="account" Model="@Input" method="post" FormName="login" OnValidSubmit="LoginUser">
<RadzenStack Gap="10">
<RadzenFormField Text="Login (e-mail)" Style="width: 100%;">
<End>
<RadzenIcon Icon="alternate_email" />
</End>
<ChildContent>
<RadzenTextBox @bind-Value="@Input.Email" Style="width: 100%;" Name="Input.Email" />
</ChildContent>
</RadzenFormField>
<RadzenFormField Text="Password" Style="width: 100%;">
<End>
<RadzenIcon Icon="password" />
</End>
<ChildContent>
<RadzenPassword @bind-Value="@Input.Password" Style="width: 100%;" Name="Input.Password" />
</ChildContent>
</RadzenFormField>
<div class="checkbox">
<label class="form-label">
<InputCheckbox @bind-Value="Input.RememberMe" class="form-check-input" />
Remember My
</label>
</div>
<RadzenStack Gap="10" JustifyContent="JustifyContent.Center" AlignItems="AlignItems.End">
<RadzenButton ButtonStyle="ButtonStyle.Primary" ButtonType="ButtonType.Submit" Text="Login" Style="width:100px" />
<RadzenLink Text="Register?" Icon="app_registration" IconColor="@Colors.Info" Path="/Account/Register" />
</RadzenStack>
</RadzenStack>
</EditForm>
TemplateForm can't be used instead of EditForm. When sending TemplateForm, an error is issued, which I wrote about above. And Radzen Validators do not work with EditForm.
EditForm can be replaced with HTML form> by adding AntiForgeryToken, and everything will work too.