Shake the login fields if password is wrong

This commit is contained in:
Morris Jobke 2016-08-01 21:29:30 +02:00 committed by Marius Blüm
parent 80470093dd
commit c0f2207016
2 changed files with 16 additions and 2 deletions

View File

@ -310,3 +310,17 @@ input:disabled+label, input:disabled:hover+label, input:disabled:focus+label {
background-color: #00a2e9;
color: #bbb;
}
@keyframes shake {
0% { transform: translate(-5px, 0); }
20% { transform: translate(5px, 0); }
40% { transform: translate(-5px, 0); }
60% { transform: translate(5px, 0); }
80% { transform: translate(-5px, 0); }
100% { transform: translate(5px, 0); }
}
.shake {
animation-name: shake;
animation-duration: .3s;
animation-timing-function: ease-out;
}

View File

@ -38,7 +38,7 @@ script('core', [
<!-- the following div ensures that the spinner is always inside the #message div -->
<div style="clear: both;"></div>
</div>
<p class="grouptop">
<p class="grouptop<?php if (!empty($_['invalidpassword'])) { ?> shake<?php } ?>">
<input type="text" name="user" id="user"
placeholder="<?php p($l->t('Username or email')); ?>"
value="<?php p($_['loginName']); ?>"
@ -47,7 +47,7 @@ script('core', [
<label for="user" class="infield"><?php p($l->t('Username or email')); ?></label>
</p>
<p class="groupbottom">
<p class="groupbottom<?php if (!empty($_['invalidpassword'])) { ?> shake<?php } ?>">
<input type="password" name="password" id="password" value=""
placeholder="<?php p($l->t('Password')); ?>"
<?php p($_['user_autofocus'] ? '' : 'autofocus'); ?>