Add reload button to error page (#66)

public/i18n/de.json

@@ -7,6 +7,7 @@
         "PLEASE_UNLOCK": "Verbindung wiederaufbauen",
         "WAITING": "Auf Verbindung warten",
         "PLEASE_RELOAD": "Bitte laden Sie die Seite neu.",
+        "RELOAD": "Seite neu laden",
         "PASSWORD": "Passwort",
         "CHOOSE_PASSWORD": "W\u00e4hlen Sie vor dem Scannen ein Passwort, <br> um sp\u00e4ter die gleiche Sitzung erneut herzustellen.",
         "UNLOCK_FAILED_TEXT": "Sie haben das falsche Passwort eingegeben. Die Verbindung kann nicht aufgebaut werden.",

public/i18n/en.json

@@ -7,6 +7,7 @@
         "PLEASE_UNLOCK": "Reconnecting session",
         "WAITING": "Waiting for connection",
         "PLEASE_RELOAD": "Please reload the page to try again.",
+        "RELOAD": "Reload page",
         "PASSWORD": "Password",
         "CHOOSE_PASSWORD": "To stay logged in, please enter<br>a session password before scanning.",
         "UNLOCK_FAILED_TEXT": "You entered the wrong password, the session cannot be restored.",

src/partials/welcome.html

@@ -108,6 +108,10 @@
                 <strong><span translate>common.ERROR</span>:</strong> <span translate>connecting.CONNECTION_CLOSED</span><br>
                 <span translate>welcome.PLEASE_RELOAD</span>
             </p>
+            <br>
+            <md-button class="md-raised md-primary" ng-click="ctrl.reload()">
+                <i class="material-icons">refresh</i> <span translate>welcome.RELOAD</span>
+            </md-button>
         </div>
 
     </div>

src/partials/welcome.ts

@@ -44,6 +44,7 @@ class WelcomeController {
     private $timeout: ng.ITimeoutService;
     private $interval: ng.IIntervalService;
     private $log: ng.ILogService;
+    private $window: ng.IWindowService;
 
     // Material design services
     private $mdDialog;
@@ -62,13 +63,13 @@ class WelcomeController {
     private password: string = '';
 
     public static $inject = [
-        '$scope', '$state', '$stateParams', '$timeout', '$interval', '$log', '$mdDialog', '$translate',
+        '$scope', '$state', '$stateParams', '$timeout', '$interval', '$log', '$window', '$mdDialog', '$translate',
         'WebClientService', 'TrustedKeyStore', 'StateService', 'PushService', 'BrowserService',
         'BROWSER_MIN_VERSIONS', 'ControllerService',
     ];
     constructor($scope: ng.IScope, $state: ng.ui.IStateService, $stateParams: threema.WelcomeStateParams,
                 $timeout: ng.ITimeoutService, $interval: ng.IIntervalService,
-                $log: ng.ILogService, $mdDialog, $translate,
+                $log: ng.ILogService, $window: ng.IWindowService, $mdDialog, $translate,
                 webClientService: threema.WebClientService, TrustedKeyStore: TrustedKeyStoreService,
                 stateService: threema.StateService, pushService: threema.PushService,
                 browserService: threema.BrowserService,
@@ -81,6 +82,7 @@ class WelcomeController {
         this.$timeout = $timeout;
         this.$interval = $interval;
         this.$log = $log;
+        this.$window = $window;
         this.$mdDialog = $mdDialog;
         this.$translate = $translate;
 
@@ -362,6 +364,13 @@ class WelcomeController {
             },
         );
     }
+
+    /**
+     * Reload the page.
+     */
+    public reload() {
+        this.$window.location.reload();
+    }
 }
 
 angular.module('3ema.welcome', [])

src/sass/app.scss

@@ -41,6 +41,7 @@
 @import "components/avatar_editor";
 @import "components/avatar_area";
 @import "components/drag_file";
+@import "components/buttons";
 
 // Sections: Styles specific to individual pages or sections.
 // Nothing to see here yet!

src/sass/components/_buttons.scss

@@ -0,0 +1,6 @@
+button {
+    i.material-icons {
+        vertical-align: middle;
+        margin-bottom: 3px;
+    }
+}

src/sass/sections/_welcome.scss

@@ -6,7 +6,7 @@
         margin-top: 1em;
 
         &.error {
-        color: $status-error;
+            color: $status-error;
         }
     }