SM-90: Add Server Version to Browser About Page (#3223)

* Add structure to display server version on browser

* Add getConfig to State Service interface

* Clean up settings component code

* Switch to ServerConfig, use Observables in the ConfigService, and more

* Fix runtime error

* Sm 90 addison (#3275)

* Use await instead of then

* Rename stateServerConfig -> storedServerConfig

* Move config validation logic to the model

* Use implied check for undefined

* Rename getStateServicerServerConfig -> buildServerConfig

* Rename getApiServiceServerConfig -> pollServerConfig

* Build server config in async

* small fixes and add last seen text

* Move config server to /config folder

* Update with concatMap and other changes

* Config project updates

* Rename fileds to convention and remove unneeded migration

* Update libs/common/src/services/state.service.ts

Update based on Oscar's recommendation

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Update options for Oscar's rec

* Rename abstractions to abstracitons

* Fix null issues and add options

* Combine classes into one file, per Oscar's rec

* Add null checking

* Fix dependency issue

* Add null checks, await, and fix date issue

* Remove unneeded null check

* In progress commit, unsuitable for for more than dev env, just backing up changes made with Oscar

* Fix temp code to force last seen state

* Add localization and escapes in the browser about section

* Call complete on destroy subject rather than unsubscribe

* use mediumDate and formatDate for the last seen date messaging

* Add ThirdPartyServerName in example

* Add deprecated note per Oscar's comment

* [SM-90] Change to using a modal for browser about (#3417)

* Fix inconsistent constructor null checking

* ServerConfig can be null, fixes this

* Switch to call super first, as required

* remove unneeded null checks

* Remove null checks from server-config.data.ts class

* Update via PR comments and add back needed null check in server conf obj

* Remove type annotation from serverConfig$

* Update self-hosted to be <small> per design decision

* Re-fetch config every hour

* Make third party server version <small> and change wording per Oscar's PR comment

* Add expiresSoon function and re-fetch if the serverConfig will expire soon (older than 18 hours)

* Fix misaligned small third party server message text

Co-authored-by: Addison Beck <addisonbeck1@gmail.com>
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

apps/browser/src/_locales/en/messages.json

@@ -1997,5 +1997,32 @@
   },
   "environmentEditedReset": {
     "message": "to reset to pre-configured settings"
+  },
+  "serverVersion": {
+    "message": "Server Version"
+  },
+  "selfHosted": {
+    "message": "Self-Hosted"
+  },
+  "thirdParty": {
+    "message": "Third-Party"
+  },
+  "thirdPartyServerMessage": {
+    "message": "Connected to third-party server implementation, $SERVERNAME$. Please verify bugs using the official server, or report them to the third-party server.",
+    "placeholders": {
+      "servername": {
+        "content": "$1",
+        "example": "ThirdPartyServerName"
+      }
+    }
+  },
+  "lastSeenOn": {
+    "message": "last seen on $DATE$",
+    "placeholders": {
+      "date": {
+        "content": "$1",
+        "example": "Jun 15, 2015"
+      }
+    }
   }
 }

apps/browser/src/popup/app.module.ts

@@ -94,6 +94,7 @@ import { SendAddEditComponent } from "./send/send-add-edit.component";
 import { SendGroupingsComponent } from "./send/send-groupings.component";
 import { SendTypeComponent } from "./send/send-type.component";
 import { ServicesModule } from "./services/services.module";
+import { AboutComponent } from "./settings/about.component";
 import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
 import { ExportComponent } from "./settings/export.component";
 import { FolderAddEditComponent } from "./settings/folder-add-edit.component";
@@ -242,6 +243,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     ViewCustomFieldsComponent,
     RemovePasswordComponent,
     VaultSelectComponent,
+    AboutComponent,
   ],
   providers: [CurrencyPipe, DatePipe],
   bootstrap: [AppComponent],

apps/browser/src/popup/settings/about.component.html

