@salesforce/templates 66.1.1 → 66.2.0

package/lib/templates/project/react-b2x/force-app/main/default/webapplications/appreacttemplateb2x/src/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 "../components/layout/centered-page-layout";
+import { AuthForm } from "../components/forms/auth-form";
+import { useAppForm } from "../hooks/form";
+import { getDataSDK } from "../lib/data-sdk";
+import { ROUTES } from "../components/auth/authenticationConfig";
+import { emailSchema, getStartUrl, type AuthResponse } from "../components/auth/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.
+				// "/sfdcapi/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 getDataSDK();
+				const response = await sdk.fetch("/sfdcapi/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>
+	);
+}

package/lib/templates/project/react-b2x/force-app/main/default/webapplications/appreacttemplateb2x/src/pages/NotFound.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'react-router';
+
+export default function NotFound() {
+  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">404</h1>
+        <p className="text-lg text-gray-600 mb-8">Page not found</p>
+        <Link
+          to="/"
+          className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+        >
+          Go to Home
+        </Link>
+      </div>
+    </div>
+  );
+}

package/lib/templates/project/react-b2x/force-app/main/default/webapplications/appreacttemplateb2x/src/pages/Profile.tsx

@@ -0,0 +1,178 @@
+import { useState, useEffect } from "react";
+import { z } from "zod";
+
+import { executeGraphQL } from "@salesforce/webapp-experimental/api";
+
+import { CenteredPageLayout } from "../components/layout/centered-page-layout";
+import { CardSkeleton } from "../components/layout/card-skeleton";
+import { AuthForm } from "../components/forms/auth-form";
+import { useAppForm } from "../hooks/form";
+import { ROUTES } from "../components/auth/authenticationConfig";
+import { emailSchema } from "../components/auth/authHelpers";
+import { flattenGraphQLRecord, getErrorMessage } from "../utils/helpers";
+import { getUser } from "../context/AuthContext";
+
+const GRAPHQL_USER_PROFILE_FIELDS = `
+    Id
+    FirstName { value }
+    LastName { value }
+    Email { value }
+    Phone { value }
+    Street { value }
+    City { value }
+    State { value }
+    PostalCode { value }
+    Country { value }`;
+
+const QUERY_PROFILE_GRAPHQL = `
+    query GetUserProfile($userId: ID) {
+        uiapi {
+            query {
+                User(where: { Id: { eq: $userId } }) {
+                    edges {
+                        node {${GRAPHQL_USER_PROFILE_FIELDS}}
+                    }
+                }
+            }
+        }
+    }`;
+
+const MUTATE_PROFILE_GRAPHQL = `
+    mutation UpdateUserProfile($input: UserUpdateInput!) {
+      uiapi {
+        UserUpdate(input: $input) {
+          Record {${GRAPHQL_USER_PROFILE_FIELDS}}
+        }
+      }
+    }`;
+
+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 {
+				const result: any = await executeGraphQL(MUTATE_PROFILE_GRAPHQL, {
+					input: { Id: user.id, User: { ...value } },
+				});
+				setProfile(flattenGraphQLRecord(result?.uiapi?.UserUpdate?.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;
+
+		executeGraphQL(QUERY_PROFILE_GRAPHQL, { userId: user.id })
+			.then(
+				(result: any) =>
+					mounted && setProfile(flattenGraphQLRecord(result?.uiapi?.query?.User?.edges?.[0]?.node)),
+			)
+			.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 <CardSkeleton 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" }}
+				>
+					<form.AppField name="Email">
+						{(field) => <field.EmailField label="Email" disabled />}
+					</form.AppField>
+					<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="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/lib/templates/project/react-b2x/force-app/main/default/webapplications/appreacttemplateb2x/src/pages/Register.tsx

@@ -0,0 +1,138 @@
+import { useState } from "react";
+import { useNavigate, useSearchParams } from "react-router";
+import { z } from "zod";
+import { CenteredPageLayout } from "../components/layout/centered-page-layout";
+import { AuthForm } from "../components/forms/auth-form";
+import { useAppForm } from "../hooks/form";
+import { getDataSDK } from "../lib/data-sdk";
+import { ROUTES, AUTH_PLACEHOLDERS } from "../components/auth/authenticationConfig";
+import {
+	emailSchema,
+	passwordSchema,
+	getStartUrl,
+	type AuthResponse,
+} from "../components/auth/authHelpers";
+import { 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"),
+		startUrl: z.string(),
+	})
+	.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: "",
+			startUrl: getStartUrl(searchParams) || "",
+		},
+		validators: { onChange: registerSchema, onSubmit: registerSchema },
+		onSubmit: async ({ value: formFieldValues }) => {
+			setSubmitError(null);
+			try {
+				// [Dev Note] Salesforce Integration:
+				// We use the Data SDK fetch to make an authenticated (or guest) call to Salesforce.
+				// "/sfdcapi/services/apexrest/auth/register" refers to a custom Apex Class exposed as a REST resource.
+				// You must ensure this Apex class exists in your org and handles registration
+				// (e.g., duplicate checks and user creation such as Site.createExternalUser).
+				const { confirmPassword, ...request } = formFieldValues;
+				const sdk = await getDataSDK();
+				const response = await sdk.fetch("/sfdcapi/services/apexrest/auth/register", {
+					method: "POST",
+					body: JSON.stringify({ request }),
+					headers: {
+						"Content-Type": "application/json",
+						Accept: "application/json",
+					},
+				});
+				const result = await handleApiResponse<AuthResponse>(response, "Registration failed");
+				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
+					navigate(ROUTES.LOGIN.PATH, { 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/lib/templates/project/react-b2x/force-app/main/default/webapplications/appreacttemplateb2x/src/pages/ResetPassword.tsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+import { Link, useSearchParams } from "react-router";
+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 { getDataSDK } from "../lib/data-sdk";
+import { ROUTES, AUTH_PLACEHOLDERS } from "../components/auth/authenticationConfig";
+import { newPasswordSchema } from "../components/auth/authHelpers";
+import { 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 sdk = await getDataSDK();
+				const response = await sdk.fetch("/sfdcapi/services/apexrest/auth/reset-password", {
+					method: "POST",
+					body: JSON.stringify({ token, newPassword: value.newPassword }),
+					headers: {
+						"Content-Type": "application/json",
+						Accept: "application/json",
+					},
+				});
+				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/lib/templates/project/react-b2x/force-app/main/default/webapplications/appreacttemplateb2x/src/router-utils.tsx

@@ -0,0 +1,35 @@
+import type { RouteObject } from 'react-router';
+import { routes } from './routes';
+
+export type RouteWithFullPath = RouteObject & { fullPath: string };
+
+const flatMapRoutes = (
+  route: RouteObject,
+  parentPath: string = ''
+): RouteWithFullPath[] => {
+  let fullPath: string;
+
+  if (route.index) {
+    fullPath = parentPath || '/';
+  } else if (route.path) {
+    if (route.path.startsWith('/')) {
+      fullPath = route.path;
+    } else {
+      fullPath =
+        parentPath === '/' ? `/${route.path}` : `${parentPath}/${route.path}`;
+    }
+  } else {
+    fullPath = parentPath;
+  }
+
+  const routeWithPath = { ...route, fullPath };
+
+  const childRoutes =
+    route.children?.flatMap(child => flatMapRoutes(child, fullPath)) || [];
+
+  return [routeWithPath, ...childRoutes];
+};
+
+export const getAllRoutes = (): RouteWithFullPath[] => {
+  return routes.flatMap(route => flatMapRoutes(route));
+};

package/lib/templates/project/react-b2x/force-app/main/default/webapplications/appreacttemplateb2x/src/routes.tsx

@@ -0,0 +1,71 @@
+import type { RouteObject } from 'react-router';
+import Home from './pages/Home';
+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/authenticationRouteLayout";
+import PrivateRoute from "./components/auth/privateRouteLayout";
+import { ROUTES } from "./components/auth/authenticationConfig";
+import AppLayout from "./appLayout";
+
+export const routes: RouteObject[] = [
+  {
+    path: "/",
+    element: <AppLayout />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+        handle: { showInNavigation: true, label: 'Home' }
+      },
+      {
+        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 }
+          }
+        ]
+      }
+    ]
+  }
+];