Add password visibility toggle feature

This commit is contained in:
qwe 2018-05-08 01:52:54 +02:00
parent e05b107cc1
commit 97b178dbdb
3 changed files with 33 additions and 0 deletions

View file

@ -1666,6 +1666,23 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
color: #2ecc40;
}
#settings #change-password .see-pw {
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
color: #cdd3da;
position: absolute;
top: 13px;
right: 25px;
}
#settings #change-password .see-pw::before {
content: "\f06e";
}
#settings #change-password .see-pw.visible::before {
content: "\f070";
}
#settings .error {
color: #e74c3c;
margin-top: 0.2em;

View file

@ -29,6 +29,19 @@ socket.on("configuration", function(data) {
pop.play();
});
$(".see-pw").on("click", function() {
const $this = $(this);
const input = $this.closest("div").find("input");
if (input.attr("type") === "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
$this.toggleClass("visible");
});
options.initialize();
webpush.initialize();

View file

@ -190,14 +190,17 @@
<div class="col-sm-12">
<label for="old_password_input" class="sr-only">Enter current password</label>
<input type="password" id="old_password_input" name="old_password" class="input" placeholder="Enter current password">
<i class="see-pw"></i>
</div>
<div class="col-sm-12">
<label for="new_password_input" class="sr-only">Enter desired new password</label>
<input type="password" id="new_password_input" name="new_password" class="input" placeholder="Enter desired new password">
<i class="see-pw"></i>
</div>
<div class="col-sm-12">
<label for="verify_password_input" class="sr-only">Repeat new password</label>
<input type="password" id="verify_password_input" name="verify_password" class="input" placeholder="Repeat new password">
<i class="see-pw"></i>
</div>
<div class="col-sm-12 feedback"></div>
<div class="col-sm-12">