Add HTTPS onboarding page; prefer .local host for service URLs

2025-12-13 13:44:01 -05:00
parent 2a439321d0
commit 8c06962f62
3 changed files with 263 additions and 13 deletions
--- a/pikit-web/onboarding/index.html
+++ b/pikit-web/onboarding/index.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Welcome to your Pi-Kit</title>
+    <link rel="stylesheet" href="/onboarding/style.css" />
+  </head>
+  <body>
+    <main class="card">
+      <header>
+        <div class="dot"></div>
+        <h1>Secure connection to your Pi-Kit</h1>
+      </header>
+
+      <p>
+        You’re on your Pi-Kit. Everything stays on your local network. Let’s switch to the
+        secure (HTTPS) dashboard.
+      </p>
+
+      <section class="actions">
+        <button id="continueBtn">Continue to secure dashboard</button>
+        <a class="ghost" id="downloadCa" href="/assets/pikit-ca.crt" download>Download Pi-Kit CA</a>
+      </section>
+
+      <section class="steps">
+        <h3>If you see a warning</h3>
+        <ul>
+          <li>Brave/Chrome: click <strong>Advanced</strong> → <strong>Proceed</strong>.</li>
+          <li>Firefox: click <strong>Advanced</strong> → <strong>Accept the Risk & Continue</strong>.</li>
+        </ul>
+        <p>This is safe for your own Pi on your own network.</p>
+      </section>
+
+      <section class="steps">
+        <h3>Install the Pi-Kit CA (recommended, one-time)</h3>
+        <p>This removes future warnings for both Pi-Kit and DietPi dashboards.</p>
+        <details>
+          <summary>Linux (Arch/Endeavour)</summary>
+          <code id="archCmd">curl -s https://pikit.local/assets/pikit-ca.crt -o /tmp/pikit-ca.crt && sudo install -m644 /tmp/pikit-ca.crt /etc/ca-certificates/trust-source/anchors/ && sudo trust extract-compat</code>
+          <button class="copy" data-target="archCmd">Copy</button>
+        </details>
+        <details>
+          <summary>Linux (Debian/Ubuntu)</summary>
+          <code id="debCmd">curl -s https://pikit.local/assets/pikit-ca.crt -o /tmp/pikit-ca.crt && sudo cp /tmp/pikit-ca.crt /usr/local/share/ca-certificates/pikit-ca.crt && sudo update-ca-certificates</code>
+          <button class="copy" data-target="debCmd">Copy</button>
+        </details>
+        <details>
+          <summary>macOS</summary>
+          <p>Double-click <em>pikit-ca.crt</em> → Always Trust.</p>
+        </details>
+        <details>
+          <summary>Windows</summary>
+          <p>Run <strong>mmc</strong> → Add/Remove Snap-in → Certificates (Computer) → Trusted Root CAs → Import <em>pikit-ca.crt</em>.</p>
+        </details>
+      </section>
+
+      <p class="footnote">
+        Once trusted, this page will auto-forward you to the secure dashboard.
+      </p>
+    </main>
+
+    <script>
+      (function () {
+        const target = `https://${location.hostname}`;
+        const log = (m) => console.log("[pikit onboarding]", m);
+
+        async function probe() {
+          try {
+            await fetch(`${target}/api/status`, { mode: "no-cors", cache: "no-store" });
+            log("HTTPS reachable, redirecting");
+            window.location = target;
+          } catch (e) {
+            log("HTTPS probe failed; staying on onboarding page");
+          }
+        }
+
+        document.getElementById("continueBtn").addEventListener("click", () => {
+          window.location = target;
+        });
+
+        document.querySelectorAll(".copy").forEach((btn) => {
+          btn.addEventListener("click", async () => {
+            const id = btn.dataset.target;
+            const el = document.getElementById(id);
+            const text = el.textContent.trim();
+            try {
+              if (navigator.clipboard && window.isSecureContext) {
+                await navigator.clipboard.writeText(text);
+              } else {
+                const ta = document.createElement("textarea");
+                ta.value = text;
+                ta.style.position = "fixed";
+                ta.style.opacity = "0";
+                document.body.appendChild(ta);
+                ta.select();
+                document.execCommand("copy");
+                document.body.removeChild(ta);
+              }
+              btn.textContent = "Copied";
+              setTimeout(() => (btn.textContent = "Copy"), 1500);
+            } catch (err) {
+              btn.textContent = "Failed";
+              setTimeout(() => (btn.textContent = "Copy"), 1500);
+            }
+          });
+        });
+
+        probe();
+      })();
+    </script>
+  </body>
+</html>