create-fluxstack 1.0.22 → 1.1.0

package/plugins/crypto-auth/client/components/AuthProvider.tsx

@@ -0,0 +1,190 @@
+/**
+ * Provedor de Contexto de Autenticação
+ * Context Provider React para gerenciar estado de autenticação
+ */
+
+import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react'
+import { CryptoAuthClient, SessionInfo, AuthConfig } from '../CryptoAuthClient'
+
+export interface AuthContextValue {
+  client: CryptoAuthClient
+  session: SessionInfo | null
+  isAuthenticated: boolean
+  isAdmin: boolean
+  permissions: string[]
+  isLoading: boolean
+  error: string | null
+  login: () => Promise<void>
+  logout: () => Promise<void>
+  refresh: () => Promise<void>
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null)
+
+export interface AuthProviderProps {
+  children: ReactNode
+  config?: AuthConfig
+  onAuthChange?: (isAuthenticated: boolean, session: SessionInfo | null) => void
+  onError?: (error: string) => void
+}
+
+export const AuthProvider: React.FC<AuthProviderProps> = ({
+  children,
+  config = {},
+  onAuthChange,
+  onError
+}) => {
+  const [client] = useState(() => new CryptoAuthClient({ ...config, autoInit: false }))
+  const [session, setSession] = useState<SessionInfo | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const isAuthenticated = session !== null && client.isAuthenticated()
+  const isAdmin = session?.isAdmin || false
+  const permissions = session?.permissions || []
+
+  useEffect(() => {
+    initializeAuth()
+  }, [])
+
+  useEffect(() => {
+    onAuthChange?.(isAuthenticated, session)
+  }, [isAuthenticated, session, onAuthChange])
+
+  const initializeAuth = async () => {
+    setIsLoading(true)
+    setError(null)
+    
+    try {
+      const currentSession = client.getSession()
+      if (currentSession && client.isAuthenticated()) {
+        setSession(currentSession)
+      } else {
+        // Tentar inicializar automaticamente se não houver sessão
+        try {
+          const newSession = await client.initialize()
+          setSession(newSession)
+        } catch (initError) {
+          // Falha na inicialização automática é normal se não houver sessão salva
+          console.debug('Inicialização automática falhou:', initError)
+          setSession(null)
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Erro desconhecido'
+      setError(errorMessage)
+      onError?.(errorMessage)
+      console.error('Erro ao inicializar autenticação:', err)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const login = async () => {
+    setIsLoading(true)
+    setError(null)
+    
+    try {
+      const newSession = await client.createNewSession()
+      setSession(newSession)
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Erro ao fazer login'
+      setError(errorMessage)
+      onError?.(errorMessage)
+      throw err
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const logout = async () => {
+    setIsLoading(true)
+    setError(null)
+    
+    try {
+      await client.logout()
+      setSession(null)
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Erro ao fazer logout'
+      setError(errorMessage)
+      onError?.(errorMessage)
+      // Mesmo com erro, limpar a sessão local
+      setSession(null)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const refresh = async () => {
+    setIsLoading(true)
+    setError(null)
+    
+    try {
+      // Verificar se a sessão atual ainda é válida
+      const currentSession = client.getSession()
+      if (currentSession && client.isAuthenticated()) {
+        // Tentar fazer uma requisição de teste para validar no servidor
+        const response = await client.fetch('/api/auth/session/info')
+        if (response.ok) {
+          const result = await response.json()
+          if (result.success && result.session) {
+            // Atualizar informações da sessão
+            const updatedSession = {
+              ...currentSession,
+              ...result.session,
+              lastUsed: new Date()
+            }
+            setSession(updatedSession)
+          } else {
+            // Sessão inválida no servidor
+            setSession(null)
+          }
+        } else {
+          // Erro na requisição, sessão pode estar inválida
+          setSession(null)
+        }
+      } else {
+        setSession(null)
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Erro ao atualizar sessão'
+      setError(errorMessage)
+      onError?.(errorMessage)
+      setSession(null)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const contextValue: AuthContextValue = {
+    client,
+    session,
+    isAuthenticated,
+    isAdmin,
+    permissions,
+    isLoading,
+    error,
+    login,
+    logout,
+    refresh
+  }
+
+  return (
+    <AuthContext.Provider value={contextValue}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+/**
+ * Hook para usar o contexto de autenticação
+ */
+export const useAuth = (): AuthContextValue => {
+  const context = useContext(AuthContext)
+  if (!context) {
+    throw new Error('useAuth deve ser usado dentro de um AuthProvider')
+  }
+  return context
+}
+
+export default AuthProvider

package/plugins/crypto-auth/client/components/LoginButton.tsx

@@ -0,0 +1,155 @@
+/**
+ * Componente de Botão de Login
+ * Componente React para autenticação criptográfica
+ */
+
+import React, { useState, useEffect } from 'react'
+import { CryptoAuthClient } from '../CryptoAuthClient'
+
+export interface LoginButtonProps {
+  onLogin?: (session: any) => void
+  onLogout?: () => void
+  onError?: (error: string) => void
+  className?: string
+  loginText?: string
+  logoutText?: string
+  loadingText?: string
+  showPermissions?: boolean
+  authClient?: CryptoAuthClient
+}
+
+export const LoginButton: React.FC<LoginButtonProps> = ({
+  onLogin,
+  onLogout,
+  onError,
+  className = '',
+  loginText = 'Entrar',
+  logoutText = 'Sair',
+  loadingText = 'Carregando...',
+  showPermissions = false,
+  authClient
+}) => {
+  const [client] = useState(() => authClient || new CryptoAuthClient())
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [session, setSession] = useState<any>(null)
+
+  useEffect(() => {
+    checkAuthStatus()
+  }, [])
+
+  const checkAuthStatus = async () => {
+    try {
+      const currentSession = client.getSession()
+      if (currentSession && client.isAuthenticated()) {
+        setIsAuthenticated(true)
+        setSession(currentSession)
+      } else {
+        setIsAuthenticated(false)
+        setSession(null)
+      }
+    } catch (error) {
+      console.error('Erro ao verificar status de autenticação:', error)
+      setIsAuthenticated(false)
+      setSession(null)
+    }
+  }
+
+  const handleLogin = async () => {
+    setIsLoading(true)
+    try {
+      const newSession = await client.initialize()
+      setIsAuthenticated(true)
+      setSession(newSession)
+      onLogin?.(newSession)
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Erro desconhecido'
+      console.error('Erro ao fazer login:', error)
+      onError?.(errorMessage)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleLogout = async () => {
+    setIsLoading(true)
+    try {
+      await client.logout()
+      setIsAuthenticated(false)
+      setSession(null)
+      onLogout?.()
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Erro desconhecido'
+      console.error('Erro ao fazer logout:', error)
+      onError?.(errorMessage)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const baseClassName = `
+    px-4 py-2 rounded-md font-medium transition-colors duration-200
+    focus:outline-none focus:ring-2 focus:ring-offset-2
+    disabled:opacity-50 disabled:cursor-not-allowed
+  `.trim()
+
+  if (isLoading) {
+    return (
+      <button
+        disabled
+        className={`${baseClassName} bg-gray-400 text-white cursor-not-allowed ${className}`}
+      >
+        {loadingText}
+      </button>
+    )
+  }
+
+  if (isAuthenticated) {
+    return (
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+          <span className="text-sm text-gray-600">
+            Autenticado
+            {session?.isAdmin && (
+              <span className="ml-1 px-2 py-0.5 bg-blue-100 text-blue-800 text-xs rounded-full">
+                Admin
+              </span>
+            )}
+          </span>
+        </div>
+        
+        {showPermissions && session?.permissions && (
+          <div className="flex gap-1">
+            {session.permissions.map((permission: string) => (
+              <span
+                key={permission}
+                className="px-2 py-0.5 bg-gray-100 text-gray-700 text-xs rounded-full"
+              >
+                {permission}
+              </span>
+            ))}
+          </div>
+        )}
+        
+        <button
+          onClick={handleLogout}
+          className={`${baseClassName} bg-red-600 hover:bg-red-700 text-white focus:ring-red-500 ${className}`}
+        >
+          {logoutText}
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <button
+      onClick={handleLogin}
+      className={`${baseClassName} bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500 ${className}`}
+    >
+      {loginText}
+    </button>
+  )
+}
+
+export default LoginButton

package/plugins/crypto-auth/client/components/ProtectedRoute.tsx

@@ -0,0 +1,109 @@
+/**
+ * Componente de Rota Protegida
+ * Protege componentes que requerem autenticação
+ */
+
+import React, { ReactNode } from 'react'
+import { useAuth } from './AuthProvider'
+
+export interface ProtectedRouteProps {
+  children: ReactNode
+  requireAdmin?: boolean
+  requiredPermissions?: string[]
+  fallback?: ReactNode
+  loadingComponent?: ReactNode
+  unauthorizedComponent?: ReactNode
+}
+
+export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
+  children,
+  requireAdmin = false,
+  requiredPermissions = [],
+  fallback,
+  loadingComponent,
+  unauthorizedComponent
+}) => {
+  const { isAuthenticated, isAdmin, permissions, isLoading, error } = useAuth()
+
+  // Componente de loading padrão
+  const defaultLoadingComponent = (
+    <div className="flex items-center justify-center p-8">
+      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+      <span className="ml-3 text-gray-600">Verificando autenticação...</span>
+    </div>
+  )
+
+  // Componente de não autorizado padrão
+  const defaultUnauthorizedComponent = (
+    <div className="flex flex-col items-center justify-center p-8 bg-red-50 border border-red-200 rounded-lg">
+      <div className="text-red-600 mb-4">
+        <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+        </svg>
+      </div>
+      <h3 className="text-lg font-semibold text-red-800 mb-2">Acesso Negado</h3>
+      <p className="text-red-600 text-center">
+        {!isAuthenticated 
+          ? 'Você precisa estar autenticado para acessar esta página.'
+          : requireAdmin && !isAdmin
+          ? 'Você precisa de privilégios de administrador para acessar esta página.'
+          : 'Você não tem as permissões necessárias para acessar esta página.'
+        }
+      </p>
+      {error && (
+        <p className="text-red-500 text-sm mt-2">
+          Erro: {error}
+        </p>
+      )}
+    </div>
+  )
+
+  // Mostrar loading enquanto verifica autenticação
+  if (isLoading) {
+    return <>{loadingComponent || defaultLoadingComponent}</>
+  }
+
+  // Verificar se está autenticado
+  if (!isAuthenticated) {
+    return <>{unauthorizedComponent || fallback || defaultUnauthorizedComponent}</>
+  }
+
+  // Verificar se requer admin
+  if (requireAdmin && !isAdmin) {
+    return <>{unauthorizedComponent || fallback || defaultUnauthorizedComponent}</>
+  }
+
+  // Verificar permissões específicas
+  if (requiredPermissions.length > 0) {
+    const hasRequiredPermissions = requiredPermissions.every(permission => 
+      permissions.includes(permission) || permissions.includes('admin')
+    )
+
+    if (!hasRequiredPermissions) {
+      return <>{unauthorizedComponent || fallback || defaultUnauthorizedComponent}</>
+    }
+  }
+
+  // Usuário autorizado, renderizar children
+  return <>{children}</>
+}
+
+/**
+ * HOC para proteger componentes
+ */
+export function withAuth<P extends object>(
+  Component: React.ComponentType<P>,
+  options: Omit<ProtectedRouteProps, 'children'> = {}
+) {
+  const WrappedComponent = (props: P) => (
+    <ProtectedRoute {...options}>
+      <Component {...props} />
+    </ProtectedRoute>
+  )
+
+  WrappedComponent.displayName = `withAuth(${Component.displayName || Component.name})`
+  
+  return WrappedComponent
+}
+
+export default ProtectedRoute

package/plugins/crypto-auth/client/components/SessionInfo.tsx

@@ -0,0 +1,242 @@
+/**
+ * Componente de Informações da Sessão
+ * Exibe informações detalhadas sobre a sessão atual
+ */
+
+import React, { useState } from 'react'
+import { useAuth } from './AuthProvider'
+
+export interface SessionInfoProps {
+  className?: string
+  showPrivateKey?: boolean
+  showFullSessionId?: boolean
+  compact?: boolean
+}
+
+export const SessionInfo: React.FC<SessionInfoProps> = ({
+  className = '',
+  showPrivateKey = false,
+  showFullSessionId = false,
+  compact = false
+}) => {
+  const { session, isAuthenticated, isAdmin, permissions, isLoading } = useAuth()
+  const [showDetails, setShowDetails] = useState(!compact)
+
+  if (isLoading) {
+    return (
+      <div className={`animate-pulse ${className}`}>
+        <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
+        <div className="h-4 bg-gray-200 rounded w-1/2"></div>
+      </div>
+    )
+  }
+
+  if (!isAuthenticated || !session) {
+    return (
+      <div className={`text-gray-500 ${className}`}>
+        <p>Não autenticado</p>
+      </div>
+    )
+  }
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat('pt-BR', {
+      dateStyle: 'short',
+      timeStyle: 'medium'
+    }).format(date)
+  }
+
+  const truncateId = (id: string, length: number = 8) => {
+    return showFullSessionId ? id : `${id.substring(0, length)}...`
+  }
+
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      // Você pode adicionar um toast/notification aqui
+    } catch (err) {
+      console.error('Erro ao copiar para clipboard:', err)
+    }
+  }
+
+  if (compact) {
+    return (
+      <div className={`flex items-center gap-2 ${className}`}>
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+          <span className="text-sm font-medium">
+            {truncateId(session.sessionId)}
+          </span>
+          {isAdmin && (
+            <span className="px-2 py-0.5 bg-blue-100 text-blue-800 text-xs rounded-full">
+              Admin
+            </span>
+          )}
+        </div>
+        <button
+          onClick={() => setShowDetails(!showDetails)}
+          className="text-gray-400 hover:text-gray-600 transition-colors"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </button>
+        
+        {showDetails && (
+          <div className="absolute z-10 mt-2 p-4 bg-white border border-gray-200 rounded-lg shadow-lg min-w-80">
+            <SessionDetails 
+              session={session}
+              isAdmin={isAdmin}
+              permissions={permissions}
+              showPrivateKey={showPrivateKey}
+              showFullSessionId={showFullSessionId}
+              onCopy={copyToClipboard}
+            />
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className={`bg-white border border-gray-200 rounded-lg p-4 ${className}`}>
+      <SessionDetails 
+        session={session}
+        isAdmin={isAdmin}
+        permissions={permissions}
+        showPrivateKey={showPrivateKey}
+        showFullSessionId={showFullSessionId}
+        onCopy={copyToClipboard}
+      />
+    </div>
+  )
+}
+
+interface SessionDetailsProps {
+  session: any
+  isAdmin: boolean
+  permissions: string[]
+  showPrivateKey: boolean
+  showFullSessionId: boolean
+  onCopy: (text: string) => void
+}
+
+const SessionDetails: React.FC<SessionDetailsProps> = ({
+  session,
+  isAdmin,
+  permissions,
+  showPrivateKey,
+  showFullSessionId,
+  onCopy
+}) => {
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat('pt-BR', {
+      dateStyle: 'short',
+      timeStyle: 'medium'
+    }).format(date)
+  }
+
+  const CopyButton: React.FC<{ text: string }> = ({ text }) => (
+    <button
+      onClick={() => onCopy(text)}
+      className="ml-2 text-gray-400 hover:text-gray-600 transition-colors"
+      title="Copiar"
+    >
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+      </svg>
+    </button>
+  )
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold text-gray-900">Informações da Sessão</h3>
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+          <span className="text-sm text-green-600 font-medium">Ativo</span>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-3 text-sm">
+        <div>
+          <label className="block text-gray-600 font-medium mb-1">Session ID</label>
+          <div className="flex items-center">
+            <code className="bg-gray-100 px-2 py-1 rounded text-xs font-mono break-all">
+              {showFullSessionId ? session.sessionId : `${session.sessionId.substring(0, 16)}...`}
+            </code>
+            <CopyButton text={session.sessionId} />
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-gray-600 font-medium mb-1">Chave Pública</label>
+          <div className="flex items-center">
+            <code className="bg-gray-100 px-2 py-1 rounded text-xs font-mono break-all">
+              {showFullSessionId ? session.publicKey : `${session.publicKey.substring(0, 16)}...`}
+            </code>
+            <CopyButton text={session.publicKey} />
+          </div>
+        </div>
+
+        {showPrivateKey && (
+          <div>
+            <label className="block text-red-600 font-medium mb-1">
+              Chave Privada
+              <span className="text-xs text-red-500 ml-1">(Confidencial)</span>
+            </label>
+            <div className="flex items-center">
+              <code className="bg-red-50 border border-red-200 px-2 py-1 rounded text-xs font-mono break-all">
+                {session.privateKey.substring(0, 16)}...
+              </code>
+              <CopyButton text={session.privateKey} />
+            </div>
+          </div>
+        )}
+
+        <div className="flex gap-4">
+          <div>
+            <label className="block text-gray-600 font-medium mb-1">Status</label>
+            <div className="flex items-center gap-2">
+              <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                isAdmin 
+                  ? 'bg-blue-100 text-blue-800' 
+                  : 'bg-green-100 text-green-800'
+              }`}>
+                {isAdmin ? 'Administrador' : 'Usuário'}
+              </span>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-gray-600 font-medium mb-1">Permissões</label>
+            <div className="flex flex-wrap gap-1">
+              {permissions.map((permission) => (
+                <span
+                  key={permission}
+                  className="px-2 py-0.5 bg-gray-100 text-gray-700 text-xs rounded-full"
+                >
+                  {permission}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex gap-4">
+          <div>
+            <label className="block text-gray-600 font-medium mb-1">Criado em</label>
+            <span className="text-gray-800">{formatDate(session.createdAt)}</span>
+          </div>
+
+          <div>
+            <label className="block text-gray-600 font-medium mb-1">Último uso</label>
+            <span className="text-gray-800">{formatDate(session.lastUsed)}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SessionInfo