月: 2024年8月

 

 

import React, { useState } from 'react';
import zxcvbn from 'zxcvbn';

const PasswordStrengthChecker: React.FC = () => {
const [password, setPassword] = useState('');
const [score, setScore] = useState(0);
const [feedback, setFeedback] = useState<{ warning: string, suggestions: string[] }>({ warning: '', suggestions: [] });

const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const newPassword = event.target.value;
setPassword(newPassword);

// zxcvbnでパスワードの強度を評価
const result = zxcvbn(newPassword);
setScore(result.score);
setFeedback(result.feedback);
};

const getStrengthLabel = (score: number) => {
switch (score) {
case 0:
return 'Very Weak';
case 1:
return 'Weak';
case 2:
return 'Fair';
case 3:
return 'Good';
case 4:
return 'Strong';
default:
return '';
}
};

return (
<div>
<input
type="password"
value={password}
onChange={handlePasswordChange}
placeholder="Enter your password"
/>
<div>
<strong>Password Strength:</strong> {getStrengthLabel(score)}
</div>
{feedback.warning && <div><strong>Warning:</strong> {feedback.warning}</div>}
{feedback.suggestions.length > 0 && (
<div>
<strong>Suggestions:</strong>
<ul>
{feedback.suggestions.map((suggestion, index) => (
<li key={index}>{suggestion}</li>
))}
</ul>
</div>
)}
</div>
);
};

export default PasswordStrengthChecker;