@salesforce/ui-bundle-template-app-react-sample-b2x 1.117.2

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/hooks/useRetryWithBackoff.ts

@@ -0,0 +1,109 @@
+/**
+ * Custom hook for retry logic with exponential backoff
+ */
+
+import { useState, useCallback } from "react";
+
+export interface UseRetryWithBackoffOptions {
+	/** Initial delay in milliseconds */
+	initialDelay: number;
+	/** Maximum number of retry attempts */
+	maxAttempts: number;
+	/** Maximum delay in milliseconds */
+	maxDelay: number;
+}
+
+export interface UseRetryWithBackoffResult {
+	/** Current number of retry attempts */
+	retryAttempts: number;
+	/** Current retry delay in milliseconds */
+	currentRetryDelay: number;
+	/** Whether max retry attempts have been reached */
+	maxRetriesReached: boolean;
+	/** Schedule a retry with exponential backoff, returns timeout ID for cancellation */
+	scheduleRetry: (callback: () => void) => ReturnType<typeof setTimeout> | undefined;
+	/** Reset retry state after successful operation */
+	resetRetry: () => void;
+}
+
+/**
+ * Hook for managing retry logic with exponential backoff
+ *
+ * @param options - Configuration for retry behavior
+ * @returns Retry state and control functions
+ *
+ * @example
+ * const retry = useRetryWithBackoff({
+ *   initialDelay: 2000,
+ *   maxAttempts: 10,
+ *   maxDelay: 1800000
+ * });
+ *
+ * async function fetchData() {
+ *   try {
+ *     const data = await apiCall();
+ *     retry.resetRetry();
+ *     return data;
+ *   } catch (error) {
+ *     if (retry.maxRetriesReached) {
+ *       console.error('Max retries reached');
+ *       return;
+ *     }
+ *     retry.scheduleRetry(() => fetchData());
+ *   }
+ * }
+ */
+export function useRetryWithBackoff(
+	options: UseRetryWithBackoffOptions,
+): UseRetryWithBackoffResult {
+	const { initialDelay, maxAttempts, maxDelay } = options;
+
+	const [retryAttempts, setRetryAttempts] = useState<number>(0);
+	const [currentRetryDelay, setCurrentRetryDelay] = useState<number>(initialDelay);
+
+	const maxRetriesReached = retryAttempts >= maxAttempts;
+
+	/**
+	 * Reset retry state after successful operation
+	 */
+	const resetRetry = useCallback(() => {
+		setRetryAttempts(0);
+		setCurrentRetryDelay(initialDelay);
+	}, [initialDelay]);
+
+	/**
+	 * Schedule a retry with exponential backoff
+	 * Returns the timeout ID which can be used to cancel the retry if needed
+	 */
+	const scheduleRetry = useCallback(
+		(callback: () => void) => {
+			if (retryAttempts >= maxAttempts) {
+				console.error("[useRetryWithBackoff] Max retry attempts reached");
+				return undefined;
+			}
+
+			console.warn(
+				`[useRetryWithBackoff] Retry attempt ${retryAttempts + 1}/${maxAttempts} in ${currentRetryDelay}ms`,
+			);
+
+			const timeoutId = setTimeout(() => {
+				callback();
+			}, currentRetryDelay);
+
+			setRetryAttempts((prev) => prev + 1);
+			// Double the delay for next retry, capped at maxDelay
+			setCurrentRetryDelay((prev) => Math.min(prev * 2, maxDelay));
+
+			return timeoutId;
+		},
+		[retryAttempts, currentRetryDelay, maxAttempts, maxDelay],
+	);
+
+	return {
+		retryAttempts,
+		currentRetryDelay,
+		maxRetriesReached,
+		scheduleRetry,
+		resetRetry,
+	};
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/layout/card-skeleton.tsx

@@ -0,0 +1,38 @@
+import { CenteredPageLayout } from "./centered-page-layout";
+import { Card, CardContent, CardHeader } from "../../../components/ui/card";
+import { Skeleton } from "../../../components/ui/skeleton";
+
+interface CardSkeletonProps {
+	/**
+	 * Maximum width of the content container.
+	 * @default "sm"
+	 */
+	contentMaxWidth?: "sm" | "md" | "lg";
+	/**
+	 * Accessible label for screen readers.
+	 * @default "Loading…"
+	 */
+	loadingText?: string;
+}
+
+/**
+ * Full-page loading indicator with skeleton card placeholder.
+ */
+export function CardSkeleton({ contentMaxWidth, loadingText = "Loading…" }: CardSkeletonProps) {
+	return (
+		<CenteredPageLayout contentMaxWidth={contentMaxWidth}>
+			<div role="status" aria-live="polite">
+				<Card className="w-full">
+					<CardHeader>
+						<Skeleton className="h-4 w-2/3" />
+						<Skeleton className="h-4 w-1/2" />
+					</CardHeader>
+					<CardContent>
+						<Skeleton className="aspect-video w-full" />
+					</CardContent>
+				</Card>
+				<span className="sr-only">{loadingText}</span>
+			</div>
+		</CenteredPageLayout>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/layout/centered-page-layout.tsx

@@ -0,0 +1,87 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../../lib/utils";
+
+/**
+ * Variant styles for the content container's maximum width.
+ * Controls the maximum width of the inner content area within the page layout.
+ */
+const contentContainerVariants = cva("w-full", {
+	variants: {
+		contentMaxWidth: {
+			sm: "max-w-sm",
+			md: "max-w-md",
+			lg: "max-w-lg",
+		},
+	},
+	defaultVariants: {
+		contentMaxWidth: "sm",
+	},
+});
+
+/**
+ * Props for the CenteredPageLayout component.
+ */
+interface CenteredPageLayoutProps
+	extends React.ComponentProps<"div">, VariantProps<typeof contentContainerVariants> {
+	/** The content to be displayed within the page layout */
+	children: React.ReactNode;
+	/**
+	 * Maximum width of the content container.
+	 * @default "sm"
+	 */
+	contentMaxWidth?: "sm" | "md" | "lg";
+	/**
+	 * Optional page title. If provided, will render a <title> component that React will place in the document head.
+	 */
+	title?: string;
+	/**
+	 * When true, content is aligned to the top instead of being vertically centered.
+	 * @default true
+	 */
+	topAligned?: boolean;
+}
+
+/**
+ * CenteredPageLayout component that provides consistent page structure and spacing.
+ *
+ * This component creates a full-viewport-height container that centers its content
+ * horizontally. By default, content is top-aligned; set `topAligned={false}` to
+ * vertically center instead. The inner content area has a configurable maximum width
+ * to prevent content from becoming too wide on large screens.
+ *
+ * @example
+ * ```tsx
+ * <CenteredPageLayout contentMaxWidth="md">
+ *   <YourPageContent />
+ * </CenteredPageLayout>
+ *
+ * <CenteredPageLayout contentMaxWidth="md" topAligned={false}>
+ *   <VerticallyCenteredContent />
+ * </CenteredPageLayout>
+ * ```
+ */
+export function CenteredPageLayout({
+	contentMaxWidth,
+	className,
+	children,
+	title,
+	topAligned = true,
+	...props
+}: CenteredPageLayoutProps) {
+	return (
+		<>
+			{title && <title>{title}</title>}
+			<main
+				className={cn(
+					"flex min-h-svh w-full justify-center p-6 md:p-10",
+					topAligned ? "items-start" : "items-center",
+					className,
+				)}
+				data-slot="page-layout"
+				{...props}
+			>
+				<div className={contentContainerVariants({ contentMaxWidth })}>{children}</div>
+			</main>
+		</>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/layouts/AuthAppLayout.tsx

@@ -0,0 +1,12 @@
+import SessionTimeoutValidator from "../sessionTimeout/SessionTimeoutValidator";
+import { AuthProvider } from "../context/AuthContext";
+import AppLayout from "../../../appLayout";
+
+export default function AuthAppLayout() {
+	return (
+		<AuthProvider>
+			<SessionTimeoutValidator basePath="" />
+			<AppLayout />
+		</AuthProvider>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/layouts/TenantRoute.tsx

@@ -0,0 +1,22 @@
+import { Navigate, Outlet, useLocation } from "react-router";
+import { useAuth } from "@/features/authentication/context/AuthContext";
+import { ROUTES } from "@/features/authentication/authenticationConfig";
+import { useTenantAccess } from "@/hooks/useTenantAccess";
+
+export default function TenantRoute() {
+	const location = useLocation();
+	const { isAuthenticated, loading, user } = useAuth();
+	const { hasTenantRecord, loading: tenantLoading } = useTenantAccess(user?.id);
+
+	if (loading || tenantLoading) return null;
+
+	if (!isAuthenticated) {
+		return <Navigate to={ROUTES.LOGIN.PATH} state={{ from: location.pathname }} replace />;
+	}
+
+	if (!hasTenantRecord) {
+		return <Navigate to="/" replace />;
+	}
+
+	return <Outlet />;
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/layouts/authenticationRouteLayout.tsx

@@ -0,0 +1,21 @@
+import { Navigate, Outlet, useSearchParams } from "react-router";
+import { useAuth } from "../context/AuthContext";
+import { getStartUrl } from "../authHelpers";
+import { CardSkeleton } from "../layout/card-skeleton";
+
+/**
+ * [Dev Note] "Public Only" Route Guard:
+ * This component protects routes that should NOT be accessible if the user is already logged in
+ * (e.g., Login, Register, Forgot Password).
+ * If an authenticated user tries to access these pages, they are automatically redirected
+ * to the default authenticated view (e.g., Home or Profile) to prevent confusion.
+ */
+export default function AuthenticationRoute() {
+	const { isAuthenticated, loading } = useAuth();
+	const [searchParams] = useSearchParams();
+
+	if (loading) return <CardSkeleton contentMaxWidth="md" />;
+	if (isAuthenticated) return <Navigate to={getStartUrl(searchParams)} replace />;
+
+	return <Outlet />;
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/layouts/privateRouteLayout.tsx

@@ -0,0 +1,44 @@
+import { Navigate, Outlet, useLocation } from "react-router";
+import { useAuth } from "../context/AuthContext";
+import { AUTH_REDIRECT_PARAM, ROUTES } from "../authenticationConfig";
+import { CardSkeleton } from "../layout/card-skeleton";
+
+export interface PrivateRouteProps {
+	/**
+	 * Whether to show a card skeleton placeholder while authentication is loading.
+	 * @default false
+	 */
+	showCardSkeleton?: boolean;
+}
+
+/**
+ * [Dev Note] Route Guard:
+ * Renders the child route (Outlet) if the user is authenticated.
+ * Otherwise, redirects to Login with a 'startUrl' parameter so the user can be
+ * returned to this page after successful login.
+ */
+export default function PrivateRoute({ showCardSkeleton = false }: PrivateRouteProps) {
+	const { isAuthenticated, loading } = useAuth();
+	const location = useLocation();
+
+	if (loading) return showCardSkeleton ? <CardSkeleton contentMaxWidth="md" /> : null;
+
+	if (!isAuthenticated) {
+		const searchParams = new URLSearchParams();
+
+		// [Dev Note] Capture current location to return after login
+		const destination = location.pathname + location.search;
+		searchParams.set(AUTH_REDIRECT_PARAM, destination);
+		return (
+			<Navigate // Navigate accepts an object to safely construct the URL
+				to={{
+					pathname: ROUTES.LOGIN.PATH,
+					search: searchParams.toString(),
+				}}
+				replace
+			/>
+		);
+	}
+
+	return <Outlet />;
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/pages/ChangePassword.tsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import { z } from "zod";
+import { CenteredPageLayout } from "../layout/centered-page-layout";
+import { AuthForm } from "../forms/auth-form";
+import { useAppForm } from "../hooks/form";
+import { createDataSDK } from "@salesforce/sdk-data";
+import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
+import { newPasswordSchema } from "../authHelpers";
+import { handleApiResponse, getErrorMessage } from "../utils/helpers";
+
+const changePasswordSchema = z
+	.object({
+		currentPassword: z.string().min(1, "Current password is required"),
+	})
+	.and(newPasswordSchema);
+
+export default function ChangePassword() {
+	const [success, setSuccess] = useState(false);
+	const [submitError, setSubmitError] = useState<string | null>(null);
+
+	const form = useAppForm({
+		defaultValues: { currentPassword: "", newPassword: "", confirmPassword: "" },
+		validators: { onChange: changePasswordSchema, onSubmit: changePasswordSchema },
+		onSubmit: async ({ value: formFieldValues }) => {
+			setSubmitError(null);
+			setSuccess(false);
+			try {
+				// [Dev Note] Custom Apex Endpoint: /auth/change-password
+				// You must ensure this Apex class exists in your org
+				const sdk = await createDataSDK();
+				const response = await sdk.fetch!("/services/apexrest/auth/change-password", {
+					method: "POST",
+					body: JSON.stringify({
+						currentPassword: formFieldValues.currentPassword,
+						newPassword: formFieldValues.newPassword,
+					}),
+					headers: {
+						"Content-Type": "application/json",
+						Accept: "application/json",
+					},
+				});
+				await handleApiResponse(response, "Password change failed");
+				setSuccess(true);
+				form.reset();
+			} catch (err) {
+				setSubmitError(getErrorMessage(err, "Password change failed"));
+			}
+		},
+		onSubmitInvalid: () => {},
+	});
+
+	return (
+		<CenteredPageLayout title={ROUTES.CHANGE_PASSWORD.TITLE}>
+			<form.AppForm>
+				<AuthForm
+					title="Change Password"
+					description="Enter your current and new password below"
+					error={submitError}
+					success={
+						success && (
+							<>
+								Password changed successfully!{" "}
+								<Link to={ROUTES.PROFILE.PATH} className="underline">
+									Back to Profile
+								</Link>
+							</>
+						)
+					}
+					submit={{ text: "Change Password", loadingText: "Changing…", disabled: success }}
+					footer={{ link: ROUTES.PROFILE.PATH, linkText: "Back to Profile" }}
+				>
+					<form.AppField name="currentPassword">
+						{(field) => (
+							<field.PasswordField
+								label="Current Password"
+								placeholder={AUTH_PLACEHOLDERS.PASSWORD}
+								autoComplete="current-password"
+								disabled={success}
+							/>
+						)}
+					</form.AppField>
+					<form.AppField name="newPassword">
+						{(field) => (
+							<field.PasswordField
+								label="New Password"
+								placeholder={AUTH_PLACEHOLDERS.PASSWORD_NEW}
+								autoComplete="new-password"
+								disabled={success}
+							/>
+						)}
+					</form.AppField>
+					<form.AppField name="confirmPassword">
+						{(field) => (
+							<field.PasswordField
+								label="Confirm Password"
+								placeholder={AUTH_PLACEHOLDERS.PASSWORD_NEW_CONFIRM}
+								autoComplete="new-password"
+								disabled={success}
+							/>
+						)}
+					</form.AppField>
+				</AuthForm>
+			</form.AppForm>
+		</CenteredPageLayout>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/pages/ForgotPassword.tsx

@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { z } from "zod";
+import { CenteredPageLayout } from "../layout/centered-page-layout";
+import { AuthForm } from "../forms/auth-form";
+import { useAppForm } from "../hooks/form";
+import { createDataSDK } from "@salesforce/sdk-data";
+import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
+import { handleApiResponse, getErrorMessage } from "../utils/helpers";
+
+const forgotPasswordSchema = z.object({
+	username: z.string().trim().toLowerCase().email("Please enter a valid username"),
+});
+
+export default function ForgotPassword() {
+	const [success, setSuccess] = useState(false);
+	const [submitError, setSubmitError] = useState<string | null>(null);
+
+	const form = useAppForm({
+		defaultValues: { username: "" },
+		validators: { onChange: forgotPasswordSchema, onSubmit: forgotPasswordSchema },
+		onSubmit: async ({ value }) => {
+			setSubmitError(null);
+			setSuccess(false);
+			try {
+				// [Dev Note] Custom Apex Endpoint: /auth/forgot-password
+				// You must ensure this Apex class exists in your org
+				const sdk = await createDataSDK();
+				const response = await sdk.fetch!("/services/apexrest/auth/forgot-password", {
+					method: "POST",
+					body: JSON.stringify({ username: value.username.trim() }),
+					headers: {
+						"Content-Type": "application/json",
+						Accept: "application/json",
+					},
+				});
+				await handleApiResponse(response, "Failed to send reset link");
+				setSuccess(true);
+			} catch (err) {
+				setSubmitError(getErrorMessage(err, "Failed to send reset link"));
+			}
+		},
+		onSubmitInvalid: () => {},
+	});
+
+	return (
+		<CenteredPageLayout title={ROUTES.FORGOT_PASSWORD.TITLE}>
+			<form.AppForm>
+				<AuthForm
+					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."
+					}
+					submit={{ text: "Send Reset Link", loadingText: "Sending…", disabled: success }}
+					footer={{ text: "Remember your password?", link: ROUTES.LOGIN.PATH, linkText: "Sign in" }}
+				>
+					<form.AppField name="username">
+						{(field) => (
+							<field.TextField
+								label="Username"
+								placeholder={AUTH_PLACEHOLDERS.USERNAME}
+								autoComplete="username"
+								disabled={success}
+							/>
+						)}
+					</form.AppField>
+				</AuthForm>
+			</form.AppForm>
+		</CenteredPageLayout>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/pages/Login.tsx

@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { useNavigate, useSearchParams, Link } from "react-router";
+import { z } from "zod";
+import { CenteredPageLayout } from "../layout/centered-page-layout";
+import { AuthForm } from "../forms/auth-form";
+import { useAppForm } from "../hooks/form";
+import { createDataSDK } from "@salesforce/sdk-data";
+import { ROUTES } from "../authenticationConfig";
+import { emailSchema, getStartUrl, type AuthResponse } from "../authHelpers";
+import { handleApiResponse, getErrorMessage } from "../utils/helpers";
+
+const loginSchema = z.object({
+	email: emailSchema,
+	password: z.string().min(1, "Password is required"),
+});
+
+export default function Login() {
+	const navigate = useNavigate();
+	const [searchParams] = useSearchParams();
+	const [submitError, setSubmitError] = useState<string | null>(null);
+
+	const form = useAppForm({
+		defaultValues: { email: "", password: "" },
+		validators: { onChange: loginSchema, onSubmit: loginSchema },
+		onSubmit: async ({ value }) => {
+			setSubmitError(null);
+			try {
+				// [Dev Note] Salesforce Integration:
+				// We use the Data SDK fetch to make an authenticated (or guest) call to Salesforce.
+				// "/services/apexrest/auth/login" refers to a custom Apex REST resource.
+				// You must ensure this Apex class exists in your org and handles the login logic
+				// (e.g., creating a session or returning a token).
+				const sdk = await createDataSDK();
+				const response = await sdk.fetch!("/services/apexrest/auth/login", {
+					method: "POST",
+					body: JSON.stringify({
+						email: value.email.trim().toLowerCase(),
+						password: value.password,
+						startUrl: getStartUrl(searchParams),
+					}),
+					headers: {
+						"Content-Type": "application/json",
+						Accept: "application/json",
+					},
+				});
+				const result = await handleApiResponse<AuthResponse>(response, "Login failed");
+				if (result?.redirectUrl) {
+					// Hard navigate to the URL which establishes the server session cookie
+					window.location.replace(result.redirectUrl);
+				} else {
+					// In case redirectUrl is null, navigate to home
+					navigate("/", { replace: true });
+				}
+			} catch (err) {
+				setSubmitError(getErrorMessage(err, "Login failed"));
+			}
+		},
+		onSubmitInvalid: () => {},
+	});
+
+	return (
+		<CenteredPageLayout title={ROUTES.LOGIN.TITLE}>
+			<form.AppForm>
+				<AuthForm
+					title="Login"
+					description="Enter your email below to login to your account"
+					error={submitError}
+					submit={{ text: "Login", loadingText: "Logging in…" }}
+					footer={{
+						text: "Don't have an account?",
+						link: ROUTES.REGISTER.PATH,
+						linkText: "Sign up",
+					}}
+				>
+					<form.AppField name="email">
+						{(field) => <field.EmailField label="Email" />}
+					</form.AppField>
+					<form.AppField name="password">
+						{(field) => (
+							<field.PasswordField
+								label="Password"
+								labelAction={
+									<Link
+										to={ROUTES.FORGOT_PASSWORD.PATH}
+										className="text-sm underline-offset-4 hover:underline"
+									>
+										Forgot your password?
+									</Link>
+								}
+							/>
+						)}
+					</form.AppField>
+				</AuthForm>
+			</form.AppForm>
+		</CenteredPageLayout>
+	);
+}