Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

</style>

requirements.forEach((element) => element.classList.add("wrong"));

password.addEventListener("focus", () => {
      passwordAlert.classList.remove("d-none");
      if (!password.classList.contains("is-valid")) {
          password.classList.add("is-invalid");
      }
  });

password.addEventListener("input", () => {
      const value = password.value;
      const isLengthValid = value.length >= 8;
      const hasUpperCase = /[A-Z]/.test(value);
      const hasNumber = /\d/.test(value);
      const hasSpecialChar = /[!@#$%^&*()\[\]{}\\|;:'",<.>/?`~]/.test(value);

leng.classList.toggle("good", isLengthValid);
      leng.classList.toggle("wrong", !isLengthValid);
      bigLetter.classList.toggle("good", hasUpperCase);
      bigLetter.classList.toggle("wrong", !hasUpperCase);
      num.classList.toggle("good", hasNumber);
      num.classList.toggle("wrong", !hasNumber);
      specialChar.classList.toggle("good", hasSpecialChar);
      specialChar.classList.toggle("wrong", !hasSpecialChar);

const isPasswordValid = isLengthValid && hasUpperCase && hasNumber && hasSpecialChar;

if (isPasswordValid) {
          password.classList.remove("is-invalid");
          password.classList.add("is-valid");

requirements.forEach((element) => {
              element.classList.remove("wrong");
              element.classList.add("good");
          });

passwordAlert.classList.remove("alert-warning");
          passwordAlert.classList.add("alert-success");
      } else {
          password.classList.remove("is-valid");
          password.classList.add("is-invalid");

passwordAlert.classList.add("alert-warning");
          passwordAlert.classList.remove("alert-success");
      }
  });

password.addEventListener("blur", () => {
      passwordAlert.classList.add("d-none");
  });
});
</script>

<div class="row">
  <div class="col-6">
    <div class="input-group d-flex">
      <span
        class="input-group-text border-0"
        id="password"
        >
        <i class="fas fa-lock fa-2x me-1"></i>
    </span>
      <input
        type="password"
        class="form-control rounded mt-1"
        placeholder="Type your password"
        aria-label="password"
        aria-describedby="password"
        id="password-input"
      />
      <div class="valid-feedback">Good</div>
      <div class="invalid-feedback">Wrong</div>
    </div>
  </div>

<div
      data-mdb-alert-init class="alert px-4 py-3 mb-0 d-none"
      role="alert"
      data-mdb-color="warning"
      id="password-alert"
      >
      <ul class="list-unstyled mb-0">
        <li class="requirements leng">
          <i class="fas fa-check text-success me-2"></i>
          <i class="fas fa-times text-danger me-3"></i>
          Your password must have at least 8 chars</li>
        <li class="requirements big-letter">
          <i class="fas fa-check text-success me-2"></i>
          <i class="fas fa-times text-danger me-3"></i>
          Your password must have at least 1 big letter.</li>
        <li class="requirements num">
          <i class="fas fa-check text-success me-2"></i>
          <i class="fas fa-times text-danger me-3"></i>
          Your password must have at least 1 number.</li>
        <li class="requirements special-char">
          <i class="fas fa-check text-success me-2"></i>
          <i class="fas fa-times text-danger me-3"></i>
          Your password must have at least 1 special char.</li>
      </ul>
    </div>

</div>
</div>

</body>
</html>