@salesforce/ui-bundle-template-app-angular-template-b2x 11.30.0

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/components/ui/spinner/spinner.component.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatProgressSpinnerModule, ProgressSpinnerMode } from '@angular/material/progress-spinner';
+
+/**
+ * Thin wrapper over Material's `mat-progress-spinner`. Defaults to an
+ * indeterminate 24px spinner. `ariaLabel` names the `role="progressbar"`.
+ */
+@Component({
+	selector: 'app-spinner',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [MatProgressSpinnerModule],
+	template: `
+		<mat-progress-spinner
+			[mode]="mode()"
+			[diameter]="diameter()"
+			[value]="value()"
+			[attr.aria-label]="ariaLabel()"
+		/>
+	`,
+})
+export class SpinnerComponent {
+	readonly diameter = input<number>(24);
+	readonly mode = input<ProgressSpinnerMode>('indeterminate');
+
+	/** Progress value (0–100) used only when `mode` is `determinate`. */
+	readonly value = input<number>(0);
+
+	/** Accessible name announced by assistive tech. */
+	readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
+}

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/auth/auth.guard.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { inject } from "@angular/core";
+import { CanActivateFn, Router, UrlTree } from "@angular/router";
+import { AuthService } from "./auth.service";
+import { AUTH_REDIRECT_PARAM, ROUTES } from "../config/authentication.config";
+
+/**
+ * Route guard — the Angular analogue of the React `PrivateRoute` layout.
+ *
+ * Allows activation when the user is authenticated. Otherwise redirects to the
+ * login page with a `startUrl` query param capturing the requested destination,
+ * so the user is returned there after a successful login.
+ *
+ * Because `AuthService` runs its initial check on construction, the guard first
+ * awaits any in-flight `loading` state (equivalent to the React guard returning
+ * `null` while loading, then re-rendering once auth resolves). It resolves to a
+ * boolean `true` or a `UrlTree` redirect — never leaves the user on a blank
+ * screen.
+ */
+export const authGuard: CanActivateFn = async (route, state): Promise<boolean | UrlTree> => {
+	const authService = inject(AuthService);
+	const router = inject(Router);
+
+	// Wait for the initial auth check to settle before deciding. If a check is
+	// already resolved this returns immediately.
+	if (authService.loading()) {
+		await authService.checkAuth();
+	} else if (authService.user() === null && authService.error() !== null) {
+		// The prior check finished unauthenticated *because of an error* (e.g. a
+		// transient network failure), not a confirmed guest. Without this, a single
+		// failed initial check would poison protected-route access until a full page
+		// reload. Re-run the check on guard entry so recovery doesn't require reload.
+		await authService.checkAuth();
+	}
+
+	if (authService.isAuthenticated()) {
+		return true;
+	}
+
+	// Capture the current destination (path + query) to return to after login.
+	// `state.url` is already the resolved absolute URL for the attempted route.
+	const destination = state.url;
+	return router.createUrlTree([ROUTES.LOGIN.PATH], {
+		queryParams: { [AUTH_REDIRECT_PARAM]: destination },
+	});
+};

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/auth/auth.service.ts

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { computed, inject, Injectable, signal } from "@angular/core";
+import { DataClient } from "../../../api/data-client.service";
+import { API_ROUTES } from "../config/authentication.config";
+
+/** The authenticated user shape (mirrors the React `AuthContext` `User`). */
+export interface AuthUser {
+	readonly id: string;
+	readonly name: string;
+}
+
+// UI API version used for the Chatter current-user lookup. Mirrors the constant
+// baked into @salesforce/ui-bundle's getCurrentUser helper.
+const API_VERSION = "65.0";
+
+/**
+ * Angular signal-based replacement for the React `AuthProvider` / `useAuth`.
+ *
+ * `providedIn: 'root'` makes the service a single app-wide singleton, so it
+ * replaces the React context+provider wrapper without any `<AuthProvider>` in
+ * the tree (the coordinator-approved design). State is exposed as readonly
+ * signals; `isAuthenticated` is a computed mirror of `user !== null`.
+ *
+ * Authentication is checked on construction (equivalent to the React mount
+ * `useEffect`). `checkAuth()` re-runs the lookup on demand.
+ *
+ * The current-user lookup goes through the base app's `DataClient.fetch` to the
+ * Chatter `/users/me` endpoint — the exact call `@salesforce/ui-bundle`'s
+ * `getCurrentUser` makes — so the feature reuses the base app's existing
+ * `@salesforce/platform-sdk` dependency and adds no new package.
+ */
+@Injectable({ providedIn: "root" })
+export class AuthService {
+	// DataClient is provided by the base-angular-app; consumed via the
+	// `__inherit__` stub under app/api/ (patches-cli strips the prefix at compose
+	// so it resolves to the seeded base data-client.service.ts).
+	private readonly dataClient = inject(DataClient);
+
+	private readonly _user = signal<AuthUser | null>(null);
+	private readonly _loading = signal<boolean>(true);
+	private readonly _error = signal<string | null>(null);
+
+	/** The current authenticated user, or null when unauthenticated. */
+	readonly user = this._user.asReadonly();
+	/** True while the initial (or a manual) auth check is in flight. */
+	readonly loading = this._loading.asReadonly();
+	/** Error message from the most recent failed auth check, else null. */
+	readonly error = this._error.asReadonly();
+	/** Mirrors React `isAuthenticated = user !== null`. */
+	readonly isAuthenticated = computed(() => this._user() !== null);
+
+	constructor() {
+		// Kick off the initial check on construction (React mount `useEffect`).
+		void this.checkAuth();
+	}
+
+	/**
+	 * Fetches the current user and updates state. Mirrors the React `checkAuth`.
+	 */
+	async checkAuth(): Promise<void> {
+		this._loading.set(true);
+		this._error.set(null);
+		try {
+			const userData = await this.getCurrentUser();
+			this._user.set(userData);
+		} catch (err) {
+			console.error("Authentication failed", err);
+			this._error.set("Authentication failed");
+			this._user.set(null);
+		} finally {
+			this._loading.set(false);
+		}
+	}
+
+	/**
+	 * Returns the current user, throwing when unauthenticated. The Angular
+	 * analogue of the React `useUser()` hook — used by the Profile page which
+	 * only renders behind the auth guard.
+	 */
+	requireUser(): AuthUser {
+		const user = this._user();
+		if (!user) {
+			throw new Error("Authenticated context not established");
+		}
+		return user;
+	}
+
+	/**
+	 * Navigate to the server-side logout endpoint. Uses `replace` to prevent the
+	 * back button from returning to an authenticated session. Direct port of the
+	 * React `logout`.
+	 */
+	logout(startURL?: string): void {
+		const finalLogoutUrl = startURL
+			? `${API_ROUTES.LOGOUT}?startURL=${encodeURIComponent(startURL)}`
+			: API_ROUTES.LOGOUT;
+		window.location.replace(finalLogoutUrl);
+	}
+
+	/**
+	 * Fetches the current user via the Chatter `/users/me` endpoint. Reproduces
+	 * `@salesforce/ui-bundle`'s `getCurrentUser` so we don't add ui-bundle as a
+	 * dependency (base app only ships @salesforce/platform-sdk).
+	 */
+	private async getCurrentUser(): Promise<AuthUser> {
+		const response = await this.dataClient.fetch(
+			`/services/data/v${API_VERSION}/chatter/users/me`,
+			{
+				method: "GET",
+				headers: { Accept: "application/json" },
+			},
+		);
+		if (!response.ok) {
+			throw new Error(`Failed to fetch current user: HTTP ${response.status}`);
+		}
+		const data = (await response.json()) as { id?: string; name?: string };
+		if (!data?.id) {
+			throw new Error("Current user response missing id");
+		}
+		return { id: data.id, name: data.name || "User" };
+	}
+}

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/components/status-alert/status-alert.component.html

