hazo_auth 0.1.0

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

@@ -0,0 +1,297 @@
+// file_description: email verification layout component built atop shared layout utilities
+// section: client_directive
+"use client";
+
+// section: imports
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { FormFieldWrapper } from "@/components/layouts/shared/components/form_field_wrapper";
+import { FormHeader } from "@/components/layouts/shared/components/form_header";
+import { FormActionButtons } from "@/components/layouts/shared/components/form_action_buttons";
+import { TwoColumnAuthLayout } from "@/components/layouts/shared/components/two_column_auth_layout";
+import {
+  type ButtonPaletteOverrides,
+  type LayoutFieldMapOverrides,
+  type LayoutLabelOverrides,
+} from "@/components/layouts/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 "@/components/layouts/email_verification/config/email_verification_field_config";
+import {
+  use_email_verification,
+  type UseEmailVerificationResult,
+} from "@/components/layouts/email_verification/hooks/use_email_verification";
+import { type LayoutDataClient } from "@/components/layouts/shared/data/layout_data_client";
+import { CheckCircle, XCircle, Loader2 } from "lucide-react";
+import { AlreadyLoggedInGuard } from "@/components/layouts/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 = "/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

@@ -0,0 +1,58 @@
+// file_description: forgot password layout specific configuration helpers
+// section: imports
+import type { LayoutFieldMap, LayoutFieldMapOverrides } from "@/components/layouts/shared/config/layout_customization";
+import {
+  resolveButtonPalette,
+  resolveFieldDefinitions,
+  resolveLabels,
+  type ButtonPaletteDefaults,
+  type ButtonPaletteOverrides,
+  type LayoutLabelDefaults,
+  type LayoutLabelOverrides,
+} from "@/components/layouts/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

@@ -0,0 +1,179 @@
+// 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 "@/components/layouts/shared/data/layout_data_client";
+import { FORGOT_PASSWORD_FIELD_IDS, type ForgotPasswordFieldId } from "@/components/layouts/forgot_password/config/forgot_password_field_config";
+import { validateEmail } from "@/components/layouts/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/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

@@ -0,0 +1,168 @@
+// file_description: forgot password layout component built atop shared layout utilities
+// section: client_directive
+"use client";
+
+// section: imports
+import { Input } from "@/components/ui/input";
+import { FormFieldWrapper } from "@/components/layouts/shared/components/form_field_wrapper";
+import { FormHeader } from "@/components/layouts/shared/components/form_header";
+import { FormActionButtons } from "@/components/layouts/shared/components/form_action_buttons";
+import { TwoColumnAuthLayout } from "@/components/layouts/shared/components/two_column_auth_layout";
+import { AlreadyLoggedInGuard } from "@/components/layouts/shared/components/already_logged_in_guard";
+import {
+  type ButtonPaletteOverrides,
+  type LayoutFieldMapOverrides,
+  type LayoutLabelOverrides,
+} from "@/components/layouts/shared/config/layout_customization";
+import {
+  FORGOT_PASSWORD_FIELD_IDS,
+  createForgotPasswordFieldDefinitions,
+  resolveForgotPasswordButtonPalette,
+  resolveForgotPasswordLabels,
+} from "@/components/layouts/forgot_password/config/forgot_password_field_config";
+import {
+  use_forgot_password_form,
+  type UseForgotPasswordFormResult,
+} from "@/components/layouts/forgot_password/hooks/use_forgot_password_form";
+import { type LayoutDataClient } from "@/components/layouts/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>
+  );
+}
+