hazo_auth 0.1.0

package/src/app/reset_password/reset_password_page_client.tsx

@@ -0,0 +1,81 @@
+// file_description: client component for reset password page that initializes hazo_connect and renders reset password layout
+// section: client_directive
+"use client";
+
+// section: imports
+import { useEffect, useState } from "react";
+import reset_password_layout from "@/components/layouts/reset_password";
+import { createLayoutDataClient } from "@/components/layouts/shared/data/layout_data_client";
+import { create_sqlite_hazo_connect } from "@/lib/hazo_connect_setup";
+import type { LayoutDataClient } from "@/components/layouts/shared/data/layout_data_client";
+
+// section: types
+type ResetPasswordPageClientProps = {
+  errorMessage?: string;
+  successMessage?: string;
+  loginPath?: string;
+  forgotPasswordPath?: string;
+  alreadyLoggedInMessage?: string;
+  showLogoutButton?: boolean;
+  showReturnHomeButton?: boolean;
+  returnHomeButtonLabel?: string;
+  returnHomePath?: string;
+  passwordRequirements?: {
+    minimum_length: number;
+    require_uppercase: boolean;
+    require_lowercase: boolean;
+    require_number: boolean;
+    require_special: boolean;
+  };
+};
+
+// section: component
+export function ResetPasswordPageClient({
+  errorMessage,
+  successMessage,
+  loginPath,
+  forgotPasswordPath,
+  alreadyLoggedInMessage,
+  showLogoutButton,
+  showReturnHomeButton,
+  returnHomeButtonLabel,
+  returnHomePath,
+  passwordRequirements,
+}: ResetPasswordPageClientProps) {
+  const [dataClient, setDataClient] = useState<LayoutDataClient<unknown> | null>(null);
+
+  useEffect(() => {
+    // Initialize hazo_connect on client side
+    const hazoConnect = create_sqlite_hazo_connect();
+    const client = createLayoutDataClient(hazoConnect);
+    
+    setDataClient(client);
+  }, []);
+
+  // Show loading state while initializing
+  if (!dataClient) {
+    return <div className="cls_reset_password_page_loading text-slate-600">Loading...</div>;
+  }
+
+  const ResetPasswordLayout = reset_password_layout;
+
+  return (
+    <ResetPasswordLayout
+      image_src="/globe.svg"
+      image_alt="Illustration of a globe representing secure authentication workflows"
+      image_background_color="#e2e8f0"
+      data_client={dataClient}
+      errorMessage={errorMessage}
+      successMessage={successMessage}
+      loginPath={loginPath}
+      forgotPasswordPath={forgotPasswordPath}
+      alreadyLoggedInMessage={alreadyLoggedInMessage}
+      showLogoutButton={showLogoutButton}
+      showReturnHomeButton={showReturnHomeButton}
+      returnHomeButtonLabel={returnHomeButtonLabel}
+      returnHomePath={returnHomePath}
+      password_requirements={passwordRequirements}
+    />
+  );
+}
+

package/src/app/verify_email/page.tsx

@@ -0,0 +1,24 @@
+// file_description: render the email verification page shell and mount the email verification layout component within sidebar
+// section: imports
+import { SidebarLayoutWrapper } from "@/components/layouts/shared/components/sidebar_layout_wrapper";
+import { VerifyEmailPageClient } from "./verify_email_page_client";
+import { get_email_verification_config } from "@/lib/email_verification_config.server";
+
+// section: component
+export default function verify_email_page() {
+  // Read email verification configuration from hazo_auth_config.ini (server-side)
+  const emailVerificationConfig = get_email_verification_config();
+
+  return (
+    <SidebarLayoutWrapper>
+      <VerifyEmailPageClient
+        alreadyLoggedInMessage={emailVerificationConfig.alreadyLoggedInMessage}
+        showLogoutButton={emailVerificationConfig.showLogoutButton}
+        showReturnHomeButton={emailVerificationConfig.showReturnHomeButton}
+        returnHomeButtonLabel={emailVerificationConfig.returnHomeButtonLabel}
+        returnHomePath={emailVerificationConfig.returnHomePath}
+      />
+    </SidebarLayoutWrapper>
+  );
+}
+

package/src/app/verify_email/verify_email_page_client.tsx

