implement backup import

dist/index.js

@@ -376,7 +376,6 @@
       exportSelectionDescription: "Select the data that you want to export.",
       dataEntryDescription: "Enter this data on the other device.",
       dataEntryInputDescription: "Enter the data displayed on the other device.",
-      notConnectedError: "You are not connected to any server.",
       ///
       fromThisDeviceButton: "Send to other device",
       toThisDeviceButton: "Send to this device",
@@ -395,11 +394,14 @@
       ///
       filesSentCount: (count) => `Files sent: ${count}.`,
       allFilesSent: "Done.",
-      filesReceivedCount: (count) => `Files received: ${count}.`,
+      filesReceivedCount: (count) => `Files processed: ${count}.`,
       //
       exportKey: "Encryption key",
       exportKeyConfirmation: "Confirm",
-      downloadFileButton: "Download"
+      downloadFileButton: "Download",
+      importFileButton: "Import",
+      decryptImportButton: "Decrypt",
+      incorrectPassphraseError: "The encryption key is incorrect"
     },
     storage: {
       noItemSelected: "No item selected",
@@ -1762,6 +1764,10 @@
       );
       this.exportKey = new State("");
       this.exportKeyConfirmation = new State("");
+      this.importedFile = new State(void 0);
+      this.importedFileString = new State("");
+      this.importKey = new State("");
+      this.isImportKeyCorrect = new State(true);
       // guards
       this.hasNoPathsSelected = createProxyState(
         [this.selectedPaths],
@@ -1776,6 +1782,14 @@
         [this.exportKey, this.exportKeyConfirmation],
         () => this.exportKey.value == "" || this.exportKey.value != this.exportKeyConfirmation.value
       );
+      this.cannotImport = createProxyState(
+        [this.importedFile],
+        () => this.importedFile.value == void 0
+      );
+      this.cannotDecryptImport = createProxyState(
+        [this.importKey],
+        () => this.importKey.value == ""
+      );
       // handlers
       this.handleReceivedFile = (path) => {
         this.filePathsReceived.add(path);
@@ -1822,6 +1836,38 @@
         anchor.download = `comms-${date}.bak`;
         anchor.click();
       };
