hazo_auth 1.4.2 → 1.6.0

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

@@ -1,275 +0,0 @@
-// 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 "../../shared/data/layout_data_client";
-import type { PasswordRequirementOptions, PasswordRequirementOverrides } from "../../shared/config/layout_customization";
-import { REGISTER_FIELD_IDS, type RegisterFieldId } from "../config/register_field_config";
-import { validateEmail, validatePassword } from "../../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>;
-  urlOnLogon?: string;
-};
-
-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,
-  urlOnLogon,
-}: 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/hazo_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],
-            url_on_logon: urlOnLogon,
-          }),
-        });
-
-        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, urlOnLogon],
-  );
-
-  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

@@ -1,226 +0,0 @@
-// file_description: register layout component built atop shared layout utilities
-// section: client_directive
-"use client";
-
-// section: imports
-import Link from "next/link";
-import { Input } from "../../ui/input";
-import { PasswordField } from "../shared/components/password_field";
-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,
-  type PasswordRequirementOverrides,
-} from "../shared/config/layout_customization";
-import {
-  REGISTER_FIELD_IDS,
-  createRegisterFieldDefinitions,
-  resolveRegisterButtonPalette,
-  resolveRegisterLabels,
-  resolveRegisterPasswordRequirements,
-} from "./config/register_field_config";
-import {
-  use_register_form,
-  type UseRegisterFormResult,
-} from "./hooks/use_register_form";
-import { type LayoutDataClient } from "../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;
-  signInPath?: string;
-  signInLabel?: string;
-  urlOnLogon?: 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 = "/",
-  signInPath = "/hazo_auth/login",
-  signInLabel = "Sign in",
-  urlOnLogon,
-}: 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,
-    urlOnLogon: urlOnLogon,
-  });
-
-  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"
-              />
-              <div className="cls_register_layout_sign_in_link flex items-center justify-center gap-1 text-sm text-muted-foreground">
-                <span>Already have an account?</span>
-                <Link
-                  href={signInPath}
-                  className="cls_register_layout_sign_in_link_text text-primary underline-offset-4 hover:underline"
-                  aria-label="Go to sign in page"
-                >
-                  {signInLabel}
-                </Link>
-              </div>
-              {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

@@ -1,86 +0,0 @@
-// file_description: reset 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,
-  type PasswordRequirementOptions,
-  type PasswordRequirementOverrides,
-  resolvePasswordRequirements,
-} from "../../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.";
-