From d9c511f73427eef464230c05eae7a8cdb788db9a Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Thu, 16 Dec 2021 17:17:36 -0500
Subject: [PATCH] DEV: Refactor animation for invalid inputs in wizard (#15334)

---
 .../wizard/components/wizard-step.js          | 27 --------
 .../javascripts/wizard/controllers/step.js    |  6 +-
 app/assets/javascripts/wizard/models/step.js  |  1 -
 app/assets/stylesheets/wizard.scss            | 61 ++++++++++---------
 4 files changed, 37 insertions(+), 58 deletions(-)

diff --git a/app/assets/javascripts/wizard/components/wizard-step.js b/app/assets/javascripts/wizard/components/wizard-step.js
index 48e3f758649..0dc304e860a 100644
--- a/app/assets/javascripts/wizard/components/wizard-step.js
+++ b/app/assets/javascripts/wizard/components/wizard-step.js
@@ -5,23 +5,6 @@ import getUrl from "discourse-common/lib/get-url";
 import { htmlSafe } from "@ember/template";
 import { schedule } from "@ember/runloop";
 
-// eslint-disable-next-line no-undef
-jQuery.fn.wiggle = function (times, duration) {
-  if (times > 0) {
-    this.animate(
-      {
-        marginLeft: times-- % 2 === 0 ? -15 : 15,
-      },
-      duration,
-      0,
-      () => this.wiggle(times, duration)
-    );
-  } else {
-    this.animate({ marginLeft: 0 }, duration, 0);
-  }
-  return this;
-};
-
 const alreadyWarned = {};
 
 export default Component.extend({
@@ -121,18 +104,11 @@ export default Component.extend({
     });
   },
 
-  animateInvalidFields() {
-    schedule("afterRender", () =>
-      $(".invalid input[type=text], .invalid textarea").wiggle(2, 100)
-    );
-  },
-
   advance() {
     this.set("saving", true);
     this.step
       .save()
       .then((response) => this.goNext(response))
-      .catch(() => this.animateInvalidFields())
       .finally(() => this.set("saving", false));
   },
 
@@ -155,10 +131,8 @@ export default Component.extend({
         step
           .save()
           .then(() => this.send("quit"))
-          .catch(() => this.animateInvalidFields())
           .finally(() => this.set("saving", false));
       } else {
-        this.animateInvalidFields();
         this.autoFocus();
       }
     },
@@ -199,7 +173,6 @@ export default Component.extend({
       if (step.get("valid")) {
         this.advance();
       } else {
-        this.animateInvalidFields();
         this.autoFocus();
       }
     },
diff --git a/app/assets/javascripts/wizard/controllers/step.js b/app/assets/javascripts/wizard/controllers/step.js
index b03f74ed52f..7930af64a16 100644
--- a/app/assets/javascripts/wizard/controllers/step.js
+++ b/app/assets/javascripts/wizard/controllers/step.js
@@ -8,7 +8,7 @@ export default Controller.extend({
   actions: {
     goNext(response) {
       const next = this.get("step.next");
-      if (response.refresh_required) {
+      if (response && response.refresh_required) {
         if (this.get("step.id") === "locale") {
           document.location = getUrl(`/wizard/steps/${next}`);
           return;
@@ -16,7 +16,9 @@ export default Controller.extend({
           this.send("refresh");
         }
       }
-      this.transitionToRoute("step", next);
+      if (response && response.success) {
+        this.transitionToRoute("step", next);
+      }
     },
     goBack() {
       this.transitionToRoute("step", this.get("step.previous"));
diff --git a/app/assets/javascripts/wizard/models/step.js b/app/assets/javascripts/wizard/models/step.js
index 527789d2990..ed67491b64b 100644
--- a/app/assets/javascripts/wizard/models/step.js
+++ b/app/assets/javascripts/wizard/models/step.js
@@ -52,7 +52,6 @@ export default EmberObject.extend(ValidState, {
       response.responseJSON.errors.forEach((err) =>
         this.fieldError(err.field, err.description)
       );
-      throw new Error(response);
     });
   },
 });
diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index 9b2407987ce..579231ee997 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -705,6 +705,20 @@ $bubbles-mask: svg-uri(
 '
 );
 
+@keyframes bump {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.05);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
 body.wizard {
   background-color: var(--secondary);
   background-repeat: repeat;
@@ -1196,37 +1210,28 @@ body.wizard {
   }
 }
 
-.textarea-field {
-  textarea {
-    width: 100%;
-    height: 10em;
-    background: var(--secondary);
-  }
-
-  &.invalid {
-    textarea {
-      padding: 3px;
-      border: 4px solid var(--danger);
-    }
-  }
+.textarea-field textarea {
+  width: 100%;
+  height: 10em;
+  padding: 6px;
+  background: var(--secondary);
 }
 
-.text-field {
-  input {
-    width: 100%;
-    font-size: $font-up-1;
-    padding: 6px;
-    background-color: var(--secondary);
-    border: 1px solid var(--primary-low-mid);
-    transition: border-color 0.5s;
-  }
+.text-field input {
+  width: 100%;
+  font-size: $font-up-1;
+  padding: 6px;
+  background-color: var(--secondary);
+  border: 1px solid var(--primary-low-mid);
+  transition: border-color 0.5s;
+}
 
-  &.invalid {
-    input {
-      padding: 3px;
-      border: 4px solid var(--danger);
-    }
-  }
+.textarea-field.invalid textarea,
+.text-field.invalid input {
+  outline: 0;
+  border: 3px solid var(--danger);
+  animation: bump 0.25s ease-in-out;
+  animation-iteration-count: 2;
 }
 
 .radio-field-choice {