diff --git a/browser-extensions/chrome/src/contentScript.ts b/browser-extensions/chrome/src/contentScript.ts index 358f44f72..9e0ca8f4b 100644 --- a/browser-extensions/chrome/src/contentScript.ts +++ b/browser-extensions/chrome/src/contentScript.ts @@ -766,8 +766,20 @@ function injectIcons(): void { const forms = formDetector.detectForms(); forms.forEach(form => { - // Determine which field to attach the icon to - const targetField = form.emailField || form.usernameField || form.passwordField; + // Find the first occurring field by comparing their positions in the DOM + const fields = [ + { type: 'email', element: form.emailField }, + { type: 'username', element: form.usernameField }, + { type: 'password', element: form.passwordField } + ].filter(f => f.element); + + // Sort fields based on their DOM position + fields.sort((a, b) => { + if (!a.element || !b.element) return 0; + return a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1; + }); + + const targetField = fields[0]?.element; if (targetField && !targetField.parentElement?.querySelector('.aliasvault-input-icon')) { const wrapper = document.createElement('div'); diff --git a/browser-extensions/chrome/src/utils/form-detector/FormDetector.ts b/browser-extensions/chrome/src/utils/form-detector/FormDetector.ts index cb7b08654..785cb9430 100644 --- a/browser-extensions/chrome/src/utils/form-detector/FormDetector.ts +++ b/browser-extensions/chrome/src/utils/form-detector/FormDetector.ts @@ -331,11 +331,11 @@ export class FormDetector { if (radioButtons && radioButtons.length > 0) { // Map specific gender radio buttons - const malePatterns = ['male', 'man', 'm', 'masculin', 'man']; - const femalePatterns = ['female', 'woman', 'f', 'feminin', 'vrouw']; - const otherPatterns = ['other', 'diverse', 'custom', 'prefer not', 'anders', 'iets']; + const malePatterns = ['male', 'man', 'm', 'man', 'gender1']; + const femalePatterns = ['female', 'woman', 'f', 'vrouw', 'gender2']; + const otherPatterns = ['other', 'diverse', 'custom', 'prefer not', 'anders', 'iets', 'unknown', 'gender3']; - const findRadioByPatterns = (patterns: string[]) => { + const findRadioByPatterns = (patterns: string[], isOther: boolean = false) => { return Array.from(radioButtons).find(radio => { const attributes = [ radio.value, @@ -344,6 +344,14 @@ export class FormDetector { radio.labels?.[0]?.textContent || '' ].map(attr => attr?.toLowerCase() || ''); + // For "other" patterns, skip if it matches male or female patterns + if (isOther && ( + malePatterns.some(pattern => attributes.some(attr => attr.includes(pattern))) || + femalePatterns.some(pattern => attributes.some(attr => attr.includes(pattern))) + )) { + return false; + } + return patterns.some(pattern => attributes.some(attr => attr.includes(pattern)) ); diff --git a/browser-extensions/chrome/src/utils/form-detector/__tests__/FormDetector.test.ts b/browser-extensions/chrome/src/utils/form-detector/__tests__/FormDetector.test.ts index 98edf7be6..f91389ad8 100644 --- a/browser-extensions/chrome/src/utils/form-detector/__tests__/FormDetector.test.ts +++ b/browser-extensions/chrome/src/utils/form-detector/__tests__/FormDetector.test.ts @@ -25,6 +25,7 @@ const setupFormTest = (htmlFile: string) => { enum FormField { Username = 'username', + FirstName = 'firstName', LastName = 'lastName', Email = 'email', EmailConfirm = 'emailConfirm', @@ -106,6 +107,20 @@ describe('FormDetector', () => { testField(FormField.GenderOther, 'iets', htmlFile); }); + describe('Dutch registration form 3 detection', () => { + const htmlFile = 'nl-registration-form3.html'; + + testField(FormField.FirstName, 'firstName', htmlFile); + testField(FormField.LastName, 'lastName', htmlFile); + testField(FormField.Password, 'password', htmlFile); + + testField(FormField.BirthDate, 'date', htmlFile); + + testField(FormField.GenderMale, 'gender1', htmlFile); + testField(FormField.GenderFemale, 'gender2', htmlFile); + testField(FormField.GenderOther, 'gender3', htmlFile); + }); + describe('English registration form 1 detection', () => { const htmlFile = 'en-registration-form1.html'; diff --git a/browser-extensions/chrome/src/utils/form-detector/__tests__/test-forms/nl-registration-form3.html b/browser-extensions/chrome/src/utils/form-detector/__tests__/test-forms/nl-registration-form3.html new file mode 100644 index 000000000..170047f7c --- /dev/null +++ b/browser-extensions/chrome/src/utils/form-detector/__tests__/test-forms/nl-registration-form3.html @@ -0,0 +1,228 @@ +
+

Maak je account aan

+ +
+
+ Gratis account +
+
+ Binnen 1 minuut geregeld +
+
+ +
+ + + +
+ Je kunt geen account aanmaken met + + + +
+ +
+
+ + + wijzig e-mailadres + + +
+ +
+ + + + + + + + +

Maak een wachtwoord aan

+ +
+ +
+ +
+ + + +
+
+ +
+
Gebruik minimaal 10 karakters
Probeer de volgende zaken nog toe te voegen:
  • Minimaal 10 karakters
  • Kleine letter
  • Hoofdletter
  • Nummer
  • Speciaal teken
+ +
+ + +

Persoonlijke gegevens

+ + + +
+ + + + +
+ + + + + + + +
+
Aanspreekvorm
+
+ + + + + +
+ + + +
+
+ +
+ + +
+
+ + +
+ + + +
+ + + +
+
+ + + + +
+ + + +
+ + + dd - mm - jjjj +
+
+ + + + + + + + + + +
+ + + +
+
+ + +
+
+ + +
+
+ +
+ + + + + + + + +
+ +
+ +
+ +
+ + + +
+ +
+ + + +

Je bovenstaande gegevens kunnen worden toegevoegd aan jouw profiel in overeenstemming met ons privacy statement. Indien je hiermee ingestemd hebt, gebruiken wij je gegevens voor analyses en om je marketing en advertentie uitingen te tonen die voor jou relevant zijn. Je kunt dit altijd wijzigen via je privacy instellingen in onze websites en apps. Door dit account aan te maken, ga je akkoord met de gebruiksvoorwaarden.

+ +
+ +
+ + + +
+ +
\ No newline at end of file