@salesforce/ui-bundle-template-feature-angular-authentication 12.5.4

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/pages/forgot-password/forgot-password-page.ts

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, inject, signal } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+import { DataClient } from "../../api/data-client.service";
+import { AuthFormComponent } from "../../features/authentication/auth-form/auth-form";
+import { ReactiveFormPageBase } from "../../features/authentication/reactive-form-page.base";
+import { FieldComponent } from "../../components/ui/field/field";
+import { InputComponent } from "../../components/ui/input/input";
+import {
+	API_ROUTES,
+	AUTH_PLACEHOLDERS,
+	ROUTES,
+} from "../../features/authentication/config/authentication.config";
+import { ApiError, handleApiResponse } from "../../features/authentication/utils/helpers";
+import type { AbstractControl, ValidationErrors } from "@angular/forms";
+
+/**
+ * Username validator — mirrors the React forgot-password zod schema which
+ * validates the username as an email but with the message "Please enter a
+ * valid username". Kept local since this message is unique to this page.
+ */
+function usernameValidator(control: AbstractControl): ValidationErrors | null {
+	const value = (control.value ?? "").toString().trim();
+	const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+	return value !== "" && emailPattern.test(value)
+		? null
+		: { email: "Please enter a valid username" };
+}
+
+/**
+ * Forgot-password page — Angular port of the React `ForgotPassword`.
+ *
+ * Anti-enumeration: the success message is intentionally generic ("If that
+ * username exists…") regardless of whether the account exists, and after a
+ * successful submit the username field and the submit button are disabled — an
+ * exact mirror of the React behavior.
+ */
+@Component({
+	selector: "app-forgot-password-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [AuthFormComponent, FieldComponent, InputComponent],
+	templateUrl: "./forgot-password-page.html",
+})
+export class ForgotPasswordPageComponent extends ReactiveFormPageBase {
+	private readonly fb = inject(FormBuilder);
+	private readonly dataClient = inject(DataClient);
+
+	protected readonly placeholders = AUTH_PLACEHOLDERS;
+	protected readonly routes = ROUTES;
+
+	protected override readonly form = this.fb.group({
+		username: ["", [usernameValidator]],
+	});
+
+	protected readonly submitError = signal<string | string[] | null>(null);
+	protected readonly submitting = signal<boolean>(false);
+	protected readonly success = signal<boolean>(false);
+
+	protected async onSubmit(): Promise<void> {
+		this.form.markAllAsTouched();
+		if (this.form.invalid) {
+			return;
+		}
+		this.submitError.set(null);
+		this.success.set(false);
+		this.submitting.set(true);
+		try {
+			const username = (this.form.controls.username.value ?? "").trim();
+			const response = await this.dataClient.fetch(API_ROUTES.FORGOT_PASSWORD, {
+				method: "POST",
+				body: JSON.stringify({ username }),
+				headers: { "Content-Type": "application/json", Accept: "application/json" },
+			});
+			await handleApiResponse(response);
+			this.success.set(true);
+		} catch (err) {
+			console.error("Failed to send reset link", err);
+			this.submitError.set(err instanceof ApiError ? err.errors : "Failed to send reset link");
+		} finally {
+			this.submitting.set(false);
+		}
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/pages/home/home.html

@@ -0,0 +1,6 @@
+<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+	<div class="text-center">
+		<h1 class="text-4xl font-bold text-gray-900 mb-4">Home</h1>
+		<p class="text-lg text-gray-600 mb-8">Welcome to your Angular application.</p>
+	</div>
+</main>

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/pages/home/home.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { HomeComponent } from './home';
+
+describe('HomeComponent', () => {
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [HomeComponent],
+		}).compileComponents();
+	});
+
+	it('should create the component', () => {
+		const fixture = TestBed.createComponent(HomeComponent);
+		const component = fixture.componentInstance;
+		expect(component).toBeTruthy();
+	});
+
+	it('should render main landmark', async () => {
+		const fixture = TestBed.createComponent(HomeComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		expect(compiled.querySelector('main')).toBeTruthy();
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/pages/home/home.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'app-home',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	templateUrl: './home.html',
+})
+export class HomeComponent {}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/pages/login/login-page.html

@@ -0,0 +1,47 @@
+<main class="flex min-h-svh w-full justify-center p-6 md:p-10 items-start">
+	<div class="w-full max-w-md">
+		<app-auth-form
+			title="Login"
+			description="Enter your email below to login to your account"
+			[error]="submitError()"
+			submitText="Login"
+			submitLoadingText="Logging in…"
+			[submitting]="submitting()"
+			[footer]="{
+				text: 'Don\'t have an account?',
+				link: routes.REGISTER.PATH,
+				linkText: 'Sign up',
+			}"
+			(submitted)="onSubmit()"
+		>
+			<div class="mt-4 flex flex-col gap-4">
+				<app-field label="Email" htmlFor="login-email" [error]="controlError('email', 'email')">
+					<app-input
+						type="email"
+						[value]="form.controls.email.value ?? ''"
+						(valueChange)="setControl('email', $event)"
+						[placeholder]="placeholders.EMAIL"
+					/>
+				</app-field>
+
+				<app-field
+					label="Password"
+					htmlFor="login-password"
+					[error]="controlError('password', 'required')"
+				>
+					<app-input
+						type="password"
+						[value]="form.controls.password.value ?? ''"
+						(valueChange)="setControl('password', $event)"
+					/>
+					<a
+						[routerLink]="routes.FORGOT_PASSWORD.PATH"
+						class="text-sm underline-offset-4 hover:underline"
+					>
+						Forgot your password?
+					</a>
+				</app-field>
+			</div>
+		</app-auth-form>
+	</div>
+</main>

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/pages/login/login-page.ts

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, inject, signal } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+import { ActivatedRoute, Router, RouterLink } from "@angular/router";
+import { DataClient } from "../../api/data-client.service";
+import { AuthFormComponent } from "../../features/authentication/auth-form/auth-form";
+import { ReactiveFormPageBase } from "../../features/authentication/reactive-form-page.base";
+import { FieldComponent } from "../../components/ui/field/field";
+import { InputComponent } from "../../components/ui/input/input";
+import {
+	API_ROUTES,
+	AUTH_PLACEHOLDERS,
+	ROUTES,
+} from "../../features/authentication/config/authentication.config";
+import { getStartUrl, type AuthResponse } from "../../features/authentication/utils/auth-helpers";
+import { ApiError, handleApiResponse } from "../../features/authentication/utils/helpers";
+import {
+	emailValidator,
+	requiredWithMessage,
+} from "../../features/authentication/utils/auth-validators";
+
+/**
+ * Login page — Angular port of the React `Login`. Reactive Forms replace
+ * `@tanstack/react-form` + zod; the login POST + redirect logic is identical.
+ * On success with a `redirectUrl` it hard-navigates (establishes the server
+ * session cookie); otherwise it client-navigates to `/`.
+ */
+@Component({
+	selector: "app-login-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterLink, AuthFormComponent, FieldComponent, InputComponent],
+	templateUrl: "./login-page.html",
+})
+export class LoginPageComponent extends ReactiveFormPageBase {
+	private readonly fb = inject(FormBuilder);
+	private readonly router = inject(Router);
+	private readonly route = inject(ActivatedRoute);
+	private readonly dataClient = inject(DataClient);
+
+	protected readonly placeholders = AUTH_PLACEHOLDERS;
+	protected readonly routes = ROUTES;
+
+	protected override readonly form = this.fb.group({
+		email: ["", [emailValidator]],
+		password: ["", [requiredWithMessage("Password is required")]],
+	});
+
+	protected readonly submitError = signal<string | string[] | null>(null);
+	protected readonly submitting = signal<boolean>(false);
+
+	protected async onSubmit(): Promise<void> {
+		this.form.markAllAsTouched();
+		if (this.form.invalid) {
+			return;
+		}
+		this.submitError.set(null);
+		this.submitting.set(true);
+		try {
+			const { email, password } = this.form.getRawValue();
+			const startUrl = getStartUrl(this.route.snapshot.queryParamMap);
+			const response = await this.dataClient.fetch(API_ROUTES.LOGIN, {
+				method: "POST",
+				body: JSON.stringify({
+					email: (email ?? "").trim().toLowerCase(),
+					password: password ?? "",
+					startUrl,
+				}),
+				headers: { "Content-Type": "application/json", Accept: "application/json" },
+			});
+			const result = await handleApiResponse<AuthResponse>(response);
+			if (result?.redirectUrl) {
+				// Hard navigate to the URL which establishes the server session cookie.
+				window.location.replace(result.redirectUrl);
+			} else {
+				// In case redirectUrl is null, navigate to home.
+				void this.router.navigate(["/"], { replaceUrl: true });
+			}
+		} catch (err) {
+			console.error("Login failed", err);
+			this.submitError.set(err instanceof ApiError ? err.errors : "Login failed");
+		} finally {
+			this.submitting.set(false);
+		}
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/pages/not-found/not-found.html

@@ -0,0 +1,12 @@
+<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+	<div class="text-center">
+		<h1 class="text-4xl font-bold text-gray-900 mb-4">404</h1>
+		<p class="text-lg text-gray-600 mb-8">Page not found</p>
+		<a
+			routerLink="/"
+			class="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+		>
+			Go to Home
+		</a>
+	</div>
+</main>

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/pages/not-found/not-found.spec.ts

@@ -0,0 +1,33 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { NotFoundComponent } from './not-found';
+
+describe('NotFoundComponent', () => {
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [NotFoundComponent],
+			providers: [provideRouter([])],
+		}).compileComponents();
+	});
+
+	it('should create the component', () => {
+		const fixture = TestBed.createComponent(NotFoundComponent);
+		const component = fixture.componentInstance;
+		expect(component).toBeTruthy();
+	});
+
+	it('should render main landmark', async () => {
+		const fixture = TestBed.createComponent(NotFoundComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		expect(compiled.querySelector('main')).toBeTruthy();
+	});
+
+	it('should have a link to home', async () => {
+		const fixture = TestBed.createComponent(NotFoundComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		const link = compiled.querySelector('a');
+		expect(link?.getAttribute('href')).toBe('/');
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/pages/not-found/not-found.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+	selector: 'app-not-found',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterLink],
+	templateUrl: './not-found.html',
+})
+export class NotFoundComponent {}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/pages/profile/profile-page.html

@@ -0,0 +1,116 @@
+<main class="flex min-h-svh w-full justify-center p-6 md:p-10 items-start">
+	<div class="w-full max-w-md">
+		@if (loadError()) {
+		<app-status-alert variant="error" [message]="loadError()!" />
+		} @else {
+		<app-auth-form
+			title="Profile"
+			description="Update your account information"
+			[showAlreadyLoggedIn]="false"
+			[error]="submitError()"
+			[success]="success() ? 'Profile updated!' : null"
+			submitText="Save Changes"
+			submitLoadingText="Saving…"
+			[submitting]="submitting()"
+			[submitDisabled]="loading()"
+			[footer]="{ link: routes.CHANGE_PASSWORD.PATH, linkText: 'Change password' }"
+			(submitted)="onSubmit()"
+		>
+			@if (loading()) {
+			<div role="status" aria-live="polite">
+				<span class="sr-only">Loading profile…</span>
+				<app-field label="Email"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+					<app-field label="First name"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+					<app-field label="Last name"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+				</div>
+				<app-field label="Phone"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+				<app-field label="Street"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+					<app-field label="City"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+					<app-field label="State"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+				</div>
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+					<app-field label="Postal Code"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+					<app-field label="Country"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+				</div>
+			</div>
+			} @else {
+			<div class="mt-4 flex flex-col gap-4">
+				<app-field label="Email" htmlFor="profile-email" [error]="controlError('Email', 'email')">
+					<app-input type="email" [value]="form.controls.Email.value ?? ''" [disabled]="true" />
+				</app-field>
+
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+					<app-field
+						label="First name"
+						htmlFor="profile-first-name"
+						[error]="controlError('FirstName', 'required')"
+					>
+						<app-input
+							[value]="form.controls.FirstName.value ?? ''"
+							(valueChange)="setControl('FirstName', $event)"
+						/>
+					</app-field>
+					<app-field
+						label="Last name"
+						htmlFor="profile-last-name"
+						[error]="controlError('LastName', 'required')"
+					>
+						<app-input
+							[value]="form.controls.LastName.value ?? ''"
+							(valueChange)="setControl('LastName', $event)"
+						/>
+					</app-field>
+				</div>
+
+				<app-field label="Phone" htmlFor="profile-phone">
+					<app-input
+						type="tel"
+						[value]="form.controls.Phone.value ?? ''"
+						(valueChange)="setControl('Phone', $event)"
+					/>
+				</app-field>
+
+				<app-field label="Street" htmlFor="profile-street">
+					<app-input
+						[value]="form.controls.Street.value ?? ''"
+						(valueChange)="setControl('Street', $event)"
+					/>
+				</app-field>
+
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+					<app-field label="City" htmlFor="profile-city">
+						<app-input
+							[value]="form.controls.City.value ?? ''"
+							(valueChange)="setControl('City', $event)"
+						/>
+					</app-field>
+					<app-field label="State" htmlFor="profile-state">
+						<app-input
+							[value]="form.controls.State.value ?? ''"
+							(valueChange)="setControl('State', $event)"
+						/>
+					</app-field>
+				</div>
+
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+					<app-field label="Postal Code" htmlFor="profile-postal-code">
+						<app-input
+							[value]="form.controls.PostalCode.value ?? ''"
+							(valueChange)="setControl('PostalCode', $event)"
+						/>
+					</app-field>
+					<app-field label="Country" htmlFor="profile-country">
+						<app-input
+							[value]="form.controls.Country.value ?? ''"
+							(valueChange)="setControl('Country', $event)"
+						/>
+					</app-field>
+				</div>
+			</div>
+			}
+		</app-auth-form>
+		}
+	</div>
+</main>

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/pages/profile/profile-page.ts

@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	inject,
+	OnInit,
+	signal,
+} from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+import { AuthFormComponent } from "../../features/authentication/auth-form/auth-form";
+import { ReactiveFormPageBase } from "../../features/authentication/reactive-form-page.base";
+import { StatusAlertComponent } from "../../features/authentication/status-alert/status-alert";
+import { FieldComponent } from "../../components/ui/field/field";
+import { InputComponent } from "../../components/ui/input/input";
+import { SkeletonComponent } from "../../components/ui/skeleton/skeleton";
+import { AuthService } from "../../features/authentication/auth/auth.service";
+import { UserProfileService } from "../../api/user-profile.service";
+import { ROUTES } from "../../features/authentication/config/authentication.config";
+import {
+	emailValidator,
+	requiredWithMessage,
+} from "../../features/authentication/utils/auth-validators";
+
+/**
+ * The profile form value shape (mirrors the React `ProfileFormValues`).
+ *
+ * Declared as a `type` (not an `interface`) so it is assignable to
+ * `Record<string, unknown>` when passed to `UserProfileService.updateUserProfile`:
+ * an interface is not index-signature-assignable (it can be augmented via
+ * declaration merging), whereas a type-literal is.
+ */
+type ProfileFormValues = {
+	FirstName: string;
+	LastName: string;
+	Email: string;
+	Phone: string | null;
+	Street: string | null;
+	City: string | null;
+	State: string | null;
+	PostalCode: string | null;
+	Country: string | null;
+};
+
+/**
+ * Profile page — Angular port of the React `Profile`. Protected route.
+ *
+ * Loads the current user's profile via GraphQL (`UserProfileService`) on init,
+ * showing a skeleton while loading. Email is read-only. On submit it updates
+ * via GraphQL and merges the returned record with the submitted values so
+ * FLS-hidden fields don't blank the form — identical to the React merge logic.
+ * `showAlreadyLoggedIn` is false.
+ */
+@Component({
+	selector: "app-profile-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		AuthFormComponent,
+		StatusAlertComponent,
+		FieldComponent,
+		InputComponent,
+		SkeletonComponent,
+	],
+	templateUrl: "./profile-page.html",
+})
+export class ProfilePageComponent extends ReactiveFormPageBase implements OnInit {
+	private readonly fb = inject(FormBuilder);
+	private readonly authService = inject(AuthService);
+	private readonly profileService = inject(UserProfileService);
+
+	protected readonly routes = ROUTES;
+	private readonly user = this.authService.requireUser();
+
+	protected override readonly form = this.fb.group({
+		FirstName: ["", [requiredWithMessage("First name is required")]],
+		LastName: ["", [requiredWithMessage("Last name is required")]],
+		Email: [{ value: "", disabled: true }, [emailValidator]],
+		Phone: [""],
+		Street: [""],
+		City: [""],
+		State: [""],
+		PostalCode: [""],
+		Country: [""],
+	});
+
+	protected readonly loadError = signal<string | null>(null);
+	protected readonly submitError = signal<string | null>(null);
+	protected readonly submitting = signal<boolean>(false);
+	protected readonly success = signal<boolean>(false);
+	private readonly loaded = signal<boolean>(false);
+
+	/** True until the profile has loaded and no load error occurred. */
+	protected readonly loading = computed(() => !this.loaded() && this.loadError() === null);
+
+	ngOnInit(): void {
+		void this.loadProfile();
+	}
+
+	private async loadProfile(): Promise<void> {
+		try {
+			const data = await this.profileService.fetchUserProfile<Partial<ProfileFormValues>>(
+				this.user.id,
+			);
+			// Merge with defaults so missing fields (e.g. due to FLS) don't break the form.
+			this.applyProfile({
+				FirstName: data.FirstName ?? "",
+				LastName: data.LastName ?? "",
+				Email: data.Email ?? "",
+				Phone: data.Phone ?? null,
+				Street: data.Street ?? null,
+				City: data.City ?? null,
+				State: data.State ?? null,
+				PostalCode: data.PostalCode ?? null,
+				Country: data.Country ?? null,
+			});
+			this.loaded.set(true);
+		} catch (err) {
+			console.error("Failed to load profile", err);
+			this.loadError.set("Failed to load profile");
+		}
+	}
+
+	private applyProfile(profile: ProfileFormValues): void {
+		this.form.reset({
+			FirstName: profile.FirstName,
+			LastName: profile.LastName,
+			Email: profile.Email,
+			Phone: profile.Phone ?? "",
+			Street: profile.Street ?? "",
+			City: profile.City ?? "",
+			State: profile.State ?? "",
+			PostalCode: profile.PostalCode ?? "",
+			Country: profile.Country ?? "",
+		});
+	}
+
+	protected async onSubmit(): Promise<void> {
+		this.form.markAllAsTouched();
+		if (this.form.invalid) {
+			return;
+		}
+		this.submitError.set(null);
+		this.success.set(false);
+		this.submitting.set(true);
+		try {
+			// getRawValue includes the disabled Email control.
+			const raw = this.form.getRawValue();
+			const value: ProfileFormValues = {
+				FirstName: (raw.FirstName ?? "").trim(),
+				LastName: (raw.LastName ?? "").trim(),
+				Email: (raw.Email ?? "").trim(),
+				Phone: this.optional(raw.Phone),
+				Street: this.optional(raw.Street),
+				City: this.optional(raw.City),
+				State: this.optional(raw.State),
+				PostalCode: this.optional(raw.PostalCode),
+				Country: this.optional(raw.Country),
+			};
+			const updated = await this.profileService.updateUserProfile<Partial<ProfileFormValues>>(
+				this.user.id,
+				value,
+			);
+			// Merge with submitted values so missing fields (e.g. FLS) don't break the form.
+			this.applyProfile({
+				FirstName: updated.FirstName ?? value.FirstName ?? "",
+				LastName: updated.LastName ?? value.LastName ?? "",
+				Email: updated.Email ?? value.Email ?? "",
+				Phone: updated.Phone ?? value.Phone ?? null,
+				Street: updated.Street ?? value.Street ?? null,
+				City: updated.City ?? value.City ?? null,
+				State: updated.State ?? value.State ?? null,
+				PostalCode: updated.PostalCode ?? value.PostalCode ?? null,
+				Country: updated.Country ?? value.Country ?? null,
+			});
+			this.success.set(true);
+			window.scrollTo({ top: 0, behavior: "smooth" });
+		} catch (err) {
+			console.error("Failed to update profile", err);
+			this.submitError.set("Failed to update profile");
+		} finally {
+			this.submitting.set(false);
+		}
+	}
+
+	/** Mirrors the React `optionalString`: trim and coerce empty to null. */
+	private optional(value: string | null | undefined): string | null {
+		const trimmed = (value ?? "").trim();
+		return trimmed === "" ? null : trimmed;
+	}
+}