Add a button to reveal/hide password

I add a button on the configure user interface to reveal the password for 2 seconds and hide it after that period.

See #442

I am not sure if the fallback unicode text for the icon is correct. I can not make it work.

app/Models/Themes.php

@@ -77,6 +77,7 @@ class FreshRSS_Themes extends Minz_Model {
 			'down' => '▽',
 			'favorite' => '★',
 			'help' => 'ⓘ',
+			'key' => '⚿',
 			'link' => '↗',
 			'login' => '🔒',
 			'logout' => '🔓',

app/views/configure/users.phtml

@@ -21,6 +21,7 @@
 			<label class="group-name" for="passwordPlain"><?php echo Minz_Translate::t('password_form'); ?></label>
 			<div class="group-controls">
 				<input type="password" id="passwordPlain" name="passwordPlain" autocomplete="off" pattern=".{7,}" <?php echo cryptAvailable() ? '' : 'disabled="disabled" '; ?>/>
+				<a class="btn toggle-password"/><?php echo FreshRSS_Themes::icon('key'); ?></a>
 				<noscript><b><?php echo Minz_Translate::t('javascript_should_be_activated'); ?></b></noscript>
 			</div>
 		</div>
@@ -178,6 +179,7 @@
 			<label class="group-name" for="new_user_passwordPlain"><?php echo Minz_Translate::t('password_form'); ?></label>
 			<div class="group-controls">
 				<input type="password" id="new_user_passwordPlain" name="new_user_passwordPlain" autocomplete="off" pattern=".{7,}" />
+				<a class="btn toggle-password"/><?php echo FreshRSS_Themes::icon('key'); ?></a>
 				<noscript><b><?php echo Minz_Translate::t('javascript_should_be_activated'); ?></b></noscript>
 			</div>
 		</div>

p/scripts/main.js

@@ -998,6 +998,17 @@ function init_feed_observers() {
 	});
 };
 
+function init_password_observers() {
+	$('input[type="password"] + a.btn.toggle-password').on('click', function(e){
+		e.preventDefault();
+		var passwordField = $(this).siblings('input[type="password"]');
+		passwordField.attr('type','text');
+		setTimeout(function(){
+			passwordField.attr('type','password');
+		},2000);
+	});
+};
+
 function init_all() {
 	if (!(window.$ && window.url_freshrss && ((!full_lazyload) || $.fn.lazyload))) {
 		if (window.console) {
@@ -1030,6 +1041,7 @@ function init_all() {
 	} else {
 		init_share_observers();
 		init_feed_observers();
+		init_password_observers();
 	}
 
 	if (window.console) {

p/themes/icons/key.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+<g transform="translate(-340.99994,-257)" fill="#666666">
+<path style="block-progression:tb;color:#000000;direction:ltr;text-indent:0;text-align:start;enable-background:accumulate;text-transform:none;" d="m346,260c-2.7496,0-5,2.2504-5,5s2.2504,5,5,5c1.5862,0,2.9034-0.84459,3.8125-2h4.8438,0.75l0.21875-0.75,1.0312-4,0.3125-1.25h-1.2812-5.875c-0.90914-1.1554-2.2263-2-3.8125-2zm0,2c1.1158,0,2.0379,0.59507,2.5625,1.5l0.3125,0.5h0.5625,4.9688l-0.53125,2h-4.4375-0.5625l-0.3125,0.5c-0.52462,0.90493-1.4466,1.5-2.5625,1.5-1.6687,0-3-1.3313-3-3s1.3313-3,3-3z"/>
+<path opacity="0.35" style="enable-background:accumulate;color:#000000;" d="M355.5,265,350,265,349.44,267,355,267z" fill-rule="nonzero"/>
+<path style="enable-background:accumulate;color:#000000;" d="m346,265c0,0.55228-0.44772,1-1,1s-1-0.44772-1-1,0.44772-1,1-1,1,0.44772,1,1z" fill-rule="nonzero"/>
+</g>
+</svg>