Abp Framework Login Page Customization / "Login failed" alert doesn't work

Question

I'm working on abp framework currently. It is an Mvc project and the problem belongs to Web(UI) layer. I customized Login page(Account/Login.cshtml). Everything was ok until i realized that failed message(Your password or username incorrect) doesn't work. Probably i missed really little bit detail. I read the official document but i couldn't find anything about that.

    @page
    @using Microsoft.AspNetCore.Mvc.Localization
    @using Volo.Abp.Account.Localization
    @using Volo.Abp.Account.Settings
    @using Volo.Abp.Settings
    @model Volo.Abp.Account.Web.Pages.Account.LoginModel
    @inject IHtmlLocalizer<AccountResource> L
    @inject Volo.Abp.Settings.ISettingProvider SettingProvider
    
    @{
        ViewBag.Title = "Login";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

<div class="container-fluid vh-100 p-0" style="background-color: #3b324c;">

    @if (Model.EnableLocalLogin)
    {
    <form method="post" class="h-100">

    <div class="d-flex h-100">

        <aside id="sidebar" style="width: 360px;">
            <div class="h-100 d-flex flex-column justify-content-center ps-5" style="background-image:url(/assets/img/bgg.png);">
                <div class="mb-5">
                    <img src="/assets/img/logo.png" class="w-50" alt="">
                </div>
                <div class="mb-3 text-white">
                    <h4>XXXXXXXXXX</h4>
                    <span class="text-pi">Powered by XXX</span>
                </div>
            </div>
            
        </aside>

        <section class="flex-fill  p-4 bg-light" style="border-radius: 10px 0 0 10px;">
            
            <div class="d-flex h-100 align-items-center">
                
                <div class="row w-100">
                    <div class="offset-xl-4 col-xl-3 offset-3 col-6">
                        <div class="mb-3">
                            <label asp-for="LoginInput.UserNameOrEmailAddress" class="form-label"></label>
                            <input asp-for="LoginInput.UserNameOrEmailAddress" class="form-control form-control-lg" required/>
                            <span asp-validation-for="LoginInput.UserNameOrEmailAddress" class="text-danger"></span>
                        </div>
                        <div class="mb-3">
                            <label asp-for="LoginInput.Password" class="form-label"></label>
                            <input asp-for="LoginInput.Password" class="form-control form-control-lg" required/>
                            <span asp-validation-for="LoginInput.Password" class="text-danger"></span>
                        </div>
                    </div>
                </div>
                
            </div>

        </section>

    </div>

    <section rel="action" class="position-fixed bottom-0 end-0 p-3">
        <abp-button type="submit" button-type="Primary" name="Action" value="Login" class="btn btn-lg btn-mo d-flex align-items-center">
            <span class="material-symbols-outlined me-2">login</span>
            @L["Login"]
        </abp-button>

        @if (Model.ShowCancelButton)
        {
            <abp-button type="submit" button-type="Secondary" formnovalidate="formnovalidate" name="Action" value="Cancel" class="btn-lg mt-3">@L["Cancel"]</abp-button>
        }
    </section>

    </form>
    }

    @if (Model.VisibleExternalProviders.Any())
    {
        <div class="mt-2">
            <h5>@L["OrLoginWith"]</h5>
            <form asp-page="./Login" asp-page-handler="ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" asp-route-returnUrlHash="@Model.ReturnUrlHash" method="post">
                @foreach (var provider in Model.VisibleExternalProviders)
                {
                    <button type="submit" class="btn btn-primary m-1" name="provider" value="@provider.AuthenticationScheme" title="@L["LogInUsingYourProviderAccount", provider.DisplayName]">@provider.DisplayName</button>
                }
            </form>
        </div>
    }

    @if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
    {
        <div class="alert alert-warning">
            <strong>@L["InvalidLoginRequest"]</strong>
            @L["ThereAreNoLoginSchemesConfiguredForThisClient"]
        </div>
    }
    
</div>

Answer 1

If anybody is looking for a solution , Update your custom Layout page code with these.

@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton.Themes.Lepton.Components.Content.Alerts
@(await Component.InvokeAsync<ContentAlertsViewComponent>())

if you do not have Lepton theme then you can try

@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Themes.Basic.Components.PageAlerts
@(await Component.InvokeAsync<PageAlertsViewComponent>())

Also add these lines to your submit method

    try
    {
        return await base.OnPostAsync(action);
    }
    catch (AbpValidationException e)
    {
        Alerts.Danger(e.ValidationErrors.First().ErrorMessage);
        return Page();
    }