Créer un validateur de mot de passe avec React

Introduction

Dans ce tutoriel, nous vous guiderons dans la création d'un validateur de mot de passe simple et efficace à l'aide de React. Ce projet est parfait pour les débutants qui souhaitent s'entraîner à la validation de formulaire et à la gestion des entrées utilisateur dans React.

Aperçu du projet

Le validateur de mot de passe vérifie la force du mot de passe de l'utilisateur en temps réel et indique si le mot de passe répond aux critères d'un mot de passe fort. Les commentaires sont affichés sous le champ de saisie, encourageant les utilisateurs à créer des mots de passe plus sécurisés.

Caractéristiques

• Validation en temps réel : fournit un retour instantané sur la force du mot de passe.
• Interface conviviale : conception simple et épurée pour faciliter le processus de validation du mot de passe.
• Commentaires dynamiques : messages codés par couleur indiquant la force du mot de passe.

Technologies utilisées

• React : Pour créer l'interface utilisateur.
• CSS : Pour styliser l'application.
• Bibliothèque de validateur : Pour valider la force du mot de passe.

Structure du projet

Le projet est structuré comme suit :

├── public
├── src
│   ├── components
│   │   └── Password.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Composants clés

• Password.jsx : Gère la logique de validation et le champ de saisie du mot de passe.
• App.jsx : Encapsule le composant Mot de passe et gère la mise en page de l'application.
• App.css : contient le style de l'application et des composants.

Explication du code

Composant de mot de passe

Le composant Mot de passe est responsable de la gestion des entrées de l'utilisateur et de la validation de la force du mot de passe. Il utilise le hook useState pour gérer le message de validation et la couleur, ainsi que la bibliothèque du validateur pour vérifier la force du mot de passe.

import { useState } from 'react';
import validator from 'validator';

const Password = () => {
  const [validationMessage, setValidationMessage] = useState("");
  const [messageColor, setMessageColor] = useState("black");

  const validate = (value) => {
    if (validator.isStrongPassword(value)) {
      setValidationMessage("Password is Strong!");
      setMessageColor("green");
    } else {
      setValidationMessage("Password is not Strong. Please consider using a mix of uppercase, lowercase letters, numbers, and symbols.");
      setMessageColor("red");
    }
  };

  return (
    <div className="password">
      <form action="post">
        <input type="password" required placeholder="Enter Password" onChange={(e) => validate(e.target.value)} />
        <p style={{ color: messageColor }}>{validationMessage}</p>
      </form>
    </div>
  );
};

export default Password;

Dans ce composant, le hook useState est utilisé pour gérer à la fois le message de validation et sa couleur. La fonction de validation vérifie la force du mot de passe à l'aide de la bibliothèque de validation et met à jour l'état en conséquence.

Composant d'application

Le composant App gère la présentation globale de l'application et restitue le composant Mot de passe.

import Password from "./components/Password";
import "./App.css";

const App = () => {
  return (
    <div className="app">
      <div className="header">
        <h1>Password Validator</h1>
      </div>
      <Password />
      <div className="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  );
};

export default App;

Ce composant structure la mise en page, en fournissant un en-tête et un pied de page, tout en restituant le composant Mot de passe au centre.

Style CSS

Le fichier CSS garantit que la mise en page est simple et réactive. Le champ de saisie est conçu pour être convivial et le message de retour est codé par couleur en fonction de la force du mot de passe.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #f0f0f0;
  color: black;
}

.app {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.header {
  margin-bottom: 10px;
}

.password {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.password input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
}

.password p {
  font-size: 0.8em;
}

.footer {
  margin-top: 100px;
}

La classe .password centre le message de saisie et de validation du mot de passe, et le bouton est conçu pour un look moderne. Les changements de couleur pour le message de validation rendent les commentaires plus intuitifs pour les utilisateurs.

Installation et utilisation

Pour démarrer ce projet, clonez le référentiel et installez les dépendances :

git clone https://github.com/abhishekgurjar-in/password-validator.git
cd password-validator
npm install
npm start

Cela démarrera le serveur de développement et l'application s'exécutera sur http://localhost:3000.

Démo en direct

Découvrez la démo en direct du validateur de mot de passe ici.

Conclusion

Ce validateur de mot de passe est un excellent projet pour acquérir une expérience pratique de la validation de formulaire et de la gestion de l'état dans React. Il enseigne les principes de base de la gestion des saisies utilisateur et des commentaires en temps réel.

Crédits

• Inspiration : Le projet s'inspire du besoin de pratiques de mot de passe sécurisées et de techniques de validation de formulaire.

Auteur

Abhishek Gurjar est un développeur Web passionné par la création d'applications Web interactives et réactives. Vous pouvez suivre son travail sur GitHub.

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!