simplify the notification message logic, hopefully fixing what's on servers

README.md

@@ -28,20 +28,20 @@ If you are deploying in a subdirectory, add it to `publicPath` in vue.config.js,
 
 * Update the CHANGELOG.md & the version in package.json, run `npm install`, and commit.
 
-* Tag wth the new version: `git tag 0.1.0`. Increment version, add "-beta", `npm install`, and commit.
+* Tag wth the new version: `git tag 0.1.0`.
 
 * If production, change src/constants/app.ts DEFAULT_*_SERVER to be PROD.
 
 * `npm run build`
 
-* Revert src/constants/app.ts
-
 * `cp sw_scripts/[ns]* dist/`
 
 ... to copy the contents of the `sw_scripts` folder to the `dist` folder - except additional_scripts.js.
 
 * `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntu@endorser.ch:time-safari`
 
+* Revert src/constants/app.ts, increment version, add "-beta", `npm install`, and commit.
+
 
 
 ## Tests

src/views/AccountViewView.vue

@@ -105,27 +105,10 @@
     </router-link>
 
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
-      <label
+      <div
-        v-if="notificationUnchanged"
+        v-if="!notificationMaybeChanged"
-        for="toggleNotifications"
         class="flex items-center justify-between cursor-pointer"
-        @click="
+        @click="showNotificationChoice()"
-          !toggleNotifications
-            ? this.$notify(
-                {
-                  group: 'modal',
-                  type: 'notification-permission',
-                },
-                -1,
-              )
-            : this.$notify(
-                {
-                  group: 'modal',
-                  type: 'notification-off',
-                },
-                -1,
-              )
-        "
       >
         <!-- label -->
         <div>App Notifications</div>
@@ -134,8 +117,8 @@
           <!-- input -->
           <input
             type="checkbox"
-            v-model="toggleNotifications"
+            v-model="isSubscribed"
-            name="toggleNotifications"
+            name="toggleNotificationsInput"
             class="sr-only"
           />
           <!-- line -->
@@ -145,11 +128,11 @@
             class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
           ></div>
         </div>
-      </label>
+      </div>
-      <label v-else>
+      <div v-else>
         Notification status may have changed. Revisit this page to see the
         latest setting.
-      </label>
+      </div>
     </div>
 
     <h3 class="text-sm uppercase font-semibold mb-3">Data</h3>
@@ -492,7 +475,8 @@ export default class AccountViewView extends Vue {
   derivationPath = "";
   givenName = "";
   isRegistered = false;
-  notificationUnchanged = true;
+  isSubscribed = false;
+  notificationMaybeChanged = false;
   numAccounts = 0;
   publicHex = "";
   publicBase64 = "";
@@ -514,15 +498,6 @@ export default class AccountViewView extends Vue {
   warnIfProdServer = false;
   warnIfTestServer = false;
 
-  private isSubscribed = false;
-  get toggleNotifications() {
-    return this.isSubscribed;
-  }
-  set toggleNotifications(value) {
-    this.isSubscribed = value;
-    this.notificationUnchanged = false;
-  }
-
   /**
    * Async function executed when the component is created.
    * Initializes the component's state with values from the database,
@@ -553,10 +528,9 @@ export default class AccountViewView extends Vue {
     try {
       const registration = await navigator.serviceWorker.ready;
       this.subscription = await registration.pushManager.getSubscription();
-      this.toggleNotifications = !!this.subscription;
+      this.isSubscribed = !!this.subscription;
     } catch (error) {
       console.error("Mount error:", error);
-      this.toggleNotifications = false;
     }
   }
 
@@ -687,6 +661,31 @@ export default class AccountViewView extends Vue {
     }
   }
 
+  async showNotificationChoice() {
+    if (!this.subscription) {
+      this.$notify(
+        {
+          group: "modal",
+          type: "notification-permission",
+          title: "", // unused, only here to satisfy types
+          text: "", // unused, only here to satisfy types
+        },
+        -1,
+      );
+    } else {
+      this.$notify(
+        {
+          group: "modal",
+          type: "notification-off",
+          title: "", // unused, only here to satisfy types
+          text: "", // unused, only here to satisfy types
+        },
+        -1,
+      );
+    }
+    this.notificationMaybeChanged = true;
+  }
+
   /**
    * Handles errors and updates the component's state accordingly.
    * @param {Error} err - The error object.
@@ -725,12 +724,12 @@ export default class AccountViewView extends Vue {
           group: "alert",
           type: "danger",
           title: "Error Updating Contact Setting",
-          text: "Clear your cache and start over (after data backup).",
+          text: "The setting may not have saved. Try again, maybe after restarting the app.",
         },
         -1,
       );
       console.error(
-        "Telling user to clear cache after contact setting update because:",
+        "Telling user to try again after contact setting update because:",
         err,
       );
     }
@@ -748,12 +747,12 @@ export default class AccountViewView extends Vue {
           group: "alert",
           type: "danger",
           title: "Error Updating Prod Warning",
-          text: "Clear your cache and start over (after data backup).",
+          text: "The setting may not have saved. Try again, maybe after restarting the app.",
         },
         -1,
       );
       console.error(
-        "Telling user to clear cache after contact setting update because:",
+        "Telling user to try again after setting update because:",
         err,
       );
     }
@@ -771,12 +770,12 @@ export default class AccountViewView extends Vue {
           group: "alert",
           type: "danger",
           title: "Error Updating Test Warning",
-          text: "Clear your cache and start over (after data backup).",
+          text: "The setting may not have saved. Try again, maybe after restarting the app.",
         },
         -1,
       );
       console.error(
-        "Telling user to clear cache after contact setting update because:",
+        "Telling user to try again after setting update because:",
         err,
       );
     }