hazo_auth 1.4.2 → 1.6.1

package/src/components/layouts/index.ts

@@ -1,26 +0,0 @@
-// file_description: barrel export for all layout components
-// section: layout_exports
-export { default as LoginLayout } from "./login/index";
-export type { LoginLayoutProps } from "./login/index";
-
-export { default as RegisterLayout } from "./register/index";
-export type { RegisterLayoutProps } from "./register/index";
-
-export { default as ForgotPasswordLayout } from "./forgot_password/index";
-export type { ForgotPasswordLayoutProps } from "./forgot_password/index";
-
-export { default as ResetPasswordLayout } from "./reset_password/index";
-export type { ResetPasswordLayoutProps } from "./reset_password/index";
-
-export { default as EmailVerificationLayout } from "./email_verification/index";
-export type { EmailVerificationLayoutProps } from "./email_verification/index";
-
-export { default as MySettingsLayout } from "./my_settings/index";
-export type { MySettingsLayoutProps } from "./my_settings/index";
-
-export { UserManagementLayout } from "./user_management/index";
-export type { UserManagementLayoutProps } from "./user_management/index";
-
-// section: shared_exports
-export * from "./shared/index";
-

package/src/components/layouts/login/config/login_field_config.ts

@@ -1,67 +0,0 @@
-// file_description: login 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 LOGIN_FIELD_IDS = {
-  EMAIL: "email_address",
-  PASSWORD: "password",
-} as const;
-
-export type LoginFieldId = (typeof LOGIN_FIELD_IDS)[keyof typeof LOGIN_FIELD_IDS];
-
-// section: field_definitions
-const LOGIN_FIELD_DEFINITIONS: LayoutFieldMap = {
-  [LOGIN_FIELD_IDS.EMAIL]: {
-    id: LOGIN_FIELD_IDS.EMAIL,
-    label: "Email address",
-    type: "email",
-    autoComplete: "email",
-    placeholder: "Enter your email address",
-    ariaLabel: "Email address input field",
-  },
-  [LOGIN_FIELD_IDS.PASSWORD]: {
-    id: LOGIN_FIELD_IDS.PASSWORD,
-    label: "Password",
-    type: "password",
-    autoComplete: "current-password",
-    placeholder: "Enter your password",
-    ariaLabel: "Password input field",
-  },
-};
-
-export const createLoginFieldDefinitions = (
-  overrides?: LayoutFieldMapOverrides,
-) => resolveFieldDefinitions(LOGIN_FIELD_DEFINITIONS, overrides);
-
-// section: label_defaults
-const LOGIN_LABEL_DEFAULTS: LayoutLabelDefaults = {
-  heading: "Sign in to your account",
-  subHeading: "Enter your credentials to access your secure workspace.",
-  submitButton: "Login",
-  cancelButton: "Cancel",
-};
-
-export const resolveLoginLabels = (overrides?: LayoutLabelOverrides) =>
-  resolveLabels(LOGIN_LABEL_DEFAULTS, overrides);
-
-// section: button_palette_defaults
-const LOGIN_BUTTON_PALETTE_DEFAULTS: ButtonPaletteDefaults = {
-  submitBackground: "#0f172a",
-  submitText: "#ffffff",
-  cancelBorder: "#cbd5f5",
-  cancelText: "#0f172a",
-};
-
-export const resolveLoginButtonPalette = (overrides?: ButtonPaletteOverrides) =>
-  resolveButtonPalette(LOGIN_BUTTON_PALETTE_DEFAULTS, overrides);
-

package/src/components/layouts/login/hooks/use_login_form.ts

