Customizes Login page a bit

This commit is contained in:
Vazhin Tayeb 2021-01-19 00:05:47 +03:00
parent 72cbb12243
commit 07f8ed4fed
5 changed files with 454 additions and 52 deletions

View File

@ -1,57 +1,58 @@
@model LoginViewModel @model LoginViewModel
<div class="login-page"> <div class="login-page">
<div class="lead">
<h1>Login</h1>
<p>Choose how to login</p>
</div>
<partial name="_ValidationSummary" /> <partial name="_ValidationSummary" />
<div class="row"> <div class="row justify-content-center align-items-center w-100 h-100">
@if (Model.EnableLocalLogin) @if (Model.EnableLocalLogin)
{ {
<div class="col-sm-6"> <div class="col-sm-6">
<div class="card"> <div class="card bg-white shadow px-4 py-3 border-0">
<div class="card-header">
<h2>Local Account</h2>
</div>
<div class="card-body"> <div class="card-body">
<h2 class="mb-4 text-primary">Login</h2>
<form asp-route="Login"> <form asp-route="Login">
<input type="hidden" asp-for="ReturnUrl" /> <input type="hidden" asp-for="ReturnUrl" />
<div class="form-group"> <div class="form-group">
<label asp-for="Username"></label> <label style="font-size: 1.1rem;" asp-for="Username"></label>
<input class="form-control" placeholder="Username" asp-for="Username" autofocus> <input class="form-control" placeholder="Username" asp-for="Username" autofocus>
</div> </div>
<div class="form-group">
<label asp-for="Password"></label>
<input type="password" class="form-control" placeholder="Password" asp-for="Password"
autocomplete="off">
</div>
<div class="form-group"> <div class="form-group">
<label asp-for="UseTotp">Use Your mobile phone for authentication?</label> <label asp-for="UseTotp">Use Your mobile phone for authentication?</label>
<input asp-for="UseTotp" /> <input asp-for="UseTotp" />
</div> </div>
<div class="form-group">
<label asp-for="Password"></label>
<input type="password" class="form-control" placeholder="Password" asp-for="Password" autocomplete="off">
</div>
<div class="form-group"> <div class="form-group">
<label asp-for="Totp">TOTP</label> <label asp-for="Totp">TOTP</label>
<input type="password" class="form-control" placeholder="Type in the one-time-password from your authenticator app" asp-for="Totp" autocomplete="off"> <input type="password" class="form-control"
placeholder="Type in the one-time-password from your authenticator app" asp-for="Totp"
autocomplete="off">
</div> </div>
@if (Model.AllowRememberLogin) @if (Model.AllowRememberLogin)
{ {
<div class="form-group"> <div class="form-group">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" asp-for="RememberLogin"> <input class="form-check-input" asp-for="RememberLogin">
<label class="form-check-label" asp-for="RememberLogin"> <label class="form-check-label" asp-for="RememberLogin">
Remember My Login Remember My Login
</label> </label>
</div> </div>
</div>} </div>
<button class="btn btn-primary" name="button" value="login">Login</button> }
<button class="btn btn-secondary" name="button" value="cancel">Cancel</button> <button class="btn btn-primary px-5 font-weight-bold mr-2" name="button"
value="login">Login</button>
<button class="btn btn-secondary font-weight-bold px-3" name="button"
value="cancel">Cancel</button>
</form> </form>
</div> </div>
</div> </div>
@ -70,11 +71,9 @@
@foreach (var provider in Model.VisibleExternalProviders) @foreach (var provider in Model.VisibleExternalProviders)
{ {
<li class="list-inline-item"> <li class="list-inline-item">
<a class="btn btn-secondary" <a class="btn btn-secondary" asp-controller="External" asp-action="Challenge"
asp-controller="External" asp-route-scheme="@provider.AuthenticationScheme"
asp-action="Challenge" asp-route-returnUrl="@Model.ReturnUrl">
asp-route-scheme="@provider.AuthenticationScheme"
asp-route-returnUrl="@Model.ReturnUrl">
@provider.DisplayName @provider.DisplayName
</a> </a>
</li> </li>

View File

@ -15,13 +15,18 @@
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="~/css/site.css" /> <link rel="stylesheet" href="~/css/site.css" />
</head> </head>
<body> <body class="bg-light" style="font-family: 'Roboto', sans-serif;
">
<partial name="_Nav" /> <partial name="_Nav" />
<div class="container body-container"> <div class="container body-container mt-5">
@RenderBody() @RenderBody()
</div> </div>

View File

@ -9,26 +9,28 @@
} }
<div class="nav-page"> <div class="nav-page">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
<a href="~/" class="navbar-brand"> <div class="container">
<img src="~/icon.png" class="icon-banner"> <a href="~/" class="navbar-brand">
IdentityServer4 <img style="height: 50px;" src="~/images/logo.svg" alt="logo">
</a> </a>
@if (!string.IsNullOrWhiteSpace(name))
{
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">@name <b class="caret"></b></a>
<div class="dropdown-menu">
<a class="dropdown-item" asp-action="RegisterMobileDevice"
asp-controller="Account">RegisterMobileDevice</a>
<a class="dropdown-item" asp-action="Logout" asp-controller="Account">Logout</a>
</div>
</li>
</ul>
}
</div>
@if (!string.IsNullOrWhiteSpace(name))
{
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">@name <b class="caret"></b></a>
<div class="dropdown-menu">
<a class="dropdown-item" asp-action="RegisterMobileDevice" asp-controller="Account">RegisterMobileDevice</a>
<a class="dropdown-item" asp-action="Logout" asp-controller="Account">Logout</a>
</div>
</li>
</ul>
}
</nav> </nav>
</div> </div>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 100 KiB

View File

@ -17,7 +17,7 @@
class="navbar navbar-expand-sm justify-content-between navbar-toggleable-sm navbar-light bg-custom text-light border-bottom box-shadow mb-3"> class="navbar navbar-expand-sm justify-content-between navbar-toggleable-sm navbar-light bg-custom text-light border-bottom box-shadow mb-3">
<div class="container d-inline-flex justify-content-between w-100"> <div class="container d-inline-flex justify-content-between w-100">
<img style="height: 72px;" src="~/images/logo.svg" alt=""> <img style="height: 72px;" src="~/images/logo.svg" alt="logo">
@* <a class="navbar-brand" asp-area="" asp-page="/Index">Tax Services</a> *@ @* <a class="navbar-brand" asp-area="" asp-page="/Index">Tax Services</a> *@
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">