sliftutils 1.4.5 → 1.4.7

package/index.d.ts

@@ -1898,6 +1898,15 @@ declare module "sliftutils/storage/remoteFileStorage" {
         stats: Connection["stats"];
     };
     export declare function getRemoteFileStorage(url: string, password: string, options?: RemoteFileStorageOptions): RemoteStorageFactory;
+    export type RemoteProbeResult = {
+        status: "ok";
+    } | {
+        status: "unauthorized";
+    } | {
+        status: "unreachable";
+        error: string;
+    };
+    export declare function probeRemoteConnection(url: string, password: string): Promise<RemoteProbeResult>;
     export {};
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sliftutils",
-    "version": "1.4.5",
+    "version": "1.4.7",
     "main": "index.js",
     "license": "MIT",
     "files": [

package/storage/FileFolderAPI.tsx

@@ -7,7 +7,7 @@ import { css, isNode } from "typesafecss";
 import { IStorageRaw } from "./IStorage";
 import { runInSerial } from "socket-function/src/batching";
 import { getFileStorageIndexDB } from "./IndexedDBFileFolderAPI";
-import { getRemoteFileStorage } from "./remoteFileStorage";
+import { getRemoteFileStorage, probeRemoteConnection } from "./remoteFileStorage";
 import fs from "fs";
 import path from "path";
 
@@ -128,20 +128,32 @@ class DirectoryPrompter extends preact.Component {
 // reloads so getFileStorageNested2 picks up the remote storage.
 @observer
 class ServerConnectForm extends preact.Component {
-    private obs = observable({ expanded: false, url: "", password: "", error: "", connecting: false });
+    private obs = observable({ expanded: false, url: "", password: "", error: "", connecting: false, needsCert: false, showPassword: false });
+    private cleanUrl() { return this.obs.url.trim().replace(/\/+$/, ""); }
     private connect = async () => {
         const s = this.obs;
         s.error = "";
+        s.needsCert = false;
         s.connecting = true;
         try {
-            const url = s.url.trim().replace(/\/+$/, "");
-            if (!url) throw new Error("Enter a server URL");
-            // A successful listing proves the URL is reachable and the password is correct.
-            await (await getRemoteFileStorage(url, s.password.trim())("")).getKeys();
-            saveRemoteConfig({ url, password: s.password.trim() });
-            window.location.reload();
+            const url = this.cleanUrl();
+            if (!url) { s.error = "Enter a server URL"; return; }
+            const result = await probeRemoteConnection(url, s.password.trim());
+            if (result.status === "ok") {
+                saveRemoteConfig({ url, password: s.password.trim() });
+                window.location.reload();
+                return;
+            }
+            if (result.status === "unauthorized") {
+                s.error = "The server rejected that password.";
+            } else {
+                // Reached nothing back — almost always the self-signed certificate isn't trusted yet.
+                s.needsCert = true;
+                s.error = "Couldn't reach the server.";
+            }
         } catch (e) {
             s.error = "Could not connect: " + ((e as Error).message || String(e));
+        } finally {
             s.connecting = false;
         }
     };
@@ -156,14 +168,29 @@ class ServerConnectForm extends preact.Component {
             <div className={css.vbox(16).center}>
                 <input className={inputCss} placeholder="https://host:8787" value={s.url}
                     onInput={e => s.url = (e.target as HTMLInputElement).value} />
-                <input className={inputCss} type="password" placeholder="password (six words)" value={s.password}
-                    onInput={e => s.password = (e.target as HTMLInputElement).value} />
-                {s.error ? <div className={css.fontSize(20).color("red").maxWidth("80vw")}>{s.error}</div> : null}
+                <div className={css.hbox(10).center}>
+                    <input className={inputCss} type={s.showPassword ? "text" : "password"} placeholder="password (six words)" value={s.password}
+                        onInput={e => s.password = (e.target as HTMLInputElement).value} />
+                    <button className={css.fontSize(22).pad2(24, 12)} onClick={() => s.showPassword = !s.showPassword}>
+                        {s.showPassword ? "Hide" : "Show"}
+                    </button>
+                </div>
+                {s.error ? <div className={css.fontSize(22).color("red").maxWidth("80vw")}>{s.error}</div> : null}
+                {s.needsCert ? (
+                    <div className={css.vbox(10).center.fontSize(20).maxWidth(620).maxWidth("80vw").textAlign("center").color("hsl(0, 0%, 25%)")}>
+                        <div>This server uses a self-signed certificate, so your browser has to trust it once:</div>
+                        <div>1. Open the server in a new tab (button below). &nbsp; 2. Accept the security warning (Advanced → Proceed). &nbsp; 3. Come back and click Retry.</div>
+                        <button className={css.fontSize(26).pad2(40, 20)}
+                            onClick={() => { const u = this.cleanUrl(); if (u) window.open(u + "/", "_blank"); }}>
+                            Open server &amp; accept certificate
+                        </button>
+                    </div>
+                ) : null}
                 <div className={css.hbox(16)}>
                     <button className={btnCss} disabled={s.connecting} onClick={this.connect}>
-                        {s.connecting ? "Connecting…" : "Connect"}
+                        {s.connecting ? "Connecting…" : s.needsCert ? "Retry" : "Connect"}
                     </button>
-                    <button className={btnCss} onClick={() => { s.expanded = false; s.error = ""; }}>Back</button>
+                    <button className={btnCss} onClick={() => { s.expanded = false; s.error = ""; s.needsCert = false; }}>Back</button>
                 </div>
             </div>
         );

package/storage/remoteFileServer.ts

@@ -257,6 +257,11 @@ function formatBytes(n: number): string {
     return (n / 1024 / 1024 / 1024).toFixed(2) + "GB";
 }
 
+// Public (no-auth) landing page. The browser can't trust a self-signed cert from a background fetch, so
+// the user opens this URL once, accepts the browser's security warning, and the cert becomes trusted for
+// the origin — then the app's fetches work. This page is what they see after accepting.
+const CERT_LANDING_HTML = `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>sliftutils file server</title></head><body style="font-family:system-ui,sans-serif;max-width:34em;margin:3em auto;padding:0 1em;line-height:1.5;color:#222"><h2>&#10003; Certificate accepted</h2><p>This is your <b>sliftutils file server</b>. Your browser now trusts its self-signed certificate for this address.</p><p>Return to the app and click <b>Retry</b> (or <b>Connect</b>) to finish connecting with your password.</p><p style="color:#888;font-size:.9em">You can close this tab.</p></body></html>`;
+
 export type RemoteFileServerOptions = {
     root: string;
     port?: number;
@@ -319,12 +324,18 @@ export function startRemoteFileServer(options: RemoteFileServerOptions): Promise
         try {
             if (req.method === "OPTIONS") return send(204, {});
 
+            const url = new URL(req.url || "/", "https://localhost");
+            const op = url.pathname;
+
+            // Public landing page so the user can open the URL once to accept the self-signed cert.
+            if (req.method === "GET" && (op === "/" || op === "/index.html")) {
+                return send(200, { "Content-Type": "text/html; charset=utf-8" }, CERT_LANDING_HTML);
+            }
+
             const auth = (req.headers["authorization"] as string) || "";
             const token = auth.startsWith("Bearer ") ? auth.slice(7) : "";
             if (!timingSafeEqualStr(normalizePassword(token), normPassword)) return sendJson(401, { error: "unauthorized" });
 
-            const url = new URL(req.url || "/", "https://localhost");
-            const op = url.pathname;
             const relPath = url.searchParams.get("path") || "";
             const full = safeResolve(root, relPath);
             if (full === undefined) return sendJson(403, { error: "path escapes root" });

package/storage/remoteFileStorage.d.ts

@@ -35,4 +35,13 @@ export type RemoteStorageFactory = ((path: string) => Promise<FileStorage>) & {
     stats: Connection["stats"];
 };
 export declare function getRemoteFileStorage(url: string, password: string, options?: RemoteFileStorageOptions): RemoteStorageFactory;
+export type RemoteProbeResult = {
+    status: "ok";
+} | {
+    status: "unauthorized";
+} | {
+    status: "unreachable";
+    error: string;
+};
+export declare function probeRemoteConnection(url: string, password: string): Promise<RemoteProbeResult>;
 export {};

package/storage/remoteFileStorage.ts

@@ -234,3 +234,27 @@ export function getRemoteFileStorage(url: string, password: string, options: Rem
     factory.stats = conn.stats;
     return factory;
 }
+
+export type RemoteProbeResult =
+    | { status: "ok" }
+    | { status: "unauthorized" }
+    // Couldn't reach the server at all — in the browser this is usually the self-signed certificate not
+    // being trusted yet (fetch throws with no detail), but also covers a wrong URL / server down / CORS.
+    | { status: "unreachable"; error: string };
+
+// Probes a remote server: distinguishes "connected" from "wrong password" from "couldn't reach it". The
+// browser can't tell a cert-distrust from other network failures (fetch just throws), so the UI treats
+// `unreachable` as "you probably need to accept the self-signed certificate first".
+export async function probeRemoteConnection(url: string, password: string): Promise<RemoteProbeResult> {
+    try {
+        await (await getRemoteFileStorage(url, password)("")).getKeys();
+        return { status: "ok" };
+    } catch (e) {
+        const msg = (e as Error)?.message || String(e);
+        // Our client throws "remote ... failed (NNN)" when it actually got an HTTP response (so the cert
+        // is trusted); a thrown fetch with no status means we never connected.
+        const m = msg.match(/\((\d{3})\)/);
+        if (m) return m[1] === "401" ? { status: "unauthorized" } : { status: "unreachable", error: msg };
+        return { status: "unreachable", error: msg };
+    }
+}