Reviews: add import key functionality

src/UI/Popup/AllTagsPanel.svelte

@@ -4,7 +4,7 @@
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
 
   export let tags: UIEventSource<Record<string, any>>
-  export let tagKeys = tags.map((tgs) => Object.keys(tgs))
+  export let tagKeys = tags.map(tgs => tgs === undefined ? [] : Object.keys(tgs))
 
   export let layer: LayerConfig | undefined = undefined
 

src/UI/Reviews/ImportReviewIdentity.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+    /**
+     * Allows to import a 'mangrove' private key from backup
+     */
+    import LoginToggle from "../Base/LoginToggle.svelte"
+    import FileSelector from "../Base/FileSelector.svelte"
+    import type { SpecialVisualizationState } from "../SpecialVisualization"
+    import Tr from "../Base/Tr.svelte"
+    import Translations from "../i18n/Translations"
+    import { UIEventSource } from "../../Logic/UIEventSource"
+
+    export let state: SpecialVisualizationState
+    export let text: string
+
+    let error: string = undefined
+    let success: string = undefined
+
+    function importContent(str: string) {
+        const parsed = JSON.parse(str)
+
+        const format = {
+            "crv": "P-256",
+            "d": undefined,
+            "ext": true,
+            "key_ops": ["sign"],
+            "kty": "EC",
+            "x": undefined,
+            "y": undefined,
+            "metadata": "Mangrove private key",
+        }
+        const neededKeys = Object.keys(format)
+        for (const neededKey of neededKeys) {
+            const expected = format[neededKey]
+            const actual = parsed[neededKey]
+            if (actual === undefined) {
+                error = "Not a valid key. The value for " + neededKey + " is missing"
+                return
+            }
+            if (typeof expected === "string" && expected !== actual) {
+                error = "Not a valid key. The value for " + neededKey + " should be " + expected + " but is " + actual
+                return
+            }
+
+        }
+        const current: UIEventSource<string> = state.userRelatedState.mangroveIdentity.mangroveIdentity
+        const flattened = JSON.stringify(parsed, null, "")
+        if (flattened === current.data) {
+            success = "The imported key is identical to the existing key"
+            return
+        }
+        console.log("Got", flattened, current)
+        current.setData(flattened)
+        success = "Applied private key"
+    }
+
+    async function onImport(files: FileList) {
+        error = undefined
+        success = undefined
+        try {
+            const reader = new FileReader()
+            reader.readAsText(files[0], "UTF-8")
+
+            // here we tell the reader what to do when it's done reading...
+            const content = await new Promise<string>((resolve, reject) => {
+                reader.onload = readerEvent => {
+                    resolve(<string>readerEvent.target.result)
+                }
+            })
+            importContent(content)
+
+        } catch (e) {
+            error = e
+        }
+
+    }
+
+</script>
+
+<LoginToggle {state}>
+  <div class="flex flex-col m-1">
+
+    <FileSelector accept="application/json" multiple={false} on:submit={e => onImport(e.detail)}>
+      {text}
+    </FileSelector>
+    {#if error}
+      <div class="alert">
+        <Tr t={Translations.t.general.error} /> {error}</div>
+    {/if}
+    {#if success}
+      <div class="thanks">
+        {success}
+      </div>
+    {/if}
+  </div>
+</LoginToggle>

src/UI/SpecialVisualizations.ts

@@ -92,6 +92,7 @@ import SpecialTranslation from "./Popup/TagRendering/SpecialTranslation.svelte"
 import SpecialVisualisationUtils from "./SpecialVisualisationUtils"
 import LoginButton from "./Base/LoginButton.svelte"
 import Toggle from "./Input/Toggle"
+import ImportReviewIdentity from "./Reviews/ImportReviewIdentity.svelte"
 
 class NearbyImageVis implements SpecialVisualization {
     // Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
@@ -737,6 +738,19 @@ export default class SpecialVisualizations {
                     return new SvelteUIElement(AllReviews, { reviews, state, tags, feature, layer })
                 },
             },
+            {
+                funcName: "import_mangrove_key",
+                docs: "Only makes sense in the usersettings. Allows to import a mangrove public key and to use this to make reviews",
+                args: [{
+                    name: "text",
+                    doc: "The text that is shown on the button",
+                }],
+                needsUrls: [],
+                constr(state: SpecialVisualizationState, tagSource: UIEventSource<Record<string, string>>, argument: string[], feature: Feature, layer: LayerConfig): BaseUIElement {
+                    const [text] = argument
+                    return new SvelteUIElement(ImportReviewIdentity, { state, text })
+                },
+            },
             {
                 funcName: "opening_hours_table",
                 docs: "Creates an opening-hours table. Usage: {opening_hours_table(opening_hours)} to create a table of the tag 'opening_hours'.",