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.
This commit is contained in:
Eric 2024-04-22 14:33:12 -05:00 committed by GitHub
parent 79a5baa5a6
commit 35ab9f75b6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 12 additions and 11 deletions

View file

@ -147,6 +147,7 @@
font-weight: 700;
line-height: 150%;
margin-right: 24px;
width: 89px;
}
[purpose='back-button'] {
cursor: pointer;

View file

@ -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>