UX: make settings available if not logged in

src/Logic/Osm/OsmConnection.ts

@@ -146,7 +146,7 @@ export class OsmConnection {
         this.UpdateCapabilities()
 
         this.isLoggedIn = this.userDetails.map(
-            (user) => user !== undefined && (this.apiIsOnline.data === "unknown" || this.apiIsOnline.data === "online"),
+            (user) => user !== undefined && this.apiIsOnline.data === "online",
             [this.apiIsOnline]
         )
 
@@ -578,8 +578,10 @@ export class OsmConnection {
             if (!(this.apiIsOnline.data === "unreachable" || this.apiIsOnline.data === "offline")) {
                 return
             }
+            if (!this.isLoggedIn.data) {
+                return
+            }
             try {
-                console.log("Api is offline - trying to reconnect...")
                 this.AttemptLogin()
             } catch (e) {
                 console.log("Could not login due to", e)

src/Models/ThemeConfig/TagRenderingConfig.ts

@@ -5,10 +5,7 @@ import { TagUtils } from "../../Logic/Tags/TagUtils"
 import { And } from "../../Logic/Tags/And"
 import { Utils } from "../../Utils"
 import { Tag } from "../../Logic/Tags/Tag"
-import {
+import { MappingConfigJson, QuestionableTagRenderingConfigJson } from "./Json/QuestionableTagRenderingConfigJson"
-    MappingConfigJson,
-    QuestionableTagRenderingConfigJson,
-} from "./Json/QuestionableTagRenderingConfigJson"
 import Validators, { ValidatorType } from "../../UI/InputElement/Validators"
 import { TagRenderingConfigJson } from "./Json/TagRenderingConfigJson"
 import { RegexTag } from "../../Logic/Tags/RegexTag"
@@ -82,6 +79,7 @@ export default class TagRenderingConfig {
     public readonly classes: string[] | undefined
 
     public readonly onSoftDelete?: ReadonlyArray<UploadableTag>
+    public readonly alwaysForceSaveButton: boolean
 
     constructor(
         config:
@@ -144,6 +142,7 @@ export default class TagRenderingConfig {
         this.question = Translations.T(json.question, translationKey + ".question")
         this.questionhint = Translations.T(json.questionHint, translationKey + ".questionHint")
         this.questionHintIsMd = json["questionHintIsMd"] ?? false
+        this.alwaysForceSaveButton = json["#force-save-button"] === "yes"
         this.description = Translations.T(json.description, translationKey + ".description")
         if (json.onSoftDelete && !Array.isArray(json.onSoftDelete)) {
             throw context + ".onSoftDelete Not an array: " + typeof json.onSoftDelete

src/UI/BigComponents/MenuDrawer.svelte

@@ -124,12 +124,6 @@
       </svelte:fragment>
 
       <!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
-      <LoginToggle {state} silentFail>
-        <div class="flex flex-col" slot="not-logged-in">
-          <LanguagePicker availableLanguages={theme.language} />
-          <Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
-          <LoginButton clss="primary" osmConnection={state.osmConnection} />
-        </div>
         <SelectedElementView
           highlightedRendering={state.guistate.highlightedUserSetting}
           layer={usersettingslayer}
@@ -141,7 +135,6 @@
           {state}
           tags={state.userRelatedState.preferencesAsTags}
         />
-      </LoginToggle>
     </Page>
 
     <LoginToggle {state} silentFail>

src/UI/Popup/TagRendering/TagRenderingQuestion.svelte

@@ -14,7 +14,6 @@
   import TagHint from "../TagHint.svelte"
   import LoginToggle from "../../Base/LoginToggle.svelte"
   import SubtleButton from "../../Base/SubtleButton.svelte"
-  import Loading from "../../Base/Loading.svelte"
   import TagRenderingMappingInput from "./TagRenderingMappingInput.svelte"
   import { Translation } from "../../i18n/Translation"
   import Constants from "../../../Models/Constants"
@@ -119,7 +118,7 @@
             seenFreeforms.push(newProps[confg.freeform.key])
           }
           return matches
-        }),
+        })
       ]
 
       if (tgs !== undefined && confg.freeform) {
@@ -227,7 +226,7 @@
               freeform: $freeformInput,
               selectedMapping,
               checkedMappings,
-              currentTags: tags.data,
+              currentTags: tags.data
             },
             " --> ",
             selectedTags
@@ -285,7 +284,7 @@
     dispatch("saved", { config, applied: selectedTags })
     const change = new ChangeTagAction(tags.data.id, selectedTags, tags.data, {
       theme: tags.data["_orig_theme"] ?? state.theme.id,
-      changeType: "answer",
+      changeType: "answer"
     })
     freeformInput.set(undefined)
     selectedMapping = undefined
@@ -329,7 +328,7 @@
     const tagsToSet = settableKeys.data.map((k) => new Tag(k, ""))
     const change = new ChangeTagAction(tags.data.id, new And(tagsToSet), tags.data, {
       theme: tags.data["_orig_theme"] ?? state.theme.id,
-      changeType: "answer",
+      changeType: "answer"
     })
     freeformInput.set(undefined)
     selectedMapping = undefined
@@ -542,12 +541,25 @@
         {/if}
 
         <!-- Save and cancel buttons, in a logintoggle -->
-        <LoginToggle {state}>
+        <LoginToggle {state} ignoreLoading>
-          <Loading slot="loading" />
+          <div class="flex w-full justify-end" slot="not-logged-in">
-          <SubtleButton slot="not-logged-in" on:click={() => state?.osmConnection?.AttemptLogin()}>
+            {#if config.alwaysForceSaveButton}
-            <Login slot="image" class="h-8 w-8" />
+              <button
-            <Tr t={Translations.t.general.loginToStart} slot="message" />
+                on:click={() => onSave()}
-          </SubtleButton>
+                class={twJoin(
+                      selectedTags === undefined ? "disabled" : "button-shadow",
+                      "primary"
+                    )}
+              >
+                <Tr t={Translations.t.general.save} />
+              </button>
+            {:else}
+              <SubtleButton on:click={() => state?.osmConnection?.AttemptLogin()}>
+                <Login slot="image" class="h-8 w-8" />
+                <Tr t={Translations.t.general.loginToStart} slot="message" />
+              </SubtleButton>
+            {/if}
+          </div>
           {#if $feedback !== undefined}
             <div class="alert" aria-live="assertive" role="alert">
               <Tr t={$feedback} />