@salesforce/ui-bundle-template-app-angular-template-b2x 11.31.11 → 11.31.12

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/pages/profile/profile-page.html

@@ -0,0 +1,116 @@
+<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 (loadError()) {
+		<app-status-alert variant="error" [message]="loadError()!" />
+		} @else {
+		<app-auth-form
+			title="Profile"
+			description="Update your account information"
+			[showAlreadyLoggedIn]="false"
+			[error]="submitError()"
+			[success]="success() ? 'Profile updated!' : null"
+			submitText="Save Changes"
+			submitLoadingText="Saving…"
+			[submitting]="submitting()"
+			[submitDisabled]="loading()"
+			[footer]="{ link: routes.CHANGE_PASSWORD.PATH, linkText: 'Change password' }"
+			(submitted)="onSubmit()"
+		>
+			@if (loading()) {
+			<div role="status" aria-live="polite">
+				<span class="sr-only">Loading profile…</span>
+				<app-field label="Email"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+					<app-field label="First name"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+					<app-field label="Last name"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+				</div>
+				<app-field label="Phone"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+				<app-field label="Street"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+					<app-field label="City"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+					<app-field label="State"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+				</div>
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+					<app-field label="Postal Code"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+					<app-field label="Country"><app-skeleton class="h-9 w-full rounded-md" /></app-field>
+				</div>
+			</div>
+			} @else {
+			<div class="mt-4 flex flex-col gap-4">
+				<app-field label="Email" htmlFor="profile-email" [error]="controlError('Email', 'email')">
+					<app-input type="email" [value]="form.controls.Email.value ?? ''" [disabled]="true" />
+				</app-field>
+
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+					<app-field
+						label="First name"
+						htmlFor="profile-first-name"
+						[error]="controlError('FirstName', 'required')"
+					>
+						<app-input
+							[value]="form.controls.FirstName.value ?? ''"
+							(valueChange)="setControl('FirstName', $event)"
+						/>
+					</app-field>
+					<app-field
+						label="Last name"
+						htmlFor="profile-last-name"
+						[error]="controlError('LastName', 'required')"
+					>
+						<app-input
+							[value]="form.controls.LastName.value ?? ''"
+							(valueChange)="setControl('LastName', $event)"
+						/>
+					</app-field>
+				</div>
+
+				<app-field label="Phone" htmlFor="profile-phone">
+					<app-input
+						type="tel"
+						[value]="form.controls.Phone.value ?? ''"
+						(valueChange)="setControl('Phone', $event)"
+					/>
+				</app-field>
+
+				<app-field label="Street" htmlFor="profile-street">
+					<app-input
+						[value]="form.controls.Street.value ?? ''"
+						(valueChange)="setControl('Street', $event)"
+					/>
+				</app-field>
+
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+					<app-field label="City" htmlFor="profile-city">
+						<app-input
+							[value]="form.controls.City.value ?? ''"
+							(valueChange)="setControl('City', $event)"
+						/>
+					</app-field>
+					<app-field label="State" htmlFor="profile-state">
+						<app-input
+							[value]="form.controls.State.value ?? ''"
+							(valueChange)="setControl('State', $event)"
+						/>
+					</app-field>
+				</div>
+
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+					<app-field label="Postal Code" htmlFor="profile-postal-code">
+						<app-input
+							[value]="form.controls.PostalCode.value ?? ''"
+							(valueChange)="setControl('PostalCode', $event)"
+						/>
+					</app-field>
+					<app-field label="Country" htmlFor="profile-country">
+						<app-input
+							[value]="form.controls.Country.value ?? ''"
+							(valueChange)="setControl('Country', $event)"
+						/>
+					</app-field>
+				</div>
+			</div>
+			}
+		</app-auth-form>
+		}
+	</div>
+</main>

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/pages/profile/profile-page.component.ts → angularextapp/src/app/pages/profile/profile-page.ts}

@@ -12,12 +12,12 @@ import {
 	signal,
 } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
-import { AuthFormComponent } from "../../features/authentication/forms/auth-form/auth-form.component";
-import { ReactiveFormPageBase } from "../../features/authentication/forms/reactive-form-page.base";
-import { StatusAlertComponent } from "../../features/authentication/components/status-alert/status-alert.component";
-import { FieldComponent } from "../../components/ui/field/field.component";
-import { InputComponent } from "../../components/ui/input/input.component";
-import { SkeletonComponent } from "../../components/ui/skeleton/skeleton.component";
+import { AuthFormComponent } from "../../features/authentication/auth-form/auth-form";
+import { ReactiveFormPageBase } from "../../features/authentication/reactive-form-page.base";
+import { StatusAlertComponent } from "../../features/authentication/status-alert/status-alert";
+import { FieldComponent } from "../../components/ui/field/field";
+import { InputComponent } from "../../components/ui/input/input";
+import { SkeletonComponent } from "../../components/ui/skeleton/skeleton";
 import { AuthService } from "../../features/authentication/auth/auth.service";
 import { UserProfileService } from "../../api/user-profile.service";
 import { ROUTES } from "../../features/authentication/config/authentication.config";
