feat: 拆分登录组件
This commit is contained in:
Argo-Tianyi
parent
18bf30fe83
commit
e1a6e7379d
|
|
@ -0,0 +1,41 @@
|
|||
<form method="post" class="form-signin" data-mobile="@UseMobileLogin" action="@PostUrl" @ref="LoginForm">
|
||||
<h2 class="form-signin-heading">@Title</h2>
|
||||
<div class="login-wrap">
|
||||
@if (UseMobileLogin)
|
||||
{
|
||||
<SMSButton />
|
||||
}
|
||||
else
|
||||
{
|
||||
<BootstrapInputGroup>
|
||||
<BootstrapInputGroupIcon Icon="fa fa-fw fa-user" />
|
||||
<BootstrapInput TValue="string" name="userName" maxlength="16" title="登录账号不可为空" Value="@UserName" IsAutoFocus="true" PlaceHolder="登录账号" />
|
||||
</BootstrapInputGroup>
|
||||
<BootstrapInputGroup class="mt-3">
|
||||
<BootstrapInputGroupIcon Icon="fa fa-fw fa-lock" />
|
||||
<BootstrapPassword name="password" title="登录密码不可为空" PlaceHolder="登录密码" Value="@Password" />
|
||||
</BootstrapInputGroup>
|
||||
}
|
||||
<div class="d-flex justify-content-between mt-3">
|
||||
<Checkbox @bind-Value="RememberPassword" Color="Color.Primary" ShowAfterLabel="true" DisplayText="记住密码自动登录" OnValueChanged="OnRememberPassword" />
|
||||
<Block Condition="AllowMobile">
|
||||
<SwitchButton @bind-ToggleState="UseMobileLogin" OnClick="OnClickSwitchButton" OffText="短信验证登录" OnText="用户密码登录" />
|
||||
</Block>
|
||||
</div>
|
||||
<button class="btn-login btn-lg btn-block mt-3" data-bs-toggle="tooltip" title="不填写密码默认使用 Gitee 认证">登 录</button>
|
||||
<div class="d-flex justify-content-between mt-3">
|
||||
<LinkButton Text="申请账号" OnClick="OnSignUp" />
|
||||
<LinkButton Text="忘记密码" OnClick="OnForgotPassword" />
|
||||
</div>
|
||||
<Block Condition="AllowOAuth">
|
||||
<Divider Text="其他方式登录" />
|
||||
<div class="login-list">
|
||||
<LinkButton Url="Account/Gitee" Title="使用 Gitee 帐号登录" ImageUrl="images/gitee.svg" />
|
||||
<LinkButton Url="Account/Gitee" Title="使用 GitHub 帐号登录" ImageUrl="images/git.svg" />
|
||||
<LinkButton Url="#" Title="微信-暂未实现" ImageUrl="images/weixin-2.svg" />
|
||||
<LinkButton Url="Account/Tencent" Title="使用 QQ 账号登录" ImageUrl="images/qq.svg" />
|
||||
<LinkButton Url="Account/Alipay" Title="使用支付宝账号登录" ImageUrl="images/zhifubao.svg" />
|
||||
</div>
|
||||
</Block>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
using BootstrapAdmin.Web.Core;
|
||||
using Microsoft.JSInterop;
|
||||
|
||||
namespace BootstrapAdmin.Web.Components;
|
||||
|
||||
public partial class AdminLogin
|
||||
{
|
||||
private string? Title { get; set; }
|
||||
|
||||
private bool AllowMobile { get; set; } = true;
|
||||
|
||||
private bool UseMobileLogin { get; set; }
|
||||
|
||||
private bool AllowOAuth { get; set; } = true;
|
||||
|
||||
private bool RememberPassword { get; set; }
|
||||
|
||||
private ElementReference LoginForm { get; set; }
|
||||
|
||||
private string? PostUrl { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string? ReturnUrl { get; set; }
|
||||
|
||||
[Inject]
|
||||
[NotNull]
|
||||
private IDict? DictsService { get; set; }
|
||||
|
||||
private string? UserName { get; set; }
|
||||
|
||||
private string? Password { get; set; }
|
||||
|
||||
[Inject]
|
||||
[NotNull]
|
||||
private IJSRuntime? JSRuntime { get; set; }
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
|
||||
Title = DictsService.GetWebTitle();
|
||||
|
||||
PostUrl = QueryHelper.AddQueryString("/Account/Login", "ReturnUrl", ReturnUrl ?? "");
|
||||
|
||||
#if DEBUG
|
||||
UserName = "Admin";
|
||||
Password = "123789";
|
||||
#endif
|
||||
}
|
||||
|
||||
void OnClickSwitchButton()
|
||||
{
|
||||
var rem = RememberPassword ? "true" : "false";
|
||||
PostUrl = QueryHelper.AddQueryString(UseMobileLogin ? "/Account/Mobile" : "/Account/Login", new Dictionary<string, string?>()
|
||||
{
|
||||
[nameof(ReturnUrl)] = ReturnUrl,
|
||||
["remember"] = rem
|
||||
});
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// OnAfterRenderAsync 方法
|
||||
/// </summary>
|
||||
/// <param name="firstRender"></param>
|
||||
/// <returns></returns>
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
await base.OnAfterRenderAsync(firstRender);
|
||||
|
||||
if (firstRender)
|
||||
{
|
||||
// register javascript
|
||||
await JSRuntime.InvokeVoidAsync("$.login", LoginForm, "api/Login");
|
||||
}
|
||||
}
|
||||
|
||||
Task OnRememberPassword(bool remember)
|
||||
{
|
||||
OnClickSwitchButton();
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
void OnSignUp()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
void OnForgotPassword()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
.form-signin-heading {
|
||||
margin: 0;
|
||||
padding: 20px 15px;
|
||||
text-align: center;
|
||||
background-color: #41cac0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.login-wrap .card, .login-wrap .card:hover, .modal .card, .modal .card:hover {
|
||||
border: 1px solid #84bbe2;
|
||||
}
|
||||
|
||||
::deep .btn-login {
|
||||
background: #f67a6e;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
box-shadow: 0 4px #e56b60;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
::deep .btn-login:focus {
|
||||
box-shadow: 0 4px #e56b60;
|
||||
}
|
||||
|
||||
::deep .input-group-text {
|
||||
background-color: #6bc3f4;
|
||||
border-color: #1ca0e9;
|
||||
}
|
||||
|
||||
::deep .form-check-label {
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
::deep .form-control {
|
||||
border-color: #1ca0e9 !important;
|
||||
}
|
||||
|
||||
::deep .divider-wrap {
|
||||
background-color: #7c86bb;
|
||||
}
|
||||
|
||||
::deep .divider-text {
|
||||
background-color: #a7daf9;
|
||||
}
|
||||
|
||||
.login-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.login-list ::deep img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
::deep .btn-sms {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.form-signin {
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
max-width: 320px;
|
||||
border: solid 1px #ddd;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.form-signin-heading {
|
||||
padding: 28px 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.login-wrap {
|
||||
width: 300px;
|
||||
height: 274px;
|
||||
position: relative;
|
||||
left: 346px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.slidercaptcha {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.slidercaptcha, .slidercaptcha.oauth {
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.slidercaptcha.card .card-body {
|
||||
padding: 15px 15px 0 15px;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.login-footer .login-footer-body li a {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,46 +3,6 @@
|
|||
|
||||
<div class="wrap">
|
||||
<div class="container">
|
||||
<form method="post" class="form-signin" data-mobile="@UseMobileLogin" action="@PostUrl" @ref="LoginForm">
|
||||
<h2 class="form-signin-heading">@Title</h2>
|
||||
<div class="login-wrap">
|
||||
@if (UseMobileLogin)
|
||||
{
|
||||
<SMSButton />
|
||||
}
|
||||
else
|
||||
{
|
||||
<BootstrapInputGroup>
|
||||
<BootstrapInputGroupIcon Icon="fa fa-fw fa-user" />
|
||||
<BootstrapInput TValue="string" name="userName" maxlength="16" title="登录账号不可为空" Value="@UserName" IsAutoFocus="true" PlaceHolder="登录账号" />
|
||||
</BootstrapInputGroup>
|
||||
<BootstrapInputGroup class="mt-3">
|
||||
<BootstrapInputGroupIcon Icon="fa fa-fw fa-lock" />
|
||||
<BootstrapPassword name="password" title="登录密码不可为空" PlaceHolder="登录密码" Value="@Password" />
|
||||
</BootstrapInputGroup>
|
||||
}
|
||||
<div class="d-flex justify-content-between mt-3">
|
||||
<Checkbox @bind-Value="RememberPassword" Color="Color.Primary" ShowAfterLabel="true" DisplayText="记住密码自动登录" OnValueChanged="OnRememberPassword" />
|
||||
<Block Condition="AllowMobile">
|
||||
<SwitchButton @bind-ToggleState="UseMobileLogin" OnClick="OnClickSwitchButton" OffText="短信验证登录" OnText="用户密码登录" />
|
||||
</Block>
|
||||
</div>
|
||||
<button class="btn-login btn-lg btn-block mt-3" data-bs-toggle="tooltip" title="不填写密码默认使用 Gitee 认证">登 录</button>
|
||||
<div class="d-flex justify-content-between mt-3">
|
||||
<LinkButton Text="申请账号" OnClick="OnSignUp" />
|
||||
<LinkButton Text="忘记密码" OnClick="OnForgotPassword" />
|
||||
</div>
|
||||
<Block Condition="AllowOAuth">
|
||||
<Divider Text="其他方式登录" />
|
||||
<div class="login-list">
|
||||
<LinkButton Url="Account/Gitee" Title="使用 Gitee 帐号登录" ImageUrl="images/gitee.svg" />
|
||||
<LinkButton Url="Account/Gitee" Title="使用 GitHub 帐号登录" ImageUrl="images/git.svg" />
|
||||
<LinkButton Url="#" Title="微信-暂未实现" ImageUrl="images/weixin-2.svg" />
|
||||
<LinkButton Url="Account/Tencent" Title="使用 QQ 账号登录" ImageUrl="images/qq.svg" />
|
||||
<LinkButton Url="Account/Alipay" Title="使用支付宝账号登录" ImageUrl="images/zhifubao.svg" />
|
||||
</div>
|
||||
</Block>
|
||||
</div>
|
||||
</form>
|
||||
<AdminLogin ReturnUrl="@ReturnUrl" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,99 +1,11 @@
|
|||
using BootstrapAdmin.Web.Core;
|
||||
using Microsoft.JSInterop;
|
||||
|
||||
namespace BootstrapAdmin.Web.Pages.Account;
|
||||
namespace BootstrapAdmin.Web.Pages.Account;
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
public partial class Login
|
||||
{
|
||||
private string? Title { get; set; }
|
||||
|
||||
private bool AllowMobile { get; set; } = true;
|
||||
|
||||
private bool UseMobileLogin { get; set; }
|
||||
|
||||
private bool AllowOAuth { get; set; } = true;
|
||||
|
||||
private bool RememberPassword { get; set; }
|
||||
|
||||
private ElementReference LoginForm { get; set; }
|
||||
|
||||
private string? PostUrl { get; set; }
|
||||
|
||||
[SupplyParameterFromQuery]
|
||||
[Parameter]
|
||||
public string? ReturnUrl { get; set; }
|
||||
|
||||
[Inject]
|
||||
[NotNull]
|
||||
private IDict? DictsService { get; set; }
|
||||
|
||||
[Inject]
|
||||
[NotNull]
|
||||
private IJSRuntime? JSRuntime { get; set; }
|
||||
|
||||
private string? UserName { get; set; }
|
||||
|
||||
private string? Password { get; set; }
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
|
||||
Title = DictsService.GetWebTitle();
|
||||
|
||||
PostUrl = QueryHelper.AddQueryString("/Account/Login", "ReturnUrl", ReturnUrl ?? "");
|
||||
|
||||
#if DEBUG
|
||||
UserName = "Admin";
|
||||
Password = "123789";
|
||||
#endif
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// OnAfterRenderAsync 方法
|
||||
/// </summary>
|
||||
/// <param name="firstRender"></param>
|
||||
/// <returns></returns>
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
await base.OnAfterRenderAsync(firstRender);
|
||||
|
||||
if (firstRender)
|
||||
{
|
||||
// register javascript
|
||||
await JSRuntime.InvokeVoidAsync("$.login", LoginForm, "api/Login");
|
||||
}
|
||||
}
|
||||
|
||||
void OnClickSwitchButton()
|
||||
{
|
||||
var rem = RememberPassword ? "true" : "false";
|
||||
PostUrl = QueryHelper.AddQueryString(UseMobileLogin ? "/Account/Mobile" : "/Account/Login", new Dictionary<string, string?>()
|
||||
{
|
||||
[nameof(ReturnUrl)] = ReturnUrl,
|
||||
["remember"] = rem
|
||||
});
|
||||
}
|
||||
|
||||
Task OnRememberPassword(bool remember)
|
||||
{
|
||||
OnClickSwitchButton();
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
void OnSignUp()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
void OnForgotPassword()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,86 +6,6 @@
|
|||
bottom: 0;
|
||||
}
|
||||
|
||||
.form-signin-heading {
|
||||
margin: 0;
|
||||
padding: 20px 15px;
|
||||
text-align: center;
|
||||
background-color: #41cac0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.login-wrap .card, .login-wrap .card:hover, .modal .card, .modal .card:hover {
|
||||
border: 1px solid #84bbe2;
|
||||
}
|
||||
|
||||
::deep .btn-login {
|
||||
background: #f67a6e;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
box-shadow: 0 4px #e56b60;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
::deep .btn-login:focus {
|
||||
box-shadow: 0 4px #e56b60;
|
||||
}
|
||||
|
||||
::deep .input-group-text {
|
||||
background-color: #6bc3f4;
|
||||
border-color: #1ca0e9;
|
||||
}
|
||||
|
||||
::deep .form-check-label {
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
::deep .form-control {
|
||||
border-color: #1ca0e9 !important;
|
||||
}
|
||||
|
||||
::deep .divider-wrap {
|
||||
background-color: #7c86bb;
|
||||
}
|
||||
|
||||
::deep .divider-text {
|
||||
background-color: #a7daf9;
|
||||
}
|
||||
|
||||
.login-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.login-list ::deep img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
::deep .btn-sms {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.form-signin {
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
max-width: 320px;
|
||||
border: solid 1px #ddd;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.wrap {
|
||||
background-color: #5bc0de;
|
||||
|
|
@ -101,39 +21,4 @@
|
|||
margin: 0 auto;
|
||||
margin-top: calc(100vh / 2 - 190px);
|
||||
}
|
||||
|
||||
.form-signin-heading {
|
||||
padding: 28px 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.login-wrap {
|
||||
width: 300px;
|
||||
height: 274px;
|
||||
position: relative;
|
||||
left: 346px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.slidercaptcha {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.slidercaptcha, .slidercaptcha.oauth {
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.slidercaptcha.card .card-body {
|
||||
padding: 15px 15px 0 15px;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.login-footer .login-footer-body li a {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue