Allow dismissing the "device unreachable" dialog (#931)

This allows accessing and saving a message draft when reconnecting fails
repeatedly.

A warning is shown to the user, indicating that a tab reload is
required.

public/i18n/de.json

@@ -306,7 +306,8 @@
     },
     "deviceUnreachable": {
         "DEVICE_UNREACHABLE": "Gerät nicht erreichbar",
-        "UNABLE_TO_CONNECT": "Verbindung zum Gerät fehlgeschlagen …"
+        "UNABLE_TO_CONNECT": "Verbindung zum Gerät fehlgeschlagen …",
+        "DISMISS_WARNING": "Um die Verbindung wiederherzustellen, laden Sie bitte Ihr Browser-Fenster neu."
     },
     "version": {
         "NEW_VERSION": "Neue Version Verfügbar",

public/i18n/en.json

@@ -307,7 +307,8 @@
     },
     "deviceUnreachable": {
         "DEVICE_UNREACHABLE": "Device Unreachable",
-        "UNABLE_TO_CONNECT": "Unable to connect to your device …"
+        "UNABLE_TO_CONNECT": "Unable to connect to your device …",
+        "DISMISS_WARNING": "To re-establish the connection, please reload your browser window."
     },
     "version": {
         "NEW_VERSION": "New Version Available",

src/partials/dialog.device-unreachable.html

@@ -3,6 +3,10 @@
         <md-toolbar>
             <div class="md-toolbar-tools">
                 <h2 translate>deviceUnreachable.DEVICE_UNREACHABLE</h2>
+                <span flex></span>
+                <md-button class="button-small" ng-click="ctrl.closeWithWarning()">
+                    <i class="material-icons">close</i>
+                </md-button>
             </div>
         </md-toolbar>
         <md-dialog-content>

src/partials/messenger.ts

@@ -100,28 +100,36 @@ class SendFileController extends DialogController {
 export class DeviceUnreachableController extends DialogController {
     private readonly $rootScope: any;
     private readonly $window: ng.IWindowService;
+    private readonly $translate: ng.translate.ITranslateService;
     private readonly stateService: StateService;
     private readonly webClientService: WebClientService;
+    private readonly log: Logger;
     public retrying: boolean = false;
     public progress: number = 0;
 
     public static readonly $inject = [
-        '$rootScope', '$window', '$mdDialog',
-        'StateService', 'ThemeService', 'WebClientService',
+        '$rootScope', '$window', '$mdDialog', '$translate',
+        'StateService', 'ThemeService', 'WebClientService', 'LogService',
     ];
     constructor(
         $rootScope: any,
         $window: ng.IWindowService,
         $mdDialog: ng.material.IDialogService,
+        $translate: ng.translate.ITranslateService,
         stateService: StateService,
         themeService: ThemeService,
         webClientService: WebClientService,
+        logService: LogService,
     ) {
         super($rootScope, $mdDialog, themeService);
         this.$rootScope = $rootScope;
         this.$window = $window;
+        this.$translate = $translate;
         this.stateService = stateService;
         this.webClientService = webClientService;
+        this.log = logService.getLogger('DeviceUnreachableDialog-C');
+
+        this.log.info(`Showing "device unreachable" dialog (canRetry=${this.canRetry})`);
     }
 
     /**
@@ -145,6 +153,8 @@ export class DeviceUnreachableController extends DialogController {
      * Retry wakeup of the device via a push session.
      */
     public async retry(): Promise<void> {
+        this.log.debug('Retrying...');
+
         // Reset attempt counter
         this.stateService.attempt = 0;
 
@@ -169,8 +179,18 @@ export class DeviceUnreachableController extends DialogController {
      * Reload the page.
      */
     public reload(): void {
+        this.log.info('Reloading page');
         this.$window.location.reload();
     }
+
+    public closeWithWarning(): void {
+        this.log.info('Dialog dismissed by user');
+        this.cancel();
+        this.$mdDialog.show(this.$mdDialog.alert()
+            .title(this.$translate.instant('common.WARNING'))
+            .textContent(this.$translate.instant('deviceUnreachable.DISMISS_WARNING'))
+            .ok(this.$translate.instant('common.OK')));
+    }
 }
 
 /**

src/sass/components/_buttons.scss

@@ -3,4 +3,8 @@ button {
         margin-bottom: 3px;
         vertical-align: middle;
     }
+
+    &.button-small {
+        min-width: initial;
+    }
 }