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

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

@@ -0,0 +1,17 @@
+<div class="p-4">
+	<app-card class="w-full">
+		@if (title() || subtitle()) {
+			<app-card-header>
+				@if (title()) {
+					<app-card-title>{{ title() }}</app-card-title>
+				}
+				@if (subtitle()) {
+					<app-card-description>{{ subtitle() }}</app-card-description>
+				}
+			</app-card-header>
+		}
+		<app-card-content>
+			<ng-content />
+		</app-card-content>
+	</app-card>
+</div>

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

@@ -0,0 +1,40 @@
+/**
+ * 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 {
+	CardComponent,
+	CardContentComponent,
+	CardDescriptionComponent,
+	CardHeaderComponent,
+	CardTitleComponent,
+} from "../../../../components/ui/card/card.component";
+
+/**
+ * Centered page shell for auth pages — a feature-owned composition over the base
+ * `app-card` ui primitives (not a base-template component). Renders a single
+ * `app-card` centered in the viewport with an optional title / subtitle header,
+ * and content-projects the page body.
+ *
+ * Consumed by the authentication login / register / reset pages as the
+ * `CenteredPageLayout` analogue's card frame. Tailwind utilities pass through
+ * via the host `class`.
+ */
+@Component({
+	selector: "app-card-layout",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		CardComponent,
+		CardHeaderComponent,
+		CardTitleComponent,
+		CardDescriptionComponent,
+		CardContentComponent,
+	],
+	templateUrl: "./card-layout.component.html",
+})
+export class CardLayoutComponent {
+	readonly title = input<string>("");
+	readonly subtitle = input<string | null>(null);
+}

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

@@ -0,0 +1,26 @@
+@if (loading()) {
+	<app-skeleton class="size-8 rounded-full" />
+} @else {
+	<button matIconButton [matMenuTriggerFor]="menu" aria-label="User menu">
+		<mat-icon>person</mat-icon>
+	</button>
+
+	<mat-menu #menu="matMenu" xPosition="before">
+		@if (isAuthenticated()) {
+			<div class="px-3 py-2 font-medium truncate">{{ user()?.name }}</div>
+			<hr />
+			<a mat-menu-item [routerLink]="routes.PROFILE.PATH">Edit Profile</a>
+			<ng-content select="[menuItems]" />
+			<button mat-menu-item type="button" (click)="onLogout()">Sign Out</button>
+		} @else {
+			<a mat-menu-item [routerLink]="routes.LOGIN.PATH">
+				<mat-icon>login</mat-icon>
+				<span>Log In</span>
+			</a>
+			<a mat-menu-item [routerLink]="routes.REGISTER.PATH">
+				<mat-icon>person_add</mat-icon>
+				<span>Register</span>
+			</a>
+		}
+	</mat-menu>
+}

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

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+import { RouterLink } from "@angular/router";
+import { MatButtonModule } from "@angular/material/button";
+import { MatIconModule } from "@angular/material/icon";
+import { MatMenuModule } from "@angular/material/menu";
+import { SkeletonComponent } from "../../../../components/ui/skeleton/skeleton.component";
+import { AuthService } from "../../auth/auth.service";
+import { ROUTES } from "../../config/authentication.config";
+
+/**
+ * Auth menu — the Angular port of the React `AuthMenu`. A header dropdown that
+ * shows the authenticated user's name + Edit Profile / Sign Out, or Log In /
+ * Register for guests. While auth state is loading it shows a skeleton avatar.
+ *
+ * Owns its own trigger and `mat-menu` (the canonical Material menu shape): an
+ * icon-only person button carries `matMenuTriggerFor`, so the trigger — with its
+ * `aria-haspopup` / `aria-expanded` / keyboard handling — sits on a real focusable
+ * `<button>`. Extra items can be inserted before Sign Out via `[menuItems]`
+ * projection.
+ *
+ * Reads `AuthService` directly (the `providedIn: 'root'` replacement for
+ * `useAuth`), so no inputs are needed for auth state.
+ */
+@Component({
+	selector: "app-auth-menu",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterLink, MatButtonModule, MatIconModule, MatMenuModule, SkeletonComponent],
+	templateUrl: "./auth-menu.component.html",
+})
+export class AuthMenuComponent {
+	private readonly authService = inject(AuthService);
+
+	protected readonly routes = ROUTES;
+	protected readonly user = this.authService.user;
+	protected readonly isAuthenticated = this.authService.isAuthenticated;
+	protected readonly loading = this.authService.loading;
+
+	protected onLogout(): void {
+		this.authService.logout();
+	}
+}

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/session-timeout/session-time-servlet.ts

