From 97b178dbdbe2c3bea318ecbfe8c84c4124cf68c4 Mon Sep 17 00:00:00 2001
From: qwe <c-ciobanu@protonmail.com>
Date: Tue, 8 May 2018 01:52:54 +0200
Subject: [PATCH] Add password visibility toggle feature

---
 client/css/style.css                     | 17 +++++++++++++++++
 client/js/socket-events/configuration.js | 13 +++++++++++++
 client/views/windows/settings.tpl        |  3 +++
 3 files changed, 33 insertions(+)

diff --git a/client/css/style.css b/client/css/style.css
index bedb73ce..912603fc 100644
--- a/client/css/style.css
+++ b/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;
diff --git a/client/js/socket-events/configuration.js b/client/js/socket-events/configuration.js
index 54232f50..842a8931 100644
--- a/client/js/socket-events/configuration.js
+++ b/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();
 
diff --git a/client/views/windows/settings.tpl b/client/views/windows/settings.tpl
index 821a9512..383a6385 100644
--- a/client/views/windows/settings.tpl
+++ b/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">