Add full name form detection test (#622)

browser-extensions/chrome/src/shared/formDetector/__tests__/FormDetector.en.test.ts

@@ -56,7 +56,13 @@ describe('FormDetector English tests', () => {
 
     testField(FormField.FirstName, 'id_first_name', htmlFile);
     testField(FormField.LastName, 'id_last_name', htmlFile);
+  });
+
+  describe('English registration form 7 detection', () => {
+    const htmlFile = 'en-registration-form7.html';
 
+    testField(FormField.FullName, 'form-group--2', htmlFile);
+    testField(FormField.Email, 'form-group--4', htmlFile);
   });
 
   describe('English email form 1 detection', () => {

browser-extensions/chrome/src/shared/formDetector/__tests__/TestUtils.ts

@@ -3,12 +3,13 @@ import { readFileSync } from 'fs';
 import { join } from 'path';
 import { it, expect } from 'vitest';
 import { JSDOM } from 'jsdom';
-import { LoginForm } from '../types/FormFields';
+import { FormFields } from '../types/FormFields';
 
 export enum FormField {
   Username = 'username',
   FirstName = 'firstName',
   LastName = 'lastName',
+  FullName = 'fullName',
   Email = 'email',
   EmailConfirm = 'emailConfirm',
   Password = 'password',
@@ -97,7 +98,7 @@ const loadTestHtml = (filename: string): string => {
 /**
  * Set up a form detection test.
  */
-const setupFormTest = (htmlFile: string, focusedElementId: string) : { document: Document, result: LoginForm } => {
+const setupFormTest = (htmlFile: string, focusedElementId: string) : { document: Document, result: FormFields | null } => {
   const html = loadTestHtml(htmlFile);
   const dom = new JSDOM(html, {
     url: 'http://localhost',

browser-extensions/chrome/src/shared/formDetector/__tests__/test-forms/en-registration-form7.html

@@ -0,0 +1 @@
+<form data-purpose="code-generation-form" data-gtm-form-interact-id="0"><div class="auth-form-row--small--Byo8R"><div class="ud-compact-form-group ud-form-group"><div class="ud-compact-form-control-container"><input aria-invalid="false" required="" name="full-name" id="form-group--2" type="text" class="ud-text-input ud-text-input-medium ud-text-sm ud-compact-form-control" value="" autocomplete="false" data-gtm-form-interact-field-id="1"><label for="form-group--2" class="ud-form-label ud-heading-sm"><span class="ud-compact-form-label-content"><span class="ud-compact-form-label-text">Full name</span></span></label></div></div></div><div class="auth-form-row--small--Byo8R"><div><div class="ud-compact-form-group ud-form-group"><div class="ud-compact-form-control-container"><input aria-invalid="false" name="email" minlength="7" maxlength="77" id="form-group--4" type="email" class="ud-text-input ud-text-input-medium ud-text-sm ud-compact-form-control" value="" data-gtm-form-interact-field-id="0" autocomplete="false"><label for="form-group--4" class="ud-form-label ud-heading-sm"><span class="ud-compact-form-label-content"><span class="ud-compact-form-label-text">Email</span></span></label></div></div></div></div><button type="submit" class="ud-btn ud-btn-large ud-btn-brand ud-heading-md passwordless-auth-mx-code-generation-form--submit-button--2vOvZ"><svg aria-hidden="true" focusable="false" class="ud-icon ud-icon-medium"><use xlink:href="#icon-email"></use></svg>Continue with email</button></form>

src/AliasVault.Client/wwwroot/css/tailwind.css

@@ -1337,16 +1337,21 @@ video {
   border-top-width: 2px;
 }
 
-.border-blue-300 {
+.border-blue-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(147 197 253 / var(--tw-border-opacity));
+  border-color: rgb(191 219 254 / var(--tw-border-opacity));
 }
 
 .border-blue-700 {
   --tw-border-opacity: 1;
   border-color: rgb(29 78 216 / var(--tw-border-opacity));
 }
 
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -1387,16 +1392,6 @@ video {
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
 
-.border-blue-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(191 219 254 / var(--tw-border-opacity));
-}
-
-.border-gray-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
-}
-
 .bg-amber-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 251 235 / var(--tw-bg-opacity));
@@ -1734,10 +1729,6 @@ video {
   vertical-align: middle;
 }
 
-.align-text-bottom {
-  vertical-align: text-bottom;
-}
-
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 }
@@ -1916,6 +1907,11 @@ video {
   color: rgb(184 112 47 / var(--tw-text-opacity));
 }
 
+.text-primary-800 {
+  --tw-text-opacity: 1;
+  color: rgb(154 93 38 / var(--tw-text-opacity));
+}
+
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -1946,11 +1942,6 @@ video {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
-.text-primary-800 {
-  --tw-text-opacity: 1;
-  color: rgb(154 93 38 / var(--tw-text-opacity));
-}
-
 .opacity-0 {
   opacity: 0;
 }
@@ -2331,11 +2322,6 @@ video {
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
-.dark\:border-blue-800:is(.dark *) {
-  --tw-border-opacity: 1;
-  border-color: rgb(30 64 175 / var(--tw-border-opacity));
-}
-
 .dark\:border-gray-400:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
@@ -2391,8 +2377,8 @@ video {
   background-color: rgb(30 58 138 / var(--tw-bg-opacity));
 }
 
-.dark\:bg-blue-900\/50:is(.dark *) {
-  background-color: rgb(30 58 138 / 0.5);
+.dark\:bg-blue-900\/20:is(.dark *) {
+  background-color: rgb(30 58 138 / 0.2);
 }
 
 .dark\:bg-gray-500:is(.dark *) {
@@ -2440,6 +2426,11 @@ video {
   background-color: rgb(214 131 56 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-primary-900:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(123 74 30 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-red-600:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -2474,15 +2465,6 @@ video {
   background-color: rgb(113 63 18 / var(--tw-bg-opacity));
 }
 
-.dark\:bg-blue-900\/20:is(.dark *) {
-  background-color: rgb(30 58 138 / 0.2);
-}
-
-.dark\:bg-primary-900:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(123 74 30 / var(--tw-bg-opacity));
-}
-
 .dark\:bg-opacity-80:is(.dark *) {
   --tw-bg-opacity: 0.8;
 }