feat: added wiggle effect for invalid login

frappe/templates/includes/login/login.css

@@ -137,3 +137,29 @@ p {
   position: absolute;
   z-index: 2;
 }
+
+.invalid-login {
+   -webkit-animation: wiggle 0.5s linear;
+}
+
+@-webkit-keyframes wiggle {
+  8%,
+  41% {
+    -webkit-transform: translateX(-10px);
+  }
+  25%,
+  58% {
+    -webkit-transform: translateX(10px);
+  }
+  75% {
+    -webkit-transform: translateX(-5px);
+  }
+  92% {
+    -webkit-transform: translateX(5px);
+  }
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+  }
+}
+

frappe/templates/includes/login/login.js

@@ -141,6 +141,14 @@ login.set_indicator = function(message, color) {
 		.removeClass().addClass('indicator').addClass(color).text(message)
 }
 
+login.set_invalid = function(message) {
+	$(".login-content.page-card").addClass('invalid-login');
+	setTimeout(() => {
+		$(".login-content.page-card").removeClass('invalid-login');
+	}, 500)
+	login.set_indicator(message, 'red');
+}
+
 login.login_handlers = (function() {
 	var get_error_handler = function(default_message) {
 		return function(xhr, data) {
@@ -161,7 +169,7 @@ login.login_handlers = (function() {
 			}
 
 			if(message===default_message) {
-				login.set_indicator(message, 'red');
+				login.set_invalid(message);
 			} else {
 				login.reset_sections(false);
 			}