From c0f2207016aa5b5d193b84ba9f8cce6f60d87c9f 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 b58310a5c5..ebde986d58 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 95c5a423c3..c5453c3449 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'); ?>