From 2d49e34805b1d6d21fd6c7ff8f55ac154f048dd2 Mon Sep 17 00:00:00 2001 From: qwe Date: Tue, 8 May 2018 23:40:39 +0200 Subject: [PATCH] add password toggle to connect and login --- client/css/style.css | 29 +++++++++++++++++------- client/js/socket-events/auth.js | 4 ++++ client/js/socket-events/configuration.js | 16 +++++-------- client/js/socket-events/network.js | 5 ++++ client/js/utils.js | 16 +++++++++++++ client/views/windows/connect.tpl | 3 ++- client/views/windows/settings.tpl | 12 +++++----- client/views/windows/sign_in.tpl | 13 +++++------ 8 files changed, 66 insertions(+), 32 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 912603fc..af3ef6aa 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1666,7 +1666,20 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ 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-size: 16px; color: #cdd3da; @@ -1675,17 +1688,17 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ right: 25px; } -#settings #change-password .see-pw::before { - content: "\f06e"; +#sign-in .password-container .see-pw { + top: 42px; + right: 10px; } -#settings #change-password .see-pw.visible::before { - content: "\f070"; +.password-container .see-pw::before { + content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */ } -#settings .error { - color: #e74c3c; - margin-top: 0.2em; +.password-container .see-pw.visible::before { + content: "\f070"; /* https://fontawesome.com/icons/eye-slash?style=solid */ } #help .help-item { diff --git a/client/js/socket-events/auth.js b/client/js/socket-events/auth.js index 3a59530e..773d8da1 100644 --- a/client/js/socket-events/auth.js +++ b/client/js/socket-events/auth.js @@ -23,6 +23,10 @@ socket.on("auth", function(data) { login.html(templates.windows.sign_in()); + $(".see-pw").on("click", function() { + utils.togglePasswordField(this); + }); + login.find("form").on("submit", function() { const form = $(this); diff --git a/client/js/socket-events/configuration.js b/client/js/socket-events/configuration.js index 842a8931..bd5e1790 100644 --- a/client/js/socket-events/configuration.js +++ b/client/js/socket-events/configuration.js @@ -6,6 +6,7 @@ const templates = require("../../views"); const options = require("../options"); const webpush = require("../webpush"); const connect = $("#connect"); +const utils = require("../utils"); socket.on("configuration", function(data) { if (options.initialized) { @@ -30,16 +31,7 @@ socket.on("configuration", function(data) { }); $(".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"); + utils.togglePasswordField(this); }); options.initialize(); @@ -96,5 +88,9 @@ socket.on("configuration", function(data) { // Store the "previous" value, for next time $(this).data("lastvalue", nick); }); + + $(".see-pw").on("click", function() { + utils.togglePasswordField(this); + }); }); }); diff --git a/client/js/socket-events/network.js b/client/js/socket-events/network.js index a6fa04ef..f72dc81c 100644 --- a/client/js/socket-events/network.js +++ b/client/js/socket-events/network.js @@ -5,6 +5,7 @@ const socket = require("../socket"); const render = require("../render"); const templates = require("../../views"); const sidebar = $("#sidebar"); +const utils = require("../utils"); socket.on("network", function(data) { render.renderNetworks(data, true); @@ -41,4 +42,8 @@ socket.on("network:info", function(data) { .text(newName) .click(); }); + + $(".see-pw").on("click", function() { + utils.togglePasswordField(this); + }); }); diff --git a/client/js/utils.js b/client/js/utils.js index ceecb05b..da26b6a2 100644 --- a/client/js/utils.js +++ b/client/js/utils.js @@ -20,6 +20,7 @@ module.exports = { move, resetHeight, toggleNotificationMarkers, + togglePasswordField, requestIdleCallback, togglePreviewMoreButtonsIfNeeded, }; @@ -97,6 +98,21 @@ function toggleNotificationMarkers(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() { if ($(document.body).hasClass("public")) { window.onbeforeunload = function() { diff --git a/client/views/windows/connect.tpl b/client/views/windows/connect.tpl index bb7bef78..2a26ac69 100644 --- a/client/views/windows/connect.tpl +++ b/client/views/windows/connect.tpl @@ -78,8 +78,9 @@
-
+
+
diff --git a/client/views/windows/settings.tpl b/client/views/windows/settings.tpl index 383a6385..486c725d 100644 --- a/client/views/windows/settings.tpl +++ b/client/views/windows/settings.tpl @@ -187,20 +187,20 @@

Change password

-
+
- +
-
+
- +
-
+
- +
diff --git a/client/views/windows/sign_in.tpl b/client/views/windows/sign_in.tpl index cb04b720..8bcc6701 100644 --- a/client/views/windows/sign_in.tpl +++ b/client/views/windows/sign_in.tpl @@ -2,15 +2,14 @@ The Lounge - + + -