@@ -65,7 +65,7 @@ type ProfileFormValues = {
 		InputComponent,
 		SkeletonComponent,
 	],
-	templateUrl: "./profile-page.component.html",
+	templateUrl: "./profile-page.html",
 })
 export class ProfilePageComponent extends ReactiveFormPageBase implements OnInit {
 	private readonly fb = inject(FormBuilder);

package/dist/force-app/main/default/uiBundles/{angularexternalapp/src/app/pages/register/register-page.component.ts → angularextapp/src/app/pages/register/register-page.ts}

@@ -7,10 +7,10 @@ import { ChangeDetectionStrategy, Component, inject, signal } from "@angular/cor
 import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { DataClient } from "../../api/data-client.service";
-import { AuthFormComponent } from "../../features/authentication/forms/auth-form/auth-form.component";
-import { ReactiveFormPageBase } from "../../features/authentication/forms/reactive-form-page.base";
-import { FieldComponent } from "../../components/ui/field/field.component";
-import { InputComponent } from "../../components/ui/input/input.component";
+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,
@@ -35,7 +35,7 @@ import {
 	selector: "app-register-page",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [AuthFormComponent, FieldComponent, InputComponent],
-	templateUrl: "./register-page.component.html",
+	templateUrl: "./register-page.html",
 })
 export class RegisterPageComponent extends ReactiveFormPageBase {
 	private readonly fb = inject(FormBuilder);

package/dist/force-app/main/default/uiBundles/angularextapp/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/{angularexternalapp/src/app/pages/reset-password/reset-password-page.component.ts → angularextapp/src/app/pages/reset-password/reset-password-page.ts}

@@ -7,12 +7,12 @@ import { ChangeDetectionStrategy, Component, inject, signal } from "@angular/cor
 import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute, RouterLink } from "@angular/router";
 import { DataClient } from "../../api/data-client.service";
-import { AuthFormComponent } from "../../features/authentication/forms/auth-form/auth-form.component";
-import { ReactiveFormPageBase } from "../../features/authentication/forms/reactive-form-page.base";
-import { CardLayoutComponent } from "../../features/authentication/layouts/card-layout/card-layout.component";
-import { StatusAlertComponent } from "../../features/authentication/components/status-alert/status-alert.component";
-import { FieldComponent } from "../../components/ui/field/field.component";
-import { InputComponent } from "../../components/ui/input/input.component";
+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,
@@ -44,7 +44,7 @@ import {
 		FieldComponent,
 		InputComponent,
 	],
