Feature(grb): add popup feature to validate e.g. a user profile

src/UI/Base/LoginButton.svelte

@@ -6,18 +6,26 @@
 
   export let osmConnection: OsmConnection
   export let clss: string | undefined = undefined
-
+  /**
+   * Show the button, even though we are logged in
+   */
+  export let forceShow: boolean = false
+  export let msg: String = undefined
   if (osmConnection === undefined) {
     console.error("No osmConnection passed into loginButton")
   }
   let isLoggedIn = osmConnection.isLoggedIn
 </script>
 
-{#if !$isLoggedIn}
+{#if !$isLoggedIn || forceShow}
   <button class={clss} on:click={() => osmConnection.AttemptLogin()} style="margin-left: 0">
     <ArrowLeftOnRectangle class="m-1 w-12" />
     <slot>
-      <Tr t={Translations.t.general.loginWithOpenStreetMap} />
+      {#if msg}
+        {msg}
+      {:else}
+        <Tr t={Translations.t.general.loginWithOpenStreetMap} />
+      {/if}
     </slot>
   </button>
 {/if}

src/UI/Base/Popup.svelte

@@ -42,8 +42,8 @@
 
 <Modal
   open={_shown}
-  on:close={() => shown.set(false)}
-  outsideclose
+  on:close={() =>shown.set(false)}
+  outsideclose={dismissable}
   size="xl"
   {dismissable}
   {defaultClass}

src/UI/SpecialVisualisations/SettingsVisualisations.ts

@@ -111,12 +111,27 @@ export class SettingsVisualisations {
             },
             {
                 funcName: "login_button",
-                args: [],
+                args: [{
+                    name: "force",
+                    doc: "Always show this button, even if logged in"
+                }, {
+                    name: "message",
+                    doc: "Message to display on the button"
+                }],
                 docs: "Show a login button",
                 needsUrls: [],
                 group: "settings",
-                constr(state: SpecialVisualizationState): SvelteUIElement {
-                    return new SvelteUIElement(LoginButton, { osmConnection: state.osmConnection })
+                constr(state: SpecialVisualizationState, _, args): SvelteUIElement {
+                    const force = args[0].toLowerCase()
+                    let msg = args[1]
+                    if (msg === "") {
+                        msg = undefined
+                    }
+                    return new SvelteUIElement(LoginButton, {
+                        osmConnection: state.osmConnection,
+                        msg,
+                        forceShow: force === "yes" || force === "true"
+                    })
                 },
             },
 

src/UI/ThemeViewGUI.svelte

@@ -49,6 +49,8 @@
   import Loading from "./Base/Loading.svelte"
   import { WithSearchState } from "../Models/ThemeViewState/WithSearchState"
   import TitleHandler from "../Logic/Actors/TitleHandler"
+  import Popup from "./Base/Popup.svelte"
+  import TagRenderingAnswer from "./Popup/TagRendering/TagRenderingAnswer.svelte"
 
   export let state: WithSearchState
   new TitleHandler(state.selectedElement, state)
@@ -76,6 +78,7 @@
   let mapproperties: MapProperties = state.mapProperties
   let searchOpened = state.searchState.showSearchDrawer
 
+  let metatags = state.userRelatedState.preferencesAsTags
   Orientation.singleton.startMeasurements()
 
   let slideDuration = 150 // ms
@@ -148,7 +151,7 @@
     const bottomRight = mlmap.unproject([rect.right, rect.bottom])
     const bbox = new BBox([
       [topLeft.lng, topLeft.lat],
-      [bottomRight.lng, bottomRight.lat],
+      [bottomRight.lng, bottomRight.lat]
     ])
     state.visualFeedbackViewportBounds.setData(bbox)
   }
@@ -500,5 +503,24 @@
     {/if}
   {/if}
 
+  {#each theme.popups as popup}
+    {#if popup.condition.matchesProperties($metatags)}
+      <Popup shown={new UIEventSource(true)} dismissable={popup.dismissible}>
+        <TagRenderingAnswer slot="header" config={popup.title} {state}
+                            tags={metatags}
+                            layer={undefined}
+                            selectedElement={({type: "Feature", properties: $metatags, geometry: {type: "Point", coordinates: [0,0]}})} />
+        <div class="flex flex-col">
+          {#each popup.body as body}
+            <TagRenderingAnswer config={body} {state}
+                                tags={metatags}
+                                layer={undefined}
+                                selectedElement={({type: "Feature", properties: $metatags, geometry: {type: "Point", coordinates: [0,0]}})} />
+          {/each}
+          <span class="subtle">{popup.id}</span>
+        </div>
+      </Popup>
+    {/if}
+  {/each}
   <MenuDrawer onlyLink={false} {state} />
 </main>