locadot 2.3.0 → 2.4.0

package/dist/dashboard/page.js

@@ -812,8 +812,8 @@ details.card[open] summary { border-bottom: 1px solid var(--border); border-bott
   border-top: 1px solid var(--border);
 }
 
-/* ---------- confirm / prompt / share dialogs ---------- */
-#confirm-dialog, #prompt-dialog, #share-dialog {
+/* ---------- confirm / prompt / share / protect dialogs ---------- */
+#confirm-dialog, #prompt-dialog, #share-dialog, #protect-dialog {
   padding: 0;
   border: 1px solid var(--border);
   border-radius: var(--radius);
@@ -821,10 +821,54 @@ details.card[open] summary { border-bottom: 1px solid var(--border); border-bott
   color: var(--fg);
   box-shadow: var(--shadow-md);
 }
-#confirm-dialog::backdrop, #prompt-dialog::backdrop, #share-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
+#confirm-dialog::backdrop, #prompt-dialog::backdrop, #share-dialog::backdrop, #protect-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
 #confirm-dialog { width: min(420px, calc(100vw - 32px)); }
 #prompt-dialog { width: min(420px, calc(100vw - 32px)); }
 #share-dialog { width: min(480px, calc(100vw - 32px)); }
+#protect-dialog { width: min(480px, calc(100vw - 32px)); }
+.field-password { position: relative; }
+.field-password .input { width: 100%; padding-right: 40px; }
+.field-toggle {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.field-toggle:hover { background: var(--surface-2); color: var(--fg); }
+.field-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.option-check {
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  border: 1.5px solid var(--border-strong);
+  background: var(--surface);
+  position: relative;
+}
+.option-card[aria-checked="true"] .option-check { border-color: var(--accent); background: var(--accent); }
+.option-card[aria-checked="true"] .option-check::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 4px;
+  height: 8px;
+  border: solid var(--accent-fg);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+#protect-remove { margin-right: auto; }
 .share-options { display: flex; flex-direction: column; gap: 10px; }
 .option-card {
   display: flex;
@@ -868,6 +912,15 @@ details.card[open] summary { border-bottom: 1px solid var(--border); border-bott
 .option-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
 .option-extra { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
 .option-extra .field-error { margin-top: 4px; }
+.share-progress { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
+.share-progress-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 999px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); }
+.share-progress-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.share-progress-icon .spinner { margin: 0; }
+.share-progress-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.share-progress-title { font-size: 14px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
+.share-progress-text { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; }
+.share-progress-body .btn { align-self: flex-start; margin-top: 6px; text-decoration: none; }
+.share-steps { margin: 2px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
 
 /* ---------- toasts ---------- */
 .toast-container {
@@ -1221,6 +1274,7 @@ const clientJs = `
   var cfInstallBusy = false;
   var cloudflaredInstalled = false;
   var cloudflareLoggedIn = false;
+  var cloudflareZones = [];
   var proxyStopped = false;
   var pollTimer = null;
   var remotesPollTimer = null;
@@ -1439,6 +1493,7 @@ const clientJs = `
     var cf = sys.cloudflared || { installed: false };
     cloudflaredInstalled = !!cf.installed;
     cloudflareLoggedIn = !!cf.loggedIn;
+    cloudflareZones = Array.isArray(cf.zones) ? cf.zones : [];
     if (cf.installed) {
       cfValueEl.textContent = "Installed";
       cfValueEl.className = "tile-value ok";
@@ -2385,6 +2440,18 @@ const clientJs = `
   var shareDomainError = document.getElementById("share-domain-error");
   var shareDomainHint = document.getElementById("share-domain-hint");
   var shareErrorEl = document.getElementById("share-error");
+  var shareOptionsEl = document.getElementById("share-options");
+  var shareProgressEl = document.getElementById("share-progress");
+  var shareProgressIcon = document.getElementById("share-progress-icon");
+  var shareProgressTitle = document.getElementById("share-progress-title");
+  var shareProgressText = document.getElementById("share-progress-text");
+  var shareStepsEl = document.getElementById("share-steps");
+  var shareStepsDomain = document.getElementById("share-steps-domain");
+  var shareAuthLink = document.getElementById("share-auth-link");
+  var shareDescEl = shareDialogEl.querySelector(".modal-desc");
+  var sharePoll = null;
+  var shareAuthWin = null;
+  var shareAuthOpened = false;
   var shareRow = null;
   var shareMode = "random";
   var HOSTNAME_RE = /^([a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z]{2,}$/;
@@ -2406,9 +2473,7 @@ const clientJs = `
     shareOptionRandom.setAttribute("aria-checked", String(mode === "random"));
     shareOptionCustom.setAttribute("aria-checked", String(mode === "custom"));
     shareCustomExtra.hidden = mode !== "custom";
-    shareDomainHint.textContent = cloudflareLoggedIn
-      ? "The DNS record is created or updated for you."
-      : "You'll be asked to log in to Cloudflare once; the login link appears on the row.";
+    updateDomainHint();
     shareDomainError.hidden = true;
     shareDomainError.textContent = "";
     shareErrorEl.hidden = true;
@@ -2416,7 +2481,108 @@ const clientJs = `
     if (mode === "custom") setTimeout(function () { shareDomainInput.focus(); }, 0);
   }
 
+  function coveringZone(hostname) {
+    for (var i = 0; i < cloudflareZones.length; i++) {
+      var zone = cloudflareZones[i];
+      if (hostname === zone || hostname.slice(-(zone.length + 1)) === "." + zone) return zone;
+    }
+    return null;
+  }
+
+  function updateDomainHint() {
+    var value = normalizeHostname(shareDomainInput.value);
+    var zone = value && !validateHostname(value) ? coveringZone(value) : null;
+    shareDomainHint.textContent = zone
+      ? "Uses your Cloudflare login for " + zone + ". The DNS record is created or updated for you."
+      : "Cloudflare opens in a new tab so you can authorize this domain's zone. Each zone you authorize is remembered.";
+  }
+
+  var ICON_CLOUD = '<svg viewBox="0 0 24 24"><path d="M7 18a4.5 4.5 0 0 1-.5-8.97A6 6 0 0 1 18 9.5a4 4 0 0 1-.5 8.5z"/></svg>';
+
+  function stopSharePoll() {
+    if (sharePoll) clearInterval(sharePoll);
+    sharePoll = null;
+  }
+
+  function closeAuthWindow() {
+    if (shareAuthWin && !shareAuthOpened && !shareAuthWin.closed) shareAuthWin.close();
+    shareAuthWin = null;
+  }
+
+  function showShareOptions() {
+    shareOptionsEl.hidden = false;
+    shareDescEl.hidden = false;
+    shareProgressEl.hidden = true;
+    shareSubmitBtn.hidden = false;
+    shareCancelBtn.textContent = "Cancel";
+  }
+
+  function showShareProgress(domain, t) {
+    shareOptionsEl.hidden = true;
+    shareDescEl.hidden = true;
+    shareProgressEl.hidden = false;
+    shareSubmitBtn.hidden = true;
+    shareCancelBtn.textContent = "Close";
+    shareCancelBtn.disabled = false;
+    var login = t.status === "login";
+    if (login) {
+      shareProgressIcon.innerHTML = ICON_CLOUD;
+      shareProgressTitle.textContent = "Authorize " + domain + " on Cloudflare";
+      shareProgressText.textContent = "locadot doesn't have a Cloudflare login for this domain yet.";
+    } else {
+      shareProgressIcon.innerHTML = '<span class="spinner"></span>';
+      shareProgressTitle.textContent = "Setting up " + domain;
+      shareProgressText.textContent = t.loginUrl === undefined && shareAuthOpened
+        ? "Authorized. Creating the tunnel and the DNS record\u2026"
+        : "Checking your Cloudflare login, then creating the tunnel and the DNS record\u2026";
+    }
+    shareStepsEl.hidden = !login;
+    shareStepsDomain.textContent = domain;
+    shareAuthLink.hidden = !(login && t.loginUrl);
+    if (login && t.loginUrl) {
+      shareAuthLink.href = t.loginUrl;
+      if (shareAuthWin && !shareAuthOpened && !shareAuthWin.closed) {
+        shareAuthWin.location.href = t.loginUrl;
+        shareAuthOpened = true;
+      }
+    }
+  }
+
+  function watchShare(host, domain) {
+    stopSharePoll();
+    showShareProgress(domain, { status: "starting" });
+    var tick = function () {
+      fetch("/api/hosts").then(parseJsonOrThrow).then(function (hosts) {
+        if (shareRow === null || shareRow.host !== host) return;
+        var row = null;
+        for (var i = 0; i < hosts.length; i++) if (hosts[i].host === host) row = hosts[i];
+        var t = row ? tunnelInfo(row) : { status: "error", error: host + " was removed." };
+        if (t.status === "up") {
+          stopSharePoll();
+          closeAuthWindow();
+          closeShareDialog();
+          showToast(host + " is live at " + t.url, "success");
+          renderHosts(hosts);
+        } else if (t.status === "error" || t.status === "off") {
+          stopSharePoll();
+          closeAuthWindow();
+          showShareOptions();
+          shareErrorEl.textContent = t.error || "Sharing stopped.";
+          shareErrorEl.hidden = false;
+          shareSubmitBtn.textContent = "Try again";
+          renderHosts(hosts);
+        } else {
+          showShareProgress(domain, t);
+        }
+      }).catch(function () {});
+    };
+    sharePoll = setInterval(tick, 1500);
+    tick();
+  }
+
   function closeShareDialog() {
+    stopSharePoll();
+    closeAuthWindow();
     shareRow = null;
     shareDialogEl.close();
   }
@@ -2430,6 +2596,9 @@ const clientJs = `
     shareDomainError.textContent = "";
     var hasDomain = typeof row.tunnelDomain === "string" && !!row.tunnelDomain;
     shareDomainInput.value = hasDomain ? row.tunnelDomain : "";
+    showShareOptions();
+    shareSubmitBtn.textContent = "Start sharing";
+    shareAuthOpened = false;
     setShareMode(hasDomain ? "custom" : "random");
     shareSubmitBtn.disabled = false;
     shareSubmitBtn.classList.remove("busy");
@@ -2450,6 +2619,12 @@ const clientJs = `
   shareDialogEl.addEventListener("click", function (e) {
     if (e.target === shareDialogEl) closeShareDialog();
   });
+  shareDialogEl.addEventListener("close", function () {
+    stopSharePoll();
+    closeAuthWindow();
+    shareRow = null;
+  });
+  shareDomainInput.addEventListener("input", updateDomainHint);
   shareDomainInput.addEventListener("keydown", function (e) {
     if (e.key === "Enter") { e.preventDefault(); shareSubmitBtn.click(); }
   });
@@ -2470,13 +2645,32 @@ const clientJs = `
     shareSubmitBtn.disabled = true;
     shareSubmitBtn.classList.add("busy");
     shareCancelBtn.disabled = true;
+    shareErrorEl.hidden = true;
+    // Opened now, inside the click, so the browser allows it; pointed at Cloudflare once the sign-in URL arrives.
+    shareAuthOpened = false;
+    closeAuthWindow();
+    if (body.domain && !coveringZone(body.domain)) {
+      shareAuthWin = window.open("", "_blank");
+      if (shareAuthWin) {
+        try {
+          shareAuthWin.document.title = "Connecting to Cloudflare\u2026";
+          shareAuthWin.document.body.style.cssText = "font:14px system-ui,sans-serif;color:#666;display:grid;place-items:center;height:100vh;margin:0";
+          shareAuthWin.document.body.textContent = "Connecting to Cloudflare\u2026";
+        } catch (e) {}
+      }
+    }
     apiFetch("/api/hosts/" + encodeURIComponent(row.host), { method: "PUT", body: JSON.stringify(body) })
       .then(function () {
+        if (body.domain) {
+          watchShare(row.host, body.domain);
+          return loadHosts();
+        }
         showToast("Starting tunnel for " + row.host, "success");
         closeShareDialog();
         return loadHosts();
       })
       .catch(function (err2) {
+        closeAuthWindow();
         shareErrorEl.textContent = (err2 && err2.message) ? err2.message : String(err2);
         shareErrorEl.hidden = false;
       })
@@ -2616,6 +2810,167 @@ const clientJs = `
       });
   });
 
+  // ---------- protect dialog ----------
+
+  var PROTECT_SCOPES = ["shared", "remote", "local"];
+  var PROTECT_SCOPE_LABELS = { shared: "Shared link", remote: "Remote access", local: "This machine & network" };
+
+  function protectScopeNames(scopes) {
+    return scopes.map(function (s) { return PROTECT_SCOPE_LABELS[s] || s; }).join(", ");
+  }
+
+  var protectDialogEl = document.getElementById("protect-dialog");
+  var protectHostEl = document.getElementById("protect-host");
+  var protectCloseBtn = document.getElementById("protect-close");
+  var protectCancelBtn = document.getElementById("protect-cancel");
+  var protectSubmitBtn = document.getElementById("protect-submit");
+  var protectRemoveBtn = document.getElementById("protect-remove");
+  var protectPasswordInput = document.getElementById("protect-password");
+  var protectToggleBtn = document.getElementById("protect-toggle");
+  var protectErrorEl = document.getElementById("protect-error");
+  var protectHintEl = document.getElementById("protect-hint");
+  var protectScopeErrorEl = document.getElementById("protect-scope-error");
+  var protectOptionEls = PROTECT_SCOPES.map(function (s) { return document.getElementById("protect-option-" + s); });
+  var protectRow = null;
+  var protectScopes = [];
+
+  function protectRenderScopes() {
+    protectOptionEls.forEach(function (el) {
+      el.setAttribute("aria-checked", String(protectScopes.indexOf(el.getAttribute("data-scope")) !== -1));
+    });
+  }
+
+  function protectToggleScope(el) {
+    var scope = el.getAttribute("data-scope");
+    var on = protectScopes.indexOf(scope) === -1;
+    if (on) protectScopes.push(scope);
+    else protectScopes = protectScopes.filter(function (s) { return s !== scope; });
+    protectRenderScopes();
+    protectScopeErrorEl.hidden = true;
+    protectScopeErrorEl.textContent = "";
+  }
+
+  protectOptionEls.forEach(function (el) {
+    el.addEventListener("click", function () { protectToggleScope(el); });
+  });
+
+  protectToggleBtn.addEventListener("click", function () {
+    var showing = protectPasswordInput.type === "text";
+    protectPasswordInput.type = showing ? "password" : "text";
+    protectToggleBtn.setAttribute("aria-label", showing ? "Show password" : "Hide password");
+  });
+
+  function closeProtectDialog() {
+    protectRow = null;
+    protectDialogEl.close();
+  }
+
+  function openProtectDialog(row) {
+    protectRow = row;
+    protectHostEl.textContent = row.host;
+    protectPasswordInput.value = "";
+    protectPasswordInput.type = "password";
+    protectToggleBtn.setAttribute("aria-label", "Show password");
+    protectErrorEl.hidden = true;
+    protectErrorEl.textContent = "";
+    protectScopeErrorEl.hidden = true;
+    protectScopeErrorEl.textContent = "";
+    protectScopes = row.protect ? row.protect.scopes.slice() : [];
+    protectRenderScopes();
+    if (row.protect) {
+      protectPasswordInput.placeholder = "Leave blank to keep the current password";
+      protectHintEl.textContent = "Set " + fmtRelative(row.protect.updatedAt);
+      protectHintEl.hidden = false;
+      protectRemoveBtn.hidden = false;
+      protectSubmitBtn.textContent = "Save";
+    } else {
+      protectPasswordInput.placeholder = "";
+      protectHintEl.hidden = true;
+      protectRemoveBtn.hidden = true;
+      protectSubmitBtn.textContent = "Protect host";
+    }
+    protectSubmitBtn.disabled = false;
+    protectSubmitBtn.classList.remove("busy");
+    protectCancelBtn.disabled = false;
+    protectRemoveBtn.disabled = false;
+    protectDialogEl.showModal();
+    setTimeout(function () { protectPasswordInput.focus(); }, 0);
+  }
+
+  protectCancelBtn.addEventListener("click", closeProtectDialog);
+  protectCloseBtn.addEventListener("click", closeProtectDialog);
+  protectDialogEl.addEventListener("click", function (e) {
+    if (e.target === protectDialogEl) closeProtectDialog();
+  });
+  protectDialogEl.addEventListener("close", function () { protectRow = null; });
+
+  protectRemoveBtn.addEventListener("click", function () {
+    if (!protectRow) return;
+    var row = protectRow;
+    confirmDialog({ title: "Remove password protection?", message: "Anyone will be able to reach " + row.host + " without a password.", confirmLabel: "Remove protection", danger: true }).then(function (ok) {
+      if (!ok) return;
+      protectRemoveBtn.disabled = true;
+      protectSubmitBtn.disabled = true;
+      protectCancelBtn.disabled = true;
+      apiFetch("/api/hosts/" + encodeURIComponent(row.host), { method: "PUT", body: JSON.stringify({ protect: null }) })
+        .then(function () {
+          showToast("Removed password protection for " + row.host, "success");
+          closeProtectDialog();
+          return loadHosts();
+        })
+        .catch(function (err) {
+          protectErrorEl.textContent = err && err.message ? err.message : String(err);
+          protectErrorEl.hidden = false;
+          protectRemoveBtn.disabled = false;
+          protectSubmitBtn.disabled = false;
+          protectCancelBtn.disabled = false;
+        });
+    });
+  });
+
+  protectSubmitBtn.addEventListener("click", function () {
+    if (!protectRow) return;
+    var row = protectRow;
+    var password = protectPasswordInput.value;
+    protectErrorEl.hidden = true;
+    protectErrorEl.textContent = "";
+    protectScopeErrorEl.hidden = true;
+    protectScopeErrorEl.textContent = "";
+    var required = !row.protect;
+    if ((required || password) && password.length < 8) {
+      protectErrorEl.textContent = "Use at least 8 characters.";
+      protectErrorEl.hidden = false;
+      return;
+    }
+    if (!protectScopes.length) {
+      protectScopeErrorEl.textContent = "Pick at least one place to ask for the password.";
+      protectScopeErrorEl.hidden = false;
+      return;
+    }
+    var protectBody = { scopes: protectScopes.slice() };
+    if (password) protectBody.password = password;
+    protectSubmitBtn.disabled = true;
+    protectSubmitBtn.classList.add("busy");
+    protectCancelBtn.disabled = true;
+    protectRemoveBtn.disabled = true;
+    apiFetch("/api/hosts/" + encodeURIComponent(row.host), { method: "PUT", body: JSON.stringify({ protect: protectBody }) })
+      .then(function () {
+        showToast("Password protection saved for " + row.host, "success");
+        closeProtectDialog();
+        return loadHosts();
+      })
+      .catch(function (err) {
+        protectErrorEl.textContent = err && err.message ? err.message : String(err);
+        protectErrorEl.hidden = false;
+      })
+      .then(function () {
+        protectSubmitBtn.disabled = false;
+        protectSubmitBtn.classList.remove("busy");
+        protectCancelBtn.disabled = false;
+        protectRemoveBtn.disabled = false;
+      });
+  });
+
   // ---------- confirm / prompt dialogs ----------
 
   var confirmDialogEl = document.getElementById("confirm-dialog");
@@ -2765,6 +3120,7 @@ const clientJs = `
     if (row.insecure) flags.push(["insecure", "Upstream TLS certificate is not verified", "badge-warn"]);
     if (row.cors) flags.push(["cors", "Origin/Referer rewritten to the target; any origin may call this host", "badge-cors"]);
     if (row.allow && row.allow.length) flags.push(["allow " + row.allow.length, row.allow.join(", "), "badge-accent"]);
+    if (row.protect) flags.push(["password", "Password protected on: " + protectScopeNames(row.protect.scopes), "badge-accent"]);
     if (flags.length) {
       optionsTd.className = "badges";
       flags.forEach(function (flag) {
@@ -2814,6 +3170,20 @@ const clientJs = `
     accessSvg.appendChild(accessPath);
     accessBtn.appendChild(accessSvg);
     accessBtn.addEventListener("click", function () { openAllowDialog(row); });
+    var protectBtn = document.createElement("button");
+    protectBtn.type = "button";
+    var protectScopesSet = row.protect ? row.protect.scopes : [];
+    protectBtn.className = "btn btn-sm btn-icon" + (protectScopesSet.length ? " is-set" : "");
+    protectBtn.title = protectScopesSet.length ? "Password protected on: " + protectScopeNames(protectScopesSet) : "Password protection: require a password before visitors reach this host";
+    protectBtn.setAttribute("aria-label", "Password protection for " + row.host);
+    var protectSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    protectSvg.setAttribute("viewBox", "0 0 24 24");
+    protectSvg.setAttribute("aria-hidden", "true");
+    var protectPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    protectPath.setAttribute("d", "M7 11V8a5 5 0 0 1 10 0v3M5 11h14v10H5z");
+    protectSvg.appendChild(protectPath);
+    protectBtn.appendChild(protectSvg);
+    protectBtn.addEventListener("click", function () { openProtectDialog(row); });
     var editBtn = document.createElement("button");
     editBtn.type = "button";
     editBtn.className = "btn btn-sm";
@@ -2841,6 +3211,7 @@ const clientJs = `
     if (!row.remote) {
       actionsWrap.appendChild(shareButton(row));
       actionsWrap.appendChild(accessBtn);
+      actionsWrap.appendChild(protectBtn);
       actionsWrap.appendChild(editBtn);
     }
     actionsWrap.appendChild(removeBtn);
@@ -4296,6 +4667,19 @@ function renderPage(nonce, token, uiAuth = false) {
         </span>
       </button>
     </div>
+    <div id="share-progress" class="share-progress" hidden>
+      <div id="share-progress-icon" class="share-progress-icon" aria-hidden="true"></div>
+      <div class="share-progress-body">
+        <p id="share-progress-title" class="share-progress-title"></p>
+        <p id="share-progress-text" class="share-progress-text"></p>
+        <ol id="share-steps" class="share-steps" hidden>
+          <li>Sign in to Cloudflare in the tab that opens.</li>
+          <li>Pick the zone <span id="share-steps-domain" class="mono"></span> is in, then <strong>Authorize</strong>.</li>
+          <li>Come back here. This dialog updates by itself.</li>
+        </ol>
+        <a id="share-auth-link" class="btn btn-primary" target="_blank" rel="noopener noreferrer" hidden>Open Cloudflare &#8599;</a>
+      </div>
+    </div>
     <div id="share-error" class="field-error" role="alert" hidden></div>
   </div>
   <div class="modal-foot">
@@ -4303,6 +4687,61 @@ function renderPage(nonce, token, uiAuth = false) {
     <button type="button" id="share-submit" class="btn btn-primary">Start sharing</button>
   </div>
 </dialog>
+<dialog id="protect-dialog">
+  <div class="modal-head">
+    <div>
+      <h3 class="modal-title">Password protection</h3>
+      <p id="protect-host" class="modal-sub mono"></p>
+    </div>
+    <button type="button" id="protect-close" class="btn btn-ghost modal-close" aria-label="Close"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
+  </div>
+  <div class="modal-body">
+    <p class="modal-desc">Visitors see a sign-in page and need this password before they reach the app.</p>
+    <div class="field">
+      <label for="protect-password">Password</label>
+      <div class="field-password">
+        <input type="password" id="protect-password" class="input" autocomplete="new-password">
+        <button type="button" id="protect-toggle" class="field-toggle" aria-label="Show password">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>
+        </button>
+      </div>
+      <p id="protect-hint" class="modal-hint" hidden></p>
+      <div id="protect-error" class="field-error" role="alert" hidden></div>
+    </div>
+    <div class="field">
+      <label>Ask for it on</label>
+      <div id="protect-options" class="share-options" role="group" aria-label="Ask for the password on">
+        <button type="button" id="protect-option-shared" class="option-card" role="checkbox" aria-checked="false" data-scope="shared">
+          <span class="option-check" aria-hidden="true"></span>
+          <span class="option-body">
+            <span class="option-title">Shared link</span>
+            <span class="option-desc">Visitors on the public tunnel URL (Share).</span>
+          </span>
+        </button>
+        <button type="button" id="protect-option-remote" class="option-card" role="checkbox" aria-checked="false" data-scope="remote">
+          <span class="option-check" aria-hidden="true"></span>
+          <span class="option-body">
+            <span class="option-title">Remote access</span>
+            <span class="option-desc">Machines connected to this one through remote access.</span>
+          </span>
+        </button>
+        <button type="button" id="protect-option-local" class="option-card" role="checkbox" aria-checked="false" data-scope="local">
+          <span class="option-check" aria-hidden="true"></span>
+          <span class="option-body">
+            <span class="option-title">This machine &amp; network</span>
+            <span class="option-desc">Browsers on this computer or your local network.</span>
+          </span>
+        </button>
+      </div>
+      <div id="protect-scope-error" class="field-error" role="alert" hidden></div>
+    </div>
+  </div>
+  <div class="modal-foot">
+    <button type="button" id="protect-remove" class="btn btn-danger" hidden>Remove protection</button>
+    <button type="button" id="protect-cancel" class="btn">Cancel</button>
+    <button type="button" id="protect-submit" class="btn btn-primary">Protect host</button>
+  </div>
+</dialog>
 <div id="toast-container" class="toast-container" aria-live="polite"></div>
 <script nonce="${safeNonce}">${clientJs}</script>
 </body>

package/dist/index.js

@@ -55,6 +55,17 @@ program
     .option("--rm", "Remove the given addresses instead of adding them")
     .option("--clear", "Remove every allowed address")
     .action(run((addresses, options) => commands_1.default.allow(addresses, options)));
+program
+    .command("protect")
+    .description("Ask for a password before a domain opens: on the shared link, for connected machines and/or on this machine")
+    .addOption(hostOption())
+    .option("--shared", "Ask visitors of the shared (tunnel) link")
+    .option("--remote", "Ask machines connected through remote access")
+    .option("--local", "Ask on this machine and your network")
+    .option("--password <password>", "The password (prompted for when left out)")
+    .option("--stdin", "Read the password from stdin")
+    .option("--off", "Stop asking for a password and forget it")
+    .action(run((options) => commands_1.default.protect(options)));
 program
     .command("remove")
     .alias("rm")