Updating default front-end design of Identity Logi

Question

I am developing a .NET core application with Identity login which provides a Bootstrap form In the /Identity/Account/Login page.

I have imported Materialize CSS files in the wwwroot/lib folder and want to change the Login page's design with materialize css as well.

The problem is /Identity/Account/Login page doesn't exist in project structure. Then how should I approach to solve this problem?

Answer 1

From Asp.net Core 2.1, Identity UI code are not included in project structure.
You can see this line of code in StartUp file -> method ConfigureServices

services.AddDefaultIdentity<IdentityUser>()
            .AddDefaultUI(UIFramework.Bootstrap4)

If you want to customize the UI, you have to generate this bunch of code by 2 ways:
1. Using Visual Studio: right click at project -> add -> new scafolded item -> identity -> and choose which you want to be generate.
2. Using CLI: from the project directory run this command-line

dotnet aspnet-codegenerator identity -dc WebApplication.Data.ApplicationDbContext

Answer 2

One way would be to scaffold the login page, which would add it to your project structure. Then you would be able to make any changes you want. You would have to do the following (from the link I provided):

• From Solution Explorer, right-click on the project > Add > New Scaffolded Item.
• From the left pane of the Add Scaffold dialog, select Identity > ADD.
• In the ADD Identity dialog, select the options you want (in your case Login).
  • Select your existing layout page, or your layout file will be overwritten with incorrect markup. When an existing _Layout.cshtml file is selected, it is not overwritten.

For example ~/Pages/Shared/_Layout.cshtml for Razor Pages ~/Views/Shared/_Layout.cshtml for MVC projects

• To use your existing data context, select at least one file to override. You must select at least one file to add your data context.
  • Select your data context class.
  • Select ADD.
• To create a new user context and possibly create a custom user class for Identity:
  • Select the + button to create a new Data context class.
  • Select ADD.

Note: If you're creating a new user context, you don't have to select a file to override.

Another way would be to look at the Login page source code and see HTML elements' ids and classes. Then you could override the default CSS by writing your own CSS that would be more specific than the default one.

Answer 3

The default Identity pages you see are generated behind the scenes from this dll in your project:

Microsoft.AspNetCore.Identity.UI.Views.V3.dll

-- located here --

Dependencies >> SDK >> Microsoft.AspNetCore.App(2.2.0).

Follow @Marko Papic step by step instructions to generate the Identity pages (or partials) you'd like to override with your Material css. Within these (now view-able pages) is all the logic and naming references to the Identity classes, methods, properties etc you'll need to build your own custom page.

Additionally, you don't need to stick to the default Areas/Identity/Pages/Account... file location or razor syntax. You could, if you wanted to, create your own MVC versions, or vue.js in whatever file structure/representation you like.

I keep a project off to the side that has overridden all of the Identity UI pages ( checkbox Override all files that serves as a handy reference where I can bring over what I need as I need it.

@Marko Papic has provided a nice answer for you, I'l suggesst you select his answer as the correct one..