start onboarding, implement connection

src/View/Modals/onboardingModal.tsx

@@ -0,0 +1,76 @@
+import * as React from "../../react";
+import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import OnboardingViewModel, {OnboardingModals} from "../../ViewModel/Global/onboardingViewModel";
+
+// MAIN
+export function OnboardingModalWrapper(coreViewModel: CoreViewModel, onboardingViewModel: OnboardingViewModel) {
+    return <div>
+	{ConnectionModal(coreViewModel, onboardingViewModel)}
+    </div>
+}
+
+function ConnectionModal(coreViewModel: CoreViewModel, onboardingViewModel: OnboardingViewModel) {
+    const isPresented = React.createProxyState(
+	[onboardingViewModel.presentedModal],
+	() =>
+	onboardingViewModel.presentedModal.value ==
+	OnboardingModals.Connection
+    );
+
+    const connectionViewModel = onboardingViewModel.connectionViewmodel;
+
+    const nextButton = React.createProxyState([connectionViewModel.isConnected], ()=>coreViewModel.translations.onboarding.connectionNextButton(connectionViewModel.isConnected.value));
+
+    return <div
+	class="modal"
+	toggle:open={isPresented}
+    >
+	<div>
+	    <main>
+		<h2>{coreViewModel.translations.onboarding.connectionHeadline}</h2>
+		<p class="secondary width-input">{coreViewModel.translations.onboarding.connectionDescription}</p>
+
+		<hr></hr>
+
+		<label class="tile flex-no">
+		    <span class="icon">cell_tower</span>
+		    <div>
+			<span>
+			    {coreViewModel.translations.homePage.serverAddress}
+			</span>
+			<input
+			    placeholder={
+				coreViewModel.translations.homePage
+				.serverAddressPlaceholder
+			    }
+			    bind:value={connectionViewModel.serverAddressInput}
+			    on:enter={connectionViewModel.connect}
+			></input>
+		    </div>
+		</label>
+		<div class="flex-row width-input justify-end">
+		    <button
+			class="standard width-50"
+			on:click={connectionViewModel.connect}
+			toggle:disabled={connectionViewModel.cannotConnect}
+		    >
+			{coreViewModel.translations.onboarding.connectButton}
+		    </button>
+		</div>
+	    </main>
+	    <div class="flex-row justify-end">
+		<button
+		    class="primary width-50"
+		    on:click={onboardingViewModel.showTransfer}
+		>
+		    <span
+			subscribe:innerText={nextButton}
+		    ></span>
+		    <span class="icon">
+			arrow_forward
+		    </span>
+		</button>
+	    </div>
+	</div>
+    </div>
+}

src/View/translations.ts

@@ -112,6 +112,13 @@ const englishTranslations = {
         },
     },
 
+    onboarding: {
+	connectionHeadline: "Connect to UDN",
+	connectionDescription: "To transfer files and send messages, connect to the Universal Decentralized Network (UDN).",
+	connectButton: "Connect",
+	connectionNextButton: (isConnected: boolean) => isConnected ? "Continue" : "Continue without UDN",
+    },
+
     connectionModal: {
         connectionModalHeadline: "Manage Connections",
 

src/ViewModel/Global/onboardingViewModel.ts

@@ -0,0 +1,33 @@
+import CoreViewModel from "./coreViewModel";
+import * as React from "../../react";
+import FileTransferViewModel from "./fileTransferViewModel";
+import ConnectionViewModel from "./connectionViewModel";
+import SettingsViewModel from "./settingsViewModel";
+
+export default class OnboardingViewModel {
+    // state
+    presentedModal: React.State<OnboardingModals | undefined> = new React.State<any>(undefined);
+
+    // navigation 
+    open = (): void => {
+	this.presentedModal.value = OnboardingModals.Connection;
+    }
+
+    showTransfer = (): void => {
+	this.presentedModal.value = OnboardingModals.TransferOrNew;
+    }
+
+    constructor(
+	public connectionViewmodel: ConnectionViewModel,
+	public fileTransferViewModel: FileTransferViewModel,
+	public settingsViewModel: SettingsViewModel,
+    ) {
+	if (this.settingsViewModel.settingsModel.username == "") this.open();
+    }
+}
+
+export enum OnboardingModals {
+    Connection,
+    TransferOrNew,
+    Name
+}

src/index.tsx

@@ -22,6 +22,8 @@ import FileTransferModel from "./Model/Global/fileTransferModel";
 import ContactListModel from "./Model/Global/contactListModel";
 import ConnectionModel from "./Model/Global/connectionModel";
 import ChatListModel from "./Model/Chat/chatListModel";
+import OnboardingViewModel from "./ViewModel/Global/onboardingViewModel";
+import {OnboardingModalWrapper} from "./View/Modals/onboardingModal";
 
 // models
 const storageModel = new StorageModel();
@@ -59,6 +61,7 @@ const chatListViewModel = new ChatListViewModel(
     contactListViewModel,
 );
 const fileTransferViewModel = new FileTransferViewModel(coreViewModel);
+const onboardingViewModel = new OnboardingViewModel(connectionViewModel, fileTransferViewModel, settingsViewModel);
 
 const homeViewModel = new HomeViewModel(
     coreViewModel,
@@ -94,7 +97,8 @@ document
             fileTransferViewModel,
             chatListViewModel,
         ),
-        ChatPageWrapper(coreViewModel, chatListViewModel),
+	ChatPageWrapper(coreViewModel, chatListViewModel),
+	OnboardingModalWrapper(coreViewModel, onboardingViewModel),
         ConnectionModal(coreViewModel, connectionViewModel),
         DataTransferModalWrapper(
             coreViewModel,
@@ -102,5 +106,5 @@ document
             fileTransferViewModel,
         ),
         StorageModal(coreViewModel, storageViewModel),
-        SettingsModal(coreViewModel, settingsViewModel),
+	SettingsModal(coreViewModel, settingsViewModel),
     );