Merge pull request #2429 from c-ciobanu/c-ciobanu/feature-2360

Add password visibility toggle feature

client/css/bootstrap.css

@@ -143,6 +143,10 @@ input::-moz-focus-inner {
   border: 0;
   padding: 0;
 }
+input::-ms-clear,
+input::-ms-reveal {
+  display: none;
+}
 input {
   line-height: normal;
 }

client/css/style.css

@@ -1682,6 +1682,54 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	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 {
 	display: table-row;
 	font-size: 14px;

client/js/socket-events/auth.js

@@ -23,6 +23,8 @@ socket.on("auth", function(data) {
 
 		login.html(templates.windows.sign_in());
 
+		utils.togglePasswordField("#sign-in .reveal-password");
+
 		login.find("form").on("submit", function() {
 			const form = $(this);
 

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) {
@@ -29,6 +30,8 @@ socket.on("configuration", function(data) {
 		pop.play();
 	});
 
+	utils.togglePasswordField("#change-password .reveal-password");
+
 	options.initialize();
 	webpush.initialize();
 
@@ -83,6 +86,8 @@ socket.on("configuration", function(data) {
 				// Store the "previous" value, for next time
 				$(this).data("lastvalue", nick);
 			});
+
+		utils.togglePasswordField("#connect .reveal-password");
 	});
 
 	if ($(document.body).hasClass("public") && "URLSearchParams" in window) {

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,6 @@ socket.on("network:info", function(data) {
 				.text(newName)
 				.click();
 		});
+
+	utils.togglePasswordField("#connect .reveal-password");
 });

client/js/utils.js

@@ -20,6 +20,7 @@ module.exports = {
 	move,
 	resetHeight,
 	toggleNotificationMarkers,
+	togglePasswordField,
 	requestIdleCallback,
 	togglePreviewMoreButtonsIfNeeded,
 };
@@ -97,6 +98,25 @@ function toggleNotificationMarkers(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() {
 	if ($(document.body).hasClass("public")) {
 		window.onbeforeunload = function() {

client/views/reveal-password.tpl

@@ -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>

client/views/windows/connect.tpl

@@ -78,8 +78,9 @@
 		<div class="col-sm-3">
 			<label for="connect:password">Password</label>
 		</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}}">
+			{{> ../reveal-password}}
 		</div>
 		<div class="col-sm-3">
 			<label for="connect:realname">Real name</label>

client/views/windows/settings.tpl

@@ -187,17 +187,20 @@
 				<div class="col-sm-12">
 					<h2>Change password</h2>
 				</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>
 					<input type="password" id="old_password_input" name="old_password" class="input" placeholder="Enter current password">
+					{{> ../reveal-password}}
 				</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>
 					<input type="password" id="new_password_input" name="new_password" class="input" placeholder="Enter desired new password">
+					{{> ../reveal-password}}
 				</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>
 					<input type="password" id="verify_password_input" name="verify_password" class="input" placeholder="Repeat new password">
+					{{> ../reveal-password}}
 				</div>
 				<div class="col-sm-12 feedback"></div>
 				<div class="col-sm-12">

client/views/windows/sign_in.tpl

@@ -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-inverted.svg" class="logo-inverted" alt="The Lounge" width="256" height="170">
 
-	<label>
-		Username
-		<input class="input" name="user" autofocus>
-	</label>
+	<label>Username</label>
+	<input class="input" name="user" autofocus>
 
-	<label>
-		Password
+	<div class="password-container">
+		<label>Password</label>
 		<input class="input" type="password" name="password">
-	</label>
+		{{> ../reveal-password}}
+	</div>
 
 	<div class="error">Authentication failed.</div>