Add password visibility toggle feature

client/css/style.css

@@ -1666,6 +1666,23 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	color: #2ecc40;
 }
 
+#settings #change-password .see-pw {
+	font: normal normal normal 14px/1 FontAwesome;
+	font-size: 16px;
+	color: #cdd3da;
+	position: absolute;
+	top: 13px;
+	right: 25px;
+}
+
+#settings #change-password .see-pw::before {
+	content: "\f06e";
+}
+
+#settings #change-password .see-pw.visible::before {
+	content: "\f070";
+}
+
 #settings .error {
 	color: #e74c3c;
 	margin-top: 0.2em;

client/js/socket-events/configuration.js

@@ -29,6 +29,19 @@ socket.on("configuration", function(data) {
 		pop.play();
 	});
 
+	$(".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");
+	});
+
 	options.initialize();
 	webpush.initialize();
 

client/views/windows/settings.tpl

@@ -190,14 +190,17 @@
 				<div class="col-sm-12">
 					<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>
 				</div>
 				<div class="col-sm-12">
 					<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>
 				</div>
 				<div class="col-sm-12">
 					<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>
 				</div>
 				<div class="col-sm-12 feedback"></div>
 				<div class="col-sm-12">