orga0063
/
BootstrapAdmin11
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: 改造登录首页组件

This commit is contained in:
Argo-Tianyi 2022-01-27 13:31:37 +08:00
parent a53c0cd791
commit 135f0615f5
5 changed files with 66 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/blazor/admin/BootstrapAdmin.Web/Components/AdminLogin.razor
View File

@ -1,35 +1,39 @@
<form method="post" class="form-signin" action="@PostUrl" @ref="LoginForm"> <div class="wrap">
<h2 class="form-signin-heading">@Title</h2> <div class="container">
<div class="@ClassString"> <form method="post" class="form-signin" action="@PostUrl" @ref="LoginForm">
@if (AllowMobile) <h2 class="form-signin-heading">@Title</h2>
{ <div class="@ClassString">
<div class="login-sms"> @if (AllowMobile)
<SMSLogin /> {
<div class="login-sms">
<SMSLogin />
</div>
}
<div class="login-up">
<UserLogin />
</div>
<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> </div>
} </form>
<div class="login-up">
<UserLogin />
</div>
<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> </div>
</form> </div>

4
src/blazor/admin/BootstrapAdmin.Web/Components/AdminLogin.razor.cs
View File

@ -78,7 +78,7 @@ public partial class AdminLogin : IDisposable
base.OnInitialized(); base.OnInitialized();
Title = DictsService.GetWebTitle(); Title = DictsService.GetWebTitle();
PostUrl = QueryHelper.AddQueryString("/Account/Login", new Dictionary<string, string?> PostUrl = QueryHelper.AddQueryString("Account/Login", new Dictionary<string, string?>
{ {
["ReturnUrl"] = ReturnUrl, ["ReturnUrl"] = ReturnUrl,
["AppId"] = AppId ["AppId"] = AppId
@ -88,7 +88,7 @@ public partial class AdminLogin : IDisposable
void OnClickSwitchButton() void OnClickSwitchButton()
{ {
var rem = RememberPassword ? "true" : "false"; var rem = RememberPassword ? "true" : "false";
PostUrl = QueryHelper.AddQueryString(UseMobileLogin ? "/Account/Mobile" : "/Account/Login", new Dictionary<string, string?>() PostUrl = QueryHelper.AddQueryString(UseMobileLogin ? "Account/Mobile" : "Account/Login", new Dictionary<string, string?>()
{ {
[nameof(ReturnUrl)] = ReturnUrl, [nameof(ReturnUrl)] = ReturnUrl,
["AppId"] = AppId, ["AppId"] = AppId,

27
src/blazor/admin/BootstrapAdmin.Web/Components/AdminLogin.razor.css
View File

@ -1,4 +1,29 @@
.form-signin-heading { .wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
@media (min-width: 768px) {
.wrap {
background-color: #5bc0de;
background: url('../images/bg2.jpg') fixed no-repeat;
background-size: 100% 100%;
}
.container {
background: url('../images/bg3.png') no-repeat;
background-size: contain;
width: 704px;
height: 404px;
margin: 0 auto;
margin-top: calc(100vh / 2 - 190px);
}
}
.form-signin-heading {
margin: 0; margin: 0;
padding: 20px 15px; padding: 20px 15px;
text-align: center; text-align: center;

6
src/blazor/admin/BootstrapAdmin.Web/Pages/Account/Login.razor
View File

@ -1,8 +1,4 @@
@layout LoginLayout @layout LoginLayout
@page "/Account/Login" @page "/Account/Login"
<div class="wrap"> <AdminLogin ReturnUrl="@ReturnUrl" AppId="@AppId" />
<div class="container">
<AdminLogin ReturnUrl="@ReturnUrl" AppId="@AppId" />
</div>
</div>

24
src/blazor/admin/BootstrapAdmin.Web/Pages/Account/Login.razor.css
View File

@ -1,24 +0,0 @@
.wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
@media (min-width: 768px) {
.wrap {
background-color: #5bc0de;
background: url('../images/bg2.jpg') fixed no-repeat;
background-size: 100% 100%;
}
.container {
background: url('../images/bg3.png') no-repeat;
background-size: contain;
width: 704px;
height: 404px;
margin: 0 auto;
margin-top: calc(100vh / 2 - 190px);
}
}