@vibesdotdev/auth 0.0.0-stage → 1.0.0-rc.4

package/dist/svelte/components/SignUpForm.svelte

@@ -0,0 +1,437 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import { Checkbox } from '@vibesdotdev/kit/components/ui/checkbox';
+	import { loadAuthComponentLogger } from '../component-logging.js';
+	import { failureMessage } from '@vibesdotdev/auth/api';
+	import { attempt, failureLabel, failureStatus } from '../outcome.js';
+	
+	import { getVibesClient } from '@vibesdotdev/kernel/client';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import {
+		type AuthApiClient,
+		type AuthProviderConfig,
+		type AuthProviderId,
+		type AuthSession
+	} from '@vibesdotdev/auth/api';
+	import PasswordStrengthMeter from './PasswordStrengthMeter.svelte';
+	import { evaluatePassword } from '../password';
+	import type { PolicyDefinition, PolicyAcceptance, SignUpSuccessDetail } from '../types';
+	import { navigateAuth, type AuthNavigate } from '../navigation-effect.js';
+
+	type Props = {
+		providers?: AuthProviderConfig[];
+		redirectTo?: string;
+		/**
+		 * Override the resolved client. Tests inject a stub here; production
+		 * callers leave this unset so the canonical `AuthApiClient` is resolved
+		 * via `getVibesClient('auth', runtime)`.
+		 */
+		client?: AuthApiClient;
+		showEmail?: boolean;
+		title?: string;
+		description?: string;
+		/** Legacy single-policy props. Used as a fallback if `policies` is empty. */
+		termsHref?: string;
+		privacyHref?: string;
+		/** Multi-policy capture. Each required policy must be checked to enable submit. */
+		policies?: PolicyDefinition[];
+		/**
+		 * Opaque client identifier propagated through cross-app handoff. Posted
+		 * as a hidden field; used by the server to scope policy acceptances.
+		 */
+		clientContext?: string | null;
+		/**
+		 * Invoked after a successful sign-up. The caller is responsible for
+		 * forwarding `policyAcceptances` to its server-side `recordPolicyAcceptances`
+		 * helper if needed.
+		 */
+		onSuccess?: (detail: SignUpSuccessDetail) => void;
+		onError?: (message: string) => void;
+		/** Host-owned browser navigation effect. Defaults to a full-page navigation. */
+		navigate?: AuthNavigate;
+	};
+
+	// Captured at component init (context is only readable during init); resolved via load().
+	const runtimeStore = getRuntimeSvelteContext();
+
+	let props: Props = $props();
+
+	const providersValue = $derived<AuthProviderConfig[]>(props.providers ?? []);
+	const showEmailValue = $derived(props.showEmail ?? true);
+	const titleValue = $derived(props.title ?? 'Create your account');
+	const descriptionValue = $derived(props.description ?? 'Sign up to continue.');
+
+	async function resolveClient(): Promise<AuthApiClient> {
+		if (props.client) return props.client;
+		const client = await getVibesClient<AuthApiClient>('auth', await runtimeStore.load());
+		await client.ensureLoaded();
+		return client;
+	}
+
+	const policies = $derived<PolicyDefinition[]>(props.policies ?? []);
+	const hasExplicitPolicies = $derived(policies.length > 0);
+
+	let name = $state('');
+	let email = $state('');
+	let password = $state('');
+	let confirmPassword = $state('');
+	let acceptedTerms = $state(false);
+	let showPassword = $state(false);
+	let showConfirmPassword = $state(false);
+	let policyAcceptedById = $state<Record<string, boolean>>({});
+	let busyEmail = $state(false);
+	let busyProvider = $state<AuthProviderId | null>(null);
+	let formError = $state<string | null>(null);
+
+	const passwordInputType = $derived(showPassword ? 'text' : 'password');
+	const confirmPasswordInputType = $derived(showConfirmPassword ? 'text' : 'password');
+
+	const passwordStrength = $derived(evaluatePassword(password));
+	const passwordsMatch = $derived(password === confirmPassword);
+	const passwordValid = $derived(
+		passwordStrength.hasLength &&
+			passwordStrength.hasUppercase &&
+			passwordStrength.hasLowercase &&
+			passwordStrength.hasDigit
+	);
+
+	const allRequiredPoliciesAccepted = $derived.by(() => {
+		if (!hasExplicitPolicies) return acceptedTerms;
+		return policies.filter((p) => p.required).every((p) => policyAcceptedById[p.id] === true);
+	});
+
+	const submitDisabled = $derived(
+		busyEmail || !allRequiredPoliciesAccepted || !passwordsMatch || !passwordValid
+	);
+
+	const logger = () => loadAuthComponentLogger('auth.signup', runtimeStore);
+
+	function collectPolicyAcceptances(): PolicyAcceptance[] {
+		if (!hasExplicitPolicies) return [];
+		return policies
+			.filter((p) => policyAcceptedById[p.id] === true)
+			.map((p) => ({ policyId: p.id, version: p.version }));
+	}
+
+	async function submitEmail(event: SubmitEvent) {
+		event.preventDefault();
+		if (busyEmail) return;
+		formError = null;
+		if (!email || !password) {
+			formError = 'Email and password are required.';
+			return;
+		}
+		if (!passwordsMatch) {
+			formError = 'Passwords do not match.';
+			return;
+		}
+		if (!passwordValid) {
+			formError = 'Password must be at least 8 characters with uppercase, lowercase, and a number.';
+			return;
+		}
+		if (!allRequiredPoliciesAccepted) {
+			formError = hasExplicitPolicies
+				? 'Please accept all required policies before continuing.'
+				: 'You must accept the terms of service to continue.';
+			return;
+		}
+		busyEmail = true;
+		const policyAcceptances = collectPolicyAcceptances();
+		(await logger()).info('Email sign-up submitted', {
+			policyCount: policyAcceptances.length
+		});
+		const signedUp = await attempt(async () => {
+			const client = await resolveClient();
+			const session = await client.signUpEmail({
+				email,
+				password,
+				name: name.trim() || undefined
+			});
+			(await logger()).info('Email sign-up succeeded', { userId: session.user?.id ?? null });
+			props.onSuccess?.({ session, policyAcceptances });
+			if (props.redirectTo) navigateAuth(props.navigate, props.redirectTo);
+		});
+		if (!signedUp.ok) {
+			const message = failureMessage(signedUp.failure, 'Sign-up failed');
+			(await logger()).warn('Email sign-up failed', {
+				failure: failureLabel(signedUp.failure),
+				status: failureStatus(signedUp.failure)
+			});
+			formError = message;
+			props.onError?.(message);
+		}
+		busyEmail = false;
+	}
+
+	async function startProvider(provider: AuthProviderConfig) {
+		if (busyProvider) return;
+		if (!allRequiredPoliciesAccepted) {
+			formError = hasExplicitPolicies
+				? 'Please accept all required policies before continuing.'
+				: 'You must accept the terms of service to continue.';
+			return;
+		}
+		busyProvider = provider.id;
+		(await logger()).info('Provider sign-up started', { providerId: provider.id });
+		const started = await attempt(async () => {
+			const client = await resolveClient();
+			const href = client.providerSignUpUrl(provider.id, {
+				redirectTo: props.redirectTo,
+				signUpPath: provider.signUpPath
+			});
+			navigateAuth(props.navigate, href);
+		});
+		if (!started.ok) {
+			const message = failureMessage(started.failure, 'Failed to start provider sign-up');
+			(await logger()).warn('Provider sign-up start failed', {
+				providerId: provider.id,
+				failure: failureLabel(started.failure)
+			});
+			busyProvider = null;
+			formError = message;
+			props.onError?.(message);
+		}
+	}
+</script>
+
+<section class="auth-signup flex flex-col gap-4">
+	<header>
+		<h1 class="text-xl font-semibold">{titleValue}</h1>
+		<p class="text-sm text-muted-foreground">{descriptionValue}</p>
+	</header>
+
+	{#if showEmailValue}
+		<form class="flex flex-col gap-3" onsubmit={submitEmail}>
+			{#if props.clientContext}
+				<input type="hidden" name="client" value={props.clientContext} />
+			{/if}
+			{#if props.redirectTo}
+				<input type="hidden" name="redirectTo" value={props.redirectTo} />
+			{/if}
+
+			<div class="grid gap-1.5">
+				<Label for="auth-signup-name">Name (optional)</Label>
+				<Input id="auth-signup-name" name="name" autocomplete="name" bind:value={name} />
+			</div>
+
+			<div class="grid gap-1.5">
+				<Label for="auth-signup-email">Email</Label>
+				<Input
+					id="auth-signup-email"
+					name="email"
+					type="email"
+					autocomplete="email"
+					bind:value={email}
+					required
+				/>
+			</div>
+
+			<div class="grid gap-1.5">
+				<Label for="auth-signup-password">Password</Label>
+				<div class="relative">
+					<Input
+						id="auth-signup-password"
+						name="password"
+						type={passwordInputType}
+						autocomplete="new-password"
+						bind:value={password}
+						required
+						minlength={8}
+						class="pr-10"
+					/>
+					<Button
+						type="button"
+						variant="ghost"
+						size="icon"
+						class="text-muted-foreground absolute top-1/2 right-1 h-8 w-8 -translate-y-1/2"
+						onclick={() => (showPassword = !showPassword)}
+						aria-label={showPassword ? 'Hide password' : 'Show password'}
+					>
+						<Icon icon={showPassword ? 'lucide:eye-off' : 'lucide:eye'} class="h-4 w-4" />
+					</Button>
+				</div>
+				{#if password && !passwordValid}
+					<p class="text-destructive text-xs">
+						Password must be at least 8 characters with uppercase, lowercase, and a number.
+					</p>
+				{/if}
+				<PasswordStrengthMeter value={password} />
+			</div>
+
+			<div class="grid gap-1.5">
+				<Label for="auth-signup-confirm-password">Confirm password</Label>
+				<div class="relative">
+					<Input
+						id="auth-signup-confirm-password"
+						name="confirmPassword"
+						type={confirmPasswordInputType}
+						autocomplete="new-password"
+						bind:value={confirmPassword}
+						required
+						class="pr-10"
+					/>
+					<Button
+						type="button"
+						variant="ghost"
+						size="icon"
+						class="text-muted-foreground absolute top-1/2 right-1 h-8 w-8 -translate-y-1/2"
+						onclick={() => (showConfirmPassword = !showConfirmPassword)}
+						aria-label={showConfirmPassword
+							? 'Hide confirmation password'
+							: 'Show confirmation password'}
+					>
+						<Icon icon={showConfirmPassword ? 'lucide:eye-off' : 'lucide:eye'} class="h-4 w-4" />
+					</Button>
+				</div>
+				{#if confirmPassword && !passwordsMatch}
+					<p class="text-destructive text-xs">Passwords do not match.</p>
+				{/if}
+			</div>
+
+			{#if hasExplicitPolicies}
+				<div class="flex flex-col gap-2">
+					{#each policies as policy (policy.id)}
+						<label class="flex items-start gap-2 text-sm">
+							<Checkbox
+								id={`auth-signup-policy-${policy.id}`}
+								bind:checked={policyAcceptedById[policy.id]}
+							/>
+							<span>
+								<a
+									href={policy.href}
+									rel="noopener noreferrer"
+									target="_blank"
+									class="text-primary underline"
+								>
+									{policy.label}
+								</a>
+								{#if policy.required}
+									<span aria-label="required" class="text-destructive"> *</span>
+								{/if}
+								<span class="text-muted-foreground block text-xs">v{policy.version}</span>
+							</span>
+						</label>
+					{/each}
+				</div>
+				<input
+					type="hidden"
+					name="policyAcceptances"
+					value={JSON.stringify(collectPolicyAcceptances())}
+				/>
+			{:else}
+				<label class="flex items-start gap-2 text-sm">
+					<Checkbox bind:checked={acceptedTerms} id="auth-signup-terms" />
+					<span>
+						I agree to the
+						{#if props.termsHref}
+							<a class="underline" href={props.termsHref} rel="noopener noreferrer" target="_blank">
+								terms of service
+							</a>
+						{:else}
+							terms of service
+						{/if}
+						{#if props.privacyHref}
+							and
+							<a
+								class="underline"
+								href={props.privacyHref}
+								rel="noopener noreferrer"
+								target="_blank"
+							>
+								privacy policy
+							</a>
+						{/if}
+						.
+					</span>
+				</label>
+			{/if}
+
+			{#if formError}
+				<p class="text-sm text-destructive" role="alert">{formError}</p>
+			{/if}
+
+			<Button type="submit" disabled={submitDisabled}>
+				{busyEmail ? 'Creating account…' : 'Create account'}
+			</Button>
+		</form>
+	{:else if hasExplicitPolicies}
+		<div class="flex flex-col gap-2">
+			{#each policies as policy (policy.id)}
+				<label class="flex items-start gap-2 text-sm">
+					<Checkbox
+						id={`auth-signup-policy-${policy.id}`}
+						bind:checked={policyAcceptedById[policy.id]}
+					/>
+					<span>
+						<a
+							href={policy.href}
+							rel="noopener noreferrer"
+							target="_blank"
+							class="text-primary underline"
+						>
+							{policy.label}
+						</a>
+						{#if policy.required}
+							<span aria-label="required" class="text-destructive"> *</span>
+						{/if}
+					</span>
+				</label>
+			{/each}
+		</div>
+		{#if formError}
+			<p class="text-sm text-destructive" role="alert">{formError}</p>
+		{/if}
+	{:else}
+		<label class="flex items-start gap-2 text-sm">
+			<Checkbox bind:checked={acceptedTerms} id="auth-signup-terms" />
+			<span>
+				I agree to the
+				{#if props.termsHref}
+					<a class="underline" href={props.termsHref} rel="noopener noreferrer" target="_blank">
+						terms of service
+					</a>
+				{:else}
+					terms of service
+				{/if}
+				{#if props.privacyHref}
+					and
+					<a class="underline" href={props.privacyHref} rel="noopener noreferrer" target="_blank">
+						privacy policy
+					</a>
+				{/if}
+				.
+			</span>
+		</label>
+		{#if formError}
+			<p class="text-sm text-destructive" role="alert">{formError}</p>
+		{/if}
+	{/if}
+
+	{#if providersValue.length > 0}
+		{#if showEmailValue}
+			<div class="relative my-1 flex items-center" aria-hidden="true">
+				<span class="flex-1 border-t"></span>
+				<span class="mx-3 text-xs uppercase text-muted-foreground">or</span>
+				<span class="flex-1 border-t"></span>
+			</div>
+		{/if}
+
+		<div class="flex flex-col gap-2">
+			{#each providersValue as provider (provider.id)}
+				<Button
+					variant="outline"
+					onclick={() => startProvider(provider)}
+					disabled={busyProvider !== null}
+				>
+					{#if provider.icon}
+						<Icon icon={provider.icon} class="mr-2 h-4 w-4" />
+					{/if}
+					{busyProvider === provider.id ? `Redirecting to ${provider.label}…` : provider.label}
+				</Button>
+			{/each}
+		</div>
+	{/if}
+</section>

package/dist/svelte/components/SignUpForm.svelte.d.ts

@@ -0,0 +1,39 @@
+import { type AuthApiClient, type AuthProviderConfig } from '@vibesdotdev/auth/api';
+import type { PolicyDefinition, SignUpSuccessDetail } from '../types';
+import { type AuthNavigate } from '../navigation-effect.ts';
+type Props = {
+    providers?: AuthProviderConfig[];
+    redirectTo?: string;
+    /**
+     * Override the resolved client. Tests inject a stub here; production
+     * callers leave this unset so the canonical `AuthApiClient` is resolved
+     * via `getVibesClient('auth', runtime)`.
+     */
+    client?: AuthApiClient;
+    showEmail?: boolean;
+    title?: string;
+    description?: string;
+    /** Legacy single-policy props. Used as a fallback if `policies` is empty. */
+    termsHref?: string;
+    privacyHref?: string;
+    /** Multi-policy capture. Each required policy must be checked to enable submit. */
+    policies?: PolicyDefinition[];
+    /**
+     * Opaque client identifier propagated through cross-app handoff. Posted
+     * as a hidden field; used by the server to scope policy acceptances.
+     */
+    clientContext?: string | null;
+    /**
+     * Invoked after a successful sign-up. The caller is responsible for
+     * forwarding `policyAcceptances` to its server-side `recordPolicyAcceptances`
+     * helper if needed.
+     */
+    onSuccess?: (detail: SignUpSuccessDetail) => void;
+    onError?: (message: string) => void;
+    /** Host-owned browser navigation effect. Defaults to a full-page navigation. */
+    navigate?: AuthNavigate;
+};
+declare const SignUpForm: import("svelte").Component<Props, {}, "">;
+type SignUpForm = ReturnType<typeof SignUpForm>;
+export default SignUpForm;
+//# sourceMappingURL=SignUpForm.svelte.d.ts.map

package/dist/svelte/components/SignUpForm.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignUpForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SignUpForm.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,kBAAkB,EAGvB,MAAM,uBAAuB,CAAC;AAGhC,OAAO,KAAK,EAAE,gBAAgB,EAAoB,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACxF,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGzE,KAAK,KAAK,GAAG;IACZ,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AA2UH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/mfa-setup/CompleteStep.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import type { CompleteStepProps } from './schemas';
+
+	let { onDone }: CompleteStepProps = $props();
+</script>
+
+<div class="space-y-4 text-center">
+	<div
+		class="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground"
+	>
+		<Icon icon="lucide:check" class="size-6" aria-hidden="true" />
+	</div>
+	<h3 class="text-xl font-semibold">Two-Factor Authentication Enabled!</h3>
+	<p class="text-muted-foreground">
+		Two-factor authentication has been enabled for your account. Your account is now more secure.
+	</p>
+
+	<div class="mt-6 flex justify-center">
+		<Button type="button" onclick={() => onDone?.()}>Done</Button>
+	</div>
+</div>

package/dist/svelte/components/mfa-setup/CompleteStep.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { CompleteStepProps } from './schemas';
+declare const CompleteStep: import("svelte").Component<CompleteStepProps, {}, "">;
+type CompleteStep = ReturnType<typeof CompleteStep>;
+export default CompleteStep;
+//# sourceMappingURL=CompleteStep.svelte.d.ts.map

package/dist/svelte/components/mfa-setup/CompleteStep.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompleteStep.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/mfa-setup/CompleteStep.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AA0BnD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/mfa-setup/PasswordStep.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Field, FieldError } from '@vibesdotdev/kit/components/ui/field';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import type { PasswordStepProps } from './schemas';
+
+	let {
+		password,
+		passwordError = null,
+		isGenerating,
+		onPasswordInput,
+		onCancel,
+		onSubmit
+	}: PasswordStepProps = $props();
+	const instanceId = $props.id();
+	const inputId = `${instanceId}-password`;
+
+	function handlePasswordInput(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		onPasswordInput?.(event.currentTarget.value);
+	}
+</script>
+
+<div class="space-y-4">
+	<h3 class="text-xl font-semibold">Step 1: Confirm Your Password</h3>
+	<p class="text-muted-foreground text-sm">
+		Please enter your password to continue with two-factor setup.
+	</p>
+
+	<form
+		onsubmit={(event) => {
+			event.preventDefault();
+			onSubmit?.();
+		}}
+		class="space-y-4"
+	>
+		<Field>
+			<Label for={inputId}>Password</Label>
+			<Input
+				id={inputId}
+				type="password"
+				value={password}
+				oninput={handlePasswordInput}
+				aria-invalid={Boolean(passwordError)}
+				required
+				autocomplete="current-password"
+			/>
+			{#if passwordError}
+				<FieldError>{passwordError}</FieldError>
+			{/if}
+		</Field>
+
+		<div class="mt-6 flex justify-end gap-2">
+			<Button type="button" variant="outline" onclick={() => onCancel?.()}>Cancel</Button>
+			<Button type="submit" disabled={isGenerating || !password}>
+				{isGenerating ? 'Generating...' : 'Continue'}
+			</Button>
+		</div>
+	</form>
+</div>

package/dist/svelte/components/mfa-setup/PasswordStep.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { PasswordStepProps } from './schemas';
+declare const PasswordStep: import("svelte").Component<PasswordStepProps, {}, "">;
+type PasswordStep = ReturnType<typeof PasswordStep>;
+export default PasswordStep;
+//# sourceMappingURL=PasswordStep.svelte.d.ts.map

package/dist/svelte/components/mfa-setup/PasswordStep.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordStep.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/mfa-setup/PasswordStep.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAsDnD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/mfa-setup/QrCodeStep.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import type { QrCodeStepProps } from './schemas';
+
+	let {
+		qrCodeDataUrl = null,
+		showManualEntry,
+		secret = null,
+		onToggleManualEntry,
+		onBack,
+		onContinue
+	}: QrCodeStepProps = $props();
+
+	let formattedSecret = $derived.by(() => secret?.match(/.{1,4}/g)?.join(' ') ?? '');
+</script>
+
+<div class="space-y-4">
+	<h3 class="text-xl font-semibold">Step 2: Scan QR Code</h3>
+	<p class="text-muted-foreground text-sm">
+		Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.)
+	</p>
+
+	<div class="flex flex-col items-center gap-4 my-8">
+		{#if qrCodeDataUrl}
+			<img
+				src={qrCodeDataUrl}
+				alt="Two-Factor Authentication setup QR code"
+				class="max-w-[200px] rounded-lg border border-border"
+			/>
+		{:else}
+			<p class="text-muted-foreground text-sm">QR code couldn't load — use manual entry below.</p>
+		{/if}
+
+		<Button type="button" variant="ghost" size="sm" onclick={() => onToggleManualEntry?.()}>
+			Can't scan? Enter code manually
+		</Button>
+	</div>
+
+	{#if showManualEntry && formattedSecret}
+		<div class="mt-6 rounded-lg bg-muted/50 p-4 text-center">
+			<h4 class="mb-4 text-base font-semibold">Manual Entry Code</h4>
+			<code
+				class="mb-2 block rounded-md border border-border bg-background px-3 py-2 font-mono text-base tracking-[0.1em]"
+				>{formattedSecret}</code
+			>
+			<p class="text-muted-foreground text-sm">
+				Enter this code manually in your authenticator app if you can't scan the QR code.
+			</p>
+		</div>
+	{/if}
+
+	<div class="mt-6 flex justify-end gap-2">
+		<Button type="button" variant="outline" onclick={() => onBack?.()}>Back</Button>
+		<Button type="button" onclick={() => onContinue?.()}>I've Added the Account</Button>
+	</div>
+</div>

package/dist/svelte/components/mfa-setup/QrCodeStep.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { QrCodeStepProps } from './schemas';
+declare const QrCodeStep: import("svelte").Component<QrCodeStepProps, {}, "">;
+type QrCodeStep = ReturnType<typeof QrCodeStep>;
+export default QrCodeStep;
+//# sourceMappingURL=QrCodeStep.svelte.d.ts.map

package/dist/svelte/components/mfa-setup/QrCodeStep.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCodeStep.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/mfa-setup/QrCodeStep.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAsDjD,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}