Website: /device-management updates (#9295)

Related to: https://github.com/fleetdm/fleet/issues/9266

Changes:
- Updated the width of the modal form on the `/device-management` page.
- Updated the form inputs on the `/device-management` page to clear
errors when a user changes the input.
- Updated button styles to match wireframes.
- Updated the page indicator in the scrollable-tweets component.

Co-authored-by: Mike Thomas <mthomas@fleetdm.com>

website/assets/js/components/scrollable-tweets.component.js

@@ -150,7 +150,7 @@ parasails.registerComponent('scrollableTweets', {
       this.tweetCardWidth = firstTweetCardDiv.clientWidth + 16;
       let usersScreenWidth = window.innerWidth;
       // Get the number of tweets that can be visible on the user's screen
-      this.numberOfTweetsPerPage = Math.floor(usersScreenWidth/this.tweetCardWidth);
+      this.numberOfTweetsPerPage = Math.max(Math.floor(usersScreenWidth/this.tweetCardWidth), 1);
       // Divide the number of tweet cards by the number of tweets that can fit on a users screen
       this.numberOfTweetPages = Math.ceil(this.numberOfTweetCards / this.numberOfTweetsPerPage);
       await this.forceRender();
@@ -163,6 +163,9 @@ parasails.registerComponent('scrollableTweets', {
       // Divide the current amount scrolled by the width of a tweet card, and divide that value by how many tweet cards we can show on a page.
       let pageCurrentlyViewed = ((currentTweetDivScrollAmount) / this.tweetCardWidth) / this.numberOfTweetsPerPage;
       let pageToIndicate = Math.ceil(pageCurrentlyViewed + 1);
+      if(pageToIndicate > this.numberOfTweetPages){
+        pageToIndicate = this.numberOfTweetPages;
+      }
       // Update the currentTweetPage value
       this.currentTweetPage = pageToIndicate;
     },

website/assets/js/pages/fleet-mdm.page.js

@@ -45,6 +45,11 @@ parasails.registerPage('device-management', {
     closeModal: function () {
       this.modal = '';
     },
+    typeClearOneFormError: async function(field) {
+      if(this.formErrors[field]){
+        this.formErrors = _.omit(this.formErrors, field);
+      }
+    },
     submittedForm: function() {
       this.showSignupFormSuccess = true;
     },

website/assets/styles/pages/fleet-mdm.less

@@ -72,7 +72,26 @@
       justify-content: center;
       align-items: center;
       color: #FFF;
+      position: relative;
     }
+    [purpose='mdm-beta-button']::before {
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
+      opacity: 1;
+      content: ' ';
+      position: absolute;
+      top: 0;
+      left: -5px;
+      width: 50%;
+      height: 100%;
+      transform: skew(-10deg);
+      transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
+    }
+    [purpose='mdm-beta-button']:hover:before {
+      opacity: 0;
+      left: 160px;
+      width: 110%;
+    }
+
     [purpose='animated-arrow-button-red'] {
       display: inline;
       padding-right: 40px;
@@ -207,7 +226,8 @@
     label {
       font-weight: 700;
     }
-    min-width: 450px;
+    width: 100%;
+    max-width: 450px;
   }
 
   [purpose='submit-button'] {
@@ -390,11 +410,9 @@
     }
 
     [purpose='modal-content'] {
+      margin-top: 40px;
       padding: 40px 20px 80px 20px;
     }
 
-    [purpose='modal-form'] {
-      min-width: auto;
-    }
   }
 }

website/views/pages/fleet-mdm.ejs

@@ -94,16 +94,18 @@
 
     </div>
   </div>
-  <div purpose="tweets-container" class="container-fluid px-md-0 d-flex flex-column justify-content-center">
+  <div purpose="tweets-container" class="container-fluid px-md-0 pb-0 d-flex flex-column justify-content-center">
     <div purpose="section-heading" style="max-width: 720px" class="mx-auto text-left text-md-center">
       <h4>Don’t know osquery?</h4>
       <h2>Dedicated support from osquery experts</h2>
 
       <p>Osquery is the open-source agent that powers Fleet. And we have the most osquery experts around. We’ll help you realize the potential of this tool for your organization.</p>
     </div>
-
+  </div>
+  <div style="background-color: #F9FAFC;">
     <scrollable-tweets></scrollable-tweets>
-
+  </div>
+  <div purpose="tweets-container" class="container-fluid px-md-0 d-flex pt-0 flex-column justify-content-center">
     <div purpose="logos" class="d-flex flex-wrap justify-content-center align-items-center">
       <img alt="The Snowflake logo" purpose="snowflake-logo" src="/images/logo-snowflake-muted-151x30@2x.png">
       <img alt="The Wayfair logo" purpose="wayfair-logo" src="/images/logo-wayfair-muted-150x33@2x.png">
@@ -123,18 +125,18 @@
       <ajax-form action="deliverMdmBetaSignup" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-data="formData" :form-rules="formRules" :form-errors.sync="formErrors" @submitted="submittedForm()">
           <div class="form-group">
             <label for="fullName">Name</label>
-            <input class="form-control" id="fullName" :class="[formErrors.fullName ? 'is-invalid' : '']" v-model.trim="formData.fullName">
+            <input class="form-control" id="fullName" :class="[formErrors.fullName ? 'is-invalid' : '']" v-model.trim="formData.fullName" @input="typeClearOneFormError('fullName')">
             <div class="invalid-feedback" v-if="formErrors.fullName">Please enter your name.</div>
           </div>
           <div class="form-group">
             <label for="emailAddress">Email</label>
-            <input class="form-control" id="emailAddress" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress">
-            <div class="invalid-feedback" v-if="formErrors.emailAddress">Please enter your email address.</div>
+            <input class="form-control" id="emailAddress" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" @input="typeClearOneFormError('emailAddress')">
+            <div class="invalid-feedback" v-if="formErrors.emailAddress" focus-first>This doesn’t appear to be a valid email address</div>
           </div>
           <div class="form-group">
             <label for="jobTitle">Job Title</label>
-            <input class="form-control" id="jobTitle" :class="[formErrors.jobTitle ? 'is-invalid' : '']" v-model.trim="formData.jobTitle">
-            <div class="invalid-feedback" v-if="formErrors.jobTitle">Please enter your Job title.</div>
+            <input class="form-control" id="jobTitle" :class="[formErrors.jobTitle ? 'is-invalid' : '']" v-model.trim="formData.jobTitle" @input="typeClearOneFormError('jobTitle')">
+            <div class="invalid-feedback" v-if="formErrors.jobTitle">Please enter your job title.</div>
           </div>
           <cloud-error v-if="cloudError"></cloud-error>
         <div class="border-0 justify-content-center">