hazo_auth 1.4.2 → 1.6.0

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

@@ -1,214 +0,0 @@
-// file_description: shared sidebar layout wrapper for auth pages to ensure consistent navigation
-// section: client_directive
-"use client";
-
-// section: imports
-import Link from "next/link";
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarTrigger,
-  SidebarInset,
-} from "../../../ui/sidebar";
-import { LogIn, UserPlus, BookOpen, ExternalLink, Database, KeyRound, MailCheck, Key, Settings, User } from "lucide-react";
-import { use_auth_status } from "../hooks/use_auth_status";
-import { ProfilePicMenu } from "./profile_pic_menu";
-
-// section: types
-type SidebarLayoutWrapperProps = {
-  children: React.ReactNode;
-};
-
-// section: component
-export function SidebarLayoutWrapper({ children }: SidebarLayoutWrapperProps) {
-  const authStatus = use_auth_status();
-
-  return (
-    <SidebarProvider>
-      <div className="cls_sidebar_layout_wrapper flex min-h-screen w-full">
-        <Sidebar>
-          <SidebarHeader className="cls_sidebar_layout_header">
-            <div className="cls_sidebar_layout_title flex items-center gap-2 px-2 py-4">
-              <h1 className="cls_sidebar_layout_title_text text-lg font-semibold text-sidebar-foreground">
-                hazo auth
-              </h1>
-            </div>
-          </SidebarHeader>
-          <SidebarContent className="cls_sidebar_layout_content">
-            <SidebarGroup className="cls_sidebar_layout_test_group">
-              <SidebarGroupLabel className="cls_sidebar_layout_group_label">
-                Test components
-              </SidebarGroupLabel>
-              <SidebarMenu className="cls_sidebar_layout_test_menu">
-                <SidebarMenuItem className="cls_sidebar_layout_test_login_item">
-                  <SidebarMenuButton asChild>
-                    <Link
-                      href="/hazo_auth/login"
-                      className="cls_sidebar_layout_test_login_link flex items-center gap-2"
-                      aria-label="Test login layout component"
-                    >
-                      <LogIn className="h-4 w-4" aria-hidden="true" />
-                      <span>Test login</span>
-                    </Link>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-                <SidebarMenuItem className="cls_sidebar_layout_test_register_item">
-                  <SidebarMenuButton asChild>
-                    <Link
-                      href="/hazo_auth/register"
-                      className="cls_sidebar_layout_test_register_link flex items-center gap-2"
-                      aria-label="Test register layout component"
-                    >
-                      <UserPlus className="h-4 w-4" aria-hidden="true" />
-                      <span>Test register</span>
-                    </Link>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-                <SidebarMenuItem className="cls_sidebar_layout_test_forgot_password_item">
-                  <SidebarMenuButton asChild>
-                    <Link
-                      href="/hazo_auth/forgot_password"
-                      className="cls_sidebar_layout_test_forgot_password_link flex items-center gap-2"
-                      aria-label="Test forgot password layout component"
-                    >
-                      <KeyRound className="h-4 w-4" aria-hidden="true" />
-                      <span>Test forgot password</span>
-                    </Link>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-                <SidebarMenuItem className="cls_sidebar_layout_test_reset_password_item">
-                  <SidebarMenuButton asChild>
-                    <Link
-                      href="/hazo_auth/reset_password"
-                      className="cls_sidebar_layout_test_reset_password_link flex items-center gap-2"
-                      aria-label="Test reset password layout component"
-                    >
-                      <Key className="h-4 w-4" aria-hidden="true" />
-                      <span>Test reset password</span>
-                    </Link>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-                <SidebarMenuItem className="cls_sidebar_layout_test_email_verification_item">
-                  <SidebarMenuButton asChild>
-                    <Link
-                      href="/hazo_auth/verify_email"
-                      className="cls_sidebar_layout_test_email_verification_link flex items-center gap-2"
-                      aria-label="Test email verification layout component"
-                    >
-                      <MailCheck className="h-4 w-4" aria-hidden="true" />
-                      <span>Test email verification</span>
-                    </Link>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-                <SidebarMenuItem className="cls_sidebar_layout_sqlite_admin_item">
-                  <SidebarMenuButton asChild>
-                    <Link
-                      href="/hazo_connect/sqlite_admin"
-                      className="cls_sidebar_layout_sqlite_admin_link flex items-center gap-2"
-                      aria-label="Open SQLite admin UI to browse and edit database"
-                    >
-                      <Database className="h-4 w-4" aria-hidden="true" />
-                      <span>SQLite Admin</span>
-                    </Link>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-                <SidebarMenuItem className="cls_sidebar_layout_user_management_item">
-                  <SidebarMenuButton asChild>
-                    <Link
-                      href="/hazo_auth/user_management"
-                      className="cls_sidebar_layout_user_management_link flex items-center gap-2"
-                      aria-label="Open User Management to manage users, roles, and permissions"
-                    >
-                      <User className="h-4 w-4" aria-hidden="true" />
-                      <span>User Management</span>
-                    </Link>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              </SidebarMenu>
-            </SidebarGroup>
-            {authStatus.authenticated && (
-              <SidebarGroup className="cls_sidebar_layout_account_group">
-                <SidebarGroupLabel className="cls_sidebar_layout_group_label">
-                  Account
-                </SidebarGroupLabel>
-                <SidebarMenu className="cls_sidebar_layout_account_menu">
-                  <SidebarMenuItem className="cls_sidebar_layout_my_settings_item">
-                    <SidebarMenuButton asChild>
-                      <Link
-                        href="/hazo_auth/my_settings"
-                        className="cls_sidebar_layout_my_settings_link flex items-center gap-2"
-                        aria-label="Open my settings page"
-                      >
-                        <Settings className="h-4 w-4" aria-hidden="true" />
-                        <span>My Settings</span>
-                      </Link>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                </SidebarMenu>
-              </SidebarGroup>
-            )}
-            <SidebarGroup className="cls_sidebar_layout_resources_group">
-              <SidebarGroupLabel className="cls_sidebar_layout_group_label">
-                Resources
-              </SidebarGroupLabel>
-              <SidebarMenu className="cls_sidebar_layout_resources_menu">
-                <SidebarMenuItem className="cls_sidebar_layout_storybook_item">
-                  <SidebarMenuButton asChild>
-                    <a
-                      href="http://localhost:6006"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="cls_sidebar_layout_storybook_link flex items-center gap-2"
-                      aria-label="Open Storybook preview for reusable components"
-                    >
-                      <BookOpen className="h-4 w-4" aria-hidden="true" />
-                      <span>Storybook</span>
-                      <ExternalLink className="ml-auto h-3 w-3" aria-hidden="true" />
-                    </a>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-                <SidebarMenuItem className="cls_sidebar_layout_docs_item">
-                  <SidebarMenuButton asChild>
-                    <a
-                      href="https://ui.shadcn.com/docs"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="cls_sidebar_layout_docs_link flex items-center gap-2"
-                      aria-label="Review shadcn documentation for styling guidance"
-                    >
-                      <BookOpen className="h-4 w-4" aria-hidden="true" />
-                      <span>Shadcn docs</span>
-                      <ExternalLink className="ml-auto h-3 w-3" aria-hidden="true" />
-                    </a>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              </SidebarMenu>
-            </SidebarGroup>
-          </SidebarContent>
-        </Sidebar>
-        <SidebarInset className="cls_sidebar_layout_inset">
-          <header className="cls_sidebar_layout_main_header flex h-16 shrink-0 items-center gap-2 border-b px-4">
-            <SidebarTrigger className="cls_sidebar_layout_trigger" />
-            <div className="cls_sidebar_layout_main_header_content flex flex-1 items-center gap-2">
-              <h2 className="cls_sidebar_layout_main_title text-lg font-semibold text-foreground">
-                hazo reusable ui library workspace
-              </h2>
-            </div>
-            <ProfilePicMenu className="cls_sidebar_layout_auth_status" avatar_size="sm" />
-          </header>
-          <main className="cls_sidebar_layout_main_content flex flex-1 items-center justify-center p-6">
-            {children}
-          </main>
-        </SidebarInset>
-      </div>
-    </SidebarProvider>
-  );
-}
-

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

