Disable buttons when loading is in progress

Signed-off-by: Knut Ahlers <knut@ahlers.me>

src/components/create.vue

@@ -63,9 +63,14 @@
           <button
             type="submit"
             class="btn btn-success"
-            :disabled="secret.trim().length < 1 || maxFileSizeExceeded"
+            :disabled="secret.trim().length < 1 || maxFileSizeExceeded || createRunning"
           >
-            {{ $t('btn-create-secret') }}
+            <template v-if="!createRunning">
+              {{ $t('btn-create-secret') }}
+            </template>
+            <template v-else>
+              <i class="fa-solid fa-spinner fa-spin-pulse" />
+            </template>
           </button>
         </div>
         <div
@@ -168,6 +173,7 @@ export default {
   data() {
     return {
       canWrite: null,
+      createRunning: false,
       fileSize: 0,
       secret: '',
       securePassword: null,
@@ -199,6 +205,9 @@ export default {
         return false
       }
 
+      // Encoding large files takes a while, prevent duplicate click on "create"
+      this.createRunning = true
+
       this.securePassword = [...window.crypto.getRandomValues(new Uint8Array(passwordLength))]
         .map(n => passwordCharset[n % passwordCharset.length])
         .join('')

src/components/secret-display.vue

@@ -10,9 +10,15 @@
         <p v-html="$t('text-pre-reveal-hint')" />
         <button
           class="btn btn-success"
+          :disabled="secretLoading"
           @click="requestSecret"
         >
-          {{ $t('btn-reveal-secret') }}
+          <template v-if="!secretLoading">
+            {{ $t('btn-reveal-secret') }}
+          </template>
+          <template v-else>
+            <i class="fa-solid fa-spinner fa-spin-pulse" />
+          </template>
         </button>
       </template>
       <template v-else>
@@ -77,12 +83,14 @@ export default {
       popover: null,
       secret: null,
       secretContentBlobURL: null,
+      secretLoading: false,
     }
   },
 
   methods: {
     // requestSecret requests the encrypted secret from the backend
     requestSecret() {
+      this.secretLoading = true
       window.history.replaceState({}, '', window.location.href.split('#')[0])
       fetch(`api/get/${this.secretId}`)
         .then(resp => {
@@ -118,6 +126,7 @@ export default {
                         this.files.push({ name: file.name, url: blobURL })
                       })
                   })
+                  this.secretLoading = false
                 })
                 .catch(() => this.$emit('error', this.$t('alert-something-went-wrong')))
             })