@@ -0,0 +1,52 @@
+<div class="modal fade" role="dialog" aria-modal="true">
+  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+    <div class="modal-content">
+      <div class="modal-body">
+        <p class="text-center">
+          <i class="bwi bwi-shield bwi-3x" aria-hidden="true"></i>
+        </p>
+        <p class="text-center">
+          <b>Bitwarden</b>
+        </p>
+        <p class="text-center">&copy; Bitwarden Inc. 2015-{{ year }}</p>
+        <p class="text-center">{{ "version" | i18n }}: {{ version }}</p>
+        <ng-container *ngIf="serverConfig$ | async as serverConfig">
+          <p class="text-center" *ngIf="isCloud">
+            {{ "serverVersion" | i18n }}: {{ this.serverConfig?.version }}
+            <span *ngIf="!serverConfig.isValid()">
+              ({{ "lastSeenOn" | i18n }}: {{ serverConfig.utcDate | date: "mediumDate" }})
+            </span>
+          </p>
+
+          <ng-container *ngIf="!isCloud">
+            <ng-container *ngIf="serverConfig.server">
+              <p class="text-center">
+                {{ "serverVersion" | i18n }} <small>({{ "thirdParty" | i18n }})</small>:
+                {{ this.serverConfig?.version }}
+                <span *ngIf="!serverConfig.isValid()">
+                  ({{ "lastSeenOn" | i18n }}: {{ serverConfig.utcDate | date: "mediumDate" }})
+                </span>
+              </p>
+              <div class="text-center">
+                <small>{{ "thirdPartyServerMessage" | i18n: serverConfig.server?.name }}</small>
+              </div>
+            </ng-container>
+
+            <p class="text-center" *ngIf="!serverConfig.server">
+              {{ "serverVersion" | i18n }} <small>({{ "selfHosted" | i18n }})</small>:
+              {{ this.serverConfig?.version }}
+              <span *ngIf="!serverConfig.isValid()">
+                ({{ "lastSeenOn" | i18n }}: {{ serverConfig.utcDate | date: "mediumDate" }})
+              </span>
+            </p>
+          </ng-container>
+        </ng-container>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+          {{ "close" | i18n }}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

apps/browser/src/popup/settings/about.component.ts

@@ -0,0 +1,25 @@
+import { Component } from "@angular/core";
+import { Observable } from "rxjs";
+
+import { ConfigServiceAbstraction } from "@bitwarden/common/abstractions/config/config.service.abstraction";
+import { ServerConfig } from "@bitwarden/common/abstractions/config/server-config";
+import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
+
+import { BrowserApi } from "../../browser/browserApi";
+
+@Component({
+  selector: "app-about",
+  templateUrl: "about.component.html",
+})
+export class AboutComponent {
+  serverConfig$: Observable<ServerConfig>;
+
+  year = new Date().getFullYear();
+  version = BrowserApi.getApplicationVersion();
+  isCloud: boolean;
+
+  constructor(configService: ConfigServiceAbstraction, environmentService: EnvironmentService) {
+    this.serverConfig$ = configService.serverConfig$;
+    this.isCloud = environmentService.isCloud();
+  }
+}

apps/browser/src/popup/settings/settings.component.ts

@@ -20,6 +20,8 @@ import { BiometricErrors, BiometricErrorTypes } from "../../models/biometricErro
 import { SetPinComponent } from "../components/set-pin.component";
 import { PopupUtilsService } from "../services/popup-utils.service";
 
+import { AboutComponent } from "./about.component";
+
 const RateUrls = {
   [DeviceType.ChromeExtension]:
     "https://chrome.google.com/webstore/detail/bitwarden-free-password-m/nngceckbapebfimnlniiiahkandclblb/reviews",
@@ -377,26 +379,7 @@ export class SettingsComponent implements OnInit {
   }
 
   about() {
-    const year = new Date().getFullYear();
-    const versionText = document.createTextNode(
-      this.i18nService.t("version") + ": " + BrowserApi.getApplicationVersion()
-    );
-    const div = document.createElement("div");
-    div.innerHTML =
-      `<p class="text-center"><i class="bwi bwi-shield bwi-3x" aria-hidden="true"></i></p>
-            <p class="text-center"><b>Bitwarden</b><br>&copy; Bitwarden Inc. 2015-` +
-      year +
-      `</p>`;
-    div.appendChild(versionText);
-
-    Swal.fire({
-      heightAuto: false,
-      buttonsStyling: false,
-      html: div,
-      showConfirmButton: false,
-      showCancelButton: true,
-      cancelButtonText: this.i18nService.t("close"),
-    });
+    this.modalService.open(AboutComponent);
   }
 
   async fingerprint() {