@lastbrain/module-auth 0.1.1 → 0.1.3

package/src/components/Doc.tsx

@@ -0,0 +1,310 @@
+import React from "react";
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Snippet,
+  Chip,
+  TableStructure,
+} from "@lastbrain/ui";
+
+export function AuthModuleDoc() {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-start justify-between">
+        <div>
+          <h2 className="text-3xl font-bold mb-2">Module Auth</h2>
+          <p className="text-slate-600 dark:text-slate-400">
+            Authentification complète avec gestion des profils utilisateur
+          </p>
+        </div>
+        <Chip color="primary" variant="flat">
+          v0.1.0
+        </Chip>
+      </div>
+
+      {/* Author */}
+      <Card>
+        <CardHeader>
+          <h3 className="text-xl font-semibold">📝 Informations</h3>
+        </CardHeader>
+        <CardBody className="space-y-2">
+          <div>
+            <span className="font-semibold">Auteur:</span> LastBrain Team
+          </div>
+          <div>
+            <span className="font-semibold">Package:</span>{" "}
+            @lastbrain/module-auth
+          </div>
+          <div>
+            <span className="font-semibold">Dernière mise à jour:</span> 21
+            novembre 2025
+          </div>
+        </CardBody>
+      </Card>
+
+      {/* Pages disponibles */}
+      <Card>
+        <CardHeader>
+          <h3 className="text-xl font-semibold">📄 Pages Disponibles</h3>
+        </CardHeader>
+        <CardBody className="space-y-3">
+          <div>
+            <h4 className="font-semibold mb-2">Pages Publiques</h4>
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <Chip size="sm" color="success" variant="flat">
+                  GET
+                </Chip>
+                <code className="text-sm">/signin</code>
+                <span className="text-slate-600 dark:text-slate-400">
+                  - Connexion
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Chip size="sm" color="success" variant="flat">
+                  GET
+                </Chip>
+                <code className="text-sm">/signup</code>
+                <span className="text-slate-600 dark:text-slate-400">
+                  - Inscription
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Chip size="sm" color="success" variant="flat">
+                  GET
+                </Chip>
+                <code className="text-sm">/reset-password</code>
+                <span className="text-slate-600 dark:text-slate-400">
+                  - Réinitialisation mot de passe
+                </span>
+              </div>
+            </div>
+          </div>
+          <div>
+            <h4 className="font-semibold mb-2">Pages Protégées (Auth)</h4>
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <Chip size="sm" color="primary" variant="flat">
+                  GET
+                </Chip>
+                <code className="text-sm">/auth/dashboard</code>
+                <span className="text-slate-600 dark:text-slate-400">
+                  - Tableau de bord
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Chip size="sm" color="primary" variant="flat">
+                  GET
+                </Chip>
+                <code className="text-sm">/auth/profile</code>
+                <span className="text-slate-600 dark:text-slate-400">
+                  - Profil utilisateur
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Chip size="sm" color="primary" variant="flat">
+                  GET
+                </Chip>
+                <code className="text-sm">/auth/reglage</code>
+                <span className="text-slate-600 dark:text-slate-400">
+                  - Paramètres
+                </span>
+              </div>
+            </div>
+          </div>
+          <div>
+            <h4 className="font-semibold mb-2">Pages Admin</h4>
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <Chip size="sm" color="danger" variant="flat">
+                  GET
+                </Chip>
+                <code className="text-sm">/admin/users</code>
+                <span className="text-slate-600 dark:text-slate-400">
+                  - Gestion des utilisateurs
+                </span>
+              </div>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+
+      {/* Routes API */}
+      <Card>
+        <CardHeader>
+          <h3 className="text-xl font-semibold">🔌 Routes API</h3>
+        </CardHeader>
+        <CardBody className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Chip size="sm" color="warning" variant="flat">
+              POST
+            </Chip>
+            <code className="text-sm">/api/auth/signin</code>
+            <span className="text-slate-600 dark:text-slate-400">
+              - Authentification
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Chip size="sm" color="warning" variant="flat">
+              POST
+            </Chip>
+            <code className="text-sm">/api/auth/signup</code>
+            <span className="text-slate-600 dark:text-slate-400">
+              - Création de compte
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Chip size="sm" color="warning" variant="flat">
+              POST
+            </Chip>
+            <code className="text-sm">/api/auth/signout</code>
+            <span className="text-slate-600 dark:text-slate-400">
+              - Déconnexion
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Chip size="sm" color="warning" variant="flat">
+              POST
+            </Chip>
+            <code className="text-sm">/api/auth/reset-password</code>
+            <span className="text-slate-600 dark:text-slate-400">
+              - Réinitialisation
+            </span>
+          </div>
+        </CardBody>
+      </Card>
+
+      {/* Structure */}
+      <Card>
+        <CardHeader>
+          <h3 className="text-xl font-semibold">📁 Structure</h3>
+        </CardHeader>
+        <CardBody>
+          <Snippet
+            symbol=""
+            color="default"
+            size="sm"
+            hideSymbol
+            hideCopyButton
+          >
+            <div className="flex flex-col gap-1 text-xs font-mono">
+              <span>module-auth/</span>
+              <span>├── src/</span>
+              <span>│ ├── web/</span>
+              <span>│ │ ├── signin/</span>
+              <span>│ │ ├── signup/</span>
+              <span>│ │ ├── dashboard/</span>
+              <span>│ │ ├── profile/</span>
+              <span>│ │ └── reglage/</span>
+              <span>│ ├── api/</span>
+              <span>│ │ ├── signin.ts</span>
+              <span>│ │ ├── signup.ts</span>
+              <span>│ │ ├── signout.ts</span>
+              <span>│ │ └── reset-password.ts</span>
+              <span>│ ├── components/</span>
+              <span>│ │ └── Doc.tsx</span>
+              <span>│ └── auth.build.config.ts</span>
+              <span>└── supabase/</span>
+              <span> └── migrations/</span>
+              <span> └── 20251112000000_user_init.sql</span>
+            </div>
+          </Snippet>
+        </CardBody>
+      </Card>
+
+      {/* Tables de données */}
+      <Card>
+        <CardHeader>
+          <h3 className="text-xl font-semibold">🗄️ Tables de Données</h3>
+        </CardHeader>
+        <CardBody className="space-y-4">
+          <TableStructure
+            tableName="user_profil"
+            title="user_profil"
+            description="Profil étendu des utilisateurs (prénom, nom, téléphone, avatar, bio, etc.)"
+          />
+          <TableStructure
+            tableName="user_address"
+            title="user_address"
+            description="Adresses des utilisateurs (livraison, facturation)"
+          />
+          <TableStructure
+            tableName="user_notifications"
+            title="user_notifications"
+            description="Préférences de notifications (email, SMS, push)"
+          />
+        </CardBody>
+      </Card>
+
+      {/* Installation */}
+      <Card>
+        <CardHeader>
+          <h3 className="text-xl font-semibold">📦 Installation</h3>
+        </CardHeader>
+        <CardBody className="space-y-4">
+          <div className="flex flex-col gap-2">
+            <Snippet symbol="" color="default" size="sm">
+              pnpm lastbrain add-module auth
+            </Snippet>
+            <Snippet symbol="" color="default" size="sm">
+              pnpm build:modules
+            </Snippet>
+            <Snippet symbol="" color="default" size="sm">
+              supabase migration up
+            </Snippet>
+          </div>
+
+          {/* Danger Zone */}
+          <div className="border-2 border-danger rounded-lg p-4 mt-6">
+            <h4 className="text-lg font-semibold text-danger mb-3">
+              ⚠️ Danger Zone
+            </h4>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">
+              La suppression du module supprimera toutes les pages, routes API
+              et migrations associées. Cette action est irréversible.
+            </p>
+            <div className="flex flex-col gap-2">
+              <Snippet symbol="" color="danger" size="sm">
+                pnpm lastbrain remove-module auth
+              </Snippet>
+              <Snippet symbol="" color="danger" size="sm">
+                pnpm build:modules
+              </Snippet>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+
+      {/* Utilisation */}
+      <Card>
+        <CardHeader>
+          <h3 className="text-xl font-semibold">💡 Utilisation</h3>
+        </CardHeader>
+        <CardBody className="space-y-3">
+          <div>
+            <h4 className="font-semibold mb-2">Hooks disponibles</h4>
+            <Snippet symbol="" color="default" size="sm">
+              import {"{ useAuthSession }"} from "@lastbrain/module-auth";
+            </Snippet>
+          </div>
+          <div>
+            <h4 className="font-semibold mb-2 mt-4">Exemple d'utilisation</h4>
+            <Snippet symbol="" color="default" size="sm" hideSymbol>
+              <div className="flex flex-col gap-1">
+                <span>const {"{ session, user }"} = useAuthSession();</span>
+                <span>
+                  if (!session) return &lt;p&gt;Non connecté&lt;/p&gt;;
+                </span>
+                <span>
+                  return &lt;div&gt;Bonjour {"{user.email}"}&lt;/div&gt;;
+                </span>
+              </div>
+            </Snippet>
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+// Client Components uniquement
+export { SignInPage } from "./web/public/SignInPage.js";
+export { SignUpPage } from "./web/public/SignUpPage.js";
+export { ResetPassword } from "./web/public/ResetPassword.js";
+export { DashboardPage } from "./web/auth/dashboard.js";
+export { ProfilePage } from "./web/auth/profile.js";
+export { ReglagePage } from "./web/auth/reglage.js";
+export { AdminUsersPage } from "./web/admin/users.js";
+// Documentation
+export { AuthModuleDoc } from "./components/Doc.js";
+// Configuration de build (utilisée par les scripts)
+export { default as authBuildConfig } from "./auth.build.config.js";

package/src/server.ts

@@ -0,0 +1,2 @@
+// Server-only exports (Route Handlers, Server Actions, etc.)
+export { POST as signInApi } from "./api/public/signin.js";

package/src/web/admin/users.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Spinner,
+  Chip,
+  Input,
+  Button,
+  Pagination,
+  Avatar,
+  addToast,
+} from "@lastbrain/ui";
+import { Users, Search, RefreshCw } from "lucide-react";
+
+interface User {
+  id: string;
+  email: string;
+  created_at: string;
+  profile: {
+    first_name?: string;
+    last_name?: string;
+    avatar_url?: string;
+    company?: string;
+    location?: string;
+  };
+}
+
+interface PaginationData {
+  page: number;
+  per_page: number;
+  total: number;
+  total_pages: number;
+}
+
+export function AdminUsersPage() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [pagination, setPagination] = useState<PaginationData>({
+    page: 1,
+    per_page: 20,
+    total: 0,
+    total_pages: 0,
+  });
+
+  useEffect(() => {
+    fetchUsers();
+  }, [pagination.page]);
+
+  const fetchUsers = async () => {
+    try {
+      setIsLoading(true);
+      const params = new URLSearchParams({
+        page: pagination.page.toString(),
+        per_page: pagination.per_page.toString(),
+      });
+
+      if (searchQuery) {
+        params.append("search", searchQuery);
+      }
+
+      const response = await fetch(`/api/admin/users?${params}`);
+
+      if (response.status === 403) {
+        setError("You don't have permission to access this page");
+        addToast({
+          title: "Access Denied",
+          description: "Superadmin access required",
+          color: "danger",
+        });
+        return;
+      }
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch users");
+      }
+
+      const result = await response.json();
+      setUsers(result.data || []);
+      if (result.pagination) {
+        setPagination(result.pagination);
+      }
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+      addToast({
+        title: "Error",
+        description: "Failed to load users",
+        color: "danger",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSearch = () => {
+    setPagination((prev) => ({ ...prev, page: 1 }));
+    fetchUsers();
+  };
+
+  const handlePageChange = (page: number) => {
+    setPagination((prev) => ({ ...prev, page }));
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  };
+
+  if (error && users.length === 0) {
+    return (
+      <div className="pt-12 pb-12 max-w-7xl mx-auto px-4">
+        <Card>
+          <CardBody>
+            <p className="text-danger">{error}</p>
+          </CardBody>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-12 pb-12 max-w-7xl mx-auto px-4">
+      <div className="flex items-center gap-2 mb-8">
+        <Users className="w-8 h-8" />
+        <h1 className="text-3xl font-bold">User Management</h1>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex flex-col md:flex-row gap-4 w-full">
+            <div className="flex gap-2 flex-1">
+              <Input
+                placeholder="Search by email or name..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onKeyPress={(e) => {
+                  if (e.key === "Enter") {
+                    handleSearch();
+                  }
+                }}
+                startContent={<Search className="w-4 h-4 text-default-400" />}
+                className="flex-1"
+              />
+              <Button
+                color="primary"
+                onPress={handleSearch}
+                isDisabled={isLoading}
+              >
+                Search
+              </Button>
+            </div>
+            <Button
+              variant="flat"
+              onPress={fetchUsers}
+              isDisabled={isLoading}
+              startContent={<RefreshCw className="w-4 h-4" />}
+            >
+              Refresh
+            </Button>
+          </div>
+        </CardHeader>
+        <CardBody>
+          {isLoading ? (
+            <div className="flex justify-center items-center py-12">
+              <Spinner size="lg" label="Loading users..." />
+            </div>
+          ) : users.length === 0 ? (
+            <div className="text-center py-12 text-default-500">
+              No users found
+            </div>
+          ) : (
+            <>
+              <Table aria-label="Users table">
+                <TableHeader>
+                  <TableColumn>USER</TableColumn>
+                  <TableColumn>EMAIL</TableColumn>
+                  <TableColumn>COMPANY</TableColumn>
+                  <TableColumn>LOCATION</TableColumn>
+                  <TableColumn>CREATED</TableColumn>
+                  <TableColumn>STATUS</TableColumn>
+                </TableHeader>
+                <TableBody>
+                  {users.map((user) => {
+                    const fullName =
+                      user.profile?.first_name && user.profile?.last_name
+                        ? `${user.profile.first_name} ${user.profile.last_name}`
+                        : "N/A";
+
+                    return (
+                      <TableRow key={user.id}>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <Avatar
+                              src={user.profile?.avatar_url}
+                              name={fullName}
+                              size="sm"
+                            />
+                            <span className="text-small font-medium">
+                              {fullName}
+                            </span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-small">{user.email}</span>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-small">
+                            {user.profile?.company || "-"}
+                          </span>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-small">
+                            {user.profile?.location || "-"}
+                          </span>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-small">
+                            {formatDate(user.created_at)}
+                          </span>
+                        </TableCell>
+                        <TableCell>
+                          <Chip color="success" size="sm" variant="flat">
+                            Active
+                          </Chip>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+
+              {pagination.total_pages > 1 && (
+                <div className="flex justify-center mt-4">
+                  <Pagination
+                    total={pagination.total_pages}
+                    page={pagination.page}
+                    onChange={handlePageChange}
+                    showControls
+                  />
+                </div>
+              )}
+
+              <div className="mt-4 text-small text-default-500 text-center">
+                Showing {users.length} of {pagination.total} users
+              </div>
+            </>
+          )}
+        </CardBody>
+      </Card>
+    </div>
+  );
+}