feat: add ability to poll for geolocation permission

Author: valeriansaliou

src/components/popups/sidebar/EditProfileProfile.vue

@@ -43,6 +43,18 @@ import {
 // PROJECT: POPUPS
 import { FormProfile as ProfileFormProfile } from "@/popups/sidebar/EditProfile.vue";
 
+// ENUMERATIONS
+enum GeolocationPermission {
+  // Not yet allowed permission.
+  NotYetAllowed = "not-yet-allowed",
+  // Disallowed permission.
+  Disallowed = "disallowed",
+  // Allowed permission.
+  Allowed = "allowed",
+  // Unknown permission.
+  Unknown = "unknown"
+}
+
 export default {
   name: "EditProfileProfile",
 
@@ -64,7 +76,35 @@ export default {
     return {
       // --> DATA <--
 
-      fieldsets: [
+      locationCountryOptions: countries.map(country => {
+        return {
+          value: country.code,
+          label: country.name
+        };
+      }),
+
+      locationCountryIcon: {
+        component: shallowRef(BaseFlag),
+
+        properties: (value: string) => {
+          return {
+            code: value,
+            width: "20px",
+            height: "15px",
+            shadow: "none"
+          };
+        }
+      },
+
+      // --> STATE <--
+
+      geolocationPermission: GeolocationPermission.Unknown
+    };
+  },
+
+  computed: {
+    fieldsets(): Array<FormFieldset> {
+      return [
         {
           id: "job",
           title: "Job information",
@@ -108,15 +148,12 @@ export default {
 
           fields: [
             {
-              // TODO: implement functionality using this option
               id: "automatic",
               type: FormFieldsetFieldType.Toggle,
               label: "Auto-detect:",
 
               data: {
-                value: {
-                  inner: false
-                }
+                value: this.form.locationAutodetect
               } as FormFieldsetFieldDataToggle
             },
 
@@ -127,7 +164,8 @@ export default {
 
               data: {
                 value: this.form.locationCity,
-                placeholder: "Enter your current city…"
+                placeholder: "Enter your current city…",
+                disabled: this.form.locationAutodetect.inner || false
               } as FormFieldsetFieldDataInput
             },
 
@@ -140,25 +178,9 @@ export default {
                 value: this.form.locationCountry,
                 placeholder: "Pick a country…",
 
-                options: countries.map(country => {
-                  return {
-                    value: country.code,
-                    label: country.name
-                  };
-                }),
-
-                icon: {
-                  component: shallowRef(BaseFlag),
-
-                  properties: (value: string) => {
-                    return {
-                      code: value,
-                      width: "20px",
-                      height: "15px",
-                      shadow: "none"
-                    };
-                  }
-                }
+                options: this.locationCountryOptions,
+                icon: this.locationCountryIcon,
+                disabled: this.form.locationAutodetect.inner || false
               } as FormFieldsetFieldDataSelect
             }
           ],
@@ -167,25 +189,34 @@ export default {
             {
               id: "location-mode",
               label: "Location mode:",
-              value: "Manual", // TODO: need to geocode lat/lon to city/country
-              icon: FormFieldsetControlIconType.LocationInactive
+
+              value: this.form.locationAutodetect.inner
+                ? "Automatic"
+                : "Manual",
+
+              icon: this.form.locationAutodetect.inner
+                ? FormFieldsetControlIconType.LocationActive
+                : FormFieldsetControlIconType.LocationInactive
             },
 
             {
               id: "location-permission",
               label: "Geolocation permission:",
-              value: "Disallowed", // TODO: from configuration
-
-              actions: [
-                {
-                  type: FormFieldsetControlActionType.Button,
-
-                  data: {
-                    text: "Manage",
-                    disabled: true
-                  } as FormFieldsetControlActionDataButton
-                }
-              ]
+              value: this.locationPermissionDetails.label,
+              color: this.locationPermissionDetails.color,
+              emphasis: this.locationPermissionDetails.emphasis,
+
+              actions: this.locationPermissionDetails.action
+                ? [
+                    {
+                      type: FormFieldsetControlActionType.Button,
+
+                      data: {
+                        text: "Allow"
+                      } as FormFieldsetControlActionDataButton
+                    }
+                  ]
+                : undefined
             }
           ],
 
@@ -198,8 +229,85 @@ export default {
             aside: FormFieldsetOptionAside.Fixed
           }
         }
-      ] as Array<FormFieldset>
-    };
+      ];
+    },
+
+    locationPermissionDetails(): {
+      label: string;
+      color: string;
+      emphasis?: boolean;
+      action?: boolean;
+    } {
+      switch (this.geolocationPermission) {
+        case GeolocationPermission.NotYetAllowed: {
+          return {
+            label: "Not yet allowed",
+            color: this.form.locationAutodetect.inner ? "orange" : "grey",
+            emphasis: this.form.locationAutodetect.inner || false
+            // action: true -- TODO: add action
+          };
+        }
+
+        case GeolocationPermission.Disallowed: {
+          return {
+            label: "Disallowed",
+            color: "red",
+            emphasis: this.form.locationAutodetect.inner || false
+          };
+        }
+
+        case GeolocationPermission.Allowed: {
+          return {
+            label: "Allowed",
+            color: this.form.locationAutodetect.inner ? "green" : "grey"
+          };
+        }
+
+        default: {
+          return {
+            label: "Unknown",
+            color: "grey"
+          };
+        }
+      }
+    }
+  },
+
+  async mounted() {
+    // Check for geolocation permission
+    this.geolocationPermission = await this.acquireGeolocationPermission();
+  },
+
+  methods: {
+    // --> HELPERS <--
+
+    async acquireGeolocationPermission(): Promise<GeolocationPermission> {
+      try {
+        // Request geolocation permission
+        const permission = await navigator.permissions.query({
+          name: "geolocation"
+        });
+
+        // Handle acquired permission
+        switch (permission.state) {
+          case "granted": {
+            return GeolocationPermission.Allowed;
+          }
+
+          case "denied": {
+            return GeolocationPermission.Disallowed;
+          }
+
+          case "prompt": {
+            return GeolocationPermission.NotYetAllowed;
+          }
+        }
+      } catch (error) {
+        this.$log.error("Failed acquiring geolocation permission", error);
+
+        return GeolocationPermission.Unknown;
+      }
+    }
   }
 };
 </script>

