Modèle de page de connexion React Code source

Dans le paysage actuel du développement Web, la création d'une page de connexion attrayante et conviviale est cruciale pour toute application. Cet article vous guidera tout au long du processus de création d'une page de connexion riche en fonctionnalités et glissante à l'aide de React. Nous créerons un design moderne et réactif qui transitionne de manière transparente entre les modes de connexion et d'inscription, avec des transitions animées et des options de connexion aux réseaux sociaux.

Aperçu de la page de connexion

Aperçu de la page d'inscription

Mise en place du projet

Tout d’abord, assurez-vous que React est configuré dans votre projet. Nous utiliserons également quelques bibliothèques supplémentaires :

• Framer Motion pour les animations
• Lucide React pour les icônes
• Tailwind CSS pour le style

Vous pouvez installer ces dépendances en utilisant npm ou Yarn :

npm install react framer-motion lucide-react
# or
yarn add react framer-motion lucide-react

Assurez-vous également que Tailwind CSS est configuré dans votre projet.

Création du composant de connexion/inscription

Commençons par créer notre composant principal, LoginSignupPage. Ce composant gérera l'état et le rendu de notre formulaire de connexion/inscription.

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Mail, Lock, User, ArrowRight, Github, Twitter } from 'lucide-react';

const LoginSignupPage = () => {
  const [isLogin, setIsLogin] = useState(true);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');

  const toggleMode = () => setIsLogin(!isLogin);

  // ... (rest of the component)
};

export default LoginSignupPage;

Ici, nous importons les dépendances nécessaires et configurons notre composant avec des variables d'état pour les champs du formulaire et une bascule pour basculer entre les modes de connexion et d'inscription.

Création de champs de saisie réutilisables

Pour garder notre code SEC (Ne vous répétez pas), créons un composant InputField réutilisable :

const InputField = ({ icon: Icon, placeholder, type, value, onChange }) => (
  <div className="flex items-center bg-gray-100 p-3 rounded-lg">
    <Icon className="text-gray-500 mr-3" size={20} />
    <input
      type={type}
      placeholder={placeholder}
      value={value}
      onChange={onChange}
      className="bg-transparent outline-none flex-1 text-gray-800"
    />
  </div>
);

Ce composant prend comme accessoires une icône, un texte d'espace réservé, un type d'entrée, une valeur et une fonction onChange. Il affiche un champ de saisie stylisé avec une icône, ce qui donne à notre formulaire un aspect élégant et cohérent.

Construire le formulaire

Maintenant, créons la structure principale de notre formulaire de connexion/inscription :

return (
  <div className="flex flex-col md:flex-row h-screen bg-gray-100">
    <div className="w-full md:w-1/2 bg-white flex items-center justify-center p-8 md:p-16">
      <div className="w-full max-w-md">
        <AnimatePresence mode="wait">
          <motion.div
            key={isLogin ? 'login' : 'signup'}
            initial="hidden"
            animate="visible"
            exit="hidden"
            variants={formVariants}
            transition={{ duration: 0.3 }}
          >
            <h1 className="text-3xl md:text-4xl font-bold mb-8 text-gray-800">
              {isLogin ? 'Welcome back' : 'Create account'}
            </h1>
            <div className="space-y-4">
              {!isLogin && (
                <InputField 
                  icon={User} 
                  placeholder="Full Name" 
                  type="text" 
                  value={name} 
                  onChange={(e) => setName(e.target.value)} 
                />
              )}
              <InputField 
                icon={Mail} 
                placeholder="Email" 
                type="email" 
                value={email} 
                onChange={(e) => setEmail(e.target.value)} 
              />
              <InputField 
                icon={Lock} 
                placeholder="Password" 
                type="password" 
                value={password} 
                onChange={(e) => setPassword(e.target.value)} 
              />
            </div>
            {/* ... (submit button and social login options) */}
          </motion.div>
        </AnimatePresence>
      </div>
    </div>
    {/* ... (right side panel) */}
  </div>
);

Ce code crée une mise en page responsive avec le formulaire sur le côté gauche. Nous utilisons AnimatePresence et motion.div de Framer Motion pour ajouter des transitions fluides lors du basculement entre les modes de connexion et d'inscription.

