diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index 574931911..e089aaeb5 100644 --- a/ui/src/app/app.component.ts +++ b/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 ') 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() } diff --git a/ui/src/app/modals/app-config-value/app-config-value.page.ts b/ui/src/app/modals/app-config-value/app-config-value.page.ts index c225f4ff9..41281d986 100644 --- a/ui/src/app/modals/app-config-value/app-config-value.page.ts +++ b/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() } diff --git a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts b/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts index e0b20a9bd..0338992cc 100644 --- a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts +++ b/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() } diff --git a/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts b/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts index 308991d77..6873fcf65 100644 --- a/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts +++ b/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() } diff --git a/ui/src/app/pages/server-routes/lan/lan.page.ts b/ui/src/app/pages/server-routes/lan/lan.page.ts index 7e1b4abc6..f3091ffa5 100644 --- a/ui/src/app/pages/server-routes/lan/lan.page.ts +++ b/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() } diff --git a/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts b/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts index 487dcc90a..8dadb6d80 100644 --- a/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts +++ b/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() } diff --git a/ui/src/app/pages/server-routes/wifi/wifi.service.ts b/ui/src/app/pages/server-routes/wifi/wifi.service.ts index dc87234e0..6add227c5 100644 --- a/ui/src/app/pages/server-routes/wifi/wifi.service.ts +++ b/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() diff --git a/ui/src/global.scss b/ui/src/global.scss index e2550f2cc..97d0cda0a 100644 --- a/ui/src/global.scss +++ b/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; diff --git a/ui/ui-config.json b/ui/ui-config.json index 7f06abd3a..65a58f496 100644 --- a/ui/ui-config.json +++ b/ui/ui-config.json @@ -10,7 +10,7 @@ }, "mocks": { "enabled": true, - "connection": "poll", + "connection": "ws", "rpcPort": "5959", "wsPort": "5960", "maskAs": "tor",