@salesforce/templates 66.11.1 → 66.12.0

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/config/authentication.config.ts

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * Centralized configuration for Auth routes. Each route contains both the path
+ * and page title. Using constants prevents typos in route paths across the app.
+ *
+ * Direct port of the React `authenticationConfig.ts`. NOTE: Angular route
+ * `path` values are relative (no leading slash) in `app.routes.ts`; these
+ * PATH constants keep the leading slash so `routerLink` / `navigate` calls and
+ * the open-redirect validation behave exactly as the React version.
+ */
+export const ROUTES = {
+	LOGIN: {
+		PATH: "/login",
+		TITLE: "Login | MyApp",
+	},
+	REGISTER: {
+		PATH: "/register",
+		TITLE: "Create Account | MyApp",
+	},
+	FORGOT_PASSWORD: {
+		PATH: "/forgot-password",
+		TITLE: "Recover Password | MyApp",
+	},
+	RESET_PASSWORD: {
+		PATH: "/reset-password",
+		TITLE: "Reset Password | MyApp",
+	},
+	PROFILE: {
+		PATH: "/profile",
+		TITLE: "My Profile | MyApp",
+	},
+	CHANGE_PASSWORD: {
+		PATH: "/change-password",
+		TITLE: "Change Password | MyApp",
+	},
+} as const;
+
+/**
+ * Centralized configuration for API endpoints. These are server-side endpoints,
+ * not client-side routes.
+ */
+export const API_ROUTES = {
+	// W-21253864: Logout URL integration is not currently supported
+	LOGOUT: "/secur/logout.jsp",
+	// Custom Apex REST resources handling the auth flows.
+	LOGIN: "/services/apexrest/auth/login",
+	REGISTER: "/services/apexrest/auth/register",
+	FORGOT_PASSWORD: "/services/apexrest/auth/forgot-password",
+	RESET_PASSWORD: "/services/apexrest/auth/reset-password",
+	CHANGE_PASSWORD: "/services/apexrest/auth/change-password",
+} as const;
+
+/**
+ * Query parameter key used to store the return URL.
+ * e.g. /login?startUrl=/profile
+ */
+export const AUTH_REDIRECT_PARAM = "startUrl";
+
+/** Placeholder text constants for authentication form inputs. */
+export const AUTH_PLACEHOLDERS = {
+	EMAIL: "e.g. name@example.com",
+	PASSWORD: "Enter your password",
+	PASSWORD_CREATE: "Create a password",
+	PASSWORD_CONFIRM: "Re-enter your password",
+	PASSWORD_NEW: "Enter new password",
+	PASSWORD_NEW_CONFIRM: "Re-enter new password",
+	FIRST_NAME: "e.g. Alex",
+	LAST_NAME: "e.g. Smith",
+	USERNAME: "e.g. asmith",
+} as const;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/footer-link/footer-link.html

