locadot 2.2.0 → 2.4.0

package/dist/dashboard/page.js

@@ -348,11 +348,16 @@ td.badges .badge + .badge { margin-left: 4px; }
 .btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--muted-dim); }
 .btn:disabled { opacity: 0.5; cursor: not-allowed; }
 .btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
+.btn-sm.btn-icon { width: 28px; padding: 0; color: var(--muted); }
+.btn-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.btn-icon.is-set { color: var(--accent); border-color: transparent; background: var(--accent-bg); }
 .btn-block { width: 100%; }
 .btn-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
 .btn-primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
 .btn-danger { border-color: var(--down); color: var(--down); background: transparent; }
 .btn-danger:hover:not(:disabled) { background: var(--down-bg); border-color: var(--down); }
+.modal-foot .btn-danger { background: var(--down); border-color: var(--down); color: #fff; }
+.modal-foot .btn-danger:hover:not(:disabled) { background: var(--down); filter: brightness(0.92); }
 .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
 .btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: transparent; color: var(--fg); }
 .btn-ghost-danger { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
@@ -575,6 +580,8 @@ td .inline-check + .inline-check { margin-top: 4px; }
 .inline-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
 .tunnel-cell { white-space: normal; }
 .tunnel-status { display: flex; align-items: center; gap: 6px; max-width: 240px; }
+.tunnel-login { display: flex; flex-direction: column; gap: 2px; font-size: 12px; white-space: nowrap; }
+.tunnel-login a { font-weight: 500; }
 .tunnel-status a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; display: inline-block; vertical-align: middle; font-size: 12px; }
 .tunnel-error { color: var(--down); cursor: help; }
 .tunnel-error-text {
@@ -729,6 +736,192 @@ details.card[open] summary { border-bottom: 1px solid var(--border); border-bott
   margin: 0;
 }
 
+/* ---------- allow dialog ---------- */
+#allow-dialog {
+  width: min(520px, calc(100vw - 32px));
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--fg);
+  box-shadow: var(--shadow-md);
+}
+#allow-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
+.modal-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.modal-title { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
+.modal-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
+.modal-close { width: 28px; height: 28px; padding: 0; border-radius: 999px; flex-shrink: 0; }
+.modal-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
+.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
+.modal-desc { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
+.modal-warn {
+  font-size: 12.5px;
+  color: var(--warn);
+  background: var(--warn-bg);
+  border: 1px solid var(--warn);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  line-height: 1.5;
+}
+.allow-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
+.allow-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+}
+.allow-row span { font-size: 13px; word-break: break-all; }
+.allow-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  font-size: 15px;
+  line-height: 1;
+  border-radius: var(--radius-xs);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.allow-remove:hover { color: var(--down); background: var(--down-bg); border-color: transparent; }
+.allow-empty { font-size: 13px; padding: 4px 0; }
+.allow-add-row { display: flex; gap: 8px; }
+.allow-add-row .input { flex: 1; }
+.allow-add-row .btn { height: auto; align-self: stretch; padding: 0 14px; }
+.modal-hint { margin: 0; font-size: 12px; color: var(--muted-dim); }
+.modal-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px;
+  border-top: 1px solid var(--border);
+}
+
+/* ---------- confirm / prompt / share / protect dialogs ---------- */
+#confirm-dialog, #prompt-dialog, #share-dialog, #protect-dialog {
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--fg);
+  box-shadow: var(--shadow-md);
+}
+#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;
+  align-items: flex-start;
+  gap: 12px;
+  width: 100%;
+  text-align: left;
+  padding: 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-2);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.option-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
+.option-card[aria-checked="true"] { border-color: var(--accent); background: var(--accent-bg); }
+.option-dot {
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  border: 1.5px solid var(--border-strong);
+  background: var(--surface);
+  position: relative;
+}
+.option-card[aria-checked="true"] .option-dot { border-color: var(--accent); }
+.option-card[aria-checked="true"] .option-dot::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--accent);
+}
+.option-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.option-title { font-size: 13.5px; font-weight: 600; }
+.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 {
   position: fixed;
@@ -1080,6 +1273,8 @@ const clientJs = `
   var startupBusy = false;
   var cfInstallBusy = false;
   var cloudflaredInstalled = false;
+  var cloudflareLoggedIn = false;
+  var cloudflareZones = [];
   var proxyStopped = false;
   var pollTimer = null;
   var remotesPollTimer = null;
@@ -1297,6 +1492,8 @@ 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";
@@ -1378,11 +1575,13 @@ const clientJs = `
       revokeBtn.className = "btn btn-sm btn-danger";
       revokeBtn.textContent = "Revoke";
       revokeBtn.addEventListener("click", function () {
-        if (!window.confirm("Revoke " + peer.name + "?")) return;
-        revokeBtn.disabled = true;
-        apiFetch("/api/peers/" + encodeURIComponent(peer.id), { method: "DELETE" })
-          .then(function () { showToast("Revoked " + peer.name, "success"); return loadHub(); })
-          .catch(function (err) { apiError(err, "Couldn't revoke peer"); revokeBtn.disabled = false; });
+        confirmDialog({ title: "Revoke " + peer.name + "?", message: "This peer will lose access immediately.", confirmLabel: "Revoke", danger: true }).then(function (ok) {
+          if (!ok) return;
+          revokeBtn.disabled = true;
+          apiFetch("/api/peers/" + encodeURIComponent(peer.id), { method: "DELETE" })
+            .then(function () { showToast("Revoked " + peer.name, "success"); return loadHub(); })
+            .catch(function (err) { apiError(err, "Couldn't revoke peer"); revokeBtn.disabled = false; });
+        });
       });
       controls.appendChild(revokeBtn);
       row.appendChild(controls);
@@ -1565,13 +1764,15 @@ const clientJs = `
   });
 
   hubStopBtn.addEventListener("click", function () {
-    if (!window.confirm("Stop remote access? Connected peers will be disconnected.")) return;
-    hubStopBtn.disabled = true;
-    hubStopBtn.classList.add("busy");
-    apiFetch("/api/hub", { method: "POST", body: JSON.stringify({ mode: "off" }) })
-      .then(function () { showToast("Remote access stopped", "success"); return loadHub(); })
-      .catch(function (err) { apiError(err, "Couldn't stop remote access"); })
-      .then(function () { hubStopBtn.disabled = false; hubStopBtn.classList.remove("busy"); });
+    confirmDialog({ title: "Stop remote access?", message: "Connected peers will be disconnected.", confirmLabel: "Stop remote access", danger: true }).then(function (ok) {
+      if (!ok) return;
+      hubStopBtn.disabled = true;
+      hubStopBtn.classList.add("busy");
+      apiFetch("/api/hub", { method: "POST", body: JSON.stringify({ mode: "off" }) })
+        .then(function () { showToast("Remote access stopped", "success"); return loadHub(); })
+        .catch(function (err) { apiError(err, "Couldn't stop remote access"); })
+        .then(function () { hubStopBtn.disabled = false; hubStopBtn.classList.remove("busy"); });
+    });
   });
 
   // ---------- remote access: connected machines (receiver) ----------
@@ -1633,11 +1834,12 @@ const clientJs = `
       urlEditBtn.className = "btn btn-sm btn-ghost";
       urlEditBtn.textContent = "Update URL";
       urlEditBtn.addEventListener("click", function () {
-        var next = window.prompt("New URL for " + remote.name, remote.url);
-        if (!next || !next.trim() || next.trim() === remote.url) return;
-        apiFetch("/api/remotes/" + encodeURIComponent(remote.name), { method: "PUT", body: JSON.stringify({ url: next.trim() }) })
-          .then(function () { showToast("Updated URL for " + remote.name, "success"); return loadRemotes(); })
-          .catch(function (err) { apiError(err, "Couldn't update URL"); });
+        promptDialog({ title: "Update URL", message: "New URL for " + remote.name, label: "URL", value: remote.url, confirmLabel: "Save" }).then(function (next) {
+          if (!next || !next.trim() || next.trim() === remote.url) return;
+          apiFetch("/api/remotes/" + encodeURIComponent(remote.name), { method: "PUT", body: JSON.stringify({ url: next.trim() }) })
+            .then(function () { showToast("Updated URL for " + remote.name, "success"); return loadRemotes(); })
+            .catch(function (err) { apiError(err, "Couldn't update URL"); });
+        });
       });
       urlRow.appendChild(urlEditBtn);
       item.appendChild(urlRow);
@@ -1663,11 +1865,13 @@ const clientJs = `
       disconnectBtn.className = "btn btn-sm btn-danger";
       disconnectBtn.textContent = "Disconnect";
       disconnectBtn.addEventListener("click", function () {
-        if (!window.confirm("Disconnect from " + remote.name + "? This removes its hosts too.")) return;
-        disconnectBtn.disabled = true;
-        apiFetch("/api/remotes/" + encodeURIComponent(remote.name), { method: "DELETE" })
-          .then(function () { showToast("Disconnected " + remote.name, "success"); return Promise.all([loadRemotes(), loadHosts()]); })
-          .catch(function (err) { apiError(err, "Couldn't disconnect"); disconnectBtn.disabled = false; });
+        confirmDialog({ title: "Disconnect from " + remote.name + "?", message: "This removes its hosts too.", confirmLabel: "Disconnect", danger: true }).then(function (ok) {
+          if (!ok) return;
+          disconnectBtn.disabled = true;
+          apiFetch("/api/remotes/" + encodeURIComponent(remote.name), { method: "DELETE" })
+            .then(function () { showToast("Disconnected " + remote.name, "success"); return Promise.all([loadRemotes(), loadHosts()]); })
+            .catch(function (err) { apiError(err, "Couldn't disconnect"); disconnectBtn.disabled = false; });
+        });
       });
       actions.appendChild(disconnectBtn);
       item.appendChild(actions);
@@ -1718,11 +1922,13 @@ const clientJs = `
             delBtn.className = "btn btn-sm btn-danger";
             delBtn.textContent = "Delete";
             delBtn.addEventListener("click", function () {
-              if (!window.confirm("Delete " + h.host + " on " + remote.name + "?")) return;
-              delBtn.disabled = true;
-              apiFetch("/api/remotes/" + encodeURIComponent(remote.name) + "/hosts/" + encodeURIComponent(h.host), { method: "DELETE" })
-                .then(function () { showToast("Deleted " + h.host, "success"); return Promise.all([loadRemotes(), loadHosts()]); })
-                .catch(function (err) { apiError(err, "Couldn't delete host"); delBtn.disabled = false; });
+              confirmDialog({ title: "Delete " + h.host + " on " + remote.name + "?", message: "This can't be undone.", confirmLabel: "Delete", danger: true }).then(function (ok) {
+                if (!ok) return;
+                delBtn.disabled = true;
+                apiFetch("/api/remotes/" + encodeURIComponent(remote.name) + "/hosts/" + encodeURIComponent(h.host), { method: "DELETE" })
+                  .then(function () { showToast("Deleted " + h.host, "success"); return Promise.all([loadRemotes(), loadHosts()]); })
+                  .catch(function (err) { apiError(err, "Couldn't delete host"); delBtn.disabled = false; });
+              });
             });
             hostRow.appendChild(delBtn);
           }