@@ -1,286 +0,0 @@
-// file_description: encapsulate login form state, validation, data interactions, IP collection, and login attempt logging
-// section: imports
-import { useCallback, useMemo, useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
-import type { LayoutDataClient } from "../../shared/data/layout_data_client";
-import { LOGIN_FIELD_IDS, type LoginFieldId } from "../config/login_field_config";
-import { validateEmail } from "../../shared/utils/validation";
-import { get_client_ip } from "../../shared/utils/ip_address";
-import { trigger_auth_status_refresh } from "../../shared/hooks/use_auth_status";
-
-// section: types
-export type LoginFormValues = Record<LoginFieldId, string>;
-export type LoginFormErrors = Partial<Record<LoginFieldId, string>>;
-export type PasswordVisibilityState = {
-  password: boolean;
-};
-
-export type UseLoginFormParams<TClient = unknown> = {
-  dataClient: LayoutDataClient<TClient>;
-  logger?: {
-    info: (message: string, data?: Record<string, unknown>) => void;
-    error: (message: string, data?: Record<string, unknown>) => void;
-    warn: (message: string, data?: Record<string, unknown>) => void;
-    debug: (message: string, data?: Record<string, unknown>) => void;
-  };
-  redirectRoute?: string;
-  successMessage?: string;
-  urlOnLogon?: string;
-};
-
-export type UseLoginFormResult = {
-  values: LoginFormValues;
-  errors: LoginFormErrors;
-  passwordVisibility: PasswordVisibilityState;
-  isSubmitDisabled: boolean;
-  emailTouched: boolean;
-  isSuccess: boolean;
-  handleFieldChange: (fieldId: LoginFieldId, value: string) => void;
-  handleEmailBlur: () => void;
-  togglePasswordVisibility: () => void;
-  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
-  handleCancel: () => void;
-};
-
-// section: helpers
-const buildInitialValues = (): LoginFormValues => ({
-  [LOGIN_FIELD_IDS.EMAIL]: "",
-  [LOGIN_FIELD_IDS.PASSWORD]: "",
-});
-
-const get_filename = (): string => {
-  return "use_login_form.ts";
-};
-
-const get_line_number = (): number => {
-  // This is a placeholder - in a real implementation, you might use Error stack trace
-  return 0;
-};
-
-// section: hook
-export const use_login_form = <TClient,>({
-  dataClient,
-  logger,
-  redirectRoute,
-  successMessage = "Successfully logged in",
-  urlOnLogon,
-}: UseLoginFormParams<TClient>): UseLoginFormResult => {
-  const router = useRouter();
-  const [values, setValues] = useState<LoginFormValues>(buildInitialValues);
-  const [errors, setErrors] = useState<LoginFormErrors>({});
-  const [passwordVisibility, setPasswordVisibility] = useState<PasswordVisibilityState>({
-    password: false,
-  });
-  const [clientIp, setClientIp] = useState<string>("unknown");
-  const [emailTouched, setEmailTouched] = useState<boolean>(false);
-  const [isSuccess, setIsSuccess] = useState<boolean>(false);
-
-  // section: ip_collection
-  useEffect(() => {
-    let isMounted = true;
-    void get_client_ip().then((ip) => {
-      if (isMounted) {
-        setClientIp(ip);
-      }
-    });
-    return () => {
-      isMounted = false;
-    };
-  }, []);
-
-  const isSubmitDisabled = useMemo(() => {
-    const allFieldsEmpty = Object.values(values).every((fieldValue) => fieldValue.trim() === "");
-    return allFieldsEmpty;
-  }, [values]);
-
-  const togglePasswordVisibility = useCallback(() => {
-    setPasswordVisibility((previous) => ({
-      password: !previous.password,
-    }));
-  }, []);
-
-  const handleFieldChange = useCallback((fieldId: LoginFieldId, value: string) => {
-    setValues((previousValues) => {
-      const nextValues: LoginFormValues = {
-        ...previousValues,
-        [fieldId]: value,
-      };
-
-      setErrors((previousErrors) => {
-        const updatedErrors: LoginFormErrors = { ...previousErrors };
-
-        // Only validate email on change if it has been touched (blurred)
-        if (fieldId === LOGIN_FIELD_IDS.EMAIL && emailTouched) {
-          const emailError = validateEmail(value);
-          if (emailError) {
-            updatedErrors[LOGIN_FIELD_IDS.EMAIL] = emailError;
-          } else {
-            delete updatedErrors[LOGIN_FIELD_IDS.EMAIL];
-          }
-        }
-
-        return updatedErrors;
-      });
-
-      return nextValues;
-    });
-  }, [emailTouched]);
-
-  const handleEmailBlur = useCallback(() => {
-    setEmailTouched(true);
-    // Validate email on blur
-    setErrors((previousErrors) => {
-      const updatedErrors: LoginFormErrors = { ...previousErrors };
-      const emailValue = values[LOGIN_FIELD_IDS.EMAIL];
-      const emailError = validateEmail(emailValue);
-      if (emailError) {
-        updatedErrors[LOGIN_FIELD_IDS.EMAIL] = emailError;
-      } else {
-        delete updatedErrors[LOGIN_FIELD_IDS.EMAIL];
-      }
-      return updatedErrors;
-    });
-  }, [values]);
-
-  // section: login_attempt_logging
-  const log_login_attempt = useCallback(
-    (success: boolean, errorMessage?: string) => {
-      if (!logger) {
-        return;
-      }
-
-      const timestamp = new Date().toISOString();
-      const logData = {
-        filename: get_filename(),
-        line_number: get_line_number(),
-        email: values[LOGIN_FIELD_IDS.EMAIL],
-        ip_address: clientIp,
-        timestamp,
-        success,
-        ...(errorMessage ? { error_message: errorMessage } : {}),
-      };
-
-      if (success) {
-        logger.info("login_attempt_successful", logData);
-      } else {
-        logger.error("login_attempt_failed", logData);
-      }
-    },
-    [logger, values, clientIp],
-  );
-
-  const handleSubmit = useCallback(
-    async (event: React.FormEvent<HTMLFormElement>) => {
-      event.preventDefault();
-
-      const email = values[LOGIN_FIELD_IDS.EMAIL];
-      const password = values[LOGIN_FIELD_IDS.PASSWORD];
-
-      try {
-        // Update IP address if still unknown
-        const currentIp = clientIp === "unknown" ? await get_client_ip() : clientIp;
-        setClientIp(currentIp);
-
-        // Attempt login via API route
-        const response = await fetch("/api/hazo_auth/login", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            email,
-            password,
-            url_on_logon: urlOnLogon,
-          }),
-        });
-
-        const data = await response.json();
-
-        if (!response.ok || !data.success) {
-          // Check if email is not verified
-          if (data.email_not_verified) {
-            // Redirect to verify_email page with email and message
-            const emailParam = encodeURIComponent(email);
-            const messageParam = encodeURIComponent(
-              "Your email address has not been verified. Please verify your email to continue."
-            );
-            router.push(`/hazo_auth/verify_email?email=${emailParam}&message=${messageParam}`);
-            return;
-          }
-
-          // Login failed for other reasons
-          const errorMessage = data.error || "Login failed. Please try again.";
-          
-          // Log failed login attempt
-          log_login_attempt(false, errorMessage);
-
-          // Set error state (remain on same page)
-          setErrors({
-            [LOGIN_FIELD_IDS.EMAIL]: errorMessage,
-          });
-          setIsSuccess(false);
-          return;
-        }
-
-        // Login successful
-        // Log successful login attempt
-        log_login_attempt(true);
-
-        // Trigger auth status refresh in all components (navbar, sidebar, etc.)
-        trigger_auth_status_refresh();
-
-        // Refresh the page to update authentication state (cookies are set server-side)
-        router.refresh();
-
-        // Use redirectUrl from server response if available, otherwise fall back to redirectRoute prop
-        // The server logic already prioritizes: query param > stored DB value > config > default "/"
-        const finalRedirectUrl = data.redirectUrl || redirectRoute;
-
-        if (finalRedirectUrl) {
-          router.push(finalRedirectUrl);
-        } else {
-          // Otherwise, show success message
-          setIsSuccess(true);
-        }
-      } catch (error) {
-        const errorMessage =
-          error instanceof Error ? error.message : "Unknown error occurred";
-        
-        // Log failed login attempt
-        log_login_attempt(false, errorMessage);
-
-        // Set error state (remain on same page)
-        setErrors({
-          [LOGIN_FIELD_IDS.EMAIL]: errorMessage,
-        });
-        setIsSuccess(false);
-      }
-    },
-    [values, clientIp, log_login_attempt, redirectRoute, router, urlOnLogon],
-  );
-
-  const handleCancel = useCallback(() => {
-    setValues(buildInitialValues());
-    setErrors({});
-    setPasswordVisibility({
-      password: false,
-    });
-    setEmailTouched(false);
-    setIsSuccess(false);
-  }, []);
-
-  return {
-    values,
-    errors,
-    passwordVisibility,
-    isSubmitDisabled,
-    emailTouched,
-    isSuccess,
-    handleFieldChange,
-    handleEmailBlur,
-    togglePasswordVisibility,
-    handleSubmit,
-    handleCancel,
-  };
-};
-

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

