feat: fully working auto-location feature

Author: valeriansaliou

config/common.json

@@ -2,7 +2,8 @@
   "platform": "web",
 
   "url": {
-    "prose_help": "https://help.prose.org"
+    "prose_help": "https://help.prose.org",
+    "nominatim_geocoder": "https://nominatim.openstreetmap.org"
   },
 
   "context": {

src/components/popups/sidebar/EditProfileProfile.vue

@@ -26,6 +26,7 @@ import { JID } from "@prose-im/prose-sdk-js";
 import { countries } from "crisp-countries-languages";
 
 // PROJECT: COMPONENTS
+import BaseAlert from "@/components/base/BaseAlert.vue";
 import BaseFlag from "@/components/base/BaseFlag.vue";
 import {
   default as FormSettingsEditor,
@@ -43,6 +44,9 @@ import {
 // PROJECT: POPUPS
 import { FormProfile as ProfileFormProfile } from "@/popups/sidebar/EditProfile.vue";
 
+// PROJECT: COMMONS
+import CONFIG from "@/commons/config";
+
 // ENUMERATIONS
 enum GeolocationPermission {
   // Not yet allowed permission.
@@ -51,10 +55,34 @@ enum GeolocationPermission {
   Disallowed = "disallowed",
   // Allowed permission.
   Allowed = "allowed",
+  // FailedToObtain permission.
+  FailedToObtain = "failed-to-obtain",
   // Unknown permission.
   Unknown = "unknown"
 }
 
+enum GeolocationAction {
+  // Allow action.
+  Allow = "allow",
+  // Refresh action.
+  Refresh = "refresh"
+}
+
+// INTERFACES
+interface GeolocationPositionCoordinates {
+  latitude: number;
+  longitude: number;
+}
+
+interface GeolocationPositionAddress {
+  cityName: string;
+  countryCode: string;
+}
+
+// CONSTANTS
+const GEOLOCATION_ACQUIRE_STALE_AGE = 3600000; // 1 hour
+const GEOLOCATION_ACQUIRE_TIMEOUT = 10000; // 10 seconds
+
 export default {
   name: "EditProfileProfile",
 
@@ -98,7 +126,9 @@ export default {
 
       // --> STATE <--
 
-      geolocationPermission: GeolocationPermission.Unknown
+      geolocationPermission: GeolocationPermission.Unknown,
+
+      isRefreshingGeolocationPosition: false
     };
   },
 
@@ -211,17 +241,28 @@ export default {
                     {
                       type: FormFieldsetControlActionType.Button,
 
-                      data: {
-                        text: "Allow"
-                      } as FormFieldsetControlActionDataButton
+                      data: (this.locationPermissionDetails.action ===
+                      GeolocationAction.Refresh
+                        ? {
+                            text: this.isRefreshingGeolocationPosition
+                              ? "Refreshing"
+                              : "Refresh location",
+
+                            disabled: this.isRefreshingGeolocationPosition,
+                            click: this.onFieldsetLocationPermissionRefreshClick
+                          }
+                        : {
+                            text: "Allow",
+                            click: this.onFieldsetLocationPermissionAllowClick
+                          }) as FormFieldsetControlActionDataButton
                     }
                   ]
                 : undefined
             }
           ],
 
           notes: [
-            "You can opt-in to automatic location updates based on your last used device location. It is handy if you travel a lot, and would like this to be auto-managed. Your current city and country will be shared, not your exact GPS location.",
+            "You can opt-in to automatic location detection. It is handy if you travel a lot, and would like to easily update your location in a single click. Your current city and country will be shared, not your exact GPS location.",
             "Note that geolocation permissions are required for automatic mode."
           ],
 
@@ -236,15 +277,15 @@ export default {
       label: string;
       color: string;
       emphasis?: boolean;
-      action?: boolean;
+      action?: GeolocationAction;
     } {
       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
+            emphasis: this.form.locationAutodetect.inner || false,
+            action: GeolocationAction.Allow
           };
         }
 
@@ -259,7 +300,19 @@ export default {
         case GeolocationPermission.Allowed: {
           return {
             label: "Allowed",
-            color: this.form.locationAutodetect.inner ? "green" : "grey"
+            color: this.form.locationAutodetect.inner ? "green" : "grey",
+
+            action: this.form.locationAutodetect.inner
+              ? GeolocationAction.Refresh
+              : undefined
+          };
+        }
+
+        case GeolocationPermission.FailedToObtain: {
+          return {
+            label: "Failed to obtain!",
+            color: "red",
+            emphasis: true
           };
         }
 
@@ -307,6 +360,132 @@ export default {
 
         return GeolocationPermission.Unknown;
       }
+    },
+
+    async obtainGeolocationPositionCoordinates(): Promise<GeolocationPositionCoordinates | null> {
+      return new Promise((resolve, reject) => {
+        try {
+          navigator.geolocation.getCurrentPosition(
+            position => {
+              // Resolve with success
+              resolve({
+                latitude: position.coords.latitude,
+                longitude: position.coords.longitude
+              });
+            },
+
+            () => {
+              // Reject with error
+              resolve(null);
+            },
+
+            {
+              timeout: GEOLOCATION_ACQUIRE_TIMEOUT,
+              maximumAge: GEOLOCATION_ACQUIRE_STALE_AGE
+            }
+          );
+        } catch (error) {
+          // Reject with error
+          reject(error);
+        }
+      });
+    },
+
+    async obtainGeolocationPositionAddress(
+      coordinates: GeolocationPositionCoordinates
+    ): Promise<GeolocationPositionAddress> {
+      // Geocode obtained coordinates (to a city and a country)
+      const geocoderQuery = new URLSearchParams();
+
+      geocoderQuery.append("format", "jsonv2");
+      geocoderQuery.append("lat", `${coordinates.latitude}`);
+      geocoderQuery.append("lon", `${coordinates.longitude}`);
+
+      const geocoderResponse = await fetch(
+        `${CONFIG.url.nominatim_geocoder}/reverse?${geocoderQuery}`,
+        {
+          mode: "cors"
+        }
+      );
+
+      if (geocoderResponse.ok !== true) {
+        throw new Error("Geocoding request failed");
+      }
+
+      const geocoding = (await geocoderResponse.json()) || {};
+
+      if (geocoding.address?.city && geocoding.address?.country_code) {
+        return {
+          cityName: geocoding.address.city,
+          countryCode: geocoding.address.country_code.toUpperCase()
+        };
+      }
+
+      throw new Error("Geocoding got no result");
+    },
+
+    // --> EVENT LISTENERS <--
+
+    async onFieldsetLocationPermissionAllowClick(): Promise<void> {
+      try {
+        // Obtain geolocation position (this will request for permission if \
+        //   needed)
+        const coordinates = await this.obtainGeolocationPositionCoordinates();
+
+        // Mark as allowed or disallowed?
+        this.geolocationPermission =
+          coordinates === null
+            ? GeolocationPermission.Disallowed
+            : GeolocationPermission.Allowed;
+      } catch (error) {
+        this.$log.error("Failed obtaining geolocation allow permission", error);
+
+        // Show warning alert
+        BaseAlert.warning("Location failed", "Could not obtain permissions");
+
+        // Mark as 'failed to obtain'
+        this.geolocationPermission = GeolocationPermission.FailedToObtain;
+      }
+    },
+
+    async onFieldsetLocationPermissionRefreshClick(): Promise<void> {
+      if (this.isRefreshingGeolocationPosition !== true) {
+        this.isRefreshingGeolocationPosition = true;
+
+        try {
+          // Obtain geolocation position
+          const coordinates = await this.obtainGeolocationPositionCoordinates();
+
+          // No geolocation position obtained?
+          if (coordinates === null) {
+            throw new Error("Coordinates are empty");
+          }
+
+          // Geocode obtained coordinates (to a city and a country)
+          const address = await this.obtainGeolocationPositionAddress(
+            coordinates
+          );
+
+          // Update user city and country (in form)
+          const form = this.form;
+
+          form.locationCity.inner = address.cityName;
+          form.locationCountry.inner = address.countryCode;
+
+          // Show success alert
+          BaseAlert.success(
+            "Location refreshed",
+            "Please save your profile to confirm"
+          );
+        } catch (error) {
+          this.$log.error("Failed obtaining geolocation fresh position", error);
+
+          // Show warning alert
+          BaseAlert.warning("Location failed", "Could not geolocate you!");
+        } finally {
+          this.isRefreshingGeolocationPosition = false;
+        }
+      }
     }
   }
 };