@lastbrain/ai-ui-react 1.0.68 → 1.0.69

package/src/components/LBSigninModal.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { AlertCircle, Loader2, Lock, Mail, Sparkles, X } from "lucide-react";
 import { useLB } from "../context/LBAuthProvider";
 import { LBApiKeySelector } from "./LBApiKeySelector";
-import { Mail, Lock, Sparkles, X, Loader2, AlertCircle } from "lucide-react";
 
 export interface LBSigninModalProps {
   isOpen: boolean;
@@ -11,564 +12,222 @@ export interface LBSigninModalProps {
 }
 
 export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
-  // React Hooks doivent être appelés avant toute condition ou return
+  const lbContext = useLB();
+  const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);
+
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [showKeySelector, setShowKeySelector] = useState(false);
-  const [currentApiKeys, setCurrentApiKeys] = useState<any[]>([]); // Stocker les clés API localement
-
-  // Appeler useLB() inconditionnellement - hook doit toujours être appelé
-  const lbContext = useLB();
-
-  // Vérifier si le contexte est valide
-  if (!lbContext || !isOpen) {
-    return null;
-  }
+  const [currentApiKeys, setCurrentApiKeys] = useState<any[]>([]);
 
-  // Extraire les valeurs du contexte
   const {
     login,
     selectApiKeyWithToken,
     fetchApiKeys,
-    apiKeys = [],
-    status: lbStatus,
-  } = lbContext;
+  } = lbContext || {};
+
+  const canRender = Boolean(isOpen && lbContext && login);
+
+  const panelTitle = useMemo(() => "Connexion LastBrain", []);
 
-  if (!isOpen || !login) return null;
+  useEffect(() => {
+    setPortalRoot(document.body);
+  }, []);
+
+  if (!canRender || !portalRoot) {
+    return null;
+  }
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (!login) {
+      return;
+    }
+
     setError("");
     setLoading(true);
 
     try {
       const result = await login(email, password);
-      if (result.success) {
-        if (result.needsKeySelection) {
-          // L'utilisateur doit choisir une clé API
-          // Utiliser l'access token retourné directement par login
-          if (fetchApiKeys && result.accessToken) {
-            try {
-              const keys = await fetchApiKeys(result.accessToken);
-              setCurrentApiKeys(keys);
-              setShowKeySelector(true);
-            } catch (keyError) {
-              setError("Erreur lors de la récupération des clés API");
-              console.error("Failed to fetch API keys:", keyError);
-            }
-          } else {
-            setError("Token d'accès non disponible");
-          }
-        } else {
-          // Connexion réussie, fermer le modal
-          onClose();
-        }
-      } else {
+      if (!result.success) {
         setError(result.error || "Échec de la connexion");
+        return;
+      }
+
+      if (!result.needsKeySelection) {
+        onClose();
+        return;
+      }
+
+      if (!fetchApiKeys || !result.accessToken) {
+        setError("Token d'accès non disponible");
+        return;
+      }
+
+      try {
+        const keys = await fetchApiKeys(result.accessToken);
+        setCurrentApiKeys(keys || []);
+        setShowKeySelector(true);
+      } catch (keyError) {
+        console.error("Failed to fetch API keys:", keyError);
+        setError("Erreur lors de la récupération des clés API");
       }
     } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "Une erreur s'est produite"
-      );
+      setError(err instanceof Error ? err.message : "Une erreur s'est produite");
     } finally {
       setLoading(false);
     }
   };
 
   const handleKeySelect = async (apiKeyId: string) => {
-    if (!selectApiKeyWithToken) return;
+    if (!selectApiKeyWithToken) {
+      return;
+    }
 
     try {
       await selectApiKeyWithToken(apiKeyId);
       setShowKeySelector(false);
       onClose();
     } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "Erreur lors de la sélection"
-      );
+      setError(err instanceof Error ? err.message : "Erreur lors de la sélection");
       setShowKeySelector(false);
     }
   };
 
   const handleCancelKeySelection = () => {
     setShowKeySelector(false);
-    // Fermer complètement le modal au lieu de rester dans l'état de sélection
     onClose();
   };
 
