password-regex-validation

codeswing.json

{
  "scripts": [],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.16/tailwind.css"
  ]
}

index.html

<div class="container max-w-full mx-auto p-6">
  <div class="font-sans">
    <div
      class="max-w-sm mx-auto p-6 relative border shadow-md rounded-sm bg-white"
    >
      <h3 class="">
        understanding and using regex - open console. // password verification
      </h3>
      <input
        type="text"
        id="pw"
        class="
          rounded-sm
          border border-gray-800
          p-2
          mt-2
          w-full
          focus:outline-none focus:ring focus:border-blue-300
        "
        autofocus
      />
      <div id="passwordstrength" class="w-full h-1 bg-gray-200 relative">
        <div
          id="passwordstrength__bar"
          class="h-full bg-green-500 absolute"
          style="width: 3%"
        ></div>
      </div>
      <div class="mt-2 hidden" id="checkmsgs">
        <p class="p-1 flex">must be 8 characters long</p>
        <p class="p-1 flex">must have a special character(!@#$%^&()',";:'*])</p>
        <p class="p-1 flex">must have a number</p>
        <p class="p-1 flex">must have a Capital letter</p>
        <p class="p-1 flex">must have a lowercase letter</p>
      </div>
    </div>
  </div>

  <svg
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    class="svg-inline--fa fa-check-circle fa-w-64 fa-3x"
    data-icon="check-circle"
    data-prefix="fas"
    viewBox="0 0 512 512"
  >
    <symbol id="icon-check" viewBox="0 0 512 512">
      <path
        fill="currentColor"
        d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
      />
    </symbol>

    <symbol id="icon-cross" viewBox="0 0 512 512">
      <path
        fill="currentColor"
        d="m207.6 256 107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
      />
    </symbol>
  </svg>
</div>

script.js

console.clear();

let checks = [
  {
    title: "length",
    regex: /.{8,}/,
    msg: "must be 8 characters long",
    value: false,
  },
  {
    title: "Caps",
    regex: ".*[A-Z]",
    msg: "must have a Capital letter",
    value: false,
  },
  {
    title: "lowercase",
    regex: ".*[a-z]",
    msg: "must have a lowercase letter",
    value: false,
  },
  {
    title: "Numbers",
    regex: ".*[0-9]",
    msg: "must have a number",
    value: false,
  },
  {
    title: "SpecialChars",
    // regex: /[!@#$%^&*(),.?":{}|<>]/,
    regex: ".*[!@#$%^&()',\";:<>?'*]",
    msg: "must have a special character(!@#$%^&()',\";:?'*) ",
    value: false,
  },
];

let pwstrength = document.getElementById("passwordstrength__bar");
let checkmsgs = document.getElementById("checkmsgs");
let pw = document.getElementById("pw");
pw.addEventListener("focus", () => {
  // console.log(pw, "FOCUS");
  checkmsgs.classList.remove("hidden");
});
pw.addEventListener("input", () => {
  // console.log(pw);
  checkPw(pw.value, checks);
});

// multiple checks on password*
function checkPw(pw, checks) {
  console.clear();
  checkmsgs.innerHTML = "";
  console.log("check PW : ", pw);

  const map1 = checks.map((check) => {
    // sort false to the top, then map over them

    let pwreg = new RegExp(check.regex);
    if (pwreg.test(pw)) {
      check.value = true;
    } else {
      check.value = false;
    }
    console.log(check.title, pw, Object.values(check));
  });

  pwstrength.style.width =
    Object.values(checks).filter((item) => item.value === true).length *
      (100 / checks.length) +
    "%";

  //checks.value.filter(Boolean).length; //'20%'

  const map2 = checks
    .sort(function (a, b) {
      return Number(a.value) - Number(b.value);
    })
    .map((check) => {
      const msg = document.createElement("p");
      msg.classList.add("p-1", "flex", "items-topd");
      msg.innerHTML = check.value
        ? '<svg class="text-green-600 w-4 h-4 mr-2"><use xlink:href="#icon-check"></use></svg>' +
          check.msg
        : '<svg class="text-red-600 w-4 h-4 mr-2"><use xlink:href="#icon-cross"></use></svg>' +
          check.msg;
      msg.style.color = check.value ? "#707070" : "black";

      checkmsgs.appendChild(msg);
    });

  //   // const pw = "abcDEF123$";
  //   let pwreg1 = new RegExp(checks[0].regex);
  //   let pwreg2 = new RegExp(checks[1].regex); //new RegExp(".*[A-Z]");
  //   let pwreg3 = new RegExp(checks[2].regex); //new RegExp(".*[a-z]");
  //   let pwreg4 = new RegExp(checks[3].regex); //new RegExp(".*[0-9]");
  //   let pwreg5 = new RegExp(checks[4].regex); //new RegExp("[^A-Za-z0-9]");

  //   if (pwreg1.test(pw)) {
  //     checks[0].value = true;
  //   } else {
  //     checks[0].value = false;
  //   }
  //   if (pwreg2.test(pw)) {
  //     checks[1].value = true;
  //   } else {
  //     checks[1].value = false;
  //   }
  //   if (pwreg3.test(pw)) {
  //     checks[2].value = true;
  //   } else {
  //     checks[2].value = false;
  //   }
  //   if (pwreg4.test(pw)) {
  //     checks[3].value = true;
  //   } else {
  //     checks[3].value = false;
  //   }
  //   if (pwreg5.test(pw)) {
  //     checks[4].value = true;
  //   } else {
  //     checks[4].value = false;
  //   }

  //   console.log("Length", pw, Object.values(checks[0]));
  //   console.log("CAPS", pw, Object.values(checks[1])); //pwreg2, pwreg2.test(pw));
  //   console.log("lowercase", pw, Object.values(checks[2])); //pw, pwreg3, pwreg3.test(pw));
  //   console.log("Numbers", pw, Object.values(checks[3])); //pwreg4, pwreg4.test(pw));
  //   console.log("Special Chars", pw, pw, Object.values(checks[4])); //pwreg4, pwreg4.test(pw));
  // console.log({ checks }, Object.values(checks));
}

style.scss

body {
  background: #eee;
  padding: 0.5rem;
}
input:focus {
  // outline: 3px dotted red;
}
p {
  // outline: 1px dotted red;
  // min-height: 2px;
  // margin: 0.25rem;
  font-size: 0.9rem;
}

#passwordstrength__bar {
  transition: width 0.3s ease-in-out;
}