hazo_auth 0.1.0

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

@@ -0,0 +1,64 @@
+// file_description: reusable form action buttons component with submit (positive, left) and cancel (negative, right) buttons
+// section: imports
+import { CircleCheckBig, CircleX } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { ButtonPaletteDefaults } from "@/components/layouts/shared/config/layout_customization";
+
+// section: types
+type FormActionButtonsProps = {
+  submitLabel: string;
+  cancelLabel: string;
+  buttonPalette: ButtonPaletteDefaults;
+  isSubmitDisabled: boolean;
+  onCancel: () => void;
+  submitAriaLabel?: string;
+  cancelAriaLabel?: string;
+  className?: string;
+};
+
+// section: component
+export function FormActionButtons({
+  submitLabel,
+  cancelLabel,
+  buttonPalette,
+  isSubmitDisabled,
+  onCancel,
+  submitAriaLabel = "Submit form",
+  cancelAriaLabel = "Cancel form",
+  className,
+}: FormActionButtonsProps) {
+  return (
+    <div
+      className={`cls_form_action_buttons mt-2 flex items-center justify-end gap-4 ${className ?? ""}`}
+    >
+      <Button
+        type="submit"
+        disabled={isSubmitDisabled}
+        className="cls_form_action_submit_button flex items-center gap-2"
+        aria-label={submitAriaLabel}
+        style={{
+          backgroundColor: buttonPalette.submitBackground,
+          color: buttonPalette.submitText,
+        }}
+      >
+        <CircleCheckBig className="h-4 w-4" aria-hidden="true" />
+        <span>{submitLabel}</span>
+      </Button>
+      <Button
+        type="button"
+        variant="outline"
+        onClick={onCancel}
+        className="cls_form_action_cancel_button flex items-center gap-2"
+        aria-label={cancelAriaLabel}
+        style={{
+          borderColor: buttonPalette.cancelBorder,
+          color: buttonPalette.cancelText,
+        }}
+      >
+        <CircleX className="h-4 w-4" aria-hidden="true" />
+        <span>{cancelLabel}</span>
+      </Button>
+    </div>
+  );
+}
+

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

@@ -0,0 +1,44 @@
+// file_description: reusable wrapper component for form fields that standardizes label, input, and error message structure
+// section: imports
+import { Label } from "@/components/ui/label";
+import { FieldErrorMessage } from "@/components/layouts/shared/components/field_error_message";
+
+// section: types
+type FormFieldWrapperProps = {
+  fieldId: string;
+  label: string;
+  input: React.ReactNode;
+  errorMessage?: string | string[];
+  className?: string;
+  labelClassName?: string;
+};
+
+// section: component
+export function FormFieldWrapper({
+  fieldId,
+  label,
+  input,
+  errorMessage,
+  className,
+  labelClassName,
+}: FormFieldWrapperProps) {
+  return (
+    <div
+      className={`cls_form_field_wrapper flex flex-col gap-2 ${className ?? ""}`}
+    >
+      <Label
+        htmlFor={fieldId}
+        className={`cls_form_field_label text-sm font-medium text-slate-800 ${labelClassName ?? ""}`}
+      >
+        {label}
+      </Label>
+      {input}
+      {errorMessage ? (
+        <div className="mt-1 min-h-0">
+          <FieldErrorMessage message={errorMessage} />
+        </div>
+      ) : null}
+    </div>
+  );
+}
+

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

@@ -0,0 +1,36 @@
+// file_description: reusable form header component for displaying heading and subheading in authentication layouts
+// section: types
+type FormHeaderProps = {
+  heading: string;
+  subHeading: string;
+  className?: string;
+  headingClassName?: string;
+  subHeadingClassName?: string;
+};
+
+// section: component
+export function FormHeader({
+  heading,
+  subHeading,
+  className,
+  headingClassName,
+  subHeadingClassName,
+}: FormHeaderProps) {
+  return (
+    <header
+      className={`cls_form_header flex flex-col gap-2 text-center md:text-left ${className ?? ""}`}
+    >
+      <h1
+        className={`cls_form_header_title text-2xl font-semibold text-slate-900 ${headingClassName ?? ""}`}
+      >
+        {heading}
+      </h1>
+      <p
+        className={`cls_form_header_subtitle text-sm text-slate-600 ${subHeadingClassName ?? ""}`}
+      >
+        {subHeading}
+      </p>
+    </header>
+  );
+}
+

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

