allow to customize the push-server for testing

src/App.vue

@@ -263,19 +263,59 @@
 import { Vue, Component } from "vue-facing-decorator";
 import axios from "axios";
 
+import { AppString } from "@/constants/app";
+import { db } from "@/db/index";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+
+interface Notification {
+  group: string;
+  type: string;
+  title: string;
+  text: string;
+}
+
 @Component
 export default class App extends Vue {
+  $notify!: (notification: Notification, timeout?: number) => void;
+
   b64 = "";
-  mounted() {
-    axios
-      .get("https://timesafari-pwa.anomalistlabs.com/web-push/vapid")
-      .then((response) => {
-        this.b64 = response.data.vapidKey;
-        console.log(this.b64);
-      })
-      .catch((error) => {
-        console.error("API error", error);
+
+  async mounted() {
+    try {
+      await db.open();
+      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+      let pushUrl: string = AppString.DEFAULT_PUSH_SERVER;
+      if (settings?.pushServer) {
+        pushUrl = settings.pushServer;
+      }
+
+      await axios.get(pushUrl + "/web-push/vapid").then((response) => {
+        this.b64 = response.data?.vapidKey;
+        console.log("Got vapid key:", this.b64);
       });
+      if (!this.b64) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error Setting Notifications",
+            text: "Could not set notifications.",
+          },
+          -1,
+        );
+      }
+    } catch (error) {
+      console.error("Got an error initializing notifications:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Setting Notifications",
+          text: "Got an error setting notifications.",
+        },
+        -1,
+      );
+    }
   }
 
   private askPermission(): Promise<NotificationPermission> {

src/constants/app.ts

@@ -11,13 +11,20 @@ export enum AppString {
   LOCAL_ENDORSER_API_SERVER = "http://localhost:3000",
 
   DEFAULT_ENDORSER_API_SERVER = TEST_ENDORSER_API_SERVER,
+
+  PROD_PUSH_SERVER = "https://push.endorser.ch",
+  TEST_PUSH_SERVER = "https://timesafari-pwa.anomalistlabs.com",
+  LOCAL_PUSH_SERVER = "http://localhost:3001",
+
+  DEFAULT_PUSH_SERVER = TEST_PUSH_SERVER,
 }
 
 /**
- * See notiwind package
+ * The possible values for "group" and "type" are in App.vue.
+ * From the notiwind package
  */
 export interface NotificationIface {
-  group: string;
+  group: string; // "alert" | "modal"
   type: string; // "toast" | "info" | "success" | "warning" | "danger"
   title: string;
   text: string;

src/db/index.ts

@@ -45,5 +45,8 @@ db.on("populate", () => {
   db.settings.add({
     id: MASTER_SETTINGS_KEY,
     apiServer: AppString.DEFAULT_ENDORSER_API_SERVER,
+
+    // remember that things you add from now on aren't automatically in the DB for old users
+    pushServer: AppString.DEFAULT_PUSH_SERVER,
   });
 });

src/db/tables/settings.ts

@@ -20,9 +20,9 @@ export type Settings = {
   lastViewedClaimId?: string; // Last viewed claim ID
   lastNotifiedClaimId?: string; // Last notified claim ID
   isRegistered?: boolean;
+  pushServer?: string; // Push server URL
 
   // Array of named search boxes defined by bounding boxes
-
   searchBoxes?: Array<{
     name: string;
     bbox: BoundingBox;

src/views/AccountViewView.vue

@@ -324,19 +324,55 @@
         </button>
         <button
           class="px-4 rounded bg-slate-200 border border-slate-400"
-          @click="setApiServerInput(Constants.PROD_ENDORSER_API_SERVER)"
+          @click="apiServerInput = AppConstants.PROD_ENDORSER_API_SERVER"
         >
           Use Prod
         </button>
         <button
           class="px-4 rounded bg-slate-200 border border-slate-400"
-          @click="setApiServerInput(Constants.TEST_ENDORSER_API_SERVER)"
+          @click="apiServerInput = AppConstants.TEST_ENDORSER_API_SERVER"
         >
           Use Test
         </button>
         <button
           class="px-4 rounded bg-slate-200 border border-slate-400"
-          @click="setApiServerInput(Constants.LOCAL_ENDORSER_API_SERVER)"
+          @click="apiServerInput = AppConstants.LOCAL_ENDORSER_API_SERVER"
+        >
+          Use Local
+        </button>
+      </div>
+
+      <div class="flex py-4">
+        <h2 class="text-slate-500 text-sm font-bold mb-2">
+          Notification Push Server
+        </h2>
+        <input
+          type="text"
+          class="block w-full rounded border border-slate-400 px-3 py-2"
+          v-model="pushServerInput"
+        />
+        <button
+          v-if="pushServerInput != pushServer"
+          class="px-4 rounded bg-red-500 border border-slate-400"
+          @click="onClickSavePushServer()"
+        >
+          <fa icon="floppy-disk" class="fa-fw" color="white"></fa>
+        </button>
+        <button
+          class="px-4 rounded bg-slate-200 border border-slate-400"
+          @click="pushServerInput = AppConstants.PROD_PUSH_SERVER"
+        >
+          Use Prod
+        </button>
+        <button
+          class="px-4 rounded bg-slate-200 border border-slate-400"
+          @click="pushServerInput = AppConstants.TEST_PUSH_SERVER"
+        >
+          Use Test
+        </button>
+        <button
+          class="px-4 rounded bg-slate-200 border border-slate-400"
+          @click="pushServerInput = AppConstants.LOCAL_PUSH_SERVER"
         >
           Use Local
         </button>
@@ -346,7 +382,7 @@
 </template>
 
 <script lang="ts">
-import { AxiosError } from "axios";
+import { AxiosError, AxiosRequestConfig } from "axios";
 import "dexie-export-import";
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
@@ -380,7 +416,7 @@ interface IAccount {
 export default class AccountViewView extends Vue {
   $notify!: (notification: Notification, timeout?: number) => void;
 
-  Constants = AppString;
+  AppConstants = AppString;
 
   activeDid = "";
   apiServer = "";
@@ -391,6 +427,8 @@ export default class AccountViewView extends Vue {
   numAccounts = 0;
   publicHex = "";
   publicBase64 = "";
+  pushServer = "";
+  pushServerInput = "";
   limits: RateLimits | null = null;
   limitsMessage = "";
   loadingLimits = true; // might as well now that we do it on mount, to avoid flashing the registration message
@@ -515,6 +553,8 @@ export default class AccountViewView extends Vue {
       (settings?.firstName || "") +
       (settings?.lastName ? ` ${settings.lastName}` : ""); // pre v 0.1.3
     this.isRegistered = !!settings?.isRegistered;
+    this.pushServer = (settings?.pushServer as string) || "";
+    this.pushServerInput = (settings?.pushServer as string) || "";
     this.showContactGives = !!settings?.showContactGivesInline;
   }
 
@@ -739,7 +779,7 @@ export default class AccountViewView extends Vue {
   private async fetchRateLimits(identity: IIdentifier) {
     const url = `${this.apiServer}/api/report/rateLimits`;
     const headers = await this.getHeaders(identity);
-    return await this.axios.get(url, { headers });
+    return await this.axios.get(url, { headers } as AxiosRequestConfig);
   }
 
   /**
@@ -843,8 +883,12 @@ export default class AccountViewView extends Vue {
     this.apiServer = this.apiServerInput;
   }
 
-  setApiServerInput(value: string) {
-    this.apiServerInput = value;
+  async onClickSavePushServer() {
+    await db.open();
+    db.settings.update(MASTER_SETTINGS_KEY, {
+      pushServer: this.pushServerInput,
+    });
+    this.pushServer = this.pushServerInput;
   }
 }
 </script>