RANGER-4659: Add eye icon for password visibility in Ranger Login Page

Signed-off-by: Mehul Parikh <mehul@apache.org>
apache · Jan 30, 2024 · 43cb907 · 43cb907
1 parent 4a621c2
commit 43cb907
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/security-admin/src/main/webapp/login.jsp b/security-admin/src/main/webapp/login.jsp
@@ -74,7 +74,10 @@
                         <label><i class="fa fa-user"></i> Username:</label>
                         <input type="text" name="username" id="username" tabindex="1" autofocus>
                         <label><i class="fa fa-lock"></i> Password:</label>
-                        <input type="password" name="password" id="password" tabindex="2" autocomplete="off">
+                        <div class="position-relative">
+                            <input type="password" name="password" id="password" tabindex="2" autocomplete="off">
+                            <i class="fa fa-eye-slash password-icon" id="show-password"></i>
+                        </div>
                     </div>
                     <span id="errorBox" class="help-inline" style="color:white;display:none;"><span class="errorMsg"></span>
                         <i class="fa fa-exclamation-triangle" style="color:#ae2817;"></i>
@@ -90,4 +93,4 @@
             </form>
         </section>
     </body>
-</html>
+</html>
diff --git a/security-admin/src/main/webapp/scripts/prelogin/XAPrelogin.js b/security-admin/src/main/webapp/scripts/prelogin/XAPrelogin.js
@@ -125,4 +125,14 @@ $(function() {
 			$(e.target).parent().removeClass('error');
 		}
 	});
+
+	$("#password").on("input", function() {
+		$("#show-password").toggle(this.value.trim() !== "");
+	});
+
+	$("#show-password").on("click", function() {
+		var showPassword = $("#password").is(":password");
+		$("#password").attr("type", showPassword ? "text" : "password");
+		$("#show-password").toggleClass("fa-eye-slash fa-eye");
+	});
 });
diff --git a/security-admin/src/main/webapp/styles/xa.css b/security-admin/src/main/webapp/styles/xa.css
@@ -1670,7 +1670,7 @@ body.login {
   border: solid #dedede;
   border-width: 0 0 1px 0;
   height: 30px;
-  padding: 0 10px;
+  padding: 0 32px 0 10px;
   width: 100%;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
@@ -4758,4 +4758,11 @@ input.textFiledInputPadding:disabled {
 .excludeRecursiveSupport {
   position: absolute;
   top: 30px;
-}
+}
+.password-icon {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  font-size: 15px;
+  cursor: pointer;
+}