@@ -0,0 +1,76 @@
+// file_description: logout button component for user logout functionality
+// section: client_directive
+"use client";
+
+// section: imports
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { LogOut } from "lucide-react";
+import { toast } from "sonner";
+import { trigger_auth_status_refresh } from "@/components/layouts/shared/hooks/use_auth_status";
+
+// section: types
+export type LogoutButtonProps = {
+  className?: string;
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  size?: "default" | "sm" | "lg" | "icon";
+};
+
+// section: component
+export function LogoutButton({
+  className,
+  variant = "outline",
+  size = "default",
+}: LogoutButtonProps) {
+  const router = useRouter();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  const handleLogout = async () => {
+    setIsLoggingOut(true);
+
+    try {
+      const response = await fetch("/api/auth/logout", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const data = await response.json();
+
+      if (!response.ok || !data.success) {
+        throw new Error(data.error || "Logout failed");
+      }
+
+      toast.success("Logged out successfully");
+      
+      // Trigger auth status refresh in all components (navbar, sidebar, etc.)
+      trigger_auth_status_refresh();
+      
+      // Refresh the page to update authentication state (cookies are cleared server-side)
+      router.refresh();
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Logout failed. Please try again.";
+      toast.error(errorMessage);
+    } finally {
+      setIsLoggingOut(false);
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleLogout}
+      disabled={isLoggingOut}
+      variant={variant}
+      size={size}
+      className={className}
+      aria-label="Logout"
+    >
+      <LogOut className="h-4 w-4 mr-2" aria-hidden="true" />
+      {isLoggingOut ? "Logging out..." : "Logout"}
+    </Button>
+  );
+}
+

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

@@ -0,0 +1,72 @@
+// file_description: reusable password input with visibility toggle and error messaging
+// section: client_directive
+"use client";
+
+// section: imports
+import { Eye, EyeOff } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { FieldErrorMessage } from "@/components/layouts/shared/components/field_error_message";
+
+// section: types
+export type PasswordFieldProps = {
+  inputId: string;
+  ariaLabel: string;
+  value: string;
+  placeholder: string;
+  autoComplete?: string;
+  isVisible: boolean;
+  onChange: (value: string) => void;
+  onToggleVisibility: () => void;
+  errorMessage?: string | string[];
+};
+
+// section: component
+export function PasswordField({
+  inputId,
+  ariaLabel,
+  value,
+  placeholder,
+  autoComplete,
+  isVisible,
+  onChange,
+  onToggleVisibility,
+  errorMessage,
+}: PasswordFieldProps) {
+  return (
+    <div className="cls_password_field_wrapper">
+      <div className="relative">
+        <Input
+          id={inputId}
+          type={isVisible ? "text" : "password"}
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          autoComplete={autoComplete}
+          placeholder={placeholder}
+          aria-label={ariaLabel}
+          className="cls_password_field_input pr-11"
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          aria-label={`${isVisible ? "Hide" : "Show"} ${ariaLabel.toLowerCase()}`}
+          onClick={onToggleVisibility}
+          className="cls_password_field_toggle absolute right-1 top-1/2 -translate-y-1/2 text-slate-600 hover:text-slate-900"
+        >
+          {isVisible ? (
+            <EyeOff className="h-4 w-4" aria-hidden="true" />
+          ) : (
+            <Eye className="h-4 w-4" aria-hidden="true" />
+          )}
+        </Button>
+      </div>
+      {errorMessage ? (
+        <div className="mt-1 min-h-0">
+          <FieldErrorMessage message={errorMessage} />
+        </div>
+      ) : null}
+    </div>
+  );
+}
+

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

@@ -0,0 +1,264 @@
+// 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 "@/components/ui/sidebar";
+import { LogIn, UserPlus, BookOpen, ExternalLink, Database, KeyRound, MailCheck, User, LogOut, Key, Settings } from "lucide-react";
+import { use_auth_status, trigger_auth_status_refresh } from "@/components/layouts/shared/hooks/use_auth_status";
+import { LogoutButton } from "@/components/layouts/shared/components/logout_button";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+
+// section: types
+type SidebarLayoutWrapperProps = {
+  children: React.ReactNode;
+};
+
+// section: component
+export function SidebarLayoutWrapper({ children }: SidebarLayoutWrapperProps) {
+  const authStatus = use_auth_status();
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    try {
+      const response = await fetch("/api/auth/logout", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const data = await response.json();
+
+      if (!response.ok || !data.success) {
+        throw new Error(data.error || "Logout failed");
+      }
+
+      toast.success("Logged out successfully");
+      
+      // Trigger auth status refresh in all components (navbar, sidebar, etc.)
+      trigger_auth_status_refresh();
+      
+      // Refresh the page to update authentication state (cookies are cleared server-side)
+      router.refresh();
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Logout failed. Please try again.";
+      toast.error(errorMessage);
+    }
+  };
+
+  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="/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="/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="/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="/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="/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>
+              </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="/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>
+                  <SidebarMenuItem className="cls_sidebar_layout_logout_item">
+                    <SidebarMenuButton
+                      onClick={handleLogout}
+                      className="cls_sidebar_layout_logout_link flex items-center gap-2"
+                      aria-label="Logout"
+                    >
+                      <LogOut className="h-4 w-4" aria-hidden="true" />
+                      <span>Logout</span>
+                    </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>
+            <div className="cls_sidebar_layout_auth_status flex items-center gap-3">
+              {authStatus.loading ? (
+                <span className="cls_sidebar_layout_auth_loading text-sm text-muted-foreground">
+                  Loading...
+                </span>
+              ) : authStatus.authenticated ? (
+                <>
+                  <div className="cls_sidebar_layout_user_info flex items-center gap-2">
+                    <User className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
+                    <span className="cls_sidebar_layout_user_name text-sm font-medium text-foreground">
+                      {authStatus.name || authStatus.email || "Logged in"}
+                    </span>
+                  </div>
+                  <LogoutButton size="sm" />
+                </>
+              ) : (
+                <span className="cls_sidebar_layout_not_logged_in text-sm text-muted-foreground">
+                  Not logged in
+                </span>
+              )}
+            </div>
+          </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/two_column_auth_layout.tsx

@@ -0,0 +1,44 @@
+// file_description: reusable two-column authentication layout shell that combines visual panel and form content
+// section: imports
+import { VisualPanel } from "@/components/layouts/shared/components/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

@@ -0,0 +1,78 @@
+// 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 "@/components/layouts/shared/hooks/use_auth_status";
+import { Button } from "@/components/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 = "/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}</>;
+}
+