@lastbrain/module-auth 2.0.19 → 2.0.31

package/src/web/auth/profile.tsx

@@ -13,14 +13,15 @@ import {
   addToast,
   AvatarUploader,
 } from "@lastbrain/ui";
-import { Save, User } from "lucide-react";
-import { useModuleTranslation } from "@lastbrain/core";
+import { Check, Save, User, XCircle } from "lucide-react";
+import { logger, useModuleTranslation } from "@lastbrain/core";
 import { uploadFile, deleteFilesWithPrefix } from "../../api/storage";
 import { supabaseBrowserClient } from "@lastbrain/core";
 
 interface ProfileData {
   first_name?: string;
   last_name?: string;
+  username?: string;
   avatar_url?: string;
   bio?: string;
   phone?: string;
@@ -46,6 +47,12 @@ export function ProfilePage() {
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
   const [_error, setError] = useState<string | null>(null);
+  const [newEmail, setNewEmail] = useState("");
+  const [securityLoading, setSecurityLoading] = useState(false);
+  const [usernameAvailable, setUsernameAvailable] = useState<boolean | null>(
+    null
+  );
+  const [checkingUsername, setCheckingUsername] = useState(false);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [currentUser, setCurrentUser] = useState<any>(null);
 
@@ -61,14 +68,16 @@ export function ProfilePage() {
       } = await supabaseBrowserClient.auth.getUser();
       setCurrentUser(user);
     } catch (err) {
-      console.error("Error fetching current user:", err);
+      logger.error("Error fetching current user:", err);
     }
   };
 
   const fetchProfile = async () => {
     try {
       setIsLoading(true);
-      const response = await fetch("/api/auth/profile");
+      const response = await fetch("/api/auth/profile", {
+        credentials: "include",
+      });
 
       if (!response.ok) {
         throw new Error("Failed to fetch profile");
@@ -100,6 +109,7 @@ export function ProfilePage() {
         headers: {
           "Content-Type": "application/json",
         },
+        credentials: "include",
         body: JSON.stringify(profile),
       });
 
@@ -113,7 +123,7 @@ export function ProfilePage() {
         color: "success",
       });
     } catch (err) {
-      console.error("Error updating profile:", err);
+      logger.error("Error updating profile:", err);
       setError(err instanceof Error ? err.message : "An error occurred");
       addToast({
         title: t("profile.error") || "Error",
@@ -129,6 +139,115 @@ export function ProfilePage() {
     setProfile((prev) => ({ ...prev, [field]: value }));
   };
 
+  // Check username availability with debounce
+  useEffect(() => {
+    if (!profile.username?.trim()) {
+      setUsernameAvailable(null);
+      return;
+    }
+
+    const timeoutId = setTimeout(async () => {
+      setCheckingUsername(true);
+      if (!profile.username) {
+        setUsernameAvailable(null);
+        setCheckingUsername(false);
+        return;
+      }
+      try {
+        const usernameLower = profile.username.toLowerCase();
+        const response = await fetch(
+          `/api/auth/check-username?username=${encodeURIComponent(usernameLower)}&owner_id=${currentUser?.id || ""}`
+        );
+
+        if (response.ok) {
+          const { available } = await response.json();
+          setUsernameAvailable(available);
+        }
+      } catch (error) {
+        logger.error("Error checking username:", error);
+      } finally {
+        setCheckingUsername(false);
+      }
+    }, 500);
+
+    return () => clearTimeout(timeoutId);
+  }, [profile.username, currentUser?.id]);
+
+  const handleSendResetLink = async () => {
+    try {
+      setSecurityLoading(true);
+      const response = await fetch("/api/auth/account/reset-password", {
+        method: "POST",
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || "Erreur lors de l'envoi du lien");
+      }
+
+      addToast({
+        title: t("profile.security_reset_sent") || "Lien envoyé",
+        description:
+          t("profile.security_reset_desc") ||
+          "Vérifiez votre email pour réinitialiser votre mot de passe",
+        color: "success",
+      });
+    } catch (error: any) {
+      addToast({
+        title: t("profile.security_error") || "Erreur",
+        description: error?.message || "Impossible d'envoyer le lien",
+        color: "danger",
+      });
+    } finally {
+      setSecurityLoading(false);
+    }
+  };
+
+  const handleEmailChangeRequest = async () => {
+    if (!newEmail) {
+      addToast({
+        title: t("profile.security_error") || "Erreur",
+        description:
+          t("profile.security_email_required") || "Nouvel email requis",
+        color: "warning",
+      });
+      return;
+    }
+
+    try {
+      setSecurityLoading(true);
+      const response = await fetch("/api/auth/account/email-change", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ newEmail }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || "Erreur lors de l'envoi du lien");
+      }
+
+      addToast({
+        title:
+          t("profile.security_email_change_sent") || "Confirmation envoyée",
+        description:
+          t("profile.security_email_change_desc") ||
+          "Vérifiez le nouvel email pour confirmer le changement",
+        color: "success",
+      });
+    } catch (error: any) {
+      addToast({
+        title: t("profile.security_error") || "Erreur",
+        description: error?.message || "Impossible d'envoyer la confirmation",
+        color: "danger",
+      });
+    } finally {
+      setSecurityLoading(false);
+    }
+  };
+
   const handleAvatarUpload = async (files: {
     small: Blob;
     medium: Blob;
@@ -182,16 +301,17 @@ export function ProfilePage() {
         headers: {
           "Content-Type": "application/json",
         },
+        credentials: "include",
         body: JSON.stringify({
           avatar_url: `/avatar/${currentUser.id}_128_${version}.webp`,
         }),
       });
 
       if (!response.ok) {
-        console.error("Failed to update avatar_url in profile");
+        logger.error("Failed to update avatar_url in profile");
       }
     } catch (error) {
-      console.error("Error updating profile avatar_url:", error);
+      logger.error("Error updating profile avatar_url:", error);
     }
 
     // Update profile avatar_url locally
@@ -228,16 +348,17 @@ export function ProfilePage() {
         headers: {
           "Content-Type": "application/json",
         },
+        credentials: "include",
         body: JSON.stringify({
           avatar_url: null,
         }),
       });
 
       if (!response.ok) {
-        console.error("Failed to update avatar_url in profile");
+        logger.error("Failed to update avatar_url in profile");
       }
     } catch (error) {
-      console.error("Error updating profile avatar_url:", error);
+      logger.error("Error updating profile avatar_url:", error);
     }
 
     // Update profile locally