-	templateUrl: "./reset-password-page.component.html",
+	templateUrl: "./reset-password-page.html",
 })
 export class ResetPasswordPageComponent extends ReactiveFormPageBase {
 	private readonly fb = inject(FormBuilder);

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-  "version": "11.31.11",
+  "version": "11.31.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-      "version": "11.31.11",
+      "version": "11.31.12",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "fast-xml-parser": "^5.9.3",

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-  "version": "11.31.11",
+  "version": "11.31.12",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {

package/dist/scripts/org-setup.config.json

@@ -1,7 +1,7 @@
 {
   "permsetAssignments": {
     "assignments": {
-      "angularexternalapp_Guest_User_Api_Access": {
+      "angularextapp_Guest_User_Api_Access": {
         "assignee": "guestUser"
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-app-angular-template-b2x",
-  "version": "11.31.11",
+  "version": "11.31.12",
   "description": "Salesforce Angular external app template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/forms/auth-form/auth-form.component.html

@@ -1,38 +0,0 @@
-<app-card-layout [title]="title()" [subtitle]="description()">
-	<div class="space-y-6">
-		@if (showAuthAlert()) {
-			<app-status-alert variant="info" message="You are already logged in." />
-		}
-		@if (errorMessages().length > 0) {
-			@if (errorMessages().length === 1) {
-				<app-status-alert variant="error" [message]="errorMessages()[0]" />
-			} @else {
-				<app-status-alert variant="error">
-					<ul>
-						@for (msg of errorMessages(); track msg) {
-							<li>{{ msg }}</li>
-						}
-					</ul>
-				</app-status-alert>
-			}
-		}
-		@if (success()) {
-			<app-status-alert variant="success" [message]="success()!" />
-		}
-
-		<form (ngSubmit)="onSubmit()">
-			<ng-content />
-			<app-submit-button
-				class="mt-6 block"
-				[label]="submitText()"
-				[loadingLabel]="submitLoadingText()"
-				[submitting]="submitting()"
-				[disabled]="isSubmitDisabled()"
-			/>
-		</form>
-
-		@if (footer(); as f) {
-			<app-footer-link [text]="f.text ?? ''" [to]="f.link" [linkText]="f.linkText" />
-		}
-	</div>
-</app-card-layout>

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/layouts/card-layout/card-layout.component.html

@@ -1,17 +0,0 @@
-<div class="p-4">
-	<app-card class="w-full">
-		@if (title() || subtitle()) {
-			<app-card-header>
-				@if (title()) {
-					<app-card-title>{{ title() }}</app-card-title>
-				}
-				@if (subtitle()) {
-					<app-card-description>{{ subtitle() }}</app-card-description>
-				}
-			</app-card-header>
-		}
-		<app-card-content>
-			<ng-content />
-		</app-card-content>
-	</app-card>
-</div>

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/menu/auth-menu/auth-menu.component.html

@@ -1,26 +0,0 @@
-@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/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/authentication/session-timeout/session-timeout-validator/session-timeout-validator.component.html

@@ -1,57 +0,0 @@
-@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/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/object-search/components/active-filters/active-filters.component.html

@@ -1,23 +0,0 @@
-@if (chips().length > 0) {
-	<div class="flex flex-wrap gap-2">
-		@for (chip of chips(); track chip.field) {
-			<app-button
-				appearance="outlined"
-				size="sm"
-				iconEnd="close"
-				[ariaLabel]="'Remove filter ' + chip.label"
-				(clicked)="onRemove(chip.field)"
-			>
-				{{ chip.label }}
-			</app-button>
-		}
-		<app-button
-			appearance="destructive"
-			size="sm"
-			ariaLabel="Clear all filters"
-			(clicked)="onClearAll()"
-		>
-			Clear all
-		</app-button>
-	</div>
-}

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/object-search/components/object-breadcrumb/object-breadcrumb.component.html

@@ -1,55 +0,0 @@
-<nav aria-label="Breadcrumb" class="mb-3">
-	<ol
-		class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5"
-	>
-		@if (includeHome()) {
-			<li class="inline-flex items-center gap-1.5">
-				<a [routerLink]="'/'" class="hover:text-foreground transition-colors">{{ homeLabel() }}</a>
-			</li>
-			<li aria-hidden="true" class="[&>svg]:size-3.5">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<polyline points="9 18 15 12 9 6" />
-				</svg>
-			</li>
-		}
-		@if (isDetailView()) {
-			<li class="inline-flex items-center gap-1.5">
-				<a [routerLink]="listPath()" class="hover:text-foreground transition-colors">{{
-					listLabel()
-				}}</a>
-			</li>
-			<li aria-hidden="true" class="[&>svg]:size-3.5">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<polyline points="9 18 15 12 9 6" />
-				</svg>
-			</li>
-			<li class="inline-flex items-center gap-1.5">
-				@if (loading() && !recordName()) {
-					<app-skeleton class="h-4 w-32" />
-				} @else {
-					<span class="text-foreground font-normal" aria-current="page">{{ recordName() }}</span>
-				}
-			</li>
-		} @else {
-			<li class="inline-flex items-center gap-1.5">
-				<span class="text-foreground font-normal" aria-current="page">{{ listLabel() }}</span>
-			</li>
-		}
-	</ol>
-</nav>

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/object-search/components/sort-control/sort-control.component.html

@@ -1,50 +0,0 @@
-<div class="flex items-center gap-2">
-	<span class="text-sm text-muted-foreground whitespace-nowrap">{{ label() }}</span>
-	<app-select
-		class="w-[160px]"
-		[options]="options()"
-		[value]="selectedValue()"
-		(valueChange)="onFieldChange($event)"
-		placeholder="Default"
-	/>
-	@if (sort(); as active) {
-		<app-button
-			appearance="text"
-			size="icon-sm"
-			[attr.aria-label]="'Sort ' + (active.direction === 'ASC' ? 'descending' : 'ascending')"
-			(clicked)="toggleDirection()"
-		>
-			@if (active.direction === "ASC") {
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					aria-hidden="true"
-				>
-					<path d="m5 12 7-7 7 7" />
-					<path d="M12 19V5" />
-				</svg>
-			} @else {
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					aria-hidden="true"
-				>
-					<path d="M12 5v14" />
-					<path d="m19 12-7 7-7-7" />
-				</svg>
-			}
-		</app-button>
-	}
-</div>