src/popups/sidebar/EditProfile.vue

@@ -90,6 +90,7 @@ import { SaveAvatarRequest } from "@/broker/modules/profile";
 
 // TYPES
 type FormValueString = { inner: string };
+type FormValueBoolean = { inner: boolean };
 
 // INTERFACES
 export interface FormIdentity {
@@ -107,6 +108,7 @@ export interface FormAuthentication {
 export interface FormProfile {
   jobOrganization: FormValueString;
   jobTitle: FormValueString;
+  locationAutodetect: FormValueBoolean;
   locationCity: FormValueString;
   locationCountry: FormValueString;
 }
@@ -189,6 +191,7 @@ export default {
             form: {
               jobOrganization: { inner: "" },
               jobTitle: { inner: "" },
+              locationAutodetect: { inner: false },
               locationCity: { inner: "" },
               locationCountry: { inner: "" }
             } as FormProfile
@@ -250,7 +253,7 @@ export default {
         this.fetching = true;
 
         try {
-          await Promise.all([this.syncVCard()]);
+          await Promise.all([this.syncStore(), this.syncVCard()]);
         } catch (error) {
           this.$log.error("Failed loading profile", error);
 
@@ -262,6 +265,11 @@ export default {
       }
     },
 
+    async syncStore(): Promise<void> {
+      // Apply store to form
+      this.storeDataToForms();
+    },
+
     async syncVCard(): Promise<void> {
       // Load profile vCard (force a reload)
       const profile = await Store.$profile.loadUserProfile(this.selfJID, true);
@@ -270,6 +278,14 @@ export default {
       this.vCardDataToForms(profile);
     },
 
+    storeDataToForms(): void {
+      const formProfile = this.contentSections.profile.properties.form;
+
+      // Populate profile form
+      formProfile.locationAutodetect.inner =
+        Store.$settings.profile.location.autodetect || false;
+    },
+
     vCardDataToForms(profile: ProfileEntry): void {
       const formIdentity = this.contentSections.identity.properties.form,
         formProfile = this.contentSections.profile.properties.form;
@@ -294,6 +310,13 @@ export default {
         profile.information?.location?.country || "";
     },
 
+    formsToStoreApply(formProfile: FormProfile): void {
+      // Save profile
+      Store.$settings.setProfileLocationAutodetect(
+        formProfile.locationAutodetect.inner
+      );
+    },
+
     formsToUserProfile(
       formIdentity: FormIdentity,
       formProfile: FormProfile
@@ -354,6 +377,9 @@ export default {
       if (this.fetching !== true && this.saving !== true) {
         this.saving = true;
 
+        // Apply forms in store
+        this.formsToStoreApply(this.contentSections.profile.properties.form);
+
         // Generate vCard save data
         const vCardData = this.formsToUserProfile(
           this.contentSections.identity.properties.form,