implement name setting in onboarding

src/View/Modals/onboardingModal.tsx

@@ -7,6 +7,7 @@ export function OnboardingModalWrapper(coreViewModel: CoreViewModel, onboardingV
     return <div>
 	{ConnectionModal(coreViewModel, onboardingViewModel)}
     {TransferModal(coreViewModel, onboardingViewModel)}
+    {NameModal(coreViewModel, onboardingViewModel)}
 </div>
 }
 
@@ -62,7 +63,7 @@ function ConnectionModal(coreViewModel: CoreViewModel, onboardingViewModel: Onbo
 	    <div class="flex-row justify-end">
 		<button
 		    class="primary width-50"
-		    on:click={onboardingViewModel.showTransfer}
+		    on:click={onboardingViewModel.showTransferOption}
 		>
 		    <span
 			subscribe:innerText={nextButton}
@@ -123,7 +124,7 @@ function TransferModal(coreViewModel: CoreViewModel, onboardingViewModel: Onboar
 	    </main>
 	    <div class="flex-row">
 		<button
-		    class="primary width-50"
+		    class="standard width-50"
 		    on:click={onboardingViewModel.open}
 		>
 		    {coreViewModel.translations.general.backButton}
@@ -132,3 +133,64 @@ function TransferModal(coreViewModel: CoreViewModel, onboardingViewModel: Onboar
 	</div>
     </div>
 }
+
+function NameModal(coreViewModel: CoreViewModel, onboardingViewModel: OnboardingViewModel) {
+    const isPresented = React.createProxyState(
+	[onboardingViewModel.presentedModal],
+	() =>
+	onboardingViewModel.presentedModal.value ==
+	OnboardingModals.Name
+    );
+
+    const settingsViewModel = onboardingViewModel.settingsViewModel;
+
+    return <div
+	class="modal"
+	toggle:open={isPresented}
+    >
+	<div>
+	    <main>
+		<h2>{coreViewModel.translations.onboarding.nameHeadline}</h2>
+		<p class="secondary width-input">{coreViewModel.translations.onboarding.nameDescription}</p>
+
+		<hr></hr>
+
+		<label class="tile flex-no">
+		    <span class="icon">account_circle</span>
+		    <div>
+			<span>
+			    {
+				coreViewModel.translations.settings.account
+				.yourNameLabel
+			    }
+			</span>
+			<input
+			    placeholder={
+				coreViewModel.translations.settings.account
+				.yourNamePlaceholder
+			    }
+			    bind:value={settingsViewModel.usernameInput}
+			></input>
+		    </div>
+		</label>
+	    </main>
+	    <div class="flex-row">
+		<button
+		    class="standard width-50"
+		    on:click={onboardingViewModel.showTransferOption}
+		>
+		    {coreViewModel.translations.general.backButton}
+		</button>
+		<button
+		    class="primary width-50"
+		    on:click={onboardingViewModel.finish}
+		>
+		    {coreViewModel.translations.general.setButton}
+		    <span class="icon">
+			arrow_forward
+		    </span>
+		</button>
+	    </div>
+	</div>
+    </div>
+}

src/View/translations.ts

@@ -124,6 +124,11 @@ const englishTranslations = {
 	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",
+
+	//
+	
+	nameHeadline: "Your Name",
+	nameDescription: "This is what others see when you send messages. You can always change your name in settings.",
     },
 
     connectionModal: {

src/ViewModel/Global/onboardingViewModel.ts

@@ -16,7 +16,7 @@ export default class OnboardingViewModel {
 	this.presentedModal.value = OnboardingModals.Connection;
     }
 
-    showTransfer = (): void => {
+    showTransferOption = (): void => {
 	this.presentedModal.value = OnboardingModals.TransferOrNew;
     }
 
@@ -30,6 +30,11 @@ export default class OnboardingViewModel {
 	this.presentedModal.value = undefined;
     }
 
+    finish = (): void => {
+	this.settingsViewModel.setName();
+	this.presentedModal.value = undefined;
+    }
+
     // init
     constructor(
 	public connectionViewmodel: ConnectionViewModel,