Restyle the UI of Abp.IdentityServer (identity server 4)

Question

I have created Tiered solution with Angular front-end and separated IdentityServer using abp.io framework, I have purchased a material theme for my application which I already integrated in my angular app, but IdentityServer still uses it's default UI provided by Abp, I didn't find any promising article showing the way to change it's layout design.

Can anyone suggest anything?

Answer 1

Angular application using seperate IdentityServer still uses server-side IdentityServer4 UI. Since it's serverside (Razor Pages) you can manually override Login Page. Here is an article about how to customize login page that may help.

If you want to change the IdentityServer UI to angular, that will need lots of re-write of base code. This SO question may help, Angular-based login page for IdentityServer.

Answer 2

In addition to @gterdem answer and thanks to @KishoreSahasranaman I realized that..

This needs to be added to the Login.cshtml page so it renders fine (and works too!)

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling

The documentation is kind of misleading since it sends you to do angular work when this is using IS4 on the backend