From f698d0bc510e62faefb739a388ed7137c283734b Mon Sep 17 00:00:00 2001
From: Lilia <liliakai@gmail.com>
Date: Wed, 13 Sep 2017 22:44:06 +0200
Subject: [PATCH] Better install view error handling (#1472)

If linking fails because an http request didn't connect, show a message and
allow the user to start over.

// FREEBIE
---
 background.html          | 8 ++++++++
 js/views/install_view.js | 6 ++++++
 stylesheets/manifest.css | 6 ++----
 stylesheets/options.scss | 7 ++-----
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/background.html b/background.html
index e7edcaff2..58f4a295f 100644
--- a/background.html
+++ b/background.html
@@ -731,6 +731,14 @@
         </div>
       </div>
     </div>
+    <div id='stepNetworkError' class='step hidden'>
+      <div class='inner error-dialog clearfix'>
+        <div class='panel step-body'>{{ installConnectionFailed }}</div>
+        <button class='ok step3 button'>{{ tryAgain }}</button>
+        <div class='nav'>
+        </div>
+      </div>
+    </div>
   </script>
 
   <script type='text/x-tmpl-mustache' id='standalone'>
diff --git a/js/views/install_view.js b/js/views/install_view.js
index fa27d3b30..9ab37455a 100644
--- a/js/views/install_view.js
+++ b/js/views/install_view.js
@@ -11,6 +11,7 @@
         ENTER_NAME: 4,
         PROGRESS_BAR: 5,
         TOO_MANY_DEVICES: 'TooManyDevices',
+        NETWORK_ERROR: 'NetworkError',
     };
 
     Whisper.InstallView = Whisper.View.extend({
@@ -31,7 +32,9 @@
                 installComputerName: i18n('installComputerName'),
                 installFinalButton: i18n('installFinalButton'),
                 installTooManyDevices: i18n('installTooManyDevices'),
+                installConnectionFailed: i18n('installConnectionFailed'),
                 ok: i18n('ok'),
+                tryAgain: i18n('tryAgain'),
                 development: window.config.environment === 'development'
             };
         },
@@ -74,10 +77,13 @@
             if (this.canceled) {
                 return;
             }
+            console.log('provisioning failed', e.stack);
 
             if (e.message === 'websocket closed') {
                 this.showConnectionError();
                 this.trigger('disconnected');
+            } else if (e.name === 'HTTPError' && e.code == -1) {
+                this.selectStep(Steps.NETWORK_ERROR);
             } else if (e.name === 'HTTPError' && e.code == 411) {
                 this.showTooManyDevices();
             } else {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 5e4cc24e1..0f7e66835 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -3521,12 +3521,12 @@ li.entry .error-icon-container {
     max-width: 100%; }
   .install ul.country-list {
     min-width: 197px !important; }
-  .install .confirmation-dialog, .install .progress-dialog, .install .error-dialog {
+  .install .confirmation-dialog, .install .progress-dialog {
     padding: 1em;
     text-align: left; }
   .install .number {
     text-align: center; }
-  .install .confirmation-dialog button, .install .error-dialog button {
+  .install .confirmation-dialog button {
     float: right;
     margin-left: 10px; }
   .install .progress-dialog {
@@ -3546,8 +3546,6 @@ li.entry .error-icon-container {
       height: 100%;
       background-color: #a2d2f4;
       transition: width 0.25s; }
-  .install .error-dialog {
-    display: none; }
   .install .modal-container {
     display: none;
     position: absolute;
diff --git a/stylesheets/options.scss b/stylesheets/options.scss
index d62b1abe2..b21a76152 100644
--- a/stylesheets/options.scss
+++ b/stylesheets/options.scss
@@ -268,12 +268,12 @@
     min-width: 197px !important;
   }
 
-  .confirmation-dialog, .progress-dialog, .error-dialog {
+  .confirmation-dialog, .progress-dialog {
     padding: 1em;
     text-align: left;
   }
   .number { text-align: center; }
-  .confirmation-dialog, .error-dialog {
+  .confirmation-dialog {
     button {
       float: right;
       margin-left: 10px;
@@ -303,9 +303,6 @@
       }
     }
   }
-  .error-dialog {
-    display: none;
-  }
 
   .modal-container {
     display: none;