@putkoff/abstract-securefiles 0.0.33 → 0.0.34

package/src/FileHandlers/FileTable/src/table_utils.tsx

@@ -0,0 +1,251 @@
+import type { FileItem, FileTableProps } from './../imports';
+import React, { useState, useMemo, ChangeEvent } from 'react';
+import {
+  useFiles,
+  downloadFile,
+  Spinner,
+  ShareModal,
+  Input,
+  Button,
+  currentUsername
+} from './../imports';
+import { downloadSelected } from './../../../file_utils';
+
+// Tree node type
+interface FileNode {
+  name: string;
+  path: string;
+  children: Map<string, FileNode>;
+  files: FileItem[];
+}
+
+// Build a directory tree from a flat file list
+function buildTree(files: FileItem[]): FileNode {
+  const root: FileNode = { name: '', path: '', children: new Map(), files: [] };
+  files.forEach(file => {
+    const parts = file.filepath.split('/');
+    let node = root;
+    parts.slice(0, -1).forEach((seg, idx) => {
+      const subPath = parts.slice(0, idx + 1).join('/');
+      if (!node.children.has(seg)) {
+        node.children.set(seg, { name: seg, path: subPath, children: new Map(), files: [] });
+      }
+      node = node.children.get(seg)!;
+    });
+    node.files.push(file);
+  });
+  return root;
+}
+
+// Collect all file IDs under a node (recursive)
+function collectNodeIds(node: FileNode): Array<number | string> {
+  let ids: Array<number | string> = [];
+  node.files.forEach(f => ids.push(f.id));
+  node.children.forEach(child => {
+    ids = ids.concat(collectNodeIds(child));
+  });
+  return ids;
+}
+
+export default function FileTable({
+  files,
+  loading,
+  error,
+  onToggleShare,
+  onPatchShare,
+  onDelete
+}: FileTableProps) {
+  const { load } = useFiles();
+  const [search, setSearch] = useState('');
+  const [modalFile, setModalFile] = useState<FileItem | null>(null);
+  const [selected, setSelected] = useState<Set<number | string>>(new Set());
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+  // Upload controls
+  const [uploadDir, setUploadDir] = useState<string>('');
+  const [uploadFile, setUploadFile] = useState<File | null>(null);
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => setUploadFile(e.target.files?.[0] ?? null);
+  const handleUpload = async () => {
+    if (!uploadFile) return;
+    const form = new FormData();
+    form.append('file', uploadFile);
+    const dirPart = uploadDir ? `${uploadDir}/` : '';
+    const url = `/api/secure-files/upload/${dirPart}${encodeURIComponent(uploadFile.name)}`;
+    await fetch(url, { method: 'POST', credentials: 'include', body: form });
+    setUploadFile(null);
+    load();
+  };
+
+  // Filter files by search term
+  const filtered = useMemo(
+    () => files.filter(f => f.filename.toLowerCase().includes(search.trim().toLowerCase())),
+    [files, search]
+  );
+  // Build tree and directory paths list
+  const tree = useMemo(() => buildTree(filtered), [filtered]);
+  const allDirPaths = useMemo(() => {
+    const paths: string[] = [''];
+    function collect(node: FileNode) {
+      node.children.forEach(child => {
+        paths.push(child.path);
+        collect(child);
+      });
+    }
+    collect(tree);
+    return paths;
+  }, [tree]);
+
+  // Selection & expand/collapse logic
+  const allIds = filtered.map(f => f.id);
+  const toggleAllSelection = () => selected.size < allIds.length ? setSelected(new Set(allIds)) : setSelected(new Set());
+  const toggleDirOpen = (path: string) => setExpanded(prev => {
+    const next = new Set(prev);
+    next.has(path) ? next.delete(path) : next.add(path);
+    return next;
+  });
+  const expandAll = () => setExpanded(new Set(allDirPaths));
+  const collapseAll = () => setExpanded(new Set());
+
+  // Recursive renderer: directory row with select-all checkbox, then its files, then subdirectories
+  const renderNode = (node: FileNode, depth = 0): React.ReactNode[] => {
+    const rows: React.ReactNode[] = [];
+    if (node.path) {
+      const isOpen = expanded.has(node.path);
+      const nodeIds = collectNodeIds(node);
+      const allSelected = nodeIds.every(id => selected.has(id));
+      const someSelected = nodeIds.some(id => selected.has(id));
+      rows.push(
+        <tr key={node.path}>
+          {/* Directory-level checkbox */}
+          <td className="px-4 py-2 bg-gray-100">
+            <input
+              type="checkbox"
+              checked={allSelected}
+              ref={el => { if (el) el.indeterminate = !allSelected && someSelected; }}
+              onChange={() => {
+                setSelected(prev => {
+                  const next = new Set(prev);
+                  if (allSelected) {
+                    nodeIds.forEach(id => next.delete(id));
+                  } else {
+                    nodeIds.forEach(id => next.add(id));
+                  }
+                  return next;
+                });
+              }}
+            />
+          </td>
+          {/* Directory label pushed left */}
+          <td className="px-4 py-2 bg-gray-100 font-bold" colSpan={5} style={{ textAlign: 'left' }}>
+            {node.path}
+          </td>
+          {/* Expand/collapse ticker on right */}
+          <td className="px-4 py-2 bg-gray-100 text-right">
+            <button onClick={() => toggleDirOpen(node.path)}>
+              {isOpen ? '▾' : '▸'}
+            </button>
+          </td>
+        </tr>
+      );
+      if (!isOpen) return rows;
+    }
+    // Render files in this directory
+    node.files.sort((a, b) => a.filename.localeCompare(b.filename)).forEach(f => {
+      const isOwner = f.uploader_id.toLowerCase() === (currentUsername() ?? '').toLowerCase();
+      const canDownload = isOwner || f.shareable;
+      rows.push(
+        <tr key={f.id}>
+          <td className="px-4 py-2">
+            <input
+              type="checkbox"
+              checked={selected.has(f.id)}
+              onChange={() => setSelected(prev => {
+                const next = new Set(prev);
+                next.has(f.id) ? next.delete(f.id) : next.add(f.id);
+                return next;
+              })}
+            />
+          </td>
+          <td className="px-4 py-2" style={{ paddingLeft: (depth + 1) * 20 }}>
+            {f.filename}
+          </td>
+          <td className="px-4 py-2">
+            {canDownload ? <Button variant="secondary" onClick={() => downloadFile(f)}>Download</Button> : <span>🔒</span>}
+          </td>
+          <td className="px-4 py-2">
+            {isOwner && <Button variant="icon" onClick={() => setModalFile(f)}>⚙️</Button>}
+          </td>
+          <td className="px-4 py-2">
+            {isOwner && <Button variant={f.shareable ? 'primary' : 'secondary'} onClick={() => onToggleShare(f)}>{f.shareable ? 'Sharing' : 'Share'}</Button>}
+          </td>
+          <td className="px-4 py-2">
+            {isOwner && <Button variant="icon" onClick={() => onDelete(f).then(load)}>🗑</Button>}
+          </td>
+          <td className="px-4 py-2">
+            {f.download_count} / {f.download_limit ?? '∞'}
+          </td>
+        </tr>
+      );
+    });
+    // Render subdirectories
+    Array.from(node.children.values())
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .forEach(child => rows.push(...renderNode(child, depth + 1)));
+    return rows;
+  };
+
+  // Batch actions
+  const handleDownloadAll = async () => {
+    const inputs = filtered.filter(f => selected.has(f.id)).map(f => document.createElement('input'));
+    inputs.forEach((cb, idx) => cb.value = filtered.filter(f => selected.has(f.id))[idx].filepath);
+    await downloadSelected(inputs);
+  };
+  const handleDeleteAll = async () => { await onDelete(filtered.filter(f => selected.has(f.id))); setSelected(new Set()); await load(); };
+  const handleShareAll = async () => { for (const f of filtered.filter(f => selected.has(f.id))) await onToggleShare(f); };
+
+  if (loading) return <Spinner />;
+  if (error) return <p className="text-red-600">{error.message}</p>;
+
+  return (
+    <>  
+
+
+      {/* Search & actions */}
+      <div className="mb-4 flex flex-col md:flex-row md:justify-between gap-4">
+        <Input label="Search files" type="text" value={search} onChange={(e:any) => setSearch(e.target.value)} placeholder="Enter filename…" className="form-input flex-1" />
+        <div className="flex gap-2">
+          <Button onClick={expandAll} disabled={!allDirPaths.length}>Expand All</Button>
+          <Button onClick={collapseAll} disabled={!allDirPaths.length}>Collapse All</Button>
+          <Button onClick={handleDownloadAll} disabled={!selected.size}>Download Selected</Button>
+          <Button color="gray" onClick={handleDeleteAll} disabled={!selected.size}>Delete Selected</Button>
+          <Button onClick={handleShareAll} disabled={!selected.size}>Share Selected</Button>
+        </div>
+      </div>
+
+      {/* File tree table */}
+      <div className="overflow-x-auto wm-container">
+        <table className="file-table w-full">
+          <thead className="wm-thead">
+            <tr>
+              <th className="px-4 py-2 w-12"><input type="checkbox" checked={selected.size === filtered.length && filtered.length > 0} onChange={toggleAllSelection} /></th>
+              <th className="px-4 py-2">Filename</th>
+              <th className="px-4 py-2">Download</th>
+              <th className="px-4 py-2">Settings</th>
+              <th className="px-4 py-2">Share</th>
+              <th className="px-4 py-2">Delete</th>
+              <th className="px-4 py-2">Downloads</th>
+            </tr>
+          </thead>
+          <tbody>{renderNode(tree)}</tbody>
+        </table>
+      </div>
+
+      <ShareModal file={modalFile} onClose={() => setModalFile(null)} onSave={async patch => {
+        if (!modalFile) return;
+        const updated: FileItem = { ...modalFile, ...patch };
+        await onPatchShare(updated);
+        setModalFile(null);
+      }} />
+    </>
+  );
+}