-  // Si on doit afficher le sélecteur de clés
   if (showKeySelector && currentApiKeys.length > 0) {
-    return (
+    return createPortal(
       <LBApiKeySelector
         apiKeys={currentApiKeys}
         onSelect={handleKeySelect}
         onCancel={handleCancelKeySelection}
-        isOpen={true}
-      />
+        isOpen
+      />,
+      portalRoot
     );
   }
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Escape") {
-      onClose();
-    }
-  };
-
-  return (
+  return createPortal(
     <div
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        width: "100vw",
-        height: "100vh",
-        backgroundColor: "rgba(0, 0, 0, 0.75)",
-        backdropFilter: "blur(12px)",
-        WebkitBackdropFilter: "blur(12px)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        zIndex: 9999,
-        padding: "16px",
-        animation: "fadeIn 0.2s ease-out",
-        overflow: "auto",
-      }}
+      className="ai-signin-overlay"
       onClick={onClose}
-      onKeyDown={handleKeyDown}
+      onKeyDown={(e) => {
+        if (e.key === "Escape") {
+          onClose();
+        }
+      }}
+      role="dialog"
+      aria-modal="true"
+      aria-label={panelTitle}
     >
-      <div
-        style={{
-          backgroundColor: "light-dark(#ffffff, #1e293b)",
-          borderRadius: "20px",
-          boxShadow:
-            "0 0 0 1px rgba(139, 92, 246, 0.2), 0 20px 70px rgba(139, 92, 246, 0.25), 0 4px 6px rgba(0, 0, 0, 0.1)",
-          maxWidth: "440px",
-          width: "100%",
-          border:
-            "1px solid light-dark(rgba(226, 232, 240, 0.8), rgba(139, 92, 246, 0.3))",
-          display: "flex",
-          flexDirection: "column",
-          maxHeight: "90vh",
-          overflow: "hidden",
-          position: "relative",
-          animation: "slideUp 0.3s ease-out",
-        }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Gradient Background Effect */}
-        <div
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            height: "200px",
-            background:
-              "radial-gradient(ellipse at top, rgba(139, 92, 246, 0.15), transparent 70%)",
-            pointerEvents: "none",
-            zIndex: 0,
-          }}
-        />
-
-        {/* Header */}
-        <div
-          style={{
-            padding: "32px 32px 24px",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: "16px",
-            position: "relative",
-            zIndex: 1,
-          }}
+      <div className="ai-signin-panel" onClick={(e) => e.stopPropagation()}>
+        <button
+          type="button"
+          className="ai-icon-btn ai-signin-close"
+          onClick={onClose}
+          aria-label="Fermer"
         >
-          {/* Logo/Icon */}
-          <div
-            style={{
-              width: "64px",
-              height: "64px",
-              borderRadius: "16px",
-              background: "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              boxShadow: "0 8px 24px rgba(139, 92, 246, 0.3)",
-              animation: "pulse 2s ease-in-out infinite",
-            }}
-          >
-            <Sparkles size={32} color="#ffffff" strokeWidth={2.5} />
-          </div>
-
-          {/* Title */}
-          <div style={{ textAlign: "center" }}>
-            <h2
-              style={{
-                margin: "0 0 8px 0",
-                fontSize: "24px",
-                fontWeight: 700,
-                color: "light-dark(#1e293b, #f8fafc)",
-                letterSpacing: "-0.02em",
-              }}
-            >
-              Connexion LastBrain
-            </h2>
-            <p
-              style={{
-                margin: 0,
-                fontSize: "14px",
-                color: "light-dark(#64748b, #94a3b8)",
-                fontWeight: 400,
-              }}
-            >
-              Accédez à vos outils d'intelligence artificielle
-            </p>
+          <X size={16} />
+        </button>
+
+        <div className="ai-signin-header">
+          <div className="ai-center mb-3">
+            <span className="ai-icon-badge">
+              <Sparkles size={22} />
+            </span>
           </div>