@@ -1,252 +0,0 @@
-// file_description: login 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 { CheckCircle } from "lucide-react";
-import { AlreadyLoggedInGuard } from "../shared/components/already_logged_in_guard";
-import {
-  type ButtonPaletteOverrides,
-  type LayoutFieldMapOverrides,
-  type LayoutLabelOverrides,
-} from "../shared/config/layout_customization";
-import {
-  LOGIN_FIELD_IDS,
-  createLoginFieldDefinitions,
-  resolveLoginButtonPalette,
-  resolveLoginLabels,
-} from "./config/login_field_config";
-import {
-  use_login_form,
-  type UseLoginFormResult,
-} from "./hooks/use_login_form";
-import { type LayoutDataClient } from "../shared/data/layout_data_client";
-
-// section: types
-export type LoginLayoutProps<TClient = unknown> = {
-  image_src: string;
-  image_alt: string;
-  image_background_color?: string;
-  field_overrides?: LayoutFieldMapOverrides;
-  labels?: LayoutLabelOverrides;
-  button_colors?: ButtonPaletteOverrides;
-  data_client: LayoutDataClient<TClient>;
-  logger?: {
-    info: (message: string, data?: Record<string, unknown>) => void;
-    error: (message: string, data?: Record<string, unknown>) => void;
-    warn: (message: string, data?: Record<string, unknown>) => void;
-    debug: (message: string, data?: Record<string, unknown>) => void;
-  };
-  redirectRoute?: string;
-  successMessage?: string;
-  alreadyLoggedInMessage?: string;
-  showLogoutButton?: boolean;
-  showReturnHomeButton?: boolean;
-  returnHomeButtonLabel?: string;
-  returnHomePath?: string;
-  forgot_password_path?: string;
-  forgot_password_label?: string;
-  create_account_path?: string;
-  create_account_label?: string;
-  urlOnLogon?: string;
-};
-
-const ORDERED_FIELDS: LoginFieldId[] = [
-  LOGIN_FIELD_IDS.EMAIL,
-  LOGIN_FIELD_IDS.PASSWORD,
-];
-
-type LoginFieldId = (typeof LOGIN_FIELD_IDS)[keyof typeof LOGIN_FIELD_IDS];
-
-// section: component
-export default function login_layout<TClient>({
-  image_src,
-  image_alt,
-  image_background_color = "#f1f5f9",
-  field_overrides,
-  labels,
-  button_colors,
-  data_client,
-  logger,
-  redirectRoute,
-  successMessage = "Successfully logged in",
-  alreadyLoggedInMessage = "You are already logged in",
-  showLogoutButton = true,
-  showReturnHomeButton = false,
-  returnHomeButtonLabel = "Return home",
-  returnHomePath = "/",
-  forgot_password_path = "/hazo_auth/forgot_password",
-  forgot_password_label = "Forgot password?",
-  create_account_path = "/hazo_auth/register",
-  create_account_label = "Create account",
-  urlOnLogon,
-}: LoginLayoutProps<TClient>) {
-  const fieldDefinitions = createLoginFieldDefinitions(field_overrides);
-  const resolvedLabels = resolveLoginLabels(labels);
-  const resolvedButtonPalette = resolveLoginButtonPalette(button_colors);
-
-  const form = use_login_form({
-    dataClient: data_client,
-    logger,
-    redirectRoute,
-    successMessage,
-    urlOnLogon: urlOnLogon,
-  });
-
-  const renderFields = (formState: UseLoginFormResult) => {
-    return ORDERED_FIELDS.map((fieldId) => {
-      const fieldDefinition = fieldDefinitions[fieldId];
-      const fieldValue = formState.values[fieldId];
-      const fieldError = formState.errors[fieldId];
-
-      const isPasswordField = fieldDefinition.type === "password";
-
-      const inputElement = isPasswordField ? (
-        <PasswordField
-          inputId={fieldDefinition.id}
-          ariaLabel={fieldDefinition.ariaLabel}
-          value={fieldValue}
-          placeholder={fieldDefinition.placeholder}
-          autoComplete={fieldDefinition.autoComplete}
-          isVisible={formState.passwordVisibility.password}
-          onChange={(nextValue) => formState.handleFieldChange(fieldId, nextValue)}
-          onToggleVisibility={formState.togglePasswordVisibility}
-          errorMessage={fieldError}
-        />
-      ) : (
-        <Input
-          id={fieldDefinition.id}
-          type={fieldDefinition.type}
-          value={fieldValue}
-          onChange={(event) =>
-            formState.handleFieldChange(fieldId, event.target.value)
-          }
-          onBlur={
-            fieldId === LOGIN_FIELD_IDS.EMAIL
-              ? formState.handleEmailBlur
-              : undefined
-          }
-          autoComplete={fieldDefinition.autoComplete}
-          placeholder={fieldDefinition.placeholder}
-          aria-label={fieldDefinition.ariaLabel}
-          className="cls_login_layout_field_input"
-        />
-      );
-
-      // Only show email error if field has been touched (blurred)
-      const shouldShowError =
-        isPasswordField
-          ? undefined
-          : fieldId === LOGIN_FIELD_IDS.EMAIL
-            ? formState.emailTouched && fieldError
-              ? fieldError
-              : undefined
-            : fieldError;
-
-      return (
-        <FormFieldWrapper
-          key={fieldId}
-          fieldId={fieldDefinition.id}
-          label={fieldDefinition.label}
-          input={inputElement}
-          errorMessage={shouldShowError}
-        />
-      );
-    });
-  };
-
-  // Show success message if login was successful and no redirect route is provided
-  if (form.isSuccess) {
-    return (
-      <TwoColumnAuthLayout
-        imageSrc={image_src}
-        imageAlt={image_alt}
-        imageBackgroundColor={image_background_color}
-        formContent={
-          <>
-            <FormHeader
-              heading={resolvedLabels.heading}
-              subHeading={resolvedLabels.subHeading}
-            />
-            <div className="cls_login_layout_success flex flex-col items-center justify-center gap-4 p-8 text-center">
-              <CheckCircle
-                className="cls_login_layout_success_icon h-16 w-16 text-green-600"
-                aria-hidden="true"
-              />
-              <p className="cls_login_layout_success_message text-lg font-medium text-slate-900">
-                {successMessage}
-              </p>
-            </div>
-          </>
-        }
-      />
-    );
-  }
-
-  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_login_layout_form_fields flex flex-col gap-5"
-              onSubmit={form.handleSubmit}
-              aria-label="Login form"
-            >
-              {renderFields(form)}
-              <FormActionButtons
-                submitLabel={resolvedLabels.submitButton}
-                cancelLabel={resolvedLabels.cancelButton}
-                buttonPalette={resolvedButtonPalette}
-                isSubmitDisabled={form.isSubmitDisabled}
-                onCancel={form.handleCancel}
-                submitAriaLabel="Submit login form"
-                cancelAriaLabel="Cancel login form"
-              />
-              <div className="cls_login_layout_support_links flex flex-col gap-1 text-sm text-muted-foreground">
-                <Link
-                  href={forgot_password_path}
-                  className="cls_login_layout_forgot_password_link text-primary underline-offset-4 hover:underline"
-                  aria-label="Go to forgot password page"
-                >
-                  {forgot_password_label}
-                </Link>
-                <Link
-                  href={create_account_path}
-                  className="cls_login_layout_create_account_link text-primary underline-offset-4 hover:underline"
-                  aria-label="Go to create account page"
-                >
-                  {create_account_label}
-                </Link>
-              </div>
-            </form>
-          </>
-        }
-      />
-    </AlreadyLoggedInGuard>
-  );
-}
-