Added the option to show a delete confirmation modal

app/controller.js

@@ -1,5 +1,6 @@
 import FileReceiver from './fileReceiver';
 import FileSender from './fileSender';
+import confirmDeleteDialog from './ui/confirmDeleteDialog';
 import copyDialog from './ui/copyDialog';
 import faviconProgressbar from './ui/faviconProgressbar';
 import okDialog from './ui/okDialog';
@@ -33,6 +34,15 @@ export default function(state, emitter) {
     render();
   }
 
+  async function deleteFile(ownedFile) {
+    try {
+      state.storage.remove(ownedFile.id);
+      await ownedFile.del();
+    } catch (e) {
+      state.sentry.captureException(e);
+    }
+  }
+
   emitter.on('DOMContentLoaded', () => {
     document.addEventListener('blur', () => (updateTitle = true));
     document.addEventListener('focus', () => {
@@ -65,12 +75,17 @@ export default function(state, emitter) {
   });
 
   emitter.on('delete', async ownedFile => {
-    try {
-      state.storage.remove(ownedFile.id);
-      await ownedFile.del();
-    } catch (e) {
-      state.sentry.captureException(e);
+    if (state.WEB_UI.SHOW_DELETE_CONFIRM) {
+      state.modal = confirmDeleteDialog(ownedFile);
+    } else {
+      await deleteFile(ownedFile);
     }
+
+    render();
+  });
+
+  emitter.on('confirmedDelete', async ownedFile => {
+    await deleteFile(ownedFile);
     render();
   });
 

app/ui/confirmDeleteDialog.js

@@ -0,0 +1,36 @@
+const html = require('choo/html');
+
+module.exports = function(archive) {
+  return function(state, emit, close) {
+    return html`
+      <send-ok-dialog class="flex flex-col max-w-sm p-4 m-auto">
+        <h2 class="text-center text-xl font-bold m-8 leading-normal">
+          ${state.translate('deleteConfirmation')}
+        </h2>
+        <div class="grid grid-cols-2 gap-4">
+          <button
+            class="border-2 border-primary cursor-pointer py-4 px-6 font-semibold rounded-lg w-full flex-shrink-0"
+            onclick="${close}"
+            title="${state.translate('cancelButton')}"
+          >
+            ${state.translate('cancelButton')}
+          </button>
+          <button
+            class="btn rounded-lg w-full flex-shrink-0"
+            onclick="${confirm}"
+            title="${state.translate('continueButton')}"
+          >
+            ${state.translate('continueButton')}
+          </button>
+        </div>
+      </send-ok-dialog>
+    `;
+
+    function confirm(event) {
+      console.log(state);
+      event.stopPropagation();
+      emit('confirmedDelete', archive);
+      close();
+    }
+  };
+};

public/locales/de/send.ftl

@@ -134,6 +134,9 @@ accountBenefitSync = Geteilte Dateien von anderen Geräten aus verwalten
 accountBenefitMoz = Erfahre mehr über andere { -mozilla }-Dienste
 signOut = Abmelden
 okButton = OK
+continueButton = Fortsetzen
+cancelButton = Stornieren
+deleteConfirmation = Sind Sie sicher, dass Sie diesen Datei löschen möchten?
 downloadingTitle = Wird heruntergeladen…
 noStreamsWarning = Dieser Browser kann eine so große Datei möglicherweise nicht entschlüsseln.
 noStreamsOptionCopy = Kopiere den Link, um ihn in einem anderen Browser zu öffnen

public/locales/en-CA/send.ftl

@@ -134,6 +134,9 @@ accountBenefitSync = Manage shared files from any device
 accountBenefitMoz = Learn about other { -mozilla } services
 signOut = Sign out
 okButton = OK
+continueButton = Continue
+cancelButton = Cancel
+deleteConfirmation = Are you sure you want to delete this file?
 downloadingTitle = Downloading
 noStreamsWarning = This browser might not be able to decrypt a file this big.
 noStreamsOptionCopy = Copy the link to open in another browser

public/locales/en-GB/send.ftl

@@ -139,6 +139,9 @@ accountBenefitSync = Manage shared files from any device
 accountBenefitMoz = Learn about other { -mozilla } services
 signOut = Sign out
 okButton = OK
+continueButton = Continue
+cancelButton = Cancel
+deleteConfirmation = Are you sure you want to delete this file?
 downloadingTitle = Downloading
 noStreamsWarning = This browser might not be able to decrypt a file this big.
 noStreamsOptionCopy = Copy the link to open in another browser

public/locales/en-US/send.ftl

@@ -131,6 +131,9 @@ accountBenefitSync = Manage shared files from any device
 accountBenefitMoz = Learn about other { -mozilla } services
 signOut = Sign out
 okButton = OK
+continueButton = Continue
+cancelButton = Cancel
+deleteConfirmation = Are you sure you want to delete this file?
 downloadingTitle = Downloading
 noStreamsWarning = This browser might not be able to decrypt a file this big.
 noStreamsOptionCopy = Copy the link to open in another browser

public/locales/nl/send.ftl

@@ -139,6 +139,9 @@ accountBenefitSync = Gedeelde bestanden vanaf andere apparaten beheren
 accountBenefitMoz = Info over andere services van { -mozilla }
 signOut = Afmelden
 okButton = OK
+continueButton = Doorgaan
+cancelButton = Annuleren
+deleteConfirmation = Weet je zeker dat je dit bestand wilt verwijderen?
 downloadingTitle = Downloaden
 noStreamsWarning = Deze browser kan een bestand van deze omvang mogelijk niet ontcijferen.
 noStreamsOptionCopy = Koppeling kopiëren om in een andere browser te openen

server/clientConstants.js

@@ -19,7 +19,8 @@ module.exports = {
       PRIMARY: config.ui_color_primary,
       ACCENT: config.ui_color_accent
     },
-    CUSTOM_ASSETS: config.ui_custom_assets
+    CUSTOM_ASSETS: config.ui_custom_assets,
+    SHOW_DELETE_CONFIRM: config.show_delete_confirm
   },
   DEFAULTS: {
     DOWNLOADS: config.default_downloads,

server/config.js

@@ -175,7 +175,8 @@ const conf = convict({
   },
   custom_description: {
     format: String,
-    default: 'Encrypt and send files with a link that automatically expires to ensure your important documents don’t stay online forever.',
+    default:
+      'Encrypt and send files with a link that automatically expires to ensure your important documents don’t stay online forever.',
     env: 'CUSTOM_DESCRIPTION'
   },
   detect_base_url: {
@@ -223,6 +224,11 @@ const conf = convict({
     default: '',
     env: 'FXA_CSP_PROFILEIMAGE_URL'
   },
+  show_delete_confirm: {
+    format: Boolean,
+    default: false,
+    env: 'SHOW_DELETE_CONFIRM'
+  },
   survey_url: {
     format: String,
     default: '',