@putkoff/abstract-securefiles 0.0.48 → 0.0.50

package/src/ServerFiles.tsx

@@ -0,0 +1,339 @@
+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 togglePick = (path: string, on: boolean) =>
+    setPicked((p) => {
+      const next = new Set(p);
+      on ? next.add(path) : next.delete(path);
+      return next;
+    });
+
+  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?.dirs.filter((d) => !d.linked_id) ?? []),
+    ...(listing?.files.filter((f) => !f.linked_id) ?? []),
+  ];
+  const relative = listing ? listing.path.slice(listing.root.length) || "/" : "";
+
+  return (
+    <div className="sf-card">
+      <h4>Link files or folders</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) => (
+            <div key={d.path} className={`sf-browser__row${d.linked_id ? " sf-muted" : ""}`}>
+              <input
+                type="checkbox"
+                aria-label={`Select folder ${d.name}`}
+                disabled={!!d.linked_id}
+                checked={picked.has(d.path)}
+                onChange={(e) => togglePick(d.path, e.target.checked)}
+              />
+              <button type="button" className="sf-browser__dir" onClick={() => open(d.path)} title="Open folder">
+                📁 {d.name}
+              </button>
+              <span className="sf-muted">{d.linked_id ? "already linked" : "folder → .tar"}</span>
+            </div>
+          ))}
+          {linkable.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 everything 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) => togglePick(f.path, e.target.checked)}
+              />
+              <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 or whole folders that already live on the server instead of uploading copies. A linked folder
+          downloads as one uncompressed .tar with an exact size, and interrupted downloads can be resumed. Only
+          items inside allowed directories can be linked; removing a directory immediately disables its links.
+          Deleting a linked entry never touches the original. 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>
+  );
+}