@@ -1,53 +0,0 @@
-// file_description: renders a simple full-width shell without the developer sidebar
-// section: client_directive
-"use client";
-
-// section: imports
-import { cn } from "../../../../lib/utils";
-
-// section: types
-export type StandaloneLayoutWrapperProps = {
-  children: React.ReactNode;
-  heading?: string;
-  description?: string;
-  wrapperClassName?: string;
-  contentClassName?: string;
-  showHeading?: boolean;
-  showDescription?: boolean;
-};
-
-// section: component
-export function StandaloneLayoutWrapper({
-  children,
-  heading = "hazo auth",
-  description = "Drop-in authentication flows that inherit your existing theme.",
-  wrapperClassName,
-  contentClassName,
-  showHeading = true,
-  showDescription = true,
-}: StandaloneLayoutWrapperProps) {
-  return (
-    <div className={cn("cls_standalone_layout_wrapper min-h-screen w-full bg-background", wrapperClassName)}>
-      <div className={cn("cls_standalone_layout_content mx-auto flex w-full max-w-5xl flex-col gap-8 p-6", contentClassName)}>
-        {(showHeading || showDescription) && (
-          <div className="cls_standalone_layout_header text-center">
-            {showHeading && (
-              <h1 className="cls_standalone_layout_title text-2xl font-semibold tracking-tight text-foreground">
-                {heading}
-              </h1>
-            )}
-            {showDescription && (
-              <p className="cls_standalone_layout_description mt-2 text-sm text-muted-foreground">
-                {description}
-              </p>
-            )}
-          </div>
-        )}
-        <div className="cls_standalone_layout_body">{children}</div>
-      </div>
-    </div>
-  );
-}
-
-
-

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

