add password toggle to connect and login

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 {
+#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 {

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);
 

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);
+		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();
@@ -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);
+		});
 	});
 });

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);
+	});
 });

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() {

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}}">
+			<i class="see-pw" title="Show Password"></i>
 		</div>
 		<div class="col-sm-3">
 			<label for="connect:realname">Real name</label>

client/views/windows/settings.tpl

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