Ajout du bouton Soumettre et des options de connexion sociale

Ajoutons un bouton d'envoi et des options de connexion sociale à notre formulaire :

<div className="mt-8">
  <button
    className={`text-white px-6 py-3 rounded-lg w-full flex items-center justify-center ${isLogin ? 'bg-blue-600' : 'bg-green-600'}`}
  >
    {isLogin ? 'Sign In' : 'Sign Up'} <ArrowRight className="ml-2" size={20} />
  </button>
</div>
{isLogin && (
  <div className="mt-6 flex justify-center space-x-4">
    <button className="p-2 bg-gray-200 rounded-full">
      <Github className="text-gray-700 hover:text-white" size={24} />
    </button>
    <button className="p-2 bg-gray-200 rounded-full">
      <Twitter className="text-gray-700 hover:text-white" size={24} />
    </button>
  </div>
)}

Ce code ajoute un bouton de soumission qui change la couleur et le texte en fonction du mode actuel (connexion ou inscription). Pour le mode de connexion, nous ajoutons également des options de connexion sociale pour GitHub et Twitter.

Création du panneau latéral glissant

Pour compléter notre page de connexion glissante, ajoutons un panneau latéral qui permet aux utilisateurs de basculer entre les modes de connexion et d'inscription :

<div 
  className={`w-full md:w-1/2 flex items-center justify-center p-8 md:p-16 ${isLogin ? 'bg-blue-600' : 'bg-green-600'}`}
>
  <div className="text-center">
    <h2 className="text-3xl md:text-4xl font-bold mb-6 text-white">
      {isLogin ? 'New here?' : 'Already have an account?'}
    </h2>
    <p className="text-gray-200 mb-8">
      {isLogin 
        ? 'Sign up and discover a great amount of new opportunities!' 
        : 'Sign in to access your account and continue your journey!'}
    </p>
    <button
      className="bg-white px-6 py-3 rounded-lg"
      style={{ color: isLogin ? '#2563EB' : '#059669' }}
      onClick={toggleMode}
    >
      {isLogin ? 'Sign Up' : 'Sign In'}
    </button>
  </div>
</div>

Ce panneau latéral modifie son contenu et sa couleur en fonction du mode actuel. Le bouton permet aux utilisateurs de basculer entre les modes de connexion et d'inscription, déclenchant la fonction toggleMode que nous avons définie précédemment.

Ajout d'animations

Pour rendre notre page de connexion plus attrayante, nous avons utilisé Framer Motion pour les animations. Voici comment nous avons défini les variantes d'animation :

const formVariants = {
  hidden: { opacity: 0, x: -30 },
  visible: { opacity: 1, x: 0 },
};

Ces variantes sont appliquées au motion.div enveloppant notre formulaire, créant un effet de transition en douceur lors du basculement entre les modes de connexion et d'inscription.

Conclusion

En suivant ce guide, vous avez créé une page de connexion riche en fonctionnalités et glissante à l'aide de React. Cette page de connexion comprend :

1. Conception réactive qui fonctionne à la fois sur mobile et sur ordinateur
2. Animations fluides lors du basculement entre les modes de connexion et d'inscription
3. Composants d'entrée réutilisables avec icônes
4. Options de connexion sociale
5. Un panneau latéral coulissant pour un changement de mode facile

Cette page de connexion moderne et attrayante offrira une excellente expérience utilisateur pour votre application. N'oubliez pas d'ajouter une validation de formulaire appropriée et de connecter la soumission du formulaire à votre système d'authentification backend pour compléter la fonctionnalité.

N'hésitez pas à personnaliser les couleurs, à ajouter plus de champs ou à incorporer des fonctionnalités supplémentaires pour rendre cette page de connexion parfaite pour les besoins spécifiques de votre projet !

Foire aux questions (FAQ)

Après avoir lu cet article, les développeurs débutants et expérimentés pourraient avoir quelques questions. Voici quelques FAQ courantes :

Pour les débutants :

