Refactoring: use special rendering for mangrove key download in usersettings

assets/layers/usersettings/usersettings.json

@@ -264,9 +264,21 @@
     {
       "id": "mangrove-keys",
       "render": {
-        "en": "<a href='data:application/json,{mangroveidentity}' download='mangrove_private_key_{_name}'>Download the private key for your Mangrove Account</a> <p>Anyone possessing this file can make reviews with your identity</p>",
+        "special": {
-        "de": "<a href='data:application/json,{mangroveidentity}' download='mangrove_private_key_{_name}'>Laden Sie den privaten Schlüssel für Ihr Mangrove-Konto herunter</a> <p>Jeder, der diese Datei besitzt, kann mit Ihrer Identität Rezensionen vornehmen</p>",
+          "type": "link",
-        "da": "<a href='data:application/json,{mangroveidentity}' download='mangrove_private_key_{_name}'>Hent den private nøgle til din Mangrove-konto</a> <p>Enhver, der har denne fil, kan lave ændringer med din identitet</p>"
+          "href": "data:application/json,{mangroveidentity}",
+          "download": "mangrove_private_key_{_name}",
+          "text": {
+            "en": "Download the private key for your Mangrove Account",
+            "de": "Laden Sie den privaten Schlüssel für Ihr Mangrove-Konto herunter",
+            "da": "Hent den private nøgle til din Mangrove-konto"
+          }
+        },
+        "after": {
+          "en": "Anyone possessing this file can make reviews with your identity",
+          "de": "Jeder, der diese Datei besitzt, kann mit Ihrer Identität Rezensionen vornehmen",
+          "da": "Enhver, der har denne fil, kan lave ændringer med din identitet"
+        }
       }
     },
     {

langs/layers/da.json

@@ -2966,7 +2966,12 @@
                 }
             },
             "mangrove-keys": {
-                "render": "<a href='data:application/json,{mangroveidentity}' download='mangrove_private_key_{_name}'>Hent den private nøgle til din Mangrove-konto</a> <p>Enhver, der har denne fil, kan lave ændringer med din identitet</p>"
+                "render": {
+                    "after": "Enhver, der har denne fil, kan lave ændringer med din identitet",
+                    "special": {
+                        "text": "Hent den private nøgle til din Mangrove-konto"
+                    }
+                }
             },
             "picture-license": {
                 "mappings": {

langs/layers/de.json

@@ -9592,7 +9592,12 @@
                 }
             },
             "mangrove-keys": {
-                "render": "<a href='data:application/json,{mangroveidentity}' download='mangrove_private_key_{_name}'>Laden Sie den privaten Schlüssel für Ihr Mangrove-Konto herunter</a> <p>Jeder, der diese Datei besitzt, kann mit Ihrer Identität Rezensionen vornehmen</p>"
+                "render": {
+                    "after": "Jeder, der diese Datei besitzt, kann mit Ihrer Identität Rezensionen vornehmen",
+                    "special": {
+                        "text": "Laden Sie den privaten Schlüssel für Ihr Mangrove-Konto herunter"
+                    }
+                }
             },
             "picture-license": {
                 "mappings": {

langs/layers/en.json

@@ -9680,7 +9680,12 @@
                 }
             },
             "mangrove-keys": {
-                "render": "<a href='data:application/json,{mangroveidentity}' download='mangrove_private_key_{_name}'>Download the private key for your Mangrove Account</a> <p>Anyone possessing this file can make reviews with your identity</p>"
+                "render": {
+                    "after": "Anyone possessing this file can make reviews with your identity",
+                    "special": {
+                        "text": "Download the private key for your Mangrove Account"
+                    }
+                }
             },
             "picture-license": {
                 "mappings": {

src/UI/Base/Link.ts

@@ -1,18 +1,22 @@
 import Translations from "../i18n/Translations"
 import BaseUIElement from "../BaseUIElement"
 import { Store } from "../../Logic/UIEventSource"
+import { Utils } from "../../Utils"
 
 export default class Link extends BaseUIElement {
     private readonly _href: string | Store<string>
     private readonly _embeddedShow: BaseUIElement
     private readonly _newTab: boolean
+    private readonly _download: string
 
     constructor(
         embeddedShow: BaseUIElement | string,
         href: string | Store<string>,
-        newTab: boolean = false
+        newTab: boolean = false,
+        download: string = undefined
     ) {
         super()
+        this._download = download
         this._embeddedShow = Translations.W(embeddedShow)
         this._href = href
         this._newTab = newTab
@@ -58,6 +62,9 @@ export default class Link extends BaseUIElement {
         if (this._newTab) {
             el.target = "_blank"
         }
+        if (this._download) {
+            el.download = this._download
+        }
         el.appendChild(embeddedShow)
         return el
     }

src/UI/SpecialVisualizations.ts

@@ -1155,19 +1155,24 @@ export default class SpecialVisualizations {
                         name: "class",
                         doc: "CSS-classes to add to the element",
                     },
+                    {
+                        name: "download",
+                        doc: "If set, this link will act as a download-button. The contents of `href` will be offered for download; this parameter will act as the proposed filename",
+                    },
                 ],
                 constr(
                     state: SpecialVisualizationState,
                     tagSource: UIEventSource<Record<string, string>>,
                     args: string[]
                 ): BaseUIElement {
-                    const [text, href, classnames] = args
+                    const [text, href, classnames, download] = args
                     return new VariableUiElement(
                         tagSource.map((tags) =>
                             new Link(
                                 Utils.SubstituteKeys(text, tags),
                                 Utils.SubstituteKeys(href, tags),
-                                true
+                                download === undefined,
+                                Utils.SubstituteKeys(download, tags)
                             ).SetClass(classnames)
                         )
                     )

src/Utils.ts

@@ -451,7 +451,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
      */
     public static SubstituteKeys(
         txt: string | undefined,
-        tags?: Record<string, any>,
+        tags: Record<string, any> | undefined,
         useLang?: string
     ): string | undefined {
         if (txt === undefined) {