captcha-im-widget

Captcha Component

Un composant React réutilisable pour l'intégration de CAPTCHA dans vos applications web.

Installation

npm install captcha-component

Utilisation de base

import React, { useState } from 'react';
import Captcha from 'captcha-component';

function App() {
  const [captchaValue, setCaptchaValue] = useState('');
  const [reset, setReset] = useState(false);

  const handleCaptchaChange = (value) => {
    setCaptchaValue(value);
  };

  const handleReset = () => {
    setReset(!reset);
  };

  return (
    <div>
      <Captcha 
        onChange={handleCaptchaChange}
        reset={reset}
      />
      <button onClick={handleReset}>Reset CAPTCHA</button>
      <p>Valeur saisie: {captchaValue}</p>
    </div>
  );
}

export default App;

Props

Prop	Type	Défaut	Description
reset	boolean	false	Force le rechargement du CAPTCHA
onChange	function	-	Callback appelé quand la valeur d'entrée change
onCaptchaTextChange	function	-	Callback appelé quand le texte CAPTCHA change
style	object	{}	Styles pour l'icône de rafraîchissement
error	object	-	Objet d'erreur à afficher
apiEndpoint	string	'/api/generate-captcha'	URL de l'API CAPTCHA
httpMethod	string	'GET'	Méthode HTTP pour l'API
placeholder	string	'Entrer CAPTCHA'	Placeholder du champ de saisie
refreshTooltip	string	'Refresh CAPTCHA'	Texte du tooltip de rafraîchissement
errorMessage	string	'Captcha verification failed'	Message d'erreur par défaut
makeApiCall	function	-	Fonction personnalisée pour les appels API
sessionStorageKey	string	'sessionId'	Clé de stockage pour l'ID de session
captchaStorageKey	string	'captcha'	Clé de stockage pour le texte CAPTCHA
inputStyle	object	{}	Styles personnalisés pour le champ de saisie
containerStyle	object	{}	Styles personnalisés pour le conteneur
imageStyle	object	{}	Styles personnalisés pour l'image CAPTCHA
refreshIconComponent	component	-	Composant personnalisé pour l'icône de rafraîchissement
tooltipComponent	component	-	Composant personnalisé pour les tooltips
errorComponent	component	-	Composant personnalisé pour l'affichage des erreurs

Exemples avancés

Avec fonction API personnalisée

import Captcha from 'captcha-component';

const customApiCall = async (method, url, data, headers) => {
  // Votre logique d'appel API personnalisée
  const response = await fetch(url, {
    method,
    headers: {
      ...headers,
      'Authorization': 'Bearer your-token'
    },
    body: data ? JSON.stringify(data) : undefined
  });
  return response.json();
};

function App() {
  return (
    <Captcha 
      makeApiCall={customApiCall}
      apiEndpoint="https://your-api.com/captcha"
    />
  );
}

Avec composants personnalisés

import Captcha from 'captcha-component';
import { RefreshIcon } from 'your-icon-library';

const CustomRefreshIcon = () => (
  <RefreshIcon className="custom-refresh-icon" />
);

const CustomTooltip = ({ children, tooltip }) => (
  <div className="custom-tooltip" title={tooltip}>
    {children}
  </div>
);

const CustomError = ({ error, message }) => (
  <div className="custom-error-display">
    {error?.data?.detail && <span>{message}</span>}
  </div>
);

function App() {
  return (
    <Captcha 
      refreshIconComponent={CustomRefreshIcon}
      tooltipComponent={CustomTooltip}
      errorComponent={CustomError}
    />
  );
}

Avec styles personnalisés

import Captcha from 'captcha-component';

function App() {
  const customStyles = {
    container: {
      backgroundColor: '#f5f5f5',
      padding: '20px',
      borderRadius: '8px'
    },
    input: {
      fontSize: '16px',
      fontFamily: 'Arial, sans-serif',
      border: '2px solid #007bff'
    },
    image: {
      border: '1px solid #ddd',
      borderRadius: '4px'
    }
  };

  return (
    <Captcha 
      containerStyle={customStyles.container}
      inputStyle={customStyles.input}
      imageStyle={customStyles.image}
    />
  );
}

Format de réponse API attendu

Le composant attend une réponse API dans l'un des formats suivants :

Pour CAPTCHA image :

{
  "data": {
    "image": "base64-encoded-image-string",
    "sessionId": "session-identifier"
  }
}

Pour CAPTCHA texte :

{
  "data": {
    "captchaText": "text-captcha-content",
    "sessionId": "session-identifier"
  }
}

Personnalisation CSS

Le composant utilise les classes CSS suivantes que vous pouvez personnaliser :

• .captcha-container - Conteneur principal
• .captcha-image-container - Conteneur de l'image
• .captcha-image - Image CAPTCHA
• .captcha-input-container - Conteneur du champ de saisie
• .captcha-input - Champ de saisie
• .captcha-refresh-btn - Bouton de rafraîchissement
• .captcha-error - Affichage des erreurs

Dépendances

• React >= 16.8.0
• react-dom >= 16.8.0

Licence

ISC

Contribution

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou soumettre une pull request.