How To Customize The Login Page Of Asp Net Core Identity Web Application With Angular

Hello Friends, In this article, we will learn about how to customize the login page of the ASP.NET Core Identity Web Application with Angular.

1. From Solution Explorer, right-click on the project > Add > New Scaffolded Item

2. From the left pane of the Add Scaffold dialog, select Identity > Add.

3. Choose Files to override, For example, login related: Account\Login.

4. Select your data context class: ApplicationDbContext by default.

5. Click Add button.

6. Open login page from Solution Explorer, Areas > Identity > Pages > Account > Login.cshtml

7. Now we customize the login page as we need.

put the below code on Login.cshtml page

<style>
    body {
        background: #f7f7f7;
    }
    .login-form {
        width: 340px;
        margin: 100px auto;
        font-size: 15px;
    }
    .login-form form {
        margin-bottom: 15px;
        background: #ffffff;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;
    }
    .form-control, .btn {
        min-height: 38px;
        border-radius: 2px;
    }
    .btn {
        font-size: 15px;
        font-weight: bold;
        color: #fff;
        background-color: #1b6ec2;
        border-color: #1861ac;
    }
    .login-form .title {
        font-size: 20px;
        font-weight: 700;
        font-family: verdana;
    }
</style>
<div class="login-form">
    <form id="account" method="post">
        <div class="mb-3 text-center title">
            <span>The Code Hubs - Login</span>
        </div>
        <div asp-validation-summary="All" class="text-danger"></div>
        <div class="form-group">
            <input asp-for="Input.Email" class="form-control" placeholder="Username" />
            <span asp-validation-for="Input.Email" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input asp-for="Input.Password" class="form-control" placeholder="Password" />
            <span asp-validation-for="Input.Password" class="text-danger"></span>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-block">Log in</button>
        </div>
        <div class="clearfix">
            <label class="float-left form-check-label" asp-for="Input.RememberMe">
                <input asp-for="Input.RememberMe" />
                @Html.DisplayNameFor(m => m.Input.RememberMe)
            </label>
        </div>
    </form>
</div>

I have customized the login page to look like below.

I hope this article helps you and you will like it. Thanks for reading.