From d97fe1775af27437c9e4dc77e65a92decbec900c Mon Sep 17 00:00:00 2001
From: Morris Jobke <hey@morrisjobke.de>
Date: Mon, 1 Aug 2016 21:29:30 +0200
Subject: [PATCH] Shake the login fields if password is wrong
---
core/css/inputs.css | 14 ++++++++++++++
core/templates/login.php | 4 ++--
2 files changed, 16 insertions(+), 2 deletions(-)
diff --git a/core/css/inputs.css b/core/css/inputs.css
index b58310a5c58..ebde986d584 100644
--- 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 95c5a423c3d..c5453c34497 100644
--- 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'); ?>
--
GitLab