-
-          {/* Close Button */}
-          <button
-            onClick={onClose}
-            style={{
-              position: "absolute",
-              top: "24px",
-              right: "24px",
-              background: "transparent",
-              border: "none",
-              color: "light-dark(#64748b, #94a3b8)",
-              cursor: "pointer",
-              padding: "8px",
-              borderRadius: "10px",
-              transition: "all 0.2s ease",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.background =
-                "light-dark(rgba(100, 116, 139, 0.1), rgba(148, 163, 184, 0.15))";
-              e.currentTarget.style.color = "light-dark(#1e293b, #f8fafc)";
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.background = "transparent";
-              e.currentTarget.style.color = "light-dark(#64748b, #94a3b8)";
-            }}
-            aria-label="Close"
-          >
-            <X size={20} strokeWidth={2} />
-          </button>
+          <h2 className="ai-signin-title">{panelTitle}</h2>
+          <p className="ai-signin-subtitle">
+            Connectez-vous pour activer les composants IA dans votre app.
+          </p>
         </div>
 
-        {/* Body */}
-        <div
-          style={{
-            padding: "0 32px 32px",
-            overflow: "auto",
-            flex: 1,
-            position: "relative",
-            zIndex: 1,
-          }}
-        >
-          <form
-            onSubmit={handleSubmit}
-            style={{ display: "flex", flexDirection: "column", gap: "20px" }}
-          >
-            {/* Email Input */}
-            <div>
-              <label
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "8px",
-                  fontSize: "13px",
-                  fontWeight: 600,
-                  color: "light-dark(#1e293b, #f8fafc)",
-                  marginBottom: "10px",
-                  letterSpacing: "0.01em",
-                }}
-              >
-                <Mail size={16} strokeWidth={2.5} />
+        <div className="ai-signin-content">
+          <form onSubmit={handleSubmit}>
+            <div className="ai-input-row">
+              <label htmlFor="lb-signin-email" className="ai-input-label ai-row">
+                <Mail size={14} className="ai-inline-icon" />
                 Email
               </label>
-              <div style={{ position: "relative" }}>
-                <input
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  required
-                  autoFocus
-                  autoComplete="email"
-                  placeholder="votre@email.com"
-                  style={{
-                    width: "100%",
-                    padding: "14px 16px",
-                    fontSize: "15px",
-                    border: "2px solid light-dark(#e2e8f0, #334155)",
-                    borderRadius: "12px",
-                    background: "light-dark(#f8fafc, #0f172a)",
-                    color: "light-dark(#1e293b, #f8fafc)",
-                    outline: "none",
-                    transition: "all 0.2s ease",
-                    fontWeight: 500,
-                  }}
-                  onFocus={(e) => {
-                    e.currentTarget.style.borderColor =
-                      "rgba(139, 92, 246, 0.6)";
-                    e.currentTarget.style.boxShadow =
-                      "0 0 0 4px rgba(139, 92, 246, 0.15)";
-                    e.currentTarget.style.background =
-                      "light-dark(#ffffff, #1e293b)";
-                  }}
-                  onBlur={(e) => {
-                    e.currentTarget.style.borderColor =
-                      "light-dark(#e2e8f0, #334155)";
-                    e.currentTarget.style.boxShadow = "none";
-                    e.currentTarget.style.background =
-                      "light-dark(#f8fafc, #0f172a)";
-                  }}
-                />
+              <div className="ai-control-group ai-glow">
+                <div className="ai-shell ai-size-md ai-radius-full">
+                  <input
+                    id="lb-signin-email"
+                    className="ai-control ai-control-input ai-size-md ai-radius-full"
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    autoFocus
+                    autoComplete="email"
+                    placeholder="votre@email.com"
+                  />
+                </div>
               </div>
             </div>
 
