add transfer option modal

src/View/Modals/onboardingModal.tsx

@@ -6,7 +6,8 @@ import OnboardingViewModel, {OnboardingModals} from "../../ViewModel/Global/onbo
 export function OnboardingModalWrapper(coreViewModel: CoreViewModel, onboardingViewModel: OnboardingViewModel) {
     return <div>
 	{ConnectionModal(coreViewModel, onboardingViewModel)}
-    </div>
+    {TransferModal(coreViewModel, onboardingViewModel)}
+</div>
 }
 
 function ConnectionModal(coreViewModel: CoreViewModel, onboardingViewModel: OnboardingViewModel) {
@@ -74,3 +75,60 @@ function ConnectionModal(coreViewModel: CoreViewModel, onboardingViewModel: Onbo
 	</div>
     </div>
 }
+
+function TransferModal(coreViewModel: CoreViewModel, onboardingViewModel: OnboardingViewModel) {
+    const isPresented = React.createProxyState(
+	[onboardingViewModel.presentedModal],
+	() =>
+	onboardingViewModel.presentedModal.value ==
+	OnboardingModals.TransferOrNew
+    );
+
+    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">
+		    <button
+			class="tile"
+			on:click={onboardingViewModel.transferData}
+			toggle:disabled={onboardingViewModel.cannotTransfer}
+		    >
+			<div>
+			    {coreViewModel.translations.onboarding.transferOptionTransfer}
+			</div>
+			<span class="icon">
+			    arrow_forward
+			</span>
+		    </button>
+		    <button
+			class="tile"
+			on:click={onboardingViewModel.setupNew}
+		    >
+			<div>
+			    {coreViewModel.translations.onboarding.transferOptionNew}
+			</div>
+			<span class="icon">
+			    arrow_forward
+			</span>
+		    </button>
+		</div>
+	    </main>
+	    <div class="flex-row">
+		<button
+		    class="primary width-50"
+		    on:click={onboardingViewModel.open}
+		>
+		    {coreViewModel.translations.general.backButton}
+		</button>
+	    </div>
+	</div>
+    </div>
+}

src/View/translations.ts

@@ -117,6 +117,13 @@ const englishTranslations = {
 	connectionDescription: "To transfer files and send messages, connect to the Universal Decentralized Network (UDN).",
 	connectButton: "Connect",
 	connectionNextButton: (isConnected: boolean) => isConnected ? "Continue" : "Continue without UDN",
+
+	///
+	
+	transferHeadline: "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.",
+	transferOptionTransfer: "Copy here",
+	transferOptionNew: "Set up as new device",
     },
 
     connectionModal: {

src/ViewModel/Global/onboardingViewModel.ts

@@ -8,6 +8,9 @@ export default class OnboardingViewModel {
     // state
     presentedModal: React.State<OnboardingModals | undefined> = new React.State<any>(undefined);
 
+    // guards
+    cannotTransfer: React.State<boolean> = React.createProxyState([this.connectionViewmodel.isConnected], ()=>!this.connectionViewmodel.isConnected.value)
+
     // navigation 
     open = (): void => {
 	this.presentedModal.value = OnboardingModals.Connection;
@@ -17,6 +20,17 @@ export default class OnboardingViewModel {
 	this.presentedModal.value = OnboardingModals.TransferOrNew;
     }
 
+    setupNew = (): void => {
+	this.presentedModal.value = OnboardingModals.Name;
+    }
+
+    // methods
+    transferData = (): void => {
+	this.fileTransferViewModel.showTransferDataInputModal();
+	this.presentedModal.value = undefined;
+    }
+
+    // init
     constructor(
 	public connectionViewmodel: ConnectionViewModel,
 	public fileTransferViewModel: FileTransferViewModel,