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;