From 3bcf3c91e18e5863cb6b6a34eb80ae218f028022 Mon Sep 17 00:00:00 2001
From: raghunayyar <me@iraghu.com>
Date: Fri, 25 Jan 2013 15:22:10 +0530
Subject: [PATCH] Password Toggle Support for Login

---
 core/css/styles.css         |  12 +++++--
 core/img/actions/toggle.png | Bin 0 -> 515 bytes
 core/img/actions/toggle.svg |  61 ++++++++++++++++++++++++++++++++++++
 core/js/js.js               |   1 +
 core/templates/login.php    |   6 ++--
 5 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 core/img/actions/toggle.png
 create mode 100644 core/img/actions/toggle.svg

diff --git a/core/css/styles.css b/core/css/styles.css
index e10a4c7fbe..8bca96349a 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -52,12 +52,19 @@ input[type="checkbox"] { margin:0; padding:0; height:auto; width:auto; }
 input[type="checkbox"]:hover+label, input[type="checkbox"]:focus+label { color:#111 !important; }
 #quota { cursor:default; }
 
+
 /* SCROLLING */
 ::-webkit-scrollbar { width:8px; }
 ::-webkit-scrollbar-track-piece { background-color:transparent; }
 ::-webkit-scrollbar-thumb { background:#ddd; }
 
 
+#show { float: right; position: absolute; right: 1em; top: 0.8em; display:none; }
+#login form input[name="show"] + label { background: url("../img/actions/toggle.png") no-repeat; opacity:0.3;
+float: right; width: 24px; position: absolute !important; height: 14px; right: 1em; top: 1.25em;}
+#login form input[name="show"]:checked + label { background:url("../img/actions/toggle.png") no-repeat; opacity:0.8; }
+
+
 /* BUTTONS */
 input[type="submit"], input[type="button"], button, .button, #quota, div.jp-progress, select, .pager li a {
 	width:auto; padding:.4em;
@@ -141,12 +148,13 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b
 
 /* Icons for username and password fields to better recognize them */
 #adminlogin, #adminpass, #user, #password { width:11.7em!important; padding-left:1.8em; }
-#adminlogin+label, #adminpass+label, #user+label, #password+label { left:2.2em; }
 #adminlogin+label+img, #adminpass+label+img, #user+label+img, #password+label+img {
 	position:absolute; left:1.25em; top:1.65em;
 	opacity:.3;
 }
 #adminpass+label+img, #password+label+img { top:1.1em; }
+input[name="password-clone"] { padding-left:1.8em; width:11.7em !important; }
+#pass_image { position: absolute; top: 1.2em; left: 1.4em; opacity: 0.3; }
 
 
 /* Nicely grouping input field sets */
@@ -170,7 +178,7 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b
 /* NEEDED FOR INFIELD LABELS */
 p.infield { position:relative; }
 label.infield { cursor:text !important; top:1.05em; left:.85em; }
-#login form label.infield { position:absolute; font-size:19px; color:#aaa; white-space:nowrap; }
+#login form label.infield { position:absolute; font-size:19px; color:#aaa; white-space:nowrap; padding-left:1.2em; }
 #login form input[type="checkbox"]+label { position:relative; margin:0; font-size:1em; text-shadow:#fff 0 1px 0; }
 #login form .errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 2em; padding:1em; }
 
