Profile settings: add global Notification toggle

src/components/Profile.vue

@@ -89,6 +89,16 @@
         :icon="'$vuetify.icons.globe'"
         :text="$t('profile.select_language')"
       />
+      <ActionRow
+        @click="onUpdateGlobalNotification"
+        :icon="notificationIcon"
+        :text="$t('profile.notification_label')"
+      >
+        <v-switch
+          v-model="globalNotification"
+          readonly
+        ></v-switch>
+      </ActionRow>
     </v-container>
 
     <!-- edit password dialog -->
@@ -197,6 +207,45 @@
       v-model="showSelectLanguageDialog"
       v-on:close="showSelectLanguageDialog = false"
     />
+    <!-- Dialog for request Notification -->
+    <v-dialog
+      v-model="notificationDialog"
+      persistent
+      class="ma-0 pa-0"
+      :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
+    >
+      <div class="dialog-content text-center">
+        <v-icon  size="30">notifications_active</v-icon>
+        <h2 class="dialog-title">
+          {{ $t("notification.dialog.title") }}
+        </h2>
+        <div class="dialog-text">{{ $t("notification.dialog.body") }}</div>
+        <v-container fluid>
+          <v-row cols="12">
+            <v-col cols="6">
+              <v-btn
+                depressed
+                text
+                block
+                class="text-button"
+                @click="onNotifyDialogClosed"
+                >{{ $t("global.close") }}</v-btn
+              >
+            </v-col>
+            <v-col cols="6" align="center">
+              <v-btn
+                color="primary"
+                depressed
+                block
+                class="filled-button"
+                @click.stop="onNotifyDialog"
+                >{{ $t("notification.dialog.enable") }}</v-btn
+              >
+            </v-col>
+          </v-row>
+        </v-container>
+      </div>
+    </v-dialog>
   </div>
 </template>
 
@@ -207,6 +256,8 @@ import util from "../plugins/utils";
 import profileInfoMixin from "./profileInfoMixin";
 import LogoutRoomDialog from './LogoutRoomDialog.vue';
 import CopyLink from "./CopyLink.vue"
+import { requestNotificationPermission, windowNotificationPermission } from "../plugins/notificationAndServiceWorker.js"
+import { mapState } from 'vuex'
 
 export default {
   name: "Profile",
@@ -234,7 +285,8 @@ export default {
       passwordErrorMessage: null,
       isAvatarLoaded: true,
       loadValue: 0,
-      newPasswordHasError: false
+      newPasswordHasError: false,
+      notificationDialog: false
     };
   },
 
@@ -252,7 +304,13 @@ export default {
         this.newPassword2 &&
         this.newPassword1 == this.newPassword2
       );
-    }
+    },
+    notificationIcon() {
+      return this.globalNotification ? 'notifications_active' : 'notifications_off';
+    },
+    ...mapState([
+      'globalNotification'
+    ])
   },
 
   methods: {
@@ -306,7 +364,53 @@ export default {
         console.log("Progress: " + JSON.stringify(progress));
       });
     },
+    updateGlobalNotificationStore(flag) {
+      this.$store.commit('setGlobalNotification', flag);
+    },
+    windowNotificationPermission,
+    onUpdateGlobalNotification(showAlertOrDialog = true) {
+      const permission = this.windowNotificationPermission();
+
+      switch (permission) {
+        case 'denied':
+          this.updateGlobalNotificationStore(false);
+          if (showAlertOrDialog) {
+            alert(this.$t("notification.blocked_message"));
+          }
+          break;
+        case 'granted':
+          this.updateGlobalNotificationStore(!this.globalNotification);
+          break;
+        case 'default':
+          if (showAlertOrDialog) {
+            this.notificationDialog = true;
+          }
+          this.updateGlobalNotificationStore(!this.globalNotification);
+          break;
+        default:
+        alert(this.$t("notification.not_supported"));
+      }
+    },
+    async onNotifyDialog() {
+      const permission = await requestNotificationPermission()
+     if(permission === 'denied') {
+      this.updateGlobalNotificationStore(false);
+        alert(this.$t("notification.blocked_message"));
+     } else {
+      this.updateGlobalNotificationStore(true);
+     }
+      this.notificationDialog = false;
+    },
+    onNotifyDialogClosed() {
+      this.updateGlobalNotificationStore(false);
+      this.notificationDialog = false;
+    }
   },
+  mounted() {
+    if(this.globalNotification && this.windowNotificationPermission() !== 'granted') {
+      this.onUpdateGlobalNotification(false);
+    }
+  }
 };
 </script>