From 494675a9a05894d171035b65171cad87b84b001b Mon Sep 17 00:00:00 2001
From: xevidos <xevidos@gmail.com>
Date: Mon, 8 Apr 2019 13:37:09 -0400
Subject: [PATCH] Added hide / show password button

---
 index.php                 | 29 +++++++++++++++++++++++++----
 themes/default/screen.css |  9 ++++++++-
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/index.php b/index.php
index 81886a1..5e2b086 100755
--- a/index.php
+++ b/index.php
@@ -134,11 +134,16 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 			
             <form id="login" method="post" style="position: fixed; width: 350px; top: 30%; left: 50%; margin-left: -175px; padding: 35px;">
 
-                <label><span class="icon-user login-icon"></span> <?php i18n("Username"); ?></label>
-                <input type="text" name="username" autofocus="autofocus" autocomplete="off">
+                <label>
+                	<span class="icon-user login-icon"></span> <?php i18n("Username"); ?>
+                	<input type="text" name="username" autofocus="autofocus" autocomplete="off">
+                </label>
 
-                <label><span class="icon-lock login-icon"></span> <?php i18n("Password"); ?></label>
-                <input type="password" name="password">
+                <label>
+                	<span class="icon-lock login-icon"></span> <?php i18n("Password"); ?>
+                	<input type="password" name="password">
+                	<span class="icon-eye in-field-icon-right" id="hide_password">
+                </label>
                 
                 <div class="language-selector">
                     <label><span class="icon-picture login-icon"></span> <?php i18n("Theme"); ?></label>
@@ -175,6 +180,22 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
             </form>
 
             <script src="components/user/init.js"></script>
+            <script>
+            	$( "#hide_password" ).on( "click", function( e ) {
+            		
+            		let password = document.querySelector( "input[name='password']" );
+            		
+            		console.log( password, password.type );
+            		
+            		if( password.type == "password" ) {
+            			
+            			password.type = "text";
+            		} else {
+            			
+            			password.type = "password";
+            		}
+            	});
+            </script>
             <?php
 
         }
diff --git a/themes/default/screen.css b/themes/default/screen.css
index 61af63f..c92a6bc 100755
--- a/themes/default/screen.css
+++ b/themes/default/screen.css
@@ -130,6 +130,13 @@ a:hover,a:active {;
 .show-language-selector { display: block; float: right; color: #666; margin: 20px 0 0 0; }
 .show-language-selector:hover { color: #fff; }
 
+.in-field-icon-right {
+	
+	float: right;
+	position: relative;
+	top: -30px;
+}
+
 /* FORMS */
 
 label {
@@ -821,4 +828,4 @@ table [class^="icon-"], [class*=" icon-"] {
 	height: 25px;
 	vertical-align: middle;
 	width: 25px;
-}
+}
\ No newline at end of file