package/src/FileHandlers/ShareModal/imports.ts

@@ -0,0 +1,2 @@
+export {Button, Checkbox, Input, ClipboardIcon, createPortal, useEffect, useRef, useState} from './../imports'
+export type {ShareModalProps} from './../imports'

package/src/FileHandlers/ShareModal/index.ts

@@ -0,0 +1 @@
+export {ShareModal} from './src';

package/src/FileHandlers/ShareModal/src/index.ts

@@ -0,0 +1 @@
+export {default as ShareModal} from './share_utils';

package/src/FileHandlers/ShareModal/src/share_utils.tsx

@@ -0,0 +1,155 @@
+import type {
+  ShareModalProps
+} from './../../imports';
+import {
+  Button,
+  Checkbox,
+  Input,
+  ClipboardIcon,
+  createPortal,
+  useEffect,
+  useRef,
+  useState,
+} from './../imports';
+
+export default function ShareModal({ file, onClose, onSave }: ShareModalProps) {
+  const [fileId, setFileId] = useState<string | number | "">("");
+  const [enabled, setEnabled] = useState<any>(false);
+  const [password, setPassword] = useState<any>(undefined);
+  const [strPassword, setStrPassword] = useState<any>("");
+  const [download_limit, setDownloadLimit] = useState<number | "">(0);
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const shareLink =
+    file && enabled
+      ? `/api/secure-files/secure-download/${file.id}`
+      : "";
+
+  useEffect(() => {
+    if (!file) return;
+    setFileId(file.id);
+    setEnabled(file.shareable);
+    setPassword(file.share_password);
+    setStrPassword(file.password_str ?? "");
+    setDownloadLimit(file.download_limit ?? 0);
+    setError("");
+
+    modalRef.current?.focus();
+  }, [file]);
+
+
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [onClose]);
+
+  if (!file) return null;
+
+  async function handleSave() {
+    if (strPassword && strPassword.length < 4) {
+      setError("Password must be at least 4 characters");
+      return;
+    }
+    setBusy(true);
+    const save_dict = {
+      id: fileId,
+      shareable: enabled,
+      needsPassword: !!strPassword,
+      share_password: strPassword || null,
+      password_str: strPassword || null,
+      download_limit: download_limit === "" ? null : Number(download_limit),
+    }
+
+    try {
+      const resp = await onSave(save_dict);
+
+      onClose();
+    } catch (err) {
+      setError(`${err} Failed to save settings. Please try again.`);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return createPortal(
+    <>
+      <div
+        className="modal-backdrop z-100"
+        onClick={(e) => e.target === e.currentTarget && onClose()}
+      />
+      <div className="modal-wrapper z-110">
+        <div
+          ref={modalRef}
+          role="dialog"
+          aria-modal="true"
+          tabIndex={-1}
+          className="modal-panel"
+        >
+          <h3 className="form-title">
+            Share settings for <span className="font-mono">{file.filename}</span>
+          </h3>
+
+          {error && <p className="form-error">{error}</p>}
+
+          <Checkbox
+            label="Enable sharing"
+            checked={enabled}
+            onChange={(e:any) => setEnabled(e.target.checked)}
+            className="checkbox"
+          />
+
+          <Input
+            label="Password (optional)"
+            type="text"
+            value={strPassword}
+            onChange={(e:any) => setStrPassword(e.target.value)}
+            disabled={!enabled}
+            className="form-input"
+          />
+          <Input
+            label="Download limit (0 = ∞)"
+            type="number"
+            min={0}
+            value={download_limit}
+            onChange={(e:any) =>
+              setDownloadLimit(e.target.value === "" ? "" : Number(e.target.value))
+            }
+            disabled={!enabled}
+            className="form-input"
+          />
+
+          {enabled && shareLink && (
+            <Input
+              label="Share link"
+              readOnly
+              value={shareLink}
+              className="form-input"
+              trailing={
+                <Button
+                  variant="icon"
+                  className="btn-icon"
+                  onClick={() => navigator.clipboard.writeText(shareLink)}
+                >
+                  <ClipboardIcon className="h-5 w-5" />
+                </Button>
+              }
+            />
+          )}
+
+          <div className="mt-6 flex justify-end gap-2">
+            <Button color="green" variant="primary" onClick={handleSave} disabled={busy} className="btn-primary">
+              {busy ? "Saving…" : "Save"}
+            </Button>
+            <Button variant="secondary" onClick={onClose} disabled={busy} className="btn-secondary">
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+}

package/src/FileHandlers/Upload/imports.ts

@@ -0,0 +1,3 @@
+// src/components/Upload/index.tsx
+export {Input,useFiles,Button,uploadFiles,useState, useRef,useCallback,CloudArrowUpIcon,currentUsername} from './../imports';
+export type {UploadProps,FileItem,QueuedFile} from './../imports'

package/src/FileHandlers/Upload/index.ts

@@ -0,0 +1 @@
+export {Upload} from './src';

package/src/FileHandlers/Upload/src/index.ts

@@ -0,0 +1,2 @@
+export {default as Upload} from './upload_utils';
+export type {QueuedFile,UploadProps} from './../../../types';

package/src/FileHandlers/Upload/src/upload_utils.tsx

@@ -0,0 +1,267 @@
+import React, {
+  ChangeEvent,
+  useRef,
+  useState,
+  useCallback,
+  useEffect,
+} from 'react';
+import {
+  CloudArrowUpIcon,
+  Button,
+  uploadFiles,
+  useFiles,
+  currentUsername
+} from './../imports';
+import type { QueuedFile, UploadProps } from './../imports';
+
+export default function Upload({ onUploaded }: UploadProps) {
+  const [queue, setQueue] = useState<QueuedFile[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+  const [drag, setDrag] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dirs, setDirs] = useState<string[]>([]);
+
+  // — existing files → directory list —
+  const { files, load } = useFiles();
+
+  useEffect(() => {
+    const dirSet = new Set<string>();
+    files.forEach(f => {
+      const parts = f.filepath.split('/');
+      if (parts.length > 1) {
+        parts.pop();
+        dirSet.add(parts.join('/') + '/');
+      }
+    });
+    setDirs(Array.from(dirSet).sort());
+  }, [files]);
+
+  // — directory selection state —
+  const [uploadDir, setUploadDir] = useState<string>('');
+  const [creatingNew, setCreatingNew] = useState(false);
+  const [newDirName, setNewDirName] = useState('');
+
+  // — queue logic —
+  const enqueue = useCallback((files: QueuedFile[]) => {
+    setQueue(prev => {
+      const map = new Map(prev.map(q => [`${q.file.name}-${q.file.size}`, q]));
+      files.forEach(q => map.set(`${q.file.name}-${q.file.size}`, q));
+      return Array.from(map.values());
+    });
+  }, []);
+
+  const extractFromDataTransfer = useCallback(
+    async (dt: DataTransfer): Promise<QueuedFile[]> => {
+      const out: QueuedFile[] = [];
+      const walk = async (entry: any, path = "") => {
+        if (!entry) return;
+        if (entry.isFile) {
+          const file: File = await new Promise(res => entry.file(res));
+          out.push({ file, relPath: path, progress: 0 });
+        } else if (entry.isDirectory) {
+          const reader = entry.createReader();
+          const entries: any[] = await new Promise(r => reader.readEntries(r));
+          await Promise.all(entries.map(e => walk(e, `${path}${entry.name}/`)));
+        }
+      };
+      await Promise.all(Array.from(dt.items).map(i => walk(i.webkitGetAsEntry())));
+      return out;
+    },
+    []
+  );
+
+  const handleSelect = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    const queued: any = files.map(f => ({
+      file: f,
+      relPath: (f as any).webkitRelativePath.replace(/[^/]*$/, ""),
+      progress: 0,
+    }));
+    enqueue(queued);
+    e.target.value = "";
+  };
+
+  const handleDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    const files = await extractFromDataTransfer(e.dataTransfer);
+    enqueue(files.length ? files : []);
+    setDrag(false);
+  };
+
+  const handleUploadAll = async () => {
+    if (!queue.length) {
+      setMessage("No files queued.");
+      return;
+    }
+    setBusy(true);
+    setMessage(null);
+    const targetDir = creatingNew
+      ? (newDirName.trim().replace(/^\/+|\/+$/g, "") + "/")
+      : uploadDir;
+    try {
+      for (const { file, relPath } of queue) {
+        await uploadFiles(file, targetDir + relPath);
+        setQueue(cur =>
+          cur.map(item =>
+            item.file === file ? { ...item, progress: 100 } : item
+          )
+        );
+      }
+      setQueue([]);
+      await onUploaded();
+      setMessage("Upload complete");
+      load();
+    } catch {
+      setMessage("Upload failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  // — directory selector handlers —
+  const handleDirChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const v = e.target.value;
+    if (v === "__new__") {
+      setCreatingNew(true);
+      setNewDirName("");
+    } else {
+      setCreatingNew(false);
+      setUploadDir(v);
+    }
+  };
+  const acceptNewDir = () => {
+    // normalize like before
+    const cleanName = newDirName.trim().replace(/^\/+|\/+$/g, '');
+    const normalized = `${uploadDir}${cleanName}/`;
+    // ① add it to our dirs list if it isn't there already
+    setDirs(prev => {
+      if (prev.includes(normalized)) return prev;
+      return [...prev, normalized].sort();
+    });
+
+    // ② select it & flip back to the <select>
+    setUploadDir(normalized);
+    setCreatingNew(false);
+    setNewDirName('');
+  };
+
+  return (
+    <div className="form-container max-w-2xl mx-auto">
+      {/* drop area */}
+      <div
+        className={`flex items-center border-2 border-dashed rounded-lg p-6 bg-white shadow-md space-x-4 transition-shadow duration-150
+          ${drag ? 'border-indigo-500 bg-indigo-50 shadow-lg' : 'border-gray-300 hover:shadow-lg'}`}
+        onClick={() => inputRef.current?.click()}
+        onDragEnter={e => { e.preventDefault(); setDrag(true); }}
+        onDragOver={e => e.preventDefault()}
+        onDragLeave={() => setDrag(false)}
+        onDrop={handleDrop}
+        role="region"
+        aria-label="File upload area"
+      >
+        <CloudArrowUpIcon
+          style={{ width: 300, height: 300 }}
+          className="text-gray-500 mb-3"
+          aria-hidden="true"
+        />
+        <div className="flex-1">
+          <p className="text-base font-semibold text-gray-700">
+            Drag & drop files or folders here
+          </p>
+          {queue.length > 0 && (
+            <p className="mt-1 text-sm text-gray-600">
+              {queue.length} item{queue.length > 1 && 's'} queued
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* hidden file input */}
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        className="hidden"
+        {...({ webkitdirectory: true, directory: '' } as any)}
+        onChange={handleSelect}
+      />
+
+      {/* bottom controls */}
+      <div className="flex items-center justify-between mt-4">
+        {/* directory selector / new dir input */}
+        <div className="flex-1 mr-4">
+          {!creatingNew ? (
+            <select
+              value={uploadDir}
+              onChange={handleDirChange}
+              className="form-select w-full"
+            >
+              {dirs.map(d => (
+                <option key={d} value={d}>{d}</option>
+              ))}
+              <option value="__new__">+ Create new directory…</option>
+            </select>
+          ) : (
+            <div className="flex">
+              <input
+                type="text"
+                value={newDirName}
+                placeholder="new-folder-name"
+                onChange={e => setNewDirName(e.target.value)}
+                onBlur={acceptNewDir}
+                onKeyDown={e => e.key === 'Enter' && acceptNewDir()}
+                className="form-input flex-1"
+              />
+              <Button onClick={acceptNewDir} className="ml-2">
+                OK
+              </Button>
+            </div>
+          )}
+        </div>
+
+        {/* upload button */}
+        <Button
+          color="blue"
+          variant="primary"
+          onClick={handleUploadAll}
+          disabled={busy || !queue.length}
+        >
+          {busy ? 'Uploading…' : `Upload ${queue.length}`}
+        </Button>
+      </div>
+
+      {message && (
+        <p
+          className={`text-center text-sm ${message.includes('failed') ? 'text-red-600' : 'text-gray-600'
+            }`}
+          role="alert"
+        >
+          {message}
+        </p>
+      )}
+
+      {/* queued list */}
+      {queue.length > 0 && (
+        <div className="wm-container mt-4">
+          <h3 className="mb-2 text-sm font-semibold text-gray-700">Queued Files</h3>
+          <ul className="max-h-64 space-y-4 overflow-y-auto">
+            {queue.map(({ file, relPath, progress }) => (
+              <li key={`${file.name}-${file.size}`} className="space-y-1">
+                <div className="flex justify-between items-center">
+                  <span className="truncate text-sm text-gray-800">
+                    {relPath}{file.name}
+                  </span>
+                  <span className="text-xs text-gray-500">{progress}%</span>
+                </div>
+                <div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
+                  <div className="bg-indigo-600 h-2" style={{ width: `${progress}%` }} />
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}