@@ -0,0 +1,7 @@
+<app-alert [title]="title()" [class]="toneClass()">
+	@if (message()) {
+		{{ message() }}
+	} @else {
+		<ng-content />
+	}
+</app-alert>

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/components/status-alert/status-alert.component.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { AlertComponent } from "../../../../components/ui/alert/alert.component";
+
+/** Status banner variant conveying the tone of the message. */
+export type AppStatusAlertVariant = "error" | "success" | "info" | "warning";
+
+/**
+ * Status / error banner — a feature-owned composition over the base `app-alert`
+ * ui primitive (not a base-template component). Adds a four-way `variant` with a
+ * colour treatment, mirroring the React `components/alerts/status-alert`.
+ *
+ * Supply the copy via the `message` input, or content-project richer markup
+ * (lists, links) as the default slot. Consumed by the authentication
+ * login-error / success / session-expired banners.
+ */
+@Component({
+	selector: "app-status-alert",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [AlertComponent],
+	templateUrl: "./status-alert.component.html",
+	host: {
+		"data-slot": "status-alert",
+	},
+})
+export class StatusAlertComponent {
+	readonly variant = input<AppStatusAlertVariant>("info");
+
+	/** Optional title rendered above the message / projected content. */
+	readonly title = input<string>("");
+
+	/** Message copy; may be omitted in favour of projected content. */
+	readonly message = input<string>("");
+
+	/** Colour utilities applied to the banner for the current variant. */
+	protected readonly toneClass = computed(() => {
+		switch (this.variant()) {
+			case "error":
+				return "text-destructive";
+			case "success":
+				return "text-emerald-700";
+			case "warning":
+				return "text-amber-700";
+			default:
+				return "text-sky-700";
+		}
+	});
+}

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/config/authentication.config.ts

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * Centralized configuration for Auth routes. Each route contains both the path
+ * and page title. Using constants prevents typos in route paths across the app.
+ *
+ * Direct port of the React `authenticationConfig.ts`. NOTE: Angular route
+ * `path` values are relative (no leading slash) in `app.routes.ts`; these
+ * PATH constants keep the leading slash so `routerLink` / `navigate` calls and
+ * the open-redirect validation behave exactly as the React version.
+ */
+export const ROUTES = {
+	LOGIN: {
+		PATH: "/login",
+		TITLE: "Login | MyApp",
+	},
+	REGISTER: {
+		PATH: "/register",
+		TITLE: "Create Account | MyApp",
+	},
+	FORGOT_PASSWORD: {
+		PATH: "/forgot-password",
+		TITLE: "Recover Password | MyApp",
+	},
+	RESET_PASSWORD: {
+		PATH: "/reset-password",
+		TITLE: "Reset Password | MyApp",
+	},
+	PROFILE: {
+		PATH: "/profile",
+		TITLE: "My Profile | MyApp",
+	},
+	CHANGE_PASSWORD: {
+		PATH: "/change-password",
+		TITLE: "Change Password | MyApp",
+	},
+} as const;
+
+/**
+ * Centralized configuration for API endpoints. These are server-side endpoints,
+ * not client-side routes.
+ */
+export const API_ROUTES = {
+	// W-21253864: Logout URL integration is not currently supported
+	LOGOUT: "/secur/logout.jsp",
+	// Custom Apex REST resources handling the auth flows.
+	LOGIN: "/services/apexrest/auth/login",
+	REGISTER: "/services/apexrest/auth/register",
+	FORGOT_PASSWORD: "/services/apexrest/auth/forgot-password",
+	RESET_PASSWORD: "/services/apexrest/auth/reset-password",
+	CHANGE_PASSWORD: "/services/apexrest/auth/change-password",
+} as const;
+
+/**
+ * Query parameter key used to store the return URL.
+ * e.g. /login?startUrl=/profile
+ */
+export const AUTH_REDIRECT_PARAM = "startUrl";
+
+/** Placeholder text constants for authentication form inputs. */
+export const AUTH_PLACEHOLDERS = {
+	EMAIL: "e.g. name@example.com",
+	PASSWORD: "Enter your password",
+	PASSWORD_CREATE: "Create a password",
+	PASSWORD_CONFIRM: "Re-enter your password",
+	PASSWORD_NEW: "Enter new password",
+	PASSWORD_NEW_CONFIRM: "Re-enter new password",
+	FIRST_NAME: "e.g. Alex",
+	LAST_NAME: "e.g. Smith",
+	USERNAME: "e.g. asmith",
+} as const;

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/forms/auth-form/auth-form.component.html