@@ -1,44 +0,0 @@
-// file_description: reusable two-column authentication layout shell that combines visual panel and form content
-// section: imports
-import { VisualPanel } from "./visual_panel";
-
-// section: types
-type TwoColumnAuthLayoutProps = {
-  imageSrc: string;
-  imageAlt: string;
-  imageBackgroundColor?: string;
-  formContent: React.ReactNode;
-  className?: string;
-  visualPanelClassName?: string;
-  formContainerClassName?: string;
-};
-
-// section: component
-export function TwoColumnAuthLayout({
-  imageSrc,
-  imageAlt,
-  imageBackgroundColor,
-  formContent,
-  className,
-  visualPanelClassName,
-  formContainerClassName,
-}: TwoColumnAuthLayoutProps) {
-  return (
-    <div
-      className={`cls_two_column_auth_layout mx-auto grid w-full max-w-5xl grid-cols-1 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm md:grid-cols-2 md:min-h-[520px] ${className ?? ""}`}
-    >
-      <VisualPanel
-        imageSrc={imageSrc}
-        imageAlt={imageAlt}
-        backgroundColor={imageBackgroundColor}
-        className={visualPanelClassName}
-      />
-      <div
-        className={`cls_two_column_auth_layout_form_container flex flex-col gap-6 p-8 ${formContainerClassName ?? ""}`}
-      >
-        {formContent}
-      </div>
-    </div>
-  );
-}
-

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

@@ -1,78 +0,0 @@
-// file_description: reusable component to show unauthorized message when user is not authenticated
-// section: client_directive
-"use client";
-
-// section: imports
-import { use_auth_status } from "../hooks/use_auth_status";
-import { Button } from "../../../ui/button";
-import { useRouter } from "next/navigation";
-import { LogIn } from "lucide-react";
-
-// section: types
-export type UnauthorizedGuardProps = {
-  message?: string;
-  loginButtonLabel?: string;
-  loginPath?: string;
-  children: React.ReactNode;
-};
-
-// section: component
-/**
- * Guard component that shows unauthorized message if user is not authenticated
- * Otherwise renders children
- * @param props - Component props including message and login button customization
- * @returns Either the unauthorized UI or the children
- */
-export function UnauthorizedGuard({
-  message = "You must be logged in to access this page.",
-  loginButtonLabel = "Go to login",
-  loginPath = "/hazo_auth/login",
-  children,
-}: UnauthorizedGuardProps) {
-  const router = useRouter();
-  const authStatus = use_auth_status();
-
-  // Check if user should see unauthorized message
-  const shouldShowUnauthorized = !authStatus.authenticated && !authStatus.loading;
-
-  if (shouldShowUnauthorized) {
-    return (
-      <div className="cls_unauthorized_guard flex flex-col items-center justify-center min-h-screen p-8">
-        <div className="cls_unauthorized_guard_content flex flex-col items-center gap-4 text-center max-w-md">
-          <div className="cls_unauthorized_guard_icon flex items-center justify-center w-16 h-16 rounded-full bg-red-100">
-            <LogIn className="h-8 w-8 text-red-600" aria-hidden="true" />
-          </div>
-          <div className="cls_unauthorized_guard_text">
-            <h1 className="cls_unauthorized_guard_heading text-2xl font-semibold text-slate-900 mb-2">
-              Access Denied
-            </h1>
-            <p className="cls_unauthorized_guard_message text-slate-600">
-              {message}
-            </p>
-          </div>
-          <Button
-            onClick={() => router.push(loginPath)}
-            variant="default"
-            className="cls_unauthorized_guard_login_button mt-4"
-            aria-label={loginButtonLabel}
-          >
-            <LogIn className="h-4 w-4 mr-2" aria-hidden="true" />
-            {loginButtonLabel}
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  // Show loading state while checking authentication
-  if (authStatus.loading) {
-    return (
-      <div className="cls_unauthorized_guard_loading flex items-center justify-center min-h-screen">
-        <div className="cls_unauthorized_guard_loading_text text-slate-600">Loading...</div>
-      </div>
-    );
-  }
-
-  return <>{children}</>;
-}
-

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

@@ -1,41 +0,0 @@
-// 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

@@ -1,95 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-// 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

@@ -1,103 +0,0 @@
-// 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/hazo_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,
-  };
-}
-