Customizing ABP commercial login page

override-login-page.md

Create a new Login.cshtml under Pages\Account folder

Login.cshtml

@page
@using Microsoft.AspNetCore.Mvc.Localization
@using Volo.Abp.Account.Localization
@model Acme.BookStore.Pages.Account.CustomLoginModel
@inject IHtmlLocalizer<AccountResource> L
@inject Volo.Abp.AspNetCore.Mvc.UI.Layout.IPageLayout PageLayout
@{
    PageLayout.Content.Title = L["Login"].Value;
}

@section styles{
    <abp-style src="/Pages/Account/login.css" />
}

@section scripts{
    <abp-script src="/Pages/Account/login.js" />
}

<div class="account-module-form">

    <h1>
        MY CUSTOM LOGIN
    </h1>

    @if (Model.EnableLocalLogin)
    {
    <form method="post">
        <input asp-for="ReturnUrl" />
        <input asp-for="ReturnUrlHash" />
        <abp-input asp-for="LoginInput.UserNameOrEmailAddress" required-symbol="false" />
        <abp-input asp-for="LoginInput.Password" required-symbol="false" />
        <abp-row>
            <abp-column>
                <abp-input asp-for="LoginInput.RememberMe" class="mb-4" />
            </abp-column>
            <abp-column class="text-right">
                <a href="@Url.Page("./ForgotPassword")">@L["ForgotPassword"]</a>
            </abp-column>
        </abp-row>
        <abp-button button-type="Primary" size="Block" type="submit" class="mt-2 mb-3" name="Action" value="Login">@L["Login"]</abp-button>
    </form>
    @if (Model.IsSelfRegistrationEnabled)
        {
    @L["NotAMemberYet"]
    <a href="@Url.Page("./Register", new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})">@L["Register"]</a>
        }
    }

    @if (Model.VisibleExternalProviders.Any())
    {
    <hr />
    @L["OrSignInWith"]<br />
    <form asp-page="./Login" asp-page-handler="ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" asp-route-returnUrlHash="@Model.ReturnUrlHash" method="post">
        <input asp-for="ReturnUrl" />
        <input asp-for="ReturnUrlHash" />
        @foreach (var provider in Model.VisibleExternalProviders)
            {
        <abp-button type="submit" button-type="Outline_Primary" size="Small" class="mt-2 mr-2" name="provider" value="@provider.AuthenticationScheme">@provider.DisplayName</abp-button>
            }
    </form>
    }

    @if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
    {
    <div class="alert alert-warning">
        <strong>Invalid login request</strong>
        There are no login schemes configured for this client.
    </div>
    }
</div>

---

Create CustomLoginModel.cs file in the same folder (Pages\Account)

CustomLoginModel.cs

using Volo.Abp.Account.Public.Web.Pages.Account;

namespace Acme.BookStore.Pages.Account
{
    public class CustomLoginModel : LoginModel
    {
        public CustomLoginModel(
            Microsoft.AspNetCore.Authentication.IAuthenticationSchemeProvider schemeProvider,
            Microsoft.Extensions.Options.IOptions<Volo.Abp.Account.Public.Web.AbpAccountOptions> accountOptions)
            : base(schemeProvider, accountOptions)
        {
        }
    }
}

---

Add a CSS to play with the existing styles. Create Login.css in the same folder (Pages\Account)

Login.css

.container {
    background-color: #d0d08c;
}

.card {
    background: #bccce4;
}

---

Add a JS to write JavaScript. Create Login.js in the same folder (Pages\Account)

Login.js

alert('login page loaded.');

I did this example in a tiered MVC project, so I put that in the Identity Server project

This is how it looks like:

Check out https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-User-Interface

The updated login.cshtml (v4.1.0)

