@lastbrain/module-auth 2.0.19 → 2.0.31

package/src/components/AccountButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AppLink, Button } from "@lastbrain/ui";
+import { AppLink, Button, ThemeSwitcher } from "@lastbrain/ui";
 import { Avatar } from "@lastbrain/ui";
 import {
   Dropdown,
@@ -10,8 +10,9 @@ import {
 } from "@lastbrain/ui";
 import * as LucideIcons from "lucide-react";
 import type { User } from "@supabase/supabase-js";
-import { useModuleTranslation, langHref } from "@lastbrain/app";
+import { useModuleTranslation } from "@lastbrain/app";
 import { useLanguage } from "@lastbrain/app";
+import { useLocalizedRouter, supabaseBrowserClient } from "@lastbrain/core";
 
 interface AccountButtonProps {
   item: {
@@ -42,49 +43,46 @@ export const AccountButton = ({
 }: AccountButtonProps) => {
   const { lang } = useLanguage();
   const t = useModuleTranslation("auth");
+  const router = useLocalizedRouter();
 
   if (!user)
     return (
       <>
-        <div className="block md:hidden">
+        <div className="block sm:hidden flex flex-inline gap-2 item-center">
           <Button
             as={AppLink}
             href="/signin"
             radius="full"
             isIconOnly
-            variant="light"
-            color="primary"
-          >
-            <LucideIcons.LogIn size={16} />
-          </Button>
-          <Button
-            as={AppLink}
-            href="/signup"
-            radius="full"
-            isIconOnly
             variant="flat"
-            className="ml-2"
-            color="secondary"
+            color="primary"
           >
             <LucideIcons.UserPlus2 size={16} />
           </Button>
+          <div className="ms-2">
+            <ThemeSwitcher />
+          </div>
         </div>
-        <div className="hidden md:block">
+        <div className="hidden sm:block flex flex-inline gap-2 item-center">
           <Button
             as={AppLink}
             href="/signin"
             startContent={<LucideIcons.LogIn size={16} />}
             variant="light"
             color="primary"
+            radius="full"
+            size="sm"
           >
             {t("signin")}
           </Button>
           <Button
             as={AppLink}
             href="/signup"
-            variant="flat"
+            variant="bordered"
             className="ml-2"
             color="secondary"
+            radius="full"
+            size="sm"
             startContent={<LucideIcons.UserPlus2 size={16} />}
           >
             {t("signup")}
@@ -94,80 +92,106 @@ export const AccountButton = ({
     );
 
   return (
-    <Dropdown>
-      <DropdownTrigger>
-        {user?.user_metadata.avatar ? (
-          <Avatar
-            size="sm"
-            src={
-              user?.user_metadata.avatar
-                ? `/api/storage/${user?.user_metadata.avatar}`
-                : undefined
-            }
-            title={user.email}
-            fallback={<LucideIcons.User2 size={18} />}
-            classNames={{
-              base: "cursor-pointer bg-white/0",
-              icon: "text-default-700",
-            }}
-          />
-        ) : (
-          <Button size="sm" variant="flat" radius="full" isIconOnly>
-            <LucideIcons.User2 size={16} />
-          </Button>
-        )}
-      </DropdownTrigger>
+    <div className="flex flex-inline gap-2">
+      <Dropdown>
+        <DropdownTrigger>
+          {user?.user_metadata.avatar ? (
+            <Avatar
+              size="sm"
+              src={
+                user?.user_metadata.avatar
+                  ? `/api/storage/${user?.user_metadata.avatar}`
+                  : undefined
+              }
+              title={user.email}
+              fallback={<LucideIcons.User2 size={18} />}
+              classNames={{
+                base: "cursor-pointer bg-white/0",
+                icon: "text-default-700",
+              }}
+            />
+          ) : (
+            <Button size="sm" variant="flat" radius="full" isIconOnly>
+              <LucideIcons.User2 size={16} />
+            </Button>
+          )}
+        </DropdownTrigger>
+
+        <DropdownMenu
+          className="relative"
+          items={[
+            {
+              key: "hello",
+              label: `${t("hello")} ${
+                user?.user_metadata?.full_name || user.email
+              }`,
+              isReadOnly: true,
+            },
+            ...accountMenu.map((item) => ({
+              key: item.path,
+              label: item.title,
+              description: item.description,
+              icon: item.icon,
+              isLogout:
+                item.path.includes("signout") || item.path.includes("logout"),
+              href:
+                item.path.includes("signout") || item.path.includes("logout")
+                  ? undefined
+                  : item.path,
+            })),
+          ]}
+        >
+          {(item: {
+            key: string;
+            label: string;
+            description?: string;
+            icon?: string;
+            isLogout?: boolean;
+            href?: string;
+            isReadOnly?: boolean;
+          }) => {
+            const Icon = item.icon ? getIcon(item.icon) : null;
 
-      <DropdownMenu
-        items={[
-          {
-            key: "hello",
-            label: `${t("hello")} ${
-              user?.user_metadata?.full_name || user.email
-            }`,
-            isReadOnly: true,
-          },
-          ...accountMenu.map((item) => ({
-            key: item.path,
-            label: item.title,
-            description: item.description,
-            icon: item.icon,
-            isLogout:
-              item.path.includes("signout") || item.path.includes("logout"),
-            href:
-              item.path.includes("signout") || item.path.includes("logout")
-                ? undefined
-                : langHref(item.path, lang),
-          })),
-        ]}
-      >
-        {(item: {
-          key: string;
-          label: string;
-          description?: string;
-          icon?: string;
-          isLogout?: boolean;
-          href?: string;
-          isReadOnly?: boolean;
-        }) => {
-          const Icon = item.icon ? getIcon(item.icon) : null;
+            const handleLogout = async () => {
+              try {
+                if (onLogout) {
+                  await onLogout();
+                } else {
+                  // default fallback: sign out via supabase client
+                  try {
+                    await supabaseBrowserClient.auth.signOut();
+                  } catch (_e) {
+                    // ignore
+                  }
+                }
+              } finally {
+                try {
+                  router.push("/");
+                } catch (_e) {
+                  // ignore routing errors
+                }
+              }
+            };
 
-          return (
-            <DropdownItem
-              key={item.key}
-              href={item.href}
-              onPress={item.isLogout ? () => onLogout?.() : undefined}
-              color={item.isLogout ? "danger" : "default"}
-              description={!item.isLogout && item.description}
-              startContent={Icon && <Icon size={16} />}
-              isDisabled={item.isReadOnly}
-              isReadOnly={item.isReadOnly}
-            >
-              {item.label}
-            </DropdownItem>
-          );
-        }}
-      </DropdownMenu>
-    </Dropdown>
+            return (
+              <DropdownItem
+                as={AppLink}
+                key={item.key}
+                href={item.href}
+                onPress={item.isLogout ? handleLogout : undefined}
+                color={item.isLogout ? "danger" : "default"}
+                description={!item.isLogout && item.description}
+                startContent={Icon && <Icon size={16} />}
+                isDisabled={item.isReadOnly}
+                isReadOnly={item.isReadOnly}
+              >
+                {item.label}
+              </DropdownItem>
+            );
+          }}
+        </DropdownMenu>
+      </Dropdown>
+      <ThemeSwitcher />
+    </div>
   );
 };

package/src/components/Doc.tsx

@@ -93,6 +93,24 @@ export function Doc() {
                   - ResetPassword
                 </span>
               </div>
+              <div className="flex items-start gap-2">
+                <Chip size="sm" color="success" variant="flat">
+                  GET
+                </Chip>
+                <code className="text-sm">/confirm</code>
+                <span className="text-sm text-slate-600 dark:text-slate-400">
+                  - ConfirmPage
+                </span>
+              </div>
+              <div className="flex items-start gap-2">
+                <Chip size="sm" color="success" variant="flat">
+                  GET
+                </Chip>
+                <code className="text-sm">/auth-code-error</code>
+                <span className="text-sm text-slate-600 dark:text-slate-400">
+                  - AuthCodeErrorPage
+                </span>
+              </div>
             </div>
           </div>
           <div>
@@ -100,15 +118,6 @@ export function Doc() {
               Pages Protégées (Auth)
             </h3>
             <div className="space-y-2">
-              <div className="flex items-start gap-2">
-                <Chip size="sm" color="primary" variant="flat">
-                  GET
-                </Chip>
-                <code className="text-sm">/dashboard</code>
-                <span className="text-sm text-slate-600 dark:text-slate-400">
-                  - DashboardPage
-                </span>
-              </div>
               <div className="flex items-start gap-2">
                 <Chip size="sm" color="primary" variant="flat">
                   GET
@@ -201,6 +210,25 @@ export function Doc() {
               </Chip>
             </div>
           </div>
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              <code>/api/public/callback</code>
+            </h3>
+            <div className="flex gap-2">
+              <Chip size="sm" color="success" variant="flat">
+                GET
+              </Chip>
+              <Chip size="sm" color="primary" variant="flat">
+                POST
+              </Chip>
+              <Chip size="sm" color="warning" variant="flat">
+                PUT
+              </Chip>
+              <Chip size="sm" color="danger" variant="flat">
+                DELETE
+              </Chip>
+            </div>
+          </div>
           <div>
             <h3 className="text-lg font-semibold mb-2">
               <code>/api/auth/profile</code>
@@ -284,6 +312,16 @@ export function Doc() {
             title="user_notifications"
             description="Table user_notifications du module auth"
           />
+          <TableStructure
+            tableName="global_addons"
+            title="global_addons"
+            description="Table global_addons du module auth"
+          />
+          <TableStructure
+            tableName="user_global_addons"
+            title="user_global_addons"
+            description="Table user_global_addons du module auth"
+          />
         </CardBody>
       </Card>
 

package/src/components/HasProfil.tsx

@@ -0,0 +1,63 @@
+import { logger, useModuleTranslation } from "@lastbrain/core";
+import { Alert, AppLink, Skeleton } from "@lastbrain/ui";
+import { useEffect, useState } from "react";
+
+export const HasProfil = ({
+  hasUpdate,
+}: {
+  hasUpdate?: (value: boolean | null) => void;
+}) => {
+  const [profil, setProfil] = useState<any>(null);
+  const t = useModuleTranslation("auth");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      try {
+        const responseProfil = await fetch("/api/auth/profile");
+        if (!responseProfil.ok) {
+          throw new Error("Failed to load stats");
+        }
+        const jsonProfil = await responseProfil.json();
+
+        setProfil(jsonProfil.data);
+        if (jsonProfil.data && jsonProfil.data.first_name) {
+          hasUpdate?.(true);
+        } else {
+          hasUpdate?.(false);
+        }
+      } catch (error) {
+        logger.error("[HasProfil] stats error", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchStats();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="mb-6 mt-6">
+        <Skeleton className="w-full h-12 w-full rounded-md" />
+      </div>
+    );
+  }
+  return (
+    <div className="mb-6 mt-6">
+      {!profil ||
+        (!profil.first_name ? (
+          <Alert
+            color="danger"
+            endContent={
+              <AppLink className="underline" href="/auth/profile">
+                Go
+              </AppLink>
+            }
+          >
+            {t("please_complete_your_profile")}
+          </Alert>
+        ) : null)}
+    </div>
+  );
+};

package/src/{web → components}/auth/dashboard.tsx

@@ -9,10 +9,13 @@ import {
   Chip,
   Divider,
   Avatar,
+  Skeleton,
 } from "@lastbrain/ui";
 
-import { User, Mail, Calendar, Shield } from "lucide-react";
+import { User, Mail, Calendar, Shield, LayoutDashboard } from "lucide-react";
 import { useModuleTranslation } from "@lastbrain/core";
+import { useRouter } from "next/navigation";
+import { HasProfil } from "../HasProfil";
 
 interface UserData {
   id: string;
@@ -33,6 +36,8 @@ export function DashboardPage() {
   const [userData, setUserData] = useState<UserData | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [hasUpdate, setHasUpdate] = useState<boolean | null>(null);
+  const router = useRouter();
 
   useEffect(() => {
     fetchUserData();
@@ -41,13 +46,36 @@ export function DashboardPage() {
   const fetchUserData = async () => {
     try {
       setIsLoading(true);
-      const response = await fetch("/api/auth/me");
+      const response = await fetch("/api/auth/me", { credentials: "include" });
 
       if (!response.ok) {
         throw new Error("Failed to fetch user data");
       }
 
       const result = await response.json();
+
+      // Si le serveur a synchronisé la locale côté cookie, rediriger
+      // le client vers le même chemin préfixé par la langue du profil.
+      if (result?.localeUpdated && result?.profileLang) {
+        try {
+          const profileLang = result.profileLang as string;
+          const pathname = window.location.pathname;
+          const search = window.location.search || "";
+          // Retirer un préfixe langue existant
+          const pathWithoutLang =
+            pathname.replace(/^\/[a-z]{2}(?=\/|$)/, "") || "/";
+          // Éviter de rediriger vers des routes API
+          const safePath = pathWithoutLang.startsWith("/api")
+            ? "/"
+            : pathWithoutLang;
+          const target = `${profileLang.startsWith("/") ? profileLang : "/" + profileLang}${safePath}${search}`;
+          router.replace(target);
+          return;
+        } catch (e) {
+          console.debug("dashboard: locale redirect failed", e);
+        }
+      }
+
       setUserData(result.data);
     } catch (err) {
       setError(err instanceof Error ? err.message : "An error occurred");
@@ -84,21 +112,33 @@ export function DashboardPage() {
   }
 
   if (!userData) {
-    return null;
+    return (
+      <>
+        <HasProfil />
+      </>
+    );
   }
 
   const fullName =
-    userData.profile?.first_name && userData.profile?.last_name
+    userData?.profile?.first_name && userData.profile?.last_name
       ? `${userData.profile.first_name} ${userData.profile.last_name}`
       : "User";
 
   return (
-    <div className="pt-12 pb-12 max-w-6xl mx-auto px-4">
-      <h1 className="text-3xl font-bold mb-8">
-        {t("dashboard.title") || "Dashboard"}
-      </h1>
+    <div className="max-w-6xl mx-auto">
+      <HasProfil
+        hasUpdate={(v) => {
+          setHasUpdate(v);
+        }}
+      />
+      <div className="flex flex-inline items-center gap-2 mb-4">
+        <LayoutDashboard size={24} />
+        <h1 className="text-3xl font-bold ">
+          {t("dashboard.title") || "Dashboard"}
+        </h1>
+      </div>
 
-      <div className="grid gap-6 md:grid-cols-2">
+      <div className="mx-0 px-0 grid gap-6 md:grid-cols-2">
         {/* Profile Summary Card */}
         <Card className="col-span-full md:col-span-1">
           <CardHeader className="flex gap-3">
@@ -159,15 +199,19 @@ export function DashboardPage() {
                 <span className="text-small">
                   {t("dashboard.profile") || "Profile"}
                 </span>
-                <Chip
-                  color={userData.profile ? "success" : "warning"}
-                  size="sm"
-                  variant="flat"
-                >
-                  {userData.profile
-                    ? t("dashboard.complete") || "Complete"
-                    : t("dashboard.incomplete") || "Incomplete"}
-                </Chip>
+                {hasUpdate === null ? (
+                  <Skeleton className="w-16 h-6 rounded-full" />
+                ) : (
+                  <Chip
+                    color={hasUpdate ? "success" : "warning"}
+                    size="sm"
+                    variant="flat"
+                  >
+                    {hasUpdate
+                      ? t("dashboard.complete") || "Complete"
+                      : t("dashboard.incomplete") || "Incomplete"}
+                  </Chip>
+                )}
               </div>
             </div>
           </CardBody>
@@ -188,7 +232,7 @@ export function DashboardPage() {
           </Card>
         )}
 
-        {/* Quick Stats */}
+        {/* Quick Stats
         <Card className="col-span-full">
           <CardHeader>
             <h3 className="text-lg font-semibold">Quick Stats</h3>
@@ -219,7 +263,7 @@ export function DashboardPage() {
               </div>
             </div>
           </CardBody>
-        </Card>
+        </Card> */}
       </div>
     </div>
   );