Mật khẩu của bạn mạnh đến mức nào? Hướng dẫn về Trình kiểm tra độ mạnh của mật khẩu

const iconAndText = document.querySelector(".icon-text");
const alertText = document.querySelector(".text");
const upperCaseText = document.querySelector(".uppercase");
const lowerCaseText = document.querySelector(".lowercase");
const numbersText = document.querySelector(".numbers");
const symbolsText = document.querySelector(".symbols");

const ALERT_MESSAGES = {
    weak: "Mật khẩu yếu",
    medium: "Mật khẩu trung bình",
    strong: "Mật khẩu mạnh",
    veryStrong: "Mật khẩu rất mạnh"
};

const CHARACTERS = {
    upperCases: /[A-Z]/,
    lowerCases: /[a-z]/,
    numbers: /[0-9]/,
    symbols: /[!,@,#,$,%,^,&,*,?,_,(,),-,+,=,~]/
};

const PASSWORD_LENGTHS = {
    mediumLength: 5,
    strongLength: 7,
    veryStrongLength: 9
};

const COLORS = {
    hasCharacters: "#2E9DEF",
    noPassword: "#000",
    weak: "#FF6333",
    medium: "#CC8500",
    strong: "#D0F731",
    veryStrong: "#22C32A",
};

const hasUppercases = function(password) {
    return password.match(CHARACTERS.upperCases);
};

const hasLowercases = function(password) {
    return password.match(CHARACTERS.lowerCases);
};

const hasNumbers = function(password) {
    return password.match(CHARACTERS.numbers);
};


const hasSymbols = function(password) {
    return password.match(CHARACTERS.symbols);
};

const weakPasswordLength = function(password) {
    return password.length < PASSWORD_LENGTHS.mediumLength;
};

const mediumPasswordLength = function(password) {
    return password.length >= PASSWORD_LENGTHS.mediumLength && password.length < PASSWORD_LENGTHS.strongLength;
};

const strongPasswordLength = function(password) {
    return password.length >= PASSWORD_LENGTHS.strongLength && password.length < PASSWORD_LENGTHS.veryStrongLength;
};

const veryStrongPasswordLength = function(password) {
    return password.length >= PASSWORD_LENGTHS.veryStrongLength;
};

const isWeakPassword = function(hasUpperCases, hasLowerCases, hasNumbers, hasSymbols, weakPasswordLength) {
    return (hasUpperCases || hasLowerCases || hasNumbers || hasSymbols) && weakPasswordLength;
};

const isMediumPassword = function(hasUpperCases, hasLowerCases, hasNumbers, hasSymbols, mediumPasswordLength) {
    return ((hasUpperCases && hasLowerCases) ||
            (hasUpperCases && hasNumbers) ||
            (hasUpperCases && hasSymbols) ||
            (hasLowerCases && hasNumbers) ||
            (hasLowerCases && hasSymbols) ||
            (hasNumbers && hasSymbols)) &&
             mediumPasswordLength;
};

const isStrongPassword = function(hasUpperCases, hasLowerCases, hasNumbers, hasSymbols, strongPasswordLength) {
    return ((hasUpperCases && hasLowerCases && hasNumbers) ||
            (hasUpperCases && hasLowerCases && hasSymbols) ||
            (hasUpperCases && hasNumbers && hasSymbols) ||
            (hasLowerCases && hasNumbers && hasSymbols)) &&
             strongPasswordLength;
};


const isVeryStrongPassword = function(hasUpperCases, hasLowerCases, hasNumbers, hasSymbols, veryStrongPasswordLength) {
    return hasUpperCases && hasLowerCases && hasNumbers && hasSymbols && veryStrongPasswordLength
};

function checkPasswordStrength(weak, medium, strong, veryStrong) {
    indicator.classList.add("active");
    if (weak) {
        alertText.textContent = ALERT_MESSAGES.weak;
        inputPassword.style.borderColor = COLORS.weak;
        showHide.style.color = COLORS.weak;
        iconAndText.style.color = COLORS.weak;
    };

    if (medium) {
        alertText.textContent = ALERT_MESSAGES.medium;
        inputPassword.style.borderColor = COLORS.medium;
        showHide.style.color = COLORS.medium;
        iconAndText.style.color = COLORS.medium;
    };

    if (strong) {
       alertText.textContent = ALERT_MESSAGES.strong;
       inputPassword.style.borderColor = COLORS.strong;
       showHide.style.color = COLORS.strong;
       iconAndText.style.color = COLORS.strong;
    };

    if (veryStrong) {
       alertText.textContent = ALERT_MESSAGES.veryStrong;
       inputPassword.style.borderColor = COLORS.veryStrong;
       showHide.style.color = COLORS.veryStrong;
       iconAndText.style.color = COLORS.veryStrong;
    };
};

function alertFactorMessage(hasUpperCases, hasLowerCases, hasNumbers, hasSymbols) {
    if (hasUpperCases) {
        upperCaseText.style.color = COLORS.hasCharacters;
    } else {
        upperCaseText.style.color = COLORS.noPassword;
    };

    if (hasLowerCases) {
        lowerCaseText.style.color = COLORS.hasCharacters;
    } else {
        lowerCaseText.style.color = COLORS.noPassword;
    };

    if (hasNumbers) {
        numbersText.style.color = COLORS.hasCharacters;
    } else {
        numbersText.style.color = COLORS.noPassword;
    };

    if (hasSymbols) {
        symbolsText.style.color = COLORS.hasCharacters;
    } else {
        symbolsText.style.color = COLORS.noPassword;
    };
};

document.addEventListener('DOMContentLoaded', () => {
    inputPassword.addEventListener("keyup", () => {
        const password = inputPassword.value;
        const hasUpper = hasUppercases(password);
        const hasLower = hasLowercases(password);
        const hasNum = hasNumbers(password);
        const hasSym = hasSymbols(password);
        const isWeak = isWeakPassword(hasUpper, hasLower, hasNum, hasSym, weakPasswordLength(password));
        const isMedium = isMediumPassword(hasUpper, hasLower, hasNum, hasSym, mediumPasswordLength(password));
        const isStrong = isStrongPassword(hasUpper, hasLower, hasNum, hasSym, strongPasswordLength(password));
        const isVeryStrong = isVeryStrongPassword(hasUpper, hasLower, hasNum, hasSym, veryStrongPasswordLength(password));
        checkPasswordStrength(isWeak, isMedium, isStrong, isVeryStrong);
        alertFactorMessage(hasUpper, hasLower, hasNum, hasSym);
    });

     showHide.addEventListener("click", () => {
         if (inputPassword.type === "password") {
             inputPassword.type = "text";
             showHide.classList.replace("fa-eye-slash","fa-eye");
         } else {
             inputPassword.type = "password";
             showHide.classList.replace("fa-eye","fa-eye-slash");
         }
     });
})

​​​​​​.password-strength-checker .input-box {
    position: relative;
}

.input-box .show-hide {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
    padding: 5px;
    cursor: pointer;
}

.input-box .input-password {
    height: 60px;
    width: 100%;
    border: 2px solid #000;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 500;
    outline: none;
    padding: 0 50px 0 16px;
}

.password-strength-checker .indicator {
    display: none;
}

.password-strength-checker .indicator.active {
    display: block;
    margin-top: 14px;
}

.indicator .icon-text {
    display: flex;
    align-items: center;
}

.icon-text .error-icon {
    margin-right: 8px;
    margin-bottom: 11px;
}

.icon-text .text {
    font-size: 20px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}