@page
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.Extensions.Options
@using Owl.reCAPTCHA
@using Volo.Abp.Account.Localization
@using Volo.Abp.Account.Public.Web.Security.Recaptcha
@using Volo.Abp.Account.Settings
@using Volo.Abp.Settings
@model Volo.Abp.Account.Public.Web.Pages.Account.LoginModel
@inject IHtmlLocalizer<AccountResource> L
@inject Volo.Abp.AspNetCore.Mvc.UI.Layout.IPageLayout PageLayout
@inject ISettingProvider SettingProvider
@{
    PageLayout.Content.Title = L["Login"].Value;
    var reCaptchaVersion = await SettingProvider.GetAsync<int>(AccountSettingNames.Captcha.Version);
    if (Model.UseCaptcha)
    {
        await Model.ReCaptchaOptions.SetAsync(reCaptchaVersion == 3 ? reCAPTCHAConsts.V3 :reCAPTCHAConsts.V2);
    }

}

@section scripts
{
    @if (Model.UseCaptcha)
    {
        if (reCaptchaVersion == 3)
        {
            <recaptcha-script-v3/>
            <recaptcha-script-v3-js action="login" callback="(function(){$('#@RecaptchaValidatorBase.RecaptchaResponseKey').val(token)})"/>
        }
        else
        {
            <recaptcha-script-v2/>
        }
    }
}

@if (Model.IsLinkLogin)
{
    <abp-alert alert-type="Warning">
        @L["LinkUserWarning", Url.PageLink()]
    </abp-alert>
}

<div class="account-module-form">
    @if (Model.EnableLocalLogin)
    {
        <form method="post">
            <input asp-for="ReturnUrl"/>
            <input asp-for="ReturnUrlHash"/>
            @if (Model.UseCaptcha)
            {
                <input type="hidden" name="@RecaptchaValidatorBase.RecaptchaResponseKey" id="@RecaptchaValidatorBase.RecaptchaResponseKey"/>
            }
            <abp-input asp-for="LoginInput.UserNameOrEmailAddress" required-symbol="false"/>
            <abp-input asp-for="LoginInput.Password" required-symbol="false"/>
            <abp-row>
                <abp-column>
                    <abp-input asp-for="LoginInput.RememberMe" class="mb-4"/>
                </abp-column>
                <abp-column class="text-right">
                    <a href="@Url.Page("./ForgotPassword", new { returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash })">@L["ForgotPassword"]</a>
                </abp-column>
            </abp-row>

            @if (reCaptchaVersion == 2)
            {
                <recaptcha-div-v2 callback="(function(){$('#@RecaptchaValidatorBase.RecaptchaResponseKey').val(token)})" />
            }

            <abp-button button-type="Primary" size="Block" type="submit" class="mt-2 mb-3" name="Action" value="Login">@L["Login"]</abp-button>
            @if (Model.ShowCancelButton)
            {
                <abp-button button-type="Secondary" size="Block" type="submit" formnovalidate="formnovalidate" class="mt-2 mb-3" name="Action" value="Cancel">@L["Cancel"]</abp-button>
            }
        </form>
        if (Model.IsSelfRegistrationEnabled)
        {
            @L["NotAMemberYet"]
            <a href="@Url.Page("./Register", new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})">@L["Register"]</a>
        }
    }

    @if (Model.VisibleExternalProviders.Any())
    {
        <hr/>
        @L["OrSignInWith"]<br/>
        <form asp-page="./Login" asp-page-handler="ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" asp-route-returnUrlHash="@Model.ReturnUrlHash" method="post">
            <input asp-for="ReturnUrl"/>
            <input asp-for="ReturnUrlHash"/>
            @foreach (var provider in Model.VisibleExternalProviders)
            {
                <button
                    type="submit"
                    class="mt-2 mr-2 btn btn-outline-primary btn-sm"
                    name="provider"
                    value="@provider.AuthenticationScheme"
                    data-busy-text="@L["ProcessingWithThreeDot"]">
                    @if (provider.Icon != null)
                    {
                        <i class="@provider.Icon"></i>
                    }
                    <span>@provider.DisplayName</span>
                </button>
            }
        </form>
    }

    @if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
    {
        <div class="alert alert-warning">
            <strong>Invalid login request</strong>
            There are no login schemes configured for this client.
        </div>
    }
</div>

Nice work, can you share an example for the Register page?

How can I customize the switch tenant on login page?

@mperk did you ever get a solution?