From e24c2b6466ad08e8947603b3c757c54b62ea86db Mon Sep 17 00:00:00 2001
From: Benedict Aas <x+g@shou.io>
Date: Mon, 5 Dec 2016 14:56:38 +0000
Subject: [PATCH] feat(GUI): confirm before quitting etcher while writing
 (#868)

When Etcher is writing to a drive and the user closes the window,
currently there is no confirmation. This commit changes that and
the user has to confirm the exit.

Other changes include the warning modal taking a `rejectionLabel` option
that shows a reject button when provided.

Closes: https://github.com/resin-io/etcher/issues/744
Change-Type: minor
Changelog-Entry: Confirm before user quits while writing.
---
 build/css/main.css                            |  2 +
 lib/gui/app.js                                | 42 +++++++++++++++++++
 lib/gui/components/modal/styles/_modal.scss   |  4 ++
 .../warning-modal/services/warning-modal.js   |  3 +-
 .../templates/warning-modal.tpl.html          |  8 +++-
 5 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/build/css/main.css b/build/css/main.css
index d84f8e32..b7e7f080 100644
--- a/build/css/main.css
+++ b/build/css/main.css
@@ -6269,6 +6269,8 @@ body {
 
 .modal-text {
   padding: 20px; }
+  .modal-text > p {
+    white-space: pre-line; }
   .modal-text > p:last-child {
     margin-bottom: 0; }
 
diff --git a/lib/gui/app.js b/lib/gui/app.js
index 1f106920..b7077e2d 100644
--- a/lib/gui/app.js
+++ b/lib/gui/app.js
@@ -23,6 +23,8 @@
 /* eslint-disable no-var */
 
 var angular = require('angular');
+const electron = require('electron');
+const EXIT_CODES = require('../src/exit-codes');
 
 /* eslint-enable no-var */
 
@@ -48,6 +50,7 @@ const app = angular.module('Etcher', [
   require('./components/svg-icon/svg-icon'),
   require('./components/update-notifier/update-notifier'),
   require('./components/drive-selector/drive-selector'),
+  require('./components/warning-modal/warning-modal'),
 
   // Pages
   require('./pages/main/main'),
@@ -145,6 +148,45 @@ app.run(($timeout, DriveScannerService, DrivesModel, ErrorService, DriveSelector
   DriveScannerService.start();
 });
 
+app.run(($window, WarningModalService, ErrorService, FlashStateModel) => {
+  let popupExists = false;
+
+  $window.addEventListener('beforeunload', (event) => {
+
+    // Don't close window while flashing
+    if (FlashStateModel.isFlashing()) {
+      event.returnValue = false;
+    }
+
+    if (popupExists) {
+      return;
+    }
+
+    // Don't open any more popups
+    popupExists = true;
+
+    WarningModalService.display({
+      confirmationLabel: 'Yes, quit',
+      rejectionLabel: 'Cancel',
+      description: [
+        'You are currently flashing a drive. Closing Etcher may leave',
+        'your drive in an unusable state.\n\nAre you sure you want to',
+        'close Etcher?'
+      ].join(' ')
+    }).then((confirmed) => {
+      if (confirmed) {
+
+        // This circumvents the 'beforeunload' event unlike
+        // electron.remote.app.quit() which does not.
+        electron.remote.process.exit(EXIT_CODES.SUCCESS);
+
+      }
+
+      popupExists = false;
+    }).catch(ErrorService.reportException);
+  });
+});
+
 app.config(($urlRouterProvider) => {
   $urlRouterProvider.otherwise('/main');
 });
diff --git a/lib/gui/components/modal/styles/_modal.scss b/lib/gui/components/modal/styles/_modal.scss
index e40f1f96..1b98c45a 100644
--- a/lib/gui/components/modal/styles/_modal.scss
+++ b/lib/gui/components/modal/styles/_modal.scss
@@ -92,6 +92,10 @@
 .modal-text {
   padding: 20px;
 
+  > p {
+    white-space: pre-line;
+  }
+
   > p:last-child {
     margin-bottom: 0;
   }
diff --git a/lib/gui/components/warning-modal/services/warning-modal.js b/lib/gui/components/warning-modal/services/warning-modal.js
index c3ec7676..befdf699 100644
--- a/lib/gui/components/warning-modal/services/warning-modal.js
+++ b/lib/gui/components/warning-modal/services/warning-modal.js
@@ -27,7 +27,8 @@ module.exports = function(ModalService) {
    *
    * @param {Object} options - options
    * @param {String} options.description - danger message
-   * @param {String} options.confirmationLabel - danger message
+   * @param {String} options.confirmationLabel - confirmation button text
+   * @param {String} options.rejectionLabel - rejection button text
    * @fulfil {Boolean} - whether the user accepted or rejected the warning
    * @returns {Promise}
    *
diff --git a/lib/gui/components/warning-modal/templates/warning-modal.tpl.html b/lib/gui/components/warning-modal/templates/warning-modal.tpl.html
index 0a67df77..61b7383c 100644
--- a/lib/gui/components/warning-modal/templates/warning-modal.tpl.html
+++ b/lib/gui/components/warning-modal/templates/warning-modal.tpl.html
@@ -13,7 +13,11 @@
 </div>
 
 <div class="modal-footer">
-  <button class="button button-danger button-block"
-    ng-click="modal.accept()">{{ ::modal.options.confirmationLabel }}</button>
+  <div class="modal-menu">
+    <button class="button button-danger button-block"
+      ng-click="modal.accept()">{{ ::modal.options.confirmationLabel }}</button>
+    <button ng-if="modal.options.rejectionLabel" class="button button-block"
+      ng-click="modal.reject()">{{ ::modal.options.rejectionLabel }}</button>
+  </div>
 </div>