@@ -0,0 +1,38 @@
+<app-card-layout [title]="title()" [subtitle]="description()">
+	<div class="space-y-6">
+		@if (showAuthAlert()) {
+			<app-status-alert variant="info" message="You are already logged in." />
+		}
+		@if (errorMessages().length > 0) {
+			@if (errorMessages().length === 1) {
+				<app-status-alert variant="error" [message]="errorMessages()[0]" />
+			} @else {
+				<app-status-alert variant="error">
+					<ul>
+						@for (msg of errorMessages(); track msg) {
+							<li>{{ msg }}</li>
+						}
+					</ul>
+				</app-status-alert>
+			}
+		}
+		@if (success()) {
+			<app-status-alert variant="success" [message]="success()!" />
+		}
+
+		<form (ngSubmit)="onSubmit()">
+			<ng-content />
+			<app-submit-button
+				class="mt-6 block"
+				[label]="submitText()"
+				[loadingLabel]="submitLoadingText()"
+				[submitting]="submitting()"
+				[disabled]="isSubmitDisabled()"
+			/>
+		</form>
+
+		@if (footer(); as f) {
+			<app-footer-link [text]="f.text ?? ''" [to]="f.link" [linkText]="f.linkText" />
+		}
+	</div>
+</app-card-layout>

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/forms/auth-form/auth-form.component.ts

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject, input, output } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { CardLayoutComponent } from "../../layouts/card-layout/card-layout.component";
+import { StatusAlertComponent } from "../../components/status-alert/status-alert.component";
+import { SubmitButtonComponent } from "../submit-button/submit-button.component";
+import { FooterLinkComponent } from "../footer-link/footer-link.component";
+import { AuthService } from "../../auth/auth.service";
+
+/** Footer link descriptor for the auth form frame. */
+export interface AuthFormFooter {
+	text?: string;
+	link: string;
+	linkText: string;
+}
+
+/**
+ * Wrapper enforcing a consistent layout (card) and error/success alert
+ * positioning for all authentication forms — the Angular port of the React
+ * `AuthForm`.
+ *
+ * Auth-aware behavior (identical to React):
+ * - While auth state is loading, the submit button is disabled.
+ * - If the user is already authenticated and `showAlreadyLoggedIn` is true, an
+ *   info alert is shown and submit is disabled.
+ *
+ * The owning page holds the FormGroup and binds `[formGroup]` on the projected
+ * `<form>`; this component renders the frame, alerts, submit button, and footer.
+ * It emits `(submitted)` when the submit button is pressed so the page runs its
+ * submit handler. The page passes its submitting flag via `[submitting]` and any
+ * extra disabled condition via `[submitDisabled]`.
+ */
+@Component({
+	selector: "app-auth-form",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		FormsModule,
+		CardLayoutComponent,
+		StatusAlertComponent,
+		SubmitButtonComponent,
+		FooterLinkComponent,
+	],
+	templateUrl: "./auth-form.component.html",
+})
+export class AuthFormComponent {
+	private readonly authService = inject(AuthService);
+
+	readonly title = input.required<string>();
+	readonly description = input<string>("");
+	/** Error message(s) to surface; empty/null hides the error alert. */
+	readonly error = input<string | string[] | null>(null);
+	/** Success message to surface; empty/null hides the success alert. */
+	readonly success = input<string | null>(null);
+	/** Whether to show the "already logged in" alert and disable submit. @default true */
+	readonly showAlreadyLoggedIn = input<boolean>(true);
+	readonly submitText = input.required<string>();
+	readonly submitLoadingText = input<string>("Submitting…");
+	/** True while the page's async submit is in flight. */
+	readonly submitting = input<boolean>(false);
+	/** Extra disabled condition from the page (e.g. success state). */
+	readonly submitDisabled = input<boolean>(false);
+	readonly footer = input<AuthFormFooter | null>(null);
+
+	/** Emitted when the submit button is pressed (page runs its handler). */
+	readonly submitted = output<void>();
+
+	protected readonly isAuthenticated = this.authService.isAuthenticated;
+	protected readonly loading = this.authService.loading;
+
+	/** Info alert shown when already authenticated on a public page. */
+	protected readonly showAuthAlert = computed(
+		() => this.showAlreadyLoggedIn() && this.isAuthenticated(),
+	);
+
+	/** Submit disabled when: caller says so, already-logged-in, or auth loading. */
+	protected readonly isSubmitDisabled = computed(
+		() => this.submitDisabled() || this.showAuthAlert() || this.loading(),
+	);
+
+	/** Normalizes the error input to an array for the template's list rendering. */
+	protected readonly errorMessages = computed<string[]>(() => {
+		const err = this.error();
+		if (!err) return [];
+		return Array.isArray(err) ? err : [err];
+	});
+
+	protected onSubmit(): void {
+		this.submitted.emit();
+	}
+}

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/forms/footer-link/footer-link.component.html

