hazo_auth 0.1.0

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

@@ -0,0 +1,67 @@
+// file_description: login 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 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

@@ -0,0 +1,281 @@
+// 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 "@/components/layouts/shared/data/layout_data_client";
+import { LOGIN_FIELD_IDS, type LoginFieldId } from "@/components/layouts/login/config/login_field_config";
+import { validateEmail } from "@/components/layouts/shared/utils/validation";
+import { get_client_ip } from "@/components/layouts/shared/utils/ip_address";
+import { trigger_auth_status_refresh } from "@/components/layouts/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;
+};
+
+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",
+}: 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 hasEmptyField = Object.values(values).some((fieldValue) => fieldValue.trim() === "");
+    const hasErrors = Object.keys(errors).length > 0;
+    return hasEmptyField || hasErrors;
+  }, [errors, 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/auth/login", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            email,
+            password,
+          }),
+        });
+
+        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(`/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();
+
+        // If redirect route is provided, redirect to it
+        if (redirectRoute) {
+          router.push(redirectRoute);
+        } 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],
+  );
+
+  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

@@ -0,0 +1,224 @@
+// file_description: login 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 { CheckCircle } from "lucide-react";
+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 {
+  LOGIN_FIELD_IDS,
+  createLoginFieldDefinitions,
+  resolveLoginButtonPalette,
+  resolveLoginLabels,
+} from "@/components/layouts/login/config/login_field_config";
+import {
+  use_login_form,
+  type UseLoginFormResult,
+} from "@/components/layouts/login/hooks/use_login_form";
+import { type LayoutDataClient } from "@/components/layouts/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;
+};
+
+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 = "/",
+}: 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,
+  });
+
+  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"
+              />
+            </form>
+          </>
+        }
+      />
+    </AlreadyLoggedInGuard>
+  );
+}
+