Add some JS to hide and show elements for password reset

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt 2017-11-02 12:02:51 +01:00
parent aca29b0c88
commit 585e9f9fcd
3 changed files with 48 additions and 15 deletions

View File

@ -130,28 +130,29 @@ form #datadirField legend {
}
/* Buttons and input */
#submit-wrapper {
#submit-wrapper,
#reset-password-wrapper {
position: relative; /* Make the wrapper the containing block of its
absolutely positioned descendant icons */
}
#submit-wrapper .icon-confirm-white {
#submit-wrapper .submit-icon,
#reset-password-wrapper .submit-icon {
position: absolute;
top: 23px;
right: 23px;
}
#submit-wrapper .icon-loading-small {
position: absolute;
top: 22px;
right: 24px;
}
#submit-wrapper #submit-icon {
pointer-events: none; /* The submit icon is positioned on the submit button.
From the user point of view the icon is part of the
button, so the clicks on the icon have to be
applied to the button instead. */
}
#submit-wrapper .icon-loading-small {
position: absolute;
top: 22px;
right: 24px;
}
input, textarea, select, button, div[contenteditable=true] {
font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
}
@ -395,9 +396,12 @@ form .warning input[type='checkbox']+label {
.lost-password-container {
margin: 0;
}
.lost-password-container #lost-password {
.lost-password-container #lost-password,
.lost-password-container #lost-password-back {
display: inline-block;
padding: 12px;
margin-top: -6px;
color: #fff;
padding: 10px;
opacity: .7;
}
#forgot-password {

View File

@ -14,11 +14,33 @@ OC.Lostpassword = {
init : function() {
$('#lost-password').click(OC.Lostpassword.resetLink);
$('#reset-password #submit').click(OC.Lostpassword.resetPassword);
$('#reset-password-submit').click(OC.Lostpassword.resetPassword);
$('#lost-password-back').click(OC.Lostpassword.backToLogin);
},
backToLogin : function(event){
event.preventDefault();
$('#reset-password-wrapper').slideUp().fadeOut();
$('#lost-password').slideDown().fadeIn();
$('.remember-login-container').slideDown().fadeIn();
$('#submit-wrapper').slideDown().fadeIn();
$('.groupbottom').slideDown().fadeIn();
$('#user').parent().addClass('grouptop');
$('#user').focus();
},
resetLink : function(event){
event.preventDefault();
$('#lost-password').slideUp().fadeOut();
$('.remember-login-container').slideUp().fadeOut();
$('#submit-wrapper').slideUp().fadeOut();
$('.groupbottom').slideUp().fadeOut();
$('#user').parent().removeClass('grouptop');
$('#reset-password-wrapper').slideDown().fadeIn();
$('#user').focus();
if (!$('#user').val().length){
$('#submit').trigger('click');
} else {

View File

@ -51,7 +51,7 @@ script('core', 'merged-login');
<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
</p>
<?php if (!empty($_['invalidpassword']) && !empty($_['canResetPassword'])) { ?>
<?php if (!empty($_['invalidpassword']) && !empty($_['canResetPlost-passwordassword'])) { ?>
<a id="lost-password" class="warning" href="<?php p($_['resetPasswordLink']); ?>">
<?php p($l->t('Wrong password. Reset it?')); ?>
</a>
@ -63,7 +63,7 @@ script('core', 'merged-login');
<div id="submit-wrapper">
<input type="submit" id="submit" class="login primary" title="" value="<?php p($l->t('Log in')); ?>" disabled="disabled" />
<div id="submit-icon" class="icon-confirm-white"></div>
<div class="submit-icon icon-confirm-white"></div>
</div>
<div class="login-additional">
@ -80,6 +80,13 @@ script('core', 'merged-login');
<a id="lost-password" href="<?php p($_['resetPasswordLink']); ?>">
<?php p($l->t('Forgot password?')); ?>
</a>
<div id="reset-password-wrapper" style="display: none;">
<input type="submit" id="reset-password-submit" class="login primary" title="" value="<?php p($l->t('Reset password')); ?>" disabled="disabled" />
<div class="submit-icon icon-confirm-white"></div>
<a id="lost-password-back" href="">
<?php p($l->t('Back to log in')); ?>
</a>
</div>
</div>
<?php } ?>
</div>