feat: Add forced login page to Onboarding

apps/frontend/src/ui/pages/onboarding/Onboarding.tsx

@@ -10,6 +10,7 @@ import { type Accessor, type Context, createContext, createEffect, createSignal,
 import OnboardingComplete from './OnboardingComplete';
 import OnboardingImport from './OnboardingImport';
 import OnboardingLanguage, { type Language, LanguagesList } from './OnboardingLanguage';
+import OnboardingLogin from './OnboardingLogin';
 import OnboardingSummary from './OnboardingSummary';
 import OnboardingWelcome from './OnboardingWelcome';
 
@@ -18,6 +19,7 @@ const OnboardingSteps = [
 	['/', OnboardingWelcome],
 
 	['/language', OnboardingLanguage],
+	['/login', OnboardingLogin],
 	['/import', OnboardingImport],
 
 	['/summary', OnboardingSummary], // Second to last will always be the summary (which is basically a confirmation for all the tasks that are about to be done)
@@ -45,6 +47,8 @@ interface OnboardingContextType {
 	setImportInstances: (type: ImportType, basePath: string, instances: string[]) => void;
 	importInstances: (type: ImportType) => ImportInstancesType | undefined;
 
+	setForwardButtonEnabled: (enabled: boolean) => void;
+
 	getTasks: () => string[];
 
 	tasksStage: Accessor<OnboardingTaskStage>;
@@ -74,6 +78,7 @@ function Onboarding(props: ParentProps) {
 
 	createEffect(on(() => location.pathname, () => {
 		setBackButtonEnabled(step() > 0 && !tasksCompleted());
+		setForwardButtonEnabled(step() < OnboardingSteps.length - 1 && !tasksCompleted());
 	}));
 
 	useBeforeLeave((e) => {
@@ -188,6 +193,8 @@ function Onboarding(props: ParentProps) {
 
 		getTasks,
 
+		setForwardButtonEnabled,
+
 		tasksStage,
 		tasksMessage,
 	};

apps/frontend/src/ui/pages/onboarding/OnboardingComplete.tsx

@@ -1,4 +1,13 @@
+import { onMount } from 'solid-js';
+import Onboarding from './Onboarding';
+
 function OnboardingComplete() {
+	const context = Onboarding.useContext();
+
+	onMount(() => {
+		context.setForwardButtonEnabled(true);
+	});
+
 	return (
 		<div class="grid grid-cols-2 h-full w-full flex flex-col items-center justify-center gap-x-16">
 			<h1 class="text-6xl">

apps/frontend/src/ui/pages/onboarding/OnboardingLogin.tsx

@@ -0,0 +1,69 @@
+import type { MinecraftCredentials } from '@onelauncher/client/bindings';
+import MicrosoftLogo from '~assets/logos/microsoft.svg?component-solid';
+import { bridge } from '~imports';
+import Button from '~ui/components/base/Button';
+import PlayerHead from '~ui/components/game/PlayerHead';
+import useAccountController from '~ui/components/overlay/account/AddAccountModal';
+import { createSignal, onMount, Show } from 'solid-js';
+import Onboarding from './Onboarding';
+
+function OnboardingLogin() {
+	const context = Onboarding.useContext();
+	const accountController = useAccountController();
+
+	const [errorMessage, setErrorMessage] = createSignal<string>('');
+	const [profile, setProfile] = createSignal<MinecraftCredentials>();
+
+	onMount(() => {
+		context.setForwardButtonEnabled(false);
+	});
+
+	async function requestLogin() {
+		const result = await bridge.commands.authLogin();
+
+		if (result.status === 'error') {
+			setErrorMessage(result.error);
+			return;
+		}
+
+		if (!result.data) {
+			setErrorMessage('No account was found. Please try again.');
+			return;
+		}
+
+		setProfile(result.data);
+		accountController.refetch();
+
+		context.setForwardButtonEnabled(true);
+	}
+
+	return (
+		<div class="grid grid-cols-2 h-full w-full flex flex-col items-start justify-center gap-x-16 gap-y-4">
+			<h1 class="text-6xl -mb-2">Login</h1>
+
+			<h3>Before you continue, we require you to own a copy of Minecraft: Java Edition.</h3>
+
+			<Show when={profile()}>
+				<div class="w-full flex flex-row items-center justify-start gap-x-3 border border-border/05 rounded-lg bg-component-bg p-3">
+					<PlayerHead class="rounded-md" uuid={profile()?.id} />
+					<div class="flex flex-col gap-y-2">
+						<p class="text-lg text-fg-primary">{profile()?.username}</p>
+						<p class="text-fg-secondary">{profile()?.id}</p>
+					</div>
+				</div>
+			</Show>
+
+			<Button
+				buttonStyle="secondary"
+				children="Login with Microsoft"
+				iconLeft={<MicrosoftLogo />}
+				onClick={requestLogin}
+			/>
+
+			<p class="text-danger">{errorMessage()}</p>
+
+		</div>
+	);
+}
+
+export default OnboardingLogin;