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

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

@@ -0,0 +1,80 @@
+<main class="flex min-h-svh w-full justify-center p-6 md:p-10 items-start">
+	<div class="w-full max-w-2xl">
+		<app-auth-form
+			title="Sign Up"
+			description="Enter your information to create an account"
+			[error]="submitError()"
+			submitText="Create an account"
+			submitLoadingText="Creating account…"
+			[submitting]="submitting()"
+			[footer]="{ text: 'Already have an account?', link: routes.LOGIN.PATH, linkText: 'Sign in' }"
+			(submitted)="onSubmit()"
+		>
+			<div class="mt-4 flex flex-col gap-4">
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+					<app-field
+						label="First name"
+						htmlFor="register-first-name"
+						[error]="controlError('firstName', 'required')"
+					>
+						<app-input
+							[value]="form.controls.firstName.value ?? ''"
+							(valueChange)="setControl('firstName', $event)"
+							[placeholder]="placeholders.FIRST_NAME"
+						/>
+					</app-field>
+
+					<app-field
+						label="Last name"
+						htmlFor="register-last-name"
+						[error]="controlError('lastName', 'required')"
+					>
+						<app-input
+							[value]="form.controls.lastName.value ?? ''"
+							(valueChange)="setControl('lastName', $event)"
+							[placeholder]="placeholders.LAST_NAME"
+						/>
+					</app-field>
+				</div>
+
+				<app-field label="Email" htmlFor="register-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="register-password"
+					[error]="controlError('password', 'password')"
+				>
+					<app-input
+						type="password"
+						[value]="form.controls.password.value ?? ''"
+						(valueChange)="setControl('password', $event)"
+						[placeholder]="placeholders.PASSWORD_CREATE"
+					/>
+				</app-field>
+
+				<app-field
+					label="Confirm Password"
+					htmlFor="register-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_CONFIRM"
+					/>
+				</app-field>
+			</div>
+		</app-auth-form>
+	</div>
+</main>

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

