@lastbrain/ai-ui-react 1.0.68 → 1.0.69

package/src/components/LBConnectButton.tsx

@@ -1,27 +1,19 @@
 "use client";
 
-/**
- * Bouton de connexion LastBrain
- * Ouvre la modal d'authentification
- */
-
 import React from "react";
+import { Loader2, LogIn, LogOut } from "lucide-react";
 import { useLB } from "../context/LBAuthProvider";
-import type { LBApiKey } from "@lastbrain/ai-ui-core";
+import { LBSigninModal } from "./LBSigninModal";
 
 interface LBConnectButtonProps {
-  /** Texte du bouton */
   label?: string;
-  /** Classe CSS personnalisée */
   className?: string;
-  /** Callback après connexion réussie */
   onConnected?: () => void;
-  /** Callback à l'ouverture de la modal */
   onOpenModal?: () => void;
 }
 
 export function LBConnectButton({
-  label = "Se connecter à LastBrain",
+  label = "Se connecter",
   className = "",
   onConnected,
   onOpenModal,
@@ -29,353 +21,73 @@ export function LBConnectButton({
   const { status, user, logout } = useLB();
   const [showModal, setShowModal] = React.useState(false);
 
+  React.useEffect(() => {
+    if (status === "ready" && user && showModal) {
+      setShowModal(false);
+      onConnected?.();
+    }
+  }, [status, user, showModal, onConnected]);
+
   const handleClick = () => {
     if (status === "ready" && user) {
-      // Déjà connecté, proposer de se déconnecter
-      logout().then(() => {
-        // Redirection propre après logout
-        if (typeof window !== "undefined") {
-          // Garder la langue actuelle de l'URL
-          const currentPath = window.location.pathname;
-          const langMatch = currentPath.match(/^\/([a-z]{2})\//);
-          const currentLang = langMatch ? langMatch[1] : "en";
-
-          // Rediriger vers la page d'accueil dans la langue actuelle
-          window.location.href = `/${currentLang}`;
-        }
-      });
-    } else {
-      // Pas connecté, ouvrir la modal
-      setShowModal(true);
-      onOpenModal?.();
+      void logout();
+      return;
     }
-  };
 
-  const handleModalClose = (success: boolean) => {
-    setShowModal(false);
-    if (success) {
-      onConnected?.();
-    }
+    setShowModal(true);
+    onOpenModal?.();
   };
 
+  const buttonLabel =
+    status === "ready" && user ? "Déconnexion" : label;
+
   return (
     <>
       <button
+        type="button"
         onClick={handleClick}
-        className={
-          className ||
-          (status === "ready" && user
-            ? "px-4 py-2 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-lg hover:from-emerald-600 hover:to-teal-700 transition-all duration-200 shadow-md hover:shadow-lg"
-            : "px-4 py-2 bg-gradient-to-r from-violet-500 to-purple-600 text-white rounded-lg hover:from-violet-600 hover:to-purple-700 transition-all duration-200 shadow-md hover:shadow-lg")
-        }
+        className={className || "ai-btn ai-btn--auth"}
         disabled={status === "loading"}
       >
-        {status === "loading"
-          ? "⏳ Chargement..."
-          : status === "ready" && user
-            ? `✓ ${user.email}`
-            : `🔐 ${label}`}
+        {status === "loading" ? (
+          <>
+            <Loader2 size={16} className="animate-spin" />
+            Chargement...
+          </>
+        ) : status === "ready" && user ? (
+          <>
+            <LogOut size={16} />
+            {buttonLabel}
+          </>
+        ) : (
+          <>
+            <LogIn size={16} />
+            {buttonLabel}
+          </>
+        )}
       </button>
 
-      {showModal && <LBAuthModal onClose={handleModalClose} />}
+      <LBSigninModal
+        isOpen={showModal}
+        onClose={() => setShowModal(false)}
+      />
     </>
   );
 }
 
 /**
- * Modal d'authentification LastBrain
+ * Compat export (ancien API): on garde un wrapper minimal
+ * pour éviter de casser les imports existants.
  */
 interface LBAuthModalProps {
   onClose: (success: boolean) => void;
 }
 
-function LBAuthModal({ onClose }: LBAuthModalProps) {
-  const { login, fetchApiKeys, selectApiKey } = useLB();
-  const [step, setStep] = React.useState<"login" | "select-key">("login");
-  const [email, setEmail] = React.useState("");
-  const [password, setPassword] = React.useState("");
-  const [error, setError] = React.useState("");
-  const [loading, setLoading] = React.useState(false);
-  const [accessToken, setAccessToken] = React.useState("");
-  const [apiKeys, setApiKeys] = React.useState<LBApiKey[]>([]);
-
-  const handleLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-    setLoading(true);
-
-    try {
-      const result = await login(email, password);
-      if (!result.success) {
-        setError(result.error || "Échec de la connexion");
-        return;
-      }
-
-      // Note: avec le nouveau système, login gère automatiquement
-      // la récupération et sélection de clé. Ce modal n'est plus nécessaire.
-      onClose(true);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Échec de la connexion");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSelectKey = async (apiKeyId: string) => {
-    setError("");
-    setLoading(true);
-
-    try {
-      await selectApiKey(accessToken, apiKeyId);
-      onClose(true); // Succès
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Échec de la sélection");
-    } finally {
-      setLoading(false);
-    }
-  };
-
+export function LBAuthModal({ onClose }: LBAuthModalProps) {
   return (
-    <div className="fixed inset-0 bg-black/60 dark:bg-black/80 backdrop-blur-md flex items-center justify-center z-50 p-4 animate-in fade-in duration-200">
-      <div className="bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl rounded-3xl shadow-2xl max-w-md w-full border border-slate-200/50 dark:border-slate-700/50 overflow-hidden animate-in zoom-in-95 duration-200">
-        {/* Header avec gradient */}
-        <div className="relative bg-gradient-to-r from-violet-600 via-purple-600 to-fuchsia-600 dark:from-violet-500 dark:via-purple-500 dark:to-fuchsia-500 px-6 py-8 text-white overflow-hidden">
-          {/* Pattern background */}
-          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE0YzAtMTEuMDUgOC45NS0yMCAyMC0yMHMyMCA4Ljk1IDIwIDIwLTguOTUgMjAtMjAgMjAtMjAtOC45NS0yMC0yMHoiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-30"></div>
-
-          <div className="relative flex justify-between items-start">
-            <div className="flex-1">
-              <div className="flex items-center gap-3 mb-2">
-                <div className="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
-                  {step === "login" ? "🔐" : "🔑"}
-                </div>
-                <h2 className="text-2xl font-bold tracking-tight">
-                  {step === "login" ? "Connexion" : "Sélection clé"}
-                </h2>
-              </div>
-              <p className="text-white/90 text-sm font-medium mt-1 ml-13">
-                {step === "login"
-                  ? "Accédez à vos outils IA"
-                  : "Session sécurisée 72h"}
-              </p>
-            </div>
-            <button
-              onClick={() => onClose(false)}
-              className="text-white/80 hover:text-white hover:bg-white/20 rounded-lg p-2 transition-all duration-200 backdrop-blur-sm"
-            >
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2.5}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-
-        <div className="p-8">
-          {step === "login" ? (
-            <form onSubmit={handleLogin} className="space-y-5">
-              <div className="space-y-2">
-                <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2 tracking-wide">
-                  📧 Adresse email
-                </label>
-                <input
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  className="w-full px-4 py-3.5 text-base border-2 border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500 focus:border-violet-500 dark:focus:border-violet-400 focus:ring-4 focus:ring-violet-100 dark:focus:ring-violet-900/30 transition-all outline-none font-medium tracking-wide"
-                  placeholder="votre@email.com"
-                  required
-                  autoFocus
-                  autoComplete="email"
-                  style={{ letterSpacing: "0.01em" }}
-                />
-              </div>
-
-              <div className="space-y-2">
-                <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2 tracking-wide">
-                  🔒 Mot de passe
-                </label>
-                <input
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  className="w-full px-4 py-3.5 text-base border-2 border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500 focus:border-violet-500 dark:focus:border-violet-400 focus:ring-4 focus:ring-violet-100 dark:focus:ring-violet-900/30 transition-all outline-none font-medium tracking-wide"
-                  placeholder="••••••••"
-                  required
-                  autoComplete="current-password"
-                  style={{ letterSpacing: "0.15em" }}
-                />
-              </div>
-
-              {error && (
-                <div className="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 dark:border-red-400 px-4 py-3.5 rounded-lg animate-in slide-in-from-top-2 duration-200">
-                  <div className="flex items-start gap-3">
-                    <span className="text-red-500 dark:text-red-400 text-xl flex-shrink-0 mt-0.5">
-                      ⚠️
-                    </span>
-                    <p className="text-red-700 dark:text-red-300 text-sm font-medium leading-relaxed">
-                      {error}
-                    </p>
-                  </div>
-                </div>
-              )}
-
-              <button
-                type="submit"
-                disabled={loading}
-                className="w-full mt-6 px-6 py-4 bg-gradient-to-r from-violet-600 to-purple-600 hover:from-violet-700 hover:to-purple-700 disabled:from-slate-400 disabled:to-slate-500 text-white font-bold text-base rounded-xl disabled:cursor-not-allowed transition-all duration-200 shadow-lg shadow-violet-500/30 hover:shadow-xl hover:shadow-violet-500/40 disabled:shadow-none transform hover:translate-y-[-2px] active:translate-y-0 disabled:translate-y-0 tracking-wide"
-              >
-                {loading ? (
-                  <span className="flex items-center justify-center gap-3">
-                    <svg
-                      className="animate-spin h-5 w-5"
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                    >
-                      <circle
-                        className="opacity-25"
-                        cx="12"
-                        cy="12"
-                        r="10"
-                        stroke="currentColor"
-                        strokeWidth="4"
-                      ></circle>
-                      <path
-                        className="opacity-75"
-                        fill="currentColor"
-                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                      ></path>
-                    </svg>
-                    <span className="font-semibold">Connexion en cours...</span>
-                  </span>
-                ) : (
-                  <span className="flex items-center justify-center gap-2">
-                    🚀 <span>Se connecter</span>
-                  </span>
-                )}
-              </button>
-
-              <div className="relative my-8">
-                <div className="absolute inset-0 flex items-center">
-                  <div className="w-full border-t border-slate-200 dark:border-slate-700"></div>
-                </div>
-                <div className="relative flex justify-center text-sm">
-                  <span className="px-4 bg-white dark:bg-slate-900 text-slate-500 dark:text-slate-400 font-medium">
-                    ou
-                  </span>
-                </div>
-              </div>
-
-              <div className="bg-gradient-to-br from-violet-50 to-purple-50 dark:from-violet-900/20 dark:to-purple-900/20 rounded-xl p-5 border border-violet-200 dark:border-violet-800/50 backdrop-blur-sm">
-                <p className="text-sm text-slate-700 dark:text-slate-300 text-center font-medium mb-3">
-                  Pas encore de compte ?
-                </p>
-                <a
-                  href="https://prompt.lastbrain.io/signup"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="block text-center px-4 py-3 bg-white dark:bg-slate-800 text-violet-600 dark:text-violet-400 hover:text-violet-700 dark:hover:text-violet-300 font-bold text-sm rounded-lg hover:shadow-md transition-all duration-200 border-2 border-violet-200 dark:border-violet-700"
-                >
-                  ✨ Créer un compte gratuitement
-                </a>
-              </div>
-            </form>
-          ) : (
-            <div className="space-y-4">
-              <p className="text-sm text-slate-600 dark:text-slate-400 bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg border border-blue-200 dark:border-blue-800">
-                ℹ️ Sélectionnez une clé API pour créer une session sécurisée de
-                72h
-              </p>
-
-              <div className="space-y-3 max-h-96 overflow-y-auto">
-                {apiKeys.map((key) => (
-                  <button
-                    key={key.id}
-                    onClick={() => handleSelectKey(key.id)}
-                    disabled={!key.isActive || loading}
-                    className={`w-full text-left px-5 py-4 border-2 rounded-lg transition-all transform hover:scale-[1.02] ${
-                      key.isActive
-                        ? "border-slate-200 dark:border-slate-600 hover:border-violet-400 dark:hover:border-violet-500 hover:bg-gradient-to-r hover:from-violet-50 hover:to-purple-50 dark:hover:from-violet-900/20 dark:hover:to-purple-900/20"
-                        : "border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 opacity-50 cursor-not-allowed"
-                    }`}
-                  >
-                    <div className="flex items-start justify-between gap-2">
-                      <div className="flex-1">
-                        <div className="font-semibold text-slate-900 dark:text-white flex items-center gap-2">
-                          {key.isActive ? "🔑" : "🔒"}
-                          {key.name}
-                        </div>
-                        <div className="text-sm text-slate-500 dark:text-slate-400 mt-1 font-mono">
-                          {key.keyPrefix}...
-                        </div>
-                        {key.scopes && (
-                          <div className="flex gap-1 mt-2 flex-wrap">
-                            {key.scopes.slice(0, 3).map((scope: string) => (
-                              <span
-                                key={scope}
-                                className="text-xs px-2 py-1 bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 rounded"
-                              >
-                                {scope}
-                              </span>
-                            ))}
-                            {key.scopes.length > 3 && (
-                              <span className="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 rounded">
-                                +{key.scopes.length - 3}
-                              </span>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                      {key.isActive ? (
-                        <svg
-                          className="w-5 h-5 text-violet-500 flex-shrink-0 mt-1"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M9 5l7 7-7 7"
-                          />
-                        </svg>
-                      ) : (
-                        <span className="text-xs text-red-600 dark:text-red-400 font-semibold bg-red-100 dark:bg-red-900/30 px-2 py-1 rounded">
-                          Inactive
-                        </span>
-                      )}
-                    </div>
-                  </button>
-                ))}
-              </div>
-
-              {error && (
-                <div className="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 rounded">
-                  <div className="flex items-start gap-2">
-                    <span className="text-red-500 text-xl">⚠️</span>
-                    <p className="text-red-700 dark:text-red-400 text-sm font-medium">
-                      {error}
-                    </p>
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
+    <LBSigninModal
+      isOpen
+      onClose={() => onClose(false)}
+    />
   );
 }
-
-export { LBAuthModal };