refine startup alerts, reversions in mocks

ui/src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Storage } from '@ionic/storage'
 import { AuthService, AuthState } from './services/auth.service'
 import { ApiService } from './services/api/embassy/embassy-api.service'
 import { Router, RoutesRecognized } from '@angular/router'
-import { debounceTime, distinctUntilChanged, filter, finalize, takeWhile } from 'rxjs/operators'
+import { debounceTime, distinctUntilChanged, filter, finalize, skip, take, takeWhile } from 'rxjs/operators'
 import { AlertController, IonicSafeString, ToastController } from '@ionic/angular'
 import { LoaderService } from './services/loader.service'
 import { Emver } from './services/emver.service'
@@ -14,6 +14,8 @@ import { HttpService } from './services/http.service'
 import { ServerStatus } from './services/patch-db/data-model'
 import { ConnectionFailure, ConnectionService } from './services/connection.service'
 import { StartupAlertsService } from './services/startup-alerts.service'
+import { ConfigService } from './services/config.service'
+import { isEmptyObject } from './util/misc.util'
 
 @Component({
   selector: 'app-root',
@@ -63,6 +65,7 @@ export class AppComponent {
     private readonly startupAlertsService: StartupAlertsService,
     private readonly toastCtrl: ToastController,
     private readonly patch: PatchDbService,
+    private readonly config: ConfigService,
     readonly splitPane: SplitPaneTracker,
   ) {
     // set dark theme
@@ -83,23 +86,33 @@ export class AppComponent {
     .subscribe(auth => {
       // VERIFIED
       if (auth === AuthState.VERIFIED) {
-        this.http.authReqEnabled = true
-        this.showMenu = true
         this.patch.start()
-        this.connectionService.start()
-        // watch connection to display connectivity issues
-        this.watchConnection(auth)
-        // watch router to highlight selected menu item
-        this.watchRouter(auth)
-        // watch status to display/hide maintenance page
-        this.watchStatus(auth)
-        // watch unread notification count to display toast
-        this.watchNotifications(auth)
-        // run startup alerts
-        this.startupAlertsService.runChecks()
+
+        this.patch.watch$()
+        .pipe(
+          filter(data => !isEmptyObject(data)),
+          take(1),
+        )
+        .subscribe(_ => {
+          this.showMenu = true
+          this.router.navigate([''], { replaceUrl: true })
+          this.connectionService.start()
+          // watch connection to display connectivity issues
+          this.watchConnection(auth)
+          // watch router to highlight selected menu item
+          this.watchRouter(auth)
+          // watch status to display/hide maintenance page
+          this.watchStatus(auth)
+          // watch version to refresh browser window
+          this.watchVersion(auth)
+          // watch unread notification count to display toast
+          this.watchNotifications(auth)
+          // run startup alerts
+          this.startupAlertsService.runChecks()
+        })
+
       // UNVERIFIED
       } else if (auth === AuthState.UNVERIFIED) {
-        this.http.authReqEnabled = false
         this.showMenu = false
         this.connectionService.stop()
         this.patch.stop()
@@ -178,16 +191,30 @@ export class AppComponent {
     )
     .subscribe(status => {
       const maintenance = '/maintenance'
-      const url = this.router.url
-      if (status === ServerStatus.Running && url.startsWith(maintenance)) {
+      const route = this.router.url
+      console.log('STATUS', status, 'URL', route)
+      if (status === ServerStatus.Running && route.startsWith(maintenance)) {
         this.router.navigate([''], { replaceUrl: true })
       }
-      if ([ServerStatus.Updating, ServerStatus.BackingUp].includes(status) && !url.startsWith(maintenance)) {
+      if ([ServerStatus.Updating, ServerStatus.BackingUp].includes(status) && !route.startsWith(maintenance)) {
+        this.showMenu = false
         this.router.navigate([maintenance], { replaceUrl: true })
       }
     })
   }
 
+  private watchVersion (auth: AuthState): void {
+    this.patch.watch$('server-info', 'version')
+    .pipe(
+      takeWhile(() => auth === AuthState.VERIFIED),
+    )
+    .subscribe(version => {
+      if (this.emver.compare(this.config.version, version) !== 0) {
+        this.presentAlertRefreshNeeded()
+      }
+    })
+  }
+
   private watchNotifications (auth: AuthState): void {
     let previous: number
     this.patch.watch$('server-info', 'unread-notification-count')
@@ -202,7 +229,25 @@ export class AppComponent {
     })
   }
 
+  async presentAlertRefreshNeeded () {
+    const alert = await this.alertCtrl.create({
+      backdropDismiss: false,
+      header: 'Refresh Needed',
+      message: 'Your EmbassyOS UI is out of date. Hard refresh the page to get the latest UI.',
+      buttons: [
+        {
+          text: 'Refresh Page',
+          handler: () => {
+            location.reload()
+          },
+        },
+      ],
+    })
+    await alert.present()
+  }
+
   async presentAlertLogout () {
+    // @TODO warn user no way to recover Embassy if logout and forget password. Maybe require password to logout?
     const alert = await this.alertCtrl.create({
       backdropDismiss: false,
       header: 'Caution',