登录优化

src/main/resources/static/html/password.html

@@ -3,6 +3,14 @@
 <meta http-equiv="expires" content="0">
 <script src="/thmz/js/button.js"></script>
 <script src="/thmz/js/password.js"></script>
+<style>
+    .update-hide-password{
+        -webkit-text-security: disc;
+    }
+    .update-show-password{
+        -webkit-text-security: none;
+    }
+</style>
 <div class="row">
     <div class="col-md-12 col-sm-12 col-xs-12">
         <div class="x_panel">
@@ -20,22 +28,25 @@
 
                 <form class="form-horizontal form-label-left" novalidate id="password_form">
                     <span class="section">密码重置</span>
-                    <div class="item form-group">
-                        <label for="oldPassword" class="control-label col-md-3">原密码</label>
-                        <div class="col-md-6 col-sm-6 col-xs-12">
-                            <input id="oldPassword" type="password" name="oldPassword" class="form-control col-md-7 col-xs-12" required="required">
+                    <div class="item form-group ">
+                        <label for="oldPassword" class="control-label col-md-3 col-sm-2">原密码</label>
+                        <div class="col-md-5 col-sm-5 col-xs-12 input-group">
+                            <input id="oldPassword" type="text" autocomplete="off" name="oldPassword" class="form-control col-md-7 col-xs-12  update-hide-password" required="required">
+                            <span id="updateOldPassword" class="input-group-addon" onclick="updateShowOrHidePassword('oldPassword','updateOldPassword')" style="border-left:none;cursor: pointer"><i class="fa fa-eye"></i></span>
                         </div>
                     </div>
-                    <div class="item form-group">
-                        <label for="password" class="control-label col-md-3">新密码</label>
-                        <div class="col-md-6 col-sm-6 col-xs-12">
-                            <input id="password" type="password" name="password"  class="form-control col-md-7 col-xs-12" required="required">
+                    <div class="item form-group ">
+                        <label for="password" class="control-label col-md-3 col-sm-2">新密码</label>
+                        <div class="col-md-5 col-sm-5 col-xs-12 input-group">
+                            <input id="password" type="text" autocomplete="off" name="password"  class="form-control col-md-7 col-xs-12  update-hide-password" required="required">
+                            <span id="updatePassword" class="input-group-addon" onclick="updateShowOrHidePassword('password','updatePassword')" style="border-left:none;cursor: pointer"><i class="fa fa-eye"></i></span>
                         </div>
                     </div>
-                    <div class="item form-group">
-                        <label for="password2" class="control-label col-md-3 col-sm-3 col-xs-12">新密码确认</label>
-                        <div class="col-md-6 col-sm-6 col-xs-12">
-                            <input id="password2" type="password" name="password2" data-validate-linked="password" class="form-control col-md-7 col-xs-12" required="required">
+                    <div class="item  form-group">
+                        <label for="password2" class="control-label col-md-3 col-sm-2 col-xs-12">新密码确认</label>
+                        <div class="col-md-5 col-sm-5 col-xs-12 input-group">
+                            <input id="password2" type="text" autocomplete="off" name="password2" data-validate-linked="password" class="form-control col-md-7 col-xs-12   update-hide-password" required="required">
+                            <span id="updatePassword2" class="input-group-addon" onclick="updateShowOrHidePassword('password2','updatePassword2')" style="border-left:none;cursor: pointer"><i class="fa fa-eye"></i></span>
                         </div>
                     </div>
                     <div class="item form-group" style="text-align: center;color: red">

src/main/resources/static/js/login.js

@@ -1,4 +1,4 @@
-
+var showOrHideFlag = true;
 $(function (){
     $.backstretch("../../thmz/images/backgrounds/back3.jpg");
     $('.login-form input[type="text"], .login-form input[type="password"], .login-form textarea').on('focus', function() {
@@ -35,6 +35,17 @@ $(function (){
 });
 
 
+function showOrHidePassword() {
+    showOrHideFlag = !showOrHideFlag;
+    if(showOrHideFlag){
+        $("#showOrHidePasswordId").html('<i class="fa fa-eye">')
+        $("#form-password").removeClass('show-password').addClass('hide-password')
+    }else {
+        $("#showOrHidePasswordId").html('<i class="fa fa-eye-slash">')
+        $("#form-password").removeClass('hide-password').addClass('show-password')
+    }
+}
+
 
 function login() {
     var password =$("#form-password").val()

src/main/resources/static/js/password.js

@@ -1,4 +1,8 @@
 //@ sourceURL=password.js
+var oldPasswordFlag = true
+var passwordFlag = true
+var passwordFlag2 = true
+
 $(function (){
 /**
  * 提交按钮点击事件
@@ -42,7 +46,26 @@ $("#cancel").on("click",function (t) {
 });
 
 
-
+function updateShowOrHidePassword(inputPasswordId,spanId) {
+    let tempflag ;
+    if(inputPasswordId=='oldPassword'){
+        oldPasswordFlag = !oldPasswordFlag
+        tempflag = oldPasswordFlag
+    }else if(inputPasswordId=='password'){
+        passwordFlag = !passwordFlag
+        tempflag  = passwordFlag
+    }else {
+        passwordFlag2 = !passwordFlag2
+        tempflag = passwordFlag2
+    }
+    if(tempflag){
+        $("#"+spanId).html('<i class="fa fa-eye">')
+        $("#"+inputPasswordId).removeClass('update-show-password').addClass('update-hide-password')
+    }else {
+        $("#"+spanId).html('<i class="fa fa-eye-slash">')
+        $("#"+inputPasswordId).removeClass('update-hide-password').addClass('update-show-password')
+    }
+}
 
 
 /**

src/main/resources/templates/login.html

@@ -24,8 +24,18 @@
     <script src="/thmz/js/common/md5.js"></script>
     <script src="/thmz/js/login.js"></script>
     <title>登陆页</title>
+    <style>
+        .hide-password{
+            -webkit-text-security: disc;
+        }
+        .show-password{
+            -webkit-text-security: none;
+        }
+    </style>
 </head>
 
+
+
 <body>
 
 <!-- Top content -->
@@ -62,9 +72,10 @@
                                 <label class="sr-only" for="form-username">工号</label>
                                 <input type="text" name="form-username" autocomplete="off"   placeholder="工号" class="form-username form-control" id="form-username">
                             </div>
-                            <div class="form-group">
+                            <div class="input-group " style="margin-bottom: 5px">
                                 <label class="sr-only" >密码</label>
-                                <input type="text" style="-webkit-text-security: disc" autocomplete="off"  name="form-password" placeholder="密码" class="form-username form-control" id="form-password">
+                               <input type="text"  autocomplete="off"  name="form-password" placeholder="密码(初始密码为thyy加您的工号,如:thyy1234)" class="form-username form-control  hide-password" id="form-password">
+                                <span id="showOrHidePasswordId" class="input-group-addon" onclick="showOrHidePassword()" style="border: 3px solid #ddd;border-left:none;cursor: pointer"><i class="fa fa-eye"></i></span>
                             </div>
                             <button type="button" id="loginButton" class="btn">登录!</button>
                         </form>