@@ -1961,29 +2167,31 @@ const clientJs = `
 
   stopProxyBtn.addEventListener("click", function () {
     if (proxyStopped) return;
-    if (!window.confirm("Stop the locadot proxy? Run \\"locadot start\\" to bring it back up.")) return;
-    stopProxyBtn.disabled = true;
-    stopProxyBtn.classList.add("busy");
-    apiFetch("/api/proxy/stop", { method: "POST" })
-      .then(function () {
-        proxyStopped = true;
-        clear(stoppedBanner);
-        stoppedBanner.appendChild(document.createTextNode("Proxy stopped. Run "));
-        var code = document.createElement("code");
-        code.className = "mono";
-        code.textContent = "locadot start";
-        stoppedBanner.appendChild(code);
-        stoppedBanner.appendChild(document.createTextNode(" to bring it back."));
-        stoppedBanner.hidden = false;
-        if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
-        if (remotesPollTimer) { clearInterval(remotesPollTimer); remotesPollTimer = null; }
-        showToast("Proxy stopped", "warn");
-      })
-      .catch(function (err) {
-        apiError(err, "Couldn't stop the proxy");
-        stopProxyBtn.disabled = false;
-        stopProxyBtn.classList.remove("busy");
-      });
+    confirmDialog({ title: "Stop the locadot proxy?", message: "Run \\"locadot start\\" to bring it back up.", confirmLabel: "Stop proxy", danger: true }).then(function (ok) {
+      if (!ok) return;
+      stopProxyBtn.disabled = true;
+      stopProxyBtn.classList.add("busy");
+      apiFetch("/api/proxy/stop", { method: "POST" })
+        .then(function () {
+          proxyStopped = true;
+          clear(stoppedBanner);
+          stoppedBanner.appendChild(document.createTextNode("Proxy stopped. Run "));
+          var code = document.createElement("code");
+          code.className = "mono";
+          code.textContent = "locadot start";
+          stoppedBanner.appendChild(code);
+          stoppedBanner.appendChild(document.createTextNode(" to bring it back."));
+          stoppedBanner.hidden = false;
+          if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
+          if (remotesPollTimer) { clearInterval(remotesPollTimer); remotesPollTimer = null; }
+          showToast("Proxy stopped", "warn");
+        })
+        .catch(function (err) {
+          apiError(err, "Couldn't stop the proxy");
+          stopProxyBtn.disabled = false;
+          stopProxyBtn.classList.remove("busy");
+        });
+    });
   });
 
   cfInstallBtn.addEventListener("click", function () {
@@ -2132,12 +2340,36 @@ const clientJs = `
       link.textContent = t.url.replace("https://", "");
       link.title = t.url;
       statusWrap.appendChild(link);
