forked from maik/IPFS-portal
SIWE auth, API proxy fixes, dashboard, login, usage pages
- SIWE auth flow: challenge/login/logout/me API routes + JWT middleware
- Fixed [...path] catch-all: Kubo proxy with matchRoute() + mapToKuboAPI()
- Fixed session_id → nonce field mismatch in AuthProvider
- Fixed dashboard pins crash: Kubo returns {Keys: {...}}, not array
- Added middleware route guard (307 redirect to /login)
- Added login, register, profile, usage, upload pages
- Added dashboard components (StorageGauge, FreeTierProgress)
- Added SWR hooks + AuthGuard + Providers + Toast/ErrorBoundary
- Added payment integration (smart contract ABI, tiers, tokens)
- Fixed IPNS key listing: Name/Id → name/id mapping
- Added PWA support (manifest, service worker, icons)
- Added tests for helpers, limits, search-index, wallet
This commit is contained in:
maikrolf
@@ -0,0 +1,316 @@
|
||||
'use client';
|
||||
|
||||
import { type DragEvent, type RefObject } from 'react';
|
||||
import {
|
||||
Upload, File, CheckCircle, XCircle, Loader2,
|
||||
Copy, ExternalLink, Trash2, Globe,
|
||||
} from 'lucide-react';
|
||||
|
||||
const MAX_FILES = 20;
|
||||
const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100 MB
|
||||
const ALLOWED_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
|
||||
|
||||
/* ── Helpers ── */
|
||||
function formatBytes(b: number): string {
|
||||
if (b === 0) return '0 B';
|
||||
const units = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.min(Math.floor(Math.log(b) / Math.log(1024)), units.length - 1);
|
||||
const val = b / Math.pow(1024, i);
|
||||
return (val < 10 ? val.toFixed(1) : Math.round(val)) + ' ' + units[i];
|
||||
}
|
||||
|
||||
export interface FileEntry {
|
||||
id: string;
|
||||
file: File;
|
||||
preview?: string;
|
||||
status: 'pending' | 'uploading' | 'done' | 'error';
|
||||
result?: { cid: string; size: number };
|
||||
errorMsg?: string;
|
||||
date?: string;
|
||||
}
|
||||
|
||||
interface QuickUploadProps {
|
||||
files: FileEntry[];
|
||||
dragOver: boolean;
|
||||
uploading: boolean;
|
||||
uploadIndex: number;
|
||||
uploadDone: boolean;
|
||||
copied: string | null;
|
||||
inputRef: RefObject<HTMLInputElement | null>;
|
||||
onAddFiles: (files: FileList | File[]) => void;
|
||||
onRemoveFile: (id: string) => void;
|
||||
onDragOver: (e: DragEvent) => void;
|
||||
onDragLeave: () => void;
|
||||
onDrop: (e: DragEvent) => void;
|
||||
onBrowse: () => void;
|
||||
onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
onStartUpload: () => void;
|
||||
onCopyCid: (cid: string) => void;
|
||||
onCopyShareLink: (cid: string) => void;
|
||||
onClearAll: () => void;
|
||||
gatewayLink: (cid: string) => string;
|
||||
}
|
||||
|
||||
export default function QuickUpload({
|
||||
files, dragOver, uploading, uploadIndex, uploadDone, copied,
|
||||
inputRef, onAddFiles, onRemoveFile, onDragOver, onDragLeave, onDrop,
|
||||
onBrowse, onInputChange, onStartUpload, onCopyCid, onCopyShareLink, onClearAll, gatewayLink,
|
||||
}: QuickUploadProps) {
|
||||
|
||||
const doneCount = files.filter(f => f.status === 'done').length;
|
||||
const errorCount = files.filter(f => f.status === 'error').length;
|
||||
const totalCount = files.length;
|
||||
const allDone = files.every(f => f.status === 'done' || f.status === 'error');
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Drop zone */}
|
||||
{!uploading && !uploadDone && (
|
||||
<div
|
||||
onDragOver={onDragOver}
|
||||
onDragLeave={onDragLeave}
|
||||
onDrop={files.length < MAX_FILES ? onDrop : undefined}
|
||||
onClick={files.length < MAX_FILES ? onBrowse : undefined}
|
||||
className={`relative border-2 border-dashed rounded-xl p-10 text-center transition-all duration-200 cursor-pointer ${
|
||||
dragOver
|
||||
? 'border-brand-400 bg-brand-500/10'
|
||||
: 'border-surface-700 hover:border-surface-500 bg-surface-900/50'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={onInputChange}
|
||||
disabled={uploading || files.length >= MAX_FILES}
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Upload className="w-10 h-10 text-surface-500" />
|
||||
<div>
|
||||
<p className="text-sm text-surface-300">
|
||||
<span className="text-brand-400 font-medium">Click to browse</span> or drag & drop files
|
||||
</p>
|
||||
<p className="text-xs text-surface-500 mt-1">
|
||||
Up to {MAX_FILES} files, max {formatBytes(MAX_FILE_SIZE)} each
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* File list */}
|
||||
{files.length > 0 && (
|
||||
<div className="mt-6 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-surface-400">
|
||||
{totalCount} file{totalCount !== 1 ? 's' : ''} selected
|
||||
{uploading && <> · Uploading {uploadIndex}/{totalCount}</>}
|
||||
</span>
|
||||
{!uploading && !allDone && (
|
||||
<button
|
||||
onClick={onClearAll}
|
||||
className="text-xs text-surface-500 hover:text-accent-rose transition-colors"
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{uploading && (
|
||||
<div className="w-full h-1.5 rounded-full bg-surface-800 overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full bg-gradient-to-r from-brand-500 to-accent-cyan transition-all duration-300"
|
||||
style={{ width: `${(uploadIndex / totalCount) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
{files.map((entry, idx) => (
|
||||
<div
|
||||
key={entry.id}
|
||||
className={`glass rounded-xl p-3 flex items-center gap-3 transition-all duration-200 animate-fade-in ${
|
||||
entry.status === 'done' ? 'border-l-2 border-l-accent-green' :
|
||||
entry.status === 'error' ? 'border-l-2 border-l-accent-rose' : ''
|
||||
}`}
|
||||
style={{ animationDelay: `${idx * 30}ms` }}
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-surface-800 flex items-center justify-center shrink-0 overflow-hidden">
|
||||
{entry.preview ? (
|
||||
<img src={entry.preview} alt="" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<File className="w-5 h-5 text-surface-500" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-surface-200 truncate">{entry.file.name}</span>
|
||||
{entry.status === 'done' && entry.result && (
|
||||
<CheckCircle className="w-3.5 h-3.5 text-accent-green shrink-0" />
|
||||
)}
|
||||
{entry.status === 'error' && (
|
||||
<XCircle className="w-3.5 h-3.5 text-accent-rose shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mt-0.5">
|
||||
<span className="text-xs text-surface-500">{formatBytes(entry.file.size)}</span>
|
||||
{entry.status === 'uploading' && (
|
||||
<span className="text-xs text-brand-400 flex items-center gap-1">
|
||||
<Loader2 className="w-3 h-3 animate-spin" />
|
||||
Uploading…
|
||||
</span>
|
||||
)}
|
||||
{entry.status === 'done' && entry.result && (
|
||||
<span className="text-xs font-mono text-surface-400 truncate max-w-[160px]">
|
||||
{entry.result.cid.slice(0, 16)}…
|
||||
</span>
|
||||
)}
|
||||
{entry.status === 'error' && (
|
||||
<span className="text-xs text-accent-rose truncate max-w-[200px]">
|
||||
{entry.errorMsg}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{entry.status === 'done' && entry.result && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => onCopyCid(entry.result!.cid)}
|
||||
className="p-1.5 rounded-lg hover:bg-surface-700 transition-colors group"
|
||||
title="Copy CID"
|
||||
>
|
||||
{copied === entry.result!.cid ? (
|
||||
<CheckCircle className="w-3.5 h-3.5 text-accent-green" />
|
||||
) : (
|
||||
<Copy className="w-3.5 h-3.5 text-surface-500 group-hover:text-surface-300" />
|
||||
)}
|
||||
</button>
|
||||
<a
|
||||
href={gatewayLink(entry.result!.cid)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-1.5 rounded-lg hover:bg-surface-700 transition-colors group"
|
||||
title="Open in gateway"
|
||||
>
|
||||
<ExternalLink className="w-3.5 h-3.5 text-surface-500 group-hover:text-surface-300" />
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
{entry.status === 'pending' && !uploading && (
|
||||
<button
|
||||
onClick={() => onRemoveFile(entry.id)}
|
||||
className="p-1.5 rounded-lg hover:bg-surface-700 transition-colors group"
|
||||
title="Remove"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5 text-surface-500 group-hover:text-accent-rose" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action buttons */}
|
||||
{files.length > 0 && !allDone && (
|
||||
<div className="mt-4">
|
||||
<button
|
||||
onClick={onStartUpload}
|
||||
disabled={uploading || files.filter(f => f.status === 'pending').length === 0}
|
||||
className="flex items-center gap-2 px-6 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-medium transition-colors"
|
||||
>
|
||||
{uploading ? (
|
||||
<><Loader2 className="w-4 h-4 animate-spin" /> Uploading…</>
|
||||
) : (
|
||||
<><Upload className="w-4 h-4" /> Upload All ({files.filter(f => f.status === 'pending').length})</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results summary */}
|
||||
{uploadDone && (
|
||||
<div className="mt-6 glass rounded-xl p-5 animate-fade-in">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
{errorCount === 0 ? (
|
||||
<CheckCircle className="w-5 h-5 text-accent-green" />
|
||||
) : (
|
||||
<XCircle className="w-5 h-5 text-accent-rose" />
|
||||
)}
|
||||
<span className="text-sm font-medium text-white">
|
||||
{doneCount}/{totalCount} files uploaded
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClearAll}
|
||||
className="flex items-center gap-1 text-xs text-brand-400 hover:text-brand-300 transition-colors"
|
||||
>
|
||||
<Upload className="w-3 h-3" />
|
||||
Upload more
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Per-file result details */}
|
||||
{files.filter(f => f.status === 'done').map(entry => entry.result && (
|
||||
<div key={entry.id} className="flex items-center justify-between py-2 px-3 rounded-lg bg-surface-800/50 mb-1.5">
|
||||
<div className="flex items-center gap-3 min-w-0 flex-1">
|
||||
<span className="text-sm text-surface-300 truncate max-w-[150px]">{entry.file.name}</span>
|
||||
<span className="text-xs font-mono text-surface-500 truncate max-w-[120px]">{entry.result.cid.slice(0, 16)}…</span>
|
||||
<span className="text-xs text-surface-500">{formatBytes(entry.result.size)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<button
|
||||
onClick={() => onCopyCid(entry.result!.cid)}
|
||||
className="p-1.5 rounded-lg hover:bg-surface-700 transition-colors"
|
||||
title="Copy CID"
|
||||
>
|
||||
{copied === entry.result!.cid ? (
|
||||
<CheckCircle className="w-3.5 h-3.5 text-accent-green" />
|
||||
) : (
|
||||
<Copy className="w-3.5 h-3.5 text-surface-500" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onCopyShareLink(entry.result!.cid)}
|
||||
className="p-1.5 rounded-lg hover:bg-surface-700 transition-colors"
|
||||
title="Copy share link"
|
||||
>
|
||||
{copied === `gw-${entry.result!.cid}` ? (
|
||||
<CheckCircle className="w-3.5 h-3.5 text-accent-green" />
|
||||
) : (
|
||||
<Globe className="w-3.5 h-3.5 text-surface-500" />
|
||||
)}
|
||||
</button>
|
||||
<a
|
||||
href={gatewayLink(entry.result!.cid)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-1.5 rounded-lg hover:bg-surface-700 transition-colors"
|
||||
title="Open in gateway"
|
||||
>
|
||||
<ExternalLink className="w-3.5 h-3.5 text-surface-500" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{files.length === 0 && !uploading && (
|
||||
<div className="mt-6 glass rounded-xl p-8 text-center">
|
||||
<Upload className="w-8 h-8 text-surface-600 mx-auto mb-3" />
|
||||
<p className="text-sm text-surface-500">
|
||||
Drag files above or click to browse. No crypto payment needed for quick uploads.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user