细化Lock Screen功能

Bootstrap.Admin/Bootstrap.Admin.csproj

@@ -207,6 +207,7 @@
       <DependentUpon>Global.asax</DependentUpon>
     </Compile>
     <Compile Include="Models\ContentModel.cs" />
+    <Compile Include="Models\LockModel.cs" />
     <Compile Include="Models\QueryDictOption.cs" />
     <Compile Include="Models\QueryGroupOption.cs" />
     <Compile Include="Models\QueryLogOption.cs" />

Bootstrap.Admin/Content/css/lock.css

@@ -1,74 +1,92 @@
-.lock-screen {
-    background: #02bac6 url("../../Content/images/lock-bg.jpg");
-    background-size: cover;
-    background-repeat: repeat;
-}
-
-.lock-wrapper {
-    margin: 10% auto;
-    max-width: 330px;
-}
-
-.lock-box {
-    background: rgba(255,255,255,.3);
-    padding: 20px;
-    border-radius: 10px;
-    -webkit-border-radius: 10px;
-    position: relative;
-}
-
-.lock-wrapper img {
-    border-radius: 50%;
-    -webkit-border-radius: 50%;
-    border: 5px solid #fff;
-    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;
-}
-
-div.input-group span {
-    top: 0;
-    background: #02b5c2;
-    border-color: #02b5c2;
-    color: #fff;
-}
+.lock-screen {
+    background: #02bac6 url("../../Content/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 #fff;
+    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-color: #2e6da4;
+    border-left: none;
+}
+
+div.input-group span {
+    top: 0;
+    background: #02b5c2;
+    border-color: #2e6da4;
+    color: #fff;
+}
+
+div.input-group input, div.input-group input:hover, div.input-group input:focus {
+    border-color: #2e6da4;
+    border-left: none;
+    border-right: none;
+}
+
+    div.input-group input.error {
+        background: #e66763;
+        border-color: red;
+    }

Bootstrap.Admin/Controllers/HomeController.cs

@@ -1,6 +1,7 @@
 using Bootstrap.Admin.Models;
 using Bootstrap.DataAccess;
 using Longbow.Security.Principal;
+using System;
 using System.Web.Mvc;
 using System.Web.Security;
 
@@ -25,10 +26,16 @@ namespace Bootstrap.Admin.Controllers
         /// 
         /// </summary>
         /// <returns></returns>
-        [AllowAnonymous]
-        public ActionResult Lock()
+        public ActionResult Lock(LockModel model)
         {
-            return View();
+            if (!string.IsNullOrEmpty(model.Password))
+            {
+                return RedirectToAction("Login", new { userName = model.UserName, password = model.Password });
+            }
+            var user = UserHelper.RetrieveUsersByName(User.Identity.Name);
+            model.UserName = user.UserName;
+            model.DisplayName = user.DisplayName;
+            return View(model);
         }
         /// <summary>
         /// 

Bootstrap.Admin/Models/LockModel.cs

@@ -0,0 +1,7 @@
+namespace Bootstrap.Admin.Models
+{
+    public class LockModel : LoginModel
+    {
+        public string DisplayName { get; set; }
+    }
+}

Bootstrap.Admin/Models/LoginModel.cs

@@ -5,10 +5,12 @@
     /// </summary>
     public class LoginModel
     {
+        /// <summary>
+        /// 
+        /// </summary>
         public LoginModel()
         {
-            UserName = "Argo";
-            Password = "1111";
+
         }
         /// <summary>
         /// 

Bootstrap.Admin/Scripts/Content.js

@@ -11,6 +11,8 @@
     $(window).on('resize', iframeResposive);
 
     $('.menu-submenu a').click(function (event) {
+        var act = $(this).attr("data-act");
+        if (act === "True") return true;
         event.preventDefault();
         $('.menu-submenu a, .menu-submenu p').removeClass('active');
         $(this).addClass('active');

Bootstrap.Admin/Scripts/lock.js

@@ -1,24 +1,17 @@
 $(function () {
     $('body').addClass('lock-screen');
+    $('#time').text((new Date()).format('HH:mm:ss'));
 
-    function startTime() {
-        var today = new Date();
-        var h = today.getHours();
-        var m = today.getMinutes();
-        var s = today.getSeconds();
-        // add a zero in front of numbers<10
-        m = checkTime(m);
-        s = checkTime(s);
-        document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
-        t = setTimeout(function () { startTime() }, 500);
-    }
-
-    function checkTime(i) {
-        if (i < 10) {
-            i = "0" + i;
-        }
-        return i;
-    }
+    setInterval(function () {
+        $('#time').text((new Date()).format('HH:mm:ss'));
+    }, 500);
 
-    startTime();
+    $.extend($.validator.messages, { required: "请输入密码" });
+    // validate
+    $('form').autoValidate({
+        password: {
+            required: true,
+            maxlength: 50
+        }
+    });
 });

Bootstrap.Admin/Views/Home/Lock.cshtml

@@ -1,4 +1,5 @@
-@{
+@model LockModel
+@{
     ViewBag.Title = "系统登陆";
     Layout = "~/Views/Shared/_Layout.cshtml";
 }
@@ -6,15 +7,18 @@
     <link href="~/Content/css/lock.css" rel="stylesheet" />
 }
 @section javascript {
+    <script src="~/content/js/jquery.validate.js"></script>
+    <script src="~/content/js/messages_zh.js"></script>
     <script src="~/Scripts/lock.js"></script>
 }
 <div class="lock-wrapper">
     <div id="time"></div>
     <div class="lock-box text-center">
         <img src="../../content/images/logo2.jpg" alt="lock avatar" />
-        <h1>Administrator</h1>
+        <h1>@Model.DisplayName</h1>
         <span class="locked">系统已锁定</span>
-        <form role="form" class="form-inline">
+        <form role="form" class="form-inline" method="post">
+            <input type="text" name="username" class="hide" value="@Model.UserName" />
             <div class="form-group col-lg-12">
                 <div class="input-group">
                     <span class="glyphicon glyphicon-lock input-group-addon"></span>

Bootstrap.Admin/Views/Shared/SubMenu.cshtml

@@ -5,7 +5,7 @@
     </li>
     @foreach (var menu in Model.Menus)
     {
-        <li><a href="@Url.Content(menu.Url)" class="@menu.Active"><i class="@menu.Icon"></i><span>@menu.Name</span></a></li>
+        <li><a href="@Url.Content(menu.Url)" data-act="@menu.Url.StartsWith("~")"><i class="@menu.Icon"></i><span>@menu.Name</span></a></li>
     }
 </ul>