hazo_auth 0.1.0

package/src/components/layouts/register/hooks/use_register_form.ts

@@ -0,0 +1,272 @@
+// file_description: encapsulate register 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 type { PasswordRequirementOptions, PasswordRequirementOverrides } from "@/components/layouts/shared/config/layout_customization";
+import { REGISTER_FIELD_IDS, type RegisterFieldId } from "@/components/layouts/register/config/register_field_config";
+import { validateEmail, validatePassword } from "@/components/layouts/shared/utils/validation";
+
+// section: constants
+const PASSWORD_FIELDS: Array<RegisterFieldId> = [
+  REGISTER_FIELD_IDS.PASSWORD,
+  REGISTER_FIELD_IDS.CONFIRM_PASSWORD,
+];
+
+// section: types
+export type RegisterFormValues = Record<RegisterFieldId, string>;
+export type RegisterFormErrors = Partial<Record<RegisterFieldId, string | string[]>> & {
+  submit?: string;
+};
+export type PasswordVisibilityState = Record<
+  Extract<RegisterFieldId, "password" | "confirm_password">,
+  boolean
+>;
+
+export type UseRegisterFormParams<TClient = unknown> = {
+  showNameField: boolean;
+  passwordRequirements: PasswordRequirementOptions;
+  passwordRequirementOverrides?: PasswordRequirementOverrides;
+  dataClient: LayoutDataClient<TClient>;
+};
+
+export type UseRegisterFormResult = {
+  values: RegisterFormValues;
+  errors: RegisterFormErrors;
+  passwordVisibility: PasswordVisibilityState;
+  isSubmitDisabled: boolean;
+  isSubmitting: boolean;
+  emailTouched: boolean;
+  handleFieldChange: (fieldId: RegisterFieldId, value: string) => void;
+  handleEmailBlur: () => void;
+  togglePasswordVisibility: (fieldId: "password" | "confirm_password") => void;
+  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+  handleCancel: () => void;
+};
+
+// section: helpers
+const buildInitialValues = (): RegisterFormValues => ({
+  [REGISTER_FIELD_IDS.NAME]: "",
+  [REGISTER_FIELD_IDS.EMAIL]: "",
+  [REGISTER_FIELD_IDS.PASSWORD]: "",
+  [REGISTER_FIELD_IDS.CONFIRM_PASSWORD]: "",
+});
+
+
+// section: hook
+export const use_register_form = <TClient,>({
+  showNameField,
+  passwordRequirements,
+  dataClient,
+}: UseRegisterFormParams<TClient>): UseRegisterFormResult => {
+  const [values, setValues] = useState<RegisterFormValues>(buildInitialValues);
+  const [errors, setErrors] = useState<RegisterFormErrors>({});
+  const [passwordVisibility, setPasswordVisibility] = useState<PasswordVisibilityState>({
+    password: false,
+    confirm_password: false,
+  });
+  const [emailTouched, setEmailTouched] = useState<boolean>(false);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+
+  const isSubmitDisabled = useMemo(() => {
+    if (isSubmitting) {
+      return true;
+    }
+
+    const hasEmptyField = Object.entries(values).some(([fieldId, fieldValue]) => {
+      if (fieldId === REGISTER_FIELD_IDS.NAME && !showNameField) {
+        return false;
+      }
+      return fieldValue.trim() === "";
+    });
+
+    const hasErrors = Object.keys(errors).length > 0;
+    return hasEmptyField || hasErrors;
+  }, [errors, showNameField, values, isSubmitting]);
+
+  const togglePasswordVisibility = useCallback((fieldId: "password" | "confirm_password") => {
+    setPasswordVisibility((previous) => ({
+      ...previous,
+      [fieldId]: !previous[fieldId],
+    }));
+  }, []);
+
+  const handleFieldChange = useCallback(
+    (fieldId: RegisterFieldId, value: string) => {
+      setValues((previousValues) => {
+        const nextValues: RegisterFormValues = {
+          ...previousValues,
+          [fieldId]: value,
+        };
+
+        setErrors((previousErrors) => {
+          const updatedErrors: RegisterFormErrors = { ...previousErrors };
+
+          // Only validate email on change if it has been touched (blurred)
+          if (fieldId === REGISTER_FIELD_IDS.EMAIL && emailTouched) {
+            const emailError = validateEmail(value);
+            if (emailError) {
+              updatedErrors[REGISTER_FIELD_IDS.EMAIL] = emailError;
+            } else {
+              delete updatedErrors[REGISTER_FIELD_IDS.EMAIL];
+            }
+          }
+
+          if (PASSWORD_FIELDS.includes(fieldId)) {
+            const passwordError = validatePassword(
+              nextValues[REGISTER_FIELD_IDS.PASSWORD],
+              passwordRequirements,
+            );
+
+            if (passwordError) {
+              updatedErrors[REGISTER_FIELD_IDS.PASSWORD] = passwordError;
+            } else {
+              delete updatedErrors[REGISTER_FIELD_IDS.PASSWORD];
+            }
+
+            if (
+              nextValues[REGISTER_FIELD_IDS.CONFIRM_PASSWORD].trim().length > 0 &&
+              nextValues[REGISTER_FIELD_IDS.PASSWORD] !==
+                nextValues[REGISTER_FIELD_IDS.CONFIRM_PASSWORD]
+            ) {
+              updatedErrors[REGISTER_FIELD_IDS.CONFIRM_PASSWORD] = "passwords do not match";
+            } else {
+              delete updatedErrors[REGISTER_FIELD_IDS.CONFIRM_PASSWORD];
+            }
+          }
+
+          return updatedErrors;
+        });
+
+        return nextValues;
+      });
+    },
+    [passwordRequirements, emailTouched],
+  );
+
+  const handleEmailBlur = useCallback(() => {
+    setEmailTouched(true);
+    // Validate email on blur
+    setErrors((previousErrors) => {
+      const updatedErrors: RegisterFormErrors = { ...previousErrors };
+      const emailValue = values[REGISTER_FIELD_IDS.EMAIL];
+      const emailError = validateEmail(emailValue);
+      if (emailError) {
+        updatedErrors[REGISTER_FIELD_IDS.EMAIL] = emailError;
+      } else {
+        delete updatedErrors[REGISTER_FIELD_IDS.EMAIL];
+      }
+      return updatedErrors;
+    });
+  }, [values]);
+
+  const handleSubmit = useCallback(
+    async (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+
+      // Final validation
+      const emailError = validateEmail(values[REGISTER_FIELD_IDS.EMAIL]);
+      const passwordError = validatePassword(
+        values[REGISTER_FIELD_IDS.PASSWORD],
+        passwordRequirements,
+      );
+
+      if (emailError || passwordError) {
+        setErrors({
+          ...(emailError ? { [REGISTER_FIELD_IDS.EMAIL]: emailError } : {}),
+          ...(passwordError ? { [REGISTER_FIELD_IDS.PASSWORD]: passwordError } : {}),
+        });
+        return;
+      }
+
+      // Check password match
+      if (
+        values[REGISTER_FIELD_IDS.PASSWORD] !==
+        values[REGISTER_FIELD_IDS.CONFIRM_PASSWORD]
+      ) {
+        setErrors({
+          [REGISTER_FIELD_IDS.CONFIRM_PASSWORD]: "passwords do not match",
+        });
+        return;
+      }
+
+      setIsSubmitting(true);
+      setErrors({});
+
+      try {
+        const response = await fetch("/api/auth/register", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: values[REGISTER_FIELD_IDS.NAME] || undefined,
+            email: values[REGISTER_FIELD_IDS.EMAIL],
+            password: values[REGISTER_FIELD_IDS.PASSWORD],
+          }),
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+          throw new Error(data.error || "Registration failed");
+        }
+
+        // Show success notification
+        toast.success("Registration successful!", {
+          description: "Your account has been created successfully.",
+        });
+
+        // Reset form on success
+        setValues(buildInitialValues());
+        setErrors({});
+        setPasswordVisibility({
+          password: false,
+          confirm_password: false,
+        });
+        setEmailTouched(false);
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : "Registration failed. Please try again.";
+
+        // Show error notification
+        toast.error("Registration failed", {
+          description: errorMessage,
+        });
+
+        // Set error state
+        setErrors({
+          submit: errorMessage,
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [values, passwordRequirements, dataClient],
+  );
+
+  const handleCancel = useCallback(() => {
+    setValues(buildInitialValues());
+    setErrors({});
+    setPasswordVisibility({
+      password: false,
+      confirm_password: false,
+    });
+    setEmailTouched(false);
+  }, []);
+
+  return {
+    values,
+    errors,
+    passwordVisibility,
+    isSubmitDisabled,
+    isSubmitting,
+    emailTouched,
+    handleFieldChange,
+    handleEmailBlur,
+    togglePasswordVisibility,
+    handleSubmit,
+    handleCancel,
+  };
+};
+

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

@@ -0,0 +1,208 @@
+// file_description: register layout component built atop shared layout utilities
+// section: client_directive
+"use client";
+
+// section: imports
+import { Input } from "@/components/ui/input";
+import { PasswordField } from "@/components/layouts/shared/components/password_field";
+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,
+  type PasswordRequirementOverrides,
+} from "@/components/layouts/shared/config/layout_customization";
+import {
+  REGISTER_FIELD_IDS,
+  createRegisterFieldDefinitions,
+  resolveRegisterButtonPalette,
+  resolveRegisterLabels,
+  resolveRegisterPasswordRequirements,
+} from "@/components/layouts/register/config/register_field_config";
+import {
+  use_register_form,
+  type UseRegisterFormResult,
+} from "@/components/layouts/register/hooks/use_register_form";
+import { type LayoutDataClient } from "@/components/layouts/shared/data/layout_data_client";
+
+// section: types
+export type RegisterLayoutProps<TClient = unknown> = {
+  image_src: string;
+  image_alt: string;
+  image_background_color?: string;
+  field_overrides?: LayoutFieldMapOverrides;
+  labels?: LayoutLabelOverrides;
+  button_colors?: ButtonPaletteOverrides;
+  password_requirements?: PasswordRequirementOverrides;
+  show_name_field?: boolean;
+  data_client: LayoutDataClient<TClient>;
+  alreadyLoggedInMessage?: string;
+  showLogoutButton?: boolean;
+  showReturnHomeButton?: boolean;
+  returnHomeButtonLabel?: string;
+  returnHomePath?: string;
+};
+
+const ORDERED_FIELDS: RegisterFieldId[] = [
+  REGISTER_FIELD_IDS.NAME,
+  REGISTER_FIELD_IDS.EMAIL,
+  REGISTER_FIELD_IDS.PASSWORD,
+  REGISTER_FIELD_IDS.CONFIRM_PASSWORD,
+];
+
+type RegisterFieldId = (typeof REGISTER_FIELD_IDS)[keyof typeof REGISTER_FIELD_IDS];
+
+// section: component
+export default function register_layout<TClient>({
+  image_src,
+  image_alt,
+  image_background_color = "#f1f5f9",
+  field_overrides,
+  labels,
+  button_colors,
+  password_requirements,
+  show_name_field = true,
+  data_client,
+  alreadyLoggedInMessage = "You are already logged in",
+  showLogoutButton = true,
+  showReturnHomeButton = false,
+  returnHomeButtonLabel = "Return home",
+  returnHomePath = "/",
+}: RegisterLayoutProps<TClient>) {
+  const fieldDefinitions = createRegisterFieldDefinitions(field_overrides);
+  const resolvedLabels = resolveRegisterLabels(labels);
+  const resolvedButtonPalette = resolveRegisterButtonPalette(button_colors);
+  const resolvedPasswordRequirements = resolveRegisterPasswordRequirements(
+    password_requirements,
+  );
+
+  const form = use_register_form({
+    showNameField: show_name_field,
+    passwordRequirements: resolvedPasswordRequirements,
+    dataClient: data_client,
+  });
+
+  const renderFields = (formState: UseRegisterFormResult) => {
+    const renderOrder = ORDERED_FIELDS.filter(
+      (fieldId) => show_name_field || fieldId !== REGISTER_FIELD_IDS.NAME,
+    );
+
+    return renderOrder.map((fieldId) => {
+      const fieldDefinition = fieldDefinitions[fieldId];
+      const fieldValue = formState.values[fieldId];
+      const fieldError = formState.errors[fieldId];
+
+      const isPasswordField =
+        fieldDefinition.type === "password" &&
+        (fieldId === REGISTER_FIELD_IDS.PASSWORD ||
+          fieldId === REGISTER_FIELD_IDS.CONFIRM_PASSWORD);
+
+      const inputElement = isPasswordField ? (
+        <PasswordField
+          inputId={fieldDefinition.id}
+          ariaLabel={fieldDefinition.ariaLabel}
+          value={fieldValue}
+          placeholder={fieldDefinition.placeholder}
+          autoComplete={fieldDefinition.autoComplete}
+          isVisible={formState.passwordVisibility[fieldDefinition.id as "password" | "confirm_password"]}
+          onChange={(nextValue) => formState.handleFieldChange(fieldId, nextValue)}
+          onToggleVisibility={() =>
+            formState.togglePasswordVisibility(fieldDefinition.id as "password" | "confirm_password")
+          }
+          errorMessage={fieldError as string | string[] | undefined}
+        />
+      ) : (
+        <Input
+          id={fieldDefinition.id}
+          type={fieldDefinition.type}
+          value={fieldValue}
+          onChange={(event) =>
+            formState.handleFieldChange(fieldId, event.target.value)
+          }
+          onBlur={
+            fieldId === REGISTER_FIELD_IDS.EMAIL
+              ? formState.handleEmailBlur
+              : undefined
+          }
+          autoComplete={fieldDefinition.autoComplete}
+          placeholder={fieldDefinition.placeholder}
+          aria-label={fieldDefinition.ariaLabel}
+          className="cls_register_layout_field_input"
+        />
+      );
+
+      // Only show email error if field has been touched (blurred)
+      const shouldShowError =
+        isPasswordField
+          ? undefined
+          : fieldId === REGISTER_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_register_layout_form_fields flex flex-col gap-5"
+              onSubmit={form.handleSubmit}
+              aria-label="Registration form"
+            >
+              {renderFields(form)}
+              <FormActionButtons
+                submitLabel={resolvedLabels.submitButton}
+                cancelLabel={resolvedLabels.cancelButton}
+                buttonPalette={resolvedButtonPalette}
+                isSubmitDisabled={form.isSubmitDisabled}
+                onCancel={form.handleCancel}
+                submitAriaLabel="Submit registration form"
+                cancelAriaLabel="Cancel registration form"
+              />
+              {form.isSubmitting && (
+                <div className="cls_register_submitting_indicator text-sm text-slate-600 text-center">
+                  Registering...
+                </div>
+              )}
+            </form>
+          </>
+        }
+      />
+    </AlreadyLoggedInGuard>
+  );
+}
+

package/src/components/layouts/reset_password/config/reset_password_field_config.ts

@@ -0,0 +1,86 @@
+// file_description: reset 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,
+  type PasswordRequirementOptions,
+  type PasswordRequirementOverrides,
+  resolvePasswordRequirements,
+} from "@/components/layouts/shared/config/layout_customization";
+
+// section: field_identifiers
+export const RESET_PASSWORD_FIELD_IDS = {
+  PASSWORD: "password",
+  CONFIRM_PASSWORD: "confirm_password",
+} as const;
+
+export type ResetPasswordFieldId = (typeof RESET_PASSWORD_FIELD_IDS)[keyof typeof RESET_PASSWORD_FIELD_IDS];
+
+// section: field_definitions
+const RESET_PASSWORD_FIELD_DEFINITIONS: LayoutFieldMap = {
+  [RESET_PASSWORD_FIELD_IDS.PASSWORD]: {
+    id: RESET_PASSWORD_FIELD_IDS.PASSWORD,
+    label: "New password",
+    type: "password",
+    autoComplete: "new-password",
+    placeholder: "Enter your new password",
+    ariaLabel: "New password input field",
+  },
+  [RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD]: {
+    id: RESET_PASSWORD_FIELD_IDS.CONFIRM_PASSWORD,
+    label: "Confirm new password",
+    type: "password",
+    autoComplete: "new-password",
+    placeholder: "Re-enter your new password",
+    ariaLabel: "Confirm new password input field",
+  },
+};
+
+export const createResetPasswordFieldDefinitions = (
+  overrides?: LayoutFieldMapOverrides,
+) => resolveFieldDefinitions(RESET_PASSWORD_FIELD_DEFINITIONS, overrides);
+
+// section: label_defaults
+const RESET_PASSWORD_LABEL_DEFAULTS: LayoutLabelDefaults = {
+  heading: "Reset your password",
+  subHeading: "Enter your new password below.",
+  submitButton: "Reset password",
+  cancelButton: "Cancel",
+};
+
+export const resolveResetPasswordLabels = (overrides?: LayoutLabelOverrides) =>
+  resolveLabels(RESET_PASSWORD_LABEL_DEFAULTS, overrides);
+
+// section: button_palette_defaults
+const RESET_PASSWORD_BUTTON_PALETTE_DEFAULTS: ButtonPaletteDefaults = {
+  submitBackground: "#0f172a",
+  submitText: "#ffffff",
+  cancelBorder: "#cbd5f5",
+  cancelText: "#0f172a",
+};
+
+export const resolveResetPasswordButtonPalette = (overrides?: ButtonPaletteOverrides) =>
+  resolveButtonPalette(RESET_PASSWORD_BUTTON_PALETTE_DEFAULTS, overrides);
+
+// section: password_requirements_defaults
+const RESET_PASSWORD_PASSWORD_REQUIREMENT_DEFAULTS: PasswordRequirementOptions = {
+  minimum_length: 8,
+  require_uppercase: false,
+  require_lowercase: false,
+  require_number: false,
+  require_special: false,
+};
+
+export const resolveResetPasswordPasswordRequirements = (
+  overrides?: PasswordRequirementOverrides,
+) => resolvePasswordRequirements(RESET_PASSWORD_PASSWORD_REQUIREMENT_DEFAULTS, overrides);
+
+// section: already_logged_in_label
+export const RESET_PASSWORD_ALREADY_LOGGED_IN_MESSAGE_DEFAULT = "You're already logged in.";
+