fix: detect autofill in chrome to enable login buttons (#7056)

* fix: detect autofill in chrome to enable login buttons

* fix: add -webkit-autofill to input scss

---------

Co-authored-by: Max Peintner <max@caos.ch>

internal/api/ui/login/static/resources/scripts/form_submit.js

@@ -1,6 +1,24 @@
+// if an autofilled input is deleted we remove the attribute
+function detectDelete(event) {
+  const key = event.key;
+  if (key === "Backspace" || key === "Delete") {
+    event.target.isAutofilled = false;
+  }
+}
+
+// if the autofill associated animation is detected we add a property
+// and check if submit button should be disabled or not
+function autofill(target, checks, form, inputs, button) {
+  if (!target.isAutofilled) {
+    target.isAutofilled = true;
+    target.dispatchEvent(new CustomEvent("autofill", { bubbles: true }));
+    toggleButton(checks, form, inputs, button);
+  }
+}
+
 function disableSubmit(checks, button) {
-    let form = document.getElementsByTagName('form')[0];
+  let form = document.getElementsByTagName("form")[0];
-    let inputs = form.getElementsByTagName('input');
+  let inputs = form.getElementsByTagName("input");
   if (button) {
     button.disabled = true;
   }
@@ -11,23 +29,34 @@ function disableSubmit(checks, button) {
 }
 
 function addRequiredEventListener(inputs, checks, form, button) {
-    let eventType = 'input';
+  let eventType = "input";
   for (i = 0; i < inputs.length; i++) {
     if (inputs[i].required) {
-            eventType = 'input';
+      eventType = "input";
-            if (inputs[i].type === 'checkbox') {
+      if (inputs[i].type === "checkbox") {
-                eventType = 'click';
+        eventType = "click";
       }
+
       inputs[i].addEventListener(eventType, function () {
         toggleButton(checks, form, inputs, button);
       });
+
+      if (inputs[i].type !== "checkbox") {
+        // hack for Chrome, add an animationstart event listener
+        // if input is autofilled: https://gist.github.com/jonathantneal/d462fc2bf761a10c9fca60eb634f6977?permalink_comment_id=2901919
+        inputs[i].addEventListener("animationstart", (event) =>
+          autofill(event.target, checks, form, inputs, button)
+        );
+
+        inputs[i].addEventListener("keydown", detectDelete);
+      }
     }
   }
 }
 
 function disableDoubleSubmit(form, button) {
-    form.addEventListener('submit', function () {
+  form.addEventListener("submit", function () {
-        document.body.classList.add('waiting');
+    document.body.classList.add("waiting");
     button.disabled = true;
   });
 }
@@ -46,10 +75,10 @@ function toggleButton(checks, form, inputs, button) {
 function allRequiredDone(form, inputs) {
   for (i = 0; i < inputs.length; i++) {
     if (inputs[i].required) {
-            if (inputs[i].type === 'checkbox' && !inputs[i].checked) {
+      if (inputs[i].type === "checkbox" && !inputs[i].checked) {
         return false;
       }
-            if (inputs[i].value === '') {
+      if (inputs[i].value === "" && !inputs[i].isAutofilled) {
         return false;
       }
     }

internal/api/ui/login/static/resources/themes/scss/styles/input/input_base.scss

@@ -15,13 +15,13 @@ $lgn-input-placeholder-font-size: 14px !default;
   text-align: start;
   cursor: text;
   border-radius: $lgn-input-border-radius;
-    transform: all .2 linear;
+  transform: all 0.2 linear;
   font-size: 1rem;
   border-style: solid;
   border-width: $lgn-input-border-width;
   height: $lgn-input-line-height;
   padding: $lgn-input-padding;
-    transition: border-color .2s ease-in-out;
+  transition: border-color 0.2s ease-in-out;
   width: 100%;
   margin: $lgn-input-margin;
 
@@ -29,4 +29,19 @@ $lgn-input-placeholder-font-size: 14px !default;
     font-size: $lgn-input-placeholder-font-size;
     font-style: italic;
   }
+
+  &:autofill {
+    animation-duration: 50000s;
+    animation-name: onautofillstart;
+  }
+
+  &:-webkit-autofill {
+    animation-duration: 50000s;
+    animation-name: onautofillstart;
+  }
+}
+
+@keyframes onautofillstart {
+  from {
+  }
 }