From 46a74ba2c8dadbd14e4dcff27a8e15c3a8f5b1ae Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Fri, 1 Nov 2024 21:33:29 -0300
Subject: [PATCH] fix(foxy-sign-in-form): detect autofill

Closes #155
---
 src/elements/public/SignInForm/SignInForm.ts | 26 ++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/elements/public/SignInForm/SignInForm.ts b/src/elements/public/SignInForm/SignInForm.ts
index b1c6a13b..517df52e 100644
--- a/src/elements/public/SignInForm/SignInForm.ts
+++ b/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' });