Permalink
Browse files

Added show password toggle to mod_login

  • Loading branch information...
1 parent 3d9d1b3 commit 8c465456a5d6a7fbfd830d2c25e71ff489ff9189 @antonydoyle committed Oct 3, 2012
Showing with 121 additions and 12 deletions.
  1. +103 −9 css/templateCore.css
  2. +18 −3 html/mod_login/default.php
View
112 css/templateCore.css
@@ -8,15 +8,7 @@
width:auto;
}
}
-/*Login Module ---------------------- */
-fieldset {
- border:none;
- margin-bottom:25px;
-}
-fieldset.userdata {
- margin-bottom:10px;
-}
/*article stuff ---------------------- */
article header {
@@ -141,4 +133,106 @@ display: inline-block;
/* Form Stuff ---------------------- */
.registration input, .login input {
width:300px;
-}
+}
+
+/*Login Module ---------------------- */
+
+fieldset {
+ border:none;
+ margin-bottom:25px;
+}
+fieldset.userdata {
+ margin-bottom:10px;
+}
+/* Login toggle stuff (inc related mod_login override stuff) */
+#form-login-password {
+}
+#form-login-remember {
+ width:200px;
+}
+.toggleLabel {
+margin-bottom: 5px;
+}
+.padded {
+ margin-bottom:10px;
+}
+.forgot {
+ line-height:1.7em;
+}
+input.button[type="submit"], input.medium.button[type="submit"] {
+ padding: 6px 20px 9px;
+}
+.toggle {
+ width: 50px;
+ height: 15px;
+ display: block;
+ background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), -webkit-linear-gradient(left, #0C6 48%, #f66 48%);
+ background-image: -moz-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), -moz-linear-gradient(left, #0C6 48%, #f66 48%);
+ background-image: -o-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), -o-linear-gradient(left, #0C6 48%, #f66 48%);
+ background-image: -ms-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), -ms-linear-gradient(left, #0C6 48%, #f66 48%);
+ background-image: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), linear-gradient(left, #0C6 48%, #f66 48%); position: relative;
+ border-radius: 20px;
+ box-shadow: 0 1px 1px 0 rgba(255, 255, 255, .45), inset 0 1px 2px 0 rgba(0, 0, 0, .45);
+ font-size: 12px;
+ text-align: left;
+
+}
+.toggle:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 50%;
+ z-index: 0;
+}
+.toggle:after {
+ position: relative;
+ z-index: 2;
+ width: 95%;
+ margin: 5px 3px 3px 3px;
+ float: left;
+ content: attr(data-on) "\a" attr(data-off);
+ white-space: pre;
+ text-align: center;
+ -webkit-column-count: 2;
+ -moz-column-count: 2;
+ column-count: 2;
+}
+.toggle input {
+ position: absolute;
+ -webkit-opacity: 0;
+ -moz-opacity: 0;
+ opacity: 0;
+}
+.toggle span {
+ width: 28px;
+ height:18px;
+ background-color: #CCC;
+ display: block;
+ position: absolute;
+ top: -2px;
+ z-index: 99;
+ border-radius: 10px;
+ box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .65), inset 0 1px 0 0 rgba(255, 255, 255, .85);
+ background-color: #fd5555;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d6d6d6)); /* Safari 4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #ffffff, #d6d6d6); /* Chrome 10+, Safari 5.1+, iOS 5+ */
+ background-image: -moz-linear-gradient(top, #ffffff, #d6d6d6); /* Firefox 3.6-15 */
+ background-image: -o-linear-gradient(top, #ffffff, #d6d6d6); /* Opera 11.10-12.00 */
+ background-image: linear-gradient(to bottom, #ffffff, #d6d6d6); /* Firefox 16+, IE10, Opera 12.50+ */
+ -webkit-transition: .25s;
+ -moz-transition: .25s;
+ -o-transition: .25s;
+ -ms-transition: .25s;
+ transition: .25s;
+}
+.toggle input:checked+span {
+ left: 43%;
+ -webkit-transition: .25s;
+ -moz-transition: .25s;
+ -o-transition: .25s;
+ -ms-transition: .25s;
+ transition: .25s;
+ }
+ .toggle > input:checked {
+ background:#090;
+ }
View
21 html/mod_login/default.php
@@ -44,21 +44,34 @@
<p id="form-login-password">
<label for="modlgn-passwd"><?php echo JText::_('JGLOBAL_PASSWORD') ?></label>
<input id="modlgn-passwd" type="password" name="password" class="inputbox" size="18" />
+
</p>
<?php if (JPluginHelper::isEnabled('system', 'remember')) : ?>
<p id="form-login-remember">
- <label for="modlgn-remember"><?php echo JText::_('MOD_LOGIN_REMEMBER_ME') ?></label>
+ <div class="six columns padded">
+ <p class="toggleLabel"><span>Show password</span></p>
+ <label class="toggle" >
+ <input type='checkbox' onchange="document.getElementById('modlgn-passwd').type = this.checked ? 'text' : 'password'"/>
+ <span></span>
+ </label>
+ </div>
+ <div class="six columns padded">
+ <p class="toggleLabel"><span><?php echo JText::_('MOD_LOGIN_REMEMBER_ME') ?></span></p>
+ <label class="toggle" >
<input id="modlgn-remember" type="checkbox" name="remember" class="inputbox" value="yes"/>
+ <span></span>
+ </label>
+ </div>
</p>
<?php endif; ?>
+
<input type="submit" name="Submit" class="button" value="<?php echo JText::_('JLOGIN') ?>" />
<input type="hidden" name="option" value="com_users" />
<input type="hidden" name="task" value="user.login" />
<input type="hidden" name="return" value="<?php echo $return; ?>" />
<?php echo JHtml::_('form.token'); ?>
- </fieldset>
<div href="#" class="small button dropdown">
- Forgot Password / Username?
+ <span class="forgot">Forgot Password / Username?</span>
<ul style="top: 28px;">
<li>
<a href="<?php echo JRoute::_('index.php?option=com_users&view=reset'); ?>">
@@ -78,6 +91,8 @@
<?php endif; ?>
</ul>
</div>
+ </fieldset>
+
<?php if ($params->get('posttext')): ?>
<div class="posttext">
<p><?php echo $params->get('posttext'); ?></p>

0 comments on commit 8c46545

Please sign in to comment.