Function lockCurrentWebsite

scripts/auto_lockWebsite.js:237–361

(pass, matchedPattern)

}

function lockCurrentWebsite(pass, matchedPattern) {
  const id = "ufs_auto_lock_website_overlay";
  const idStyle = id + "-style";

  function lockAgain() {
    let overlay = document.querySelector(`#${id}`);
    let style = document.querySelector(`#${idStyle}`);
    if (!overlay || !style) return;
    overlay.style.top = "0";
    style.disabled = false;
  }

  const exist = document.getElementById(id);
  if (exist) {
    lockAgain();
    return;
  }

  const style = document.createElement("style");
  style.id = idStyle;
  style.textContent = /*css*/ `
    * :not(#${id}, #${id} *) {
      display: none !important;
    }
  `;
  document.head.appendChild(style);

  const overlay = document.createElement("div");
  overlay.id = id;
  overlay.innerHTML = /* html */ `
    <h1>This websites has been Locked</h1>
    <input id="password" type="password" placeholder="Enter password to unlock.." autocomplete="new-password" />
    <div id="unlock-temporarly-container" title="Enable to unlock temporarly => will lock again if website reload">
      <input id="unlock-temporarly" type="checkbox" />
      <label for="unlock-temporarly" >Unlock temporarly</label>
    </div>
    <style>
      #${id} {
        position: fixed;
        top: -100vh;
        left: 0;
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        background-color: #112;
        z-index: 2147483647;
        opacity: 0;
        transition: all 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      #${id} > h1 {
        color: #ddd;
        font-size: 30px;
        text-align: center;