+      this.updateImportSelection = () => {
+        const input = document.getElementById("file-transfer-input");
+        if (!input) return;
+        if (!(input instanceof HTMLInputElement)) return;
+        const file = input.files[0];
+        this.importedFile.value = file;
+      };
+      this.importFile = () => {
+        const file = this.importedFile.value;
+        if (!file) return;
+        const reader = new FileReader();
+        reader.readAsText(file, "utf8");
+        reader.onload = () => {
+          const result = reader.result;
+          this.importedFileString.value = result.toString();
+          this.showImportDecryptDataModal();
+        };
+      };
+      this.decryptImport = async () => {
+        const fileString = this.importedFileString.value;
+        const key = this.importKey.value;
+        if (!fileString || !key) return;
+        this.cannotDecryptImport.value = true;
+        try {
+          await this.coreViewModel.fileTransferModel.handleBackupFile(fileString, key);
+          window.location.reload();
+        } catch (e) {
+          console.error(e);
+          this.isImportKeyCorrect.value = false;
+          this.cannotDecryptImport.value = false;
+        }
+      };
       // view
       this.showDirectionSelectionModal = () => {
         this.coreViewModel.context = this;
@@ -1843,7 +1889,6 @@
         this.coreViewModel.fileTransferModel.sendFiles(
           this.selectedPaths.value.values(),
           (path) => {
-            console.log(path);
             this.filePathsSent.add(path);
           }
         );
@@ -1859,7 +1904,10 @@
         this.presentedModal.value = 7 /* Export */;
       };
       this.showImportModal = () => {
-        this.presentedModal.value = 8 /* Import */;
+        this.presentedModal.value = 8 /* ImportSelection */;
+      };
+      this.showImportDecryptDataModal = () => {
+        this.presentedModal.value = 9 /* ImportDecryptData */;
       };
       this.prepareReceivingData = () => {
         if (this.cannotPrepareToReceive.value == true) return;
@@ -6703,7 +6751,7 @@
       coreViewModel2,
       connectionViewModel2,
       fileTransferViewModel2
-    ), FileSelectionModal(coreViewModel2, fileTransferViewModel2), TransferDataDisplayModal(coreViewModel2, fileTransferViewModel2), TransferDisplayModal(coreViewModel2, fileTransferViewModel2), TransferDataInputModal(coreViewModel2, fileTransferViewModel2), DataReceptionModal(coreViewModel2, fileTransferViewModel2), ExportFileSelectionModal(coreViewModel2, fileTransferViewModel2), ExportModal(coreViewModel2, fileTransferViewModel2), ImportModal(coreViewModel2, fileTransferViewModel2));
+    ), FileSelectionModal(coreViewModel2, fileTransferViewModel2), TransferDataDisplayModal(coreViewModel2, fileTransferViewModel2), TransferDisplayModal(coreViewModel2, fileTransferViewModel2), TransferDataInputModal(coreViewModel2, fileTransferViewModel2), DataReceptionModal(coreViewModel2, fileTransferViewModel2), ExportFileSelectionModal(coreViewModel2, fileTransferViewModel2), ExportModal(coreViewModel2, fileTransferViewModel2), ImportModal(coreViewModel2, fileTransferViewModel2), ImportDecryptionDataModal(coreViewModel2, fileTransferViewModel2));
   }
   function OptionEntry(fileOption, fileTransferViewModel2) {
     const isSelected = new State(false);
@@ -6734,22 +6782,15 @@
       () => connectionViewModel2.isConnected.value == false
     );
     return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.transferDataHeadline), /* @__PURE__ */ createElement(
-      "p",
-      {
-        class: "error",
-        "toggle:hidden": connectionViewModel2.isConnected
-      },
-      coreViewModel2.translations.dataTransferModal.notConnectedError
-    ), /* @__PURE__ */ createElement(
       "div",
       {
-        class: "flex-column gap content-margin-bottom",
+        class: "flex-column gap content-margin-bottom"
-        "toggle:hidden": isDisconnected
       },
       /* @__PURE__ */ createElement(
         "button",
         {
           class: "tile",
+          "toggle:disabled": isDisconnected,
           "on:click": fileTransferViewModel2.showFileSelectionModal
         },
         /* @__PURE__ */ createElement("span", { class: "icon" }, "share_windows"),
@@ -6760,6 +6801,7 @@
         "button",
         {
           class: "tile",
+          "toggle:disabled": isDisconnected,
           "on:click": fileTransferViewModel2.showTransferDataInputModal
         },
         /* @__PURE__ */ createElement("span", { class: "icon" }, "cloud_download"),
@@ -7042,24 +7084,61 @@
   function ImportModal(coreViewModel2, fileTransferViewModel2) {
     const isPresented = createProxyState(
       [fileTransferViewModel2.presentedModal],
-      () => fileTransferViewModel2.presentedModal.value == 8 /* Import */
+      () => fileTransferViewModel2.presentedModal.value == 8 /* ImportSelection */
     );
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.importHeadline), /* @__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.importHeadline), /* @__PURE__ */ createElement("input", { id: "file-transfer-input", type: "file", "on:change": fileTransferViewModel2.updateImportSelection })), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "flex",
+        "on:click": fileTransferViewModel2.showImportModal
+      },
+      coreViewModel2.translations.general.backButton
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary flex",
+        "on:click": fileTransferViewModel2.importFile,
+        "toggle:disabled": fileTransferViewModel2.cannotImport
+      },
+      coreViewModel2.translations.dataTransferModal.importFileButton,
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
+    ))));
+  }
+  function ImportDecryptionDataModal(coreViewModel2, fileTransferViewModel2) {
+    const isPresented = createProxyState(
+      [fileTransferViewModel2.presentedModal],
+      () => fileTransferViewModel2.presentedModal.value == 9 /* ImportDecryptData */
+    );
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.importHeadline), /* @__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",
+      {
+        "bind:value": fileTransferViewModel2.importKey,
+        type: "password"
+      }
+    ))), /* @__PURE__ */ createElement(
       "p",
       {
-        class: "secondary",
+        class: "error",
-        "subscribe:innerText": fileTransferViewModel2.filesReceivedText
+        "toggle:hidden": fileTransferViewModel2.isImportKeyCorrect
-      }
+      },
-    ), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement(
+      coreViewModel2.translations.dataTransferModal.incorrectPassphraseError
-      "div",
+    )), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
+      "button",
       {
-        class: "tile flex-column align-start",
+        class: "flex",
-        "children:append": [
+        "on:click": fileTransferViewModel2.showImportModal
-          fileTransferViewModel2.filePathsReceived,
+      },
-          StringToTextSpan
+      coreViewModel2.translations.general.backButton
-        ]
+    ), /* @__PURE__ */ createElement(
-      }
+      "button",
-    )), /* @__PURE__ */ createElement("button", { "on:click": ViewController.reload }, coreViewModel2.translations.general.reloadAppButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "refresh"))));
+      {
+        class: "primary flex",
+        "on:click": fileTransferViewModel2.decryptImport,
+        "toggle:disabled": fileTransferViewModel2.cannotDecryptImport
+      },
+      coreViewModel2.translations.dataTransferModal.decryptImportButton,
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
+    ))));
   }
 
   // src/View/Modals/connectionModal.tsx
