hazo_auth 1.4.2 → 1.6.1

package/src/components/layouts/email_verification/index.tsx

@@ -1,297 +0,0 @@
-// file_description: email verification layout component built atop shared layout utilities
-// section: client_directive
-"use client";
-
-// section: imports
-import { Input } from "../../ui/input";
-import { Button } from "../../ui/button";
-import { FormFieldWrapper } from "../shared/components/form_field_wrapper";
-import { FormHeader } from "../shared/components/form_header";
-import { FormActionButtons } from "../shared/components/form_action_buttons";
-import { TwoColumnAuthLayout } from "../shared/components/two_column_auth_layout";
-import {
-  type ButtonPaletteOverrides,
-  type LayoutFieldMapOverrides,
-  type LayoutLabelOverrides,
-} from "../shared/config/layout_customization";
-import {
-  EMAIL_VERIFICATION_FIELD_IDS,
-  createEmailVerificationFieldDefinitions,
-  resolveEmailVerificationButtonPalette,
-  resolveEmailVerificationLabels,
-  EMAIL_VERIFICATION_SUCCESS_LABEL_DEFAULTS,
-  EMAIL_VERIFICATION_ERROR_LABEL_DEFAULTS,
-  type EmailVerificationSuccessLabels,
-  type EmailVerificationErrorLabels,
-} from "./config/email_verification_field_config";
-import {
-  use_email_verification,
-  type UseEmailVerificationResult,
-} from "./hooks/use_email_verification";
-import { type LayoutDataClient } from "../shared/data/layout_data_client";
-import { CheckCircle, XCircle, Loader2 } from "lucide-react";
-import { AlreadyLoggedInGuard } from "../shared/components/already_logged_in_guard";
-
-// section: types
-export type EmailVerificationLayoutProps<TClient = unknown> = {
-  image_src: string;
-  image_alt: string;
-  image_background_color?: string;
-  field_overrides?: LayoutFieldMapOverrides;
-  labels?: LayoutLabelOverrides;
-  button_colors?: ButtonPaletteOverrides;
-  success_labels?: Partial<EmailVerificationSuccessLabels>;
-  error_labels?: Partial<EmailVerificationErrorLabels>;
-  redirect_delay?: number;
-  login_path?: string;
-  already_logged_in_message?: string;
-  showLogoutButton?: boolean;
-  showReturnHomeButton?: boolean;
-  returnHomeButtonLabel?: string;
-  returnHomePath?: string;
-  data_client: LayoutDataClient<TClient>;
-};
-
-const ORDERED_FIELDS: EmailVerificationFieldId[] = [
-  EMAIL_VERIFICATION_FIELD_IDS.EMAIL,
-];
-
-type EmailVerificationFieldId = (typeof EMAIL_VERIFICATION_FIELD_IDS)[keyof typeof EMAIL_VERIFICATION_FIELD_IDS];
-
-// section: component
-export default function email_verification_layout<TClient>({
-  image_src,
-  image_alt,
-  image_background_color = "#f1f5f9",
-  field_overrides,
-  labels,
-  button_colors,
-  success_labels,
-  error_labels,
-  redirect_delay = 5,
-  login_path = "/hazo_auth/login",
-  data_client,
-  already_logged_in_message,
-  showLogoutButton = true,
-  showReturnHomeButton = false,
-  returnHomeButtonLabel = "Return home",
-  returnHomePath = "/",
-}: EmailVerificationLayoutProps<TClient>) {
-  const fieldDefinitions = createEmailVerificationFieldDefinitions(field_overrides);
-  const resolvedLabels = resolveEmailVerificationLabels(labels);
-  const resolvedButtonPalette = resolveEmailVerificationButtonPalette(button_colors);
-  const resolvedSuccessLabels = {
-    ...EMAIL_VERIFICATION_SUCCESS_LABEL_DEFAULTS,
-    ...(success_labels ?? {}),
-  };
-  const resolvedErrorLabels = {
-    ...EMAIL_VERIFICATION_ERROR_LABEL_DEFAULTS,
-    ...(error_labels ?? {}),
-  };
-
-  const verification = use_email_verification({
-    dataClient: data_client,
-    redirectDelay: redirect_delay,
-    loginPath: login_path,
-  });
-
-  const renderFields = (formState: UseEmailVerificationResult) => {
-    return ORDERED_FIELDS.map((fieldId) => {
-      const fieldDefinition = fieldDefinitions[fieldId];
-      const fieldValue = formState.values[fieldId];
-      const fieldError = formState.errors[fieldId];
-
-      const inputElement = (
-        <Input
-          id={fieldDefinition.id}
-          type={fieldDefinition.type}
-          value={fieldValue}
-          onChange={(event) =>
-            formState.handleFieldChange(fieldId, event.target.value)
-          }
-          onBlur={
-            fieldId === EMAIL_VERIFICATION_FIELD_IDS.EMAIL
-              ? formState.handleEmailBlur
-              : undefined
-          }
-          autoComplete={fieldDefinition.autoComplete}
-          placeholder={fieldDefinition.placeholder}
-          aria-label={fieldDefinition.ariaLabel}
-          className="cls_email_verification_layout_field_input"
-        />
-      );
-
-      // Only show email error if field has been touched (blurred)
-      const shouldShowError =
-        fieldId === EMAIL_VERIFICATION_FIELD_IDS.EMAIL
-          ? formState.emailTouched && fieldError
-            ? fieldError
-            : undefined
-          : fieldError;
-
-      return (
-        <FormFieldWrapper
-          key={fieldId}
-          fieldId={fieldDefinition.id}
-          label={fieldDefinition.label}
-          input={inputElement}
-          errorMessage={shouldShowError}
-        />
-      );
-    });
-  };
-
-  // Verifying state
-  if (verification.isVerifying) {
-    return (
-      <AlreadyLoggedInGuard
-        image_src={image_src}
-        image_alt={image_alt}
-        image_background_color={image_background_color}
-        message={already_logged_in_message}
-        showLogoutButton={showLogoutButton}
-        showReturnHomeButton={showReturnHomeButton}
-        returnHomeButtonLabel={returnHomeButtonLabel}
-        returnHomePath={returnHomePath}
-        requireEmailVerified={false}
-      >
-        <TwoColumnAuthLayout
-        imageSrc={image_src}
-        imageAlt={image_alt}
-        imageBackgroundColor={image_background_color}
-        formContent={
-          <div className="cls_email_verification_verifying flex flex-col items-center justify-center gap-4 py-8">
-            <Loader2 className="h-12 w-12 animate-spin text-slate-600" aria-hidden="true" />
-            <div className="cls_email_verification_verifying_text text-center">
-              <h1 className="cls_email_verification_verifying_heading text-2xl font-semibold text-slate-900">
-                {resolvedLabels.heading}
-              </h1>
-              <p className="cls_email_verification_verifying_subheading mt-2 text-sm text-slate-600">
-                {resolvedLabels.subHeading}
-              </p>
-            </div>
-          </div>
-        }
-      />
-      </AlreadyLoggedInGuard>
-    );
-  }
-
-  // Success state
-  if (verification.isVerified) {
-    return (
-      <AlreadyLoggedInGuard
-        image_src={image_src}
-        image_alt={image_alt}
-        image_background_color={image_background_color}
-        message={already_logged_in_message}
-        showLogoutButton={showLogoutButton}
-        showReturnHomeButton={showReturnHomeButton}
-        returnHomeButtonLabel={returnHomeButtonLabel}
-        returnHomePath={returnHomePath}
-        requireEmailVerified={false}
-      >
-        <TwoColumnAuthLayout
-        imageSrc={image_src}
-        imageAlt={image_alt}
-        imageBackgroundColor={image_background_color}
-        formContent={
-          <div className="cls_email_verification_success flex flex-col gap-6">
-            <div className="cls_email_verification_success_content flex flex-col items-center gap-4 text-center">
-              <CheckCircle className="h-16 w-16 text-green-600" aria-hidden="true" />
-              <div className="cls_email_verification_success_text">
-                <h1 className="cls_email_verification_success_heading text-2xl font-semibold text-slate-900">
-                  {resolvedSuccessLabels.heading}
-                </h1>
-                <p className="cls_email_verification_success_message mt-2 text-sm text-slate-600">
-                  {resolvedSuccessLabels.message}
-                </p>
-              </div>
-              <div className="cls_email_verification_redirect_info mt-2 text-sm text-slate-500">
-                {resolvedSuccessLabels.redirectMessage} {verification.redirectCountdown} seconds...
-              </div>
-            </div>
-            <div className="cls_email_verification_success_actions flex justify-center">
-              <Button
-                type="button"
-                onClick={verification.handleGoToLogin}
-                className="cls_email_verification_go_to_login_button"
-                style={{
-                  backgroundColor: resolvedButtonPalette.submitBackground,
-                  color: resolvedButtonPalette.submitText,
-                }}
-              >
-                {resolvedSuccessLabels.goToLoginButton}
-              </Button>
-            </div>
-          </div>
-        }
-      />
-      </AlreadyLoggedInGuard>
-    );
-  }
-
-  // Error state with resend form
-  return (
-    <AlreadyLoggedInGuard
-      image_src={image_src}
-      image_alt={image_alt}
-      image_background_color={image_background_color}
-      message={already_logged_in_message}
-      showLogoutButton={showLogoutButton}
-      showReturnHomeButton={showReturnHomeButton}
-      returnHomeButtonLabel={returnHomeButtonLabel}
-      returnHomePath={returnHomePath}
-      requireEmailVerified={false}
-    >
-      <TwoColumnAuthLayout
-      imageSrc={image_src}
-      imageAlt={image_alt}
-      imageBackgroundColor={image_background_color}
-      formContent={
-        <>
-          <div className="cls_email_verification_error_header flex flex-col items-center gap-4 text-center">
-            <XCircle className="h-12 w-12 text-red-600" aria-hidden="true" />
-            <div className="cls_email_verification_error_text">
-              <h1 className="cls_email_verification_error_heading text-2xl font-semibold text-slate-900">
-                {resolvedErrorLabels.heading}
-              </h1>
-              <p className="cls_email_verification_error_message mt-2 text-sm text-slate-600">
-                {verification.errorMessage || resolvedErrorLabels.message}
-              </p>
-            </div>
-          </div>
-          <div className="cls_email_verification_resend_form">
-            <FormHeader
-              heading={resolvedErrorLabels.resendFormHeading}
-              subHeading="Enter your email address to receive a new verification link."
-            />
-            <form
-              className="cls_email_verification_layout_form_fields flex flex-col gap-5"
-              onSubmit={verification.handleResendSubmit}
-              aria-label="Resend verification email form"
-            >
-              {renderFields(verification)}
-              <FormActionButtons
-                submitLabel={resolvedLabels.submitButton}
-                cancelLabel={resolvedLabels.cancelButton}
-                buttonPalette={resolvedButtonPalette}
-                isSubmitDisabled={verification.isSubmitDisabled}
-                onCancel={verification.handleCancel}
-                submitAriaLabel="Submit resend verification email form"
-                cancelAriaLabel="Cancel resend verification email form"
-              />
-              {verification.isSubmitting && (
-                <div className="cls_email_verification_submitting_indicator text-sm text-slate-600 text-center">
-                  Sending verification email...
-                </div>
-              )}
-            </form>
-          </div>
-        </>
-      }
-    />
-    </AlreadyLoggedInGuard>
-  );
-}
-

