Implement file attachment into interface

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

i18n.yaml

@@ -23,6 +23,8 @@ reference:
       - After the encrypted secret has been retrieved once, it is deleted from the server
     label-expiry: 'Expire in:'
     label-secret-data: 'Secret data:'
+    label-secret-files: 'Files to attach:'
+    text-attached-files: 'The sender attached files to the secret. Click to download them but make sure to trust the sender before using them:'
     text-burn-hint: Please remember not to go to this URL yourself as that would destroy the secret. Just pass it to someone else!
     text-burn-time: 'If not viewed before, this secret will automatically be deleted:'
     text-hint-burned: <strong>Attention:</strong> You're only seeing this once. As soon as you reload the page the secret will be gone so maybe copy it now&hellip;

src/components/create.vue

@@ -29,7 +29,7 @@
         class="row"
         @submit.prevent="createSecret"
       >
-        <div class="col-12 mb-3 order-0">
+        <div class="col-12 mb-3">
           <label for="createSecretData">{{ $t('label-secret-data') }}</label>
           <textarea
             id="createSecretData"
@@ -38,6 +38,16 @@
             rows="5"
           />
         </div>
+        <div class="col-12 mb-3">
+          <label for="createSecretFiles">{{ $t('label-secret-files') }}</label>
+          <input
+            id="createSecretFiles"
+            ref="createSecretFiles"
+            class="form-control"
+            type="file"
+            multiple
+          >
+        </div>
         <div class="col-md-6 col-12 order-2 order-md-1">
           <button
             type="submit"
@@ -169,6 +179,12 @@ export default {
       const meta = new OTSMeta()
       meta.secret = this.secret
 
+      if (this.$refs.createSecretFiles) {
+        for (const f of [...this.$refs.createSecretFiles.files]) {
+          meta.files.push(f)
+        }
+      }
+
       meta.serialize()
         .then(secret => appCrypto.enc(secret, this.securePassword))
         .then(secret => {

src/components/secret-display.vue

@@ -41,6 +41,23 @@
           </div>
         </div>
         <p v-html="$t('text-hint-burned')" />
+        <template v-if="files">
+          <p v-html="$t('text-attached-files')" />
+          <ul>
+            <li
+              v-for="file in files"
+              :key="file.name"
+            >
+              <a
+                class="font-monospace"
+                :href="file.url"
+                :download="file.name"
+              >
+                {{ file.name }}
+              </a>
+            </li>
+          </ul>
+        </template>
       </template>
     </div>
   </div>
@@ -56,6 +73,7 @@ export default {
 
   data() {
     return {
+      files: [],
       popover: null,
       secret: null,
       secretContentBlobURL: null,
@@ -92,6 +110,14 @@ export default {
                 .then(secret => {
                   const meta = new OTSMeta(secret)
                   this.secret = meta.secret
+
+                  meta.files.forEach(file => {
+                    file.arrayBuffer()
+                      .then(ab => {
+                        const blobURL = window.URL.createObjectURL(new Blob([ab], { type: file.type }))
+                        this.files.push({ name: file.name, url: blobURL })
+                      })
+                  })
                 })
                 .catch(() => this.$emit('error', this.$t('alert-something-went-wrong')))
             })