@salesforce/templates 66.11.1 → 66.12.0

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

@@ -0,0 +1,60 @@
+<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 (!token) {
+		<app-card-layout title="Reset Password">
+			<app-status-alert variant="error">
+				Reset token is invalid or expired.
+				<a [routerLink]="routes.FORGOT_PASSWORD.PATH" class="underline underline-offset-4">
+					Request a new password reset link.
+				</a>
+			</app-status-alert>
+		</app-card-layout>
+		} @else {
+		<app-auth-form
+			title="Reset Password"
+			description="Enter your new password below"
+			[error]="submitError()"
+			[success]="success() ? 'Password reset successfully! Use the link below to sign in.' : null"
+			submitText="Reset Password"
+			submitLoadingText="Resetting…"
+			[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="New Password"
+					htmlFor="reset-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="reset-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/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/pages/reset-password/reset-password-page.ts

@@ -0,0 +1,96 @@
+/**
+ * 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, 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 { CardLayoutComponent } from "../../features/authentication/card-layout/card-layout";
+import { StatusAlertComponent } from "../../features/authentication/status-alert/status-alert";
+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";
+
+/**
+ * Reset-password page — Angular port of the React `ResetPassword`.
+ *
+ * The reset `token` comes from the `?token=` query param; when absent the page
+ * shows the "invalid or expired" card (identical to React) instead of the form.
+ * The POST sends `{ token, newPassword }`; on success it shows a success alert
+ * with a Sign-in link and scrolls to top.
+ */
+@Component({
+	selector: "app-reset-password-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		RouterLink,
+		AuthFormComponent,
+		CardLayoutComponent,
+		StatusAlertComponent,
+		FieldComponent,
+		InputComponent,
+	],
+	templateUrl: "./reset-password-page.html",
+})
+export class ResetPasswordPageComponent extends ReactiveFormPageBase {
+	private readonly fb = inject(FormBuilder);
+	private readonly route = inject(ActivatedRoute);
+	private readonly dataClient = inject(DataClient);
+
+	protected readonly placeholders = AUTH_PLACEHOLDERS;
+	protected readonly routes = ROUTES;
+	protected readonly token = this.route.snapshot.queryParamMap.get("token");
+
+	protected override readonly form = this.fb.group(
+		{
+			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 newPassword = this.form.controls.newPassword.value ?? "";
+			const response = await this.dataClient.fetch(API_ROUTES.RESET_PASSWORD, {
+				method: "POST",
+				body: JSON.stringify({ token: this.token, newPassword }),
+				headers: { "Content-Type": "application/json", Accept: "application/json" },
+			});
+			await handleApiResponse(response);
+			this.success.set(true);
+			// Scroll to top of page after successful submission so user sees it.
+			window.scrollTo({ top: 0, behavior: "smooth" });
+		} catch (err) {
+			console.error("Password reset failed", err);
+			this.submitError.set(err instanceof ApiError ? err.errors : "Password reset failed");
+		} finally {
+			this.submitting.set(false);
+		}
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/utils/async-data.ts

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { effect, Injector, signal, type Signal } from '@angular/core';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { from, of, switchMap } from 'rxjs';
+import { catchError, map, tap } from 'rxjs/operators';
+
+/** Reactive async-data snapshot: current data, loading, and error. */
+export interface AsyncData<T> {
+	/** Latest successful result. Kept visible during a refetch. */
+	readonly data: Signal<T | null>;
+	/** True while a fetch for the current args is in flight. */
+	readonly loading: Signal<boolean>;
+	/** Error message from the most recent failed fetch, else null. */
+	readonly error: Signal<string | null>;
+}
+
+/**
+ * The Angular analogue of the React `useAsyncData` hook.
+ *
+ * Re-runs `fetcher(args)` whenever the `args` signal changes, using RxJS
+ * `switchMap` so an in-flight request is cancelled (ignored) when newer args
+ * arrive — the latest-wins guarantee, matching the React hook's cleanup flag.
+ *
+ * Behavioural parity notes:
+ * - `loading` flips true the instant args change and false when the matching
+ *   response resolves.
+ * - `data` retains the previous result while a refetch is in flight (avoids a
+ *   flash of empty state); it only resets to `null` on error.
+ * - Errors are surfaced as a message string and logged, mirroring the hook.
+ *
+ * Must be called within an injection context (component/service constructor or
+ * field initializer) unless an `injector` is supplied.
+ *
+ * @param argsSignal - Reactive inputs; a change triggers a refetch.
+ * @param fetcher    - Async function producing the result for the given args.
+ * @param injector   - Optional injector when called outside an injection context.
+ */
+export function createAsyncData<TArgs, T>(
+	argsSignal: Signal<TArgs>,
+	fetcher: (args: TArgs) => Promise<T>,
+	injector?: Injector,
+): AsyncData<T> {
+	const data = signal<T | null>(null);
+	const error = signal<string | null>(null);
+	// A fetch is pending from the moment args change until its response lands.
+	const pending = signal(true);
+
+	const args$ = toObservable(argsSignal, injector ? { injector } : undefined);
+
+	const result = toSignal(
+		args$.pipe(
+			// Mark loading + clear stale error synchronously as new args arrive.
+			tap(() => {
+				pending.set(true);
+				error.set(null);
+			}),
+			switchMap((args) =>
+				from(fetcher(args)).pipe(
+					map((value) => ({ value, err: null as string | null })),
+					catchError((err: unknown) => {
+						console.error(err);
+						return of({
+							value: null as T | null,
+							err: err instanceof Error ? err.message : 'An error occurred',
+						});
+					}),
+				),
+			),
+			tap((outcome) => {
+				if (outcome.err !== null) {
+					error.set(outcome.err);
+					data.set(null);
+				} else {
+					data.set(outcome.value);
+				}
+				pending.set(false);
+			}),
+		),
+		{ initialValue: null, ...(injector ? { injector } : {}) },
+	);
+
+	// Keep `result` subscribed so the pipeline runs even if no template reads it.
+	effect(
+		() => {
+			result();
+		},
+		injector ? { injector } : undefined,
+	);
+
+	return {
+		data: data.asReadonly(),
+		loading: pending.asReadonly(),
+		error: error.asReadonly(),
+	};
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>MyAngularApp</title>
+		<base href="/" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" type="image/x-icon" href="favicon.ico" />
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+	</head>
+	<body>
+		<app-root></app-root>
+	</body>
+</html>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/styles.scss

@@ -0,0 +1,170 @@
+@import 'tailwindcss';
+
+@layer base {
+	html,
+	body {
+		@apply min-h-screen;
+	}
+
+	body {
+		@apply antialiased bg-white;
+	}
+}
+
+@custom-variant dark (&:is(.dark *));
+
+/*
+ * shadcn design tokens, ported from the React base app's global.css so the
+ * shared object-search feature (bg-card, text-muted-foreground, border-border,
+ * rounded-* via --radius, etc.) renders identically in Angular. The React base
+ * also imports tw-animate-css and shadcn/tailwind.css (accordion keyframes +
+ * data-* variants) — omitted here as they are not installed for the Angular
+ * base and are not required for layout/color parity.
+ */
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+/*
+ * Angular Material colour re-skin — layered on top of the custom M3 theme
+ * defined in theme.scss. The theme owns density (compact control heights) and
+ * seeds the base `--mat-sys-*` system variables; here we remap the colour and
+ * shape system variables to our shadcn design tokens so every Material
+ * component adopts the shadcn look without touching component code. This block
+ * loads after theme.scss, so these values win.
+ *
+ * Control sizing is NOT set here — density handles heights, and any remaining
+ * form-field-specific styling lives in the component's own scoped CSS.
+ */
+:root {
+	--mat-sys-primary: var(--primary);
+	--mat-sys-on-primary: var(--primary-foreground);
+	--mat-sys-surface: var(--background);
+	--mat-sys-on-surface: var(--foreground);
+	--mat-sys-surface-variant: var(--muted);
+	--mat-sys-on-surface-variant: var(--muted-foreground);
+	--mat-sys-outline: var(--border);
+	--mat-sys-outline-variant: var(--border);
+	--mat-sys-error: var(--destructive);
+	--mat-sys-corner-small: var(--radius-sm);
+	--mat-sys-corner-medium: var(--radius-md);
+	--mat-sys-corner-large: var(--radius-lg);
+
+	// Card subtitle — Material defaults this to `--mat-sys-on-surface` (the same
+	// dark colour as the title). React renders the card description in muted
+	// grey (`text-muted-foreground`), so point the subtitle token there.
+	--mat-card-subtitle-text-color: var(--muted-foreground);
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/theme.scss

@@ -0,0 +1,39 @@
+// Copyright (c) 2026, Salesforce, Inc.,
+// All rights reserved.
+// For full license text, see the LICENSE.txt file
+
+// Angular Material M3 theme.
+// See https://material.angular.dev/guide/theming.
+//
+// This replaces the prebuilt azure-blue theme so we can set a negative
+// `density` — the standard, system-driven way to get the compact control
+// heights the React reference uses (no hardcoded pixel heights anywhere).
+//
+// Colour is intentionally NOT finalised here: the shadcn design tokens are
+// applied on top by remapping `--mat-sys-*` in styles.css, which loads after
+// this file. The palette below only seeds Material's base system variables.
+@use '@angular/material' as mat;
+
+html {
+	@include mat.theme(
+		(
+			color: (
+				theme-type: light,
+				primary: mat.$azure-palette,
+				tertiary: mat.$blue-palette,
+			),
+			// Font family reads Tailwind's system stack (`--font-sans`, the same
+			// default the React reference uses) instead of Material's Roboto, so
+			// Material components and Tailwind-styled text share one font. Tailwind
+			// is the single source of the family; the typescale sizes/weights stay
+			// Material's own.
+			typography: (
+					plain-family: var(--font-sans),
+					brand-family: var(--font-sans),
+				),
+			// Compact density (scale 0 to -5). Drives control heights via
+			// Material's own tokens instead of hardcoded px.
+			density: -2,
+		)
+	);
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/types/sf-globals.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Build-time constants injected via esbuild `define`. Substituted by
+ * @salesforce/angular-plugin-ui-bundle during build (see esbuild/api-version.mjs
+ * and angular.json plugins[]).
+ *
+ * Without substitution, `@salesforce/platform-sdk` and `@salesforce/ui-bundle`
+ * fall back to "65.0" — the published packages contain the literal token.
+ */
+declare const __SF_API_VERSION__: string;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/tsconfig.app.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/tsconfig.json

@@ -0,0 +1,33 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/tsconfig.spec.json

@@ -0,0 +1,10 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["vitest/globals"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/ui-bundle.json

@@ -0,0 +1,7 @@
+{
+  "outputDir": "dist",
+  "routing": {
+    "trailingSlash": "never",
+    "fallback": "index.html"
+  }
+}

package/lib/templates/project/angularextapp/_p_/_m_/classes/UIBundleAuthUtils.cls

@@ -0,0 +1,68 @@
+/**
+ * Utility class for Web Application authentication REST endpoints.
+ */
+public without sharing class UIBundleAuthUtils {
+
+    /**
+     * Exception for authentication errors with HTTP status code support.
+     */
+    public class AuthException extends Exception {
+        public Integer statusCode { get; private set; } // HTTP status code (e.g. 400, 500)
+        public List<String> messages { get; private set; } // List of error messages
+
+        public AuthException(Integer statusCode, String message) {
+            this.statusCode = statusCode;
+            this.messages = new List<String>{ message };
+        }
+
+        public AuthException(Integer statusCode, List<String> messages) {
+            this.statusCode = statusCode;
+            this.messages = new List<String>(messages);
+        }
+    }
+
+    /**
+     * Validates and sanitizes redirect URL to prevent open redirect vulnerabilities.
+     * @param url The URL to validate.
+     * @param defaultUrl Fallback URL if validation fails.
+     * @return Sanitized URL or defaultUrl if invalid.
+     */
+    public static String getSanitizedStartUrl(String url, String defaultUrl) {
+        if (String.isBlank(url) || url.equals('/')) { return defaultUrl; }
+        
+        String decoded; // Decode URL to catch encoded bypasses (%2f%2f -> //)
+        try {
+            decoded = EncodingUtil.urlDecode(url, 'UTF-8');
+        } catch (Exception e) {
+            return defaultUrl;
+        }
+        
+        // Must start with / but not // (protocol-relative)
+        if (!decoded.startsWith('/') || decoded.startsWith('//')) { return defaultUrl; }
+        // Reject backslashes (some browsers treat \ as /)
+        if (decoded.contains('\\')) { return defaultUrl; }
+        // Reject @ which can indicate user info in URL (//user@evil.com)
+        if (decoded.contains('@')) { return defaultUrl; }
+        // Reject : which could indicate protocol or port manipulation
+        if (decoded.contains(':')) { return defaultUrl; }
+        // Reject control characters (ASCII < 32) and DEL (127)
+        for (Integer i = 0; i < decoded.length(); i++) {
+            Integer charCode = decoded.charAt(i);
+            if (charCode < 32 || charCode == 127) { return defaultUrl; }
+        }
+        
+        return defaultUrl + url;
+    }
+
+    /**
+     * Logs an error message and stack trace to the system debug log.
+     * It is only captured if a Trace Flag is active for the user.
+     * 
+     * @param ex The exception to log.
+     * @param level The logging level to use.
+     */
+    public static void debugLog(Exception ex, LoggingLevel level) {
+        System.debug(level, 'Message: ' + ex.getMessage());
+        System.debug(level, 'Stack Trace: ' + ex.getStackTraceString());
+    }
+}

package/lib/templates/project/angularextapp/_p_/_m_/classes/UIBundleAuthUtils.cls-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<ApexClass xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>67.0</apiVersion>
+    <status>Active</status>
+</ApexClass>