Merge pull request #2429 from c-ciobanu/c-ciobanu/feature-2360
Add password visibility toggle feature
This commit is contained in:
commit
e30984a13d
4
client/css/bootstrap.css
vendored
4
client/css/bootstrap.css
vendored
@ -143,6 +143,10 @@ input::-moz-focus-inner {
|
|||||||
border: 0;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
input::-ms-clear,
|
||||||
|
input::-ms-reveal {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
input {
|
input {
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
@ -1682,6 +1682,54 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
|||||||
margin-top: 0.2em;
|
margin-top: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.password-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-container input {
|
||||||
|
padding-right: 37px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-in .password-container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-in .password-container .reveal-password {
|
||||||
|
top: 31px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-container .reveal-password {
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-container .reveal-password span {
|
||||||
|
font: normal normal normal 14px/1 FontAwesome;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #cdd3da;
|
||||||
|
width: 37px;
|
||||||
|
height: 37px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-container .reveal-password span:hover {
|
||||||
|
color: #79838c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-container .reveal-password span::before {
|
||||||
|
content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-container .reveal-password.visible span::before {
|
||||||
|
content: "\f070"; /* https://fontawesome.com/icons/eye-slash?style=solid */
|
||||||
|
color: #ff4136;
|
||||||
|
}
|
||||||
|
|
||||||
#help .help-item {
|
#help .help-item {
|
||||||
display: table-row;
|
display: table-row;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -23,6 +23,8 @@ socket.on("auth", function(data) {
|
|||||||
|
|
||||||
login.html(templates.windows.sign_in());
|
login.html(templates.windows.sign_in());
|
||||||
|
|
||||||
|
utils.togglePasswordField("#sign-in .reveal-password");
|
||||||
|
|
||||||
login.find("form").on("submit", function() {
|
login.find("form").on("submit", function() {
|
||||||
const form = $(this);
|
const form = $(this);
|
||||||
|
|
||||||
|
@ -6,6 +6,7 @@ const templates = require("../../views");
|
|||||||
const options = require("../options");
|
const options = require("../options");
|
||||||
const webpush = require("../webpush");
|
const webpush = require("../webpush");
|
||||||
const connect = $("#connect");
|
const connect = $("#connect");
|
||||||
|
const utils = require("../utils");
|
||||||
|
|
||||||
socket.on("configuration", function(data) {
|
socket.on("configuration", function(data) {
|
||||||
if (options.initialized) {
|
if (options.initialized) {
|
||||||
@ -29,6 +30,8 @@ socket.on("configuration", function(data) {
|
|||||||
pop.play();
|
pop.play();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
utils.togglePasswordField("#change-password .reveal-password");
|
||||||
|
|
||||||
options.initialize();
|
options.initialize();
|
||||||
webpush.initialize();
|
webpush.initialize();
|
||||||
|
|
||||||
@ -83,6 +86,8 @@ socket.on("configuration", function(data) {
|
|||||||
// Store the "previous" value, for next time
|
// Store the "previous" value, for next time
|
||||||
$(this).data("lastvalue", nick);
|
$(this).data("lastvalue", nick);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
utils.togglePasswordField("#connect .reveal-password");
|
||||||
});
|
});
|
||||||
|
|
||||||
if ($(document.body).hasClass("public") && "URLSearchParams" in window) {
|
if ($(document.body).hasClass("public") && "URLSearchParams" in window) {
|
||||||
|
@ -5,6 +5,7 @@ const socket = require("../socket");
|
|||||||
const render = require("../render");
|
const render = require("../render");
|
||||||
const templates = require("../../views");
|
const templates = require("../../views");
|
||||||
const sidebar = $("#sidebar");
|
const sidebar = $("#sidebar");
|
||||||
|
const utils = require("../utils");
|
||||||
|
|
||||||
socket.on("network", function(data) {
|
socket.on("network", function(data) {
|
||||||
render.renderNetworks(data, true);
|
render.renderNetworks(data, true);
|
||||||
@ -41,4 +42,6 @@ socket.on("network:info", function(data) {
|
|||||||
.text(newName)
|
.text(newName)
|
||||||
.click();
|
.click();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
utils.togglePasswordField("#connect .reveal-password");
|
||||||
});
|
});
|
||||||
|
@ -20,6 +20,7 @@ module.exports = {
|
|||||||
move,
|
move,
|
||||||
resetHeight,
|
resetHeight,
|
||||||
toggleNotificationMarkers,
|
toggleNotificationMarkers,
|
||||||
|
togglePasswordField,
|
||||||
requestIdleCallback,
|
requestIdleCallback,
|
||||||
togglePreviewMoreButtonsIfNeeded,
|
togglePreviewMoreButtonsIfNeeded,
|
||||||
};
|
};
|
||||||
@ -97,6 +98,25 @@ function toggleNotificationMarkers(newState) {
|
|||||||
viewport.toggleClass("notified", newState);
|
viewport.toggleClass("notified", newState);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function togglePasswordField(elem) {
|
||||||
|
$(elem).on("click", function() {
|
||||||
|
const $this = $(this);
|
||||||
|
const input = $this.closest("div").find("input");
|
||||||
|
|
||||||
|
input.attr("type", input.attr("type") === "password" ? "text" : "password");
|
||||||
|
|
||||||
|
swapLabel($this);
|
||||||
|
swapLabel($this.find("span"));
|
||||||
|
$this.toggleClass("visible");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Given a element, swap its aria-label with the content of `data-alt-label`
|
||||||
|
function swapLabel(element) {
|
||||||
|
const altText = element.data("alt-label");
|
||||||
|
element.data("alt-label", element.attr("aria-label")).attr("aria-label", altText);
|
||||||
|
}
|
||||||
|
|
||||||
function confirmExit() {
|
function confirmExit() {
|
||||||
if ($(document.body).hasClass("public")) {
|
if ($(document.body).hasClass("public")) {
|
||||||
window.onbeforeunload = function() {
|
window.onbeforeunload = function() {
|
||||||
|
3
client/views/reveal-password.tpl
Normal file
3
client/views/reveal-password.tpl
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<span class="reveal-password tooltipped tooltipped-n tooltipped-no-delay" aria-label="Show password" data-alt-label="Hide password">
|
||||||
|
<span type="button" aria-label="Show password" data-alt-label="Hide password"></span>
|
||||||
|
</span>
|
@ -78,8 +78,9 @@
|
|||||||
<div class="col-sm-3">
|
<div class="col-sm-3">
|
||||||
<label for="connect:password">Password</label>
|
<label for="connect:password">Password</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-9">
|
<div class="col-sm-9 password-container">
|
||||||
<input class="input" id="connect:password" type="password" name="password" value="{{defaults.password}}">
|
<input class="input" id="connect:password" type="password" name="password" value="{{defaults.password}}">
|
||||||
|
{{> ../reveal-password}}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-3">
|
<div class="col-sm-3">
|
||||||
<label for="connect:realname">Real name</label>
|
<label for="connect:realname">Real name</label>
|
||||||
|
@ -187,17 +187,20 @@
|
|||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
<h2>Change password</h2>
|
<h2>Change password</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12 password-container">
|
||||||
<label for="old_password_input" class="sr-only">Enter current password</label>
|
<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">
|
<input type="password" id="old_password_input" name="old_password" class="input" placeholder="Enter current password">
|
||||||
|
{{> ../reveal-password}}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12 password-container">
|
||||||
<label for="new_password_input" class="sr-only">Enter desired new password</label>
|
<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">
|
<input type="password" id="new_password_input" name="new_password" class="input" placeholder="Enter desired new password">
|
||||||
|
{{> ../reveal-password}}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12 password-container">
|
||||||
<label for="verify_password_input" class="sr-only">Repeat new password</label>
|
<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">
|
<input type="password" id="verify_password_input" name="verify_password" class="input" placeholder="Repeat new password">
|
||||||
|
{{> ../reveal-password}}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-12 feedback"></div>
|
<div class="col-sm-12 feedback"></div>
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
|
@ -2,15 +2,14 @@
|
|||||||
<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
|
<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
|
||||||
<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge" width="256" height="170">
|
<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge" width="256" height="170">
|
||||||
|
|
||||||
<label>
|
<label>Username</label>
|
||||||
Username
|
<input class="input" name="user" autofocus>
|
||||||
<input class="input" name="user" autofocus>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label>
|
<div class="password-container">
|
||||||
Password
|
<label>Password</label>
|
||||||
<input class="input" type="password" name="password">
|
<input class="input" type="password" name="password">
|
||||||
</label>
|
{{> ../reveal-password}}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="error">Authentication failed.</div>
|
<div class="error">Authentication failed.</div>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user