@salesforce/webapp-template-app-react-template-b2e-experimental 1.43.0 → 1.43.1

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

@@ -1,177 +0,0 @@
-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 "../utils/authenticationConfig";
-import { emailSchema, 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/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/pages/Register.tsx

@@ -1,130 +0,0 @@
-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";
-import type { AuthResponse } 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] Calls the custom Apex REST endpoint for user registration.
-				// Ensure your Apex logic handles duplicate checks and user creation (e.g., Site.createExternalUser).
-				const { confirmPassword, ...request } = formFieldValues;
-				const response = await baseClient.post("/sfdcapi/services/apexrest/auth/register", {
-					request,
-				});
-				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/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/pages/ResetPassword.tsx

@@ -1,101 +0,0 @@
-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/appreacttemplateb2e/src/pages/new.tsx

@@ -1,10 +0,0 @@
-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/appreacttemplateb2e/src/utils/authenticationConfig.ts

@@ -1,52 +0,0 @@
-/**
- * [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;

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/utils/helpers.ts

@@ -1,195 +0,0 @@
-import { AUTH_REDIRECT_PARAM } from "./authenticationConfig";
-import { z } from "zod";
-
-/** Email field validation */
-export const emailSchema = z.string().trim().email("Please enter a valid email address");
-
-/** Password field validation (minimum 8 characters) */
-export const passwordSchema = z.string().min(8, "Password must be at least 8 characters");
-
-/**
- * Shared schema for new password + confirmation fields.
- * Validates password length and matching confirmation.
- */
-export const newPasswordSchema = z
-	.object({
-		newPassword: passwordSchema,
-		confirmPassword: z.string().min(1, "Please confirm your password"),
-	})
-	.refine((data) => data.newPassword === data.confirmPassword, {
-		message: "Passwords do not match",
-		path: ["confirmPassword"],
-	});
-
-/**
- *
- * Extracts the startUrl from URLSearchParams, defaulting to '/'.
- *
- * SECURITY NOTE: This function strictly validates the URL to prevent
- * Open Redirect vulnerabilities. It allows only relative paths.
- *
- * @param searchParams - The URLSearchParams object from useSearchParams()
- * @returns The start URL for post-authentication redirect
- */
-export function getStartUrl(searchParams: URLSearchParams): string {
-	// 1. Check for the standard redirect parameter
-	const url = searchParams.get(AUTH_REDIRECT_PARAM);
-	// 2. Security Check: Validation Logic
-	if (url && isValidRedirect(url)) {
-		return url;
-	}
-	// 3. Fallback: Default to root
-	return "/";
-}
-
-/**
- * [Dev Note] Security: Validates that the redirect URL is a relative path
- * to prevent Open Redirect vulnerabilities.
- *
- * Security Checks:
- * 1. Rejects protocol-relative URLs (//)
- * 2. Rejects backslash usage which some browsers treat as slashes (/\)
- * 3. Rejects control characters
- */
-function isValidRedirect(url: string): boolean {
-	// Basic structure check
-	if (!url.startsWith("/") || url.startsWith("//")) return false;
-	// Security: Reject backslashes to prevent /\example.com bypasses
-	if (url.includes("\\")) return false;
-	// Robustness: Ensure it doesn't contain whitespace/control characters
-	if (/[^\u0021-\u00ff]/.test(url)) return false;
-	return true;
-}
-
-/**
- * MAINTAINABILITY: Robust error extraction.
- * Handles strings, objects, and standard Error instances.
- *
- * @param err - The error object (unknown type)
- * @param fallback - Fallback message if error doesn't have a message property
- * @returns The error message string
- */
-export function getErrorMessage(err: unknown, fallback: string): string {
-	if (err instanceof Error) return err.message;
-	if (typeof err === "string") return err;
-	// Check if it's an object with a message property
-	if (typeof err === "object" && err !== null && "message" in err) {
-		return String((err as { message: unknown }).message);
-	}
-	return fallback;
-}
-
-/**
- * [Dev Note] Helper to parse the fetch Response.
- * It handles the distinction between success (JSON) and failure (throwing Error).
- */
-export async function handleApiResponse<T = unknown>(
-	response: Response,
-	fallbackError: string,
-): Promise<T> {
-	// 1. Robustness: Handle 204 No Content gracefully
-	if (response.status === 204) {
-		return {} as T;
-	}
-
-	let data: any = null;
-
-	const contentType = response.headers.get("content-type");
-	if (contentType?.includes("application/json")) {
-		data = await response.json();
-	} else {
-		// [Dev Note] If Salesforce returns HTML (e.g. standard error page),
-		// we consume text to avoid parsing errors.
-		await response.text();
-	}
-
-	if (!response.ok) {
-		// [Dev Note] Throwing here allows the calling component to catch and
-		// display the error via getErrorMessage()
-		throw new Error(parseApiResponseError(data, fallbackError));
-	}
-
-	return data as T;
-}
-
-/**
- * Shared response type for authentication endpoints (login/register).
- * Success responses contain `success: true` and `redirectUrl`.
- * Error responses contain `errors` array.
- */
-export interface AuthResponse {
-	success?: boolean;
-	redirectUrl?: string | null;
-	errors?: string[];
-}
-
-/**
- * UI API Record response structure.
- */
-export type RecordResponse = {
-	fields: Record<
-		string,
-		{
-			value: string;
-		}
-	>;
-};
-
-/**
- * [Dev Note] GraphQL can return a complex nested structure.
- * This helper flattens it to a simple object for easier form binding.
- *
- * @param data - Extracted payload from the GraphQL response.
- * @param fallbackError - Fallback error message if data is null/undefined or not an object.
- * @throws {Error} If data is not valid.
- * @returns Flattened object with values mapped directly to the fields.
- */
-export function flattenGraphQLRecord<T>(
-	data: any,
-	fallbackError: string = "An unknown error occurred",
-): T {
-	if (!data || typeof data !== "object") {
-		throw new Error(fallbackError);
-	}
-
-	return Object.fromEntries(
-		Object.entries(data).map(([key, field]) => [
-			key,
-			field !== null && typeof field === "object" && "value" in field
-				? (field as { value: unknown }).value
-				: (field ?? null),
-		]),
-	) as T;
-}
-
-/**
- * [Dev Note] Salesforce APIs may return errors as an array or a single object.
- * This helper standardizes the extraction of the error message string.
- *
- * @param data - The response data.
- * @param fallbackError - Fallback error message if response doesn't have a message property
- * @returns The error message string
- */
-function parseApiResponseError(
-	data: any,
-	fallbackError: string = "An unknown error occurred",
-): string {
-	if (data?.message) {
-		return data.message;
-	}
-	if (data?.error) {
-		return data.error;
-	}
-	if (data?.errors && Array.isArray(data.errors) && data.errors.length > 0) {
-		return data.errors.join(" ") || fallbackError;
-	}
-	if (Array.isArray(data) && data.length > 0) {
-		return (
-			data
-				.map((e) => e?.message)
-				.filter(Boolean)
-				.join(" ") || fallbackError
-		);
-	}
-	return fallbackError;
-}