Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Added show password toggle to mod_login

  • Loading branch information...
commit 8c465456a5d6a7fbfd830d2c25e71ff489ff9189 1 parent 3d9d1b3
Antony Doyle authored

Showing 2 changed files with 121 additions and 12 deletions. Show diff stats Hide diff stats

  1. +103 9 css/templateCore.css
  2. +18 3 html/mod_login/default.php
112 css/templateCore.css
@@ -8,15 +8,7 @@
8 8 width:auto;
9 9 }
10 10 }
11   -/*Login Module ---------------------- */
12 11
13   -fieldset {
14   - border:none;
15   - margin-bottom:25px;
16   -}
17   -fieldset.userdata {
18   - margin-bottom:10px;
19   -}
20 12
21 13 /*article stuff ---------------------- */
22 14 article header {
@@ -141,4 +133,106 @@ display: inline-block;
141 133 /* Form Stuff ---------------------- */
142 134 .registration input, .login input {
143 135 width:300px;
144   -}
  136 +}
  137 +
  138 +/*Login Module ---------------------- */
  139 +
  140 +fieldset {
  141 + border:none;
  142 + margin-bottom:25px;
  143 +}
  144 +fieldset.userdata {
  145 + margin-bottom:10px;
  146 +}
  147 +/* Login toggle stuff (inc related mod_login override stuff) */
  148 +#form-login-password {
  149 +}
  150 +#form-login-remember {
  151 + width:200px;
  152 +}
  153 +.toggleLabel {
  154 +margin-bottom: 5px;
  155 +}
  156 +.padded {
  157 + margin-bottom:10px;
  158 +}
  159 +.forgot {
  160 + line-height:1.7em;
  161 +}
  162 +input.button[type="submit"], input.medium.button[type="submit"] {
  163 + padding: 6px 20px 9px;
  164 +}
  165 +.toggle {
  166 + width: 50px;
  167 + height: 15px;
  168 + display: block;
  169 + background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), -webkit-linear-gradient(left, #0C6 48%, #f66 48%);
  170 + background-image: -moz-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), -moz-linear-gradient(left, #0C6 48%, #f66 48%);
  171 + background-image: -o-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), -o-linear-gradient(left, #0C6 48%, #f66 48%);
  172 + background-image: -ms-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), -ms-linear-gradient(left, #0C6 48%, #f66 48%);
  173 + background-image: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), linear-gradient(left, #0C6 48%, #f66 48%); position: relative;
  174 + border-radius: 20px;
  175 + box-shadow: 0 1px 1px 0 rgba(255, 255, 255, .45), inset 0 1px 2px 0 rgba(0, 0, 0, .45);
  176 + font-size: 12px;
  177 + text-align: left;
  178 +
  179 +}
  180 +.toggle:before {
  181 + content: '';
  182 + position: absolute;
  183 + top: 0;
  184 + left: 50%;
  185 + z-index: 0;
  186 +}
  187 +.toggle:after {
  188 + position: relative;
  189 + z-index: 2;
  190 + width: 95%;
  191 + margin: 5px 3px 3px 3px;
  192 + float: left;
  193 + content: attr(data-on) "\a" attr(data-off);
  194 + white-space: pre;
  195 + text-align: center;
  196 + -webkit-column-count: 2;
  197 + -moz-column-count: 2;
  198 + column-count: 2;
  199 +}
  200 +.toggle input {
  201 + position: absolute;
  202 + -webkit-opacity: 0;
  203 + -moz-opacity: 0;
  204 + opacity: 0;
  205 +}
  206 +.toggle span {
  207 + width: 28px;
  208 + height:18px;
  209 + background-color: #CCC;
  210 + display: block;
  211 + position: absolute;
  212 + top: -2px;
  213 + z-index: 99;
  214 + border-radius: 10px;
  215 + box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .65), inset 0 1px 0 0 rgba(255, 255, 255, .85);
  216 + background-color: #fd5555;
  217 + background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d6d6d6)); /* Safari 4+, Chrome */
  218 + background-image: -webkit-linear-gradient(top, #ffffff, #d6d6d6); /* Chrome 10+, Safari 5.1+, iOS 5+ */
  219 + background-image: -moz-linear-gradient(top, #ffffff, #d6d6d6); /* Firefox 3.6-15 */
  220 + background-image: -o-linear-gradient(top, #ffffff, #d6d6d6); /* Opera 11.10-12.00 */
  221 + background-image: linear-gradient(to bottom, #ffffff, #d6d6d6); /* Firefox 16+, IE10, Opera 12.50+ */
  222 + -webkit-transition: .25s;
  223 + -moz-transition: .25s;
  224 + -o-transition: .25s;
  225 + -ms-transition: .25s;
  226 + transition: .25s;
  227 +}
  228 +.toggle input:checked+span {
  229 + left: 43%;
  230 + -webkit-transition: .25s;
  231 + -moz-transition: .25s;
  232 + -o-transition: .25s;
  233 + -ms-transition: .25s;
  234 + transition: .25s;
  235 + }
  236 + .toggle > input:checked {
  237 + background:#090;
  238 + }
21 html/mod_login/default.php
@@ -44,21 +44,34 @@
44 44 <p id="form-login-password">
45 45 <label for="modlgn-passwd"><?php echo JText::_('JGLOBAL_PASSWORD') ?></label>
46 46 <input id="modlgn-passwd" type="password" name="password" class="inputbox" size="18" />
  47 +
47 48 </p>
48 49 <?php if (JPluginHelper::isEnabled('system', 'remember')) : ?>
49 50 <p id="form-login-remember">
50   - <label for="modlgn-remember"><?php echo JText::_('MOD_LOGIN_REMEMBER_ME') ?></label>
  51 + <div class="six columns padded">
  52 + <p class="toggleLabel"><span>Show password</span></p>
  53 + <label class="toggle" >
  54 + <input type='checkbox' onchange="document.getElementById('modlgn-passwd').type = this.checked ? 'text' : 'password'"/>
  55 + <span></span>
  56 + </label>
  57 + </div>
  58 + <div class="six columns padded">
  59 + <p class="toggleLabel"><span><?php echo JText::_('MOD_LOGIN_REMEMBER_ME') ?></span></p>
  60 + <label class="toggle" >
51 61 <input id="modlgn-remember" type="checkbox" name="remember" class="inputbox" value="yes"/>
  62 + <span></span>
  63 + </label>
  64 + </div>
52 65 </p>
53 66 <?php endif; ?>
  67 +
54 68 <input type="submit" name="Submit" class="button" value="<?php echo JText::_('JLOGIN') ?>" />
55 69 <input type="hidden" name="option" value="com_users" />
56 70 <input type="hidden" name="task" value="user.login" />
57 71 <input type="hidden" name="return" value="<?php echo $return; ?>" />
58 72 <?php echo JHtml::_('form.token'); ?>
59   - </fieldset>
60 73 <div href="#" class="small button dropdown">
61   - Forgot Password / Username?
  74 + <span class="forgot">Forgot Password / Username?</span>
62 75 <ul style="top: 28px;">
63 76 <li>
64 77 <a href="<?php echo JRoute::_('index.php?option=com_users&view=reset'); ?>">
@@ -78,6 +91,8 @@
78 91 <?php endif; ?>
79 92 </ul>
80 93 </div>
  94 + </fieldset>
  95 +
81 96 <?php if ($params->get('posttext')): ?>
82 97 <div class="posttext">
83 98 <p><?php echo $params->get('posttext'); ?></p>

0 comments on commit 8c46545

Please sign in to comment.
Something went wrong with that request. Please try again.