@lastbrain/module-auth 2.0.13 → 2.0.19

package/src/web/admin/users.tsx

@@ -19,7 +19,8 @@ import {
   Avatar,
 } from "@lastbrain/ui";
 import { Search, RefreshCw, Eye, Users2 } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { useModuleTranslation } from "@lastbrain/core";
+import { useLocalizedRouter } from "@lastbrain/core";
 
 interface User {
   id: string;
@@ -44,7 +45,8 @@ interface PaginationData {
 }
 
 export function AdminUsersPage() {
-  const router = useRouter();
+  const router = useLocalizedRouter();
+  const t = useModuleTranslation("auth");
   const searchInputId = useId();
 
   const [users, setUsers] = useState<User[]>([]);
@@ -144,7 +146,9 @@ export function AdminUsersPage() {
     <div className="pt-12 pb-12 max-w-7xl mx-auto px-4">
       <div className="flex items-center gap-2 mb-8">
         <Users2 className="w-8 h-8" />
-        <h1 className="text-3xl font-bold">User Management</h1>
+        <h1 className="text-3xl font-bold">
+          {t("users.title") || "User Management"}
+        </h1>
       </div>
 
       <Card>
@@ -153,7 +157,9 @@ export function AdminUsersPage() {
             <div className="flex gap-2 flex-1">
               <Input
                 id={searchInputId}
-                placeholder="Search by email or name..."
+                placeholder={
+                  t("users.search_placeholder") || "Search by email or name..."
+                }
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 onKeyPress={(e) => {
@@ -169,7 +175,7 @@ export function AdminUsersPage() {
                 onPress={handleSearch}
                 isDisabled={isLoading}
               >
-                Search
+                {t("users.search_button") || "Search"}
               </Button>
             </div>
             <Button
@@ -178,29 +184,43 @@ export function AdminUsersPage() {
               isDisabled={isLoading}
               startContent={<RefreshCw className="w-4 h-4" />}
             >
-              Refresh
+              {t("users.refresh_button") || "Refresh"}
             </Button>
           </div>
         </CardHeader>
         <CardBody>
           {isLoading ? (
             <div className="flex justify-center items-center py-12">
-              <Spinner size="lg" label="Loading users..." />
+              <Spinner
+                size="lg"
+                label={t("users.loading_users") || "Loading users..."}
+              />
             </div>
           ) : users.length === 0 ? (
             <div className="text-center py-12 text-default-500">
-              No users found
+              {t("users.no_users_found") || "No users found"}
             </div>
           ) : (
             <>
-              <Table isStriped aria-label="Users table">
+              <Table
+                isStriped
+                aria-label={t("users.table_aria_label") || "Users table"}
+              >
                 <TableHeader>
-                  <TableColumn>USER</TableColumn>
-                  <TableColumn>EMAIL</TableColumn>
-                  <TableColumn>ROLE</TableColumn>
-                  <TableColumn>LAST SIGN IN</TableColumn>
-                  <TableColumn>CREATED</TableColumn>
-                  <TableColumn>ACTIONS</TableColumn>
+                  <TableColumn>{t("users.column_user") || "USER"}</TableColumn>
+                  <TableColumn>
+                    {t("users.column_email") || "EMAIL"}
+                  </TableColumn>
+                  <TableColumn>{t("users.column_role") || "ROLE"}</TableColumn>
+                  <TableColumn>
+                    {t("users.column_last_sign_in") || "LAST SIGN IN"}
+                  </TableColumn>
+                  <TableColumn>
+                    {t("users.column_created") || "CREATED"}
+                  </TableColumn>
+                  <TableColumn>
+                    {t("users.column_actions") || "ACTIONS"}
+                  </TableColumn>
                 </TableHeader>
                 <TableBody>
                   {users.map((user) => {
@@ -241,7 +261,7 @@ export function AdminUsersPage() {
                           <span className="text-small">
                             {user.last_sign_in_at
                               ? formatDate(user.last_sign_in_at)
-                              : "Jamais"}
+                              : t("users.never") || "Jamais"}
                           </span>
                         </TableCell>
                         <TableCell>
@@ -257,7 +277,7 @@ export function AdminUsersPage() {
                             onPress={() => handleViewUser(user.id)}
                             startContent={<Eye size={14} />}
                           >
-                            Voir
+                            {t("users.view_button") || "Voir"}
                           </Button>
                         </TableCell>
                       </TableRow>
@@ -278,7 +298,10 @@ export function AdminUsersPage() {
               )}
 
               <div className="mt-4 text-small text-default-500 text-center">
-                Showing {users.length} of {pagination.total} users
+                {t("users.showing_results")
+                  ?.replace("{{count}}", users.length.toString())
+                  .replace("{{total}}", pagination.total.toString()) ||
+                  `Showing ${users.length} of ${pagination.total} users`}
               </div>
             </>
           )}

package/src/web/auth/dashboard.tsx

@@ -12,6 +12,7 @@ import {
 } from "@lastbrain/ui";
 
 import { User, Mail, Calendar, Shield } from "lucide-react";
+import { useModuleTranslation } from "@lastbrain/core";
 
 interface UserData {
   id: string;
@@ -28,6 +29,7 @@ interface UserData {
 }
 
 export function DashboardPage() {
+  const t = useModuleTranslation("auth");
   const [userData, setUserData] = useState<UserData | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -59,7 +61,9 @@ export function DashboardPage() {
       <div className="flex justify-center items-center min-h-[400px]">
         <Spinner color="primary" size="lg">
           {" "}
-          <span className="text-xs text-default-700">Loading dashboard...</span>
+          <span className="text-xs text-default-700">
+            {t("dashboard.loading") || "Loading dashboard..."}
+          </span>
         </Spinner>
       </div>
     );
@@ -70,7 +74,9 @@ export function DashboardPage() {
       <div className="pt-12">
         <Card className="max-w-2xl mx-auto">
           <CardBody>
-            <p className="text-danger">Error: {error}</p>
+            <p className="text-danger">
+              {t("dashboard.error") || "Error"}: {error}
+            </p>
           </CardBody>
         </Card>
       </div>
@@ -88,7 +94,9 @@ export function DashboardPage() {
 
   return (
     <div className="pt-12 pb-12 max-w-6xl mx-auto px-4">
-      <h1 className="text-3xl font-bold mb-8">Dashboard</h1>
+      <h1 className="text-3xl font-bold mb-8">
+        {t("dashboard.title") || "Dashboard"}
+      </h1>
 
       <div className="grid gap-6 md:grid-cols-2">
         {/* Profile Summary Card */}
@@ -115,7 +123,7 @@ export function DashboardPage() {
               <div className="flex items-center gap-2">
                 <Calendar className="w-4 h-4 text-default-400" />
                 <span className="text-small">
-                  Member since{" "}
+                  {t("dashboard.member_since") || "Member since"}{" "}
                   {new Date(userData.created_at).toLocaleDateString()}
                 </span>
               </div>
@@ -132,25 +140,33 @@ export function DashboardPage() {
         {/* Account Status Card */}
         <Card>
           <CardHeader>
-            <h3 className="text-lg font-semibold">Account Status</h3>
+            <h3 className="text-lg font-semibold">
+              {t("dashboard.account_status") || "Account Status"}
+            </h3>
           </CardHeader>
           <Divider />
           <CardBody>
             <div className="space-y-4">
               <div className="flex justify-between items-center">
-                <span className="text-small">Status</span>
+                <span className="text-small">
+                  {t("dashboard.status") || "Status"}
+                </span>
                 <Chip color="success" size="sm" variant="flat">
-                  Active
+                  {t("dashboard.active") || "Active"}
                 </Chip>
               </div>
               <div className="flex justify-between items-center">
-                <span className="text-small">Profile</span>
+                <span className="text-small">
+                  {t("dashboard.profile") || "Profile"}
+                </span>
                 <Chip
                   color={userData.profile ? "success" : "warning"}
                   size="sm"
                   variant="flat"
                 >
-                  {userData.profile ? "Complete" : "Incomplete"}
+                  {userData.profile
+                    ? t("dashboard.complete") || "Complete"
+                    : t("dashboard.incomplete") || "Incomplete"}
                 </Chip>
               </div>
             </div>

package/src/web/auth/folder.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import { Card, CardBody, Spinner } from "@lastbrain/ui";
 import { FileManager } from "@lastbrain/ui";
+import { useModuleTranslation } from "@lastbrain/core";
 
 interface UserData {
   id: string;
@@ -19,6 +20,7 @@ interface UserData {
 }
 
 export function FolderPage() {
+  const t = useModuleTranslation("auth");
   const [userData, setUserData] = useState<UserData | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -50,7 +52,9 @@ export function FolderPage() {
       <div className="flex justify-center items-center min-h-[400px]">
         <Spinner color="primary" size="lg">
           {" "}
-          <span className="text-xs text-default-700">Loading folder...</span>
+          <span className="text-xs text-default-700">
+            {t("folder.loading") || "Loading folder..."}
+          </span>
         </Spinner>
       </div>
     );
@@ -61,7 +65,9 @@ export function FolderPage() {
       <div className="pt-12">
         <Card className="max-w-2xl mx-auto">
           <CardBody>
-            <p className="text-danger">Error: {error}</p>
+            <p className="text-danger">
+              {t("folder.error") || "Error"}: {error}
+            </p>
           </CardBody>
         </Card>
       </div>
@@ -74,7 +80,9 @@ export function FolderPage() {
 
   return (
     <div className="pt-4 pb-12 max-w-8xl mx-auto px-4">
-      <h1 className="text-3xl font-bold mb-8">Dossier</h1>
+      <h1 className="text-3xl font-bold mb-8">
+        {t("folder.title") || "Dossier"}
+      </h1>
 
       <FileManager
         bucket="app"

package/src/web/auth/profile.tsx

@@ -14,6 +14,7 @@ import {
   AvatarUploader,
 } from "@lastbrain/ui";
 import { Save, User } from "lucide-react";
+import { useModuleTranslation } from "@lastbrain/core";
 import { uploadFile, deleteFilesWithPrefix } from "../../api/storage";
 import { supabaseBrowserClient } from "@lastbrain/core";
 
@@ -40,6 +41,7 @@ interface UserMetadata {
 }
 
 export function ProfilePage() {
+  const t = useModuleTranslation("auth");
   const [profile, setProfile] = useState<ProfileData>({});
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
@@ -106,16 +108,16 @@ export function ProfilePage() {
       }
 
       addToast({
-        title: "Success",
-        description: "Profile updated successfully",
+        title: t("profile.success") || "Success",
+        description: t("profile.updated") || "Profile updated successfully",
         color: "success",
       });
     } catch (err) {
       console.error("Error updating profile:", err);
       setError(err instanceof Error ? err.message : "An error occurred");
       addToast({
-        title: "Error",
-        description: "Failed to update profile",
+        title: t("profile.error") || "Error",
+        description: t("profile.update_failed") || "Failed to update profile",
         color: "danger",
       });
     } finally {
@@ -245,7 +247,10 @@ export function ProfilePage() {
   if (isLoading) {
     return (
       <div className="flex justify-center items-center min-h-[400px]">
-        <Spinner size="lg" label="Loading profile..." />
+        <Spinner
+          size="lg"
+          label={t("profile.loading") || "Loading profile..."}
+        />
       </div>
     );
   }
@@ -293,7 +298,9 @@ export function ProfilePage() {
           </div>
           <div className="flex items-center gap-2 mb-4">
             <User className="w-8 h-8" />
-            <h1 className="text-3xl font-bold">Edit Profile</h1>
+            <h1 className="text-3xl font-bold">
+              {t("profile.edit") || "Edit Profile"}
+            </h1>
           </div>
 
           {/* </CardBody>
@@ -302,34 +309,45 @@ export function ProfilePage() {
           {/* Personal Information */}
           <Card>
             <CardHeader>
-              <h3 className="text-lg font-semibold">Personal Information</h3>
+              <h3 className="text-lg font-semibold">
+                {t("profile.personal_info") || "Personal Information"}
+              </h3>
             </CardHeader>
             <Divider />
             <CardBody>
               <div className="grid gap-4 md:grid-cols-2">
                 <Input
-                  label="First Name"
-                  placeholder="Enter your first name"
+                  label={t("profile.first_name") || "First Name"}
+                  placeholder={
+                    t("profile.first_name_placeholder") ||
+                    "Enter your first name"
+                  }
                   value={profile.first_name || ""}
                   onChange={(e) => handleChange("first_name", e.target.value)}
                 />
                 <Input
-                  label="Last Name"
-                  placeholder="Enter your last name"
+                  label={t("profile.last_name") || "Last Name"}
+                  placeholder={
+                    t("profile.last_name_placeholder") || "Enter your last name"
+                  }
                   value={profile.last_name || ""}
                   onChange={(e) => handleChange("last_name", e.target.value)}
                 />
                 <Input
-                  label="Phone"
-                  placeholder="Enter your phone number"
+                  label={t("profile.phone") || "Phone"}
+                  placeholder={
+                    t("profile.phone_placeholder") || "Enter your phone number"
+                  }
                   type="tel"
                   value={profile.phone || ""}
                   onChange={(e) => handleChange("phone", e.target.value)}
                   className="md:col-span-2"
                 />
                 <Textarea
-                  label="Bio"
-                  placeholder="Tell us about yourself"
+                  label={t("profile.bio") || "Bio"}
+                  placeholder={
+                    t("profile.bio_placeholder") || "Tell us about yourself"
+                  }
                   value={profile.bio || ""}
                   onChange={(e) => handleChange("bio", e.target.value)}
                   minRows={3}
@@ -343,28 +361,35 @@ export function ProfilePage() {
           <Card>
             <CardHeader>
               <h3 className="text-lg font-semibold">
-                Professional Information
+                {t("profile.professional_info") || "Professional Information"}
               </h3>
             </CardHeader>
             <Divider />
             <CardBody>
               <div className="grid gap-4 md:grid-cols-2">
                 <Input
-                  label="Company"
-                  placeholder="Enter your company name"
+                  label={t("profile.company") || "Company"}
+                  placeholder={
+                    t("profile.company_placeholder") ||
+                    "Enter your company name"
+                  }
                   value={profile.company || ""}
                   onChange={(e) => handleChange("company", e.target.value)}
                 />
                 <Input
-                  label="Website"
-                  placeholder="https://example.com"
+                  label={t("profile.website") || "Website"}
+                  placeholder={
+                    t("profile.website_placeholder") || "https://example.com"
+                  }
                   type="url"
                   value={profile.website || ""}
                   onChange={(e) => handleChange("website", e.target.value)}
                 />
                 <Input
-                  label="Location"
-                  placeholder="City, Country"
+                  label={t("profile.location") || "Location"}
+                  placeholder={
+                    t("profile.location_placeholder") || "City, Country"
+                  }
                   value={profile.location || ""}
                   onChange={(e) => handleChange("location", e.target.value)}
                   className="md:col-span-2"
@@ -376,20 +401,27 @@ export function ProfilePage() {
           {/* Preferences */}
           <Card>
             <CardHeader>
-              <h3 className="text-lg font-semibold">Preferences</h3>
+              <h3 className="text-lg font-semibold">
+                {t("profile.preferences") || "Preferences"}
+              </h3>
             </CardHeader>
             <Divider />
             <CardBody>
               <div className="grid gap-4 md:grid-cols-2">
                 <Input
-                  label="Language"
-                  placeholder="en, fr, es..."
+                  label={t("profile.language") || "Language"}
+                  placeholder={
+                    t("profile.language_placeholder") || "en, fr, es..."
+                  }
                   value={profile.language || ""}
                   onChange={(e) => handleChange("language", e.target.value)}
                 />
                 <Input
-                  label="Timezone"
-                  placeholder="Europe/Paris, America/New_York..."
+                  label={t("profile.timezone") || "Timezone"}
+                  placeholder={
+                    t("profile.timezone_placeholder") ||
+                    "Europe/Paris, America/New_York..."
+                  }
                   value={profile.timezone || ""}
                   onChange={(e) => handleChange("timezone", e.target.value)}
                 />
@@ -405,7 +437,7 @@ export function ProfilePage() {
               onPress={() => fetchProfile()}
               isDisabled={isSaving}
             >
-              Cancel
+              {t("profile.cancel_button") || "Cancel"}
             </Button>
             <Button
               type="submit"
@@ -413,7 +445,9 @@ export function ProfilePage() {
               isLoading={isSaving}
               startContent={!isSaving && <Save className="w-4 h-4" />}
             >
-              {isSaving ? "Saving..." : "Save Changes"}
+              {isSaving
+                ? t("profile.saving") || "Saving..."
+                : t("profile.save_button") || "Save Changes"}
             </Button>
           </div>
         </div>

package/src/web/auth/reglage.tsx

@@ -14,6 +14,7 @@ import {
   addToast,
 } from "@lastbrain/ui";
 import { Settings, Save } from "lucide-react";
+import { useModuleTranslation } from "@lastbrain/core";
 
 interface UserPreferences {
   email_notifications?: boolean;
@@ -31,6 +32,7 @@ interface ProfileData {
 }
 
 export function ReglagePage() {
+  const t = useModuleTranslation("auth");
   const [preferences, setPreferences] = useState<UserPreferences>({
     email_notifications: true,
     push_notifications: false,
@@ -103,15 +105,15 @@ export function ReglagePage() {
       }
 
       addToast({
-        title: "Success",
-        description: "Settings updated successfully",
+        title: t("settings.success") || "Success",
+        description: t("settings.updated") || "Settings updated successfully",
         color: "success",
       });
     } catch (err) {
       console.error("Error updating settings:", err);
       addToast({
-        title: "Error",
-        description: "Failed to update settings",
+        title: t("settings.error") || "Error",
+        description: t("settings.update_failed") || "Failed to update settings",
         color: "danger",
       });
     } finally {
@@ -130,7 +132,10 @@ export function ReglagePage() {
   if (isLoading) {
     return (
       <div className="flex justify-center items-center min-h-[400px]">
-        <Spinner size="lg" label="Loading settings..." />
+        <Spinner
+          size="lg"
+          label={t("settings.loading") || "Loading settings..."}
+        />
       </div>
     );
   }
@@ -139,23 +144,30 @@ export function ReglagePage() {
     <div className="pt-12 pb-12 max-w-4xl mx-auto px-4">
       <div className="flex items-center gap-2 mb-8">
         <Settings className="w-8 h-8" />
-        <h1 className="text-3xl font-bold">Account Settings</h1>
+        <h1 className="text-3xl font-bold">
+          {t("settings.account") || "Account Settings"}
+        </h1>
       </div>
 
       <div className="space-y-6">
         {/* Notifications */}
         <Card>
           <CardHeader>
-            <h3 className="text-lg font-semibold">Notifications</h3>
+            <h3 className="text-lg font-semibold">
+              {t("settings.notifications") || "Notifications"}
+            </h3>
           </CardHeader>
           <Divider />
           <CardBody>
             <div className="space-y-4">
               <div className="flex justify-between items-center">
                 <div>
-                  <p className="font-medium">Email Notifications</p>
+                  <p className="font-medium">
+                    {t("settings.email_notifications") || "Email Notifications"}
+                  </p>
                   <p className="text-small text-default-500">
-                    Receive email notifications for important updates
+                    {t("settings.email_notifications_desc") ||
+                      "Receive email notifications for important updates"}
                   </p>
                 </div>
                 <Switch
@@ -168,9 +180,12 @@ export function ReglagePage() {
               <Divider />
               <div className="flex justify-between items-center">
                 <div>
-                  <p className="font-medium">Push Notifications</p>
+                  <p className="font-medium">
+                    {t("settings.push_notifications") || "Push Notifications"}
+                  </p>
                   <p className="text-small text-default-500">
-                    Receive push notifications in your browser
+                    {t("settings.push_notifications_desc") ||
+                      "Receive push notifications in your browser"}
                   </p>
                 </div>
                 <Switch
@@ -183,9 +198,12 @@ export function ReglagePage() {
               <Divider />
               <div className="flex justify-between items-center">
                 <div>
-                  <p className="font-medium">Marketing Emails</p>
+                  <p className="font-medium">
+                    {t("settings.marketing_emails") || "Marketing Emails"}
+                  </p>
                   <p className="text-small text-default-500">
-                    Receive emails about new features and updates
+                    {t("settings.marketing_emails_desc") ||
+                      "Receive emails about new features and updates"}
                   </p>
                 </div>
                 <Switch
@@ -202,19 +220,25 @@ export function ReglagePage() {
         {/* Appearance */}
         <Card>
           <CardHeader>
-            <h3 className="text-lg font-semibold">Appearance</h3>
+            <h3 className="text-lg font-semibold">
+              {t("settings.appearance") || "Appearance"}
+            </h3>
           </CardHeader>
           <Divider />
           <CardBody>
             <Select
-              label="Theme"
-              placeholder="Select a theme"
+              label={t("settings.theme") || "Theme"}
+              placeholder={t("settings.select_theme") || "Select a theme"}
               selectedKeys={preferences.theme ? [preferences.theme] : []}
               onChange={(e) => handleSelect("theme", e.target.value)}
             >
-              <SelectItem key="light">Light</SelectItem>
-              <SelectItem key="dark">Dark</SelectItem>
-              <SelectItem key="system">System</SelectItem>
+              <SelectItem key="light">
+                {t("settings.light") || "Light"}
+              </SelectItem>
+              <SelectItem key="dark">{t("settings.dark") || "Dark"}</SelectItem>
+              <SelectItem key="system">
+                {t("settings.system") || "System"}
+              </SelectItem>
             </Select>
           </CardBody>
         </Card>