// 必要なDOM要素を取得
const passwordInput = document.getElementById('password');
const strengthBar = document.getElementById('passwordStrengthBar');
const strengthText = document.getElementById('passwordStrengthText');
const togglePassword = document.getElementById('togglePassword');
const icon = togglePassword.querySelector('i');

// パスワードの強度を更新する関数
const updatePasswordStrength = (password) => {
    // パスワードが入力されていない場合は、ゲージを非表示にし、テキストを更新
    if (password.length === 0) {
        strengthBar.style.width = '0%';
        strengthText.innerHTML = 'パスワードを入力してください';
        return;
    }

    // パスワードの強度を評価
    const result = zxcvbn(password);
    // 強度に応じてゲージのスタイルとクラスを更新
    strengthBar.className = '';
    strengthBar.classList.add(`strength${result.score}`);
    strengthBar.style.width = result.score > 0 ? `${result.score * 25}%` : '10%';

    // 強度レベルに応じたメッセージを配列から選択して表示
    const strengthMessages = [
        '非常に弱い - 文字数を増やしてください',
        '弱い - もう少し複雑にしてください',
        '普通 - より強いパスワードを検討してください',
        '強い - 良いパスワードです',
        '非常に強い - 非常に安全なパスワードです'
    ];
    strengthText.innerHTML = strengthMessages[result.score];
};

// パスワードの表示・非表示を切り替える関数
const togglePasswordVisibility = () => {
    // パスワード入力欄のタイプを切り替え
    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
    passwordInput.setAttribute('type', type);
    // アイコンのクラスを切り替えて、表示・非表示の状態を示す
    icon.classList.toggle('fa-eye');
    icon.classList.toggle('fa-eye-slash');
};

// エンターキーでのフォーム送信を防ぐ関数
const preventFormSubmissionOnEnter = (event) => {
    if (event.key === 'Enter') {
        event.preventDefault(); // エンターキーのデフォルト動作を防止
    }
};

// イベントリスナーを追加
passwordInput.addEventListener('input', (event) => updatePasswordStrength(event.target.value));
togglePassword.addEventListener('click', togglePasswordVisibility);
passwordInput.addEventListener('keydown', preventFormSubmissionOnEnter);