@salesforce/templates 66.11.1 → 66.12.0

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

@@ -0,0 +1,217 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from "@angular/core";
+import { RouterLink } from "@angular/router";
+// Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
+// they land at uiBundles/<target>/src/app/components/ui/..., three levels up from this
+// page folder (app/features/account-search/ -> app/components/ui/).
+import { AlertComponent } from "../../components/ui/alert/alert";
+import { CollapsibleComponent } from "../../components/ui/collapsible/collapsible";
+import { SkeletonComponent } from "../../components/ui/skeleton/skeleton";
+// Object-search feature building blocks (Waves 1-2), two levels up.
+import { ObjectBreadcrumbComponent } from "../../features/object-search/breadcrumb/breadcrumb";
+import { SortControlComponent } from "../../features/object-search/sort-control/sort-control";
+import { ActiveFiltersComponent } from "../../features/object-search/filters/active-filters";
+import { PaginationControlsComponent } from "../../features/object-search/pagination/pagination";
+import { SearchFilterComponent } from "../../features/object-search/filters/search-filter";
+import { TextFilterComponent } from "../../features/object-search/filters/text-filter";
+import { SelectFilterComponent } from "../../features/object-search/filters/select-filter";
+import { MultiSelectFilterComponent } from "../../features/object-search/filters/multi-select-filter";
+import { NumericRangeFilterComponent } from "../../features/object-search/filters/numeric-range-filter";
+import { DateFilterComponent } from "../../features/object-search/filters/date-filter";
+import { DateRangeFilterComponent } from "../../features/object-search/filters/date-range-filter";
+import {
+	ObjectSearchStateService,
+	type PaginationConfig,
+} from "../../features/object-search/object-search-state.service";
+import { createAsyncData } from "../../utils/async-data";
+import { fieldValue } from "../../features/object-search/utils/field-utils";
+import type { FilterFieldConfig } from "../../features/object-search/utils/filter-utils";
+import type { SortFieldConfig } from "../../features/object-search/utils/sort-utils";
+import { AccountSearchService, type AccountNode } from "../../api/account/account-search.service";
+
+/** Cursor-pagination config for the account search (mirrors the React reference). */
+const PAGINATION_CONFIG: PaginationConfig = {
+	defaultPageSize: 7,
+	validPageSizes: [7, 14, 28, 42],
+};
+
+/**
+ * Filter field configs — the single source of truth for URL (de)serialization
+ * and GraphQL `where` building. The picklist option lists for Industry / Type
+ * are filled in at runtime (see the component's computed configs) from the
+ * distinct-value aggregate queries.
+ */
+const FILTER_CONFIGS: FilterFieldConfig[] = [
+	{
+		field: "search",
+		label: "Search",
+		type: "search",
+		searchFields: ["Name", "Phone", "Industry"],
+		placeholder: "Search by name, phone, or industry...",
+	},
+	{ field: "Name", label: "Account Name", type: "text", placeholder: "Search by name..." },
+	{ field: "Industry", label: "Industry", type: "picklist" },
+	{ field: "Type", label: "Type", type: "multipicklist" },
+	{ field: "AnnualRevenue", label: "Annual Revenue", type: "numeric" },
+	{ field: "CreatedDate", label: "Created Date", type: "datetime", disableFuture: true },
+	{
+		field: "LastModifiedDate",
+		label: "Last Modified Date",
+		type: "datetimerange",
+		disableFuture: true,
+	},
+];
+
+/** Sortable fields exposed by the sort control (mirrors the React reference). */
+const ACCOUNT_SORT_CONFIGS: SortFieldConfig[] = [
+	{ field: "Name", label: "Name" },
+	{ field: "AnnualRevenue", label: "Annual Revenue" },
+	{ field: "Industry", label: "Industry" },
+	{ field: "CreatedDate", label: "Created Date" },
+];
+
+/**
+ * Account search / list page. The Angular analogue of the React `AccountSearch`
+ * example page: a sidebar filter panel (Card + Collapsible) plus a main results
+ * area with sort control, active-filter chips, a results list, and cursor
+ * pagination.
+ *
+ * State lives in a page-scoped {@link ObjectSearchStateService} (provided here,
+ * NOT in root) so each search page owns its own filters / sort / cursor stack.
+ * The filter components projected into the sidebar inject that same instance.
+ *
+ * Data flows through {@link createAsyncData}: whenever the derived query args
+ * (where / orderBy / pageSize / afterCursor) change, the search re-runs with
+ * latest-wins semantics.
+ */
+@Component({
+	selector: "app-account-search-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	providers: [ObjectSearchStateService],
+	imports: [
+		RouterLink,
+		AlertComponent,
+		CollapsibleComponent,
+		SkeletonComponent,
+		ObjectBreadcrumbComponent,
+		SortControlComponent,
+		ActiveFiltersComponent,
+		PaginationControlsComponent,
+		SearchFilterComponent,
+		TextFilterComponent,
+		SelectFilterComponent,
+		MultiSelectFilterComponent,
+		NumericRangeFilterComponent,
+		DateFilterComponent,
+		DateRangeFilterComponent,
+	],
+	templateUrl: "./account-search-page.html",
+})
+export class AccountSearchPageComponent {
+	private readonly service = inject(AccountSearchService);
+	private readonly state = inject(ObjectSearchStateService);
+
+	/** Sortable field configs surfaced to the sort control. */
+	protected readonly sortConfigs = ACCOUNT_SORT_CONFIGS;
+	/** Allowed page sizes forwarded to the pagination controls. */
+	protected readonly pageSizeOptions = PAGINATION_CONFIG.validPageSizes;
+
+	/** Collapsible open state for the sidebar filter panel. */
+	protected readonly filtersOpen = signal<boolean>(true);
+
+	/** Derived, API-ready `where` / `orderBy` signals from the shared state. */
+	private readonly query = this.state.init<unknown, unknown>(FILTER_CONFIGS, PAGINATION_CONFIG);
+
+	/** Live page-size / cursor signals from the shared state. */
+	protected readonly pageSize = this.state.pageSize;
+	protected readonly hasPreviousPage = this.state.hasPreviousPage;
+
+	// -- Distinct-value option loads (Industry / Type filters) -----------------
+	private readonly industries = createAsyncData(signal(0), () =>
+		this.service.fetchDistinctIndustries(),
+	);
+	private readonly types = createAsyncData(signal(0), () => this.service.fetchDistinctTypes());
+
+	// -- Per-filter configs (options merged in for the picklist filters) -------
+	protected readonly searchConfig = FILTER_CONFIGS[0];
+	protected readonly nameConfig = FILTER_CONFIGS[1];
+	protected readonly revenueConfig = FILTER_CONFIGS[4];
+	protected readonly createdConfig = FILTER_CONFIGS[5];
+	protected readonly lastModifiedConfig = FILTER_CONFIGS[6];
+	protected readonly industryConfig = computed<FilterFieldConfig>(() => ({
+		...FILTER_CONFIGS[2],
+		options: this.industries.data() ?? [],
+	}));
+	protected readonly typeConfig = computed<FilterFieldConfig>(() => ({
+		...FILTER_CONFIGS[3],
+		options: this.types.data() ?? [],
+	}));
+
+	// -- Search results --------------------------------------------------------
+	private readonly searchArgs = computed(() => ({
+		where: this.query.where(),
+		orderBy: this.query.orderBy(),
+		first: this.state.pageSize(),
+		after: this.state.afterCursor(),
+	}));
+	private readonly result = createAsyncData(this.searchArgs, (args) =>
+		this.service.searchAccounts(args),
+	);
+
+	protected readonly loading = this.result.loading;
+	protected readonly error = this.result.error;
+
+	private readonly pageInfo = computed(() => this.result.data()?.pageInfo);
+	protected readonly totalCount = computed(() => this.result.data()?.totalCount);
+	protected readonly hasNextPage = computed(() => this.pageInfo()?.hasNextPage ?? false);
+	protected readonly endCursor = computed(() => this.pageInfo()?.endCursor ?? undefined);
+
+	/** Non-null account nodes from the current page's edges. */
+	protected readonly nodes = computed<AccountNode[]>(() => {
+		const edges = this.result.data()?.edges ?? [];
+		const out: AccountNode[] = [];
+		for (const edge of edges) {
+			if (edge?.node) out.push(edge.node);
+		}
+		return out;
+	});
+
+	/** Pagination controls (and the results list) are inert while fetching/errored. */
+	protected readonly controlsDisabled = computed(() => this.loading() || !!this.error());
+
+	/** Placeholder rows for the loading skeleton — one per requested page size. */
+	protected readonly skeletonRows = computed(() =>
+		Array.from({ length: this.pageSize() }, (_, i) => i),
+	);
+
+	/** Result-count copy above the list, matching the React reference wording. */
+	protected readonly resultCountLabel = computed(() => {
+		const total = this.totalCount();
+		const shown = this.nodes().length;
+		if (total != null && (this.hasNextPage() || this.hasPreviousPage())) {
+			return `${total} account${total !== 1 ? "s" : ""} found`;
+		}
+		return `Showing ${shown} account${shown !== 1 ? "s" : ""}`;
+	});
+
+	/** Display helpers for the results list (mirrors `fieldValue` in the template). */
+	protected name(node: AccountNode): string {
+		return fieldValue(node.Name) ?? "—";
+	}
+
+	protected secondaryLine(node: AccountNode): string {
+		return [fieldValue(node.Industry), fieldValue(node.Type)].filter(Boolean).join(" · ") || "—";
+	}
+
+	protected phone(node: AccountNode): string {
+		return fieldValue(node.Phone) ?? "";
+	}
+
+	protected ownerName(node: AccountNode): string {
+		return fieldValue(node.Owner?.Name) ?? "";
+	}
+}

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

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