@@ -0,0 +1,9 @@
+<p class="w-full text-center text-sm text-muted-foreground">
+	@if (text()) { {{ text() }}&nbsp; }
+	<a
+		[routerLink]="to()"
+		class="font-medium underline hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+	>
+		{{ linkText() }}
+	</a>
+</p>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/footer-link/footer-link.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { RouterLink } from "@angular/router";
+
+/**
+ * Footer navigation link under an auth form — the Angular port of the React
+ * `FooterLink`. Renders an optional prefix text followed by a `routerLink`.
+ */
+@Component({
+	selector: "app-footer-link",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterLink],
+	templateUrl: "./footer-link.html",
+})
+export class FooterLinkComponent {
+	/** Link text prefix (e.g., "Don't have an account?"). */
+	readonly text = input<string>("");
+	/** Router path to navigate to. */
+	readonly to = input.required<string>();
+	/** Link label (e.g., "Sign up"). */
+	readonly linkText = input.required<string>();
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/menu/auth-menu/auth-menu.html

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

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/menu/auth-menu/auth-menu.ts

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

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/reactive-form-page.base.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { Directive } from "@angular/core";
+import { FormGroup } from "@angular/forms";
+
+/**
+ * Shared helpers for the auth form pages.
+ *
+ * The base `app-input` primitive exposes a two-way `[(value)]` model rather than
+ * a ControlValueAccessor, so neither `formControlName` nor `[formGroup]` can bind
+ * to it directly. These pages therefore keep a Reactive Forms `FormGroup` as the
+ * validation + submit source of truth (with no `[formGroup]` on the template
+ * `<form>`) and bridge each field manually with `[value]` / `(valueChange)`:
+ *   <app-input [value]="form.controls.x.value" (valueChange)="setControl('x', $event)" />
+ *
+ * `setControl` pushes edits back into the control (marking it touched/dirty so
+ * validation surfaces), and `controlError` reads a specific error message for
+ * display once the control has been touched — mirroring the React forms, which
+ * showed field errors after interaction.
+ *
+ * Kept as an abstract base (not injectable) so each page owns its own typed
+ * `form`. Not an Angular component/service; no DI.
+ */
+@Directive()
+export abstract class ReactiveFormPageBase {
+	protected abstract readonly form: FormGroup;
+
+	/** Push an edited value into the named control and mark it touched/dirty. */
+	protected setControl(name: string, value: string): void {
+		const control = this.form.get(name);
+		if (!control) return;
+		control.setValue(value);
+		control.markAsDirty();
+		control.markAsTouched();
+	}
+
+	/**
+	 * Returns the message for the named error key on the control, but only once
+	 * the control has been touched (so pristine fields don't show errors).
+	 */
+	protected controlError(name: string, errorKey: string): string | null {
+		const control = this.form.get(name);
+		if (!control || !control.touched) return null;
+		const message = control.errors?.[errorKey];
+		return typeof message === "string" ? message : null;
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/session/session.html

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

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/session/session.ts

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

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/status-alert/status-alert.html

@@ -0,0 +1,5 @@
+<app-alert [title]="title()" [class]="toneClass()">
+	@if (message()) { {{ message() }} } @else {
+	<ng-content />
+	}
+</app-alert>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/status-alert/status-alert.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { AlertComponent } from "../../../components/ui/alert/alert";
+
+/** Status banner variant conveying the tone of the message. */
+export type AppStatusAlertVariant = "error" | "success" | "info" | "warning";
+
+/**
+ * Status / error banner — a feature-owned composition over the base `app-alert`
+ * ui primitive (not a base-template component). Adds a four-way `variant` with a
+ * colour treatment, mirroring the React `components/alerts/status-alert`.
+ *
+ * Supply the copy via the `message` input, or content-project richer markup
+ * (lists, links) as the default slot. Consumed by the authentication
+ * login-error / success / session-expired banners.
+ */
+@Component({
+	selector: "app-status-alert",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [AlertComponent],
+	templateUrl: "./status-alert.html",
+	host: {
+		"data-slot": "status-alert",
+	},
+})
+export class StatusAlertComponent {
+	readonly variant = input<AppStatusAlertVariant>("info");
+
+	/** Optional title rendered above the message / projected content. */
+	readonly title = input<string>("");
+
+	/** Message copy; may be omitted in favour of projected content. */
+	readonly message = input<string>("");
+
+	/** Colour utilities applied to the banner for the current variant. */
+	protected readonly toneClass = computed(() => {
+		switch (this.variant()) {
+			case "error":
+				return "text-destructive";
+			case "success":
+				return "text-emerald-700";
+			case "warning":
+				return "text-amber-700";
+			default:
+				return "text-sky-700";
+		}
+	});
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/submit-button/submit-button.html

@@ -0,0 +1,5 @@
+<app-button type="submit" [disabled]="submitting() || disabled()" class="w-full">
+	@if (submitting()) {
+	<app-spinner [diameter]="16" aria-hidden="true" />
+	{{ loadingLabel() }} } @else { {{ label() }} }
+</app-button>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/submit-button/submit-button.scss

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+// Material lays the button's projected content out inside `.mdc-button__label`.
+// Make it a flex row so the spinner and the loading label sit on the same line,
+// vertically centred. Scoped under `:host` (via `::ng-deep`) so the override
+// only reaches this submit button's inner `matButton`, never other buttons.
+:host ::ng-deep .mdc-button__label {
+	display: flex;
+
+	> app-spinner {
+		margin: auto 1rem;
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/authentication/submit-button/submit-button.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { ButtonComponent } from "../../../components/ui/button/button";
+import { SpinnerComponent } from "../../../components/ui/spinner/spinner";
+
+/**
+ * Submit button that reflects form submission state — the Angular port of the
+ * React `SubmitButton`, which subscribed to `form.isSubmitting`.
+ *
+ * Reactive Forms have no equivalent subscription; instead the parent passes the
+ * form's `pending`/submitting flag via `[submitting]` and the caller-provided
+ * `[disabled]`. While submitting the button is disabled and shows a spinner with
+ * the loading label — the same UX (prevents double-submit + gives feedback).
+ */
+@Component({
+	selector: "app-submit-button",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [ButtonComponent, SpinnerComponent],
+	templateUrl: "./submit-button.html",
+	styleUrl: "./submit-button.scss",
+})
+export class SubmitButtonComponent {
+	/** Button text when not submitting. */
+	readonly label = input.required<string>();
+	/** Button text while submitting. */
+	readonly loadingLabel = input<string>("Submitting…");
+	/** True while the form submission is in flight. */
+	readonly submitting = input<boolean>(false);
+	/** Additional disabled condition from the caller (e.g. already authenticated). */
+	readonly disabled = input<boolean>(false);
+}