@salesforce/webapp-template-app-react-byo-experimental 1.3.3

package/dist/force-app/main/default/webapplications/appreactbyo/src/pages/Profile.tsx

@@ -0,0 +1,146 @@
+import { useState, useEffect } from "react";
+import { z } from "zod";
+
+// [Dev Note] These are standard Salesforce SDK methods that interact with the UI API.
+// They respect field-level security and validation rules defined in Salesforce.
+import { getRecord, updateRecord } from "@salesforce/webapp-experimental/api";
+
+import { CenteredPageLayout } from "../components/layout/centered-page-layout";
+import { LoadingPage } from "../components/layout/loading-page";
+import { AuthForm } from "../components/forms/auth-form";
+import { useAppForm } from "../hooks/form";
+import { ROUTES } from "../utils/authenticationConfig";
+import { emailSchema, flattenUiApiRecord, getErrorMessage } from "../utils/helpers";
+import { getUser } from "../context/AuthContext";
+
+const optionalString = z
+	.string()
+	.trim()
+	.transform((val) => (val === "" ? null : val))
+	.nullable()
+	.optional();
+
+const profileSchema = z.object({
+	FirstName: z.string().trim().min(1, "First name is required"),
+	LastName: z.string().trim().min(1, "Last name is required"),
+	Email: emailSchema,
+	Phone: optionalString,
+	Street: optionalString,
+	City: optionalString,
+	State: optionalString,
+	PostalCode: optionalString,
+	Country: optionalString,
+});
+
+type ProfileFormValues = z.infer<typeof profileSchema>;
+
+export default function Profile() {
+	const user = getUser();
+	const [profile, setProfile] = useState<ProfileFormValues | null>(null);
+	const [loadError, setLoadError] = useState<string | null>(null);
+	const [success, setSuccess] = useState(false);
+	const [submitError, setSubmitError] = useState<string | null>(null);
+
+	const form = useAppForm({
+		defaultValues: {} as ProfileFormValues,
+		validators: { onChange: profileSchema, onSubmit: profileSchema },
+		onSubmit: async ({ value }) => {
+			setSubmitError(null);
+			setSuccess(false);
+			try {
+				// [Dev Note] updateRecord automatically handles the PATCH request to the UI API.
+				// It expects the Record ID (user.id) and an object of field values.
+				const record = await updateRecord(user.id, value);
+
+				// [Dev Note] We flatten the complex UI API response structure for easier local use.
+				setProfile(flattenUiApiRecord(record));
+
+				setSuccess(true);
+				// Scroll to top of page after successful update so user sees it
+				window.scrollTo({ top: 0, behavior: "smooth" });
+			} catch (err) {
+				setSubmitError(getErrorMessage(err, "Failed to update profile"));
+			}
+		},
+		onSubmitInvalid: () => {},
+	});
+
+	useEffect(() => {
+		let mounted = true;
+
+		// [Dev Note] Fetch the user record fields. "layoutTypes: 'Full'" asks for the default layout fields.
+		// Ensure the authenticated user has Read access to these fields in Salesforce.
+		getRecord(user.id, { layoutTypes: "Full" })
+			.then((record: any) => mounted && setProfile(flattenUiApiRecord(record)))
+			.catch((err: any) => {
+				if (mounted) {
+					setLoadError(getErrorMessage(err, "Failed to load profile"));
+				} else {
+					console.error("Failed to load profile", err);
+				}
+			});
+		return () => {
+			mounted = false;
+		};
+	}, [user.id]);
+
+	useEffect(() => {
+		if (profile) {
+			const formData = profileSchema.parse(profile);
+			form.reset(formData);
+		}
+	}, [profile]);
+
+	if (!profile && !loadError) {
+		return <LoadingPage contentMaxWidth="md" loadingText="Loading profile…" />;
+	}
+
+	return (
+		<CenteredPageLayout contentMaxWidth="md" title={ROUTES.PROFILE.TITLE}>
+			<form.AppForm>
+				<AuthForm
+					title="Profile"
+					description="Update your account information"
+					error={loadError ?? submitError}
+					success={success && "Profile updated!"}
+					submit={{ text: "Save Changes", loadingText: "Saving…" }}
+					footer={{ link: ROUTES.CHANGE_PASSWORD.PATH, linkText: "Change password" }}
+				>
+					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+						<form.AppField name="FirstName">
+							{(field) => <field.TextField label="First name" autoComplete="given-name" />}
+						</form.AppField>
+						<form.AppField name="LastName">
+							{(field) => <field.TextField label="Last name" autoComplete="family-name" />}
+						</form.AppField>
+					</div>
+					<form.AppField name="Email">
+						{(field) => <field.EmailField label="Email" />}
+					</form.AppField>
+					<form.AppField name="Phone">
+						{(field) => <field.TextField label="Phone" type="tel" autoComplete="tel" />}
+					</form.AppField>
+					<form.AppField name="Street">
+						{(field) => <field.TextField label="Street" autoComplete="street-address" />}
+					</form.AppField>
+					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+						<form.AppField name="City">
+							{(field) => <field.TextField label="City" autoComplete="address-level2" />}
+						</form.AppField>
+						<form.AppField name="State">
+							{(field) => <field.TextField label="State" autoComplete="address-level1" />}
+						</form.AppField>
+					</div>
+					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+						<form.AppField name="PostalCode">
+							{(field) => <field.TextField label="Postal Code" autoComplete="postal-code" />}
+						</form.AppField>
+						<form.AppField name="Country">
+							{(field) => <field.TextField label="Country" autoComplete="country-name" />}
+						</form.AppField>
+					</div>
+				</AuthForm>
+			</form.AppForm>
+		</CenteredPageLayout>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactbyo/src/pages/Register.tsx

@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { useNavigate, useSearchParams } from "react-router";
+import { z } from "zod";
+import { baseClient } from "@salesforce/webapp-experimental/api";
+import { CenteredPageLayout } from "../components/layout/centered-page-layout";
+import { AuthForm } from "../components/forms/auth-form";
+import { useAppForm } from "../hooks/form";
+import { ROUTES, AUTH_PLACEHOLDERS } from "../utils/authenticationConfig";
+import {
+	emailSchema,
+	passwordSchema,
+	getStartUrl,
+	handleApiResponse,
+	getErrorMessage,
+} from "../utils/helpers";
+
+const registerSchema = z
+	.object({
+		firstName: z.string().trim().min(1, "First name is required"),
+		lastName: z.string().trim().min(1, "Last name is required"),
+		email: emailSchema,
+		password: passwordSchema,
+		confirmPassword: z.string().min(1, "Please confirm your password"),
+	})
+	.refine((data) => data.password === data.confirmPassword, {
+		message: "Passwords do not match",
+		path: ["confirmPassword"],
+	});
+
+export default function Register() {
+	const navigate = useNavigate();
+	const [searchParams] = useSearchParams();
+	const [submitError, setSubmitError] = useState<string | null>(null);
+
+	const form = useAppForm({
+		defaultValues: { firstName: "", lastName: "", email: "", password: "", confirmPassword: "" },
+		validators: { onChange: registerSchema, onSubmit: registerSchema },
+		onSubmit: async ({ value }) => {
+			setSubmitError(null);
+			try {
+				// [Dev Note] Calls the custom Apex REST endpoint for user registration.
+				// Ensure your Apex logic handles duplicate checks and user creation (e.g., Site.createExternalUser).
+				const response = await baseClient.post("/services/apexrest/auth/register", {
+					firstName: value.firstName.trim(),
+					lastName: value.lastName.trim(),
+					email: value.email.trim().toLowerCase(),
+					password: value.password,
+				});
+				await handleApiResponse(response, "Registration failed");
+				navigate(getStartUrl(searchParams), { replace: true });
+			} catch (err) {
+				setSubmitError(getErrorMessage(err, "Registration failed"));
+			}
+		},
+		onSubmitInvalid: () => {},
+	});
+
+	return (
+		<CenteredPageLayout title={ROUTES.REGISTER.TITLE}>
+			<form.AppForm>
+				<AuthForm
+					title="Sign Up"
+					description="Enter your information to create an account"
+					error={submitError}
+					submit={{ text: "Create an account", loadingText: "Creating account…" }}
+					footer={{
+						text: "Already have an account?",
+						link: ROUTES.LOGIN.PATH,
+						linkText: "Sign in",
+					}}
+				>
+					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 items-start">
+						<form.AppField name="firstName">
+							{(field) => (
+								<field.TextField
+									label="First name"
+									placeholder={AUTH_PLACEHOLDERS.FIRST_NAME}
+									autoComplete="given-name"
+								/>
+							)}
+						</form.AppField>
+						<form.AppField name="lastName">
+							{(field) => (
+								<field.TextField
+									label="Last name"
+									placeholder={AUTH_PLACEHOLDERS.LAST_NAME}
+									autoComplete="family-name"
+								/>
+							)}
+						</form.AppField>
+					</div>
+					<form.AppField name="email">
+						{(field) => <field.EmailField label="Email" />}
+					</form.AppField>
+					<form.AppField name="password">
+						{(field) => (
+							<field.PasswordField
+								label="Password"
+								placeholder={AUTH_PLACEHOLDERS.PASSWORD_CREATE}
+								autoComplete="new-password"
+							/>
+						)}
+					</form.AppField>
+					<form.AppField name="confirmPassword">
+						{(field) => (
+							<field.PasswordField
+								label="Confirm Password"
+								placeholder={AUTH_PLACEHOLDERS.PASSWORD_CONFIRM}
+								autoComplete="new-password"
+							/>
+						)}
+					</form.AppField>
+				</AuthForm>
+			</form.AppForm>
+		</CenteredPageLayout>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactbyo/src/pages/ResetPassword.tsx

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { Link, useSearchParams } from "react-router";
+import { baseClient } from "@salesforce/webapp-experimental/api";
+import { CardLayout } from "../components/layout/card-layout";
+import { CenteredPageLayout } from "../components/layout/centered-page-layout";
+import { AuthForm } from "../components/forms/auth-form";
+import { StatusAlert } from "../components/alerts/status-alert";
+import { useAppForm } from "../hooks/form";
+import { ROUTES, AUTH_PLACEHOLDERS } from "../utils/authenticationConfig";
+import { newPasswordSchema, handleApiResponse, getErrorMessage } from "../utils/helpers";
+
+export default function ResetPassword() {
+	const [searchParams] = useSearchParams();
+	const token = searchParams.get("token");
+	const [success, setSuccess] = useState(false);
+	const [submitError, setSubmitError] = useState<string | null>(null);
+
+	const form = useAppForm({
+		defaultValues: { newPassword: "", confirmPassword: "" },
+		validators: { onChange: newPasswordSchema, onSubmit: newPasswordSchema },
+		onSubmit: async ({ value }) => {
+			setSubmitError(null);
+			setSuccess(false);
+			try {
+				// [Dev Note] Custom Apex Endpoint: /auth/reset-password
+				// You must ensure this Apex class exists in your org
+				const response = await baseClient.post("/services/apexrest/auth/reset-password", {
+					token,
+					newPassword: value.newPassword,
+				});
+				await handleApiResponse(response, "Password reset failed");
+				setSuccess(true);
+				// Scroll to top of page after successful submission so user sees it
+				window.scrollTo({ top: 0, behavior: "smooth" });
+			} catch (err) {
+				setSubmitError(getErrorMessage(err, "Password reset failed"));
+			}
+		},
+		onSubmitInvalid: () => {},
+	});
+
+	if (!token) {
+		return (
+			<CenteredPageLayout title={ROUTES.RESET_PASSWORD.TITLE}>
+				<CardLayout title="Reset Password">
+					<StatusAlert>
+						Reset token is invalid or expired.{" "}
+						<Link to={ROUTES.FORGOT_PASSWORD.PATH} className="underline underline-offset-4">
+							Request a new password reset link.
+						</Link>
+					</StatusAlert>
+				</CardLayout>
+			</CenteredPageLayout>
+		);
+	}
+
+	return (
+		<CenteredPageLayout title={ROUTES.RESET_PASSWORD.TITLE}>
+			<form.AppForm>
+				<AuthForm
+					title="Reset Password"
+					description="Enter your new password below"
+					error={submitError}
+					success={
+						success && (
+							<>
+								Password reset successfully!{" "}
+								<Link to={ROUTES.LOGIN.PATH} className="underline">
+									Sign in
+								</Link>
+							</>
+						)
+					}
+					submit={{ text: "Reset Password", loadingText: "Resetting…" }}
+					footer={{ text: "Remember your password?", link: ROUTES.LOGIN.PATH, linkText: "Sign in" }}
+				>
+					<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/webapplications/appreactbyo/src/pages/about.tsx

@@ -0,0 +1,10 @@
+export default function About() {
+	return (
+		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+			<div className="text-center">
+				<h1 className="text-4xl font-bold text-gray-900 mb-4">About</h1>
+				<p className="text-lg text-gray-600">This is the about page.</p>
+			</div>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactbyo/src/pages/new.tsx

@@ -0,0 +1,10 @@
+export default function New() {
+	return (
+		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+			<div className="text-center">
+				<h1 className="text-4xl font-bold text-gray-900 mb-4">New</h1>
+				<p className="text-lg text-gray-600">This is the new page.</p>
+			</div>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactbyo/src/router-utils.tsx

@@ -0,0 +1,34 @@
+import type { RouteObject } from "react-router";
+import { routes } from "./routes";
+
+export type RouteWithFullPath = RouteObject & { fullPath: string };
+
+const flatMapRoutes = (route: RouteObject, parentPath: string = ""): RouteWithFullPath[] => {
+	// Construct the full path for this route
+	let fullPath: string;
+
+	if (route.index) {
+		// Index routes use the parent path
+		fullPath = parentPath || "/";
+	} else if (route.path) {
+		// Combine parent path with current path
+		if (route.path.startsWith("/")) {
+			fullPath = route.path;
+		} else {
+			fullPath = parentPath === "/" ? `/${route.path}` : `${parentPath}/${route.path}`;
+		}
+	} else {
+		fullPath = parentPath;
+	}
+
+	const routeWithPath = { ...route, fullPath };
+
+	// Recursively process children
+	const childRoutes = route.children?.flatMap((child) => flatMapRoutes(child, fullPath)) || [];
+
+	return [routeWithPath, ...childRoutes];
+};
+
+export const getAllRoutes = (): RouteWithFullPath[] => {
+	return routes.flatMap((route) => flatMapRoutes(route));
+};

package/dist/force-app/main/default/webapplications/appreactbyo/src/routes.tsx

@@ -0,0 +1,88 @@
+import type { RouteObject } from 'react-router';
+import AppLayout from './appLayout';
+import Home from '@/pages/Home';
+import About from './pages/about';
+import NotFound from './pages/NotFound';
+import Login from "./pages/Login";
+import Register from "./pages/Register";
+import ForgotPassword from "./pages/ForgotPassword";
+import ResetPassword from "./pages/ResetPassword";
+import Profile from "./pages/Profile";
+import ChangePassword from "./pages/ChangePassword";
+import AuthenticationRoute from "./components/auth/authentication-route";
+import PrivateRoute from "./components/auth/private-route";
+import { ROUTES } from "./utils/authenticationConfig";
+import New from "./pages/new";
+
+export const routes: RouteObject[] = [
+  {
+    path: "/",
+    element: <AppLayout />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+        handle: { showInNavigation: true, label: 'Home' }
+      },
+      {
+        path: "about",
+        element: <About />,
+        handle: { showInNavigation: true, label: "About" }
+      },
+      {
+        path: '*',
+        element: <NotFound />
+      },
+      {
+        element: <AuthenticationRoute />,
+        children: [
+          {
+            path: ROUTES.LOGIN.PATH,
+            element: <Login />,
+            handle: { showInNavigation: true, label: "Login", title: ROUTES.LOGIN.TITLE }
+          },
+          {
+            path: ROUTES.REGISTER.PATH,
+            element: <Register />,
+            handle: { showInNavigation: false, title: ROUTES.REGISTER.TITLE }
+          },
+          {
+            path: ROUTES.FORGOT_PASSWORD.PATH,
+            element: <ForgotPassword />,
+            handle: { showInNavigation: false, title: ROUTES.FORGOT_PASSWORD.TITLE }
+          },
+          {
+            path: ROUTES.RESET_PASSWORD.PATH,
+            element: <ResetPassword />,
+            handle: { showInNavigation: false, title: ROUTES.RESET_PASSWORD.TITLE }
+          }
+        ]
+      },
+      {
+        element: <PrivateRoute />,
+        children: [
+          {
+            path: ROUTES.PROFILE.PATH,
+            element: <Profile />,
+            handle: { showInNavigation: true, label: "Profile", title: ROUTES.PROFILE.TITLE }
+          },
+          {
+            path: ROUTES.CHANGE_PASSWORD.PATH,
+            element: <ChangePassword />,
+            handle: { showInNavigation: false, title: ROUTES.CHANGE_PASSWORD.TITLE }
+          }
+        ]
+      },
+      {
+        path: "contact",
+        element: <h1>Hello World from Contact Page</h1>,
+        handle: { showInNavigation: false }
+      },
+      {
+        path: "new",
+        element: <New />,
+        handle: { showInNavigation: true, label: "New Page" }
+      }
+    ]
+  }
+];

package/dist/force-app/main/default/webapplications/appreactbyo/src/styles/global.css

@@ -0,0 +1,94 @@
+@import "tailwindcss";
+@layer base {
+	:root {
+		/* browser system elements (scrollbars, etc) */
+		color-scheme: light;
+
+		--background: oklch(1 0 0);
+		--foreground: oklch(0.145 0 0);
+		--card: oklch(1 0 0);
+		--card-foreground: oklch(0.145 0 0);
+		--popover: oklch(1 0 0);
+		--popover-foreground: oklch(0.145 0 0);
+		--primary: oklch(0.205 0 0);
+		--primary-foreground: oklch(0.985 0 0);
+		--secondary: oklch(0.97 0 0);
+		--secondary-foreground: oklch(0.205 0 0);
+		--muted: oklch(0.97 0 0);
+		--muted-foreground: oklch(0.556 0 0);
+		--accent: oklch(0.97 0 0);
+		--accent-foreground: oklch(0.205 0 0);
+		--destructive: oklch(0.577 0.245 27.325);
+		/* 1. Maintenance: Added missing token for accessible text on red backgrounds */
+		--destructive-foreground: oklch(0.985 0 0);
+		--border: oklch(0.922 0 0);
+		--input: oklch(0.922 0 0);
+		--ring: oklch(0.205 0 0);
+		--radius: 0.625rem;
+		--spacing: 0.25rem;
+	}
+	.dark {
+		/* browser system elements */
+		color-scheme: dark;
+
+		--background: oklch(0.145 0 0);
+		--foreground: oklch(0.985 0 0);
+		--card: oklch(0.145 0 0);
+		--card-foreground: oklch(0.985 0 0);
+		--popover: oklch(0.145 0 0);
+		--popover-foreground: oklch(0.985 0 0);
+		--primary: oklch(0.985 0 0);
+		--primary-foreground: oklch(0.205 0 0);
+		--secondary: oklch(0.269 0 0);
+		--secondary-foreground: oklch(0.985 0 0);
+		--muted: oklch(0.269 0 0);
+		--muted-foreground: oklch(0.708 0 0);
+		--accent: oklch(0.269 0 0);
+		--accent-foreground: oklch(0.985 0 0);
+		--destructive: oklch(0.396 0.141 25.723);
+		/* Dark mode text for destructive actions */
+		--destructive-foreground: oklch(0.985 0 0);
+		--accent-foreground: oklch(0.985 0 0);
+	}
+	/* 2. Accessibility: Global reset for users who prefer reduced motion */
+	@media (prefers-reduced-motion: reduce) {
+		* {
+			animation-duration: 0.01ms !important;
+			animation-iteration-count: 1 !important;
+			transition-duration: 0.01ms !important;
+			scroll-behavior: auto !important;
+		}
+	}
+	* {
+		@apply border-[var(--border)];
+	}
+	body {
+		@apply bg-[var(--background)] text-[var(--foreground)] antialiased;
+	}
+}
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--spacing: var(--spacing);
+}

package/dist/force-app/main/default/webapplications/appreactbyo/src/utils/authenticationConfig.ts

@@ -0,0 +1,52 @@
+/**
+ * [Dev Note] Centralized configuration for Auth routes.
+ * Each route contains both the path and page title.
+ * Using constants prevents typos in route paths across the application.
+ */
+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;
+
+/**
+ * [Dev Note] 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: "asalesforce@example.com",
+	PASSWORD: "",
+	PASSWORD_CREATE: "",
+	PASSWORD_CONFIRM: "",
+	PASSWORD_NEW: "",
+	PASSWORD_NEW_CONFIRM: "",
+	FIRST_NAME: "Astro",
+	LAST_NAME: "Salesforce",
+	USERNAME: "asalesforce",
+} as const;