@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * SessionTimeServlet API helpers — direct (pure-TS) port of the React
+ * `sessionTimeService.ts`. Handles communication with the session validation
+ * endpoint, strips the CSRF prefix, and subtracts the latency buffer. Returns
+ * `undefined` on any failure so the session-timeout feature never crashes the
+ * running application.
+ */
+
+import { SESSION_CONFIG } from "./session-timeout.config";
+
+/** Response from SessionTimeServlet API. */
+export interface SessionResponse {
+	/** Session phase. */
+	sp: number;
+	/** Seconds remaining in session. */
+	sr: number;
+}
+
+/**
+ * Parse the servlet response text into a SessionResponse object. Handles the
+ * CSRF protection prefix.
+ *
+ * @param text - Raw response text from servlet.
+ * @returns Parsed session response, or undefined if parsing fails.
+ */
+export function parseResponseResult(text: string): SessionResponse | undefined {
+	let cleanedText = text;
+
+	// Strip CSRF protection prefix if present.
+	if (cleanedText.startsWith(SESSION_CONFIG.CSRF_TOKEN)) {
+		cleanedText = cleanedText.substring(SESSION_CONFIG.CSRF_TOKEN.length);
+	}
+
+	// Trim whitespace.
+	cleanedText = cleanedText.trim();
+
+	try {
+		const parsed = JSON.parse(cleanedText) as SessionResponse;
+
+		// Validate response structure.
+		if (typeof parsed.sp !== "number" || typeof parsed.sr !== "number") {
+			throw new Error("Invalid response structure: missing sp or sr properties");
+		}
+
+		return parsed;
+	} catch (error) {
+		console.error("[sessionTimeService] Failed to parse response:", error, "Text:", cleanedText);
+		return undefined;
+	}
+}
+
+/**
+ * Call SessionTimeServlet API. Internal function used by both poll and extend.
+ * Returns undefined on any failure.
+ *
+ * @param basePath - Community base path (e.g., "/sfsites/c/").
+ * @param extend - Whether to extend the session (updateTimedOutSession param).
+ */
+async function callSessionTimeServlet(
+	basePath: string,
+	extend = false,
+): Promise<SessionResponse | undefined> {
+	// Build URL with cache-busting timestamp.
+	const timestamp = Date.now();
+	let url = `${basePath}${SESSION_CONFIG.SERVLET_URL}?buster=${timestamp}`;
+
+	if (extend) {
+		url += "&updateTimedOutSession=true";
+	}
+
+	try {
+		const response = await fetch(url, {
+			method: "GET",
+			credentials: "same-origin",
+			cache: "no-cache",
+			headers: {
+				"X-Requested-With": "XMLHttpRequest",
+			},
+		});
+
+		if (!response.ok) {
+			console.error(`[sessionTimeService] HTTP ${response.status}: ${response.statusText}`);
+			return undefined;
+		}
+
+		const contentType = response.headers.get("content-type");
+		if (contentType && !contentType.includes("text") && !contentType.includes("json")) {
+			console.error(`[sessionTimeService] Unexpected content type: ${contentType}`);
+			return undefined;
+		}
+
+		const text = await response.text();
+		const parsed = parseResponseResult(text);
+		if (!parsed) {
+			return undefined;
+		}
+
+		return {
+			sp: parsed.sp,
+			sr: Math.max(0, parsed.sr - SESSION_CONFIG.LATENCY_BUFFER_SECONDS),
+		};
+	} catch (error) {
+		console.error("[sessionTimeService] API call failed:", error);
+		return undefined;
+	}
+}
+
+/**
+ * Poll SessionTimeServlet to check remaining session time. Called periodically
+ * to monitor session status.
+ */
+export async function pollSessionTimeServlet(
+	basePath: string,
+): Promise<SessionResponse | undefined> {
+	return callSessionTimeServlet(basePath, false);
+}
+
+/**
+ * Extend the current session time. Called when the user clicks "Continue" in the
+ * warning modal.
+ */
+export async function extendSessionTime(basePath: string): Promise<SessionResponse | undefined> {
+	return callSessionTimeServlet(basePath, true);
+}

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/session-timeout/session-timeout-validator/session-timeout-validator.component.html

