hazo_auth 0.1.0 → 0.3.0

package/src/components/layouts/my_settings/components/profile_picture_library_tab.tsx

@@ -140,6 +140,21 @@ export function ProfilePictureLibraryTab({
     return "L";
   };
 
+  // Map column count to Tailwind grid class
+  const getGridColumnsClass = (columns: number): string => {
+    const columnMap: Record<number, string> = {
+      1: "grid-cols-1",
+      2: "grid-cols-2",
+      3: "grid-cols-3",
+      4: "grid-cols-4",
+      5: "grid-cols-5",
+      6: "grid-cols-6",
+      7: "grid-cols-7",
+      8: "grid-cols-8",
+    };
+    return columnMap[columns] || "grid-cols-4";
+  };
+
   return (
     <div className="cls_profile_picture_library_tab flex flex-col gap-4">
       {/* Switch */}
@@ -213,7 +228,7 @@ export function ProfilePictureLibraryTab({
               <Loader2 className="h-6 w-6 text-slate-400 animate-spin" aria-hidden="true" />
             </div>
           ) : photos.length > 0 ? (
-            <div className={`cls_profile_picture_library_tab_photos_grid grid grid-cols-${libraryPhotoGridColumns} gap-3 overflow-y-auto p-4 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px] max-h-[400px]`}>
+            <div className={`cls_profile_picture_library_tab_photos_grid grid ${getGridColumnsClass(libraryPhotoGridColumns)} gap-3 overflow-y-auto p-4 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px] max-h-[400px]`}>
               {photos.map((photoUrl) => (
                 <button
                   key={photoUrl}
@@ -221,16 +236,21 @@ export function ProfilePictureLibraryTab({
                   onClick={() => handlePhotoClick(photoUrl)}
                   className={`
                     cls_profile_picture_library_tab_photo_thumbnail
-                    aspect-square rounded-lg overflow-hidden border-2 transition-colors
+                    aspect-square rounded-lg overflow-hidden border-2 transition-colors cursor-pointer
                     ${selectedPhoto === photoUrl ? "border-blue-500 ring-2 ring-blue-200" : "border-slate-200 hover:border-slate-300"}
                   `}
-                  aria-label={`Select ${photoUrl}`}
+                  aria-label={`Select photo ${photoUrl.split('/').pop()}`}
                 >
                   <img
                     src={photoUrl}
-                    alt="Library photo thumbnail"
+                    alt={`Library photo ${photoUrl.split('/').pop()}`}
                     className="cls_profile_picture_library_tab_photo_thumbnail_image w-full h-full object-cover"
                     loading="lazy"
+                    onError={(e) => {
+                      // Fallback if image fails to load
+                      const target = e.target as HTMLImageElement;
+                      target.style.display = 'none';
+                    }}
                   />
                 </button>
               ))}
@@ -256,6 +276,15 @@ export function ProfilePictureLibraryTab({
                   src={selectedPhoto}
                   alt="Selected library photo preview"
                   className="cls_profile_picture_library_tab_preview_image max-w-full max-h-[350px] rounded-lg object-contain"
+                  onError={(e) => {
+                    // Fallback if preview image fails to load
+                    const target = e.target as HTMLImageElement;
+                    target.style.display = 'none';
+                    const wrapper = target.parentElement;
+                    if (wrapper) {
+                      wrapper.innerHTML = '<p class="text-sm text-red-500">Failed to load preview</p>';
+                    }
+                  }}
                 />
               </div>
               <p className="cls_profile_picture_library_tab_preview_text text-sm text-slate-600 text-center">

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

@@ -0,0 +1,321 @@
+// file_description: profile picture menu component for navbar or sidebar - shows profile picture when logged in, or sign up/sign in buttons when not logged in
+// section: client_directive
+"use client";
+
+// section: imports
+import { useState, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Settings, LogOut } from "lucide-react";
+import { toast } from "sonner";
+import { use_auth_status, trigger_auth_status_refresh } from "@/components/layouts/shared/hooks/use_auth_status";
+// Type-only import from server file is safe (types are erased at runtime)
+import type { ProfilePicMenuMenuItem } from "@/lib/profile_pic_menu_config.server";
+
+// section: types
+export type ProfilePicMenuProps = {
+  show_single_button?: boolean;
+  sign_up_label?: string;
+  sign_in_label?: string;
+  register_path?: string;
+  login_path?: string;
+  settings_path?: string;
+  logout_path?: string;
+  custom_menu_items?: ProfilePicMenuMenuItem[];
+  className?: string;
+  avatar_size?: "default" | "sm" | "lg";
+};
+
+// section: component
+/**
+ * Profile picture menu component
+ * Shows user profile picture when authenticated, or sign up/sign in buttons when not authenticated
+ * Clicking profile picture opens dropdown menu with user info and actions
+ * @param props - Component props including configuration options
+ * @returns Profile picture menu component
+ */
+export function ProfilePicMenu({
+  show_single_button = false,
+  sign_up_label = "Sign Up",
+  sign_in_label = "Sign In",
+  register_path = "/register",
+  login_path = "/login",
+  settings_path = "/my_settings",
+  logout_path = "/api/auth/logout",
+  custom_menu_items = [],
+  className,
+  avatar_size = "default",
+}: ProfilePicMenuProps) {
+  const router = useRouter();
+  const authStatus = use_auth_status();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  // Get initials from name or email
+  const getInitials = (): string => {
+    if (authStatus.name) {
+      const parts = authStatus.name.trim().split(" ");
+      if (parts.length >= 2) {
+        return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+      }
+      return authStatus.name[0]?.toUpperCase() || "";
+    }
+    if (authStatus.email) {
+      return authStatus.email[0]?.toUpperCase() || "";
+    }
+    return "?";
+  };
+
+  // Handle logout
+  const handleLogout = async () => {
+    setIsLoggingOut(true);
+
+    try {
+      const response = await fetch(logout_path, {
+        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
+      trigger_auth_status_refresh();
+      
+      // Refresh the page to update authentication state
+      router.refresh();
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Logout failed. Please try again.";
+      toast.error(errorMessage);
+    } finally {
+      setIsLoggingOut(false);
+    }
+  };
+
+  // Build menu items with default items and custom items
+  const menuItems = useMemo(() => {
+    const items: ProfilePicMenuMenuItem[] = [];
+
+    // Add default info items (only if authenticated)
+    if (authStatus.authenticated) {
+      // User name (info, order: 1)
+      if (authStatus.name) {
+        items.push({
+          type: "info",
+          value: authStatus.name,
+          order: 1,
+          id: "default_name",
+        });
+      }
+
+      // Email address (info, order: 2)
+      if (authStatus.email) {
+        items.push({
+          type: "info",
+          value: authStatus.email,
+          order: 2,
+          id: "default_email",
+        });
+      }
+
+      // Separator (order: 1)
+      items.push({
+        type: "separator",
+        order: 1,
+        id: "default_separator",
+      });
+
+      // Settings (link, order: 1)
+      items.push({
+        type: "link",
+        label: "Settings",
+        href: settings_path,
+        order: 1,
+        id: "default_settings",
+      });
+
+      // Logout (link, order: 2)
+      items.push({
+        type: "link",
+        label: "Logout",
+        href: logout_path,
+        order: 2,
+        id: "default_logout",
+      });
+    }
+
+    // Add custom menu items
+    items.push(...custom_menu_items);
+
+    // Sort items by type group and order
+    // Order: info items first, then separators, then links
+    items.sort((a, b) => {
+      // Define type priority: info = 0, separator = 1, link = 2
+      const typePriority = { info: 0, separator: 1, link: 2 };
+      const aPriority = typePriority[a.type];
+      const bPriority = typePriority[b.type];
+
+      if (aPriority !== bPriority) {
+        return aPriority - bPriority;
+      }
+
+      // Within same type, sort by order
+      return a.order - b.order;
+    });
+
+    return items;
+  }, [authStatus.authenticated, authStatus.name, authStatus.email, settings_path, logout_path, custom_menu_items]);
+
+  // Avatar size classes
+  const avatarSizeClasses = {
+    sm: "h-8 w-8",
+    default: "h-10 w-10",
+    lg: "h-12 w-12",
+  };
+
+  // Show loading state
+  if (authStatus.loading) {
+    return (
+      <div className={`cls_profile_pic_menu ${className || ""}`}>
+        <div className="h-10 w-10 rounded-full bg-slate-200 animate-pulse" />
+      </div>
+    );
+  }
+
+  // Not authenticated - show sign up/sign in buttons
+  if (!authStatus.authenticated) {
+    return (
+      <div className={`cls_profile_pic_menu flex items-center gap-2 ${className || ""}`}>
+        {show_single_button ? (
+          <Button asChild variant="default" size="sm">
+            <Link href={register_path} className="cls_profile_pic_menu_sign_up">
+              {sign_up_label}
+            </Link>
+          </Button>
+        ) : (
+          <>
+            <Button asChild variant="outline" size="sm">
+              <Link href={register_path} className="cls_profile_pic_menu_sign_up">
+                {sign_up_label}
+              </Link>
+            </Button>
+            <Button asChild variant="default" size="sm">
+              <Link href={login_path} className="cls_profile_pic_menu_sign_in">
+                {sign_in_label}
+              </Link>
+            </Button>
+          </>
+        )}
+      </div>
+    );
+  }
+
+  // Authenticated - show profile picture with dropdown menu
+  return (
+    <div className={`cls_profile_pic_menu ${className || ""}`}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            className="cls_profile_pic_menu_trigger focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary rounded-full"
+            aria-label="Profile menu"
+          >
+            <Avatar className={`cls_profile_pic_menu_avatar ${avatarSizeClasses[avatar_size]} cursor-pointer`}>
+              <AvatarImage
+                src={authStatus.profile_picture_url}
+                alt={authStatus.name ? `Profile picture of ${authStatus.name}` : "Profile picture"}
+                className="cls_profile_pic_menu_image"
+              />
+              <AvatarFallback className="cls_profile_pic_menu_fallback bg-slate-200 text-slate-600">
+                {getInitials()}
+              </AvatarFallback>
+            </Avatar>
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="cls_profile_pic_menu_dropdown w-56">
+          {menuItems.map((item) => {
+            if (item.type === "separator") {
+              return <DropdownMenuSeparator key={item.id} className="cls_profile_pic_menu_separator" />;
+            }
+
+            if (item.type === "info") {
+              return (
+                <div key={item.id} className="cls_profile_pic_menu_info">
+                  {item.value && (
+                    <div className="cls_profile_pic_menu_info_value px-2 py-1.5 text-sm text-foreground">
+                      {item.value}
+                    </div>
+                  )}
+                </div>
+              );
+            }
+
+            if (item.type === "link") {
+              // Special handling for logout
+              if (item.id === "default_logout") {
+                return (
+                  <DropdownMenuItem
+                    key={item.id}
+                    onClick={handleLogout}
+                    disabled={isLoggingOut}
+                    className="cls_profile_pic_menu_logout cursor-pointer text-destructive focus:text-destructive"
+                  >
+                    <LogOut className="mr-2 h-4 w-4" />
+                    {isLoggingOut ? "Logging out..." : item.label}
+                  </DropdownMenuItem>
+                );
+              }
+
+              // Special handling for settings
+              if (item.id === "default_settings") {
+                return (
+                  <DropdownMenuItem
+                    key={item.id}
+                    asChild
+                    className="cls_profile_pic_menu_settings cursor-pointer"
+                  >
+                    <Link href={item.href || settings_path}>
+                      <Settings className="mr-2 h-4 w-4" />
+                      {item.label}
+                    </Link>
+                  </DropdownMenuItem>
+                );
+              }
+
+              // Generic link handling
+              return (
+                <DropdownMenuItem
+                  key={item.id}
+                  asChild
+                  className="cls_profile_pic_menu_link cursor-pointer"
+                >
+                  <Link href={item.href || "#"}>
+                    {item.label}
+                  </Link>
+                </DropdownMenuItem>
+              );
+            }
+
+            return null;
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+

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

@@ -0,0 +1,40 @@
+// file_description: server wrapper component that loads profile picture menu configuration and passes to client component
+// section: imports
+import { ProfilePicMenu } from "./profile_pic_menu";
+import { get_profile_pic_menu_config } from "@/lib/profile_pic_menu_config.server";
+
+// section: types
+export type ProfilePicMenuWrapperProps = {
+  className?: string;
+  avatar_size?: "default" | "sm" | "lg";
+};
+
+// section: component
+/**
+ * Server wrapper component that loads profile picture menu configuration from hazo_auth_config.ini
+ * and passes it to the client ProfilePicMenu component
+ * @param props - Component props including className and avatar_size
+ * @returns ProfilePicMenu component with loaded configuration
+ */
+export function ProfilePicMenuWrapper({
+  className,
+  avatar_size,
+}: ProfilePicMenuWrapperProps) {
+  const config = get_profile_pic_menu_config();
+
+  return (
+    <ProfilePicMenu
+      show_single_button={config.show_single_button}
+      sign_up_label={config.sign_up_label}
+      sign_in_label={config.sign_in_label}
+      register_path={config.register_path}
+      login_path={config.login_path}
+      settings_path={config.settings_path}
+      logout_path={config.logout_path}
+      custom_menu_items={config.custom_menu_items}
+      className={className}
+      avatar_size={avatar_size}
+    />
+  );
+}
+

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

@@ -17,11 +17,9 @@ import {
   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";
+import { LogIn, UserPlus, BookOpen, ExternalLink, Database, KeyRound, MailCheck, Key, Settings } from "lucide-react";
+import { use_auth_status } from "@/components/layouts/shared/hooks/use_auth_status";
+import { ProfilePicMenu } from "@/components/layouts/shared/components/profile_pic_menu";
 
 // section: types
 type SidebarLayoutWrapperProps = {
@@ -31,36 +29,6 @@ type SidebarLayoutWrapperProps = {
 // 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>
@@ -171,16 +139,6 @@ export function SidebarLayoutWrapper({ children }: SidebarLayoutWrapperProps) {
                       </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>
             )}
@@ -231,27 +189,7 @@ export function SidebarLayoutWrapper({ children }: SidebarLayoutWrapperProps) {
                 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>
+            <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}