@@ -0,0 +1,93 @@
+/**
+ * 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, Router } 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 { 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 { getStartUrl, type AuthResponse } from "../../features/authentication/utils/auth-helpers";
+import { ApiError, handleApiResponse } from "../../features/authentication/utils/helpers";
+import {
+	emailValidator,
+	passwordMinValidator,
+	passwordsMatchValidator,
+	requiredWithMessage,
+} from "../../features/authentication/utils/auth-validators";
+
+/**
+ * Register page — Angular port of the React `Register`. Same field set, same
+ * cross-field password-match rule, same POST body shape (`{ request }` with
+ * `confirmPassword` stripped) and same success handling (redirectUrl hard-nav,
+ * else navigate to login).
+ */
+@Component({
+	selector: "app-register-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [AuthFormComponent, FieldComponent, InputComponent],
+	templateUrl: "./register-page.html",
+})
+export class RegisterPageComponent extends ReactiveFormPageBase {
+	private readonly fb = inject(FormBuilder);
+	private readonly router = inject(Router);
+	private readonly route = inject(ActivatedRoute);
+	private readonly dataClient = inject(DataClient);
+
+	protected readonly placeholders = AUTH_PLACEHOLDERS;
+	protected readonly routes = ROUTES;
+
+	protected override readonly form = this.fb.group(
+		{
+			firstName: ["", [requiredWithMessage("First name is required")]],
+			lastName: ["", [requiredWithMessage("Last name is required")]],
+			email: ["", [emailValidator]],
+			password: ["", [passwordMinValidator]],
+			confirmPassword: ["", [requiredWithMessage("Please confirm your password")]],
+			startUrl: [getStartUrl(this.route.snapshot.queryParamMap) || ""],
+		},
+		{ validators: [passwordsMatchValidator("password", "confirmPassword")] },
+	);
+
+	protected readonly submitError = signal<string | string[] | null>(null);
+	protected readonly submitting = signal<boolean>(false);
+
+	protected async onSubmit(): Promise<void> {
+		this.form.markAllAsTouched();
+		if (this.form.invalid) {
+			return;
+		}
+		this.submitError.set(null);
+		this.submitting.set(true);
+		try {
+			const { confirmPassword: _confirmPassword, ...request } = this.form.getRawValue();
+			const response = await this.dataClient.fetch(API_ROUTES.REGISTER, {
+				method: "POST",
+				body: JSON.stringify({ request }),
+				headers: { "Content-Type": "application/json", Accept: "application/json" },
+			});
+			const result = await handleApiResponse<AuthResponse>(response);
+			if (result?.redirectUrl) {
+				// Hard navigate to the URL which logs the new user in.
+				window.location.replace(result.redirectUrl);
+			} else {
+				// In case redirectUrl is null, redirect to the login page.
+				void this.router.navigate([ROUTES.LOGIN.PATH], { replaceUrl: true });
+			}
+		} catch (err) {
+			console.error("Registration failed", err);
+			this.submitError.set(err instanceof ApiError ? err.errors : "Registration failed");
+		} finally {
+			this.submitting.set(false);
+		}
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/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/dist/force-app/main/default/uiBundles/feature-angular-authentication/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/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/shared/alert/hlm-alert-action.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmAlertAction]',
+	host: {
+		'data-slot': 'alert-action',
+	},
+})
+export class HlmAlertAction {
+	constructor() {
+		classes(() => 'absolute end-2 top-2');
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/shared/alert/hlm-alert-description.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmAlertDescription]',
+	host: {
+		'data-slot': 'alert-description',
+	},
+})
+export class HlmAlertDescription {
+	constructor() {
+		classes(
+			() =>
+				'text-sm text-balance md:text-pretty group-has-[>ng-icon]/alert:col-start-2 [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+		);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/shared/alert/hlm-alert-title.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmAlertTitle]',
+	host: {
+		'data-slot': 'alert-title',
+	},
+})
+export class HlmAlertTitle {
+	constructor() {
+		classes(
+			() =>
+				'font-medium group-has-[>ng-icon]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+		);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/shared/alert/hlm-alert.ts

@@ -0,0 +1,35 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const alertVariants = cva(
+	'relative w-full grid gap-0.5 items-start rounded-lg border px-2.5 py-2 text-start text-sm has-data-[slot=alert-action]:pe-18 has-[>ng-icon]:grid-cols-[auto_1fr] has-[>ng-icon]:gap-x-2 *:[ng-icon]:row-span-2 *:[ng-icon]:translate-y-0.5 *:[ng-icon]:text-current *:[ng-icon:not([class*=text-])]:text-[length:--spacing(4)] group/alert',
+	{
+		variants: {
+			variant: {
+				default: 'bg-card text-card-foreground',
+				destructive: 'bg-card text-destructive',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export type AlertVariants = VariantProps<typeof alertVariants>;
+
+@Directive({
+	selector: 'hlm-alert,[hlmAlert]',
+	host: {
+		'data-slot': 'alert',
+		role: 'alert',
+	},
+})
+export class HlmAlert {
+	public readonly variant = input<AlertVariants['variant']>('default');
+
+	constructor() {
+		classes(() => alertVariants({ variant: this.variant() }));
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/shared/alert/index.ts

@@ -0,0 +1,16 @@
+import { HlmAlert } from './hlm-alert';
+import { HlmAlertAction } from './hlm-alert-action';
+import { HlmAlertDescription } from './hlm-alert-description';
+import { HlmAlertTitle } from './hlm-alert-title';
+
+export * from './hlm-alert';
+export * from './hlm-alert-action';
+export * from './hlm-alert-description';
+export * from './hlm-alert-title';
+
+export const HlmAlertImports = [
+	HlmAlert,
+	HlmAlertAction,
+	HlmAlertDescription,
+	HlmAlertTitle,
+] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/shared/button/hlm-button.token.ts

@@ -0,0 +1,22 @@
+import { InjectionToken, type ValueProvider, inject } from '@angular/core';
+import type { ButtonVariants } from './hlm-button';
+
+export interface BrnButtonConfig {
+	variant: ButtonVariants['variant'];
+	size: ButtonVariants['size'];
+}
+
+const defaultConfig: BrnButtonConfig = {
+	variant: 'default',
+	size: 'default',
+};
+
+const BrnButtonConfigToken = new InjectionToken<BrnButtonConfig>('BrnButtonConfig');
+
+export function provideBrnButtonConfig(config: Partial<BrnButtonConfig>): ValueProvider {
+	return { provide: BrnButtonConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectBrnButtonConfig(): BrnButtonConfig {
+	return inject(BrnButtonConfigToken, { optional: true }) ?? defaultConfig;
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/shared/button/hlm-button.ts

@@ -0,0 +1,72 @@
+import { Directive, input, signal } from '@angular/core';
+import { BrnButton } from '@spartan-ng/brain/button';
+import { classes } from '@spartan-ng/styles/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+import { injectBrnButtonConfig } from './hlm-button.token';
+
+export const buttonVariants = cva(
+	"focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px data-[matches-spartan-invalid=true]:ring-3 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+				outline:
+					'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+				secondary:
+					'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+				ghost:
+					'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+				destructive:
+					'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default:
+					'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2',
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3)]",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
+				lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3',
+				icon: 'size-8',
+				'icon-xs':
+					"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3)]",
+				'icon-sm':
+					'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+				'icon-lg': 'size-9',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+@Directive({
+	selector: 'button[hlmBtn], a[hlmBtn]',
+	exportAs: 'hlmBtn',
+	hostDirectives: [{ directive: BrnButton, inputs: ['disabled'] }],
+	host: { 'data-slot': 'button' },
+})
+export class HlmButton {
+	private readonly _config = injectBrnButtonConfig();
+
+	private readonly _additionalClasses = signal<ClassValue>('');
+
+	public readonly variant = input<ButtonVariants['variant']>(this._config.variant);
+
+	public readonly size = input<ButtonVariants['size']>(this._config.size);
+
+	constructor() {
+		classes(() => [
+			buttonVariants({ variant: this.variant(), size: this.size() }),
+			this._additionalClasses(),
+		]);
+	}
+
+	setClass(classes: string): void {
+		this._additionalClasses.set(classes);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/shared/button/index.ts

@@ -0,0 +1,6 @@
+import { HlmButton } from './hlm-button';
+
+export * from './hlm-button';
+export * from './hlm-button.token';
+
+export const HlmButtonImports = [HlmButton] as const;