landfall 0.4.2 → 0.4.3

package/dist/index.html

@@ -583,8 +583,13 @@ function appendOutput(j) {
   const frag = document.createDocumentFragment();
   for (const l of j.lines.slice(out.textContent ? shown : 0)) {
     const div = document.createElement("div");
-    div.textContent = l.replace(ANSI, "") || " ";
-    const c = lineClass(div.textContent);
+    const text = l.replace(ANSI, "") || " ";
+    // Addresses (a tunnel's localhost one, a deployed site) open in a new tab.
+    for (const [i, part] of text.split(/(https?:\/\/[^\s)]+)/).entries()) {
+      if (!(i % 2)) div.append(part);
+      else div.append(Object.assign(document.createElement("a"), { href: part, textContent: part, target: "_blank", rel: "noopener" }));
+    }
+    const c = lineClass(text);
     if (c) div.className = c;
     frag.append(div);
   }
@@ -719,6 +724,11 @@ function dialog({ title, text = "", fields = [], ok = "OK", danger = false, onOk
   (first || (danger ? $("#dlg-cancel", dlg) : submit)).focus();
 }
 const invalid = (field, error) => ({ field, error });
+/** What is wrong with a login (lf newLogin's rules), as [field, message]. */
+const loginError = (user, password) =>
+  !/^[A-Za-z0-9._@-]{1,64}$/.test(user) ? ["user", "Only letters, digits and . _ @ -"]
+  : password.length < 8 ? ["password", "The password needs at least 8 characters"]
+  : null;
 /**
  * Passwords here are for servers and sites, not for this page: a masked text field, so browsers
  * and password managers do not offer to save them. Browsers without text masking get a password field.
@@ -780,6 +790,7 @@ function setupWizard(base) {
           { name: "image", label: "Image", value: saved.traefikImage ?? S.state.defaultImage },
           { name: "email", label: "Let's Encrypt e-mail (optional)", value: saved.email ?? "" },
           { name: "dashboard", label: "Dashboard domain (optional)", value: "", placeholder: "traefik.example.com", hint: "Behind basic auth; the password is shown after setup." },
+          { name: "http3", label: "HTTP/3 (QUIC on 443/udp)", type: "check", value: saved.http3 !== false, hint: "Browsers that can't use it fall back to HTTP/2." },
         ],
       },
       { name: "firewall", label: "Enable ufw: deny incoming except ssh, 80 and 443", type: "check", value: true, hint: "Skipped automatically if it would block ports in use." },
@@ -794,6 +805,7 @@ function setupWizard(base) {
         if (v.image.trim()) f.push(`--image=${v.image.trim()}`);
         if (v.email.trim()) f.push(`--email=${v.email.trim()}`);
         if (v.dashboard.trim()) f.push(`--dashboard=${v.dashboard.trim()}`);
+        f.push(v.http3 ? "--http3" : "--no-http3");
       }
       if (!v.firewall) f.push("--no-firewall");
       if (!v.harden) f.push("--no-harden");
@@ -878,7 +890,7 @@ function describe(d) {
     d.kind === "compose" ? `Compose project <code>${esc(d.compose ?? "compose.yaml")}</code>: built and started on the server; x-landfall picks the routed service`
     : d.kind === "image" ? `Docker image <code>${esc(d.project?.image ?? "")}</code> (from .landfall.json)`
     : d.kind === "dockerfile" ? `Dockerfile: built on the server, served on port ${esc(d.port)}`
-    : d.dir ? `Static files from <code>${esc(d.dir === "." ? "./" : d.dir + "/")}</code>${d.spa ? " (single-page app)" : ""}${built}`
+    : d.dir ? `Static files from <code>${esc(d.dir === "." ? "./" : d.dir + "/")}</code>${d.tool ? ` (where ${esc(d.tool)} builds the site)` : ""}${d.spa ? " (single-page app)" : ""}${built}`
     : d.build ? `Static site, built with <code>${esc(d.build)}</code> first`
     : `<span style="color:var(--warn)">No compose.yaml, Dockerfile, index.html or build script here.</span>`;
   const before = d.project?.server ? ` <span class="dim">· deployed before to ${esc(d.project.server)}</span>` : "";
@@ -909,11 +921,15 @@ function deployDialog(det, o = {}) {
       ...(det.kind === "static"
         ? [
             { name: "build", label: "Build command (runs here, before upload)", value: det.build ?? "", placeholder: "none" },
+            {
+              name: "dir", label: "Folder to publish", value: det.dir ?? ".", placeholder: ".",
+              hint: det.tool ? `Detected: ${det.tool} writes the site to ${det.dir}/ (it need not exist before the build).` : "Relative to the project; it needs an index.html after the build.",
+            },
             { name: "spa", label: "Single-page app (unknown paths serve index.html)", type: "check", value: !!p?.spa },
           ]
         : []),
-      { name: "authUser", label: "Login user (optional)", placeholder: "admin", hint: "Visitors log in with this user and password (HTTP basic auth). Empty: no change; set or remove it later with Password… on the site." },
-      { name: "authPassword", label: "Login password (at least 8 characters)", type: "password" },
+      { name: "authPassword", label: "Login password (optional, at least 8 characters)", type: "password", hint: "Visitors log in with the user below and this password (HTTP basic auth). Empty: no change; set or remove it later with Password… on the site." },
+      { name: "authUser", label: "Login user", value: "admin", placeholder: "admin" },
     ],
     ok: "Deploy",
     onOk: (v) => {
@@ -924,11 +940,16 @@ function deployDialog(det, o = {}) {
       const argv = ["deploy", "-y", ...sv(v.server), "-n", n, ...domains.flatMap((d) => ["-d", d])];
       if (v.build?.trim() && v.build.trim() !== p?.build) argv.push("--build", v.build.trim());
       if (v.spa && !p?.spa) argv.push("--spa");
-      const user = v.authUser.trim();
-      if (user && !/^[A-Za-z0-9._@-]{1,64}$/.test(user)) return invalid("authUser", "Only letters, digits and . _ @ -");
-      if (user && v.authPassword.length < 8) return invalid("authPassword", "The password needs at least 8 characters");
-      if (!user && v.authPassword) return invalid("authUser", "Give a user for the password");
-      if (user) argv.push("--auth-user", user, "--auth-password", v.authPassword);
+      const dir = v.dir?.trim().replace(/\/+$/, "") || ".";
+      if (det.kind === "static" && (/^[/-]/.test(dir) || dir.split("/").includes(".."))) return invalid("dir", "A folder inside the project");
+      if (det.kind === "static" && dir !== (det.dir ?? ".")) argv.push(dir);
+      // The login counts once there is a password; the user defaults to admin.
+      if (v.authPassword) {
+        const user = v.authUser.trim() || "admin";
+        const bad = loginError(user, v.authPassword);
+        if (bad) return invalid(bad[0] === "user" ? "authUser" : "authPassword", bad[1]);
+        argv.push("--auth-user", user, "--auth-password", v.authPassword);
+      }
       if (o.upload) argv.push("--no-save");
       run(argv, { server: v.server, cwd: det.path, after: openAfter });
     },
@@ -1103,9 +1124,10 @@ function authDialog(n, m) {
     ok: "Save",
     onOk: (v) => {
       if (v.off) return void run(["auth", m.name, ...sv(n), "--off", "-y"], { server: n });
-      if (!v.user.trim()) return invalid("user", "Give a user name");
-      if (v.password.length < 8) return invalid("password", "The password needs at least 8 characters");
-      run(["auth", m.name, ...sv(n), "-u", v.user.trim(), "-p", v.password], { server: n });
+      const user = v.user.trim() || "admin";
+      const bad = loginError(user, v.password);
+      if (bad) return invalid(...bad);
+      run(["auth", m.name, ...sv(n), "-u", user, "-p", v.password], { server: n });
     },
   });
 }
@@ -1396,6 +1418,7 @@ function sitesView(n, o) {
             ? { label: "Roll back…", hint: "lf rollback", title: `To ${older[0].id} (${ago(older[0].at)})`, run: () => confirmDlg({ title: `Roll back ${name}?`, text: `From ${m.current} to ${older[0].id} (${ago(older[0].at)}). Volumes keep their data.`, ok: "Roll back", onOk: () => run(["rollback", name, ...sv(n), "-y"]) }) }
             : null,
           "-",
+          old ? null : { label: "Open via tunnel", hint: "lf tunnel", title: "An SSH tunnel straight to the container: test it on localhost, no domain needed", run: () => run(["tunnel", name, ...sv(n)], { server: n }) },
           main ? { label: "Domains…", hint: "lf domains", run: () => domainsDialog(n, m) } : null,
           managed ? { label: m.auth?.length ? "Login…" : "Password…", hint: "lf auth", title: "Protect the site with a user and password", run: () => authDialog(n, m) } : null,
           managed ? { label: "Environment…", hint: "lf env", run: () => envDialog(n, name) } : null,
@@ -1687,13 +1710,58 @@ function settingsView(n) {
       if (d) run(["server", "domain", n, "--add", d], reload);
     }, "Add");
   const dashboard = () =>
-    promptDlg(`Traefik dashboard on ${n}`, "Serves the dashboard behind a password (shown in the output). `off` removes it.\nRuns lf traefik setup, which reconfigures landfall's Traefik.", { label: "Domain", type: "text", value: x.traefik.dashboard ?? (x.domains[0] ? `traefik.${x.domains[0]}` : "") }, (d) => {
-      if (d) run(["traefik", "setup", ...sv(n), "--dashboard", d], reload);
-    }, "Apply");
+    dialog({
+      title: `Traefik dashboard on ${n}`,
+      text: "Serves the dashboard on a domain behind a login. Without one it stays reachable through an SSH tunnel only (Open via tunnel).\nRuns lf traefik setup, which reconfigures landfall's Traefik.",
+      fields: [
+        { name: "domain", label: "Domain", value: x.traefik.dashboard ?? "", placeholder: x.domains[0] ? `traefik.${x.domains[0]}` : "traefik.example.com", hint: x.traefik.dashboard ? "Empty: take the dashboard off its domain." : "Needs an A record pointing at the server." },
+        { name: "user", label: "Login user", value: "admin", placeholder: "admin" },
+        { name: "password", label: "Login password (at least 8 characters)", type: "password", hint: x.traefik.dashboard ? "Empty: keeps the current one." : "Empty: a generated one, shown in the output." },
+      ],
+      ok: "Apply",
+      onOk: (v) => {
+        const d = v.domain.trim();
+        const user = v.user.trim() || "admin";
+        if (!d && !x.traefik.dashboard) return invalid("domain", "Give a domain, or use the tunnel");
+        const bad = d && loginError(user, v.password || "generated");
+        if (bad) return invalid(...bad);
+        const argv = ["traefik", "setup", ...sv(n), "--dashboard", d || "off"];
+        if (d) argv.push("--dashboard-user", user, ...(v.password ? ["--dashboard-password", v.password] : []));
+        run(argv, reload);
+      },
+    });
+  const traefikDialog = () =>
+    dialog({
+      title: `Traefik on ${n}`,
+      text: "Runs lf traefik setup, which reconfigures landfall's Traefik and restarts it (a few seconds without traffic). The settings are remembered.",
+      fields: [
+        { name: "http3", label: "HTTP/3 (QUIC on 443/udp)", type: "check", value: x.traefik.http3, hint: "Faster on lossy and mobile connections; browsers that can't use it fall back to HTTP/2." },
+        {
+          name: "mode", label: "Ports", type: "select", value: x.traefik.hostNetwork ? "host" : "docker",
+          options: [
+            { value: "docker", label: "Published by Docker (default)" },
+            { value: "host", label: "Host network: real client IPs, ufw guards 80/443" },
+          ],
+        },
+        { name: "image", label: "Image", value: x.traefik.image, placeholder: S.state.defaultImage },
+        { name: "email", label: "Let's Encrypt e-mail (optional)", value: x.traefik.email ?? "", hint: "Only the account contact; Let's Encrypt no longer mails expiry warnings." },
+        { name: "staging", label: "Let's Encrypt staging CA (test certificates, browsers warn)", type: "check", value: x.traefik.staging },
+      ],
+      ok: "Apply",
+      onOk: (v) => {
+        const argv = ["traefik", "setup", ...sv(n), v.http3 ? "--http3" : "--no-http3", v.mode === "host" ? "--host-network" : "--no-host-network", v.staging ? "--staging" : "--no-staging"];
+        if (v.image.trim()) argv.push("--image", v.image.trim());
+        if (v.email.trim()) argv.push("--email", v.email.trim());
+        run(argv, reload);
+      },
+    });
+  const tunnel = () => run(["traefik", "dashboard", ...sv(n)], { server: n });
   const sites = S.overview[n]?.data?.sites ?? [];
   // lf traefik setup refuses to touch a Traefik the server already had.
   const o = S.overview[n]?.data;
   const foreign = o?.adopted ? o.proxy : "";
+  const dash = o?.dashboard ?? { hosts: x.traefik.dashboard ? [x.traefik.dashboard] : [], tunnel: false };
+  const link = (h) => `<a href="https://${esc(h)}" target="_blank" rel="noopener">${esc(h)}</a>`;
   const external = (d) => S.overview[n]?.data?.others?.find((e) => e.domains.includes(d))?.name;
   const servedBy = (d) => sites.find((s) => s.domains.includes(d))?.meta.name;
   const serve = (d) => {
@@ -1730,11 +1798,15 @@ function settingsView(n) {
         ${x.suggest.length ? `<div class="note">${x.domains.length ? "Other domains" : "Domains"} your sites on this server already use: ${x.suggest.map((g) => `<b>${esc(g.domain)}</b> <span class="faint">(${g.hosts})</span> ${btn("Add", () => run(["server", "domain", n, "--add", g.domain], reload), "sm")}`).join(" ")}</div>` : ""}</div>
     </div>
     <div class="card">
-      <h2>Traefik <span class="actions">${foreign ? "" : btn("Dashboard…", dashboard, "sm")}</span></h2>
+      <h2>Traefik <span class="actions">${dash.tunnel ? btn("Open via tunnel", tunnel, "sm", "lf traefik dashboard: an SSH tunnel to the dashboard, until you stop it") : ""}${foreign ? "" : btn("Dashboard…", dashboard, "sm") + btn("Settings…", traefikDialog, "sm")}</span></h2>
       <div class="body">${foreign ? `<div class="note">Sites go through <b class="mono">${esc(foreign)}</b>, a Traefik landfall did not install and never changes: its dashboard is set up in its own config.</div>` : ""}${rows([
         ["image", esc(x.traefik.summary)],
         ["e-mail", esc(x.traefik.email ?? "none")],
-        ["dashboard", x.traefik.dashboard ? `<a href="https://${esc(x.traefik.dashboard)}" target="_blank" rel="noopener">${esc(x.traefik.dashboard)}</a>` : "off"],
+        ["HTTP/3", x.traefik.http3 ? `on <span class="dim">(443/udp)</span>` : `<span class="dim">off</span>`],
+        ["dashboard", `${dash.hosts.length ? `${dash.hosts.map(link).join(", ")} <span class="dim">(with its login)</span>` : `<span class="dim">no domain</span>`}${
+          dash.tunnel ? ` · <span class="dim">tunnel: lf traefik dashboard</span>`
+          : foreign ? ` · <span class="dim">tunnel: lf traefik dashboard --port &lt;its api port&gt;</span>`
+          : ` · <span class="dim">no tunnel yet</span> ${btn("Enable tunnel", () => run(["traefik", "setup", ...sv(n)], reload), "sm", "Re-runs lf traefik setup, which adds it")}`}`],
         ["files", `<span class="mono">${esc(P.traefik)}/docker-compose.yml</span>`],
         ["certificates", `<span class="mono">${esc(P.traefik)}/letsencrypt/</span> <span class="dim">(kept on reinstall)</span>`],
       ])}<p class="faint">Used when landfall installs or reconfigures its own Traefik. With a Traefik that was already there, landfall only writes <span class="mono">${esc(P.proxy)}</span>.</p></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "landfall",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Set up servers and deploy sites behind Traefik with automatic HTTPS",
   "author": "ph1p <me@ph1p.dev>",
   "license": "MIT",