Website: Update required Fleet Sandbox registration form inputs (#9293)

Changes:
- Updated the Fleet sandbox registration page to make a first name, last
name, and organization required.
- Removed the "REQUIRED" label from the email address input on the Fleet
Sandbox registration page and removed styles for it from the page's
stylesheet.
- Updated the `organization` input of `signup.js` to be required.
- Changed the POST request to Zapier in `signup.js` to always use the
information provided.

website/api/controllers/entrance/signup.js

@@ -36,6 +36,7 @@ the account verification message.)`,
     },
 
     organization: {
+      required: true,
       type: 'string',
       maxLength: 120,
       example: 'The Sails company',
@@ -141,7 +142,7 @@ the account verification message.)`,
       );
     }
 
-    // If "Try Fleet Sandbox" was provided as the signupReason, we'll send a request to Zapier to add this user to our CRM and make sure their Sandbox instance is live before we continue.
+    // If "Try Fleet Sandbox" was provided as the signupReason, we'll make sure their Sandbox instance is live before we continue.
     if(signupReason === 'Try Fleet Sandbox') {
       // Start polling the /healthz endpoint of the created Fleet Sandbox instance, once it returns a 200 response, we'll continue.
       await sails.helpers.flow.until( async()=>{
@@ -185,9 +186,9 @@ the account verification message.)`,
       'https://hooks.zapier.com/hooks/catch/3627242/bqsf4rj/',
       {
         'emailAddress': newEmailAddress,
-        '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
+        'organization': organization,
+        'firstName': firstName,
+        'lastName': lastName,
         'signupReason': signupReason,
         'webhookSecret': sails.config.custom.zapierSandboxWebhookSecret
       }

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

@@ -10,6 +10,9 @@ parasails.registerPage('register', {
 
     // Form rules
     formRules: {
+      firstName: {required: true},
+      lastName: {required: true},
+      organization: {required: true},
       emailAddress: {required: true, isEmail: true},
       password: {required: true, minLength: 8},
     },
@@ -42,23 +45,8 @@ 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) {
-      // 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);
+      argins.signupReason = 'Try Fleet Sandbox';
+      return await Cloud.signup.with(argins);
     },
 
     // After the form is submitted, we'll redirect the user to their Fleet sandbox instance.

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

@@ -21,22 +21,6 @@
     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

@@ -12,16 +12,22 @@
         <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 class="d-flex flex-column mr-2">
+                <input id="firstName" type="text" class="form-control d-flex" :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" placeholder="First name">
+                <div class="invalid-feedback mt-2" v-if="formErrors.firstName === 'required'">Please enter your first name.</div>
+              </div>
+              <div class="d-flex flex-column">
+                <input id="lastName" type="text" class="form-control d-flex" :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" placeholder="Last name">
+                <div class="invalid-feedback mt-2" v-if="formErrors.lastName === 'required'">Please enter your last name.</div>
+              </div>
             </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">
+            <input id="organization" type="text" class="form-control d-flex w-100" :class="[formErrors.organization ? 'is-invalid' : '']" v-model.trim="formData.organization" placeholder="Company">
+            <div class="invalid-feedback mt-2" v-if="formErrors.organization === 'required'">Please enter the name of your organization.</div>
           </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="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="Email address">
             <div class="invalid-feedback mt-2">This doesn’t appear to be a valid email address</div>
           </div>
           <div class="form-group mb-3">