@@ -0,0 +1,11 @@
+<p class="w-full text-center text-sm text-muted-foreground">
+	@if (text()) {
+		{{ text() }}&nbsp;
+	}
+	<a
+		[routerLink]="to()"
+		class="font-medium underline hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+	>
+		{{ linkText() }}
+	</a>
+</p>

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/forms/footer-link/footer-link.component.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { RouterLink } from "@angular/router";
+
+/**
+ * Footer navigation link under an auth form — the Angular port of the React
+ * `FooterLink`. Renders an optional prefix text followed by a `routerLink`.
+ */
+@Component({
+	selector: "app-footer-link",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterLink],
+	templateUrl: "./footer-link.component.html",
+})
+export class FooterLinkComponent {
+	/** Link text prefix (e.g., "Don't have an account?"). */
+	readonly text = input<string>("");
+	/** Router path to navigate to. */
+	readonly to = input.required<string>();
+	/** Link label (e.g., "Sign up"). */
+	readonly linkText = input.required<string>();
+}

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/forms/reactive-form-page.base.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { Directive } from "@angular/core";
+import { FormGroup } from "@angular/forms";
+
+/**
+ * Shared helpers for the auth form pages.
+ *
+ * The base `app-input` primitive exposes a two-way `[(value)]` model rather than
+ * a ControlValueAccessor, so neither `formControlName` nor `[formGroup]` can bind
+ * to it directly. These pages therefore keep a Reactive Forms `FormGroup` as the
+ * validation + submit source of truth (with no `[formGroup]` on the template
+ * `<form>`) and bridge each field manually with `[value]` / `(valueChange)`:
+ *   <app-input [value]="form.controls.x.value" (valueChange)="setControl('x', $event)" />
+ *
+ * `setControl` pushes edits back into the control (marking it touched/dirty so
+ * validation surfaces), and `controlError` reads a specific error message for
+ * display once the control has been touched — mirroring the React forms, which
+ * showed field errors after interaction.
+ *
+ * Kept as an abstract base (not injectable) so each page owns its own typed
+ * `form`. Not an Angular component/service; no DI.
+ */
+@Directive()
+export abstract class ReactiveFormPageBase {
+	protected abstract readonly form: FormGroup;
+
+	/** Push an edited value into the named control and mark it touched/dirty. */
+	protected setControl(name: string, value: string): void {
+		const control = this.form.get(name);
+		if (!control) return;
+		control.setValue(value);
+		control.markAsDirty();
+		control.markAsTouched();
+	}
+
+	/**
+	 * Returns the message for the named error key on the control, but only once
+	 * the control has been touched (so pristine fields don't show errors).
+	 */
+	protected controlError(name: string, errorKey: string): string | null {
+		const control = this.form.get(name);
+		if (!control || !control.touched) return null;
+		const message = control.errors?.[errorKey];
+		return typeof message === "string" ? message : null;
+	}
+}

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/forms/submit-button/submit-button.component.html

