RANGER-4659: Add eye icon for password visibility in Ranger Login Page
Signed-off-by: Mehul Parikh <mehul@apache.org>
diff --git a/security-admin/src/main/webapp/login.jsp b/security-admin/src/main/webapp/login.jsp
index ad82ea9..142aa03 100644
--- 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>
\ No newline at end of file
+</html>
diff --git a/security-admin/src/main/webapp/scripts/prelogin/XAPrelogin.js b/security-admin/src/main/webapp/scripts/prelogin/XAPrelogin.js
index a2eecca..28aab65 100644
--- a/security-admin/src/main/webapp/scripts/prelogin/XAPrelogin.js
+++ b/security-admin/src/main/webapp/scripts/prelogin/XAPrelogin.js
@@ -125,4 +125,14 @@
$(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
index de81011..8165a15 100644
--- a/security-admin/src/main/webapp/styles/xa.css
+++ b/security-admin/src/main/webapp/styles/xa.css
@@ -1670,7 +1670,7 @@
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 @@
.excludeRecursiveSupport {
position: absolute;
top: 30px;
-}
\ No newline at end of file
+}
+.password-icon {
+ position: absolute;
+ right: 8px;
+ top: 8px;
+ font-size: 15px;
+ cursor: pointer;
+}