@@ -0,0 +1,87 @@
+/**
+ * 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 type { AbstractControl, ValidationErrors } from "@angular/forms";
+
+/**
+ * Username validator — mirrors the React forgot-password zod schema which
+ * validates the username as an email but with the message "Please enter a
+ * valid username". Kept local since this message is unique to this page.
+ */
+function usernameValidator(control: AbstractControl): ValidationErrors | null {
+	const value = (control.value ?? "").toString().trim();
+	const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+	return value !== "" && emailPattern.test(value)
+		? null
+		: { email: "Please enter a valid username" };
+}
+
+/**
+ * Forgot-password page — Angular port of the React `ForgotPassword`.
+ *
+ * Anti-enumeration: the success message is intentionally generic ("If that
+ * username exists…") regardless of whether the account exists, and after a
+ * successful submit the username field and the submit button are disabled — an
+ * exact mirror of the React behavior.
+ */
+@Component({
+	selector: "app-forgot-password-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [AuthFormComponent, FieldComponent, InputComponent],
+	templateUrl: "./forgot-password-page.html",
+})
+export class ForgotPasswordPageComponent 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({
+		username: ["", [usernameValidator]],
+	});
+
+	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 username = (this.form.controls.username.value ?? "").trim();
+			const response = await this.dataClient.fetch(API_ROUTES.FORGOT_PASSWORD, {
+				method: "POST",
+				body: JSON.stringify({ username }),
+				headers: { "Content-Type": "application/json", Accept: "application/json" },
+			});
+			await handleApiResponse(response);
+			this.success.set(true);
+		} catch (err) {
+			console.error("Failed to send reset link", err);
+			this.submitError.set(err instanceof ApiError ? err.errors : "Failed to send reset link");
+		} finally {
+			this.submitting.set(false);
+		}
+	}
+}

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

