Browse Source

feat: 登录页 切换显示密码

caipin 5 days ago
parent
commit
1bb9755506
2 changed files with 20 additions and 1 deletions
  1. 15 1
      app/public/js/login.js
  2. 5 0
      app/view/login/login.ejs

+ 15 - 1
app/public/js/login.js

@@ -144,5 +144,19 @@ $(document).ready(function() {
 
     $('#focus-pwd').click(function () {
         $('#project-password').focus();
-    })
+    });
+
+    // 密码显示/隐藏切换
+    $('#toggle-password').click(function () {
+        const passwordInput = $('#project-password');
+        const passwordIcon = $('#password-icon');
+        
+        if (passwordInput.attr('type') === 'password') {
+            passwordInput.attr('type', 'text');
+            passwordIcon.removeClass('fa-eye-slash').addClass('fa-eye');
+        } else {
+            passwordInput.attr('type', 'password');
+            passwordIcon.removeClass('fa-eye').addClass('fa-eye-slash');
+        }
+    });
 });

+ 5 - 0
app/view/login/login.ejs

@@ -64,6 +64,11 @@
                         <div class="input-group-text"><img src="/public/images/icon_login_lock.png"></div>
                     </div>
                     <input type="password" id="project-password" name="project_password" class="form-control" placeholder="密码">
+                    <div class="input-group-append">
+                        <div class="input-group-text" style="cursor: pointer; background-color: #fff; border-left: none;" id="toggle-password">
+                            <i class="fa fa-eye-slash" id="password-icon"></i>
+                        </div>
+                    </div>
                 </div>
                 <div class="form-group <% if (projectData) { %>mb-5<% } else { %>mb-4<% } %>">
                     <div class="form-check d-flex justify-content-start pl-0">