implement file encryption key inputs

This commit is contained in:
marlon-erler
2026-08-29 23:51:38 +02:00
parent f5ce48a485
commit 7aee3742ba
4 changed files with 108 additions and 34 deletions
+36 -13
View File
@@ -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(
"p",
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(
"input",
{
class: "secondary",
"subscribe:innerText": fileTransferViewModel2.filesReceivedText
"bind:value": fileTransferViewModel2.exportKey,
type: "password"
}
), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement(
"div",
))), /* @__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(
"input",
{
class: "tile flex-column align-start",
"children:append": [
fileTransferViewModel2.filePathsReceived,
StringToTextSpan
]
"bind:value": fileTransferViewModel2.exportKeyConfirmation,
type: "password"
}
)), /* @__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(
+54 -18
View File
@@ -609,27 +609,63 @@ function ExportModal(
}
</h2>
<p
class="secondary"
subscribe:innerText={
fileTransferViewModel.filesReceivedText
<label class="tile">
<span class="icon">key</span>
<div>
<span class="secondary">
{
coreViewModel.translations
.dataTransferModal
.exportKey
}
></p>
<hr></hr>
<div
class="tile flex-column align-start"
children:append={[
fileTransferViewModel.filePathsReceived,
StringToTextSpan,
]}
></div>
</span>
<input
bind:value={
fileTransferViewModel.exportKey
}
type="password"
></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}>
{coreViewModel.translations.general.closeButton}
<span class="icon">close</span>
<div class="flex-row width-100">
<button
class="flex"
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>
);
+6
View File
@@ -145,6 +145,12 @@ const englishTranslations = {
allFilesSent: "Done.",
filesReceivedCount: (count: number) => `Files received: ${count}.`,
//
exportKey: "Encryption key",
exportKeyConfirmation: "Confirm",
downloadFileButton: "Download",
},
storage: {
@@ -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],
@@ -64,6 +67,12 @@ export default class FileTransferViewModel extends Context {
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 => {
this.filePathsReceived.add(path);