Merge pull request #695 from nextcloud/shake-wrong-password

Shake the login fields if password is wrong

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;
+}

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'); ?>