Merge pull request 'Added modal dialog for notification permission setting' (#57) from notification-request-permission-dialog into master

Reviewed-on: trent_larson/kick-starter-for-time-pwa#57

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <router-view />
 
+  <!-- https://github.com/emmanuelsw/notiwind -->
   <NotificationGroup group="alert">
     <div
       class="fixed top-4 right-4 w-full max-w-sm flex flex-col items-start justify-end"
@@ -127,6 +128,63 @@
       </Notification>
     </div>
   </NotificationGroup>
+
+  <NotificationGroup group="modal">
+    <div class="fixed z-[100] top-0 inset-x-0 w-full">
+      <Notification
+        v-slot="{ notifications, close }"
+        enter="transform ease-out duration-300 transition"
+        enter-from="translate-y-2 opacity-0 sm:translate-y-4"
+        enter-to="translate-y-0 opacity-100 sm:translate-y-0"
+        leave="transition ease-in duration-500"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+        move="transition duration-500"
+        move-delay="delay-300"
+      >
+        <div
+          v-for="notification in notifications"
+          :key="notification.id"
+          class="w-full"
+          role="alert"
+        >
+          <div
+            v-if="notification.type === 'notification-permission'"
+            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 turn on notifications for this app?
+                </p>
+
+                <button
+                  class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  Turn on Notifications
+                </button>
+                <div class="grid grid-cols-2 gap-2">
+                  <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"
+                  >
+                    Maybe Later
+                  </button>
+                  <button
+                    class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md"
+                  >
+                    Never
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Notification>
+    </div>
+  </NotificationGroup>
 </template>
 
 <style></style>

src/views/AccountViewView.vue

@@ -119,10 +119,24 @@
     </router-link>
     <router-link
       :to="{ name: 'identity-switcher' }"
-      class="block text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-8"
+      class="block text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
     >
       Switch Identity / No Identity
     </router-link>
+    <button
+      @click="
+        this.$notify(
+          {
+            group: 'modal',
+            type: 'notification-permission',
+          },
+          -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>
 
     <h3 class="text-sm uppercase font-semibold mb-3">Data</h3>
 

src/views/HomeView.vue

@@ -92,6 +92,21 @@
       >
         Danger
       </button>
+
+      <button
+        @click="
+          this.$notify(
+            {
+              group: 'modal',
+              type: 'notification-permission',
+            },
+            -1,
+          )
+        "
+        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Notification Permission
+      </button>
     </div>
 
     <div class="mb-8">