fix(foxy-sign-in-form): detect autofill

Closes #155

src/elements/public/SignInForm/SignInForm.ts

@@ -4,6 +4,7 @@ import { PropertyDeclarations, TemplateResult, html } from 'lit-element';
 import { CheckboxElement } from '@vaadin/vaadin-checkbox';
 import { ConfigurableMixin } from '../../../mixins/configurable';
 import { EmailFieldElement } from '@vaadin/vaadin-text-field/vaadin-email-field';
+import { TextFieldElement } from '@vaadin/vaadin-text-field/vaadin-text-field';
 import { NucleonElement } from '../NucleonElement/NucleonElement';
 import { NucleonV8N } from '../NucleonElement/types';
 import { PasswordFieldElement } from '@vaadin/vaadin-text-field/vaadin-password-field';
@@ -42,6 +43,8 @@ export class SignInForm extends Base<Data> {
 
   issuer = 'Unknown';
 
+  private __autofillPoller: number | null = null;
+
   private readonly __emailValidator = () => !this.errors.some(err => err.startsWith('email'));
 
   private readonly __passwordValidator = () => !this.errors.some(err => err.startsWith('password'));
@@ -388,6 +391,29 @@ export class SignInForm extends Base<Data> {
     `;
   }
 
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    if (this.__autofillPoller !== null) window.clearInterval(this.__autofillPoller);
+
+    this.__autofillPoller = window.setInterval(() => {
+      type Field = EmailFieldElement | PasswordFieldElement | TextFieldElement;
+      const selector = 'vaadin-text-field, vaadin-email-field, vaadin-password-field';
+      const fields = this.renderRoot.querySelectorAll<Field>(selector);
+
+      fields.forEach(field => {
+        const attrValue = field.getAttribute('value') ?? '';
+        const propValue = field.value;
+        if (propValue !== attrValue) field.dispatchEvent(new InputEvent('input'));
+      });
+    }, 250);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.__autofillPoller !== null) window.clearInterval(this.__autofillPoller);
+  }
+
   protected async _sendPost(edits: Partial<Data>): Promise<Data> {
     const body = JSON.stringify(edits);
     const data = await this._fetch(this.parent, { body, method: 'POST' });