@@ -0,0 +1,18 @@
+<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+	<div class="flex items-center gap-6 mb-6">
+		<h1 class="text-2xl font-bold">Account Search</h1>
+		<app-button appearance="outlined" size="sm" (clicked)="browseAll()"
+			>Browse All Accounts</app-button
+		>
+	</div>
+	<form class="flex gap-2 items-center" (submit)="onSubmit($event)">
+		<app-input
+			class="flex-1"
+			type="text"
+			placeholder="Search by name, phone, or industry..."
+			label="Search"
+			[(value)]="term"
+		/>
+		<app-button type="submit">Search</app-button>
+	</form>
+</div>

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

@@ -0,0 +1,47 @@
+/**
+ * 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 { Router } from "@angular/router";
+// Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
+// they land at uiBundles/<target>/src/app/components/ui/{button,input}/..., three levels
+// up from this page folder (app/features/account-search/ -> app/components/ui/).
+import { ButtonComponent } from "../../components/ui/button/button";
+import { InputComponent } from "../../components/ui/input/input";
+
+/**
+ * Account-search landing page. Mirrors the React `Home` page: a single search
+ * box plus a "Browse All Accounts" shortcut. Submitting navigates to the
+ * `accounts` list, carrying the typed term as the `q` query param so the search
+ * page's {@link ObjectSearchStateService} seeds the multi-field search filter.
+ *
+ * This is intentionally NOT the state-service-driven `app-search-bar` — Home
+ * has no search state of its own; it just routes into the search page.
+ */
+@Component({
+	selector: "app-home-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [ButtonComponent, InputComponent],
+	templateUrl: "./home-page.html",
+})
+export class HomePageComponent {
+	private readonly router = inject(Router);
+
+	/** Bound to the search input; forwarded as `?q=` on submit. */
+	protected readonly term = signal<string>("");
+
+	/** Navigate to the search page, seeding the search term when present. */
+	protected onSubmit(event: Event): void {
+		event.preventDefault();
+		this.browseAll(this.term() || undefined);
+	}
+
+	/** Go to the accounts list, optionally with a seeded search term. */
+	protected browseAll(q?: string): void {
+		void this.router.navigate(["/accounts"], {
+			queryParams: q ? { q } : {},
+		});
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/pages/home/home.html

@@ -0,0 +1,6 @@
+<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+	<div class="text-center">
+		<h1 class="text-4xl font-bold text-gray-900 mb-4">Home</h1>
+		<p class="text-lg text-gray-600 mb-8">Welcome to your Angular application.</p>
+	</div>
+</main>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/pages/home/home.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { HomeComponent } from './home';
+
+describe('HomeComponent', () => {
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [HomeComponent],
+		}).compileComponents();
+	});
+
+	it('should create the component', () => {
+		const fixture = TestBed.createComponent(HomeComponent);
+		const component = fixture.componentInstance;
+		expect(component).toBeTruthy();
+	});
+
+	it('should render main landmark', async () => {
+		const fixture = TestBed.createComponent(HomeComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		expect(compiled.querySelector('main')).toBeTruthy();
+	});
+});

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/pages/home/home.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'app-home',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	templateUrl: './home.html',
+})
+export class HomeComponent {}

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

