From 35ab9f75b6e38bc8565caeebcb9e3533785c8587 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Mon, 22 Apr 2024 14:33:12 -0500
Subject: [PATCH] Website: fix syncing state to prevent double posting on
 /start form (#18468)

Closes: https://github.com/fleetdm/confidential/issues/6214

Changes:
- Updated the ajax button on the /start page form to prevent it from
being clicked twice when the form is submitted.
---
 website/assets/styles/pages/start.less |  1 +
 website/views/pages/start.ejs          | 22 +++++++++++-----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/website/assets/styles/pages/start.less b/website/assets/styles/pages/start.less
index e1709537bc..89fe061bc2 100644
--- a/website/assets/styles/pages/start.less
+++ b/website/assets/styles/pages/start.less
@@ -147,6 +147,7 @@
     font-weight: 700;
     line-height: 150%;
     margin-right: 24px;
+    width: 89px;
   }
   [purpose='back-button'] {
     cursor: pointer;
diff --git a/website/views/pages/start.ejs b/website/views/pages/start.ejs
index 4f28971ebf..174ca9f4b8 100644
--- a/website/views/pages/start.ejs
+++ b/website/views/pages/start.ejs
@@ -11,7 +11,7 @@
         <p>You can come back at any time and pick up where you left off.</p>
         <ajax-form :handle-submitting="handleSubmittingForm" class="contact" :form-errors.sync="formErrors" :form-data="formData['start']" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
         <div purpose="form-buttons">
-          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary">Start</ajax-button>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Start</ajax-button>
         </div>
         </ajax-form>
       </div>
@@ -51,7 +51,7 @@
         </div>
         <cloud-error v-if="cloudError"></cloud-error>
         <div purpose="form-buttons">
-          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary">Continue</ajax-button>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Continue</ajax-button>
         </div>
       </ajax-form>
     </div>
@@ -97,7 +97,7 @@
         <cloud-error v-if="cloudError"></cloud-error>
         <div purpose="form-buttons">
           <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
-          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary">Continue</ajax-button>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Continue</ajax-button>
         </div>
       </ajax-form>
     </div>
@@ -145,7 +145,7 @@
         <cloud-error v-if="cloudError"></cloud-error>
         <div purpose="form-buttons">
           <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
-          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary">Continue</ajax-button>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Continue</ajax-button>
         </div>
       </ajax-form>
     </div>
@@ -176,7 +176,7 @@
         <cloud-error v-if="cloudError"></cloud-error>
         <div purpose="form-buttons">
           <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
-          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary">Continue</ajax-button>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Continue</ajax-button>
         </div>
       </ajax-form>
     </div>
@@ -232,7 +232,7 @@
         <cloud-error v-if="cloudError"></cloud-error>
         <div purpose="form-buttons">
           <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
-          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary">Continue</ajax-button>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Continue</ajax-button>
         </div>
       </ajax-form>
     </div>
@@ -278,7 +278,7 @@
         <cloud-error v-if="cloudError"></cloud-error>
         <div purpose="form-buttons">
           <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
-          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary">Continue</ajax-button>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Continue</ajax-button>
         </div>
       </ajax-form>
     </div>
@@ -329,7 +329,7 @@
         <cloud-error v-if="cloudError"></cloud-error>
         <div purpose="form-buttons">
           <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
-          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary">Continue</ajax-button>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Continue</ajax-button>
         </div>
       </ajax-form>
     </div>
@@ -375,7 +375,7 @@
         <cloud-error v-if="cloudError"></cloud-error>
         <div purpose="form-buttons">
           <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
-          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary">Continue</ajax-button>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Continue</ajax-button>
         </div>
       </ajax-form>
     </div>
@@ -408,7 +408,7 @@
         <p>You can come back here any time to continue with your deployment.</p>
         <div purpose="form-buttons">
           <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
-          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary">Continue</ajax-button>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Continue</ajax-button>
         </div>
       </ajax-form>
     </div>
@@ -519,7 +519,7 @@
         </div>
         <div purpose="form-buttons">
           <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
-          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary">Continue</ajax-button>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Continue</ajax-button>
         </div>
       </ajax-form>
     </div>