Password Toggle Support for Login
This commit is contained in:
raghunayyar
Jan-Christoph Borchardt
parent
a3b922763e
commit
3bcf3c91e1
|
|
@ -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; }
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 515 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -622,6 +622,7 @@ $(document).ready(function(){
|
|||
});
|
||||
|
||||
// 'show password' checkbox
|
||||
$('#password').showPassword();
|
||||
$('#pass2').showPassword();
|
||||
|
||||
//use infield labels
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue