hazo_auth 0.1.0

package/src/components/layouts/shared/components/visual_panel.tsx

@@ -0,0 +1,41 @@
+// file_description: reusable visual panel component for displaying images in authentication layouts
+// section: client_directive
+"use client";
+
+// section: imports
+import Image from "next/image";
+
+// section: types
+type VisualPanelProps = {
+  imageSrc: string;
+  imageAlt: string;
+  backgroundColor?: string;
+  className?: string;
+};
+
+// section: component
+export function VisualPanel({
+  imageSrc,
+  imageAlt,
+  backgroundColor = "#f1f5f9",
+  className,
+}: VisualPanelProps) {
+  return (
+    <div
+      className={`cls_visual_panel relative hidden h-full w-full items-center justify-center md:flex ${className ?? ""}`}
+      style={{ backgroundColor }}
+    >
+      <div className="cls_visual_panel_image_wrapper relative h-full w-full">
+        <Image
+          src={imageSrc}
+          alt={imageAlt}
+          fill
+          sizes="(min-width: 768px) 50vw, 100vw"
+          className="cls_visual_panel_image object-cover"
+          priority
+        />
+      </div>
+    </div>
+  );
+}
+

package/src/components/layouts/shared/config/layout_customization.ts

@@ -0,0 +1,95 @@
+// file_description: provide reusable configuration helpers for layout components
+// section: types
+export type LayoutFieldId = string;
+
+export type LayoutFieldDefinition = {
+  id: LayoutFieldId;
+  label: string;
+  type: "text" | "email" | "password";
+  autoComplete?: string;
+  placeholder: string;
+  ariaLabel: string;
+};
+
+export type LayoutFieldMap = Record<LayoutFieldId, LayoutFieldDefinition>;
+export type LayoutFieldMapOverrides = Partial<Record<LayoutFieldId, Partial<LayoutFieldDefinition>>>;
+
+export type LayoutLabelDefaults = {
+  heading: string;
+  subHeading: string;
+  submitButton: string;
+  cancelButton: string;
+};
+
+export type LayoutLabelOverrides = Partial<LayoutLabelDefaults>;
+
+export type ButtonPaletteDefaults = {
+  submitBackground: string;
+  submitText: string;
+  cancelBorder: string;
+  cancelText: string;
+};
+
+export type ButtonPaletteOverrides = Partial<ButtonPaletteDefaults>;
+
+export type PasswordRequirementOptions = {
+  minimum_length: number;
+  require_uppercase: boolean;
+  require_lowercase: boolean;
+  require_number: boolean;
+  require_special: boolean;
+};
+
+export type PasswordRequirementOverrides = Partial<PasswordRequirementOptions>;
+
+// section: helpers
+export const resolveFieldDefinitions = (
+  baseDefinitions: LayoutFieldMap,
+  overrides?: LayoutFieldMapOverrides,
+): LayoutFieldMap => {
+  if (!overrides) {
+    return baseDefinitions;
+  }
+
+  const merged: LayoutFieldMap = { ...baseDefinitions };
+
+  Object.entries(overrides).forEach(([fieldId, definitionOverride]) => {
+    if (!definitionOverride) {
+      return;
+    }
+
+    const existing = merged[fieldId] ?? (definitionOverride as LayoutFieldDefinition);
+    merged[fieldId] = {
+      ...existing,
+      ...definitionOverride,
+      id: existing.id ?? (fieldId as LayoutFieldId),
+    };
+  });
+
+  return merged;
+};
+
+export const resolveLabels = (
+  defaults: LayoutLabelDefaults,
+  overrides?: LayoutLabelOverrides,
+): LayoutLabelDefaults => ({
+  ...defaults,
+  ...(overrides ?? {}),
+});
+
+export const resolveButtonPalette = (
+  defaults: ButtonPaletteDefaults,
+  overrides?: ButtonPaletteOverrides,
+): ButtonPaletteDefaults => ({
+  ...defaults,
+  ...(overrides ?? {}),
+});
+
+export const resolvePasswordRequirements = (
+  defaults: PasswordRequirementOptions,
+  overrides?: PasswordRequirementOverrides,
+): PasswordRequirementOptions => ({
+  ...defaults,
+  ...(overrides ?? {}),
+});
+

package/src/components/layouts/shared/data/layout_data_client.ts

@@ -0,0 +1,19 @@
+// file_description: expose a common data client wrapper for layout components
+// section: types
+export type LayoutDataClient<TClient = unknown> = {
+  client: TClient;
+  healthCheck: () => Promise<void>;
+};
+
+// section: factory
+export const createLayoutDataClient = <TClient,>(
+  hazoClient: TClient,
+): LayoutDataClient<TClient> => ({
+  client: hazoClient,
+  healthCheck: async () => {
+    if (hazoClient && typeof (hazoClient as Record<string, unknown>).healthCheck === "function") {
+      await ((hazoClient as unknown) as { healthCheck: () => Promise<void> }).healthCheck();
+    }
+  },
+});
+

package/src/components/layouts/shared/hooks/use_auth_status.ts

@@ -0,0 +1,103 @@
+// file_description: hook to check authentication status and get current user info
+// section: client_directive
+"use client";
+
+// section: imports
+import { useState, useEffect, useCallback } from "react";
+
+// section: types
+export type AuthStatusData = {
+  authenticated: boolean;
+  user_id?: string;
+  email?: string;
+  name?: string;
+  email_verified?: boolean;
+  last_logon?: string;
+  profile_picture_url?: string;
+  profile_source?: "upload" | "library" | "gravatar" | "custom";
+  loading: boolean;
+};
+
+export type AuthStatus = AuthStatusData & {
+  refresh: () => Promise<void>;
+};
+
+// section: constants
+const AUTH_STATUS_CHANGE_EVENT = "hazo_auth_status_change";
+
+// section: helpers
+/**
+ * Dispatches a custom event to notify all auth status hooks to refresh
+ */
+export function trigger_auth_status_refresh(): void {
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(new CustomEvent(AUTH_STATUS_CHANGE_EVENT));
+  }
+}
+
+// section: hook
+export function use_auth_status(): AuthStatus {
+  const [authStatus, setAuthStatus] = useState<AuthStatusData>({
+    authenticated: false,
+    loading: true,
+  });
+
+  const checkAuth = useCallback(async () => {
+    setAuthStatus((prev) => ({ ...prev, loading: true }));
+
+    try {
+      const response = await fetch("/api/auth/me", {
+        method: "GET",
+        credentials: "include",
+      });
+
+      const data = await response.json();
+
+      if (data.authenticated) {
+        setAuthStatus({
+          authenticated: true,
+          user_id: data.user_id,
+          email: data.email,
+          name: data.name,
+          email_verified: data.email_verified,
+          last_logon: data.last_logon,
+          profile_picture_url: data.profile_picture_url,
+          profile_source: data.profile_source,
+          loading: false,
+        });
+      } else {
+        setAuthStatus({
+          authenticated: false,
+          loading: false,
+        });
+      }
+    } catch (error) {
+      setAuthStatus({
+        authenticated: false,
+        loading: false,
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    // Check auth status on mount
+    void checkAuth();
+
+    // Listen for auth status change events
+    const handleAuthChange = () => {
+      void checkAuth();
+    };
+
+    window.addEventListener(AUTH_STATUS_CHANGE_EVENT, handleAuthChange);
+
+    return () => {
+      window.removeEventListener(AUTH_STATUS_CHANGE_EVENT, handleAuthChange);
+    };
+  }, [checkAuth]);
+
+  return {
+    ...authStatus,
+    refresh: checkAuth,
+  };
+}
+

package/src/components/layouts/shared/utils/ip_address.ts

@@ -0,0 +1,37 @@
+// file_description: utility functions for collecting client IP address
+// section: client_ip_collection
+/**
+ * Attempts to get the client IP address
+ * In browser context, this will try to fetch from an API endpoint
+ * Falls back to "unknown" if unable to determine
+ */
+export async function get_client_ip(): Promise<string> {
+  // Check if fetch is available (not available in test environment)
+  if (typeof fetch === "undefined") {
+    return "unknown";
+  }
+
+  try {
+    // Try to get IP from a public IP detection service
+    const response = await fetch("https://api.ipify.org?format=json", {
+      method: "GET",
+      headers: {
+        "Accept": "application/json",
+      },
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      return data.ip || "unknown";
+    }
+  } catch (error) {
+    // Silently fail and return unknown
+    // Only log in non-test environments
+    if (process.env.NODE_ENV !== "test") {
+      console.debug("Failed to fetch IP address:", error);
+    }
+  }
+
+  return "unknown";
+}
+

package/src/components/layouts/shared/utils/validation.ts

@@ -0,0 +1,66 @@
+// file_description: provide shared validation utilities for email and password fields across layout components
+// section: imports
+import type { PasswordRequirementOptions } from "@/components/layouts/shared/config/layout_customization";
+
+// section: constants
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+// section: email_validation
+/**
+ * Validates an email address format
+ * @param email - The email address to validate
+ * @returns Error message string if invalid, undefined if valid
+ */
+export function validateEmail(email: string): string | undefined {
+  const trimmedEmail = email.trim();
+  if (trimmedEmail.length > 0 && !EMAIL_PATTERN.test(trimmedEmail)) {
+    return "enter a valid email address";
+  }
+  return undefined;
+}
+
+// section: password_validation
+/**
+ * Validates a password against specified requirements
+ * @param password - The password to validate
+ * @param requirements - Password requirement options
+ * @returns Array of error message strings if invalid, undefined if valid
+ */
+export function validatePassword(
+  password: string,
+  requirements: PasswordRequirementOptions,
+): string[] | undefined {
+  if (password.trim().length === 0) {
+    return undefined;
+  }
+
+  const messages: string[] = [];
+
+  if (password.length < requirements.minimum_length) {
+    messages.push(
+      `Password must be at least ${requirements.minimum_length} characters.`,
+    );
+  }
+
+  if (requirements.require_uppercase && !/[A-Z]/.test(password)) {
+    messages.push("Password must include at least one uppercase letter.");
+  }
+
+  if (requirements.require_lowercase && !/[a-z]/.test(password)) {
+    messages.push("Password must include at least one lowercase letter.");
+  }
+
+  if (requirements.require_number && !/\d/.test(password)) {
+    messages.push("Password must include at least one number.");
+  }
+
+  if (
+    requirements.require_special &&
+    !/[!@#$%^&*(),.?":{}|<>\-_+=\[\];'/\\]/.test(password)
+  ) {
+    messages.push("Password must include at least one special character.");
+  }
+
+  return messages.length > 0 ? messages : undefined;
+}
+

package/src/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

package/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/src/components/ui/dialog.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

package/src/components/ui/hazo_ui_tooltip.tsx

@@ -0,0 +1,67 @@
+// file_description: reusable tooltip component for hazo_auth with question mark icon
+// section: client_directive
+"use client";
+
+// section: imports
+import { HelpCircle } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+// section: types
+export type HazoUITooltipProps = {
+  /**
+   * The tooltip message to display
+   */
+  message: string;
+  /**
+   * Optional custom icon size (default: 16)
+   */
+  iconSize?: number;
+  /**
+   * Optional custom icon className
+   */
+  iconClassName?: string;
+  /**
+   * Optional side for tooltip placement (default: "top")
+   */
+  side?: "top" | "right" | "bottom" | "left";
+};
+
+// section: component
+/**
+ * Reusable tooltip component with question mark icon
+ * Displays a help icon that shows a tooltip message on hover
+ * @param props - Component props including message, icon size, and placement
+ * @returns Tooltip component with question mark icon
+ */
+export function HazoUITooltip({
+  message,
+  iconSize = 16,
+  iconClassName = "text-slate-400 hover:text-slate-600",
+  side = "top",
+}: HazoUITooltipProps) {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className="cls_hazo_ui_tooltip_trigger inline-flex items-start focus:outline-none align-super"
+            aria-label="Help"
+            style={{ verticalAlign: "super" }}
+          >
+            <HelpCircle
+              size={iconSize}
+              className={`cls_hazo_ui_tooltip_icon ${iconClassName}`}
+              aria-hidden="true"
+              style={{ transform: "translateY(-0.2em)" }}
+            />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side={side} className="cls_hazo_ui_tooltip_content">
+          <p className="cls_hazo_ui_tooltip_message">{message}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+

package/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }