[#170] Add button to burn secrets immediately (#193)

i18n.yaml

@@ -38,12 +38,14 @@ reference:
     text-powered-by: Powered by
     text-pre-reveal-hint: To reveal the secret click this button but be aware doing so will destroy the secret. You can only view it once!
     text-pre-url: 'Your secret was created and stored using this URL:'
+    text-secret-burned: The secret was successfully destroyed.
     text-secret-create-disabled: The creation of new secrets is disabled in this instance.
     title-explanation: This is how it works…
     title-new-secret: Create a new secret
     title-reading-secret: Reading your secret…
     title-secret-create-disabled: Secret creation disabled…
     title-secret-created: Secret created!
+    tooltip-burn-secret: Burn Secret now!
     tooltip-copy-to-clipboard: Copy to Clipboard
     tooltip-download-as-file: Download as File
 translations:
@@ -129,12 +131,14 @@ translations:
       text-powered-by: Läuft mit
       text-pre-reveal-hint: Um das Secret anzuzeigen klicke diesen Button aber denk dran, dass das Secret nur einmal angezeigt und dabei gelöscht wird.
       text-pre-url: 'Dein Secret wurde angelegt und unter folgender URL gespeichert:'
+      text-secret-burned: Das Secret wurde zerstört.
       text-secret-create-disabled: Auf dieser Instanz wurde das Erstellen neuer Secrets deaktiviert.
       title-explanation: So funktioniert es…
       title-new-secret: Erstelle ein neues Secret
       title-reading-secret: Secret auslesen…
       title-secret-create-disabled: Erstellen von Secrets deaktiviert…
       title-secret-created: Secret erstellt!
+      tooltip-burn-secret: Secret jetzt zerstören!
       tooltip-copy-to-clipboard: In die Zwischenablage kopieren
       tooltip-download-as-file: Als Datei herunterladen
     formalTranslations:

src/components/display-url.vue

@@ -5,7 +5,10 @@
       class="card-header bg-success-subtle"
       v-html="$t('title-secret-created')"
     />
-    <div class="card-body">
+    <div
+      v-if="!burned"
+      class="card-body"
+    >
       <p v-html="$t('text-pre-url')" />
       <div class="input-group mb-3">
         <input
@@ -21,13 +24,26 @@
           :title="$t('tooltip-copy-to-clipboard')"
         />
         <app-qr-button :qr-content="secretUrl" />
+        <button
+          class="btn btn-danger"
+          :title="$t('tooltip-burn-secret')"
+          @click="burnSecret"
+        >
+          <i class="fas fa-fire fa-fw" />
+        </button>
       </div>
       <p v-html="$t('text-burn-hint')" />
       <p v-if="expiresAt">
         {{ $t('text-burn-time') }}
         <strong>{{ expiresAt.toLocaleString() }}</strong>
       </p>
     </div>
+    <div
+      v-else
+      class="card-body"
+    >
+      {{ $t('text-secret-burned') }}
+    </div>
   </div>
 </template>
 <script>
@@ -50,10 +66,20 @@ export default {
 
   data() {
     return {
+      burned: false,
       popover: null,
     }
   },
 
+  methods: {
+    burnSecret() {
+      return fetch(`api/get/${this.secretId}`)
+        .then(() => {
+          this.burned = true
+        })
+    },
+  },
+
   mounted() {
     // Give the interface a moment to transistion and focus
     window.setTimeout(() => this.$refs.secretUrl.focus(), 100)