@@ -7377,7 +7456,7 @@
           parsed,
           FileDataReference
         );
-        if (isFileData == false) return;
+        if (isFileData == false) throw "not file data";
         const fileData = parsed;
         this.storageModel.write(fileData.path, fileData.body);
         const pathString = StorageModel.pathComponentsToString(
@@ -7407,14 +7486,14 @@
           });
         }
         const rawBackup = stringify(files);
+        console.log(rawBackup);
         const encrypted = await encryptString(rawBackup, passphrase);
         const blob = new Blob([encrypted], { type: "text/plain" });
         return blob;
       };
       this.prepareFileForSending = (filePath) => {
-        if (this.transferData == void 0) return;
         const fileContent = this.storageModel.read(filePath);
-        if (fileContent == null) return;
+        if (fileContent == null) return "";
         const fileData = {
           path: filePath,
           body: fileContent

src/Model/Global/fileTransferModel.ts

@@ -107,7 +107,7 @@ export default class FileTransferModel {
             parsed,
             FileDataReference,
         );
-        if (isFileData == false) return;
+        if (isFileData == false) throw "not file data";
 
         const fileData: FileData = parsed;
         this.storageModel.write(fileData.path, fileData.body);
@@ -149,15 +149,15 @@ export default class FileTransferModel {
             });
         }
         const rawBackup = stringify(files);
