Blazor Server don't have login UI, so you're redirected to authentication server UI to log in. So the authentication server is built with MVC UI. You can customize the login page like in a regular MVC application template: https://abp.io/docs/latest/framework/ui/mvc-razor-pages/customization-user-interface
So if you create Pages/Account/Login.cshtml as below you can customize it.
Pages/Account/Login.cshtml:
@page
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.Extensions.Options
@using Owl.reCAPTCHA
@using Volo.Abp.Account.Localization
@using Volo.Abp.Account.Public.Web.Pages.Account;
@using Volo.Abp.Account.Public.Web.Security.Recaptcha
@using Volo.Abp.Account.Settings
@using Volo.Abp.Identity;
@using Volo.Abp.Settings
@model 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
{
<abp-script-bundle name="@typeof(LoginModel).FullName">
<abp-script src="/Pages/Account/Login.js" />
</abp-script-bundle>
@if (Model.UseCaptcha)
{
if (reCaptchaVersion == 3)
{
<recaptcha-script-v3 />
<recaptcha-script-v3-js action="login" execute="false" />
}
else
{
<recaptcha-script-v2 />
}
}
}
@if (Model.IsLinkLogin)
{
<abp-alert alert-type="Warning">
@L["LinkAccountWarning", Url.PageLink()]
</abp-alert>
}
@if (Model.BackToExternalLogins)
{
<div class="d-grid gap-2">
<a class="mb-3 btn btn-primary btn-block" href="@Url.Page("./ExternalLogins")">@L["Back"]</a>
</div>
}
<div class="account-module-form">
@if (Model.IsSelfRegistrationEnabled)
{
<h5 class="mb-2">@L["NotAMemberYet"] <a class="text-decoration-none" href="@Url.Page("./Register", new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})">@L["Register"]</a></h5>
}
@if (Model.EnableLocalLogin)
{
<form method="post" id="loginForm">
@if (Model.UseCaptcha)
{
<input class="mb-3" data-captcha="true" type="hidden" name="@RecaptchaValidatorBase.RecaptchaResponseKey" id="@RecaptchaValidatorBase.RecaptchaResponseKey"/>
}
<div>
<div class="form-floating mb-2">
<input asp-for="LoginInput.UserNameOrEmailAddress" type="text" class="form-control" placeholder="name@example.com">
@Html.LabelFor(m => m.LoginInput.UserNameOrEmailAddress)
<span asp-validation-for="LoginInput.UserNameOrEmailAddress"/>
</div>
<div class="form-floating mb-2">
<input asp-for="LoginInput.Password" id="password-input" type="password" class="form-control" placeholder="Password">
@Html.LabelFor(m => m.LoginInput.Password)
<i id="PasswordVisibilityButton" class="bi bi-eye-slash show-pass-icon" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" aria-label="@L["ShowPassword"]" data-bs-original-title="@L["ShowPassword"]"></i>
<i id="capslockicon" class="bi bi-capslock caps-lock-icon" style="display: none;" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" aria-label="<i class='bi bi-exclamation-circle'></i> @L["CapsLockOn"]!" data-bs-original-title="<i class='bi bi-exclamation-circle'></i> @L["CapsLockOn"]!"></i>
<span asp-validation-for="LoginInput.Password"/>
</div>
</div>
<abp-row>
<abp-column>
<div class="form-switch ps-2">
<abp-input asp-for="LoginInput.RememberMe" class="mb-4"/>
</div>
</abp-column>
<abp-column class="text-end">
<a href="@Url.Page("./ForgotPassword", new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})">@L["ForgotPassword"]</a>
</abp-column>
</abp-row>
@if (reCaptchaVersion == 2)
{
<script>
recaptchaCallback = function (token) {
$('form button[type=submit]').removeAttr("disabled");
$('#@RecaptchaValidatorBase.RecaptchaResponseKey').val(token)
};
</script>
<div class="mb-3">
<recaptcha-div-v2 callback="recaptchaCallback"/>
</div>
}
<div class="d-grid gap-2">
<abp-button button-type="Primary" type="submit" class="mb-3" name="Action" value="Login" disabled="true">
<i class="bi bi-box-arrow-in-right me-1"></i>
@L["Login"]
</abp-button>
</div>
@if (Model.ShowCancelButton)
{
<div class="d-grid gap-2">
<abp-button button-type="Secondary" type="submit" formnovalidate="formnovalidate" class="mb-3" name="Action" value="Cancel">@L["Cancel"]</abp-button>
</div>
}
</form>
}
@if (Model.VisibleExternalProviders.Any())
{
if(Model.EnableLocalLogin)
{
<hr/>
@L["OrSignInWith"]
<br/>
}
else
{
@L["SignInWithOneOfTheFollowingProviders"]
}
<form asp-page="./Login" asp-page-handler="ExternalLogin"
asp-route-returnUrl="@Model.ReturnUrl"
asp-route-returnUrlHash="@Model.ReturnUrlHash"
asp-route-linkTenantId="@Model.LinkTenantId"
asp-route-linkUserId="@Model.LinkUserId"
asp-route-linkToken="@Model.LinkToken"
method="post">
@foreach (var provider in Model.VisibleExternalProviders)
{
<button type="submit"
class="mt-2 me-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>
}
</div>
Hello,
I recommend that you design the pages in the module as a component and set the route as a parameter of the component. You can then call this component with different routes on the relevant pages on the UI host side.
The method I suggest actually corresponds to the second method in the picture and you will have a more reusable UI.
Thanks.
Hello,
Can you send us the logs of your application to pinpoint the root cause of the problem?
You can find the log record in Logs/logs.txt in the Host project.
Thanks.
Hello,
Can you send the implementation of the related method?
Hi,
This issue does not seem to be related to the ABP. ABP uses OpenIddict as OpenID Connect implementation and also ASP.NET's Identity. Therefore, you can perform this process in the same way with ABP as it should be in a “regular” ASP.NET application. I recommend you to look at PowerBI's own documentation for this.
See more:
If there are any specific problems you encounter during the implementation, we will try to provide better support if you can send us log records.
Hello,
This may be a short-term problem on our NuGet server. Is your problem persisting now? If so, what is the output when you execute the following command in the terminal?
abp login-info
Hello,
Do you see the request twice when you use the ABP DataGrid etc. instead of KendoUI or the request manually from Swagger? When I search the datagrid of Kendo UI on the internet, I think that this is due to the filter of KendoUI's datagrid.
See more:
At first glance, I don't think it's ABP problem, so I want to make sure it's not KendoUI problem, so what have you done to test that it's not Kendo issue?
Hello 👋,
You can download LeptonX's source code for this. Here it is explained in detail how to do this. See: https://abp.io/support/questions/8873/How-to-override--Replace--Change-a-page%27s-layout-in-ABP-MVC
Hi Shodgson 👋,
Apologies for the delay in responding — we were off yesterday due to International Workers' Day. I'm really glad to hear that you were able to resolve the issue!
Closing the issue now. Feel free to create a new one if you have any further questions.
Hello,
You can update the Suite's templates for this. See: https://abp.io/docs/latest/suite/editing-templates