package/src/components/layouts/forgot_password/config/forgot_password_field_config.ts

@@ -1,58 +0,0 @@
-// file_description: forgot password layout specific configuration helpers
-// section: imports
-import type { LayoutFieldMap, LayoutFieldMapOverrides } from "../../shared/config/layout_customization";
-import {
-  resolveButtonPalette,
-  resolveFieldDefinitions,
-  resolveLabels,
-  type ButtonPaletteDefaults,
-  type ButtonPaletteOverrides,
-  type LayoutLabelDefaults,
-  type LayoutLabelOverrides,
-} from "../../shared/config/layout_customization";
-
-// section: field_identifiers
-export const FORGOT_PASSWORD_FIELD_IDS = {
-  EMAIL: "email_address",
-} as const;
-
-export type ForgotPasswordFieldId = (typeof FORGOT_PASSWORD_FIELD_IDS)[keyof typeof FORGOT_PASSWORD_FIELD_IDS];
-
-// section: field_definitions
-const FORGOT_PASSWORD_FIELD_DEFINITIONS: LayoutFieldMap = {
-  [FORGOT_PASSWORD_FIELD_IDS.EMAIL]: {
-    id: FORGOT_PASSWORD_FIELD_IDS.EMAIL,
-    label: "Email address",
-    type: "email",
-    autoComplete: "email",
-    placeholder: "Enter your email address",
-    ariaLabel: "Email address input field",
-  },
-};
-
-export const createForgotPasswordFieldDefinitions = (
-  overrides?: LayoutFieldMapOverrides,
-) => resolveFieldDefinitions(FORGOT_PASSWORD_FIELD_DEFINITIONS, overrides);
-
-// section: label_defaults
-const FORGOT_PASSWORD_LABEL_DEFAULTS: LayoutLabelDefaults = {
-  heading: "Forgot your password?",
-  subHeading: "Enter your email address and we'll send you a link to reset your password.",
-  submitButton: "Send reset link",
-  cancelButton: "Cancel",
-};
-
-export const resolveForgotPasswordLabels = (overrides?: LayoutLabelOverrides) =>
-  resolveLabels(FORGOT_PASSWORD_LABEL_DEFAULTS, overrides);
-
-// section: button_palette_defaults
-const FORGOT_PASSWORD_BUTTON_PALETTE_DEFAULTS: ButtonPaletteDefaults = {
-  submitBackground: "#0f172a",
-  submitText: "#ffffff",
-  cancelBorder: "#cbd5f5",
-  cancelText: "#0f172a",
-};
-
-export const resolveForgotPasswordButtonPalette = (overrides?: ButtonPaletteOverrides) =>
-  resolveButtonPalette(FORGOT_PASSWORD_BUTTON_PALETTE_DEFAULTS, overrides);
-

