[#148] Make secret optional when files are attached (#150)

src/components/create.vue

@@ -72,7 +72,7 @@
           <button
             type="submit"
             class="btn btn-success"
-            :disabled="secret.trim().length < 1 || maxFileSizeExceeded || invalidFilesSelected || createRunning"
+            :disabled="!canCreate"
           >
             <template v-if="!createRunning">
               {{ $t('btn-create-secret') }}
@@ -148,6 +148,10 @@ const passwordLength = 20
 
 export default {
   computed: {
+    canCreate() {
+      return (this.secret.trim().length > 0 || this.selectedFileMeta.length > 0) && !this.maxFileSizeExceeded && !this.invalidFilesSelected
+    },
+
     expiryChoices() {
       const choices = [{ text: this.$t('expire-default'), value: null }]
       for (const choice of this.$root.customize.expiryChoices || defaultExpiryChoices) {
@@ -243,7 +247,7 @@ export default {
 
     // createSecret executes the secret creation after encrypting the secret
     createSecret() {
-      if (this.secret.trim().length < 1 || this.maxFileSizeExceeded || this.invalidFilesSelected) {
+      if (!this.canCreate) {
         return false
       }
 

src/components/secret-display.vue

@@ -6,7 +6,7 @@
       v-html="$t('title-reading-secret')"
     />
     <div class="card-body">
-      <template v-if="!secret">
+      <template v-if="!secret && files.length === 0">
         <p v-html="$t('text-pre-reveal-hint')" />
         <button
           class="btn btn-success"
@@ -23,7 +23,10 @@
         </button>
       </template>
       <template v-else>
-        <div class="input-group mb-3">
+        <div
+          v-if="secret"
+          class="input-group mb-3"
+        >
           <textarea
             class="form-control"
             readonly
@@ -47,7 +50,6 @@
             </div>
           </div>
         </div>
-        <p v-html="$t('text-hint-burned')" />
         <template v-if="files.length > 0">
           <p v-html="$t('text-attached-files')" />
           <ul>
@@ -64,6 +66,7 @@
             </li>
           </ul>
         </template>
+        <p v-html="$t('text-hint-burned')" />
       </template>
     </div>
   </div>