Shake the login fields if password is wrong

diff --git a/core/css/inputs.css b/core/css/inputs.css
index b58310a5c5851d1834543de0d88c4b32cc781aa4..ebde986d584c90f111733aefb45294e46ad5ff43 100644 (file)
--- a/core/css/inputs.css
+++ b/core/css/inputs.css
@@ -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;
+}

diff --git a/core/templates/login.php b/core/templates/login.php
index 95c5a423c3ded3c28fc6e8628a6725e08cc869a5..c5453c344971c76800bfa64e3a1eacf835f6060a 100644 (file)
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -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'); ?>