feat: 增加锁屏页面

Bootstrap.Admin/Controllers/AccountController.cs

@@ -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>

Bootstrap.Admin/Models/LockModel.cs

@@ -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; }
+    }
+}

Bootstrap.Admin/Views/Account/Lock.cshtml

@@ -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>

Bootstrap.Admin/wwwroot/css/lock.css

@@ -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;
+    }

Bootstrap.Admin/wwwroot/js/lock.js

@@ -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();
+});