Enhanced Login Component - Copy this Html, Bootstrap Component to your project

@page "/identity/account/login" @layout AuthenticationLayout <div class="container"> <div class="row"> <div class="col lg 4"></div> <div class="col lg 4"> <EditForm Model="User" OnValidSubmit="HandleLogin"> <DataAnnotationsValidator /> <div class="card bg blue" style="opacity:0.85; margin top:5%; border radius:10px; color:black; font weight:bold"> <div class="card header text center fs 4 mb 3"> <img src="../images/logo/vip.png" alt="Company Logo" style="height:50px; width:auto; margin bottom:15px;"> @* Login *@ </div> <div class="card body"> <div class="form group mt 3"> <label for="emailInput" class="form label">Email</label> <InputText id="emailInput" @bind Value="User.Email" class="form control"></InputText> </div> <div class="form group mt 3"> <label for="passwordInput" class="form label">Password</label> <input id="passwordInput" type="password" @bind="User.Password" class="form control"></input> </div> <div class="form group mt 4"> @if (ShowLoadingButton) { <ButtonLoadingSpinner></ButtonLoadingSpinner> } else { <button class="btn btn primary w 100" type="submit">Login</button> } </div> </div> <div class="card footer text center py 4" style="background color:#F7F7F7;"> <span class="fw bold"> Don't have an account? | <a class="text decoration none" href="identity/account/register">Sign Up</a> </span> <ValidationSummary /> </div> </div> </EditForm> @* <EditForm Enhance Model="User" OnValidSubmit="HandleLogin"> <DataAnnotationsValidator /> <div class="card bg light" style="opacity:0.5; margin top:50%; border radius:10px; color:white; font weight:bold"> <div class="card header text center fs 5 mb 2">Login</div> <div class="container"> <div class="row"> <div class="col lg 4 col md 4 col sm 4"></div> <div class="col lg 4 col md 4 col sm 4 d flex justify content center"> <img style="border radius:20px" src="../images/logo/vip.png" height="50" width="50" /> </div> <div class="col lg 4 col md 4 col sm 4"></div> </div> </div> <div class="card body"> <div class="form group mt 3"> <label class="form label">Email</label> <InputText @bind Value="User.Email" class="form control"></InputText> </div> <div class="form group mt 3"> <label class="form label">Password</label> <input type="password" @bind="User.Password" class="form control"></input> </div> <div class="form group mt 3"> @if (ShowLoadingButton) { <ButtonLoadingSpinner></ButtonLoadingSpinner> } else { <button class="btn btn primary float end" type="submit">Login</button> } </div> </div> <div class="card footer"> <span class="text center"> Don't have account? | <a class="btn link" href="identity/account/register">Sign Up</a> </span> <ValidationSummary /> </div> </div> </EditForm> *@ </div> <div class="col lg 4"></div> </div> </div> @code { public bool ShowLoadingButton { get; set; } = false; Login User = new(); [CascadingParameter] public Task<AuthenticationState> AuthenticationState { get; set; } protected async override Task OnInitializedAsync() { await CheckUserAuthentication(); } async Task HandleLogin() { ShowLoadingButton = true; var result = await accountService.SignInAsync(User); if (result.Flag) { await DisplayDialog(result.Message, "Login Success"); var customAuthStateProvider = (CustomAuthenticationStateProvider)AuthStateProvider; await customAuthStateProvider.UpdateAuthenticationState(new UserSession() { Token = result.Token, RefreshToken = result.RefreshToken }); NavManager.NavigateTo("/", forceLoad: true); } else { await DisplayDialog(result.Message, "Alert"); } ShowLoadingButton = false; } private async Task DisplayDialog(string content, string title) { await dialogService.AlertAsync(content, title); } private async Task CheckUserAuthentication() { var user = (await AuthenticationState).User; bool isUserAuthenticated = user.Identity!.IsAuthenticated; if (isUserAuthenticated) NavManager.NavigateTo("/home/dashboard"); } }