+	console.log(rawBackup);
         const encrypted = await encryptString(rawBackup, passphrase);
 	const blob = new Blob([encrypted], {type: "text/plain"});
 	return blob;
     };
 
     readonly prepareFileForSending = (filePath: string[]): string => {
-        if (this.transferData == undefined) return;
+        const fileContent: string | undefined = this.storageModel.read(filePath);
-        const fileContent: string | null = this.storageModel.read(filePath);
+        if (fileContent == null) return "";
-        if (fileContent == null) return;
 
         const fileData: FileData = {
             path: filePath,

src/View/Modals/dataTransferModal.tsx

@@ -30,6 +30,7 @@ export function DataTransferModalWrapper(
     {ExportFileSelectionModal(coreViewModel, fileTransferViewModel)}
     {ExportModal(coreViewModel, fileTransferViewModel)}
     {ImportModal(coreViewModel, fileTransferViewModel)}
+    {ImportDecryptionDataModal(coreViewModel, fileTransferViewModel)}
 </div>
     );
 }
@@ -97,22 +98,12 @@ function DirectionSelectionModal(
 			}
 		    </h2>
 
-		    <p
-			class="error"
-			toggle:hidden={connectionViewModel.isConnected}
-		    >
-			{
-			    coreViewModel.translations.dataTransferModal
-			    .notConnectedError
-			}
-		    </p>
-
 		    <div
 			class="flex-column gap content-margin-bottom"
-			toggle:hidden={isDisconnected}
 		    >
 			<button
 			    class="tile"
+			toggle:disabled={isDisconnected}
 			    on:click={
 				fileTransferViewModel.showFileSelectionModal
 			    }
@@ -131,6 +122,7 @@ function DirectionSelectionModal(
 			</button>
 			<button
 			    class="tile"
+			    toggle:disabled={isDisconnected}
 			    on:click={
 				fileTransferViewModel.showTransferDataInputModal
 			    }
@@ -772,7 +764,7 @@ function ImportModal(
 	[fileTransferViewModel.presentedModal],
 	() =>
 	fileTransferViewModel.presentedModal.value ==
-	FileTransferModals.Import,
+	FileTransferModals.ImportSelection,
     );
 
     return (
@@ -786,27 +778,100 @@ function ImportModal(
 			}
 		    </h2>
 
-		    <p
+		    <input id="file-transfer-input" type="file" on:change={fileTransferViewModel.updateImportSelection}></input>
-			class="secondary"
-			subscribe:innerText={
-			    fileTransferViewModel.filesReceivedText
-			}
-		    ></p>
-
-		<hr></hr>
-
-		<div
-		    class="tile flex-column align-start"
-		    children:append={[
-			fileTransferViewModel.filePathsReceived,
-			StringToTextSpan,
-		    ]}
-		></div>
 		</main>
-	    <button on:click={ViewController.reload}>
+		<div class="flex-row width-100">
-		{coreViewModel.translations.general.reloadAppButton}
+		    <button
-		<span class="icon">refresh</span>
+			class="flex"
+			on:click={
+			    fileTransferViewModel.showImportModal
+			}
+		    >
+			{coreViewModel.translations.general.backButton}
 		    </button>
+		    <button
+			class="primary flex"
+			on:click={fileTransferViewModel.importFile}
+			toggle:disabled={
+			    fileTransferViewModel.cannotImport
+			}
+		    >
+			{coreViewModel.translations.dataTransferModal.importFileButton}
+			<span class="icon">arrow_forward</span>
+		    </button>
+		</div>
+	    </div>
+	</div>
+    );
+}
+
+function ImportDecryptionDataModal(
+    coreViewModel: CoreViewModel,
+    fileTransferViewModel: FileTransferViewModel,
+) {
+    const isPresented = React.createProxyState(
+	[fileTransferViewModel.presentedModal],
+	() =>
+	fileTransferViewModel.presentedModal.value ==
+	FileTransferModals.ImportDecryptData,
+    );
+
+    return (
+	<div class="modal" toggle:open={isPresented}>
+	    <div>
+		<main>
+		    <h2>
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .importHeadline
+			}
+		    </h2>
+
+		    <label class="tile">
+			<span class="icon">key</span>
+			<div>
+			    <span class="secondary">
+				{
+				    coreViewModel.translations
+				    .dataTransferModal
+				    .exportKey
+				}
+			    </span>
+			    <input
+				bind:value={
+				    fileTransferViewModel.importKey
+				}
+				type="password"
+			    ></input>
+			</div>
+		    </label>
+
+		    <p 
+			class="error"
+			toggle:hidden={fileTransferViewModel.isImportKeyCorrect}>
+			{coreViewModel.translations.dataTransferModal.incorrectPassphraseError}
+		    </p>
+		</main>
+		<div class="flex-row width-100">
+		    <button
+			class="flex"
+			on:click={
+			    fileTransferViewModel.showImportModal
+			}
+		    >
+			{coreViewModel.translations.general.backButton}
+		    </button>
+		    <button
+			class="primary flex"
+			on:click={fileTransferViewModel.decryptImport}
+			toggle:disabled={
+			    fileTransferViewModel.cannotDecryptImport
+			}
+		    >
+			{coreViewModel.translations.dataTransferModal.decryptImportButton}
+			<span class="icon">arrow_forward</span>
+		    </button>
+		</div>
 	    </div>
 	</div>
     );

src/View/translations.ts

@@ -114,8 +114,6 @@ const englishTranslations = {
         dataEntryInputDescription:
             "Enter the data displayed on the other device.",
 
-        notConnectedError: "You are not connected to any server.",
-
         ///
 
         fromThisDeviceButton: "Send to other device",
@@ -145,13 +143,16 @@ const englishTranslations = {
         filesSentCount: (count: number) => `Files sent: ${count}.`,
         allFilesSent: "Done.",
 
-        filesReceivedCount: (count: number) => `Files received: ${count}.`,
+        filesReceivedCount: (count: number) => `Files processed: ${count}.`,
 
 	//
 	
 	exportKey: "Encryption key",
 	exportKeyConfirmation: "Confirm",
 	downloadFileButton: "Download",
+	importFileButton: "Import",
+	decryptImportButton: "Decrypt",
+	incorrectPassphraseError: "The encryption key is incorrect",
     },
 
     storage: {

src/ViewModel/Global/fileTransferViewModel.ts

@@ -54,6 +54,11 @@ export default class FileTransferViewModel extends Context {
     exportKey: React.State<string> = new React.State("");
     exportKeyConfirmation: React.State<string> = new React.State("");
 
+    importedFile: React.State<File|undefined> = new React.State(undefined);
+    importedFileString: React.State<string> = new React.State("");
+    importKey: React.State<string> = new React.State("");
+    isImportKeyCorrect: React.State<boolean> = new React.State(true);
+
     // guards
     hasNoPathsSelected: React.State<boolean> = React.createProxyState(
         [this.selectedPaths],
@@ -72,6 +77,16 @@ export default class FileTransferViewModel extends Context {
         () =>
             this.exportKey.value == "" ||  this.exportKey.value != this.exportKeyConfirmation.value
     );
+    cannotImport: React.State<boolean> = React.createProxyState(
+        [this.importedFile],
+        () =>
+            this.importedFile.value == undefined
+    );
+    cannotDecryptImport: React.State<boolean> = React.createProxyState(
+        [this.importKey],
+        () =>
+            this.importKey.value == "" 
+    );
 
     // handlers
     handleReceivedFile = (path: string): void => {
@@ -130,6 +145,44 @@ export default class FileTransferViewModel extends Context {
 	anchor.click();
     }
 
+    updateImportSelection = (): void => {
+	const input = document.getElementById("file-transfer-input");
+	if (!input) return;
+	if (!(input instanceof HTMLInputElement)) return;
+
+	const file = input.files[0];
+	this.importedFile.value = file;
+    }
+
+    importFile = (): void => {
+	const file = this.importedFile.value;
+	if (!file) return;
+
+	const reader = new FileReader();
+	reader.readAsText(file, "utf8");
+	reader.onload = () => {
+	    const result = reader.result;
+	    this.importedFileString.value = result.toString();
+	    this.showImportDecryptDataModal();
+	}
+    }
+
+    decryptImport = async (): Promise<void> => {
+	const fileString = this.importedFileString.value;
+	const key = this.importKey.value;
+	if (!fileString || !key) return;
+
+	this.cannotDecryptImport.value = true;
+	try {
+	    await this.coreViewModel.fileTransferModel.handleBackupFile(fileString, key);
+	    window.location.reload();
+	} catch (e) {
+	    console.error(e);
+	    this.isImportKeyCorrect.value = false;
+	    this.cannotDecryptImport.value = false;
+	}
+    }
+
     // view
     showDirectionSelectionModal = (): void => {
 	this.coreViewModel.context = this;
@@ -155,7 +208,6 @@ export default class FileTransferViewModel extends Context {
 	this.coreViewModel.fileTransferModel.sendFiles(
 	    this.selectedPaths.value.values(),
 	    (path: string) => {
-                console.log(path);
 		this.filePathsSent.add(path);
 	    },
 	);
@@ -176,7 +228,11 @@ export default class FileTransferViewModel extends Context {
     };
 
     showImportModal = (): void => {
-        this.presentedModal.value = FileTransferModals.Import;
+	this.presentedModal.value = FileTransferModals.ImportSelection;
+    };
+
+    showImportDecryptDataModal = (): void => {
+	this.presentedModal.value = FileTransferModals.ImportDecryptData;
     };
 
     prepareReceivingData = (): void => {
@@ -239,5 +295,6 @@ export enum FileTransferModals {
 	// export
 	ExportFileSelection,
 	Export,
-    Import,
+	ImportSelection,
+	ImportDecryptData,
 }