Upload-Freigabe: öffentlicher Upload-Link mit Passwort, Ablaufzeit, max. Größe; Admin-Verwaltung

frontend/src/tools/dateien.jsx

@@ -158,6 +158,192 @@ function PasswordPromptModal({ filename, onSubmit, onCancel }) {
   );
 }
 
+
+// ── Upload-Ordner & Share-Verwaltung ─────────────────────────────────────────
+function UploadShareManager({ toast }) {
+  const [shares,      setShares]      = useState([]);
+  const [folder,      setFolder]      = useState(null);
+  const [logs,        setLogs]        = useState([]);
+  const [showCreate,  setShowCreate]  = useState(false);
+  const [showLogs,    setShowLogs]    = useState(false);
+  const [form,        setForm]        = useState({ password:'', expires_hours:24, max_size_mb:10 });
+  const [busy,        setBusy]        = useState(false);
+  const [copied,      setCopied]      = useState(null);
+
+  const load = () => api('/upload-shares').then(d=>{ setShares(d.shares||[]); setFolder(d.folder); }).catch(()=>{});
+  useEffect(()=>{ load(); },[]);
+
+  const genPw = () => {
+    const chars='ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%';
+    setForm(p=>({...p, password: Array.from({length:12},()=>chars[Math.floor(Math.random()*chars.length)]).join('')}));
+  };
+
+  const create = async () => {
+    if (!form.password.trim()) { toast('Passwort erforderlich','error'); return; }
+    setBusy(true);
+    try {
+      await api('/upload-shares', { body: form });
+      toast('Upload-Link erstellt ✓'); setShowCreate(false); setForm({password:'',expires_hours:24,max_size_mb:10}); load();
+    } catch(e) { toast(e.message,'error'); }
+    setBusy(false);
+  };
+
+  const deactivate = async id => {
+    await api(`/upload-shares/${id}`, { method:'DELETE' });
+    load(); toast('Link deaktiviert');
+  };
+
+  const copyLink = (token) => {
+    const url = `${window.location.origin}/u/${token}`;
+    navigator.clipboard?.writeText(url).then(()=>{ setCopied(token); setTimeout(()=>setCopied(null),2000); }).catch(()=>{
+      toast(url);
+    });
+  };
+
+  const loadLogs = () => {
+    api('/upload-shares/logs').then(setLogs).catch(()=>{});
+    setShowLogs(true);
+  };
+
+  const fmtDate = d => d ? new Date(d).toLocaleString('de-DE',{timeZone:'Europe/Berlin',day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'}) : '–';
+  const fmtSize = b => b>1024*1024 ? (b/1024/1024).toFixed(1)+' MB' : (b/1024).toFixed(0)+' KB';
+
+  const DURATION_OPTS = [
+    [1,'1 Stunde'],[2,'2 Stunden'],[6,'6 Stunden'],[12,'12 Stunden'],
+    [24,'1 Tag'],[48,'2 Tage'],[72,'3 Tage'],[168,'1 Woche'],[336,'2 Wochen'],
+  ];
+  const SIZE_OPTS = [1,2,5,10,20,50,100,250];
+
+  return (
+    <div>
+      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:12,flexWrap:'wrap',gap:8}}>
+        <div>
+          <div style={{color:'#fff',fontFamily:'monospace',fontSize:14,fontWeight:700}}>
+            📤 Upload-Ordner
+          </div>
+          {folder && <div style={{color:'rgba(255,255,255,0.35)',fontFamily:'monospace',fontSize:10,marginTop:2}}>
+            Dateien landen in: 📁 {folder.name}
+          </div>}
+        </div>
+        <div style={{display:'flex',gap:6}}>
+          <button onClick={loadLogs} style={{...S.btn('rgba(255,255,255,0.3)',true),fontSize:11,padding:'6px 12px'}}>
+            📋 Log
+          </button>
+          <button onClick={()=>setShowCreate(p=>!p)} style={{...S.btn('#4ecdc4'),padding:'7px 14px',fontSize:12}}>
+            {showCreate?'Abbrechen':'+ Link erstellen'}
+          </button>
+        </div>
+      </div>
+
+      {/* Erstellen-Formular */}
+      {showCreate && (
+        <div style={{...S.card,marginBottom:12}}>
+          <div style={{...S.head,marginBottom:12}}>UPLOAD-LINK KONFIGURIEREN</div>
+          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginBottom:8}}>
+            <div>
+              <div style={{...S.head,fontSize:9,marginBottom:4}}>GÜLTIGKEITSDAUER</div>
+              <select value={form.expires_hours} onChange={e=>setForm(p=>({...p,expires_hours:Number(e.target.value)}))}
+                style={{...S.inp,width:'100%',cursor:'pointer'}}>
+                {DURATION_OPTS.map(([v,l])=><option key={v} value={v}>{l}</option>)}
+              </select>
+            </div>
+            <div>
+              <div style={{...S.head,fontSize:9,marginBottom:4}}>MAX. DATEIGRÖSSE</div>
+              <select value={form.max_size_mb} onChange={e=>setForm(p=>({...p,max_size_mb:Number(e.target.value)}))}
+                style={{...S.inp,width:'100%',cursor:'pointer'}}>
+                {SIZE_OPTS.map(v=><option key={v} value={v}>{v} MB</option>)}
+              </select>
+            </div>
+          </div>
+          <div style={{marginBottom:12}}>
+            <div style={{...S.head,fontSize:9,marginBottom:4}}>PASSWORT</div>
+            <div style={{display:'flex',gap:6}}>
+              <input value={form.password} onChange={e=>setForm(p=>({...p,password:e.target.value}))}
+                placeholder="Passwort vergeben" style={{...S.inp,flex:1,fontFamily:'monospace'}}/>
+              <button onClick={genPw} style={{...S.btn('#ffe66d',true),fontSize:11,padding:'0 12px',whiteSpace:'nowrap'}}>
+                ⚡ Generieren
+              </button>
+            </div>
+            {form.password && <div style={{color:'rgba(255,255,255,0.35)',fontFamily:'monospace',fontSize:11,marginTop:4}}>
+              Passwort: <strong style={{color:'#ffe66d'}}>{form.password}</strong> – notiere es jetzt
+            </div>}
+          </div>
+          <button onClick={create} disabled={busy} style={{...S.btn('#4ecdc4'),width:'100%',textAlign:'center',padding:'10px 0',opacity:busy?0.5:1}}>
+            {busy?'…':'🔗 Link erstellen & kopieren'}
+          </button>
+        </div>
+      )}
+
+      {/* Aktive Links */}
+      {shares.length===0 && !showCreate && (
+        <div style={{...S.card,textAlign:'center',padding:32}}>
+          <div style={{fontSize:28,marginBottom:8}}>📤</div>
+          <div style={{color:'rgba(255,255,255,0.35)',fontFamily:'monospace',fontSize:12}}>
+            Noch kein Upload-Link. Erstelle einen Link um anderen das Hochladen zu erlauben.
+          </div>
+        </div>
+      )}
+      {shares.map(s => {
+        const expired = new Date(s.expires_at) < new Date();
+        return (
+          <div key={s.id} style={{...S.card,marginBottom:8,opacity:(!s.is_active||expired)?0.5:1}}>
+            <div style={{display:'flex',alignItems:'center',gap:10,flexWrap:'wrap'}}>
+              <div style={{flex:1,minWidth:0}}>
+                <div style={{display:'flex',alignItems:'center',gap:6,flexWrap:'wrap'}}>
+                  <span style={{color:!s.is_active||expired?'#ff6b9d':expired?'#ffe66d':'#4ecdc4',fontFamily:'monospace',fontSize:11,
+                    border:`1px solid currentColor`,borderRadius:4,padding:'1px 6px',flexShrink:0}}>
+                    {!s.is_active?'Deaktiviert':expired?'Abgelaufen':'Aktiv'}
+                  </span>
+                  <span style={{color:'rgba(255,255,255,0.4)',fontFamily:'monospace',fontSize:10}}>
+                    bis {fmtDate(s.expires_at)} · max {s.max_size_mb} MB · {s.upload_count||0} Upload(s)
+                  </span>
+                </div>
+                <div style={{color:'rgba(255,255,255,0.25)',fontFamily:'monospace',fontSize:10,marginTop:3,
+                  overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>
+                  /u/{s.token}
+                </div>
+              </div>
+              <div style={{display:'flex',gap:5,flexShrink:0}}>
+                {s.is_active && !expired && (
+                  <button onClick={()=>copyLink(s.token)}
+                    style={{...S.btn(copied===s.token?'#4ecdc4':'#ffe66d',copied!==s.token),fontSize:10,padding:'4px 10px'}}>
+                    {copied===s.token?'✓ Kopiert':'📋 Link'}
+                  </button>
+                )}
+                {s.is_active && (
+                  <button onClick={()=>deactivate(s.id)} style={{...S.btn('#ff6b9d',true),fontSize:10,padding:'4px 10px'}}>✕</button>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+
+      {/* Log-Ansicht */}
+      {showLogs && (
+        <div style={{...S.card,marginTop:12}}>
+          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
+            <div style={{...S.head,marginBottom:0}}>UPLOAD-PROTOKOLL</div>
+            <button onClick={()=>setShowLogs(false)} style={{background:'transparent',border:'none',color:'rgba(255,255,255,0.4)',cursor:'pointer',fontSize:16}}>✕</button>
+          </div>
+          {logs.length===0
+            ? <div style={{color:'rgba(255,255,255,0.35)',fontFamily:'monospace',fontSize:11}}>Noch keine Uploads über Freigabe-Links.</div>
+            : logs.map(l=>(
+              <div key={l.id} style={{display:'flex',gap:10,padding:'7px 0',borderBottom:'1px solid rgba(255,255,255,0.05)'}}>
+                <span style={{fontSize:14,flexShrink:0}}>📄</span>
+                <div style={{flex:1,minWidth:0}}>
+                  <div style={{color:'#fff',fontFamily:'monospace',fontSize:12,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{l.originalname}</div>
+                  <div style={{color:'rgba(255,255,255,0.35)',fontFamily:'monospace',fontSize:10}}>{fmtDate(l.uploaded_at)} · {fmtSize(l.size)}</div>
+                </div>
+              </div>
+            ))
+          }
+        </div>
+      )}
+    </div>
+  );
+}
+
 export default function Dateien({ toast, mobile }) {
   const [data,       setData]       = useState({own:[],shared:[],sharedByMe:[]});
   const [folders,    setFolders]    = useState({own:[],shared:[],sharedByMe:[]});
@@ -329,6 +515,7 @@ export default function Dateien({ toast, mobile }) {
           ['own','Dateien', null],
           ['shared','Geteilt mit mir', sharedCnt||null],
           ['sharedByMe','Geteilt von mir', byMeCnt||null],
+          ['upload','📤 Upload-Ordner', null],
         ].map(([k,l,cnt])=>(
           <button key={k} onClick={()=>{setTab(k);setSearch('');setCurrentFolderId(null);setFolderPath([]);}} style={{
             padding:'6px 14px',borderRadius:20,fontFamily:'monospace',fontSize:11,cursor:'pointer',
@@ -504,11 +691,14 @@ export default function Dateien({ toast, mobile }) {
         <div style={{...S.card,textAlign:'center',padding:40}}>
           <div style={{fontSize:28,marginBottom:10}}>📂</div>
           <div style={{color:'rgba(255,255,255,0.35)',fontFamily:'monospace',fontSize:12}}>
-            {search?'Keine Treffer.':tab==='own'?'Noch leer – Datei hochladen oder Ordner anlegen.':'Noch nichts geteilt.'}
+            {search?'Keine Treffer.':tab==='own'?'Noch leer – Datei hochladen oder Ordner anlegen.':tab==='upload'?'':' Noch nichts geteilt.'}
           </div>
         </div>
       )}
     </div>
+      </>
+      }
+    </div>
   );
 }