better connection messaging

ui/src/app/app.component.ts

@@ -4,11 +4,11 @@ import { AuthService, AuthState } from './services/auth.service'
 import { ApiService } from './services/api/api.service'
 import { Router, RoutesRecognized } from '@angular/router'
 import { debounceTime, distinctUntilChanged, filter, finalize, takeWhile } from 'rxjs/operators'
-import { AlertController, ToastController } from '@ionic/angular'
+import { AlertController, IonicSafeString, ToastController } from '@ionic/angular'
 import { LoaderService } from './services/loader.service'
 import { Emver } from './services/emver.service'
 import { SplitPaneTracker } from './services/split-pane.service'
-import { LoadingOptions } from '@ionic/core'
+import { LoadingOptions, ToastButton } from '@ionic/core'
 import { PatchDbModel } from './services/patch-db/patch-db.service'
 import { HttpService } from './services/http.service'
 import { ServerStatus } from './services/patch-db/data-model'
@@ -123,25 +123,28 @@ export class AppComponent {
           this.offlineToast = undefined
         }
       } else {
-        let message: string
+        let message: string | IonicSafeString
+        let link: string
         switch (connectionFailure) {
           case ConnectionFailure.Network:
-            message = 'No network'
+            message = 'Your phone or computer has no network connection.'
             break
           case ConnectionFailure.Diagnosing:
-            message = 'Diagnosing'
+            message = new IonicSafeString('Running network diagnostics <ion-spinner name="dots"></ion-spinner>')
             break
           case ConnectionFailure.Embassy:
-            message = 'Embassy is unreachable'
+            message = 'Your Embassy appears to be offline.'
+            link = 'https://docs.start9.com/support/FAQ/setup-faq.html#embassy-offline'
             break
           case ConnectionFailure.Tor:
-            message = 'Tor issues'
+            message = 'Your phone or computer is currently unable to connect over Tor.'
+            link = 'https://docs.start9.com/support/FAQ/setup-faq.html#tor-failure'
             break
           case ConnectionFailure.Internet:
-            message = 'No Internet'
+            message = 'Your phone or computer is unable to connect to the Internet.'
             break
         }
-        await this.presentToastOffline(message)
+        await this.presentToastOffline(message, link)
       }
     })
   }
@@ -226,7 +229,6 @@ export class AppComponent {
       message: `New notifications`,
       position: 'bottom',
       duration: 4000,
-      cssClass: 'notification-toast',
       buttons: [
         {
           side: 'start',
@@ -247,26 +249,42 @@ export class AppComponent {
     await toast.present()
   }
 
-  private async presentToastOffline (message: string) {
+  private async presentToastOffline (message: string | IonicSafeString, link?: string) {
     if (this.offlineToast) {
       this.offlineToast.message = message
       return
     }
 
+    let buttons: ToastButton[] = [
+      {
+        side: 'start',
+        icon: 'close',
+        handler: () => {
+          return true
+        },
+      },
+    ]
+
+    if (link) {
+      buttons.push(
+        {
+          side: 'end',
+          text: 'View solutions',
+          handler: () => {
+            window.open(link, '_blank')
+            return false
+          },
+        },
+      )
+    }
+
     this.offlineToast = await this.toastCtrl.create({
-      header: 'Connection Issue',
+      header: 'Unable to Connect',
+      cssClass: 'warning-toast',
       message,
       position: 'bottom',
       duration: 0,
-      buttons: [
-        {
-          side: 'start',
-          icon: 'close',
-          handler: () => {
-            return true
-          },
-        },
-      ],
+      buttons,
     })
     await this.offlineToast.present()
   }

ui/src/app/modals/app-config-value/app-config-value.page.ts

@@ -105,7 +105,6 @@ export class AppConfigValuePage {
       header: message,
       position: 'bottom',
       duration: 1000,
-      cssClass: 'notification-toast',
     })
     await toast.present()
   }

ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts

@@ -42,7 +42,6 @@ export class AppInterfacesPage {
       header: message,
       position: 'bottom',
       duration: 1000,
-      cssClass: 'notification-toast',
     })
     await toast.present()
   }

ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts

@@ -96,7 +96,6 @@ export class AppPropertiesPage {
       header: message,
       position: 'bottom',
       duration: 1000,
-      cssClass: 'notification-toast',
     })
     await toast.present()
   }

ui/src/app/pages/server-routes/lan/lan.page.ts

@@ -67,7 +67,6 @@ export class LANPage {
       header: message,
       position: 'bottom',
       duration: 1000,
-      cssClass: 'notification-toast',
     })
     await toast.present()
   }

ui/src/app/pages/server-routes/server-specs/server-specs.page.ts

@@ -26,7 +26,6 @@ export class ServerSpecsPage {
       header: message,
       position: 'bottom',
       duration: 1000,
-      cssClass: 'notification-toast',
     })
     await toast.present()
   }

ui/src/app/pages/server-routes/wifi/wifi.service.ts

@@ -57,7 +57,7 @@ export class WifiService {
           },
         },
       ],
-      cssClass: 'notification-toast',
+      cssClass: 'warning-toast',
     })
 
     await toast.present()

ui/src/global.scss

@@ -61,15 +61,18 @@
   height: 100%;
 }
 
-.notification-toast {
+ion-toast {
   --background: var(--ion-color-light);
   --button-color: var(--ion-color-dark);
-  --border-color: var(--ion-color-warning);
   --border-style: solid;
   --border-width: 1px;
   --color: white;
 }
 
+.warning-toast {
+  --border-color: var(--ion-color-warning);
+}
+
 .sublist-spinner {
   text-align: center;
   margin-top: 40px;

ui/ui-config.json

@@ -10,7 +10,7 @@
   },
   "mocks": {
     "enabled": true,
-    "connection": "poll",
+    "connection": "ws",
     "rpcPort": "5959",
     "wsPort": "5960",
     "maskAs": "tor",