-            {/* Password Input */}
-            <div>
-              <label
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "8px",
-                  fontSize: "13px",
-                  fontWeight: 600,
-                  color: "light-dark(#1e293b, #f8fafc)",
-                  marginBottom: "10px",
-                  letterSpacing: "0.01em",
-                }}
-              >
-                <Lock size={16} strokeWidth={2.5} />
+            <div className="ai-input-row">
+              <label htmlFor="lb-signin-password" className="ai-input-label ai-row">
+                <Lock size={14} className="ai-inline-icon" />
                 Mot de passe
               </label>
-              <div style={{ position: "relative" }}>
-                <input
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  required
-                  autoComplete="current-password"
-                  placeholder="••••••••"
-                  style={{
-                    width: "100%",
-                    padding: "14px 16px",
-                    fontSize: "15px",
-                    border: "2px solid light-dark(#e2e8f0, #334155)",
-                    borderRadius: "12px",
-                    background: "light-dark(#f8fafc, #0f172a)",
-                    color: "light-dark(#1e293b, #f8fafc)",
-                    outline: "none",
-                    transition: "all 0.2s ease",
-                    letterSpacing: "0.15em",
-                    fontWeight: 500,
-                  }}
-                  onFocus={(e) => {
-                    e.currentTarget.style.borderColor =
-                      "rgba(139, 92, 246, 0.6)";
-                    e.currentTarget.style.boxShadow =
-                      "0 0 0 4px rgba(139, 92, 246, 0.15)";
-                    e.currentTarget.style.background =
-                      "light-dark(#ffffff, #1e293b)";
-                  }}
-                  onBlur={(e) => {
-                    e.currentTarget.style.borderColor =
-                      "light-dark(#e2e8f0, #334155)";
-                    e.currentTarget.style.boxShadow = "none";
-                    e.currentTarget.style.background =
-                      "light-dark(#f8fafc, #0f172a)";
-                  }}
-                />
+              <div className="ai-control-group ai-glow">
+                <div className="ai-shell ai-size-md ai-radius-full">
+                  <input
+                    id="lb-signin-password"
+                    className="ai-control ai-control-input ai-size-md ai-radius-full"
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                    autoComplete="current-password"
+                    placeholder="••••••••"
+                  />
+                </div>
               </div>
             </div>
 
-            {/* Error Message */}
-            {error && (
-              <div
-                style={{
-                  padding: "14px 16px",
-                  background: "rgba(239, 68, 68, 0.1)",
-                  border: "2px solid rgba(239, 68, 68, 0.35)",
-                  borderRadius: "12px",
-                  color: "light-dark(#dc2626, #fca5a5)",
-                  fontSize: "14px",
-                  display: "flex",
-                  alignItems: "start",
-                  gap: "12px",
-                  animation: "shake 0.4s ease",
-                }}
-              >
-                <AlertCircle
-                  size={20}
-                  style={{ flexShrink: 0, marginTop: "2px" }}
-                  strokeWidth={2.5}
-                />
-                <span style={{ flex: 1, lineHeight: "1.5", fontWeight: 500 }}>
-                  {error}
-                </span>
+            {error ? (
+              <div className="ai-signin-error" role="alert">
+                <AlertCircle size={16} />
+                <span>{error}</span>
               </div>
-            )}
-
-            {/* Submit Button */}
-            <button
-              type="submit"
-              disabled={loading}
-              style={{
-                width: "100%",
-                padding: "16px",
-                fontSize: "15px",
-                fontWeight: 700,
-                color: "#ffffff",
-                background: loading
-                  ? "light-dark(#cbd5e1, #475569)"
-                  : "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
-                border: "none",
-                borderRadius: "12px",
-                cursor: loading ? "not-allowed" : "pointer",
-                transition: "all 0.2s ease",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: "10px",
-                letterSpacing: "0.01em",
-                opacity: loading ? 0.6 : 1,
-                boxShadow: loading
-                  ? "none"
-                  : "0 4px 14px rgba(139, 92, 246, 0.4)",
-              }}
-              onMouseEnter={(e) => {
-                if (!loading) {
-                  e.currentTarget.style.transform = "translateY(-2px)";
-                  e.currentTarget.style.boxShadow =
-                    "0 8px 24px rgba(139, 92, 246, 0.6)";
-                }
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.transform = "translateY(0)";
-                e.currentTarget.style.boxShadow =
-                  "0 4px 14px rgba(139, 92, 246, 0.4)";
-              }}
-            >
-              {loading ? (
-                <>
-                  <Loader2
-                    size={20}
-                    strokeWidth={2.5}
-                    style={{ animation: "spin 1s linear infinite" }}
-                  />
-                  Connexion en cours...
-                </>
-              ) : (
-                <>
-                  <Sparkles size={20} strokeWidth={2.5} />
-                  Se connecter
-                </>
-              )}
-            </button>
+            ) : null}
+
+            <div className="ai-signin-actions">
+              <button type="submit" className="ai-btn ai-btn--auth" disabled={loading}>
+                {loading ? (
+                  <>
+                    <Loader2 size={16} className="ai-spinner" />
+                    Connexion...
+                  </>
+                ) : (
+                  <>
+                    <Sparkles size={16} />
+                    Se connecter
+                  </>
+                )}
+              </button>
 