@@ -256,7 +377,7 @@ export function ProfilePage() {
   }
 
   return (
-    <div className="pt-12 pb-12 max-w-4xl mx-auto px-4">
+    <div className="md:pt-12 pb-12 max-w-2xl mx-auto md:px-4">
       <form onSubmit={handleSubmit}>
         <div className="space-y-6">
           {/* Avatar Section */}
@@ -343,6 +464,41 @@ export function ProfilePage() {
                   onChange={(e) => handleChange("phone", e.target.value)}
                   className="md:col-span-2"
                 />
+                <Input
+                  label="Username"
+                  placeholder="Enter your username"
+                  value={profile.username || ""}
+                  onChange={(e) => handleChange("username", e.target.value)}
+                  description="3-30 characters, alphanumeric, underscore or dash only"
+                  errorMessage={
+                    checkingUsername
+                      ? "Checking..."
+                      : usernameAvailable === false
+                        ? "Username already taken"
+                        : undefined
+                  }
+                  color={
+                    checkingUsername
+                      ? "default"
+                      : usernameAvailable === true
+                        ? "success"
+                        : usernameAvailable === false
+                          ? "danger"
+                          : "default"
+                  }
+                  className="md:col-span-2"
+                  endContent={
+                    checkingUsername ? (
+                      <Spinner size="sm" />
+                    ) : profile.username && profile.username.length > 0 ? (
+                      usernameAvailable === false ? (
+                        <XCircle className="w-4 h-4 text-danger" />
+                      ) : (
+                        <Check className="w-4 h-4 text-success" />
+                      )
+                    ) : null
+                  }
+                />
                 <Textarea
                   label={t("profile.bio") || "Bio"}
                   placeholder={
@@ -358,7 +514,7 @@ export function ProfilePage() {
           </Card>
 
           {/* Professional Information */}
-          <Card>
+          {/* <Card>
             <CardHeader>
               <h3 className="text-lg font-semibold">
                 {t("profile.professional_info") || "Professional Information"}
@@ -398,7 +554,7 @@ export function ProfilePage() {
             </CardBody>
           </Card>
 
-          {/* Preferences */}
+
           <Card>
             <CardHeader>
               <h3 className="text-lg font-semibold">
@@ -427,10 +583,68 @@ export function ProfilePage() {
                 />
               </div>
             </CardBody>
+          </Card> */}
+
+          {/* Security */}
+          <Card>
+            <CardHeader>
+              <h3 className="text-lg font-semibold">
+                {t("profile.security") || "Sécurité"}
+              </h3>
+            </CardHeader>
+            <Divider />
+            <CardBody className="space-y-4">
+              <div className="grid gap-4 md:grid-cols-2 items-center justify-center">
+                <Input
+                  label={t("profile.security_new_email") || "Nouvel email"}
+                  placeholder={
+                    t("profile.security_new_email_placeholder") ||
+                    "nouveau@email.com"
+                  }
+                  value={newEmail}
+                  onChange={(e) => setNewEmail(e.target.value)}
+                />
+                <Button
+                  onPress={handleEmailChangeRequest}
+                  color="secondary"
+                  size="lg"
+                  variant="flat"
+                  isLoading={securityLoading}
+                  className="w-full md:w-auto"
+                >
+                  {t("profile.security_email_change_btn") ||
+                    "Envoyer la confirmation"}
+                </Button>
+              </div>
+
+              <Divider className="my-2" />
+
+              <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+                <div>
+                  <h4 className="font-medium">
+                    {t("profile.security_reset_title") ||
+                      "Réinitialiser le mot de passe"}
+                  </h4>
+                  <p className="text-sm text-default-500">
+                    {t("profile.security_reset_help") ||
+                      "Nous enverrons un lien de réinitialisation à votre email"}
+                  </p>
+                </div>
+                <Button
+                  variant="flat"
+                  color="secondary"
+                  onPress={handleSendResetLink}
+                  isLoading={securityLoading}
+                  className="w-full md:w-auto"
+                >
+                  {t("profile.security_reset_btn") || "Envoyer le lien"}
+                </Button>
+              </div>
+            </CardBody>
           </Card>
 
           {/* Actions */}
-          <div className="flex justify-end gap-3">
+          <div className="flex justify-center gap-3">
             <Button
               type="button"
               variant="flat"

package/src/web/auth/reglage.tsx

@@ -14,7 +14,7 @@ import {
   addToast,
 } from "@lastbrain/ui";
 import { Settings, Save } from "lucide-react";
-import { useModuleTranslation } from "@lastbrain/core";
+import { logger, useModuleTranslation } from "@lastbrain/core";
 
 interface UserPreferences {
   email_notifications?: boolean;
@@ -51,7 +51,9 @@ export function ReglagePage() {
   const fetchSettings = async () => {
     try {
       setIsLoading(true);
-      const response = await fetch("/api/auth/profile");
+      const response = await fetch("/api/auth/profile", {
+        credentials: "include",
+      });
 
       if (!response.ok) {
         throw new Error("Failed to fetch settings");
@@ -68,10 +70,11 @@ export function ReglagePage() {
         }));
       }
     } catch (err) {
-      console.error("Error loading settings:", err);
+      logger.error("Error loading settings:", err);
       addToast({
-        title: "Error",
-        description: "Failed to load settings",
+        title: t("settings.load_error_title") || "Error",
+        description:
+          t("settings.load_error_description") || "Failed to load settings",
         color: "danger",
       });
     } finally {
@@ -88,6 +91,7 @@ export function ReglagePage() {
         headers: {
           "Content-Type": "application/json",
         },
+        credentials: "include",
         body: JSON.stringify({
           language: preferences.language,
           timezone: preferences.timezone,
@@ -109,8 +113,11 @@ export function ReglagePage() {
         description: t("settings.updated") || "Settings updated successfully",
         color: "success",
       });
+
+      // Si la langue a été modifiée, attendre la confirmation du serveur
+      // (localeUpdated) avant de forcer le reload complet.
     } catch (err) {
-      console.error("Error updating settings:", err);
+      logger.error("Error updating settings:", err);
       addToast({
         title: t("settings.error") || "Error",
         description: t("settings.update_failed") || "Failed to update settings",
@@ -141,7 +148,7 @@ export function ReglagePage() {
   }
 
   return (
-    <div className="pt-12 pb-12 max-w-4xl mx-auto px-4">
+    <div className="md:pt-12 pb-12 max-w-2xl mx-auto md:px-4">
       <div className="flex items-center gap-2 mb-8">
         <Settings className="w-8 h-8" />
         <h1 className="text-3xl font-bold">
@@ -246,53 +253,75 @@ export function ReglagePage() {
         {/* Language & Region */}
         <Card>
           <CardHeader>
-            <h3 className="text-lg font-semibold">Language & Region</h3>
+            <h3 className="text-lg font-semibold">
+              {t("settings.language_region") || "Language & Region"}
+            </h3>
           </CardHeader>
           <Divider />
           <CardBody>
             <div className="grid gap-4 md:grid-cols-2">
               <Select
-                label="Language"
-                placeholder="Select a language"
+                label={t("settings.language") || "Language"}
+                placeholder={
+                  t("settings.language_placeholder") || "Select a language"
+                }
                 selectedKeys={
                   preferences.language ? [preferences.language] : []
                 }
                 onChange={(e) => handleSelect("language", e.target.value)}
               >
-                <SelectItem key="en">English</SelectItem>
-                <SelectItem key="fr">Français</SelectItem>
-                <SelectItem key="es">Español</SelectItem>
-                <SelectItem key="de">Deutsch</SelectItem>
+                <SelectItem key="en">
+                  {t("settings.lang_en") || "English"}
+                </SelectItem>
+                <SelectItem key="fr">
+                  {t("settings.lang_fr") || "Français"}
+                </SelectItem>
+                <SelectItem key="es">
+                  {t("settings.lang_es") || "Español"}
+                </SelectItem>
+                <SelectItem key="de">
+                  {t("settings.lang_de") || "Deutsch"}
+                </SelectItem>
               </Select>
               <Select
-                label="Timezone"
-                placeholder="Select a timezone"
+                label={t("settings.timezone") || "Timezone"}
+                placeholder={
+                  t("settings.timezone_placeholder") || "Select a timezone"
+                }
                 selectedKeys={
                   preferences.timezone ? [preferences.timezone] : []
                 }
                 onChange={(e) => handleSelect("timezone", e.target.value)}
               >
-                <SelectItem key="UTC">UTC</SelectItem>
-                <SelectItem key="Europe/Paris">Europe/Paris</SelectItem>
-                <SelectItem key="America/New_York">America/New_York</SelectItem>
+                <SelectItem key="UTC">
+                  {t("settings.tz_utc") || "UTC"}
+                </SelectItem>
+                <SelectItem key="Europe/Paris">
+                  {t("settings.tz_paris") || "Europe/Paris"}
+                </SelectItem>
+                <SelectItem key="America/New_York">
+                  {t("settings.tz_ny") || "America/New_York"}
+                </SelectItem>
                 <SelectItem key="America/Los_Angeles">
-                  America/Los_Angeles
+                  {t("settings.tz_la") || "America/Los_Angeles"}
+                </SelectItem>
+                <SelectItem key="Asia/Tokyo">
+                  {t("settings.tz_tokyo") || "Asia/Tokyo"}
                 </SelectItem>
-                <SelectItem key="Asia/Tokyo">Asia/Tokyo</SelectItem>
               </Select>
             </div>
           </CardBody>
         </Card>
 
         {/* Actions */}
-        <div className="flex justify-end gap-3">
+        <div className="flex justify-center gap-3">
           <Button
             type="button"
             variant="flat"
             onPress={() => fetchSettings()}
             isDisabled={isSaving}
           >
-            Reset
+            {t("settings.reset") || "Reset"}
           </Button>
           <Button
             type="button"
@@ -301,7 +330,9 @@ export function ReglagePage() {
             onPress={handleSave}
             startContent={!isSaving && <Save className="w-4 h-4" />}
           >
-            {isSaving ? "Saving..." : "Save Settings"}
+            {isSaving
+              ? t("settings.saving") || "Saving..."
+              : t("settings.save_button") || "Save Settings"}
           </Button>
         </div>
       </div>