hazo_auth 0.1.2 → 1.0.0

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 = "/hazo_auth/register",
+  login_path = "/hazo_auth/login",
+  settings_path = "/hazo_auth/my_settings",
+  logout_path = "/api/hazo_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, User } 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>
@@ -82,7 +50,7 @@ export function SidebarLayoutWrapper({ children }: SidebarLayoutWrapperProps) {
                 <SidebarMenuItem className="cls_sidebar_layout_test_login_item">
                   <SidebarMenuButton asChild>
                     <Link
-                      href="/login"
+                      href="/hazo_auth/login"
                       className="cls_sidebar_layout_test_login_link flex items-center gap-2"
                       aria-label="Test login layout component"
                     >
@@ -94,7 +62,7 @@ export function SidebarLayoutWrapper({ children }: SidebarLayoutWrapperProps) {
                 <SidebarMenuItem className="cls_sidebar_layout_test_register_item">
                   <SidebarMenuButton asChild>
                     <Link
-                      href="/register"
+                      href="/hazo_auth/register"
                       className="cls_sidebar_layout_test_register_link flex items-center gap-2"
                       aria-label="Test register layout component"
                     >
@@ -106,7 +74,7 @@ export function SidebarLayoutWrapper({ children }: SidebarLayoutWrapperProps) {
                 <SidebarMenuItem className="cls_sidebar_layout_test_forgot_password_item">
                   <SidebarMenuButton asChild>
                     <Link
-                      href="/forgot_password"
+                      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"
                     >
@@ -118,7 +86,7 @@ export function SidebarLayoutWrapper({ children }: SidebarLayoutWrapperProps) {
                 <SidebarMenuItem className="cls_sidebar_layout_test_reset_password_item">
                   <SidebarMenuButton asChild>
                     <Link
-                      href="/reset_password"
+                      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"
                     >
@@ -130,7 +98,7 @@ export function SidebarLayoutWrapper({ children }: SidebarLayoutWrapperProps) {
                 <SidebarMenuItem className="cls_sidebar_layout_test_email_verification_item">
                   <SidebarMenuButton asChild>
                     <Link
-                      href="/verify_email"
+                      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"
                     >
@@ -151,6 +119,18 @@ export function SidebarLayoutWrapper({ children }: SidebarLayoutWrapperProps) {
                     </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 && (
@@ -162,7 +142,7 @@ export function SidebarLayoutWrapper({ children }: SidebarLayoutWrapperProps) {
                   <SidebarMenuItem className="cls_sidebar_layout_my_settings_item">
                     <SidebarMenuButton asChild>
                       <Link
-                        href="/my_settings"
+                        href="/hazo_auth/my_settings"
                         className="cls_sidebar_layout_my_settings_link flex items-center gap-2"
                         aria-label="Open my settings page"
                       >
@@ -171,16 +151,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 +201,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}

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

@@ -26,7 +26,7 @@ export type UnauthorizedGuardProps = {
 export function UnauthorizedGuard({
   message = "You must be logged in to access this page.",
   loginButtonLabel = "Go to login",
-  loginPath = "/login",
+  loginPath = "/hazo_auth/login",
   children,
 }: UnauthorizedGuardProps) {
   const router = useRouter();

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

@@ -46,7 +46,7 @@ export function use_auth_status(): AuthStatus {
     setAuthStatus((prev) => ({ ...prev, loading: true }));
 
     try {
-      const response = await fetch("/api/auth/me", {
+      const response = await fetch("/api/hazo_auth/me", {
         method: "GET",
         credentials: "include",
       });