Password Verification Component

app.js

"use client";


import React, { useState } from 'react';
import { EyeIcon, EyeOffIcon } from 'lucide-react';

const PasswordVerification = () => {
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };

  const handleConfirmPasswordChange = (e) => {
    setConfirmPassword(e.target.value);
  };

  const toggleShowPassword = () => {
    setShowPassword(!showPassword);
  };

  return (
    <div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-2xl font-bold mb-4">Password Verification</h2>
      <div className="mb-4">
        <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
          Password
        </label>
        <div className="relative">
          <input
            type={showPassword ? 'text' : 'password'}
            id="password"
            value={password}
            onChange={handlePasswordChange}
            className="w-full px-3 py-2 border rounded-md"
          />
          <button
            type="button"
            onClick={toggleShowPassword}
            className="absolute inset-y-0 right-0 pr-3 flex items-center"
          >
            {showPassword ? (
              <EyeOffIcon className="h-5 w-5 text-gray-400" />
            ) : (
              <EyeIcon className="h-5 w-5 text-gray-400" />
            )}
          </button>
        </div>
      </div>
      <div className="mb-4">
        <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
          Confirm Password
        </label>
        <input
          type="password"
          id="confirmPassword"
          value={confirmPassword}
          onChange={handleConfirmPasswordChange}
          className="w-full px-3 py-2 border rounded-md"
        />
      </div>
      <div className="mt-4">
        <h3 className="text-lg font-semibold mb-2">Password Comparison</h3>
        <div className="flex flex-wrap">
          {password.split('').map((char, index) => (
            <span
              key={index}
              className={`inline-block w-8 h-8 mr-1 mb-1 text-center leading-8 rounded ${index < confirmPassword.length
                  ? char === confirmPassword[index]
                    ? 'bg-green-200'
                    : 'bg-red-200'
                  : 'bg-gray-200'
                }`}
            >
              {'•'}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
};

export default PasswordVerification;

Password Verification Component

This React component provides a user-friendly interface for password input and verification. It includes real-time visual feedback to help users ensure their password confirmation matches their initial input.

Features

• Two password input fields: one for the initial password and one for confirmation
• Real-time character-by-character comparison
• Visual feedback with color-coded highlighting:
  • Green for matching characters
  • Red for non-matching characters
  • Gray for characters not yet entered in the confirmation field
• Toggle button to show/hide the password
• Responsive design using Tailwind CSS

Installation

1. Make sure you have React and Tailwind CSS set up in your project.

2. Install the required dependencies:

   npm install lucide-react
   

   or if you're using yarn:

   yarn add lucide-react
   

3. Copy the PasswordVerification.js component into your project.

Usage

Import and use the component in your React application:

import React from 'react';
import PasswordVerification from './path/to/PasswordVerification';

function App() {
  return (
    <div className="App">
      <PasswordVerification />
    </div>
  );
}

export default App;

Customization

You can customize the component's appearance by modifying the Tailwind CSS classes in the component file. The component uses Tailwind's utility classes for styling, making it easy to adjust colors, spacing, and other visual properties.

Dependencies

• React
• lucide-react (for the eye icon in the password visibility toggle)
• Tailwind CSS (for styling)

Created by George Chakama