WIP: converted notification permission dialog into toggle

project.task.yaml

@@ -1,6 +1,5 @@
 
 tasks:
-- test alerts on all pages -- or refactor to new "notify" (since AlertMessage refactoring may require a change, et. ContactQRScanShowView)
 - .2 bug - on contacts view, click on "to" & "from" and nothing happens
 - 01 add a location for a project via map pin :
   - add with a "location" field containing this: { "geo":{ "@type":"GeoCoordinates", "latitude":40.883944, "longitude":-111.884787 } }

src/App.vue

@@ -157,7 +157,7 @@
             >
               <div class="w-full px-6 py-6 text-slate-900 text-center">
                 <p class="text-lg mb-4">
-                  Would you like to turn on notifications for this app?
+                  Would you like to <b>turn on</b> notifications for this app?
                 </p>
 
                 <button
@@ -181,6 +181,32 @@
               </div>
             </div>
           </div>
+          <div
+            v-if="notification.type === 'notification-mute'"
+            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
+          >
+            <div
+              class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
+            >
+              <div class="w-full px-6 py-6 text-slate-900 text-center">
+                <p class="text-lg mb-4">
+                  Would you like to <b>turn off</b> notifications for this app?
+                </p>
+
+                <button
+                  class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  Turn off Notifications
+                </button>
+                <button
+                  @click="close(notification.id)"
+                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
+                >
+                  Keep it On
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
       </Notification>
     </div>

src/router/index.ts

@@ -192,7 +192,8 @@ const router = createRouter({
 
 const errorHandler = (error, to, from) => {
   // Handle the error here
-  console.error("Caught in top level error handler:", error, to, from);
+  console.error(error, to, from);
+  console.log("XXXXX");
 
   // You can also perform additional actions, such as displaying an error message or redirecting the user to a specific page
 };

src/views/AccountViewView.vue

@@ -123,7 +123,9 @@
     >
       Switch Identity / No Identity
     </router-link>
-    <button
+    <label
+      for="toggleNotifications"
+      class="flex items-center cursor-pointer mt-4 mb-8"
       @click="
         this.$notify(
           {
@@ -133,10 +135,21 @@
           -1,
         )
       "
-      class="block w-full text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-8"
     >
-      Turn on Notifications
-    </button>
+      <!-- toggle -->
+      <div class="relative">
+        <!-- input -->
+        <input type="checkbox" name="toggleNotifications" class="sr-only" />
+        <!-- line -->
+        <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+        <!-- dot -->
+        <div
+          class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+        ></div>
+      </div>
+      <!-- label -->
+      <div class="ml-2">App Notifications</div>
+    </label>
 
     <h3 class="text-sm uppercase font-semibold mb-3">Data</h3>
 

src/views/ContactQRScanShowView.vue

@@ -17,6 +17,10 @@
       :dotsOptions="{ type: 'square' }"
       class="flex justify-center"
     />
+    <AlertMessage
+      :alertTitle="alertTitle"
+      :alertMessage="alertMessage"
+    ></AlertMessage>
   </section>
 </template>
 
@@ -28,15 +32,18 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import * as R from "ramda";
 import { SimpleSigner } from "@/libs/crypto";
 import * as didJwt from "did-jwt";
+import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
-import { Account } from "@/db/tables/accounts";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
+alertTitle = "";
+alertMessage = "";
 
 @Component({
   components: {
     QRCodeVue3,
+    AlertMessage,
     QuickNav,
   },
 })
@@ -48,10 +55,7 @@ export default class ContactQRScanShow extends Vue {
   public async getIdentity(activeDid) {
     await accountsDB.open();
     const accounts = await accountsDB.accounts.toArray();
-    const account: Account | undefined = R.find(
-      (acc) => acc.did === activeDid,
-      accounts,
-    );
+    const account = R.find((acc) => acc.did === activeDid, accounts);
     const identity = JSON.parse(account?.identity || "null");
 
     if (!identity) {
@@ -62,6 +66,15 @@ export default class ContactQRScanShow extends Vue {
     return identity;
   }
 
+  public async getHeaders(identity) {
+    const token = await accessToken(identity);
+    const headers = {
+      "Content-Type": "application/json",
+      Authorization: "Bearer " + token,
+    };
+    return headers;
+  }
+
   async created() {
     await db.open();
     const settings = await db.settings.get(MASTER_SETTINGS_KEY);

src/views/StartView.vue

@@ -29,7 +29,7 @@
         @click="onClickDerive()"
         class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mt-2"
       >
-        Derive New Address from Seed Imported Previously
+        Derive from Existing Account
       </a>
     </div>
   </section>