feat: 增加锁屏页面
This commit is contained in:
Argo Zhang
parent
66860ba873
commit
d5bf54a4dc
|
|
@ -21,8 +21,24 @@ namespace Bootstrap.Admin.Controllers
|
|||
[AutoValidateAntiforgeryToken]
|
||||
public class AccountController : Controller
|
||||
{
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// 系统锁屏界面
|
||||
/// </summary>
|
||||
/// <returns></returns>
|
||||
public ActionResult Lock()
|
||||
{
|
||||
var user = UserHelper.RetrieveUserByUserName(User.Identity.Name);
|
||||
//await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
|
||||
var urlReferrer = Request.Headers["Referer"].FirstOrDefault();
|
||||
return View(new LockModel(this)
|
||||
{
|
||||
ReturnUrl = WebUtility.UrlEncode(string.IsNullOrEmpty(urlReferrer) ? CookieAuthenticationDefaults.LoginPath.Value : urlReferrer)
|
||||
});
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 系统登录方法
|
||||
/// </summary>
|
||||
/// <returns></returns>
|
||||
[HttpGet]
|
||||
|
|
@ -61,7 +77,7 @@ namespace Bootstrap.Admin.Controllers
|
|||
}
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// 创建登录用户信息
|
||||
/// </summary>
|
||||
/// <param name="onlineUserSvr"></param>
|
||||
/// <param name="ipLocator"></param>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
using Microsoft.AspNetCore.Mvc;
|
||||
|
||||
namespace Bootstrap.Admin.Models
|
||||
{
|
||||
/// <summary>
|
||||
/// 系统锁屏数据模型
|
||||
/// </summary>
|
||||
public class LockModel : HeaderBarModel
|
||||
{
|
||||
/// <summary>
|
||||
/// 构造函数
|
||||
/// </summary>
|
||||
/// <param name="controller"></param>
|
||||
public LockModel(ControllerBase controller) : base(controller.User.Identity)
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 获得/设置 返回路径
|
||||
/// </summary>
|
||||
public string ReturnUrl { get; set; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
@model LockModel
|
||||
@{
|
||||
ViewBag.Title = "系统登陆";
|
||||
Layout = "~/Views/Shared/_Layout.cshtml";
|
||||
}
|
||||
@section css {
|
||||
<environment include="Development">
|
||||
<link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
|
||||
<link href="~/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
|
||||
</environment>
|
||||
<environment exclude="Development">
|
||||
<link href="~/lib/twitter-bootstrap/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
|
||||
</environment>
|
||||
<link href="~/lib/captcha/slidercaptcha.css" rel="stylesheet" />
|
||||
<link href="~/css/lock.css" rel="stylesheet" />
|
||||
}
|
||||
@section javascript {
|
||||
<environment include="Development">
|
||||
<script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.js"></script>
|
||||
<script src="~/lib/validate/jquery.validate.js"></script>
|
||||
<script src="~/lib/validate/localization/messages_zh.js"></script>
|
||||
<script src="~/lib/sweetalert/sweetalert2.js" rel="stylesheet"></script>
|
||||
</environment>
|
||||
<environment exclude="Development">
|
||||
<script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="~/lib/validate/jquery.validate.min.js"></script>
|
||||
<script src="~/lib/validate/localization/messages_zh.min.js"></script>
|
||||
<script src="~/lib/sweetalert/sweetalert2.min.js" rel="stylesheet"></script>
|
||||
</environment>
|
||||
<script src="~/lib/captcha/longbow.slidercaptcha.js"></script>
|
||||
<script src="~/lib/longbow/longbow.common.js"></script>
|
||||
<script src="~/lib/longbow/longbow.validate.js"></script>
|
||||
<script src="~/js/lock.js"></script>
|
||||
}
|
||||
<div class="lock-wrapper">
|
||||
<div id="time"></div>
|
||||
<div class="lock-box text-center">
|
||||
<img alt="lock avatar" src="@Url.Content(Model.Icon)" />
|
||||
<h1>@Model.DisplayName</h1>
|
||||
<span class="locked">系统已锁定</span>
|
||||
<form role="form" class="form-inline justify-content-center" method="post" autocomplete="off" action="~/Account/Login?ReturnUrl=@Model.ReturnUrl">
|
||||
<input type="hidden" name="username" value="@Model.UserName" />
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input type="password" name="password" class="form-control" value="" autocomplete="off" placeholder="密码" />
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-lock" type="submit">
|
||||
<i class="fa fa-arrow-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
.lock-screen {
|
||||
background: #02bac6 url("images/lock-bg.jpg");
|
||||
background-size: cover;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
.lock-wrapper {
|
||||
margin: 6% auto;
|
||||
max-width: 330px;
|
||||
}
|
||||
|
||||
.lock-box {
|
||||
background: rgba(255,255,255,.3);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lock-box .form-group {
|
||||
float: inherit !important;
|
||||
}
|
||||
|
||||
.lock-wrapper img {
|
||||
border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border: 5px solid #28a745;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.lock-wrapper h1 {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.lock-wrapper .locked {
|
||||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
color: #026f7a;
|
||||
}
|
||||
|
||||
.btn-lock, .btn-lock:hover {
|
||||
background: #02b5c2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.lock-input {
|
||||
width: 83%;
|
||||
border: none;
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
#time {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 60px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.btn-lock, .btn-lock:hover {
|
||||
background: #02b5c2;
|
||||
color: #fff;
|
||||
outline: none !important;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.has-error .btn-lock {
|
||||
color: #a94442;
|
||||
background-color: #f2dede;
|
||||
border-color: #a94442;
|
||||
}
|
||||
|
||||
.has-success .btn-lock {
|
||||
color: #3c763d;
|
||||
background-color: #dff0d8;
|
||||
border-color: #3c763d;
|
||||
}
|
||||
|
||||
div.input-group span {
|
||||
top: 0;
|
||||
background: #02b5c2;
|
||||
border-color: #2e6da4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-inline .input-group input:focus {
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
div.input-group input, div.input-group input:hover, .btn-lock {
|
||||
border-color: #1d9238;
|
||||
}
|
||||
|
||||
div.input-group input:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
div.input-group input, div.input-group input:hover, div.input-group input:focus {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
div.input-group input.error {
|
||||
background-color: #dcc4c4;
|
||||
border-color: #e21717;
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
$(function () {
|
||||
$('body').addClass('lock-screen');
|
||||
$('#time').text((new Date()).format('HH:mm:ss'));
|
||||
|
||||
setInterval(function () {
|
||||
$('#time').text((new Date()).format('HH:mm:ss'));
|
||||
}, 500);
|
||||
|
||||
$.extend($.validator.messages, { required: "请输入密码" });
|
||||
|
||||
$(".lock-wrapper").autoCenter();
|
||||
});
|
||||
Loading…
Reference in New Issue