Password Strength Checker đơn giản bằng HTML, CSS và Javascript

Password Strength Checker đơn giản bằng HTML, CSS và Javascript

Xin chào mọi người,

Trong quá trình bảo mật thông tin trực tuyến, việc sử dụng mật khẩu mạnh là rất quan trọng. Để giúp người dùng tạo ra các mật khẩu mạnh và an toàn hơn, "Password Strength Checker" ra đời - một công cụ đơn giản nhưng hữu ích để kiểm tra sức mạnh của mật khẩu. Chúng ta có thể dễ dàng thực hiện công cụ này bằng việc sử dụng HTML, CSS và JavaScript.

Thông qua việc kết hợp các ngôn ngữ này, chúng ta có thể tạo ra một giao diện đơn giản cho người dùng nhập mật khẩu và nhận phản hồi về mức độ mạnh yếu của mật khẩu mà họ nhập. Như vậy, chúng ta giúp họ tự đánh giá và cải thiện tính bảo mật của tài khoản cá nhân.

Dưới đây là một ví dụ về cách tạo "Password Strength Checker" sử dụng HTML để xây dựng giao diện, CSS để tạo kiểu và động hoạt, và JavaScript để phân tích mật khẩu và đánh giá mức độ mạnh yếu. Hãy cùng nhau khám phá cách thực hiện công cụ hữu ích này và tạo ra môi trường trực tuyến an toàn hơn cho người dùng!

Bước 1: Thêm HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Password Strength Checker</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h2>Password Strength Checker</h2>
      <div class="inputBox">
        <input type="password" placeholder="password" id="password" />
        <div class="show"></div>
      </div>
      <div class="message"></div>
      <div class="strengthLine"></div>
    </div>
  </body>
  <script src="./main.js"></script>
</html>

Bước 2: Thêm CSS


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #222;
}

.container {
    position: relative;
    width: 400px;
    padding: 30px;
    background-color: #333;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #111;
    gap: 10px;
    padding-bottom: 70px;
    -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0005);
}

.container h2 {
    color: #666;
    font-weight: 500;
}

.container .inputBox {
    position: relative;
    width: 100%;
}

.container .inputBox input {
    position: relative;
    width: 100%;
    background-color: #222;
    border: none;
    outline: none;
    padding: 10px;
    color: #fff;
    font-size: 16px;
}

.container .strengthLine {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    font-size: 12px;
    background-color: #222;
}

.container .message {
    position: absolute;
    bottom: 30px;
    left: 30px;
    width: fit-content;
    height: 30px;
    font-size: 12px;
    color: rgb(169, 35, 35);
    transition: all 0.3s;
}

.container .strengthLine::before {
    content: '';
    position: absolute;
    width: 0%;
    height: 100%;
    transition: all 0.3s;
}

.container.weak .strengthLine::before {
    width: 10%;
    background-color: #f00;
}

.container.medium .strengthLine::before {
    width: 30%;
    background-color: rgb(255, 196, 0);
}

.container.strong .strengthLine::before {
    width: 70%;
    background-color: rgb(89, 255, 0);
}

.container.very-strong .strengthLine::before {
    width: 100%;
    background-color: rgb(12, 117, 0);
}

.container .strengthLine::after {
    content: '';
    position: absolute;
    bottom: 18px;
    left: 30px;
    transition: all 0.5s;
}

.container.weak .strengthLine::after {
    content: 'Your password is weak.';
    color: rgb(169, 35, 35);
    font-size: 12px;
}

.container.medium .strengthLine::after {
    content: 'Your password is medium.';
    color: rgb(255, 196, 0);
    font-size: 12px;
}

.container.strong .strengthLine::after {
    content: 'Your password is strong.';
    color: rgb(89, 255, 0);
    font-size: 12px;
}

.container.very-strong .strengthLine::after {
    content: 'Your password is very strong.';
    color: rgb(12, 117, 0);
    font-size: 12px;
}

.show {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background-color: #333;
    border: 6px solid #222;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.show::before {
    content: 'Show';
    font-size: 8px;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.show.hide::before {
    content: 'Hide';
}


/* UI bên dưới phần mô tả */

Bước 3: Thêm Javascript


const password = document.querySelector("#password");
const showBtn = document.querySelector(".show");

showBtn.onclick = () => {
  if (password.type === "password") {
    password.setAttribute("type", "text");
    showBtn.classList.add("hide");
  } else {
    password.setAttribute("type", "password");
    showBtn.classList.remove("hide");
  }
};

function handlePassword(password) {
  const hasLowerCase = /[a-z]/.test(password);
  const hasUpperCase = /[A-Z]/.test(password);
  const hasDigit = /[0-9]/.test(password);
  const hasSpecialChar = /[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/.test(password);
  const isValidLength = password.length >= 8 && password.length <= 20;

  let strength = 0;

  if (hasLowerCase) strength++;
  if (hasUpperCase) strength++;
  if (hasDigit) strength++;
  if (hasSpecialChar) strength++;

  return {
    strength: strength,
    validLength: isValidLength,
  };
}

const container = document.querySelector(".container");
const message = document.querySelector(".message");

password.addEventListener("keyup", (e) => {
  let value = handlePassword(e.target.value);

  if (value.validLength) {
    container.classList.add("valid");
    message.innerHTML = "";
  } else if (!value.validLength && e.target.value === "") {
    container.classList.remove("valid");
    message.innerHTML = "";
  } else {
    message.innerHTML = "Password must be at least 8 and less than 20.";
  }

  switch (value.strength) {
    case 1:
      container.classList.add("weak");
      container.classList.remove("medium");
      container.classList.remove("strong");
      container.classList.remove("very-strong");
      break;
    case 2:
      container.classList.remove("weak");
      container.classList.add("medium");
      container.classList.remove("strong");
      container.classList.remove("very-strong");
      break;
    case 3:
      container.classList.remove("weak");
      container.classList.remove("medium");
      container.classList.add("strong");
      container.classList.remove("very-strong");
      break;
    case 4:
      container.classList.remove("weak");
      container.classList.remove("medium");
      container.classList.remove("strong");
      container.classList.add("very-strong");
      break;

    default:
      container.classList.remove("weak");
      container.classList.remove("medium");
      container.classList.remove("strong");
      container.classList.remove("very-strong");
      break;
  }
});

Full tutorial:


Hoàn thành

Tóm lại, "Password Strength Checker" không chỉ là một công cụ hữu ích để tăng cường tính bảo mật trực tuyến mà còn là một ví dụ minh chứng cho khả năng kết hợp giữa HTML, CSS và JavaScript trong việc tạo ra các ứng dụng đơn giản và hữu ích trên web. Bằng cách áp dụng kiến thức từ bài viết này, bạn có thể tạo ra các công cụ hỗ trợ người dùng trong việc duy trì tính bảo mật cá nhân.

Hãy tận dụng kiến thức này để phát triển những ứng dụng tương tự và đóng góp vào việc tạo nên một môi trường trực tuyến an toàn và bảo mật hơn cho mọi người. Chúc bạn thành công trong việc ứng dụng các khái niệm và kỹ thuật này vào các dự án web của bạn!

No comments:

Powered by Blogger.