@putkoff/abstract-securefiles 0.0.48 → 0.0.49

package/src/ServerFiles.tsx

@@ -0,0 +1,324 @@
+import React, { useCallback, useEffect, useState } from "react";
+import type { SecureFilesApi } from "./api";
+import type { BrowseResult, LinkRoot, RootChallenge } from "./types";
+import { ConfirmButton } from "./ConfirmButton";
+import { CopyButton } from "./CopyButton";
+import { FolderSelect } from "./FolderSelect";
+
+function formatSize(bytes: number) {
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let n = bytes;
+  let i = 0;
+  while (n >= 1024 && i < units.length - 1) {
+    n /= 1024;
+    i++;
+  }
+  return `${n.toFixed(i ? 1 : 0)} ${units[i]}`;
+}
+
+const errText = (err: unknown) => (err instanceof Error ? err.message : String(err));
+
+function AddRoot({ api, onAdded }: { api: SecureFilesApi; onAdded: (roots: LinkRoot[]) => void }) {
+  const [path, setPath] = useState("");
+  const [label, setLabel] = useState("");
+  const [challenge, setChallenge] = useState<RootChallenge | null>(null);
+  const [signature, setSignature] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const request = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      setChallenge((await api.requestRoot(path.trim())).challenge);
+      setSignature("");
+    } catch (err) {
+      setError(errText(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const confirm = async () => {
+    if (!challenge) return;
+    setBusy(true);
+    setError(null);
+    try {
+      onAdded((await api.confirmRoot(challenge.nonce, signature, label)).roots);
+      setChallenge(null);
+      setPath("");
+      setLabel("");
+      setSignature("");
+    } catch (err) {
+      setError(errText(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const minutesLeft = challenge ? Math.max(0, Math.round((challenge.expires * 1000 - Date.now()) / 60000)) : 0;
+
+  return (
+    <div className="sf-card">
+      <h4>Allow a directory</h4>
+      {!challenge ? (
+        <div className="sf-row sf-row--bottom">
+          <label className="sf-field">
+            <span>Absolute path on the server</span>
+            <input
+              className="sf-input"
+              value={path}
+              onChange={(e) => setPath(e.target.value)}
+              placeholder="/srv/shared/docs"
+              onKeyDown={(e) => e.key === "Enter" && path.trim() && request()}
+            />
+          </label>
+          <label className="sf-field sf-field--narrow">
+            <span>Label (optional)</span>
+            <input className="sf-input" value={label} onChange={(e) => setLabel(e.target.value)} />
+          </label>
+          <button type="button" className="sf-btn sf-btn--primary" disabled={busy || !path.trim()} onClick={request}>
+            Request
+          </button>
+        </div>
+      ) : (
+        <div className="sf-stack">
+          <p>
+            Allowing <code>{challenge.message.split("|")[3]}</code> requires a signature from a trusted SSH key. Run
+            this where that key lives (expires in about {minutesLeft} min):
+          </p>
+          <div className="sf-row">
+            <textarea className="sf-input sf-code" readOnly rows={3} value={challenge.command} />
+            <CopyButton text={challenge.command} label="Copy command" />
+          </div>
+          <label className="sf-field">
+            <span>Paste the full output (BEGIN … END SSH SIGNATURE)</span>
+            <textarea
+              className="sf-input sf-code"
+              rows={6}
+              value={signature}
+              onChange={(e) => setSignature(e.target.value)}
+              placeholder="-----BEGIN SSH SIGNATURE-----"
+            />
+          </label>
+          <div className="sf-row">
+            <button
+              type="button"
+              className="sf-btn sf-btn--primary"
+              disabled={busy || !signature.includes("END SSH SIGNATURE")}
+              onClick={confirm}
+            >
+              Verify &amp; allow
+            </button>
+            <button type="button" className="sf-btn" onClick={() => setChallenge(null)}>
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+      {error && <p className="sf-error">{error}</p>}
+    </div>
+  );
+}
+
+function Browser({
+  api,
+  roots,
+  folders,
+  onLinked,
+}: {
+  api: SecureFilesApi;
+  roots: LinkRoot[];
+  folders: string[];
+  onLinked: () => void;
+}) {
+  const [listing, setListing] = useState<BrowseResult | null>(null);
+  const [picked, setPicked] = useState<Set<string>>(new Set());
+  const [target, setTarget] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const open = useCallback(
+    async (path: string) => {
+      setError(null);
+      try {
+        setListing(await api.browse(path));
+        setPicked(new Set());
+      } catch (err) {
+        setError(errText(err));
+      }
+    },
+    [api]
+  );
+
+  useEffect(() => {
+    if (!listing && roots.length) open(roots[0].path);
+    if (listing && !roots.some((r) => listing.path.startsWith(r.path))) setListing(null);
+  }, [roots, listing, open]);
+
+  const link = async () => {
+    setBusy(true);
+    setResult(null);
+    try {
+      const res = await api.link([...picked], target);
+      const parts = [`Linked ${res.linked.length} file(s)`];
+      if (res.errors.length) parts.push(`${res.errors.length} skipped: ${res.errors.map((e) => e.error).join("; ")}`);
+      setResult(parts.join(". "));
+      onLinked();
+      if (listing) await open(listing.path);
+    } catch (err) {
+      setResult(errText(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (!roots.length) return <p className="sf-muted">Allow a directory above to browse and link its files.</p>;
+
+  const linkable = listing?.files.filter((f) => !f.linked_id) ?? [];
+  const relative = listing ? listing.path.slice(listing.root.length) || "/" : "";
+
+  return (
+    <div className="sf-card">
+      <h4>Link files</h4>
+      <div className="sf-row">
+        <select
+          className="sf-input sf-root-select"
+          value={listing?.root ?? ""}
+          onChange={(e) => open(e.target.value)}
+        >
+          {roots.map((r) => (
+            <option key={r.id} value={r.path}>
+              {r.label ? `${r.label} (${r.path})` : r.path}
+            </option>
+          ))}
+        </select>
+        {listing && <code className="sf-muted">{relative}</code>}
+      </div>
+      {error && <p className="sf-error">{error}</p>}
+      {listing && (
+        <div className="sf-browser">
+          {listing.parent && (
+            <button type="button" className="sf-browser__dir" onClick={() => open(listing.parent!)}>
+              ↩ ..
+            </button>
+          )}
+          {listing.dirs.map((d) => (
+            <button key={d} type="button" className="sf-browser__dir" onClick={() => open(`${listing.path}/${d}`)}>
+              📁 {d}
+            </button>
+          ))}
+          {listing.files.length > 0 && (
+            <label className="sf-check sf-browser__all">
+              <input
+                type="checkbox"
+                checked={linkable.length > 0 && linkable.every((f) => picked.has(f.path))}
+                disabled={!linkable.length}
+                onChange={(e) => setPicked(e.target.checked ? new Set(linkable.map((f) => f.path)) : new Set())}
+              />
+              Select all files here
+            </label>
+          )}
+          {listing.files.map((f) => (
+            <label key={f.path} className={`sf-check sf-browser__file${f.linked_id ? " sf-muted" : ""}`}>
+              <input
+                type="checkbox"
+                disabled={!!f.linked_id}
+                checked={picked.has(f.path)}
+                onChange={(e) =>
+                  setPicked((p) => {
+                    const next = new Set(p);
+                    e.target.checked ? next.add(f.path) : next.delete(f.path);
+                    return next;
+                  })
+                }
+              />
+              <span className="sf-browser__name">{f.name}</span>
+              <span className="sf-muted">{f.linked_id ? "already linked" : formatSize(f.size)}</span>
+            </label>
+          ))}
+          {!listing.dirs.length && !listing.files.length && <p className="sf-muted">Empty directory</p>}
+          {listing.truncated && <p className="sf-muted">Showing the first 5000 entries.</p>}
+        </div>
+      )}
+      <div className="sf-row sf-row--bottom">
+        <FolderSelect label="Show in Secure Files under" folders={folders} value={target} onChange={setTarget} />
+        <button type="button" className="sf-btn sf-btn--primary" disabled={busy || !picked.size} onClick={link}>
+          {busy ? "Linking…" : `Link ${picked.size || ""}`.trim()}
+        </button>
+      </div>
+      {result && <p className={result.includes("skipped") ? "sf-error" : "sf-muted"}>{result}</p>}
+    </div>
+  );
+}
+
+export function ServerFiles({
+  api,
+  folders,
+  onLinked,
+}: {
+  api: SecureFilesApi;
+  folders: string[];
+  onLinked: () => void;
+}) {
+  const [roots, setRoots] = useState<LinkRoot[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      setRoots((await api.roots()).roots);
+      setError(null);
+    } catch (err) {
+      setError(errText(err));
+    }
+  }, [api]);
+
+  return (
+    <details className="sf-admin" onToggle={(e) => (e.currentTarget as HTMLDetailsElement).open && !roots && load()}>
+      <summary>Server files (admin)</summary>
+      <div className="sf-stack">
+        <p className="sf-muted">
+          Link files that already live on the server instead of uploading copies. Only files inside allowed
+          directories can be linked; removing a directory immediately disables its links. Deleting a linked entry
+          never touches the original file. Available from the local network only.
+        </p>
+        {error && <p className="sf-error">{error}</p>}
+        {roots && (
+          <>
+            <div className="sf-card">
+              <h4>Allowed directories</h4>
+              {roots.length === 0 ? (
+                <p className="sf-muted">None yet.</p>
+              ) : (
+                <ul className="sf-roots">
+                  {roots.map((r) => (
+                    <li key={r.id}>
+                      <span>
+                        <code>{r.path}</code> {r.label && <span className="sf-muted">— {r.label}</span>}
+                        {!r.exists && <span className="sf-error"> (missing)</span>}
+                      </span>
+                      <ConfirmButton
+                        label="Remove"
+                        onConfirm={async () => {
+                          try {
+                            setRoots((await api.removeRoot(r.id)).roots);
+                            onLinked();
+                          } catch (err) {
+                            setError(errText(err));
+                          }
+                        }}
+                      />
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+            <AddRoot api={api} onAdded={setRoots} />
+            <Browser api={api} roots={roots} folders={folders} onLinked={onLinked} />
+          </>
+        )}
+      </div>
+    </details>
+  );
+}

package/src/ShareDialog.tsx

@@ -0,0 +1,148 @@
+import React, { useEffect, useState } from "react";
+import type { SecureFile, ShareUpdate } from "./types";
+import { CopyButton } from "./CopyButton";
+
+type PasswordMode = "keep" | "set" | "remove";
+
+export function ShareDialog({
+  file,
+  onClose,
+  onSave,
+}: {
+  file: SecureFile;
+  onClose: () => void;
+  onSave: (update: ShareUpdate) => Promise<void>;
+}) {
+  const [shareable, setShareable] = useState(file.shareable);
+  const [limit, setLimit] = useState(file.download_limit ? String(file.download_limit) : "");
+  const [pwMode, setPwMode] = useState<PasswordMode>(file.has_password ? "keep" : "remove");
+  const [password, setPassword] = useState("");
+  const [resetCount, setResetCount] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const limitValid = limit === "" || /^\d+$/.test(limit);
+  const passwordValid = pwMode !== "set" || password.length > 0;
+
+  const save = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      const update: ShareUpdate = { id: file.id, shareable };
+      if (shareable) {
+        update.download_limit = limit === "" ? null : Number(limit);
+        if (pwMode === "set") update.password = password;
+        else if (pwMode === "remove" && file.has_password) update.password = "";
+        if (resetCount) update.reset_count = true;
+      }
+      await onSave(update);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="sf-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
+      <div className="sf-dialog" role="dialog" aria-modal="true" aria-label={`Share settings for ${file.filename}`}>
+        <header className="sf-dialog__head">
+          <h3>Share settings</h3>
+          <button type="button" className="sf-icon-btn" aria-label="Close" onClick={onClose}>
+            ✕
+          </button>
+        </header>
+        <p className="sf-muted">{file.filepath}</p>
+
+        <label className="sf-check">
+          <input type="checkbox" checked={shareable} onChange={(e) => setShareable(e.target.checked)} />
+          Anyone with the link can download
+        </label>
+
+        <fieldset disabled={!shareable} className="sf-fieldset">
+          <label className="sf-field">
+            <span>Download limit (blank = unlimited)</span>
+            <input
+              className="sf-input"
+              inputMode="numeric"
+              value={limit}
+              onChange={(e) => setLimit(e.target.value.trim())}
+              placeholder="unlimited"
+            />
+            {!limitValid && <span className="sf-error">Enter a whole number</span>}
+          </label>
+          <p className="sf-muted">
+            Downloaded {file.download_count} time{file.download_count === 1 ? "" : "s"}
+            {file.download_limit ? ` of ${file.download_limit}` : ""}.{" "}
+            <label className="sf-check sf-check--inline">
+              <input type="checkbox" checked={resetCount} onChange={(e) => setResetCount(e.target.checked)} />
+              reset count
+            </label>
+          </p>
+
+          <div className="sf-field">
+            <span>Password</span>
+            <div className="sf-row">
+              {file.has_password && (
+                <label className="sf-check sf-check--inline">
+                  <input type="radio" checked={pwMode === "keep"} onChange={() => setPwMode("keep")} />
+                  keep current
+                </label>
+              )}
+              <label className="sf-check sf-check--inline">
+                <input type="radio" checked={pwMode === "set"} onChange={() => setPwMode("set")} />
+                {file.has_password ? "change" : "require password"}
+              </label>
+              <label className="sf-check sf-check--inline">
+                <input type="radio" checked={pwMode === "remove"} onChange={() => setPwMode("remove")} />
+                {file.has_password ? "remove" : "none"}
+              </label>
+            </div>
+            {pwMode === "set" && (
+              <input
+                className="sf-input"
+                type="password"
+                autoComplete="new-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="New password"
+              />
+            )}
+          </div>
+
+          <div className="sf-field">
+            <span>Share link</span>
+            <div className="sf-row">
+              <input className="sf-input" readOnly value={file.share_url} onFocus={(e) => e.target.select()} />
+              <CopyButton text={file.share_url} />
+            </div>
+            {!file.shareable && <span className="sf-muted">The link works once you save with sharing on.</span>}
+          </div>
+        </fieldset>
+
+        {error && <p className="sf-error">{error}</p>}
+
+        <footer className="sf-row sf-dialog__foot">
+          <button type="button" className="sf-btn" onClick={onClose}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="sf-btn sf-btn--primary"
+            disabled={saving || !limitValid || !passwordValid}
+            onClick={save}
+          >
+            {saving ? "Saving…" : "Save"}
+          </button>
+        </footer>
+      </div>
+    </div>
+  );
+}

package/src/UploadPanel.tsx

@@ -0,0 +1,217 @@
+import React, { useRef, useState } from "react";
+import type { SecureFilesApi } from "./api";
+import { FolderSelect } from "./FolderSelect";
+
+interface Queued {
+  file: File;
+  relPath: string;
+  progress: number;
+  error?: string;
+  done?: boolean;
+}
+
+function readEntries(reader: any): Promise<any[]> {
+  return new Promise((resolve, reject) => reader.readEntries(resolve, reject));
+}
+
+async function walkEntry(entry: any, prefix: string, out: { file: File; relPath: string }[]) {
+  if (entry.isFile) {
+    const file: File = await new Promise((resolve, reject) => entry.file(resolve, reject));
+    out.push({ file, relPath: prefix + file.name });
+  } else if (entry.isDirectory) {
+    const reader = entry.createReader();
+    let batch: any[];
+    do {
+      batch = await readEntries(reader);
+      for (const child of batch) await walkEntry(child, `${prefix}${entry.name}/`, out);
+    } while (batch.length > 0);
+  }
+}
+
+async function filesFromDrop(dt: DataTransfer) {
+  const out: { file: File; relPath: string }[] = [];
+  const entries = Array.from(dt.items || [])
+    .map((item) => (item as any).webkitGetAsEntry?.())
+    .filter(Boolean);
+  if (entries.length) {
+    for (const entry of entries) await walkEntry(entry, "", out);
+  } else {
+    for (const file of Array.from(dt.files)) out.push({ file, relPath: file.name });
+  }
+  return out;
+}
+
+function joinTarget(target: string, relPath: string) {
+  const clean = target.trim().replace(/^\/+|\/+$/g, "");
+  return clean ? `${clean}/${relPath}` : relPath;
+}
+
+function CloudIcon() {
+  return (
+    <svg className="sf-drop__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z"
+      />
+    </svg>
+  );
+}
+
+export function UploadPanel({
+  api,
+  folders,
+  onUploaded,
+}: {
+  api: SecureFilesApi;
+  folders: string[];
+  onUploaded: () => void;
+}) {
+  const [queue, setQueue] = useState<Queued[]>([]);
+  const [mode, setMode] = useState<"files" | "folder">("files");
+  const [target, setTarget] = useState("");
+  const [dragging, setDragging] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const folderInput = useRef<HTMLInputElement>(null);
+
+  const enqueue = (items: { file: File; relPath: string }[]) => {
+    setMessage(null);
+    setQueue((q) => {
+      const kept = q.filter((x) => !x.done);
+      const seen = new Set(kept.map((x) => x.relPath));
+      return [...kept, ...items.filter((i) => !seen.has(i.relPath)).map((i) => ({ ...i, progress: 0 }))];
+    });
+  };
+
+  const openPicker = () => (mode === "folder" ? folderInput : fileInput).current?.click();
+
+  const fromInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    enqueue(files.map((file) => ({ file, relPath: (file as any).webkitRelativePath || file.name })));
+    e.target.value = "";
+  };
+
+  const uploadAll = async () => {
+    setBusy(true);
+    setMessage(null);
+    let failed = 0;
+    for (let i = 0; i < queue.length; i++) {
+      const item = queue[i];
+      if (item.done) continue;
+      const set = (patch: Partial<Queued>) =>
+        setQueue((q) => q.map((x, idx) => (idx === i ? { ...x, ...patch } : x)));
+      try {
+        await api.upload(item.file, joinTarget(target, item.relPath), (p) => set({ progress: p }));
+        set({ progress: 1, done: true, error: undefined });
+      } catch (err) {
+        failed++;
+        set({ error: err instanceof Error ? err.message : String(err) });
+      }
+    }
+    setBusy(false);
+    setMessage(failed ? `${failed} upload(s) failed` : "Upload complete");
+    if (!failed) setQueue([]);
+    onUploaded();
+  };
+
+  const pending = queue.filter((q) => !q.done);
+
+  return (
+    <section className="sf-upload">
+      <div className="sf-row sf-mode" role="radiogroup" aria-label="Choose what clicking the upload area picks">
+        <label className="sf-check sf-check--inline">
+          <input type="radio" checked={mode === "files"} onChange={() => setMode("files")} /> Files
+        </label>
+        <label className="sf-check sf-check--inline">
+          <input type="radio" checked={mode === "folder"} onChange={() => setMode("folder")} /> Folder
+        </label>
+        <span className="sf-muted">(drag-and-drop accepts either)</span>
+      </div>
+
+      <div
+        className={`sf-drop${dragging ? " sf-drop--active" : ""}`}
+        role="button"
+        tabIndex={0}
+        aria-label={`Upload area: click to choose ${mode === "folder" ? "a folder" : "files"}, or drop files or folders`}
+        onClick={openPicker}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            openPicker();
+          }
+        }}
+        onDragEnter={(e) => {
+          e.preventDefault();
+          setDragging(true);
+        }}
+        onDragOver={(e) => e.preventDefault()}
+        onDragLeave={(e) => {
+          if (!e.currentTarget.contains(e.relatedTarget as Node)) setDragging(false);
+        }}
+        onDrop={async (e) => {
+          e.preventDefault();
+          setDragging(false);
+          enqueue(await filesFromDrop(e.dataTransfer));
+        }}
+      >
+        <CloudIcon />
+        <div>
+          <p className="sf-drop__title">Drag &amp; drop files or folders here</p>
+          <p className="sf-muted">Click anywhere to choose {mode === "folder" ? "a folder" : "files"}</p>
+          {pending.length > 0 && (
+            <p className="sf-drop__count">
+              {pending.length} item{pending.length === 1 ? "" : "s"} queued
+            </p>
+          )}
+        </div>
+      </div>
+      <input ref={fileInput} type="file" multiple hidden onChange={fromInput} />
+      <input
+        ref={folderInput}
+        type="file"
+        multiple
+        hidden
+        onChange={fromInput}
+        {...({ webkitdirectory: "", directory: "" } as any)}
+      />
+
+      <div className="sf-row">
+        <FolderSelect label="Upload into" folders={folders} value={target} onChange={setTarget} />
+        <button type="button" className="sf-btn sf-btn--primary" disabled={busy || !pending.length} onClick={uploadAll}>
+          {busy ? "Uploading…" : `Upload ${pending.length}`}
+        </button>
+        {queue.length > 0 && !busy && (
+          <button type="button" className="sf-btn" onClick={() => setQueue([])}>
+            Clear
+          </button>
+        )}
+      </div>
+
+      {message && (
+        <p className={message.includes("failed") ? "sf-error" : "sf-muted"} role="status">
+          {message}
+        </p>
+      )}
+
+      {queue.length > 0 && (
+        <ul className="sf-queue">
+          {queue.map((q, i) => (
+            <li key={`${q.relPath}-${i}`}>
+              <span className="sf-queue__name">{joinTarget(target, q.relPath)}</span>
+              {q.error ? (
+                <span className="sf-error">{q.error}</span>
+              ) : (
+                <span className="sf-row">
+                  <progress max={1} value={q.progress} />
+                  <span className="sf-muted">{Math.round(q.progress * 100)}%</span>
+                </span>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}