-            {/* Signup Link */}
-            <div
-              style={{
-                marginTop: "8px",
-                padding: "20px",
-                background: "rgba(139, 92, 246, 0.05)",
-                border: "1px solid rgba(139, 92, 246, 0.2)",
-                borderRadius: "16px",
-                textAlign: "center",
-              }}
-            >
-              <p
-                style={{
-                  margin: "0 0 14px 0",
-                  fontSize: "14px",
-                  color: "light-dark(#64748b, #94a3b8)",
-                  fontWeight: 500,
-                }}
-              >
-                Pas encore de compte ?
-              </p>
               <a
                 href="https://prompt.lastbrain.io/signup"
                 target="_blank"
                 rel="noopener noreferrer"
-                style={{
-                  display: "inline-flex",
-                  alignItems: "center",
-                  gap: "8px",
-                  padding: "10px 20px",
-                  fontSize: "14px",
-                  fontWeight: 600,
-                  color: "#8b5cf6",
-                  textDecoration: "none",
-                  border: "2px solid rgba(139, 92, 246, 0.3)",
-                  borderRadius: "10px",
-                  transition: "all 0.2s ease",
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.background = "rgba(139, 92, 246, 0.1)";
-                  e.currentTarget.style.borderColor = "rgba(139, 92, 246, 0.5)";
-                  e.currentTarget.style.transform = "translateY(-1px)";
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.borderColor = "rgba(139, 92, 246, 0.3)";
-                  e.currentTarget.style.transform = "translateY(0)";
-                }}
+                className="ai-btn ai-btn--ghost"
               >
-                <Sparkles size={16} strokeWidth={2.5} />
-                Créer un compte gratuitement
+                Créer un compte
               </a>
             </div>
           </form>
         </div>
       </div>
-
-      <style>
-        {`
-          @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-          }
-          
-          @keyframes slideUp {
-            from { 
-              opacity: 0;
-              transform: translateY(20px) scale(0.95);
-            }
-            to { 
-              opacity: 1;
-              transform: translateY(0) scale(1);
-            }
-          }
-          
-          @keyframes spin {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-          }
-          
-          @keyframes pulse {
-            0%, 100% { 
-              box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
-            }
-            50% { 
-              box-shadow: 0 8px 32px rgba(139, 92, 246, 0.5);
-            }
-          }
-          
-          @keyframes shake {
-            0%, 100% { transform: translateX(0); }
-            25% { transform: translateX(-8px); }
-            75% { transform: translateX(8px); }
-          }
-        `}
-      </style>
-    </div>
+    </div>,
+    portalRoot
   );
 }