@@ -0,0 +1,8 @@
+<app-button type="submit" [disabled]="submitting() || disabled()" class="w-full">
+	@if (submitting()) {
+		<app-spinner [diameter]="16" aria-hidden="true" />
+		{{ loadingLabel() }}
+	} @else {
+		{{ label() }}
+	}
+</app-button>

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/forms/submit-button/submit-button.component.scss

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+// Material lays the button's projected content out inside `.mdc-button__label`.
+// Make it a flex row so the spinner and the loading label sit on the same line,
+// vertically centred. Scoped under `:host` (via `::ng-deep`) so the override
+// only reaches this submit button's inner `matButton`, never other buttons.
+:host ::ng-deep .mdc-button__label {
+	display: flex;
+
+	> app-spinner {
+		margin: auto 1rem;
+	}
+}

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/forms/submit-button/submit-button.component.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { ButtonComponent } from "../../../../components/ui/button/button.component";
+import { SpinnerComponent } from "../../../../components/ui/spinner/spinner.component";
+
+/**
+ * Submit button that reflects form submission state — the Angular port of the
+ * React `SubmitButton`, which subscribed to `form.isSubmitting`.
+ *
+ * Reactive Forms have no equivalent subscription; instead the parent passes the
+ * form's `pending`/submitting flag via `[submitting]` and the caller-provided
+ * `[disabled]`. While submitting the button is disabled and shows a spinner with
+ * the loading label — the same UX (prevents double-submit + gives feedback).
+ */
+@Component({
+	selector: "app-submit-button",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [ButtonComponent, SpinnerComponent],
+	templateUrl: "./submit-button.component.html",
+	styleUrl: "./submit-button.component.scss",
+})
+export class SubmitButtonComponent {
+	/** Button text when not submitting. */
+	readonly label = input.required<string>();
+	/** Button text while submitting. */
+	readonly loadingLabel = input<string>("Submitting…");
+	/** True while the form submission is in flight. */
+	readonly submitting = input<boolean>(false);
+	/** Additional disabled condition from the caller (e.g. already authenticated). */
+	readonly disabled = input<boolean>(false);
+}

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/layouts/auth-app-layout/auth-app-layout.component.html