+      if (t.mode === "custom") {
+        var modeBadge = document.createElement("span");
+        modeBadge.className = "badge badge-accent";
+        modeBadge.textContent = "custom";
+        statusWrap.appendChild(modeBadge);
+      }
       statusWrap.appendChild(makeCopyButton(function () { return t.url; }));
     } else if (t.status === "starting") {
       var spin = document.createElement("span");
       spin.className = "spinner";
       statusWrap.appendChild(spin);
       statusWrap.appendChild(document.createTextNode("Starting\\u2026"));
+    } else if (t.status === "login") {
+      var loginDot = document.createElement("span");
+      loginDot.className = "dot warn";
+      statusWrap.appendChild(loginDot);
+      var loginText = document.createElement("span");
+      loginText.className = "tunnel-login";
+      var loginLabel = document.createElement("span");
+      loginLabel.textContent = "Waiting for Cloudflare login";
+      loginText.appendChild(loginLabel);
+      if (t.loginUrl) {
+        var loginLink = document.createElement("a");
+        loginLink.href = t.loginUrl;
+        loginLink.target = "_blank";
+        loginLink.rel = "noopener noreferrer";
+        loginLink.textContent = "Log in to Cloudflare \u2197";
+        loginText.appendChild(loginLink);
+      }
+      statusWrap.appendChild(loginText);
     } else if (t.status === "error") {
       var errDot = document.createElement("span");
       errDot.className = "dot down";
@@ -2159,35 +2391,692 @@ const clientJs = `
 
   function shareButton(row) {
     var t = tunnelInfo(row);
-    var isOn = t.enabled || t.status === "up" || t.status === "starting";
+    var isOn = t.enabled || t.status === "up" || t.status === "starting" || t.status === "login";
     var isRetry = !isOn && t.status === "error";
     var shareBtn = document.createElement("button");
     shareBtn.type = "button";
     shareBtn.className = "btn btn-sm" + (isOn ? " btn-danger" : "");
     shareBtn.textContent = isOn ? "Unshare" : (isRetry ? "Retry" : "Share");
-    shareBtn.title = isOn ? "Stop the public tunnel" : (isRetry ? "Retry starting the tunnel" : "Share on a public trycloudflare.com URL");
+    shareBtn.title = isOn ? "Stop the public tunnel" : "Share on a public URL";
     if (!cloudflaredInstalled && !isOn) {
       shareBtn.disabled = true;
       shareBtn.title = "Install cloudflared first";
     }
     shareBtn.addEventListener("click", function () {
-      if (!isOn && !window.confirm("This will make " + row.host + " reachable from the internet by anyone with the link. Continue?")) return;
-      shareBtn.disabled = true;
-      shareBtn.classList.add("busy");
-      apiFetch("/api/hosts/" + encodeURIComponent(row.host), { method: "PUT", body: JSON.stringify({ tunnel: !isOn }) })
+      if (isOn) {
+        confirmDialog({ title: "Stop sharing " + row.host + "?", message: "The public URL for " + row.host + " stops working.", confirmLabel: "Stop sharing", danger: true }).then(function (ok) {
+          if (!ok) return;
+          shareBtn.disabled = true;
+          shareBtn.classList.add("busy");
+          apiFetch("/api/hosts/" + encodeURIComponent(row.host), { method: "PUT", body: JSON.stringify({ tunnel: false }) })
+            .then(function () {
+              showToast("Stopping tunnel for " + row.host, "success");
+              return loadHosts();
+            })
+            .catch(function (err) {
+              apiError(err, "Couldn't change sharing for " + row.host);
+              shareBtn.disabled = false;
+              shareBtn.classList.remove("busy");
+            });
+        });
+      } else {
+        openShareDialog(row);
+      }
+    });
+    return shareBtn;
+  }
+
+  // ---------- share dialog ----------
+
+  var shareDialogEl = document.getElementById("share-dialog");
+  var shareHostEl = document.getElementById("share-host");
+  var shareCloseBtn = document.getElementById("share-close");
+  var shareCancelBtn = document.getElementById("share-cancel");
+  var shareSubmitBtn = document.getElementById("share-submit");
+  var shareOptionRandom = document.getElementById("share-option-random");
+  var shareOptionCustom = document.getElementById("share-option-custom");
+  var shareCustomExtra = document.getElementById("share-custom-extra");
+  var shareDomainInput = document.getElementById("share-domain-input");
+  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,}$/;
+
+  function normalizeHostname(value) {
+    return String(value || "").trim().toLowerCase().replace(/^https?:\\/\\//, "").replace(/\\/$/, "");
+  }
+
+  function validateHostname(raw) {
+    var value = normalizeHostname(raw);
+    if (!value) return "Enter a hostname.";
+    if (value.slice(-10) === ".localhost") return "Hostname can't be a .localhost address.";
+    if (!HOSTNAME_RE.test(value)) return "Enter a valid hostname, e.g. app.example.com.";
+    return null;
+  }
+
+  function setShareMode(mode) {
+    shareMode = mode;
+    shareOptionRandom.setAttribute("aria-checked", String(mode === "random"));
+    shareOptionCustom.setAttribute("aria-checked", String(mode === "custom"));
+    shareCustomExtra.hidden = mode !== "custom";
+    updateDomainHint();
+    shareDomainError.hidden = true;
+    shareDomainError.textContent = "";
+    shareErrorEl.hidden = true;
+    shareErrorEl.textContent = "";
+    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();
+  }
+
+  function openShareDialog(row) {
+    shareRow = row;
+    shareHostEl.textContent = row.host;
+    shareErrorEl.hidden = true;
+    shareErrorEl.textContent = "";
+    shareDomainError.hidden = true;
+    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");
+    shareCancelBtn.disabled = false;
+    shareDialogEl.showModal();
+  }
+
+  shareOptionRandom.addEventListener("click", function () { setShareMode("random"); });
+  shareOptionCustom.addEventListener("click", function () { setShareMode("custom"); });
+  shareOptionRandom.addEventListener("keydown", function (e) {
+    if (e.key === "ArrowDown" || e.key === "ArrowRight") { e.preventDefault(); setShareMode("custom"); shareOptionCustom.focus(); }
+  });
+  shareOptionCustom.addEventListener("keydown", function (e) {
+    if (e.key === "ArrowUp" || e.key === "ArrowLeft") { e.preventDefault(); setShareMode("random"); shareOptionRandom.focus(); }
+  });
+  shareCancelBtn.addEventListener("click", closeShareDialog);
+  shareCloseBtn.addEventListener("click", closeShareDialog);
+  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(); }
+  });
+
+  shareSubmitBtn.addEventListener("click", function () {
+    if (!shareRow) return;
+    var row = shareRow;
+    var body = { tunnel: true };
+    if (shareMode === "custom") {
+      var err = validateHostname(shareDomainInput.value);
+      if (err) {
+        shareDomainError.textContent = err;
+        shareDomainError.hidden = false;
+        return;
+      }
+      body.domain = normalizeHostname(shareDomainInput.value);
+    }
+    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;
+      })
+      .then(function () {
+        shareSubmitBtn.disabled = false;
+        shareSubmitBtn.classList.remove("busy");
+        shareCancelBtn.disabled = false;
+      });
+  });
+
+  var allowDialog = document.getElementById("allow-dialog");
+  var allowHostEl = document.getElementById("allow-host");
+  var allowWarnEl = document.getElementById("allow-warn");
+  var allowListEl = document.getElementById("allow-list");
+  var allowInput = document.getElementById("allow-input");
+  var allowAddBtn = document.getElementById("allow-add");
+  var allowErrorEl = document.getElementById("allow-error");
+  var allowCancelBtn = document.getElementById("allow-cancel");
+  var allowSaveBtn = document.getElementById("allow-save");
+  var allowCloseBtn = document.getElementById("allow-close");
+  var allowOriginal = [];
+  var allowCurrent = [];
+  var allowRow = null;
+
+  function allowListsEqual(a, b) {
+    if (a.length !== b.length) return false;
+    for (var i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) return false;
+    }
+    return true;
+  }
+
+  function updateAllowSave() {
+    allowSaveBtn.disabled = allowListsEqual(allowCurrent, allowOriginal);
+  }
+
+  function renderAllowList() {
+    clear(allowListEl);
+    if (!allowCurrent.length) {
+      var empty = document.createElement("div");
+      empty.className = "dim allow-empty";
+      empty.textContent = "No internal addresses. Shared visitors reach public hosts only.";
+      allowListEl.appendChild(empty);
+      return;
+    }
+    allowCurrent.forEach(function (entry) {
+      var entryRow = document.createElement("div");
+      entryRow.className = "allow-row";
+      var text = document.createElement("span");
+      text.className = "mono";
+      text.textContent = entry;
+      entryRow.appendChild(text);
+      var removeBtn = document.createElement("button");
+      removeBtn.type = "button";
+      removeBtn.className = "allow-remove";
+      removeBtn.textContent = "\\u00d7";
+      removeBtn.setAttribute("aria-label", "Remove " + entry);
+      removeBtn.addEventListener("click", function () {
+        allowCurrent = allowCurrent.filter(function (item) { return item !== entry; });
+        renderAllowList();
+        updateAllowSave();
+      });
+      entryRow.appendChild(removeBtn);
+      allowListEl.appendChild(entryRow);
+    });
+  }
+
+  function allowAddEntry() {
+    var value = allowInput.value.trim().toLowerCase().replace(/^[a-z][a-z0-9+.-]*:\\/\\//, "").replace(/\\/$/, "");
+    allowErrorEl.hidden = true;
+    allowErrorEl.textContent = "";
+    if (!value || /\\s/.test(value)) {
+      allowErrorEl.textContent = "Enter a host or host:port, e.g. localhost:3000.";
+      allowErrorEl.hidden = false;
+      return;
+    }
+    if (allowCurrent.indexOf(value) !== -1) {
+      allowErrorEl.textContent = value + " is already in the list.";
+      allowErrorEl.hidden = false;
+      return;
+    }
+    allowCurrent.push(value);
+    allowInput.value = "";
+    renderAllowList();
+    updateAllowSave();
+  }
+
+  function closeAllowDialog() {
+    allowDialog.close();
+  }
+
+  function openAllowDialog(row) {
+    allowRow = row;
+    allowOriginal = (row.allow || []).slice();
+    allowCurrent = allowOriginal.slice();
+    allowHostEl.textContent = row.host;
+    allowWarnEl.hidden = !!row.cors;
+    allowErrorEl.hidden = true;
+    allowErrorEl.textContent = "";
+    allowInput.value = "";
+    renderAllowList();
+    allowSaveBtn.disabled = true;
+    allowSaveBtn.classList.remove("busy");
+    allowCancelBtn.disabled = false;
+    allowDialog.showModal();
+    setTimeout(function () { allowInput.focus(); }, 0);
+  }
+
+  allowAddBtn.addEventListener("click", allowAddEntry);
+  allowInput.addEventListener("keydown", function (e) {
+    if (e.key === "Enter") { e.preventDefault(); allowAddEntry(); }
+  });
+  allowCancelBtn.addEventListener("click", closeAllowDialog);
+  allowCloseBtn.addEventListener("click", closeAllowDialog);
+  allowDialog.addEventListener("click", function (e) {
+    if (e.target === allowDialog) closeAllowDialog();
+  });
+
+  allowSaveBtn.addEventListener("click", function () {
+    if (!allowRow) return;
+    var host = allowRow.host;
+    allowSaveBtn.disabled = true;
+    allowSaveBtn.classList.add("busy");
+    allowCancelBtn.disabled = true;
+    apiFetch("/api/hosts/" + encodeURIComponent(host), { method: "PUT", body: JSON.stringify({ allow: allowCurrent }) })
+      .then(function () {
+        showToast("Saved internal access for " + host, "success");
+        closeAllowDialog();
+        return loadHosts();
+      })
+      .catch(function (err) {
+        allowErrorEl.textContent = err && err.message ? err.message : String(err);
+        allowErrorEl.hidden = false;
+        allowSaveBtn.disabled = false;
+        allowSaveBtn.classList.remove("busy");
+        allowCancelBtn.disabled = false;
+      });
+  });
+
+  // ---------- 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(isOn ? "Stopping tunnel for " + row.host : "Starting tunnel for " + row.host, "success");
+          showToast("Removed password protection for " + row.host, "success");
+          closeProtectDialog();
           return loadHosts();
         })
         .catch(function (err) {
-          apiError(err, "Couldn't change sharing for " + row.host);
-          shareBtn.disabled = false;
-          shareBtn.classList.remove("busy");
+          protectErrorEl.textContent = err && err.message ? err.message : String(err);
+          protectErrorEl.hidden = false;
+          protectRemoveBtn.disabled = false;
+          protectSubmitBtn.disabled = false;
+          protectCancelBtn.disabled = false;
         });
     });
-    return shareBtn;
+  });
+
+  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");
+  var confirmTitleEl = document.getElementById("confirm-title");
+  var confirmMessageEl = document.getElementById("confirm-message");
+  var confirmCancelBtn = document.getElementById("confirm-cancel");
+  var confirmOkBtn = document.getElementById("confirm-ok");
+  var confirmCloseBtn = document.getElementById("confirm-close");
+  var confirmResolve = null;
+
+  function closeConfirmDialog(result) {
+    var resolve = confirmResolve;
+    confirmResolve = null;
+    confirmDialogEl.close();
+    if (resolve) resolve(result);
   }
 
+  function confirmDialog(opts) {
+    opts = opts || {};
+    return new Promise(function (resolve) {
+      confirmResolve = resolve;
+      confirmTitleEl.textContent = opts.title || "Are you sure?";
+      confirmMessageEl.textContent = opts.message || "";
+      confirmOkBtn.textContent = opts.confirmLabel || "OK";
+      confirmOkBtn.className = "btn " + (opts.danger ? "btn-danger" : "btn-primary");
+      confirmDialogEl.showModal();
+      setTimeout(function () { confirmOkBtn.focus(); }, 0);
+    });
+  }
+
+  confirmCancelBtn.addEventListener("click", function () { closeConfirmDialog(false); });
+  confirmCloseBtn.addEventListener("click", function () { closeConfirmDialog(false); });
+  confirmOkBtn.addEventListener("click", function () { closeConfirmDialog(true); });
+  confirmDialogEl.addEventListener("click", function (e) {
+    if (e.target === confirmDialogEl) closeConfirmDialog(false);
+  });
+  confirmDialogEl.addEventListener("close", function () {
+    if (confirmResolve) { var resolve = confirmResolve; confirmResolve = null; resolve(false); }
+  });
+
+  var promptDialogEl = document.getElementById("prompt-dialog");
+  var promptTitleEl = document.getElementById("prompt-title");
+  var promptMessageEl = document.getElementById("prompt-message");
+  var promptLabelEl = document.getElementById("prompt-label");
+  var promptInput = document.getElementById("prompt-input");
+  var promptErrorEl = document.getElementById("prompt-error");
+  var promptCancelBtn = document.getElementById("prompt-cancel");
+  var promptConfirmBtn = document.getElementById("prompt-confirm");
+  var promptCloseBtn = document.getElementById("prompt-close");
+  var promptResolve = null;
+  var promptValidate = null;
+
+  function closePromptDialog(result) {
+    var resolve = promptResolve;
+    promptResolve = null;
+    promptValidate = null;
+    promptDialogEl.close();
+    if (resolve) resolve(result);
+  }
+
+  function promptDialog(opts) {
+    opts = opts || {};
+    return new Promise(function (resolve) {
+      promptResolve = resolve;
+      promptValidate = typeof opts.validate === "function" ? opts.validate : null;
+      promptTitleEl.textContent = opts.title || "";
+      promptMessageEl.textContent = opts.message || "";
+      promptMessageEl.hidden = !opts.message;
+      promptLabelEl.textContent = opts.label || "";
+      promptLabelEl.hidden = !opts.label;
+      promptInput.placeholder = opts.placeholder || "";
+      promptInput.value = opts.value || "";
+      promptConfirmBtn.textContent = opts.confirmLabel || "OK";
+      promptErrorEl.hidden = true;
+      promptErrorEl.textContent = "";
+      promptDialogEl.showModal();
+      setTimeout(function () { promptInput.focus(); promptInput.select(); }, 0);
+    });
+  }
+
+  function submitPromptDialog() {
+    var value = promptInput.value;
+    if (promptValidate) {
+      var err = promptValidate(value);
+      if (err) {
+        promptErrorEl.textContent = err;
+        promptErrorEl.hidden = false;
+        return;
+      }
+    }
+    closePromptDialog(value);
+  }
+
+  promptCancelBtn.addEventListener("click", function () { closePromptDialog(null); });
+  promptCloseBtn.addEventListener("click", function () { closePromptDialog(null); });
+  promptConfirmBtn.addEventListener("click", submitPromptDialog);
+  promptInput.addEventListener("keydown", function (e) {
+    if (e.key === "Enter") { e.preventDefault(); submitPromptDialog(); }
+  });
+  promptDialogEl.addEventListener("click", function (e) {
+    if (e.target === promptDialogEl) closePromptDialog(null);
+  });
+  promptDialogEl.addEventListener("close", function () {
+    if (promptResolve) { var resolve = promptResolve; promptResolve = null; resolve(null); }
+  });
+
   function labelCells(tr, labels) {
     for (var i = 0; i < tr.children.length; i++) tr.children[i].setAttribute("data-label", labels[i] || "");
   }
@@ -2228,13 +3117,15 @@ const clientJs = `
 
     var optionsTd = document.createElement("td");
     var flags = [];
-    if (row.insecure) flags.push(["insecure", "Upstream TLS certificate is not verified"]);
-    if (row.cors) flags.push(["cors", "Origin/Referer rewritten to the target; any origin may call this host"]);
+    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) {
         var badge = document.createElement("span");
-        badge.className = "badge " + (flag[0] === "cors" ? "badge-cors" : "badge-warn");
+        badge.className = "badge " + flag[2];
         badge.textContent = flag[0];
         badge.title = flag[1];
         optionsTd.appendChild(badge);
@@ -2265,6 +3156,34 @@ const clientJs = `
     var actionsWrap = document.createElement("div");
     actionsWrap.className = "row-actions";
     actionsTd.appendChild(actionsWrap);
+    var accessBtn = document.createElement("button");
+    accessBtn.type = "button";
+    var allowCount = row.allow ? row.allow.length : 0;
+    accessBtn.className = "btn btn-sm btn-icon" + (allowCount ? " is-set" : "");
+    accessBtn.title = allowCount ? "Internal access: " + row.allow.join(", ") : "Internal access: let shared visitors reach addresses such as localhost:3000";
+    accessBtn.setAttribute("aria-label", "Internal access for " + row.host);
+    var accessSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    accessSvg.setAttribute("viewBox", "0 0 24 24");
+    accessSvg.setAttribute("aria-hidden", "true");
+    var accessPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    accessPath.setAttribute("d", "M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6l7-3zM9.5 12l1.8 1.8L15 10");
+    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";
@@ -2275,20 +3194,24 @@ const clientJs = `
     removeBtn.className = "btn btn-sm btn-danger";
     removeBtn.textContent = "Remove";
     removeBtn.addEventListener("click", function () {
-      if (prefs.confirm && !window.confirm("Remove host " + row.host + "?")) return;
-      removeBtn.disabled = true;
-      apiFetch("/api/hosts/" + encodeURIComponent(row.host), { method: "DELETE" })
-        .then(function () {
-          showToast("Removed " + row.host, "success");
-          return loadHosts();
-        })
-        .catch(function (err) {
-          apiError(err, "Couldn't remove " + row.host);
-          removeBtn.disabled = false;
-        });
+      (prefs.confirm ? confirmDialog({ title: "Remove host " + row.host + "?", message: "This can't be undone.", confirmLabel: "Remove host", danger: true }) : Promise.resolve(true)).then(function (ok) {
+        if (!ok) return;
+        removeBtn.disabled = true;
+        apiFetch("/api/hosts/" + encodeURIComponent(row.host), { method: "DELETE" })
+          .then(function () {
+            showToast("Removed " + row.host, "success");
+            return loadHosts();
+          })
+          .catch(function (err) {
+            apiError(err, "Couldn't remove " + row.host);
+            removeBtn.disabled = false;
+          });
+      });
     });
     if (!row.remote) {
       actionsWrap.appendChild(shareButton(row));
+      actionsWrap.appendChild(accessBtn);
+      actionsWrap.appendChild(protectBtn);
       actionsWrap.appendChild(editBtn);
     }
     actionsWrap.appendChild(removeBtn);
@@ -2454,13 +3377,15 @@ const clientJs = `
 
   logsRefreshBtn.addEventListener("click", loadLogs);
   logsClearBtn.addEventListener("click", function () {
-    if (!window.confirm("Clear logs?")) return;
-    apiFetch("/api/logs/clear", { method: "POST" })
-      .then(function () {
-        showToast("Logs cleared", "success");
-        return loadLogs();
-      })
-      .catch(function (err) { apiError(err, "Couldn't clear logs"); });
+    confirmDialog({ title: "Clear logs?", message: "This can't be undone.", confirmLabel: "Clear logs", danger: true }).then(function (ok) {
+      if (!ok) return;
+      apiFetch("/api/logs/clear", { method: "POST" })
+        .then(function () {
+          showToast("Logs cleared", "success");
+          return loadLogs();
+        })
+        .catch(function (err) { apiError(err, "Couldn't clear logs"); });
+    });
   });
 
   cliAddCopy.addEventListener("click", function () { copyText(cliAddPre.textContent, cliAddCopy); });
@@ -2886,7 +3811,8 @@ const clientJs = `
   });
 
   restartBtn.addEventListener("click", function () {
-    if (!window.confirm("Restart the proxy? Hosts are unavailable for a few seconds.")) return;
+    confirmDialog({ title: "Restart the proxy?", message: "Hosts are unavailable for a few seconds.", confirmLabel: "Restart", danger: true }).then(function (ok) {
+    if (!ok) return;
     var s = settingsLoaded;
     var nextPort = s ? ((s.env && s.env.httpPort) ? s.httpPort : ((s.saved && s.saved.httpPort) || s.httpPort)) : null;
     restartBtn.disabled = true;
@@ -2919,6 +3845,7 @@ const clientJs = `
         restartBtn.disabled = false;
         restartBtn.classList.remove("busy");
       });
+    });
   });
 
   document.getElementById("set-home-copy").addEventListener("click", function (e) { copyText(setHome.textContent, e.currentTarget); });
@@ -3649,6 +4576,172 @@ function renderPage(nonce, token, uiAuth = false) {
   <a href="https://github.com/avinashid/locadot" target="_blank" rel="noopener noreferrer">github.com/avinashid/locadot</a>
 </footer>
 </div>
+<dialog id="allow-dialog">
+  <div class="modal-head">
+    <div>
+      <h3 class="modal-title">Internal access</h3>
+      <p id="allow-host" class="modal-sub mono"></p>
+    </div>
+    <button type="button" id="allow-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">People who open this mapping through a tunnel or remote access can only reach public hosts. Allow the internal addresses this app calls, such as its API on localhost.</p>
+    <div id="allow-warn" class="modal-warn" hidden>Bypass CORS is off for this mapping. These addresses take effect once it's on, because the page reaches them through locadot's pass-through.</div>
+    <div id="allow-list" class="allow-list"></div>
+    <div class="allow-add-row">
+      <input type="text" id="allow-input" class="input" placeholder="localhost:3000" aria-label="Address" autocomplete="off">
+      <button type="button" id="allow-add" class="btn btn-sm">Add</button>
+    </div>
+    <p class="modal-hint">host:port, or a host alone for any port. locadot's own ports are always blocked.</p>
+    <div id="allow-error" class="field-error" role="alert" hidden></div>
+  </div>
+  <div class="modal-foot">
+    <button type="button" id="allow-cancel" class="btn">Cancel</button>
+    <button type="button" id="allow-save" class="btn btn-primary" disabled>Save changes</button>
+  </div>
+</dialog>
+<dialog id="confirm-dialog">
+  <div class="modal-head">
+    <div>
+      <h3 class="modal-title" id="confirm-title"></h3>
+    </div>
+    <button type="button" id="confirm-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" id="confirm-message"></p>
+  </div>
+  <div class="modal-foot">
+    <button type="button" id="confirm-cancel" class="btn">Cancel</button>
+    <button type="button" id="confirm-ok" class="btn btn-primary">OK</button>
+  </div>
+</dialog>
+<dialog id="prompt-dialog">
+  <div class="modal-head">
+    <div>
+      <h3 class="modal-title" id="prompt-title"></h3>
+    </div>
+    <button type="button" id="prompt-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" id="prompt-message"></p>
+    <div class="field">
+      <label id="prompt-label" for="prompt-input"></label>
+      <input type="text" id="prompt-input" class="input" autocomplete="off">
+    </div>
+    <div id="prompt-error" class="field-error" role="alert" hidden></div>
+  </div>
+  <div class="modal-foot">
+    <button type="button" id="prompt-cancel" class="btn">Cancel</button>
+    <button type="button" id="prompt-confirm" class="btn btn-primary">OK</button>
+  </div>
+</dialog>
+<dialog id="share-dialog">
+  <div class="modal-head">
+    <div>
+      <h3 class="modal-title">Share publicly</h3>
+      <p id="share-host" class="modal-sub mono"></p>
+    </div>
+    <button type="button" id="share-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">Anyone with the link will be able to reach this host, without signing in.</p>
+    <div id="share-options" class="share-options" role="radiogroup" aria-label="Sharing method">
+      <button type="button" id="share-option-random" class="option-card" role="radio" aria-checked="false">
+        <span class="option-dot" aria-hidden="true"></span>
+        <span class="option-body">
+          <span class="option-title">Random URL</span>
+          <span class="option-desc">https://&lt;random&gt;.trycloudflare.com &middot; No account needed. Changes each time sharing restarts.</span>
+        </span>
+      </button>
+      <button type="button" id="share-option-custom" class="option-card" role="radio" aria-checked="false">
+        <span class="option-dot" aria-hidden="true"></span>
+        <span class="option-body">
+          <span class="option-title">Custom domain</span>
+          <span class="option-desc">Your own hostname on a domain in your Cloudflare account. Stable URL.</span>
+          <span id="share-custom-extra" class="option-extra" hidden>
+            <label for="share-domain-input" class="dim">Hostname</label>
+            <input type="text" id="share-domain-input" class="input mono" placeholder="app.example.com" autocomplete="off">
+            <div id="share-domain-error" class="field-error" role="alert" hidden></div>
+            <p id="share-domain-hint" class="modal-hint"></p>
+          </span>
+        </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">
+    <button type="button" id="share-cancel" class="btn">Cancel</button>
+    <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>