Fix user interaction with showing password feature

Before, the password was hidden again after 2 seconds. Now, the password
is hidden when the mouse is released

Fix https://github.com/FreshRSS/FreshRSS/issues/734

4 files changed, 21 insertions, 17 deletions

diff --git a/app/install.php b/app/install.php
index a79b0d318..eb2f764f9 100644
--- a/app/install.php
+++ b/app/install.php
@@ -611,23 +611,26 @@ function printStep2() {
 		</div>
 
 		<script>
-			function toggle_password() {
+			function show_password() {
 				var button = this;
 				var passwordField = document.getElementById(button.getAttribute('data-toggle'));
-
 				passwordField.setAttribute('type', 'text');
 				button.className += ' active';
 
-				setTimeout(function() {
-					passwordField.setAttribute('type', 'password');
-					button.className = button.className.replace(/(?:^|\s)active(?!\S)/g , '');
-				}, 2000);
+				return false;
+			}
+			function hide_password() {
+				var button = this;
+				var passwordField = document.getElementById(button.getAttribute('data-toggle'));
+				passwordField.setAttribute('type', 'password');
+				button.className = button.className.replace(/(?:^|\s)active(?!\S)/g , '');
 
 				return false;
 			}
 			toggles = document.getElementsByClassName('toggle-password');
 			for (var i = 0 ; i < toggles.length ; i++) {
-				toggles[i].addEventListener('click', toggle_password);
+				toggles[i].addEventListener('mousedown', show_password);
+				toggles[i].addEventListener('mouseup', hide_password);
 			}
 
 			function auth_type_change(focus) {
diff --git a/app/views/user/manage.phtml b/app/views/user/manage.phtml
index 466446f2f..11562093e 100644
--- a/app/views/user/manage.phtml
+++ b/app/views/user/manage.phtml
@@ -30,7 +30,7 @@
 			<div class="group-controls">
 				<div class="stick">
 					<input type="password" id="new_user_passwordPlain" name="new_user_passwordPlain" autocomplete="off" pattern=".{7,}" />
-					<a class="btn toggle-password"><?php echo _i('key'); ?></a>
+					<a class="btn toggle-password" data-toggle="new_user_passwordPlain"><?php echo _i('key'); ?></a>
 				</div>
 				<noscript><b><?php echo _t('gen.js.should_be_activated'); ?></b></noscript>
 			</div>
diff --git a/app/views/user/profile.phtml b/app/views/user/profile.phtml
index d85499ad8..4e61664bc 100644
--- a/app/views/user/profile.phtml
+++ b/app/views/user/profile.phtml
@@ -22,7 +22,7 @@
 			<div class="group-controls">
 				<div class="stick">
 					<input type="password" id="passwordPlain" name="passwordPlain" autocomplete="off" pattern=".{7,}" <?php echo cryptAvailable() ? '' : 'disabled="disabled" '; ?>/>
-					<a class="btn toggle-password"><?php echo _i('key'); ?></a>
+					<a class="btn toggle-password" data-toggle="passwordPlain"><?php echo _i('key'); ?></a>
 				</div>
 				<noscript><b><?php echo _t('gen.js.should_be_activated'); ?></b></noscript>
 			</div>
@@ -34,7 +34,7 @@
 			<div class="group-controls">
 				<div class="stick">
 					<input type="password" id="apiPasswordPlain" name="apiPasswordPlain" autocomplete="off" pattern=".{7,}" <?php echo cryptAvailable() ? '' : 'disabled="disabled" '; ?>/>
-					<a class="btn toggle-password"><?php echo _i('key'); ?></a>
+					<a class="btn toggle-password" data-toggle="apiPasswordPlain"><?php echo _i('key'); ?></a>
 				</div>
 			</div>
 		</div>
diff --git a/p/scripts/main.js b/p/scripts/main.js
index e8bd66fc1..9b6524b01 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1134,17 +1134,18 @@ function init_feed_observers() {
 }
 
 function init_password_observers() {
-	$('input[type="password"] + a.btn.toggle-password').on('click', function(e) {
+	$('.toggle-password').on('mousedown', function(e) {
 		var button = $(this);
-		var passwordField = $(this).siblings('input[type="password"]');
-
+		var passwordField = $('#' + button.attr('data-toggle'));
 		passwordField.attr('type', 'text');
 		button.addClass('active');
 
-		setTimeout(function() {
-			passwordField.attr('type', 'password');
-			button.removeClass('active');
-		}, 2000);
+		return false;
+	}).on('mouseup', function(e) {
+		var button = $(this);
+		var passwordField = $('#' + button.attr('data-toggle'));
+		passwordField.attr('type', 'password');
+		button.removeClass('active');
 
 		return false;
 	});