mirror of
https://github.com/thelounge/thelounge
synced 2024-11-22 20:13:07 +00:00
refactor password visibility toggle feature
This commit is contained in:
qwe
parent
2d49e34805
commit
bdfc367c6c
9 changed files with 65 additions and 37 deletions
4
client/css/bootstrap.css
vendored
4
client/css/bootstrap.css
vendored
|
|
@ -143,6 +143,10 @@ input::-moz-focus-inner {
|
|||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
input::-ms-clear,
|
||||
input::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1675,30 +1675,49 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.password-container input {
|
||||
padding-right: 37px;
|
||||
}
|
||||
|
||||
#sign-in .password-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.password-container .see-pw {
|
||||
#sign-in .password-container .reveal-password {
|
||||
top: 31px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.password-container .reveal-password {
|
||||
height: 37px;
|
||||
width: 37px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.password-container .reveal-password i {
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
font-size: 16px;
|
||||
color: #cdd3da;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#sign-in .password-container .see-pw {
|
||||
top: 42px;
|
||||
right: 10px;
|
||||
.password-container .reveal-password i:hover {
|
||||
color: #79838c;
|
||||
}
|
||||
|
||||
.password-container .see-pw::before {
|
||||
.password-container .reveal-password i::before {
|
||||
content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
|
||||
}
|
||||
|
||||
.password-container .see-pw.visible::before {
|
||||
.password-container .reveal-password.visible i::before {
|
||||
content: "\f070"; /* https://fontawesome.com/icons/eye-slash?style=solid */
|
||||
color: #ff4136;
|
||||
}
|
||||
|
||||
#help .help-item {
|
||||
|
|
|
|||
|
|
@ -23,9 +23,7 @@ socket.on("auth", function(data) {
|
|||
|
||||
login.html(templates.windows.sign_in());
|
||||
|
||||
$(".see-pw").on("click", function() {
|
||||
utils.togglePasswordField(this);
|
||||
});
|
||||
utils.togglePasswordField(".reveal-password");
|
||||
|
||||
login.find("form").on("submit", function() {
|
||||
const form = $(this);
|
||||
|
|
|
|||
|
|
@ -30,9 +30,7 @@ socket.on("configuration", function(data) {
|
|||
pop.play();
|
||||
});
|
||||
|
||||
$(".see-pw").on("click", function() {
|
||||
utils.togglePasswordField(this);
|
||||
});
|
||||
utils.togglePasswordField(".reveal-password");
|
||||
|
||||
options.initialize();
|
||||
webpush.initialize();
|
||||
|
|
@ -89,8 +87,6 @@ socket.on("configuration", function(data) {
|
|||
$(this).data("lastvalue", nick);
|
||||
});
|
||||
|
||||
$(".see-pw").on("click", function() {
|
||||
utils.togglePasswordField(this);
|
||||
});
|
||||
utils.togglePasswordField(".reveal-password");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -43,7 +43,5 @@ socket.on("network:info", function(data) {
|
|||
.click();
|
||||
});
|
||||
|
||||
$(".see-pw").on("click", function() {
|
||||
utils.togglePasswordField(this);
|
||||
});
|
||||
utils.togglePasswordField(".reveal-password");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -98,19 +98,22 @@ function toggleNotificationMarkers(newState) {
|
|||
viewport.toggleClass("notified", newState);
|
||||
}
|
||||
|
||||
function togglePasswordField(that) {
|
||||
const $this = $(that);
|
||||
const input = $this.closest("div").find("input");
|
||||
function togglePasswordField(elem) {
|
||||
$(elem).on("click", function() {
|
||||
const $this = $(this);
|
||||
const input = $this.closest("div").find("input");
|
||||
|
||||
if (input.attr("type") === "password") {
|
||||
input.attr("type", "text");
|
||||
$this.attr("title", "Hide Password");
|
||||
} else {
|
||||
input.attr("type", "password");
|
||||
$this.attr("title", "Show Password");
|
||||
}
|
||||
input.attr("type") === "password" ? input.attr("type", "text") : input.attr("type", "password");
|
||||
|
||||
$this.toggleClass("visible");
|
||||
swapLabel($this);
|
||||
$this.toggleClass("visible");
|
||||
});
|
||||
}
|
||||
|
||||
// Given a span, swap its aria-label with the content of `data-alt-label`
|
||||
function swapLabel(span) {
|
||||
const altText = span.data("alt-label");
|
||||
span.data("alt-label", span.attr("aria-label")).attr("aria-label", altText);
|
||||
}
|
||||
|
||||
function confirmExit() {
|
||||
|
|
|
|||
|
|
@ -80,7 +80,9 @@
|
|||
</div>
|
||||
<div class="col-sm-9 password-container">
|
||||
<input class="input" id="connect:password" type="password" name="password" value="{{defaults.password}}">
|
||||
<i class="see-pw" title="Show Password"></i>
|
||||
<span class="reveal-password tooltipped tooltipped-n tooltipped-no-delay" aria-label="Show Password" data-alt-label="Hide Password">
|
||||
<i></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<label for="connect:realname">Real name</label>
|
||||
|
|
|
|||
|
|
@ -190,17 +190,23 @@
|
|||
<div class="col-sm-12 password-container">
|
||||
<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" title="Show Password"></i>
|
||||
<span class="reveal-password tooltipped tooltipped-n tooltipped-no-delay" aria-label="Show Password" data-alt-label="Hide Password">
|
||||
<i></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-12 password-container">
|
||||
<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" title="Show Password"></i>
|
||||
<span class="reveal-password tooltipped tooltipped-n tooltipped-no-delay" aria-label="Show Password" data-alt-label="Hide Password">
|
||||
<i></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-12 password-container">
|
||||
<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" title="Show Password"></i>
|
||||
<span class="reveal-password tooltipped tooltipped-n tooltipped-no-delay" aria-label="Show Password" data-alt-label="Hide Password">
|
||||
<i></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-12 feedback"></div>
|
||||
<div class="col-sm-12">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@
|
|||
<div class="password-container">
|
||||
<label>Password</label>
|
||||
<input class="input" type="password" name="password">
|
||||
<i class="see-pw" title="Show Password"></i>
|
||||
<span class="reveal-password tooltipped tooltipped-n tooltipped-no-delay" aria-label="Show Password" data-alt-label="Hide Password">
|
||||
<i></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="error">Authentication failed.</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue