Password Protect Funnel

Instructions:

Copy the JavaScript code below
Paste the code into:
Edit Funnel > Tracking Code > Footer Code

You see a comment called – const pin_code = “1234”;

Change your desired password between the two quotations, Remember never to delete two quotations.

JavaScript Code Start Here:
Copy and paste this code to Funnel setting > Tracking code > Footer Code

<script>
!(function () {
  const pin_code = "1234";

  const head = document.querySelector("head");
  const style = document.createElement("style");
  head.append(style);
  style.innerHTML = `
    @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
    #__nuxt {display: none}
    .password_container {
      display: flex;
      width: 100%;
      height: 100vh;
      justify-content: center;
      align-items: center;
      padding: 1rem;
    }
    .password_container .form-group {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 400px;
    }
    .password_container form {
      max-width: 500px;
      display: flex;
      margin: 0 auto;
      width: 100%;
      justify-content: center;
      align-items: center;
      padding: 1.5rem;
      box-shadow: 0px 0px 8px #ccc;
      border-radius: 10px;
    }
    .password_container .password_input {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      gap: 5px;
    }
    .password_container label {
      margin-bottom: 10px;
      font-size: 20px;
      font-family: "Roboto";
    }
    .password_container .form-group i {
      font-size: 100px;
      color: #ccc;
    }
    .password_container .password_input input {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 50px;
      max-height: 50px;
      min-height: 50px;
      border: 1px solid #ddd;
      box-shadow: 0px 50px 80px #ddd;
      border-radius: 5px;
      text-align: center;
    }
    .password_container .password_input input:focus {
      outline: 2px solid #ccc;
    }
    .password_container .error{
      color: red;
      margin-top: 10px;
      font-weight: 600;
    }`;

  const body = document.querySelector("body");
  const mainElement = document.querySelector("#__nuxt");
  mainElement.remove();

  const password_container = document.createElement("div");
  password_container.classList.add("password_container");
  password_container.innerHTML = `
<form>
 <div class="form-group">
  <i class="fas fa-lock"></i>
  <label for="password">Enter your password</label>
  <div class="password_input">
    <input type="password" name="p1" maxlength="1"/>
    <input type="password" name="p2" maxlength="1"/>
    <input type="password" name="p3" maxlength="1"/>
    <input type="password" name="p4" maxlength="1"/>
  </div>
  <span class="error"><span>
 </div>
</form>
`;
  body.append(password_container);
  const errorElement = password_container.querySelector(".error");

  const inputs = [...password_container.querySelectorAll("input")];
  const url = new URL(location.href);
  let submited = "";

  const updateInputByParams = (input) => {
    if (input.name === "p1") {
      input.value = url.searchParams.get("p1");
    }

    if (input.name === "p2") {
      input.value = url.searchParams.get("p2");
    }

    if (input.name === "p3") {
      input.value = url.searchParams.get("p3");
    }

    if (input.name === "p4") {
      input.value = url.searchParams.get("p4");
    }

    submited += input.value;
  };

  inputs.forEach((input, index) => {
    updateInputByParams(input);
    input.addEventListener("input", (e) => {
      const target = e.target;
      const value = target.value;

      if (target.name === "p1") {
        inputs[1].value = "";
        inputs[2].value = "";
        inputs[3].value = "";
        submited = "";
        errorElement.innerHTML = "";
      }

      submited += value;
      const nextInput = inputs[index + 1];
      if (nextInput) inputs[index + 1].focus();
      if (submited.length !== 4) return;

      if (submited === pin_code) {
        body.prepend(mainElement);
        mainElement.style.display = "block";
        password_container.remove();
      } else {
        errorElement.innerHTML = "Password not match!";
      }
    });
  });

  if (submited === pin_code) {
    body.prepend(mainElement);
    mainElement.style.display = "block";
    password_container.remove();
  } else {
    if (submited) {
      errorElement.innerHTML = "Password not match!";
    }
  }
})();
</script>