Android: get polyfills for geolocation working, some steps for logging in

Docs/Android_development.md

@@ -4,6 +4,7 @@ We are using capacitor. This is a tool which packages some files into an Android
 
 ## Developing
 
+0. `nvm use` to make sure your using the correct android version
 1. Build all the necessary files.
    a. If no layer/theme changes were made, `npm run build` is sufficient
    b. Otherwise, run `npm run prepare-deploy`.

src/Logic/Osm/OsmConnection.ts

@@ -5,6 +5,7 @@ import { Utils } from "../../Utils"
 import { LocalStorageSource } from "../Web/LocalStorageSource"
 import { AuthConfig } from "./AuthConfig"
 import Constants from "../../Models/Constants"
+import { AndroidPolyfill } from "../Web/AndroidPolyfill"
 
 interface OsmUserInfo {
     id: number
@@ -520,6 +521,7 @@ export class OsmConnection {
      * To be called by land.html
      */
     public finishLogin(callback: (previousURL: string) => void) {
+        console.log(">>> authenticating")
         this.auth.authenticate(function () {
             // Fully authed at this point
             console.log("Authentication successful!")
@@ -529,17 +531,22 @@ export class OsmConnection {
     }
 
     private updateAuthObject() {
+        let redirect_uri = Utils.runningFromConsole
+            ? "https://mapcomplete.org/land.html"
+            : window.location.protocol + "//" + window.location.host + "/land.html"
+        if(AndroidPolyfill.inAndroid.data){
+            redirect_uri = "https://app.mapcomplete.org/land.html"
+            AndroidPolyfill.requestLoginCodes(this)
+        }
         this.auth = new osmAuth({
             client_id: this._oauth_config.oauth_client_id,
             url: this._oauth_config.url,
             scope: "read_prefs write_prefs write_api write_gpx write_notes",
-            redirect_uri: Utils.runningFromConsole
+            redirect_uri,
-                ? "https://mapcomplete.org/land.html"
-                : window.location.protocol + "//" + window.location.host + "/land.html",
             /* We use 'singlePage' as much as possible, it is the most stable - including in PWA.
              * However, this breaks in iframes so we open a popup in that case
              */
-            singlepage: !this._iframeMode,
+            singlepage: !this._iframeMode && !AndroidPolyfill.inAndroid.data,
             auto: true,
             apiUrl: this._oauth_config.api_url ?? this._oauth_config.url,
         })

src/Logic/State/GeoLocationState.ts

@@ -3,6 +3,7 @@ import { LocalStorageSource } from "../Web/LocalStorageSource"
 import { QueryParameters } from "../Web/QueryParameters"
 import { Translation } from "../../UI/i18n/Translation"
 import Translations from "../../UI/i18n/Translations"
+import { AndroidPolyfill } from "../Web/AndroidPolyfill"
 
 export type GeolocationPermissionState = "prompt" | "requested" | "granted" | "denied"
 
@@ -157,12 +158,20 @@ export class GeoLocationState {
             this.permission.setData("denied")
             return
         }
+
         if (this.permission.data !== "prompt" && this.permission.data !== "requested") {
             // If the user denies the first prompt, revokes the deny and then tries again, we have to run the flow as well
             // Hence that we continue the flow if it is "requested"
             return
         }
 
+        if(AndroidPolyfill.inAndroid.data){
+            this.permission.setData("requested")
+            AndroidPolyfill.geolocationPermission.addCallbackAndRunD(state => this.permission.set(state))
+            this.startWatching()
+            return
+        }
+
         if (GeoLocationState.isSafari()) {
             /*
              This is probably safari

src/Logic/Web/AndroidPolyfill.ts

@@ -3,16 +3,17 @@
  * If this is successful, it will patch some webAPIs
  */
 import { registerPlugin } from "@capacitor/core"
-import { UIEventSource } from "../UIEventSource"
+import { Store, UIEventSource } from "../UIEventSource"
+import { OsmConnection } from "../Osm/OsmConnection"
 
 export interface DatabridgePlugin {
-    request(options: { key: string }): Promise<{ value: string }>;
+    request(options: { key: string }): Promise<{ value: string | object }>;
 }
 
 const DatabridgePluginSingleton = registerPlugin<DatabridgePlugin>("Databridge", {
     web: () => {
         return <DatabridgePlugin>{
-            async request(options: { key: string }): Promise<{ value: string }> {
+            async request(options: { key: string }): Promise<{ value: string | object }> {
                 return { value: "web" }
             },
         }
@@ -21,6 +22,10 @@ const DatabridgePluginSingleton = registerPlugin<DatabridgePlugin>("Databridge",
 
 export class AndroidPolyfill {
     private readonly databridgePlugin: DatabridgePlugin = DatabridgePluginSingleton
+    private static readonly _inAndroid: UIEventSource<boolean> = new UIEventSource<boolean>(false)
+    public static readonly inAndroid: Store<boolean> = AndroidPolyfill._inAndroid
+    private static readonly _geolocationPermission: UIEventSource<"granted" | "denied" | "prompt"> = new UIEventSource("prompt")
+    public static readonly geolocationPermission: Store<"granted" | "denied" | "prompt"> = this._geolocationPermission
 
     /**
      * Registers 'navigator.'
@@ -28,26 +33,10 @@ export class AndroidPolyfill {
      */
     private backfillGeolocation(databridgePlugin: DatabridgePlugin) {
         const origQueryFunc = navigator?.permissions?.query
-        navigator.permissions.query = async (descr: PermissionDescriptor) => {
+        const src = UIEventSource.FromPromise(databridgePlugin.request({ key: "location:request-permission" }))
-            if (descr.name === "geolocation") {
+        src.addCallbackAndRunD(permission => {
-                console.log("Got a geolocation permission request")
+            AndroidPolyfill._geolocationPermission.set(<"granted" | "denied">permission.value)
-                const src = UIEventSource.FromPromise(databridgePlugin.request({ key: "location:request-permission" }))
+        })
-
-                return <PermissionStatus>{
-                    state: undefined,
-                    addEventListener(key: "change", f: (value: "granted" | "denied") => void) {
-                        src.addCallbackAndRunD(v => {
-                            const content = <"granted" | "denied">v.value
-                            f(content)
-                            return true
-                        })
-                    },
-                }
-            }
-            if (origQueryFunc) {
-                return await origQueryFunc(descr)
-            }
-        }
     }
 
     public async init() {
@@ -57,8 +46,20 @@ export class AndroidPolyfill {
             console.log("Not initing Android polyfill as not in a shell; web detected")
             return
         }
+        AndroidPolyfill._inAndroid.set(true)
         console.log("Detected shell:", shell.value)
         this.backfillGeolocation(this.databridgePlugin)
     }
 
+    public static async requestLoginCodes(osmConnection: OsmConnection) {
+        const result = await DatabridgePluginSingleton.request({ key: "request:login" })
+        const code: string = result["code"]
+        const state: string = result["state"]
+        console.log("AndroidPolyfill: received code and state; trying to pass them to the oauth lib")
+        window.location.search = "?code=" + code + "&state=" + state
+        osmConnection.finishLogin((oldLocation) => {
+            console.log("Login should be completed, oldLocation is", oldLocation)
+        })
+    }
+
 }

src/UI/BigComponents/MenuDrawer.svelte

@@ -52,6 +52,7 @@
   import PanoramaxLink from "./PanoramaxLink.svelte"
   import { UIEventSource } from "../../Logic/UIEventSource"
   import MagnifyingGlassCircle from "@babeard/svelte-heroicons/mini/MagnifyingGlassCircle"
+  import { AndroidPolyfill } from "../../Logic/Web/AndroidPolyfill"
 
   export let state: ThemeViewState
   let userdetails = state.osmConnection.userDetails
@@ -78,6 +79,7 @@
       })
     }
   })
+  let isAndroid = AndroidPolyfill.inAndroid
 </script>
 
 <div
@@ -255,7 +257,8 @@
     </If>
 
     <a class="sidebar-button flex" href="geo:{$location.lat},{$location.lon}">
-      <ShareIcon /><Tr t={t.openHereDifferentApp} />
+      <ShareIcon />
+      <Tr t={t.openHereDifferentApp} />
     </a>
   </SidebarUnit>
 
@@ -343,6 +346,9 @@
 
     <div class="subtle self-end">
       {Constants.vNumber}
+      {#if $isAndroid}
+        Android
+      {/if}
     </div>
   </SidebarUnit>
 </div>