@@ -0,0 +1,60 @@
+// file_description: client component for verify email page that initializes hazo_connect and renders email verification layout
+// section: client_directive
+"use client";
+
+// section: imports
+import { useEffect, useState } from "react";
+import email_verification_layout from "@/components/layouts/email_verification";
+import { createLayoutDataClient } from "@/components/layouts/shared/data/layout_data_client";
+import { create_sqlite_hazo_connect } from "@/lib/hazo_connect_setup";
+import type { LayoutDataClient } from "@/components/layouts/shared/data/layout_data_client";
+
+// section: types
+type VerifyEmailPageClientProps = {
+  alreadyLoggedInMessage?: string;
+  showLogoutButton?: boolean;
+  showReturnHomeButton?: boolean;
+  returnHomeButtonLabel?: string;
+  returnHomePath?: string;
+};
+
+// section: component
+export function VerifyEmailPageClient({
+  alreadyLoggedInMessage,
+  showLogoutButton,
+  showReturnHomeButton,
+  returnHomeButtonLabel,
+  returnHomePath,
+}: VerifyEmailPageClientProps) {
+  const [dataClient, setDataClient] = useState<LayoutDataClient<unknown> | null>(null);
+
+  useEffect(() => {
+    // Initialize hazo_connect on client side
+    const hazoConnect = create_sqlite_hazo_connect();
+    const client = createLayoutDataClient(hazoConnect);
+    
+    setDataClient(client);
+  }, []);
+
+  // Show loading state while initializing
+  if (!dataClient) {
+    return <div className="cls_verify_email_page_loading text-slate-600">Loading...</div>;
+  }
+
+  const EmailVerificationLayout = email_verification_layout;
+
+  return (
+    <EmailVerificationLayout
+      image_src="/globe.svg"
+      image_alt="Illustration of a globe representing secure authentication workflows"
+      image_background_color="#e2e8f0"
+      data_client={dataClient}
+      already_logged_in_message={alreadyLoggedInMessage}
+      showLogoutButton={showLogoutButton}
+      showReturnHomeButton={showReturnHomeButton}
+      returnHomeButtonLabel={returnHomeButtonLabel}
+      returnHomePath={returnHomePath}
+    />
+  );
+}
+

package/src/components/layouts/email_verification/config/email_verification_field_config.ts

@@ -0,0 +1,86 @@
+// file_description: email verification 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 EMAIL_VERIFICATION_FIELD_IDS = {
+  EMAIL: "email_address",
+} as const;
+
+export type EmailVerificationFieldId = (typeof EMAIL_VERIFICATION_FIELD_IDS)[keyof typeof EMAIL_VERIFICATION_FIELD_IDS];
+
+// section: field_definitions
+const EMAIL_VERIFICATION_FIELD_DEFINITIONS: LayoutFieldMap = {
+  [EMAIL_VERIFICATION_FIELD_IDS.EMAIL]: {
+    id: EMAIL_VERIFICATION_FIELD_IDS.EMAIL,
+    label: "Email address",
+    type: "email",
+    autoComplete: "email",
+    placeholder: "Enter your email address",
+    ariaLabel: "Email address input field",
+  },
+};
+
+export const createEmailVerificationFieldDefinitions = (
+  overrides?: LayoutFieldMapOverrides,
+) => resolveFieldDefinitions(EMAIL_VERIFICATION_FIELD_DEFINITIONS, overrides);
+
+// section: label_defaults
+const EMAIL_VERIFICATION_LABEL_DEFAULTS: LayoutLabelDefaults = {
+  heading: "Email verification",
+  subHeading: "Verifying your email address...",
+  submitButton: "Resend verification email",
+  cancelButton: "Cancel",
+};
+
+export const resolveEmailVerificationLabels = (overrides?: LayoutLabelOverrides) =>
+  resolveLabels(EMAIL_VERIFICATION_LABEL_DEFAULTS, overrides);
+
+// section: button_palette_defaults
+const EMAIL_VERIFICATION_BUTTON_PALETTE_DEFAULTS: ButtonPaletteDefaults = {
+  submitBackground: "#0f172a",
+  submitText: "#ffffff",
+  cancelBorder: "#cbd5f5",
+  cancelText: "#0f172a",
+};
+
+export const resolveEmailVerificationButtonPalette = (overrides?: ButtonPaletteOverrides) =>
+  resolveButtonPalette(EMAIL_VERIFICATION_BUTTON_PALETTE_DEFAULTS, overrides);
+
+// section: success_labels
+export type EmailVerificationSuccessLabels = {
+  heading: string;
+  message: string;
+  redirectMessage: string;
+  goToLoginButton: string;
+};
+
+export const EMAIL_VERIFICATION_SUCCESS_LABEL_DEFAULTS: EmailVerificationSuccessLabels = {
+  heading: "Email verified successfully",
+  message: "Your email address has been verified. You can now log in to your account.",
+  redirectMessage: "Redirecting to login page in",
+  goToLoginButton: "Go to login",
+};
+
+// section: error_labels
+export type EmailVerificationErrorLabels = {
+  heading: string;
+  message: string;
+  resendFormHeading: string;
+};
+
+export const EMAIL_VERIFICATION_ERROR_LABEL_DEFAULTS: EmailVerificationErrorLabels = {
+  heading: "Verification failed",
+  message: "The verification link is invalid or has expired.",
+  resendFormHeading: "Resend verification email",
+};
+

