From 37a83d5a95135f5fd1f48d5d1038ed54e9362a68 Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Mon, 10 Feb 2020 01:50:33 +0000
Subject: [PATCH] Login and Registration: Use CSS animation instead of old
 JavaScript code for "shake" animation on login failure.

Props markjaquith, valentinbora.
Fixes #48490.

git-svn-id: https://develop.svn.wordpress.org/trunk@47226 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/login.css | 18 ++++++++++++++++++
 src/wp-login.php           |  8 ++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css
index d5c60f117a..f0261a6819 100644
--- a/src/wp-admin/css/login.css
+++ b/src/wp-admin/css/login.css
@@ -139,6 +139,24 @@ p {
 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
 }
 
+.login form.shake {
+	animation: shake 0.2s cubic-bezier(.19,.49,.38,.79) both;
+	animation-iteration-count: 3;
+	transform: translateX(0);
+}
+
+@keyframes shake {
+	25% {
+		transform: translateX(-20px);
+	}
+	75% {
+		transform: translateX(20px);
+	}
+	100% {
+		transform: translateX(0);
+	}
+}
+
 .login-action-confirm_admin_email #login {
 	width: 60vw;
 	margin-top: -2vh;
diff --git a/src/wp-login.php b/src/wp-login.php
index 55e310a216..096a2d4b4c 100644
--- a/src/wp-login.php
+++ b/src/wp-login.php
@@ -62,7 +62,7 @@ function login_header( $title = 'Log In', $message = '', $wp_error = null ) {
 	$shake_error_codes = apply_filters( 'shake_error_codes', $shake_error_codes );
 
 	if ( $shake_error_codes && $wp_error->has_errors() && in_array( $wp_error->get_error_code(), $shake_error_codes, true ) ) {
-		add_action( 'login_head', 'wp_shake_js', 12 );
+		add_action( 'login_footer', 'wp_shake_js', 12 );
 	}
 
 	$login_title = get_bloginfo( 'name', 'display' );
@@ -335,11 +335,7 @@ function login_footer( $input_id = '' ) {
 function wp_shake_js() {
 	?>
 	<script type="text/javascript">
-	addLoadEvent = function(func){if(typeof jQuery!="undefined")jQuery(document).ready(func);else if(typeof wpOnload!='function'){wpOnload=func;}else{var oldonload=wpOnload;wpOnload=function(){oldonload();func();}}};
-	function s(id,pos){g(id).left=pos+'px';}
-	function g(id){return document.getElementById(id).style;}
-	function shake(id,a,d){c=a.shift();s(id,c);if(a.length>0){setTimeout(function(){shake(id,a,d);},d);}else{try{g(id).position='static';wp_attempt_focus();}catch(e){}}}
-	addLoadEvent(function(){ var p=new Array(15,30,15,0,-15,-30,-15,0);p=p.concat(p.concat(p));var i=document.forms[0].id;g(i).position='relative';shake(i,p,20);});
+	document.querySelector('form').classList.add('shake');
 	</script>
 	<?php
 }