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.