package/src/components/layouts/email_verification/hooks/use_email_verification.ts

@@ -0,0 +1,291 @@
+// file_description: encapsulate email verification state, validation, and data interactions
+// section: imports
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { toast } from "sonner";
+import type { LayoutDataClient } from "@/components/layouts/shared/data/layout_data_client";
+import { EMAIL_VERIFICATION_FIELD_IDS, type EmailVerificationFieldId } from "@/components/layouts/email_verification/config/email_verification_field_config";
+import { validateEmail } from "@/components/layouts/shared/utils/validation";
+
+// section: types
+export type EmailVerificationFormValues = Record<EmailVerificationFieldId, string>;
+export type EmailVerificationFormErrors = Partial<Record<EmailVerificationFieldId, string>> & {
+  submit?: string;
+};
+
+export type UseEmailVerificationParams<TClient = unknown> = {
+  dataClient: LayoutDataClient<TClient>;
+  redirectDelay?: number; // Delay in seconds before redirecting to login
+  loginPath?: string; // Path to redirect to after successful verification
+};
+
+export type UseEmailVerificationResult = {
+  isVerifying: boolean;
+  isVerified: boolean;
+  isError: boolean;
+  errorMessage?: string;
+  email?: string; // Email from token if available
+  values: EmailVerificationFormValues;
+  errors: EmailVerificationFormErrors;
+  isSubmitDisabled: boolean;
+  isSubmitting: boolean;
+  emailTouched: boolean;
+  redirectCountdown: number;
+  handleFieldChange: (fieldId: EmailVerificationFieldId, value: string) => void;
+  handleEmailBlur: () => void;
+  handleResendSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+  handleCancel: () => void;
+  handleGoToLogin: () => void;
+};
+
+// section: helpers
+const buildInitialValues = (initialEmail?: string): EmailVerificationFormValues => ({
+  [EMAIL_VERIFICATION_FIELD_IDS.EMAIL]: initialEmail || "",
+});
+
+// section: hook
+export const use_email_verification = <TClient,>({
+  dataClient,
+  redirectDelay = 5,
+  loginPath = "/login",
+}: UseEmailVerificationParams<TClient>): UseEmailVerificationResult => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token");
+  const emailParam = searchParams.get("email");
+  const messageParam = searchParams.get("message");
+
+  const [isVerifying, setIsVerifying] = useState<boolean>(false);
+  const [isVerified, setIsVerified] = useState<boolean>(false);
+  const [isError, setIsError] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(messageParam || undefined);
+  const [email, setEmail] = useState<string | undefined>(emailParam || undefined);
+  const [values, setValues] = useState<EmailVerificationFormValues>(buildInitialValues(emailParam || undefined));
+  const [errors, setErrors] = useState<EmailVerificationFormErrors>({});
+  const [emailTouched, setEmailTouched] = useState<boolean>(false);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [redirectCountdown, setRedirectCountdown] = useState<number>(redirectDelay);
+
+  // Verify token on mount if token exists, or show error if message is provided
+  useEffect(() => {
+    // If message is provided (from login redirect), show error state immediately
+    if (messageParam && !token) {
+      setIsError(true);
+      setErrorMessage(messageParam);
+      if (emailParam) {
+        setEmail(emailParam);
+        setValues(buildInitialValues(emailParam));
+      }
+      return;
+    }
+
+    if (!token) {
+      setIsError(true);
+      setErrorMessage("No verification token provided");
+      return;
+    }
+
+    const verifyToken = async () => {
+      setIsVerifying(true);
+      setIsError(false);
+      setErrorMessage(undefined);
+
+      try {
+        const response = await fetch(`/api/auth/verify_email?token=${encodeURIComponent(token)}`, {
+          method: "GET",
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+          throw new Error(data.error || "Email verification failed");
+        }
+
+        // Success
+        setIsVerified(true);
+        setEmail(data.email);
+        setValues(buildInitialValues(data.email));
+
+        // Start countdown for redirect
+        let countdown = redirectDelay;
+        setRedirectCountdown(countdown);
+
+        const countdownInterval = setInterval(() => {
+          countdown -= 1;
+          setRedirectCountdown(countdown);
+
+          if (countdown <= 0) {
+            clearInterval(countdownInterval);
+            router.push(loginPath);
+          }
+        }, 1000);
+
+        // Cleanup interval on unmount
+        return () => clearInterval(countdownInterval);
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : "Email verification failed. Please try again.";
+
+        setIsError(true);
+        setErrorMessage(errorMessage);
+
+        // Try to extract email from error response if available
+        try {
+          const response = await fetch(`/api/auth/verify_email?token=${encodeURIComponent(token)}`, {
+            method: "GET",
+          });
+          const data = await response.json();
+          if (data.email) {
+            setEmail(data.email);
+            setValues(buildInitialValues(data.email));
+          }
+        } catch {
+          // Ignore errors when trying to get email
+        }
+      } finally {
+        setIsVerifying(false);
+      }
+    };
+
+    void verifyToken();
+  }, [token, redirectDelay, loginPath, router]);
+
+  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: EmailVerificationFieldId, value: string) => {
+    setValues((previousValues) => {
+      const nextValues: EmailVerificationFormValues = {
+        ...previousValues,
+        [fieldId]: value,
+      };
+
+      setErrors((previousErrors) => {
+        const updatedErrors: EmailVerificationFormErrors = { ...previousErrors };
+
+        // Only validate email on change if it has been touched (blurred)
+        if (fieldId === EMAIL_VERIFICATION_FIELD_IDS.EMAIL && emailTouched) {
+          const emailError = validateEmail(value);
+          if (emailError) {
+            updatedErrors[EMAIL_VERIFICATION_FIELD_IDS.EMAIL] = emailError;
+          } else {
+            delete updatedErrors[EMAIL_VERIFICATION_FIELD_IDS.EMAIL];
+          }
+        }
+
+        return updatedErrors;
+      });
+
+      return nextValues;
+    });
+  }, [emailTouched]);
+
+  const handleEmailBlur = useCallback(() => {
+    setEmailTouched(true);
+    // Validate email on blur
+    setErrors((previousErrors) => {
+      const updatedErrors: EmailVerificationFormErrors = { ...previousErrors };
+      const emailValue = values[EMAIL_VERIFICATION_FIELD_IDS.EMAIL];
+      const emailError = validateEmail(emailValue);
+      if (emailError) {
+        updatedErrors[EMAIL_VERIFICATION_FIELD_IDS.EMAIL] = emailError;
+      } else {
+        delete updatedErrors[EMAIL_VERIFICATION_FIELD_IDS.EMAIL];
+      }
+      return updatedErrors;
+    });
+  }, [values]);
+
+  const handleResendSubmit = useCallback(
+    async (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+
+      // Final validation
+      const emailError = validateEmail(values[EMAIL_VERIFICATION_FIELD_IDS.EMAIL]);
+
+      if (emailError) {
+        setErrors({
+          [EMAIL_VERIFICATION_FIELD_IDS.EMAIL]: emailError,
+        });
+        return;
+      }
+
+      setIsSubmitting(true);
+      setErrors({});
+
+      try {
+        const response = await fetch("/api/auth/resend_verification", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            email: values[EMAIL_VERIFICATION_FIELD_IDS.EMAIL],
+          }),
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+          throw new Error(data.error || "Failed to resend verification email");
+        }
+
+        // Show success notification
+        toast.success("Verification email sent", {
+          description: data.message || "If an account with that email exists and is not verified, a verification link has been sent.",
+        });
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : "Failed to resend verification email. Please try again.";
+
+        // Show error notification
+        toast.error("Failed to resend verification email", {
+          description: errorMessage,
+        });
+
+        // Set error state
+        setErrors({
+          submit: errorMessage,
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [values, dataClient],
+  );
+
+  const handleCancel = useCallback(() => {
+    router.push(loginPath);
+  }, [router, loginPath]);
+
+  const handleGoToLogin = useCallback(() => {
+    router.push(loginPath);
+  }, [router, loginPath]);
+
+  return {
+    isVerifying,
+    isVerified,
+    isError,
+    errorMessage,
+    email,
+    values,
+    errors,
+    isSubmitDisabled,
+    isSubmitting,
+    emailTouched,
+    redirectCountdown,
+    handleFieldChange,
+    handleEmailBlur,
+    handleResendSubmit,
+    handleCancel,
+    handleGoToLogin,
+  };
+};
+