Password Toggle Support for Login

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; }
 

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>

core/js/js.js

@@ -622,6 +622,7 @@ $(document).ready(function(){
 	});
 
 	// 'show password' checkbox
+	$('#password').showPassword();	
 	$('#pass2').showPassword();
 
 	//use infield labels

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>