package/src/components/layouts/forgot_password/hooks/use_forgot_password_form.ts

@@ -1,179 +0,0 @@
-// file_description: encapsulate forgot password form state, validation, and data interactions
-// section: imports
-import { useCallback, useMemo, useState } from "react";
-import { toast } from "sonner";
-import type { LayoutDataClient } from "../../shared/data/layout_data_client";
-import { FORGOT_PASSWORD_FIELD_IDS, type ForgotPasswordFieldId } from "../config/forgot_password_field_config";
-import { validateEmail } from "../../shared/utils/validation";
-
-// section: types
-export type ForgotPasswordFormValues = Record<ForgotPasswordFieldId, string>;
-export type ForgotPasswordFormErrors = Partial<Record<ForgotPasswordFieldId, string>> & {
-  submit?: string;
-};
-
-export type UseForgotPasswordFormParams<TClient = unknown> = {
-  dataClient: LayoutDataClient<TClient>;
-};
-
-export type UseForgotPasswordFormResult = {
-  values: ForgotPasswordFormValues;
-  errors: ForgotPasswordFormErrors;
-  isSubmitDisabled: boolean;
-  isSubmitting: boolean;
-  emailTouched: boolean;
-  handleFieldChange: (fieldId: ForgotPasswordFieldId, value: string) => void;
-  handleEmailBlur: () => void;
-  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
-  handleCancel: () => void;
-};
-
-// section: helpers
-const buildInitialValues = (): ForgotPasswordFormValues => ({
-  [FORGOT_PASSWORD_FIELD_IDS.EMAIL]: "",
-});
-
-// section: hook
-export const use_forgot_password_form = <TClient,>({
-  dataClient,
-}: UseForgotPasswordFormParams<TClient>): UseForgotPasswordFormResult => {
-  const [values, setValues] = useState<ForgotPasswordFormValues>(buildInitialValues);
-  const [errors, setErrors] = useState<ForgotPasswordFormErrors>({});
-  const [emailTouched, setEmailTouched] = useState<boolean>(false);
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-
-  const isSubmitDisabled = useMemo(() => {
-    if (isSubmitting) {
-      return true;
-    }
-
-    const hasEmptyField = Object.values(values).some((fieldValue) => fieldValue.trim() === "");
-    const hasErrors = Object.keys(errors).length > 0;
-    return hasEmptyField || hasErrors;
-  }, [errors, values, isSubmitting]);
-
-  const handleFieldChange = useCallback((fieldId: ForgotPasswordFieldId, value: string) => {
-    setValues((previousValues) => {
-      const nextValues: ForgotPasswordFormValues = {
-        ...previousValues,
-        [fieldId]: value,
-      };
-
-      setErrors((previousErrors) => {
-        const updatedErrors: ForgotPasswordFormErrors = { ...previousErrors };
-
-        // Only validate email on change if it has been touched (blurred)
-        if (fieldId === FORGOT_PASSWORD_FIELD_IDS.EMAIL && emailTouched) {
-          const emailError = validateEmail(value);
-          if (emailError) {
-            updatedErrors[FORGOT_PASSWORD_FIELD_IDS.EMAIL] = emailError;
-          } else {
-            delete updatedErrors[FORGOT_PASSWORD_FIELD_IDS.EMAIL];
-          }
-        }
-
-        return updatedErrors;
-      });
-
-      return nextValues;
-    });
-  }, [emailTouched]);
-
-  const handleEmailBlur = useCallback(() => {
-    setEmailTouched(true);
-    // Validate email on blur
-    setErrors((previousErrors) => {
-      const updatedErrors: ForgotPasswordFormErrors = { ...previousErrors };
-      const emailValue = values[FORGOT_PASSWORD_FIELD_IDS.EMAIL];
-      const emailError = validateEmail(emailValue);
-      if (emailError) {
-        updatedErrors[FORGOT_PASSWORD_FIELD_IDS.EMAIL] = emailError;
-      } else {
-        delete updatedErrors[FORGOT_PASSWORD_FIELD_IDS.EMAIL];
-      }
-      return updatedErrors;
-    });
-  }, [values]);
-
-  const handleSubmit = useCallback(
-    async (event: React.FormEvent<HTMLFormElement>) => {
-      event.preventDefault();
-
-      // Final validation
-      const emailError = validateEmail(values[FORGOT_PASSWORD_FIELD_IDS.EMAIL]);
-
-      if (emailError) {
-        setErrors({
-          [FORGOT_PASSWORD_FIELD_IDS.EMAIL]: emailError,
-        });
-        return;
-      }
-
-      setIsSubmitting(true);
-      setErrors({});
-
-      try {
-        const response = await fetch("/api/hazo_auth/forgot_password", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            email: values[FORGOT_PASSWORD_FIELD_IDS.EMAIL],
-          }),
-        });
-
-        const data = await response.json();
-
-        if (!response.ok) {
-          throw new Error(data.error || "Password reset request failed");
-        }
-
-        // Show success notification
-        toast.success("Password reset link sent", {
-          description: "If an account with that email exists, a password reset link has been sent.",
-        });
-
-        // Reset form on success
-        setValues(buildInitialValues());
-        setErrors({});
-        setEmailTouched(false);
-      } catch (error) {
-        const errorMessage =
-          error instanceof Error ? error.message : "Password reset request failed. Please try again.";
-
-        // Show error notification
-        toast.error("Password reset failed", {
-          description: errorMessage,
-        });
-
-        // Set error state
-        setErrors({
-          submit: errorMessage,
-        });
-      } finally {
-        setIsSubmitting(false);
-      }
-    },
-    [values, dataClient],
-  );
-
-  const handleCancel = useCallback(() => {
-    setValues(buildInitialValues());
-    setErrors({});
-    setEmailTouched(false);
-  }, []);
-
-  return {
-    values,
-    errors,
-    isSubmitDisabled,
-    isSubmitting,
-    emailTouched,
-    handleFieldChange,
-    handleEmailBlur,
-    handleSubmit,
-    handleCancel,
-  };
-};
-

