Website: Add optional inputs to Fleet Sandbox registration form. (#9203)

cc: @alexmitchellii

Changes:
- Added optional inputs to the Fleet Sandbox signup page:
   - First name
   - Last name
   - Organization
- Updated signup.js to send the optional inputs to the Zapier webhook

Co-authored-by: Mike McNeil <mikermcneil@users.noreply.github.com>

website/api/controllers/entrance/signup.js

@@ -184,9 +184,9 @@ the account verification message.)`,
       'https://hooks.zapier.com/hooks/catch/3627242/bqsf4rj/',
       {
         'emailAddress': newEmailAddress,
-        'organization': signupReason === 'Buy a license' ? organization : '?',
-        'firstName': signupReason === 'Buy a license' ? firstName : '?',
-        'lastName': signupReason === 'Buy a license' ? lastName : '?',
+        'organization': organization ? organization : '?',// « organization input is optional
+        'firstName': firstName !== emailAddress.split('@')[0] ? firstName : '?',// « firstName input is always set, but it might have just been a guess based on email.  And if was a guess, let's just use "?" instead.
+        'lastName': lastName !== emailAddress.split('@')[1] ? lastName : '?',// « lastName input is always set, like firstName
         'signupReason': signupReason,
         'webhookSecret': sails.config.custom.zapierSandboxWebhookSecret
       }

website/assets/js/pages/try-fleet/register.page.js

@@ -42,10 +42,23 @@ parasails.registerPage('register', {
 
     // Using handle-submitting to add firstName, and lastName values to our formData before sending it to signup.js
     handleSubmittingRegisterForm: async function(argins) {
-      argins.firstName = argins.emailAddress.split('@')[0];
-      argins.lastName = argins.emailAddress.split('@')[1];
-      argins.signupReason = 'Try Fleet Sandbox';
-      return await Cloud.signup.with(argins);
+      // Creating a copy of the formdata to submit to the signup action. Otherwise, any changes to the formData before we call our signup action would be visible to the user.
+      let signupArgins = _.clone(argins);
+      if(!this.formData.firstName){
+        if(this.formData.lastName) {// If a user provided a lastName but no firstName, we'll set the firstName to '?' instead of a fragment of the users email address.
+          signupArgins.firstName = '?';
+        } else {
+          signupArgins.firstName = argins.emailAddress.split('@')[0];
+        }
+      }
+      if(!this.formData.lastName) {
+        if(this.formData.firstName) {// If a user provided a firstName but no lastName, we'll set the lastName to '?' instead of a fragment of the users email address.
+          signupArgins.lastName = '?';
+        }
+        signupArgins.lastName = argins.emailAddress.split('@')[1];
+      }
+      signupArgins.signupReason = 'Try Fleet Sandbox';
+      return await Cloud.signup.with(signupArgins);
     },
 
     // After the form is submitted, we'll redirect the user to their Fleet sandbox instance.

website/assets/styles/pages/try-fleet/register.less

@@ -21,6 +21,22 @@
     border: 1px solid @core-vibrant-blue;
     outline: none;
   }
+  [purpose='email-input']:focus-visible {
+    border: 1px solid @core-vibrant-blue;
+    outline: none;
+  }
+  [purpose='email-input'] {
+    position: relative;
+    span {
+      position: absolute;
+      right: 12px;
+      top: 18px;
+      font-size: 10px;
+      font-weight: 700;
+      color: @core-fleet-black-50;
+      line-height: 18px;
+    }
+  }
   input::placeholder {
     color: #8B8FA2;
   }

website/views/pages/try-fleet/register.ejs

@@ -11,7 +11,17 @@
       <div class="pt-3">
         <ajax-form :handle-submitting="handleSubmittingRegisterForm" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules" @submitted="submittedRegisterForm()">
           <div class="form-group mb-3">
+            <div class="d-flex flex-row">
+              <input id="firstName" type="text" class="form-control d-flex w-50 mr-2" v-model.trim="formData.firstName" placeholder="First name">
+              <input id="lastName" type="text" class="form-control d-flex w-50" v-model.trim="formData.lastName" placeholder="Last name">
+            </div>
+          </div>
+          <div class="form-group mb-3">
+            <input id="organization" type="text" class="form-control d-flex w-100" v-model.trim="formData.organization" placeholder="Company">
+          </div>
+          <div purpose="email-input" class="form-group mb-3">
             <input id="emailAddress" type="text" class="form-control d-flex w-100" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" placeholder="Sign up with email">
+            <span :class="[formData.emailAddress ? 'd-none' : '']">REQUIRED</span>
             <div class="invalid-feedback mt-2">This doesn’t appear to be a valid email address</div>
           </div>
           <div class="form-group mb-3">