@@ -0,0 +1,57 @@
+@if (showWarningModal()) {
+	<app-dialog [open]="true" [closeOnBackdrop]="false">
+		<div
+			class="max-w-md"
+			role="alertdialog"
+			aria-labelledby="session-warning-title"
+			aria-describedby="session-warning-description"
+		>
+			<h2 id="session-warning-title" class="text-lg font-semibold">
+				{{ labels.sessionWarningTitle }}
+			</h2>
+			<p id="session-warning-description" class="text-sm text-muted-foreground mt-1">
+				{{ labels.sessionWarningMessage }}
+			</p>
+
+			<div class="flex flex-col items-center gap-4 py-6">
+				<time
+					[attr.datetime]="isoTime()"
+					role="timer"
+					aria-live="off"
+					aria-atomic="true"
+					aria-describedby="session-warning-description"
+					class="text-5xl font-bold text-center tabular-nums text-destructive"
+				>
+					{{ formattedTime() }}
+				</time>
+			</div>
+
+			<div class="flex gap-4 justify-end">
+				<app-button variant="outlined" (clicked)="onLogoutClick()">
+					{{ labels.logoutButton }}
+				</app-button>
+				<app-button variant="filled" (clicked)="onContinue()">
+					{{ labels.continueButton }}
+				</app-button>
+			</div>
+		</div>
+	</app-dialog>
+}
+
+@if (showExpiredAlert()) {
+	<div class="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-full max-w-md px-4">
+		<app-status-alert
+			variant="error"
+			[title]="labels.sessionWarningTitle"
+			[message]="labels.invalidSessionMessage"
+		/>
+		<button
+			type="button"
+			class="sr-only"
+			[attr.aria-label]="labels.closeLabel"
+			(click)="onDismissAlert()"
+		>
+			{{ labels.closeLabel }}
+		</button>
+	</div>
+}

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/session-timeout/session-timeout-validator/session-timeout-validator.component.ts

