implement file encryption key inputs

dist/index.js

@@ -394,7 +394,11 @@
       ///
       filesSentCount: (count) => `Files sent: ${count}.`,
       allFilesSent: "Done.",
-      filesReceivedCount: (count) => `Files received: ${count}.`
+      filesReceivedCount: (count) => `Files received: ${count}.`,
+      //
+      exportKey: "Encryption key",
+      exportKeyConfirmation: "Confirm",
+      downloadFileButton: "Download"
     },
     storage: {
       noItemSelected: "No item selected",
@@ -1755,6 +1759,8 @@
           this.filesReceivedCount.value
         )
       );
+      this.exportKey = new State("");
+      this.exportKeyConfirmation = new State("");
       // guards
       this.hasNoPathsSelected = createProxyState(
         [this.selectedPaths],
@@ -1765,6 +1771,10 @@
         [this.receivingTransferChannel, this.receivingTransferKey],
         () => this.receivingTransferChannel.value == "" || this.receivingTransferKey.value == ""
       );
+      this.cannotExport = createProxyState(
+        [this.exportKey, this.exportKeyConfirmation],
+        () => this.exportKey.value == "" || this.exportKey.value != this.exportKeyConfirmation.value
+      );
       // handlers
       this.handleReceivedFile = (path) => {
         this.filePathsReceived.add(path);
@@ -6943,22 +6953,35 @@
       [fileTransferViewModel2.presentedModal],
       () => fileTransferViewModel2.presentedModal.value == 6 /* ExportModal */
     );
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.exportHeadline), /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.exportHeadline), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, coreViewModel2.translations.dataTransferModal.exportKey), /* @__PURE__ */ createElement(
-      "p",
+      "input",
       {
-        class: "secondary",
+        "bind:value": fileTransferViewModel2.exportKey,
-        "subscribe:innerText": fileTransferViewModel2.filesReceivedText
+        type: "password"
       }
-    ), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement(
+    ))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "check_circle"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, coreViewModel2.translations.dataTransferModal.exportKeyConfirmation), /* @__PURE__ */ createElement(
-      "div",
+      "input",
       {
-        class: "tile flex-column align-start",
+        "bind:value": fileTransferViewModel2.exportKeyConfirmation,
-        "children:append": [
+        type: "password"
-          fileTransferViewModel2.filePathsReceived,
-          StringToTextSpan
-        ]
       }
-    )), /* @__PURE__ */ createElement("button", { "on:click": fileTransferViewModel2.close }, coreViewModel2.translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
+    )))), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "flex",
+        "on:click": fileTransferViewModel2.showDirectionSelectionModal
+      },
+      coreViewModel2.translations.general.backButton
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary flex",
+        "on:click": fileTransferViewModel2,
+        "toggle:disabled": fileTransferViewModel2.cannotExport
+      },
+      coreViewModel2.translations.dataTransferModal.downloadFileButton,
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "download")
+    ))));
   }
   function ImportModal(coreViewModel2, fileTransferViewModel2) {
     const isPresented = createProxyState(

src/View/Modals/dataTransferModal.tsx

@@ -607,29 +607,65 @@ function ExportModal(
                             coreViewModel.translations.dataTransferModal
                                 .exportHeadline
                         }
-                    </h2>
+		    </h2>
 
-                    <p
+                        <label class="tile">
-                        class="secondary"
+                            <span class="icon">key</span>
-                        subscribe:innerText={
+                            <div>
-                            fileTransferViewModel.filesReceivedText
+                                <span class="secondary">
-                        }
+                                    {
-                    ></p>
+                                        coreViewModel.translations
-
+                                            .dataTransferModal
-                    <hr></hr>
+                                            .exportKey
-
+                                    }
-                    <div
+                                </span>
-                        class="tile flex-column align-start"
+                                <input
-                        children:append={[
+                                    bind:value={
-                            fileTransferViewModel.filePathsReceived,
+                                        fileTransferViewModel.exportKey
-                            StringToTextSpan,
+                                    }
-                        ]}
+				    type="password"
-                    ></div>
+                                ></input>
+                            </div>
+                        </label>
+                        <label class="tile">
+                            <span class="icon">check_circle</span>
+                            <div>
+                                <span class="secondary">
+                                    {
+                                        coreViewModel.translations
+                                            .dataTransferModal
+                                            .exportKeyConfirmation
+                                    }
+                                </span>
+                                <input
+                                    bind:value={
+                                        fileTransferViewModel.exportKeyConfirmation
+				    }
+				    type="password"
+                                ></input>
+                            </div>
+                        </label>
                 </main>
-                <button on:click={fileTransferViewModel.close}>
+                <div class="flex-row width-100">
-                    {coreViewModel.translations.general.closeButton}
+                    <button
-                    <span class="icon">close</span>
+                        class="flex"
-                </button>
+                        on:click={
+                            fileTransferViewModel.showDirectionSelectionModal
+                        }
+                    >
+                        {coreViewModel.translations.general.backButton}
+                    </button>
+                    <button
+                        class="primary flex"
+                        on:click={fileTransferViewModel}
+                        toggle:disabled={
+                            fileTransferViewModel.cannotExport
+                        }
+                    >
+                        {coreViewModel.translations.dataTransferModal.downloadFileButton}
+                        <span class="icon">download</span>
+                    </button>
+                </div>
             </div>
         </div>
     );

src/View/translations.ts

@@ -145,6 +145,12 @@ const englishTranslations = {
         allFilesSent: "Done.",
 
         filesReceivedCount: (count: number) => `Files received: ${count}.`,
+
+	//
+	
+	exportKey: "Encryption key",
+	exportKeyConfirmation: "Confirm",
+	downloadFileButton: "Download",
     },
 
     storage: {

src/ViewModel/Global/fileTransferViewModel.ts

@@ -51,6 +51,9 @@ export default class FileTransferViewModel extends Context {
             ),
     );
 
+    exportKey: React.State<string> = new React.State("");
+    exportKeyConfirmation: React.State<string> = new React.State("");
+
     // guards
     hasNoPathsSelected: React.State<boolean> = React.createProxyState(
         [this.selectedPaths],
@@ -63,6 +66,12 @@ export default class FileTransferViewModel extends Context {
             this.receivingTransferChannel.value == "" ||
             this.receivingTransferKey.value == "",
     );
+    
+    cannotExport: React.State<boolean> = React.createProxyState(
+        [this.exportKey, this.exportKeyConfirmation],
+        () =>
+            this.exportKey.value == "" ||  this.exportKey.value != this.exportKeyConfirmation.value
+    );
 
     // handlers
     handleReceivedFile = (path: string): void => {