@salesforce/templates 66.11.1 → 66.12.0

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/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/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/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/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/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/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/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/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/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/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/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;
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/pages/register/register-page.html

@@ -0,0 +1,80 @@
+<main class="flex min-h-svh w-full justify-center p-6 md:p-10 items-start">
+	<div class="w-full max-w-2xl">
+		<app-auth-form
+			title="Sign Up"
+			description="Enter your information to create an account"
+			[error]="submitError()"
+			submitText="Create an account"
+			submitLoadingText="Creating account…"
+			[submitting]="submitting()"
+			[footer]="{ text: 'Already have an account?', link: routes.LOGIN.PATH, linkText: 'Sign in' }"
+			(submitted)="onSubmit()"
+		>
+			<div class="mt-4 flex flex-col gap-4">
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+					<app-field
+						label="First name"
+						htmlFor="register-first-name"
+						[error]="controlError('firstName', 'required')"
+					>
+						<app-input
+							[value]="form.controls.firstName.value ?? ''"
+							(valueChange)="setControl('firstName', $event)"
+							[placeholder]="placeholders.FIRST_NAME"
+						/>
+					</app-field>
+
+					<app-field
+						label="Last name"
+						htmlFor="register-last-name"
+						[error]="controlError('lastName', 'required')"
+					>
+						<app-input
+							[value]="form.controls.lastName.value ?? ''"
+							(valueChange)="setControl('lastName', $event)"
+							[placeholder]="placeholders.LAST_NAME"
+						/>
+					</app-field>
+				</div>
+
+				<app-field label="Email" htmlFor="register-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="register-password"
+					[error]="controlError('password', 'password')"
+				>
+					<app-input
+						type="password"
+						[value]="form.controls.password.value ?? ''"
+						(valueChange)="setControl('password', $event)"
+						[placeholder]="placeholders.PASSWORD_CREATE"
+					/>
+				</app-field>
+
+				<app-field
+					label="Confirm Password"
+					htmlFor="register-confirm-password"
+					[error]="
+						controlError('confirmPassword', 'passwordMismatch') ??
+						controlError('confirmPassword', 'required')
+					"
+				>
+					<app-input
+						type="password"
+						[value]="form.controls.confirmPassword.value ?? ''"
+						(valueChange)="setControl('confirmPassword', $event)"
+						[placeholder]="placeholders.PASSWORD_CONFIRM"
+					/>
+				</app-field>
+			</div>
+		</app-auth-form>
+	</div>
+</main>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/pages/register/register-page.ts

@@ -0,0 +1,93 @@
+/**
+ * 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 } 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,
+	passwordMinValidator,
+	passwordsMatchValidator,
+	requiredWithMessage,
+} from "../../features/authentication/utils/auth-validators";
+
+/**
+ * Register page — Angular port of the React `Register`. Same field set, same
+ * cross-field password-match rule, same POST body shape (`{ request }` with
+ * `confirmPassword` stripped) and same success handling (redirectUrl hard-nav,
+ * else navigate to login).
+ */
+@Component({
+	selector: "app-register-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [AuthFormComponent, FieldComponent, InputComponent],
+	templateUrl: "./register-page.html",
+})
+export class RegisterPageComponent 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(
+		{
+			firstName: ["", [requiredWithMessage("First name is required")]],
+			lastName: ["", [requiredWithMessage("Last name is required")]],
+			email: ["", [emailValidator]],
+			password: ["", [passwordMinValidator]],
+			confirmPassword: ["", [requiredWithMessage("Please confirm your password")]],
+			startUrl: [getStartUrl(this.route.snapshot.queryParamMap) || ""],
+		},
+		{ validators: [passwordsMatchValidator("password", "confirmPassword")] },
+	);
+
+	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 { confirmPassword: _confirmPassword, ...request } = this.form.getRawValue();
+			const response = await this.dataClient.fetch(API_ROUTES.REGISTER, {
+				method: "POST",
+				body: JSON.stringify({ request }),
+				headers: { "Content-Type": "application/json", Accept: "application/json" },
+			});
+			const result = await handleApiResponse<AuthResponse>(response);
+			if (result?.redirectUrl) {
+				// Hard navigate to the URL which logs the new user in.
+				window.location.replace(result.redirectUrl);
+			} else {
+				// In case redirectUrl is null, redirect to the login page.
+				void this.router.navigate([ROUTES.LOGIN.PATH], { replaceUrl: true });
+			}
+		} catch (err) {
+			console.error("Registration failed", err);
+			this.submitError.set(err instanceof ApiError ? err.errors : "Registration failed");
+		} finally {
+			this.submitting.set(false);
+		}
+	}
+}