diff --git a/core/img/actions/toggle.png b/core/img/actions/toggle.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ef3f2227b7a3bc0dc5eccf87a4158564cfdd065
GIT binary patch
literal 515
zcmV+e0{s1nP)<h;3K|Lk000e1NJLTq000;O000gM1^@s6HTc|q00004b3#c}2nYxW
zd<bNS00009a7bBm000#F000#F0XTt{od5s;8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10f0$FK~y-6y_B(QT2U0nf9Gj0q)vqnQV``njdX3Gp<~8oa!4Rc
zI&~BZ{vQef$4)IsAsL*~v14f^U4uSzQH0<S=wu64-^q|ydA0A+CH8|e+;hJBedluT
zJ))|lp;#<F%4V~#L}Ul3sOmO=hzx*0RWBBc#k=u%{5?%Wk_<|v($h>P^9DEu9;SA1
zhabTE<#Ks48jUXhX<)6bi%1K25KAwCQ{Zc~ehwT0nHcAnsy3W+?L>ooKA+3wa&Lj7
zKL{e%B61J}!RL6sQmMR9)iYInvexv6*=+WDI-Sl|28BXl%NX+s*!}B>BKyPP@M9$E
z0|Y^E1yC-RU#jZ)`X1oRd_LcsOeQ})5%G*Mog{If_gmce{bm@3gD?ySzV9~yqFOIu
z->xyHBO;z>t!)9d1QNhEfNHh+7^nkY6!j>#;v}GEt!;TJ#e0M2oNEBxl=?G(e!qVM
zw1F^+c9dIj63}(dH8y_9|L2*;v9XU9$3{m*9QQHoZUNSw>zz-2y?+1z002ovPDHLk
FV1kyQ+2jBK

literal 0
HcmV?d00001

diff --git a/core/img/actions/toggle.svg b/core/img/actions/toggle.svg
new file mode 100644
index 0000000000..82a5171477
--- /dev/null
+++ b/core/img/actions/toggle.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   x="0px"
+   y="0px"
+   width="16px"
+   height="9px"
+   viewBox="0 0 16 9"
+   overflow="visible"
+   enable-background="new 0 0 16 9"
+   xml:space="preserve"
+   id="svg2"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="eye_all.svg"><metadata
+   id="metadata12"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1021"
+   id="namedview10"
+   showgrid="false"
+   inkscape:zoom="20.75"
+   inkscape:cx="8.0963855"
+   inkscape:cy="4.5"
+   inkscape:window-x="0"
+   inkscape:window-y="27"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="svg2" />
+<defs
+   id="defs4">
+</defs>
+<path
+   fill="#575756"
+   d="M7.999,0C4.89,0,2.073,1.719,0,4.5C2.073,7.281,4.89,9,7.999,9C11.11,9,13.927,7.281,16,4.5  C13.927,1.719,11.108,0,7.999,0z M8,7.5c-1.657,0-3-1.343-3-3s1.343-3,3-3c1.657,0,3,1.343,3,3S9.657,7.5,8,7.5z"
+   id="path6"
+   style="fill:#222222;fill-opacity:1" />
+<circle
+   fill="#575756"
+   cx="8"
+   cy="4.501"
+   r="1.5"
+   id="circle8"
+   style="fill:#222222;fill-opacity:1" />
+</svg>
\ No newline at end of file
diff --git a/core/js/js.js b/core/js/js.js
index bfc972c786..6b0c289850 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -622,6 +622,7 @@ $(document).ready(function(){
 	});
 
 	// 'show password' checkbox
+	$('#password').showPassword();	
 	$('#pass2').showPassword();
 
 	//use infield labels
diff --git a/core/templates/login.php b/core/templates/login.php
index c82d2cafa2..59b685eabf 100644
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -30,10 +30,12 @@
 		</p>
 
 		<p class="infield groupbottom">
-			<input type="password" name="password" id="password" value=""
+			<input type="password" name="password" id="password" value="" data-typetoggle="#show"
 				   required<?php echo $_['user_autofocus'] ? '' : ' autofocus'; ?> />
 			<label for="password" class="infield"><?php echo $l->t('Password'); ?></label>
-			<img class="svg" src="<?php echo image_path('', 'actions/password.svg'); ?>" alt=""/>
+			<img class="svg" id="pass_image" src="<?php echo image_path('', 'actions/password.svg'); ?>" alt=""/>
+			<input type="checkbox" id="show" name="show" />
+			<label for="show"></label>
 		</p>
 		<input type="checkbox" name="remember_login" value="1" id="remember_login"/><label
 			for="remember_login"><?php echo $l->t('remember'); ?></label>