1. Q : Dois-je connaître Tailwind CSS pour implémenter cette page de connexion ?
   R : Bien que l'exemple utilise Tailwind CSS pour le style, vous n'avez pas nécessairement besoin de l'utiliser. Vous pouvez remplacer les classes Tailwind par vos propres styles CSS. Cependant, apprendre Tailwind CSS peut accélérer votre processus de développement.

2. Q : Qu'est-ce que Framer Motion et est-il nécessaire pour ce projet ?
   R : Framer Motion est une bibliothèque d'animation populaire pour React. Il est utilisé dans ce projet pour créer des transitions fluides entre les modes de connexion et d'inscription. Bien que cela ne soit pas strictement nécessaire, cela améliore considérablement l’expérience utilisateur. Vous pouvez implémenter la page de connexion sans animations si vous préférez.

3. Q : Comment gérer la soumission et la validation du formulaire ?
   R : Cet exemple n'inclut pas la soumission ou la validation du formulaire. Vous devrez ajouter un gestionnaire onSubmit au formulaire et implémenter une logique de validation. Pensez à utiliser des bibliothèques comme Formik ou React-hook-form pour une gestion de formulaire plus complexe.

4. Q : Puis-je utiliser cette page de connexion avec n'importe quel backend ?
   R : Oui, cette page de connexion est uniquement frontale et peut être intégrée à n’importe quel backend. Vous devrez modifier la logique de soumission du formulaire pour envoyer des requêtes à votre API backend spécifique.

5. Q : Comment puis-je ajouter plus d'options de connexion sociale ?
   R : Pour ajouter davantage d'options de connexion sociale, vous pouvez créer des boutons supplémentaires similaires aux boutons GitHub et Twitter. Vous devrez implémenter la logique d'authentification réelle pour chaque fournisseur séparément.

Pour les développeurs seniors :

1. Q : Comment ce composant peut-il être optimisé pour les performances ?
   R : Certaines stratégies d'optimisation incluent :

   • Mémoire du composant InputField avec React.memo
   • Utilisation du hook useCallback pour les gestionnaires d'événements
   • Mise en œuvre du fractionnement de code pour charger les composants de connexion sociale à la demande

2. Q : Quelles considérations doivent être prises en compte en matière d'accessibilité ?
   R : Pour améliorer l'accessibilité :

   • Ajoutez des étiquettes d'aria appropriées aux entrées et aux boutons
   • Assurer une hiérarchie de titres correcte
   • Implémenter la navigation au clavier pour l'interface glissante
   • Fournir des alternatives de texte pour les boutons contenant uniquement des icônes

3. Q : Comment rendre ce composant plus réutilisable dans différents projets ?
   R : Pour augmenter la réutilisabilité :

   • Extraire la palette de couleurs et le style dans une configuration de thème
   • Créez un composant d'ordre supérieur ou un hook personnalisé pour gérer la logique d'authentification
   • Utiliser des variables d'environnement pour les points de terminaison de l'API et les ID client

4. Q : Quelles stratégies de test recommanderiez-vous pour ce composant ?
   R : Envisagez de mettre en œuvre :

   • Tests unitaires pour des composants individuels à l'aide de la bibliothèque de tests Jest et React
   • Tests d'intégration pour la soumission de formulaire et le changement de mode
   • Tests de bout en bout utilisant Cypress ou Playwright pour tester le flux utilisateur complet

5. Q : Comment géreriez-vous la gestion de l'état pour une application plus grande intégrant cette page de connexion ?
   R : Pour les applications plus importantes, pensez à :

   • Utilisation de l'API Context pour la gestion de l'état local
   • Implémentation de Redux ou MobX pour la gestion globale de l'état
   • Utilisation de React Query ou SWR pour la gestion de l'état du serveur

6. Q : Quelles considérations de sécurité doivent être prises en compte ?
   R : Les considérations de sécurité importantes incluent :

   • Mise en œuvre de HTTPS pour toutes les communications
   • Utilisation de cookies sécurisés HTTP uniquement pour stocker les jetons d'authentification
   • Mise en œuvre de la protection CSRF
   • Tentatives de connexion à limitation de débit pour empêcher les attaques par force brute
   • Envisager les options d'authentification à deux facteurs

Cet article sera vraiment utile pour les débutants !! Bon codage❣️.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!