@@ -0,0 +1,2 @@
+<app-session-timeout-validator />
+<app-layout />

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/layouts/auth-app-layout/auth-app-layout.component.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { AppLayoutComponent } from "../../../../components/layout/app-layout/app-layout.component";
+import { SessionTimeoutValidatorComponent } from "../../session-timeout/session-timeout-validator/session-timeout-validator.component";
+
+/**
+ * Top-level app wrapper — the faithful Angular port of the React `AuthAppLayout`
+ * (`<AuthProvider><SessionTimeoutValidator/><AppLayout/></AuthProvider>`).
+ *
+ * There is no AuthProvider equivalent: `AuthService` is `providedIn: 'root'`, so
+ * auth state is app-wide automatically. This component renders the
+ * session-timeout validator (whose warning modal is thus available on every
+ * child route, exactly like React) followed by the base `app-layout`. Child
+ * routes render inside the base layout's own `<router-outlet />` post-compose.
+ *
+ * Wired as the top route node's `component` in `app.routes.ts`; the route-merger
+ * swaps the base layout node for this wrapper (the same element-swap object-search
+ * performs by repeating `component: AppLayoutComponent`).
+ */
+@Component({
+	selector: "app-auth-app-layout",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [SessionTimeoutValidatorComponent, AppLayoutComponent],
+	templateUrl: "./auth-app-layout.component.html",
+})
+export class AuthAppLayoutComponent {}