package/src/components/layouts/forgot_password/index.tsx

@@ -1,168 +0,0 @@
-// file_description: forgot password layout component built atop shared layout utilities
-// section: client_directive
-"use client";
-
-// section: imports
-import { Input } from "../../ui/input";
-import { FormFieldWrapper } from "../shared/components/form_field_wrapper";
-import { FormHeader } from "../shared/components/form_header";
-import { FormActionButtons } from "../shared/components/form_action_buttons";
-import { TwoColumnAuthLayout } from "../shared/components/two_column_auth_layout";
-import { AlreadyLoggedInGuard } from "../shared/components/already_logged_in_guard";
-import {
-  type ButtonPaletteOverrides,
-  type LayoutFieldMapOverrides,
-  type LayoutLabelOverrides,
-} from "../shared/config/layout_customization";
-import {
-  FORGOT_PASSWORD_FIELD_IDS,
-  createForgotPasswordFieldDefinitions,
-  resolveForgotPasswordButtonPalette,
-  resolveForgotPasswordLabels,
-} from "./config/forgot_password_field_config";
-import {
-  use_forgot_password_form,
-  type UseForgotPasswordFormResult,
-} from "./hooks/use_forgot_password_form";
-import { type LayoutDataClient } from "../shared/data/layout_data_client";
-
-// section: types
-export type ForgotPasswordLayoutProps<TClient = unknown> = {
-  image_src: string;
-  image_alt: string;
-  image_background_color?: string;
-  field_overrides?: LayoutFieldMapOverrides;
-  labels?: LayoutLabelOverrides;
-  button_colors?: ButtonPaletteOverrides;
-  data_client: LayoutDataClient<TClient>;
-  alreadyLoggedInMessage?: string;
-  showLogoutButton?: boolean;
-  showReturnHomeButton?: boolean;
-  returnHomeButtonLabel?: string;
-  returnHomePath?: string;
-};
-
-const ORDERED_FIELDS: ForgotPasswordFieldId[] = [
-  FORGOT_PASSWORD_FIELD_IDS.EMAIL,
-];
-
-type ForgotPasswordFieldId = (typeof FORGOT_PASSWORD_FIELD_IDS)[keyof typeof FORGOT_PASSWORD_FIELD_IDS];
-
-// section: component
-export default function forgot_password_layout<TClient>({
-  image_src,
-  image_alt,
-  image_background_color = "#f1f5f9",
-  field_overrides,
-  labels,
-  button_colors,
-  data_client,
-  alreadyLoggedInMessage = "You are already logged in",
-  showLogoutButton = true,
-  showReturnHomeButton = false,
-  returnHomeButtonLabel = "Return home",
-  returnHomePath = "/",
-}: ForgotPasswordLayoutProps<TClient>) {
-  const fieldDefinitions = createForgotPasswordFieldDefinitions(field_overrides);
-  const resolvedLabels = resolveForgotPasswordLabels(labels);
-  const resolvedButtonPalette = resolveForgotPasswordButtonPalette(button_colors);
-
-  const form = use_forgot_password_form({
-    dataClient: data_client,
-  });
-
-  const renderFields = (formState: UseForgotPasswordFormResult) => {
-    return ORDERED_FIELDS.map((fieldId) => {
-      const fieldDefinition = fieldDefinitions[fieldId];
-      const fieldValue = formState.values[fieldId];
-      const fieldError = formState.errors[fieldId];
-
-      const inputElement = (
-        <Input
-          id={fieldDefinition.id}
-          type={fieldDefinition.type}
-          value={fieldValue}
-          onChange={(event) =>
-            formState.handleFieldChange(fieldId, event.target.value)
-          }
-          onBlur={
-            fieldId === FORGOT_PASSWORD_FIELD_IDS.EMAIL
-              ? formState.handleEmailBlur
-              : undefined
-          }
-          autoComplete={fieldDefinition.autoComplete}
-          placeholder={fieldDefinition.placeholder}
-          aria-label={fieldDefinition.ariaLabel}
-          className="cls_forgot_password_layout_field_input"
-        />
-      );
-
-      // Only show email error if field has been touched (blurred)
-      const shouldShowError =
-        fieldId === FORGOT_PASSWORD_FIELD_IDS.EMAIL
-          ? formState.emailTouched && fieldError
-            ? fieldError
-            : undefined
-          : fieldError;
-
-      return (
-        <FormFieldWrapper
-          key={fieldId}
-          fieldId={fieldDefinition.id}
-          label={fieldDefinition.label}
-          input={inputElement}
-          errorMessage={shouldShowError}
-        />
-      );
-    });
-  };
-
-  return (
-    <AlreadyLoggedInGuard
-      image_src={image_src}
-      image_alt={image_alt}
-      image_background_color={image_background_color}
-      message={alreadyLoggedInMessage}
-      showLogoutButton={showLogoutButton}
-      showReturnHomeButton={showReturnHomeButton}
-      returnHomeButtonLabel={returnHomeButtonLabel}
-      returnHomePath={returnHomePath}
-    >
-      <TwoColumnAuthLayout
-        imageSrc={image_src}
-        imageAlt={image_alt}
-        imageBackgroundColor={image_background_color}
-        formContent={
-          <>
-            <FormHeader
-              heading={resolvedLabels.heading}
-              subHeading={resolvedLabels.subHeading}
-            />
-            <form
-              className="cls_forgot_password_layout_form_fields flex flex-col gap-5"
-              onSubmit={form.handleSubmit}
-              aria-label="Forgot password form"
-            >
-              {renderFields(form)}
-              <FormActionButtons
-                submitLabel={resolvedLabels.submitButton}
-                cancelLabel={resolvedLabels.cancelButton}
-                buttonPalette={resolvedButtonPalette}
-                isSubmitDisabled={form.isSubmitDisabled}
-                onCancel={form.handleCancel}
-                submitAriaLabel="Submit forgot password form"
-                cancelAriaLabel="Cancel forgot password form"
-              />
-              {form.isSubmitting && (
-                <div className="cls_forgot_password_submitting_indicator text-sm text-slate-600 text-center">
-                  Sending reset link...
-                </div>
-              )}
-            </form>
-          </>
-        }
-      />
-    </AlreadyLoggedInGuard>
-  );
-}
-