implement data transfer on onboarding

src/View/Modals/dataTransferModal.tsx

@@ -616,7 +616,7 @@ function DataReceptionModal(
                     <button
                         class="flex"
                         on:click={
-                            fileTransferViewModel.showTransferDataInputModal
+                            fileTransferViewModel.correctTransferData
                         }
                         toggle:disabled={
                             fileTransferViewModel.cannotExitReception

src/View/Modals/onboardingModal.tsx

@@ -1,6 +1,7 @@
 import * as React from "../../react";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import OnboardingViewModel, {OnboardingModals} from "../../ViewModel/Global/onboardingViewModel";
+import {ViewController} from "../viewController";
 
 // MAIN
 export function OnboardingModalWrapper(coreViewModel: CoreViewModel, onboardingViewModel: OnboardingViewModel) {
@@ -8,6 +9,7 @@ export function OnboardingModalWrapper(coreViewModel: CoreViewModel, onboardingV
 	{ConnectionModal(coreViewModel, onboardingViewModel)}
     {TransferModal(coreViewModel, onboardingViewModel)}
     {NameModal(coreViewModel, onboardingViewModel)}
+    {TransferDataModal(coreViewModel, onboardingViewModel)}
 </div>
 }
 
@@ -91,15 +93,15 @@ function TransferModal(coreViewModel: CoreViewModel, onboardingViewModel: Onboar
     >
 	<div>
 	    <main>
-		<h2>{coreViewModel.translations.onboarding.transferHeadline}</h2>
+		<h2>{coreViewModel.translations.onboarding.transferOptionsHeadline}</h2>
-		<p class="secondary width-input">{coreViewModel.translations.onboarding.transferDescription}</p>
+		<p class="secondary width-input">{coreViewModel.translations.onboarding.transferOptionsDescription}</p>
 
 		<hr></hr>
 
 		<div class="flex-column gap">
 		    <button
 			class="tile"
-			on:click={onboardingViewModel.transferData}
+			on:click={onboardingViewModel.showTransferData}
 			toggle:disabled={onboardingViewModel.cannotTransfer}
 		    >
 			<div>
@@ -194,3 +196,91 @@ function NameModal(coreViewModel: CoreViewModel, onboardingViewModel: Onboarding
 	</div>
     </div>
 }
+
+function TransferDataModal(coreViewModel: CoreViewModel, onboardingViewModel: OnboardingViewModel) {
+    const isPresented = React.createProxyState(
+	[onboardingViewModel.presentedModal],
+	() =>
+	onboardingViewModel.presentedModal.value ==
+	OnboardingModals.Transfer
+    );
+
+    const fileTransferViewModel = onboardingViewModel.fileTransferViewModel;
+
+    return <div
+	class="modal"
+	toggle:open={isPresented}
+    >
+	<div>
+	    <main>
+		<h2>{coreViewModel.translations.onboarding.transferHeadline}</h2>
+		<p class="secondary width-input">{coreViewModel.translations.onboarding.transferDescription}</p>
+
+		<hr></hr>
+
+                    <div class="flex-column gap content-margin-bottom">
+                        <label class="tile">
+                            <span class="icon">forum</span>
+                            <div>
+                                <span class="secondary">
+                                    {
+                                        coreViewModel.translations
+                                            .dataTransferModal
+                                            .transferChannelHeadline
+                                    }
+                                </span>
+                                <input
+                                    type="number"
+                                    on:enter={
+                                        fileTransferViewModel.prepareReceivingData
+                                    }
+                                    bind:value={
+                                        fileTransferViewModel.receivingTransferChannel
+                                    }
+                                ></input>
+                            </div>
+                        </label>
+                        <label class="tile">
+                            <span class="icon">key</span>
+                            <div>
+                                <span class="secondary">
+                                    {
+                                        coreViewModel.translations
+                                            .dataTransferModal
+                                            .transferKeyHeadline
+                                    }
+                                </span>
+                                <input
+                                    type="number"
+                                    on:enter={
+                                        fileTransferViewModel.prepareReceivingData
+                                    }
+                                    bind:value={
+                                        fileTransferViewModel.receivingTransferKey
+                                    }
+                                ></input>
+                            </div>
+                        </label>
+                    </div>
+	    </main>
+	    <div class="flex-row">
+		<button
+		    class="standard width-50"
+		    on:click={onboardingViewModel.showTransferOption}
+		    toggle:disabled={fileTransferViewModel.cannotExitReception}
+		>
+		    {coreViewModel.translations.general.backButton}
+		</button>
+		<button
+		    class="primary width-50"
+		    on:click={onboardingViewModel.transferData}
+		>
+		    {coreViewModel.translations.onboarding.transferButton}
+		    <span class="icon">
+			check
+		    </span>
+		</button>
+	    </div>
+	</div>
+    </div>
+}

src/View/translations.ts

@@ -120,8 +120,8 @@ const englishTranslations = {
 
 	///
 	
-	transferHeadline: "Copy Your Data",
+	transferOptionsHeadline: "Copy Your Data",
-	transferDescription: "If you already use the Coordination Tool on another device, copy your identity here. You can use both devices at the same time.",
+	transferOptionsDescription: "If you already use the Coordination Tool on another device, copy your identity here. You can use both devices at the same time.",
 	transferOptionTransfer: "Copy here",
 	transferOptionNew: "Set up as new device",
 
@@ -129,6 +129,12 @@ const englishTranslations = {
 	
 	nameHeadline: "Your Name",
 	nameDescription: "This is what others see when you send messages. You can always change your name in settings.",
+
+	//
+	
+	transferHeadline: "Data Transfer",
+	transferDescription: 'On your other device, prepare to transfer your identity and personal data alongside any chats you wish to copy. Then, enter the displayed data here.',
+	transferButton: "Copy data",
     },
 
     connectionModal: {

src/ViewModel/Global/fileTransferViewModel.ts

@@ -11,6 +11,8 @@ import ChatModel from "../../Model/Chat/chatModel";
 
 export default class FileTransferViewModel extends Context {
     // state
+    exitReception: ()=>void|undefined = undefined;
+    
     presentedModal: React.State<FileTransferModals | undefined> =
         new React.State<any>(undefined);
 
@@ -216,6 +218,15 @@ export default class FileTransferViewModel extends Context {
         this.coreViewModel.fileTransferModel.prepareToSend();
     };
 
+    correctTransferData = (): void => {
+	if (this.exitReception != undefined) {
+	    this.presentedModal.value = undefined;
+	    this.exitReception();
+	    return;
+	}
+	this.showTransferDataInputModal()
+    }
+
     initiateTransfer = (): void => {
         this.presentedModal.value = FileTransferModals.TransferDisplay;
         this.didNotFinishSending.value = true;

src/ViewModel/Global/onboardingViewModel.ts

@@ -23,10 +23,15 @@ export default class OnboardingViewModel {
     setupNew = (): void => {
 	this.presentedModal.value = OnboardingModals.Name;
     }
+    
+    showTransferData = (): void => {
+	this.presentedModal.value = OnboardingModals.Transfer;
+    }
 
     // methods
     transferData = (): void => {
-	this.fileTransferViewModel.showTransferDataInputModal();
+	this.fileTransferViewModel.exitReception = ()=>this.showTransferData();
+	this.fileTransferViewModel.prepareReceivingData();
 	this.presentedModal.value = undefined;
     }
 
@@ -48,5 +53,6 @@ export default class OnboardingViewModel {
 export enum OnboardingModals {
     Connection,
     TransferOrNew,
-    Name
+    Name,
+    Transfer,
 }