if (
  document.getElementsByClassName("credentials_input_password").length == 2 &&
  document.getElementsByClassName("credentials_input_password")[1].getAttribute("name") == "_F5_verify_password"
) {
  const field1 = document.getElementsByClassName("credentials_input_password")[0];
  const field2 = document.getElementsByClassName("credentials_input_password")[1];
  const logonButton = document.getElementsByClassName("credentials_input_submit")[0];

  logonButton.value = "Change";
  logonButton.disabled = true;
  field2.disabled = true;

  field1.onfocus = () => {
    document.getElementById("password_complexity").style.display = "block";
  };

  field2.onfocus = () => {
    document.getElementById("password_match").style.display = "block";
    document.getElementById("password_complexity").style.display = "none";
  };

  field2.onblur = () => {
    document.getElementById("password_match").style.display = "none";
  };

  field1.onkeyup = () => {
    const password = field1.value;

    const checks = {
      letter: /^[a-zA-Z]/.test(password),
      capital: /[A-Z]/.test(password),
      number: /\d/.test(password),
      length: password.length >= 12,
      symbol: /[^a-zA-Z0-9]/.test(password)
    };

    for (let key in checks) {
      const elem = document.getElementById(key);
      elem.classList.toggle("valid", checks[key]);
      elem.classList.toggle("invalid", !checks[key]);
    }

    const validCount = Object.values(checks).filter(Boolean).length;
    const percent = Math.floor((validCount / Object.keys(checks).length) * 100);

    const pcbar = document.getElementById("pcbar");
    pcbar.style.width = `${percent}%`;
    pcbar.innerHTML = percent > 0 ? `${percent}%` : "";

    if (percent < 40) {
      pcbar.style.backgroundColor = "#dc3545";
    } else if (percent < 70) {
      pcbar.style.backgroundColor = "#ffc107";
      pcbar.style.color = "#000";
    } else {
      pcbar.style.backgroundColor = "#28a745";
      pcbar.style.color = "#fff";
    }

    const allValid = Object.values(checks).every(Boolean);
    field2.disabled = !allValid;
  };

  field2.onkeyup = () => {
    const match = document.getElementById("match");
    const pmbar = document.getElementById("pmbar");

    const isMatch = field1.value === field2.value;
    match.classList.toggle("valid", isMatch);
    match.classList.toggle("invalid", !isMatch);
    logonButton.disabled = !isMatch;

    pmbar.style.background = isMatch
      ? "linear-gradient(to bottom, #0d8f34, #4CAF50)"
      : "linear-gradient(to bottom, #fa8c05, red)";
    pmbar.style.width = isMatch ? "100%" : "5%";
    pmbar.innerHTML = isMatch ? "100%" : "";
  };
}

// UI Elements
const tableFooter = document.getElementById("credentials_table_footer");
tableFooter.style.cssText = "vertical-align:top;";

let toolTip = "Password must contain the following:";
toolTip += '<p id="letter" class="invalid">&nbsp;&nbsp;Begin with a <b>letter</b></p>';
toolTip += '<p id="capital" class="invalid">&nbsp;&nbsp;Include an <b>uppercase</b> letter</p>';
toolTip += '<p id="number" class="invalid">&nbsp;&nbsp;Include a <b>number</b></p>';
toolTip += '<p id="length" class="invalid">&nbsp;&nbsp;At least <b>12 characters</b></p>';
toolTip += '<p id="symbol" class="invalid">&nbsp;&nbsp;Include a <b>special character</b></p>';

const passwordComplexity = document.createElement("div");
passwordComplexity.style.cssText = "position:relative;display:none;padding-left:15px;padding-right:20px;";
passwordComplexity.id = "password_complexity";
passwordComplexity.innerHTML += "Password requirements:";
passwordComplexity.innerHTML +=
  '<div id="pcprogress"><span class="tooltiptext">' + toolTip + '</span><div id="pcbar"></div></div>';
tableFooter.appendChild(passwordComplexity);

let pmToolTip = "Password must match:";
pmToolTip += '<p id="match" class="invalid">&nbsp;&nbsp;Passwords match</p>';

const passwordMatch = document.createElement("div");
passwordMatch.style.cssText = "position:relative;display:none;padding-left:15px;padding-right:20px;";
passwordMatch.id = "password_match";
passwordMatch.innerHTML = "Password verification:";
passwordMatch.innerHTML +=
  '<div id="pmprogress"><span class="pmtooltiptext">' + pmToolTip + '</span><div id="pmbar"></div></div>';
tableFooter.appendChild(passwordMatch);

const style = document.createElement("style");
style.innerHTML = `
  #password_match p, #password_complexity p {
    margin: 0;
    font-size: 16px;
  }
  #pcprogress, #pmprogress {
    width: 85%;
    height: 21px;
    border: #c8c8c8 solid 1px;
    background-color: #ebebe4;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-top: 5px;
  }
  #pcbar, #pmbar {
    width: 0%;
    height: 21px;
    background: linear-gradient(to bottom, #0d8f34, #4CAF50);
    border-radius: 3px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f8f8f8;
    font-weight: bold;
    transition: width 0.3s, background-color 0.3s;
  }
  .tooltiptext, .pmtooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: #f8f8f8;
    color: #000;
    text-align: left;
    padding: 5px 10px;
    border-radius: 6px;
    border: solid #c0c0c0 1px;
    position: absolute;
    z-index: 1;
    left: 85%;
  }
  .tooltiptext::after, .pmtooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #c0c0c0 transparent transparent;
  }
  #pcprogress:hover .tooltiptext,
  #pmprogress:hover .pmtooltiptext {
    visibility: visible;
  }
  input[type="submit"][disabled] {
    border: 2px outset ButtonFace;
    color: GrayText;
    cursor: inherit;
    background-color: #ddd;
  }
  .valid {
    color: green;
  }
  .valid:before {
    content: "\\2714";
  }
  .invalid {
    color: red;
  }
  .invalid:before {
    content: "\\2716";
  }
`;
document.head.appendChild(style);