Improve firstname/lastname detection (#624)

browser-extensions/chrome/src/shared/formDetector/FieldPatterns.ts

@@ -31,8 +31,8 @@ export type GenderOptionPatterns = {
 export const EnglishFieldPatterns: FieldPatterns = {
   username: ['username', 'login', 'identifier', 'user'],
   fullName: ['fullname', 'full-name', 'full name'],
-  firstName: ['firstname', 'first-name', 'fname', 'name', 'given-name'],
-  lastName: ['lastname', 'last-name', 'lname', 'surname', 'family-name'],
+  firstName: ['firstname', 'first-name', 'first_name', 'fname', 'name', 'given-name'],
+  lastName: ['lastname', 'last-name', 'last_name', 'lname', 'surname', 'family-name'],
   email: ['email', 'mail', 'emailaddress'],
   emailConfirm: ['confirm', 'verification', 'repeat', 'retype', 'verify'],
   password: ['password', 'pwd', 'pass'],

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

@@ -51,6 +51,14 @@ describe('FormDetector English tests', () => {
     testField(FormField.Password, 'aliasvault-input-ienw3qgxv', htmlFile);
   });
 
+  describe('English registration form 6 detection', () => {
+    const htmlFile = 'en-registration-form6.html';
+
+    testField(FormField.FirstName, 'id_first_name', htmlFile);
+    testField(FormField.LastName, 'id_last_name', htmlFile);
+
+  });
+
   describe('English email form 1 detection', () => {
     const htmlFile = 'en-email-form1.html';
 

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

@@ -0,0 +1,26 @@
+<form id="registerUser" action="/accounts/register/" method="post" class="register-form">
+    <input type="hidden" name="csrfmiddlewaretoken" value="U1l5CeQKuQfYceu7DCO2yx1XXFtYXTMYn6ZodGBCz9ruC5XHc56gQDbk7qKUp79d">
+
+
+<input type="hidden" name="captcha" class="g-recaptcha" required_score="0.1" data-sitekey="6LckpJAUAAAAAFx3Ywv8kTCIusy2spXnPN27HYFE" id="id_captcha" data-widget-uuid="f91db472574f45898e363c64c961d2e7" data-callback="onSubmit_f91db472574f45898e363c64c961d2e7" data-size="normal" style="">
+
+    <div id="formRegisterInputs"><div class="row custom-col-12"><div class="col-12 col-md-12"><div class="form-group"><label for="id_first_name">First name<span>*</span></label> <input type="text" placeholder="James" id="id_first_name" name="first_name" required="required" value="" autofocus="autofocus" class="form-control" autocomplete="false"></div></div> <div class="col-12 col-md-12"><div class="form-group"><label for="id_last_name">Last name<span>*</span></label> <input type="text" placeholder="Davies" id="id_last_name" name="last_name" required="required" value="" class="form-control"></div></div></div> <div id="ue_emailRegister"><div class="form-group"><label for="id_email">Email<span>*</span></label> <input type="email" placeholder="[email protected]" id="id_email" name="email" required="required" value="" autocomplete="off" class="form-control"></div></div> <div><div class="form-group"><div class="custom-password"><label for="id_password1">Password<span>*</span></label> <input placeholder="Password" name="password1" id="id_password1" required="required" type="password" class="form-control"> <i class="fas fa-eye"></i></div></div> <div class="custom-regex-condition"><p class="uncheck">12 characters</p> <p class="uncheck">lowercase letter (a-z)</p> <p class="uncheck">uppercase letter (A-Z)</p> <p class="uncheck">one digit (0-9)</p> <p class="uncheck">one special character (ex. &amp;%$#@!+_&lt;,&gt;:;)</p></div> <input type="hidden" placeholder="Password" id="id_password1" name="password1" required="required" value="?J@J$RNILhW{P6K.L&gt;" class="form-control"></div> <button type="submit" data-action="createAccount" class="btn btn-primary w-100"><span class="text-white">Sign up free</span> <div class="text-white" style="width: 40px; height: 25px; overflow: hidden; margin: 0px auto; display: none;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" width="200" height="200" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;"><defs><clipPath id="__lottie_element_2"><rect width="200" height="200" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_2)"><g transform="matrix(1,0,0,1,68.26899719238281,101.01899719238281)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,3.4809999465942383,-1.0190000534057617)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M0,-7.481500148773193 C4.129039764404297,-7.481500148773193 7.481500148773193,-4.129039764404297 7.481500148773193,0 C7.481500148773193,4.129039764404297 4.129039764404297,7.481500148773193 0,7.481500148773193 C-4.129039764404297,7.481500148773193 -7.481500148773193,4.129039764404297 -7.481500148773193,0 C-7.481500148773193,-4.129039764404297 -4.129039764404297,-7.481500148773193 0,-7.481500148773193z"></path></g></g><g transform="matrix(1,0,0,1,96.39399719238281,101.01899719238281)" opacity="0.2580833333333216" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,3.4809999465942383,-1.0190000534057617)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M0,-7.481500148773193 C4.129039764404297,-7.481500148773193 7.481500148773193,-4.129039764404297 7.481500148773193,0 C7.481500148773193,4.129039764404297 4.129039764404297,7.481500148773193 0,7.481500148773193 C-4.129039764404297,7.481500148773193 -7.481500148773193,4.129039764404297 -7.481500148773193,0 C-7.481500148773193,-4.129039764404297 -4.129039764404297,-7.481500148773193 0,-7.481500148773193z"></path></g></g><g transform="matrix(1,0,0,1,124.51899719238281,101.01899719238281)" opacity="0.13108333333332084" style="display: none;"><g opacity="1" transform="matrix(1,0,0,1,3.4809999465942383,-1.0190000534057617)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M0,-7.481500148773193 C4.129039764404297,-7.481500148773193 7.481500148773193,-4.129039764404297 7.481500148773193,0 C7.481500148773193,4.129039764404297 4.129039764404297,7.481500148773193 0,7.481500148773193 C-4.129039764404297,7.481500148773193 -7.481500148773193,4.129039764404297 -7.481500148773193,0 C-7.481500148773193,-4.129039764404297 -4.129039764404297,-7.481500148773193 0,-7.481500148773193z"></path></g></g></g></svg></div></button></div>
+
+<fieldset class="form-group mb-0 mt-3">
+<div class="form-check">
+  <input type="checkbox" class="form-check-input" name="subscribe" id="id_subscribe">
+  <label for="id_subscribe" class="form-check-label">
+    I'd like to get useful tips, inspiration, and offers via email (you can unsubscribe at any time).</label>
+</div>
+</fieldset>
+
+<span class="mt-4 mb-3" data-hr-text="OR"></span>
+
+
+
+
+<p class="custom-p">By creating account I agree with</p>
+
+
+
+</form>