refactor 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

@@ -1675,30 +1675,49 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	position: relative;
 }
 
+.password-container input {
+	padding-right: 37px;
+}
+
 #sign-in .password-container {
 	width: 100%;
 }
 
-.password-container .see-pw {
+#sign-in .password-container .reveal-password {
+	top: 31px;
+	right: 0;
+}
+
+.password-container .reveal-password {
+	height: 37px;
+	width: 37px;
+	position: absolute;
+	top: 2px;
+	right: 15px;
+	cursor: pointer;
+}
+
+.password-container .reveal-password i {
 	font: normal normal normal 14px/1 FontAwesome;
 	font-size: 16px;
 	color: #cdd3da;
-	position: absolute;
+	display: flex;
-	top: 13px;
+	justify-content: center;
-	right: 25px;
+	align-items: center;
+	height: 100%;
 }
 
-#sign-in .password-container .see-pw {
+.password-container .reveal-password i:hover {
-	top: 42px;
+	color: #79838c;
-	right: 10px;
 }
 
-.password-container .see-pw::before {
+.password-container .reveal-password i::before {
 	content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
 }
 
-.password-container .see-pw.visible::before {
+.password-container .reveal-password.visible i::before {
 	content: "\f070"; /* https://fontawesome.com/icons/eye-slash?style=solid */
+	color: #ff4136;
 }
 
 #help .help-item {

client/js/socket-events/auth.js

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

client/js/socket-events/configuration.js

@@ -30,9 +30,7 @@ socket.on("configuration", function(data) {
 		pop.play();
 	});
 
-	$(".see-pw").on("click", function() {
+	utils.togglePasswordField(".reveal-password");
-		utils.togglePasswordField(this);
-	});
 
 	options.initialize();
 	webpush.initialize();
@@ -89,8 +87,6 @@ socket.on("configuration", function(data) {
 				$(this).data("lastvalue", nick);
 			});
 
-		$(".see-pw").on("click", function() {
+		utils.togglePasswordField(".reveal-password");
-			utils.togglePasswordField(this);
-		});
 	});
 });

client/js/socket-events/network.js

@@ -43,7 +43,5 @@ socket.on("network:info", function(data) {
 				.click();
 		});
 
-	$(".see-pw").on("click", function() {
+	utils.togglePasswordField(".reveal-password");
-		utils.togglePasswordField(this);
-	});
 });

client/js/utils.js

@@ -98,19 +98,22 @@ function toggleNotificationMarkers(newState) {
 	viewport.toggleClass("notified", newState);
 }
 
-function togglePasswordField(that) {
+function togglePasswordField(elem) {
-	const $this = $(that);
+	$(elem).on("click", function() {
-	const input = $this.closest("div").find("input");
+		const $this = $(this);
+		const input = $this.closest("div").find("input");
 
-	if (input.attr("type") === "password") {
+		input.attr("type") === "password" ? input.attr("type", "text") : 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");
+		swapLabel($this);
+		$this.toggleClass("visible");
+	});
+}
+
+// Given a span, swap its aria-label with the content of `data-alt-label`
+function swapLabel(span) {
+	const altText = span.data("alt-label");
+	span.data("alt-label", span.attr("aria-label")).attr("aria-label", altText);
 }
 
 function confirmExit() {

client/views/windows/connect.tpl

@@ -80,7 +80,9 @@
 		</div>
 		<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>
+			<span class="reveal-password tooltipped tooltipped-n tooltipped-no-delay" aria-label="Show Password" data-alt-label="Hide Password">
+				<i></i>
+			</span>
 		</div>
 		<div class="col-sm-3">
 			<label for="connect:realname">Real name</label>

client/views/windows/settings.tpl

@@ -190,17 +190,23 @@
 				<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" title="Show Password"></i>
+					<span class="reveal-password tooltipped tooltipped-n tooltipped-no-delay" aria-label="Show Password" data-alt-label="Hide Password">
+						<i></i>
+					</span>
 				</div>
 				<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" title="Show Password"></i>
+					<span class="reveal-password tooltipped tooltipped-n tooltipped-no-delay" aria-label="Show Password" data-alt-label="Hide Password">
+						<i></i>
+					</span>
 				</div>
 				<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" title="Show Password"></i>
+					<span class="reveal-password tooltipped tooltipped-n tooltipped-no-delay" aria-label="Show Password" data-alt-label="Hide Password">
+						<i></i>
+					</span>
 				</div>
 				<div class="col-sm-12 feedback"></div>
 				<div class="col-sm-12">

client/views/windows/sign_in.tpl

@@ -8,7 +8,9 @@
 	<div class="password-container">
 		<label>Password</label>
 		<input class="input" type="password" name="password">
-		<i class="see-pw" title="Show Password"></i>
+		<span class="reveal-password tooltipped tooltipped-n tooltipped-no-delay" aria-label="Show Password" data-alt-label="Hide Password">
+			<i></i>
+		</span>
 	</div>
 
 	<div class="error">Authentication failed.</div>