add password toggle to connect and login

This commit is contained in:
qwe 2018-05-08 23:40:39 +02:00
parent 97b178dbdb
commit 2d49e34805
8 changed files with 66 additions and 32 deletions

View File

@ -1666,7 +1666,20 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
color: #2ecc40; color: #2ecc40;
} }
#settings #change-password .see-pw { #settings .error {
color: #e74c3c;
margin-top: 0.2em;
}
.password-container {
position: relative;
}
#sign-in .password-container {
width: 100%;
}
.password-container .see-pw {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
font-size: 16px; font-size: 16px;
color: #cdd3da; color: #cdd3da;
@ -1675,17 +1688,17 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
right: 25px; right: 25px;
} }
#settings #change-password .see-pw::before { #sign-in .password-container .see-pw {
content: "\f06e"; top: 42px;
right: 10px;
} }
#settings #change-password .see-pw.visible::before { .password-container .see-pw::before {
content: "\f070"; content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
} }
#settings .error { .password-container .see-pw.visible::before {
color: #e74c3c; content: "\f070"; /* https://fontawesome.com/icons/eye-slash?style=solid */
margin-top: 0.2em;
} }
#help .help-item { #help .help-item {

View File

@ -23,6 +23,10 @@ socket.on("auth", function(data) {
login.html(templates.windows.sign_in()); login.html(templates.windows.sign_in());
$(".see-pw").on("click", function() {
utils.togglePasswordField(this);
});
login.find("form").on("submit", function() { login.find("form").on("submit", function() {
const form = $(this); const form = $(this);

View File

@ -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) {
@ -30,16 +31,7 @@ socket.on("configuration", function(data) {
}); });
$(".see-pw").on("click", function() { $(".see-pw").on("click", function() {
const $this = $(this); utils.togglePasswordField(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(); options.initialize();
@ -96,5 +88,9 @@ 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);
}); });
$(".see-pw").on("click", function() {
utils.togglePasswordField(this);
});
}); });
}); });

View File

@ -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,8 @@ socket.on("network:info", function(data) {
.text(newName) .text(newName)
.click(); .click();
}); });
$(".see-pw").on("click", function() {
utils.togglePasswordField(this);
});
}); });

View File

@ -20,6 +20,7 @@ module.exports = {
move, move,
resetHeight, resetHeight,
toggleNotificationMarkers, toggleNotificationMarkers,
togglePasswordField,
requestIdleCallback, requestIdleCallback,
togglePreviewMoreButtonsIfNeeded, togglePreviewMoreButtonsIfNeeded,
}; };
@ -97,6 +98,21 @@ function toggleNotificationMarkers(newState) {
viewport.toggleClass("notified", newState); viewport.toggleClass("notified", newState);
} }
function togglePasswordField(that) {
const $this = $(that);
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");
}
$this.toggleClass("visible");
}
function confirmExit() { function confirmExit() {
if ($(document.body).hasClass("public")) { if ($(document.body).hasClass("public")) {
window.onbeforeunload = function() { window.onbeforeunload = function() {

View File

@ -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}}">
<i class="see-pw" title="Show Password"></i>
</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>

View File

@ -187,20 +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">
<i class="see-pw"></i> <i class="see-pw" title="Show Password"></i>
</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">
<i class="see-pw"></i> <i class="see-pw" title="Show Password"></i>
</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">
<i class="see-pw"></i> <i class="see-pw" title="Show Password"></i>
</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">

View File

@ -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> <i class="see-pw" title="Show Password"></i>
</div>
<div class="error">Authentication failed.</div> <div class="error">Authentication failed.</div>