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

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/features/authentication/utils/helpers.ts

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * Error thrown when the API returns a non-OK response with structured error
+ * messages. The `errors` array contains user-facing messages that are safe to
+ * display — backend Apex classes guarantee that system exceptions are never
+ * exposed. Direct port of the React `ApiError`.
+ */
+export class ApiError extends Error {
+	readonly errors: string[];
+	constructor(errors: string[]) {
+		super(errors[0]);
+		this.name = "ApiError";
+		this.errors = errors;
+	}
+}
+
+/**
+ * Helper to parse the fetch Response. Handles the distinction between success
+ * (JSON) and failure (throwing Error). Ported from the React `handleApiResponse`.
+ */
+export async function handleApiResponse<T = unknown>(response: Response): Promise<T> {
+	// Robustness: Handle 204 No Content gracefully
+	if (response.status === 204) {
+		return {} as T;
+	}
+
+	let data: { errors?: string[] } | null = null;
+
+	const contentType = response.headers.get("content-type");
+	if (contentType?.includes("application/json")) {
+		data = (await response.json()) as { errors?: string[] };
+	} else {
+		// If Salesforce returns HTML (e.g. standard error page), consume the text
+		// to avoid parsing errors.
+		await response.text();
+	}
+
+	if (!response.ok) {
+		console.error("API request failed", data);
+		if (data?.errors?.length) {
+			throw new ApiError(data.errors);
+		}
+		throw new Error("An unexpected error occurred");
+	}
+
+	return data as T;
+}
+
+/** UI API Record response structure. */
+export type RecordResponse = {
+	fields: Record<string, { value: string }>;
+};
+
+/**
+ * GraphQL can return a complex nested structure. This helper flattens it to a
+ * simple object for easier form binding. Ported from the React
+ * `flattenGraphQLRecord`.
+ *
+ * @param data - Extracted payload from the GraphQL response.
+ * @param fallbackError - Fallback error message if data is null/undefined or not an object.
+ * @throws {Error} If data is not valid.
+ * @returns Flattened object with values mapped directly to the fields.
+ */
+export function flattenGraphQLRecord<T>(
+	data: unknown,
+	fallbackError = "An unknown error occurred",
+): T {
+	if (!data || typeof data !== "object") {
+		throw new Error(fallbackError);
+	}
+
+	return Object.fromEntries(
+		Object.entries(data as Record<string, unknown>).map(([key, field]) => [
+			key,
+			field !== null && typeof field === "object" && "value" in field
+				? (field as { value: unknown }).value
+				: (field ?? null),
+		]),
+	) as T;
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/features/authentication/utils/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/feature-angular-authentication/src/app/features/authentication/utils/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;

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/features/authentication/utils/session-timeout.service.ts

@@ -0,0 +1,201 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { Injectable, signal } from "@angular/core";
+import {
+	extendSessionTime,
+	pollSessionTimeServlet,
+	type SessionResponse,
+} from "./session-time-servlet";
+import {
+	INITIAL_RETRY_DELAY,
+	MAX_RETRY_ATTEMPTS,
+	MAX_RETRY_DELAY,
+	SESSION_WARNING_TIME,
+} from "./session-timeout.config";
+
+/**
+ * Session-timeout monitoring service — the Angular port of the React
+ * `useSessionTimeout` hook (plus the inlined `useRetryWithBackoff`). Polls
+ * SessionTimeServlet at calculated intervals, shows the warning window when the
+ * session nears expiry, and retries failed polls with exponential backoff.
+ *
+ * State is exposed as signals; the owning `SessionTimeoutValidatorComponent`
+ * reacts to them and performs navigation/logout (this service, like the React
+ * hook, never navigates — it only tracks time and schedules checks).
+ *
+ * NOT `providedIn: 'root'`: it is provided by the validator component so its
+ * timers are torn down with that component (mirrors the hook's unmount cleanup).
+ */
+@Injectable()
+export class SessionTimeoutService {
+	// -- Public session state (signals) --------------------------------------
+	/** Seconds remaining in the current session (null until first response). */
+	readonly timeLeftInSession = signal<number | null>(null);
+	/** Whether the warning modal should be displayed. */
+	readonly showWarningModal = signal<boolean>(false);
+	/** Whether a poll is currently in flight. */
+	readonly isPolling = signal<boolean>(false);
+
+	// -- Retry (exponential backoff) state ------------------------------------
+	private retryAttempts = 0;
+	private currentRetryDelay = INITIAL_RETRY_DELAY;
+
+	// -- Timer / guard bookkeeping --------------------------------------------
+	private basePath = "";
+	private pollTimeoutId: ReturnType<typeof setTimeout> | null = null;
+	private retryTimeoutId: ReturnType<typeof setTimeout> | null = null;
+	private isPollingGuard = false;
+
+	private get maxRetriesReached(): boolean {
+		return this.retryAttempts >= MAX_RETRY_ATTEMPTS;
+	}
+
+	private resetRetry(): void {
+		this.retryAttempts = 0;
+		this.currentRetryDelay = INITIAL_RETRY_DELAY;
+	}
+
+	private clearPollTimeout(): void {
+		if (this.pollTimeoutId) {
+			clearTimeout(this.pollTimeoutId);
+			this.pollTimeoutId = null;
+		}
+	}
+
+	private clearRetryTimeout(): void {
+		if (this.retryTimeoutId) {
+			clearTimeout(this.retryTimeoutId);
+			this.retryTimeoutId = null;
+		}
+	}
+
+	/**
+	 * Schedule the next session check, clearing any pending poll/retry to prevent
+	 * concurrent polling. Mirrors the hook's `scheduleCheck`.
+	 */
+	private scheduleCheck(delay: number): void {
+		this.clearPollTimeout();
+		this.clearRetryTimeout();
+		this.pollTimeoutId = setTimeout(() => {
+			void this.checkSession();
+		}, delay);
+	}
+
+	/**
+	 * Handle a failed poll/extend with exponential backoff. Mirrors the hook's
+	 * `handleRetryWithBackoff` + `useRetryWithBackoff.scheduleRetry`.
+	 */
+	private handleRetryWithBackoff(retryAction: () => void): void {
+		if (this.maxRetriesReached) {
+			console.error("[SessionTimeout] Max retry attempts reached. Stopping polling.");
+			this.isPolling.set(false);
+			this.isPollingGuard = false;
+			return;
+		}
+
+		if (this.isPollingGuard) {
+			console.warn("[SessionTimeout] Poll already in progress, skipping retry scheduling");
+			return;
+		}
+
+		this.clearRetryTimeout();
+
+		const delay = this.currentRetryDelay;
+		console.warn(
+			`[SessionTimeout] Scheduling retry attempt ${this.retryAttempts + 1}/${MAX_RETRY_ATTEMPTS} in ${delay}ms`,
+		);
+
+		this.retryTimeoutId = setTimeout(() => {
+			this.retryTimeoutId = null;
+			retryAction();
+		}, delay);
+
+		this.retryAttempts += 1;
+		// Double the delay for the next retry, capped at maxDelay.
+		this.currentRetryDelay = Math.min(this.currentRetryDelay * 2, MAX_RETRY_DELAY);
+	}
+
+	/**
+	 * Process a session response and schedule the next check. Mirrors the hook's
+	 * `processTimeoutResponse`. When `sr <= 0` the component's effect performs
+	 * logout; when within the warning window the modal is shown and a check is
+	 * scheduled for expiry; otherwise a check is scheduled for when the warning
+	 * should appear.
+	 */
+	private processTimeoutResponse(secondsRemaining: number): void {
+		this.timeLeftInSession.set(secondsRemaining);
+
+		if (secondsRemaining <= 0) {
+			this.showWarningModal.set(false);
+			// logout() is triggered by the component reacting to timeLeftInSession.
+			return;
+		}
+
+		const shouldShowWarning = secondsRemaining <= SESSION_WARNING_TIME;
+
+		if (shouldShowWarning) {
+			this.showWarningModal.set(true);
+			this.scheduleCheck(secondsRemaining * 1000);
+		} else {
+			const timeUntilWarning = (secondsRemaining - SESSION_WARNING_TIME) * 1000;
+			this.showWarningModal.set(false);
+			this.scheduleCheck(timeUntilWarning);
+		}
+	}
+
+	/** Check session status via the servlet. Mirrors the hook's `checkSession`. */
+	async checkSession(): Promise<void> {
+		if (this.isPollingGuard) {
+			return;
+		}
+
+		this.isPollingGuard = true;
+		this.isPolling.set(true);
+
+		const response = await pollSessionTimeServlet(this.basePath);
+		this.isPollingGuard = false;
+		this.isPolling.set(false);
+
+		this.applyResponse(response, () => void this.checkSession());
+	}
+
+	/** Extend the session (user clicked "Continue"). Mirrors `extendSession`. */
+	async extendSession(): Promise<void> {
+		const response = await extendSessionTime(this.basePath);
+		this.applyResponse(response, () => void this.extendSession());
+	}
+
+	private applyResponse(response: SessionResponse | undefined, retryAction: () => void): void {
+		if (response) {
+			this.resetRetry();
+			this.processTimeoutResponse(response.sr);
+		} else {
+			this.handleRetryWithBackoff(retryAction);
+		}
+	}
+
+	/**
+	 * Begin monitoring. Skips guests (mirrors the hook's guest short-circuit) and
+	 * kicks off the first check.
+	 */
+	start(basePath: string, isGuest: boolean): void {
+		this.basePath = basePath;
+		if (isGuest) {
+			return;
+		}
+		void this.checkSession();
+	}
+
+	/** Stop monitoring and reset state. Mirrors the hook's `logout` cleanup. */
+	stop(): void {
+		this.clearPollTimeout();
+		this.clearRetryTimeout();
+		this.showWarningModal.set(false);
+		this.timeLeftInSession.set(null);
+		this.isPolling.set(false);
+		this.isPollingGuard = false;
+	}
+}

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

@@ -0,0 +1,68 @@
+<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="Change Password"
+			description="Enter your current and new password below"
+			[showAlreadyLoggedIn]="false"
+			[error]="submitError()"
+			[success]="
+				success()
+					? 'Password changed successfully! Use the link below to return to your profile.'
+					: null
+			"
+			submitText="Change Password"
+			submitLoadingText="Changing…"
+			[submitting]="submitting()"
+			[submitDisabled]="success()"
+			[footer]="{ link: routes.PROFILE.PATH, linkText: 'Back to Profile' }"
+			(submitted)="onSubmit()"
+		>
+			<div class="mt-4 flex flex-col gap-4">
+				<app-field
+					label="Current Password"
+					htmlFor="change-current-password"
+					[error]="controlError('currentPassword', 'required')"
+				>
+					<app-input
+						type="password"
+						[value]="form.controls.currentPassword.value ?? ''"
+						(valueChange)="setControl('currentPassword', $event)"
+						[placeholder]="placeholders.PASSWORD"
+						[disabled]="success()"
+					/>
+				</app-field>
+
+				<app-field
+					label="New Password"
+					htmlFor="change-new-password"
+					[error]="controlError('newPassword', 'password')"
+				>
+					<app-input
+						type="password"
+						[value]="form.controls.newPassword.value ?? ''"
+						(valueChange)="setControl('newPassword', $event)"
+						[placeholder]="placeholders.PASSWORD_NEW"
+						[disabled]="success()"
+					/>
+				</app-field>
+
+				<app-field
+					label="Confirm Password"
+					htmlFor="change-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_NEW_CONFIRM"
+						[disabled]="success()"
+					/>
+				</app-field>
+			</div>
+		</app-auth-form>
+	</div>
+</main>

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

@@ -0,0 +1,82 @@
+/**
+ * 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 {
+	passwordMinValidator,
+	passwordsMatchValidator,
+	requiredWithMessage,
+} from "../../features/authentication/utils/auth-validators";
+
+/**
+ * Change-password page — Angular port of the React `ChangePassword`. Protected
+ * route (guarded in `app.routes.ts`). Sends `{ currentPassword, newPassword }`;
+ * on success it resets the form and shows a success alert with a Back-to-Profile
+ * link. `showAlreadyLoggedIn` is false (the user is expected to be logged in).
+ */
+@Component({
+	selector: "app-change-password-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [AuthFormComponent, FieldComponent, InputComponent],
+	templateUrl: "./change-password-page.html",
+})
+export class ChangePasswordPageComponent 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(
+		{
+			currentPassword: ["", [requiredWithMessage("Current password is required")]],
+			newPassword: ["", [passwordMinValidator]],
+			confirmPassword: ["", [requiredWithMessage("Please confirm your password")]],
+		},
+		{ validators: [passwordsMatchValidator("newPassword", "confirmPassword")] },
+	);
+
+	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 { currentPassword, newPassword } = this.form.getRawValue();
+			const response = await this.dataClient.fetch(API_ROUTES.CHANGE_PASSWORD, {
+				method: "POST",
+				body: JSON.stringify({ currentPassword, newPassword }),
+				headers: { "Content-Type": "application/json", Accept: "application/json" },
+			});
+			await handleApiResponse(response);
+			this.success.set(true);
+			this.form.reset({ currentPassword: "", newPassword: "", confirmPassword: "" });
+		} catch (err) {
+			console.error("Password change failed", err);
+			this.submitError.set(err instanceof ApiError ? err.errors : "Password change failed");
+		} finally {
+			this.submitting.set(false);
+		}
+	}
+}

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

@@ -0,0 +1,35 @@
+<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="Forgot Password"
+			description="Enter your username and we'll send you a reset link"
+			[error]="submitError()"
+			[success]="
+				success()
+					? 'If that username exists in our system, you will receive a reset link shortly.'
+					: null
+			"
+			submitText="Send Reset Link"
+			submitLoadingText="Sending…"
+			[submitting]="submitting()"
+			[submitDisabled]="success()"
+			[footer]="{ text: 'Remember your password?', link: routes.LOGIN.PATH, linkText: 'Sign in' }"
+			(submitted)="onSubmit()"
+		>
+			<div class="mt-4 flex flex-col gap-4">
+				<app-field
+					label="Username"
+					htmlFor="forgot-username"
+					[error]="controlError('username', 'email')"
+				>
+					<app-input
+						[value]="form.controls.username.value ?? ''"
+						(valueChange)="setControl('username', $event)"
+						[placeholder]="placeholders.USERNAME"
+						[disabled]="success()"
+					/>
+				</app-field>
+			</div>
+		</app-auth-form>
+	</div>
+</main>