@@ -0,0 +1,47 @@
+<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="Login"
+			description="Enter your email below to login to your account"
+			[error]="submitError()"
+			submitText="Login"
+			submitLoadingText="Logging in…"
+			[submitting]="submitting()"
+			[footer]="{
+				text: 'Don\'t have an account?',
+				link: routes.REGISTER.PATH,
+				linkText: 'Sign up',
+			}"
+			(submitted)="onSubmit()"
+		>
+			<div class="mt-4 flex flex-col gap-4">
+				<app-field label="Email" htmlFor="login-email" [error]="controlError('email', 'email')">
+					<app-input
+						type="email"
+						[value]="form.controls.email.value ?? ''"
+						(valueChange)="setControl('email', $event)"
+						[placeholder]="placeholders.EMAIL"
+					/>
+				</app-field>
+
+				<app-field
+					label="Password"
+					htmlFor="login-password"
+					[error]="controlError('password', 'required')"
+				>
+					<app-input
+						type="password"
+						[value]="form.controls.password.value ?? ''"
+						(valueChange)="setControl('password', $event)"
+					/>
+					<a
+						[routerLink]="routes.FORGOT_PASSWORD.PATH"
+						class="text-sm underline-offset-4 hover:underline"
+					>
+						Forgot your password?
+					</a>
+				</app-field>
+			</div>
+		</app-auth-form>
+	</div>
+</main>