@@ -0,0 +1,205 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	ChangeDetectionStrategy,
+	Component,
+	DestroyRef,
+	effect,
+	inject,
+	OnInit,
+	signal,
+} from "@angular/core";
+import { Router } from "@angular/router";
+import { DialogComponent } from "../../../../components/ui/dialog/dialog.component";
+import { StatusAlertComponent } from "../../components/status-alert/status-alert.component";
+import { ButtonComponent } from "../../../../components/ui/button/button.component";
+import { AuthService } from "../../auth/auth.service";
+import { SessionTimeoutService } from "../session-timeout.service";
+import { LABELS, STORAGE_KEYS } from "../session-timeout.config";
+import { ROUTES } from "../../config/authentication.config";
+
+/**
+ * Session-timeout validator — the Angular port of the React
+ * `SessionTimeoutValidator`. Rendered app-wide by `AuthAppLayoutComponent` so
+ * the warning modal is available on every route (exactly like React).
+ *
+ * Responsibilities (all mirrored from React):
+ * - Starts polling via `SessionTimeoutService` on init, skipping guest users.
+ * - Shows a non-dismissable warning modal with a live countdown when the session
+ *   nears expiry; "Continue" extends the session, "Log Out" logs out.
+ * - When the countdown reaches 0 it re-checks the server before logging out
+ *   (prevents premature logout).
+ * - On expiry it sets the `showSessionMessage` sessionStorage flag then calls
+ *   `AuthService.logout(window.location.pathname)` (hard nav).
+ * - On the login page, if the flag is set, shows the session-expired alert once
+ *   (lazily read at init, since the expiry logout hard-navigates and this
+ *   component always remounts fresh on login).
+ *
+ * `SessionTimeoutService` is provided here so its timers are scoped to this
+ * component's lifetime (mirrors the hook's unmount cleanup).
+ */
+@Component({
+	selector: "app-session-timeout-validator",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	providers: [SessionTimeoutService],
+	imports: [DialogComponent, StatusAlertComponent, ButtonComponent],
+	templateUrl: "./session-timeout-validator.component.html",
+})
+export class SessionTimeoutValidatorComponent implements OnInit {
+	private readonly authService = inject(AuthService);
+	private readonly session = inject(SessionTimeoutService);
+	private readonly destroyRef = inject(DestroyRef);
+	private readonly router = inject(Router);
+
+	protected readonly labels = LABELS;
+
+	// Community base path. React hard-codes "" here (root-relative); kept identical.
+	private readonly basePath = "";
+
+	// -- Exposed session state (from the service) ----------------------------
+	protected readonly showWarningModal = this.session.showWarningModal;
+	protected readonly timeLeftInSession = this.session.timeLeftInSession;
+
+	// -- Session-expired alert (lazy, read once at init) ---------------------
+	protected readonly showExpiredAlert = signal<boolean>(false);
+
+	// -- Countdown state (mirrors useCountdownTimer) -------------------------
+	protected readonly countdownSeconds = signal<number>(0);
+	private countdownIntervalId: ReturnType<typeof setInterval> | null = null;
+	private countdownEndTime = 0;
+	private lastModalOpen = false;
+
+	constructor() {
+		// React's SessionWarningModal resets+starts the countdown when the modal
+		// opens and stops it when it closes. This effect mirrors that: it reacts to
+		// the warning-modal signal and (re)starts the countdown from the latest
+		// remaining time whenever the modal is open.
+		effect(() => {
+			const open = this.showWarningModal();
+			const remaining = this.timeLeftInSession() ?? 0;
+			if (open) {
+				this.startCountdown(remaining);
+			} else if (this.lastModalOpen) {
+				this.stopCountdown();
+			}
+			this.lastModalOpen = open;
+		});
+
+		// Auto-logout when the countdown/poll reports the session is expired and the
+		// user is not a guest (mirrors the React expiry `useEffect`).
+		effect(() => {
+			const timeLeft = this.timeLeftInSession();
+			if (timeLeft !== null && timeLeft <= 0 && !this.isGuest()) {
+				this.handleLogout();
+			}
+		});
+	}
+
+	ngOnInit(): void {
+		// Session-expired alert: checked once at init via a lazy read. The expiry
+		// handler triggers a hard navigation, so this component always mounts fresh
+		// on the login page after expiry.
+		//
+		// Compare against the router's parsed URL (base-href/community-path stripped)
+		// rather than `window.location.pathname`: the raw browser path includes any
+		// base href (e.g. `/sfsites/c/.../login`) and would never equal `/login`,
+		// silently hiding the banner. `router.url` is router-relative, matching the
+		// React `useLocation().pathname` behavior. Strip the query/fragment before
+		// comparing.
+		const routerPath = this.router.url.split(/[?#]/)[0];
+		const isLoginPage = routerPath === ROUTES.LOGIN.PATH;
+		const shouldShow =
+			isLoginPage && sessionStorage.getItem(STORAGE_KEYS.SHOW_SESSION_MESSAGE) === "true";
+		if (shouldShow) {
+			sessionStorage.removeItem(STORAGE_KEYS.SHOW_SESSION_MESSAGE);
+			this.showExpiredAlert.set(true);
+		}
+
+		// Start monitoring (service skips guests internally).
+		this.session.start(this.basePath, this.isGuest());
+
+		this.destroyRef.onDestroy(() => {
+			this.session.stop();
+			this.stopCountdown();
+		});
+	}
+
+	private isGuest(): boolean {
+		return !this.authService.isAuthenticated();
+	}
+
+	// -- Countdown ------------------------------------------------------------
+
+	private startCountdown(seconds: number): void {
+		this.stopCountdown();
+		this.countdownSeconds.set(seconds);
+		this.countdownEndTime = Date.now() + seconds * 1000;
+		this.countdownIntervalId = setInterval(() => {
+			const remainingMs = this.countdownEndTime - Date.now();
+			const newTime = Math.max(0, Math.ceil(remainingMs / 1000));
+			this.countdownSeconds.set(newTime);
+			if (newTime <= 0) {
+				this.stopCountdown();
+				// Re-check with the server before logging out (React onCountdownExpire).
+				void this.session.checkSession();
+			}
+		}, 100);
+	}
+
+	private stopCountdown(): void {
+		if (this.countdownIntervalId) {
+			clearInterval(this.countdownIntervalId);
+			this.countdownIntervalId = null;
+		}
+	}
+
+	/** MM:SS formatted countdown (mirrors useCountdownTimer.formattedTime). */
+	protected formattedTime(): string {
+		const total = this.countdownSeconds();
+		const minutes = Math.floor(total / 60);
+		const secs = total % 60;
+		const pad = (n: number) => n.toString().padStart(2, "0");
+		return `${pad(minutes)}:${pad(secs)}`;
+	}
+
+	/** ISO 8601 duration for the <time> element (mirrors isoTime). */
+	protected isoTime(): string {
+		const total = this.countdownSeconds();
+		const minutes = Math.floor(total / 60);
+		const secs = total % 60;
+		return `PT${minutes}M${secs}S`;
+	}
+
+	// -- Actions --------------------------------------------------------------
+
+	/** "Continue" — stop countdown and extend the session. */
+	protected onContinue(): void {
+		this.stopCountdown();
+		void this.session.extendSession();
+	}
+
+	/** "Log Out" button in the warning modal. */
+	protected onLogoutClick(): void {
+		this.stopCountdown();
+		this.handleLogout();
+	}
+
+	/** Dismiss the session-expired alert. */
+	protected onDismissAlert(): void {
+		this.showExpiredAlert.set(false);
+	}
+
+	/**
+	 * Set the session-message flag, stop monitoring, then hand off to the
+	 * centralized logout (hard nav). Passes the current pathname as the return
+	 * URL. Mirrors the React `handleLogout`.
+	 */
+	private handleLogout(): void {
+		sessionStorage.setItem(STORAGE_KEYS.SHOW_SESSION_MESSAGE, "true");
+		this.session.stop();
+		this.authService.logout(window.location.pathname);
+	}
+}

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

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * Configuration constants for session timeout monitoring. Direct port of the
+ * React `sessionTimeoutConfig.ts` — values are byte-for-byte identical so the
+ * polling cadence, retry backoff, and warning window match exactly.
+ */
+
+// ---------------------------------------------------------------------------
+// Retry Configuration
+// ---------------------------------------------------------------------------
+
+/** Initial delay for first retry attempt (2 seconds). */
+export const INITIAL_RETRY_DELAY = 2000;
+
+/** Maximum number of retry attempts before giving up. */
+export const MAX_RETRY_ATTEMPTS = 10;
+
+/** Maximum retry delay (30 minutes). */
+export const MAX_RETRY_DELAY = 30 * 60 * 1000;
+
+// ---------------------------------------------------------------------------
+// Session Storage Keys
+// ---------------------------------------------------------------------------
+
+/** sessionStorage keys used by the session validator. */
+export const STORAGE_KEYS = {
+	/** Flag to show session expired message on login page. */
+	SHOW_SESSION_MESSAGE: "lwrSessionValidator.showSessionMessage",
+} as const;
+
+// ---------------------------------------------------------------------------
+// Servlet Configuration
+// ---------------------------------------------------------------------------
+
+/** SessionTimeServlet configuration. */
+export const SESSION_CONFIG = {
+	/** Relative URL to SessionTimeServlet. */
+	SERVLET_URL: "/sfsites/c/_nc_external/system/security/session/SessionTimeServlet",
+
+	/** Latency buffer to subtract from server response (seconds). */
+	LATENCY_BUFFER_SECONDS: 3,
+
+	/** CSRF protection prefix in servlet responses. */
+	CSRF_TOKEN: "while(1);\n",
+} as const;
+
+// ---------------------------------------------------------------------------
+// UI Labels
+// ---------------------------------------------------------------------------
+
+/** UI labels for session timeout components. */
+export const LABELS = {
+	/** Title for session warning modal. */
+	sessionWarningTitle: "Session Timeout Warning",
+
+	/** Message text in session warning modal. */
+	sessionWarningMessage:
+		"For security, we log you out if you’re inactive for too long. To continue working, click Continue before the time expires.",
+
+	/** Text for "Continue" button. */
+	continueButton: "Continue",
+
+	/** Text for "Log Out" button. */
+	logoutButton: "Log Out",
+
+	/** Message shown on login page after session expires. */
+	invalidSessionMessage: "Your session has expired. Please log in again.",
+
+	/** Accessibility label for close button. */
+	closeLabel: "Close",
+} as const;
+
+// ---------------------------------------------------------------------------
+// Session Timeout Configuration
+// ---------------------------------------------------------------------------
+
+/** Session warning time in seconds (30 seconds). */
+export const SESSION_WARNING_TIME = 30;