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",