feat: Ordner-Freigaben zeigen Dateiliste + Download/Loeschen

Share-Links fuer Ordner verhalten sich jetzt je nach Berechtigung:

read (Nur Lesen):
- Zeigt alle Dateien im Ordner mit Name, Groesse, Typ
- Download-Button pro Datei
- Kein Upload, kein Loeschen

write (Lesen+Schreiben):
- Zeigt alle Dateien im Ordner
- Download-Button pro Datei
- Loeschen-Button pro Datei
- Upload-Zone (Drag & Drop + Button)
- Nach Upload wird Dateiliste automatisch aktualisiert

upload_only (Nur Upload):
- Kein Dateilisting, kein Ordnername sichtbar
- Nur Upload-Zone

Backend-Endpunkte:
- GET /share/<token>/files - Dateien im geteilten Ordner auflisten
- GET /share/<token>/files/<id>/download - Einzeldatei herunterladen
- DELETE /share/<token>/files/<id> - Datei loeschen (nur write)
- Alle Endpunkte pruefen Passwort, Ablaufdatum und Berechtigung
- Dateien muessen direkte Kinder des geteilten Ordners sein (kein Ausbruch)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

backend/app/api/files.py

@@ -503,6 +503,121 @@ def share_info(token):
     }), 200
 
 
+@api_bp.route('/share/<token>/files', methods=['GET'])
+def share_list_files(token):
+    """List files in a shared folder (read or write permission required)."""
+    link = ShareLink.query.filter_by(token=token).first()
+    if not link:
+        return jsonify({'error': 'Link nicht gefunden'}), 404
+
+    if link.is_expired():
+        return jsonify({'error': 'Link abgelaufen'}), 410
+
+    if link.permission == 'upload_only':
+        return jsonify({'error': 'Dieser Link erlaubt keinen Einblick'}), 403
+
+    # Check password via header
+    if link.password_hash:
+        password = request.args.get('password', '') or request.headers.get('X-Share-Password', '')
+        if not bcrypt.check_password_hash(link.password_hash, password):
+            return jsonify({'error': 'Passwort erforderlich'}), 401
+
+    f = db.session.get(File, link.file_id)
+    if not f.is_folder:
+        return jsonify({'error': 'Kein Ordner'}), 400
+
+    files = File.query.filter_by(parent_id=f.id)\
+        .order_by(File.is_folder.desc(), File.name).all()
+
+    return jsonify([{
+        'id': fi.id,
+        'name': fi.name,
+        'is_folder': fi.is_folder,
+        'size': fi.size,
+        'mime_type': fi.mime_type,
+        'updated_at': fi.updated_at.isoformat() if fi.updated_at else None,
+    } for fi in files]), 200
+
+
+@api_bp.route('/share/<token>/files/<int:file_id>/download', methods=['GET'])
+def share_download_file(token, file_id):
+    """Download a specific file from a shared folder."""
+    link = ShareLink.query.filter_by(token=token).first()
+    if not link:
+        return jsonify({'error': 'Link nicht gefunden'}), 404
+
+    if link.is_expired():
+        return jsonify({'error': 'Link abgelaufen'}), 410
+
+    if link.permission not in ('read', 'write'):
+        return jsonify({'error': 'Download nicht erlaubt'}), 403
+
+    if link.password_hash:
+        password = request.args.get('password', '') or request.headers.get('X-Share-Password', '')
+        if not bcrypt.check_password_hash(link.password_hash, password):
+            return jsonify({'error': 'Passwort erforderlich'}), 401
+
+    # Verify file belongs to the shared folder
+    target_file = db.session.get(File, file_id)
+    if not target_file:
+        return jsonify({'error': 'Datei nicht gefunden'}), 404
+
+    # Check file is inside shared folder (direct child)
+    shared_folder = db.session.get(File, link.file_id)
+    if target_file.parent_id != shared_folder.id:
+        return jsonify({'error': 'Datei gehoert nicht zu diesem Ordner'}), 403
+
+    if target_file.is_folder:
+        return jsonify({'error': 'Ordner koennen nicht heruntergeladen werden'}), 400
+
+    filepath = Path(current_app.config['UPLOAD_PATH']) / str(target_file.owner_id) / target_file.storage_path
+    if not filepath.exists():
+        return jsonify({'error': 'Datei nicht gefunden'}), 404
+
+    link.download_count += 1
+    db.session.commit()
+
+    return send_file(str(filepath), mimetype=target_file.mime_type, as_attachment=True,
+                     download_name=target_file.name)
+
+
+@api_bp.route('/share/<token>/files/<int:file_id>', methods=['DELETE'])
+def share_delete_file(token, file_id):
+    """Delete a file from a shared folder (write permission required)."""
+    link = ShareLink.query.filter_by(token=token).first()
+    if not link:
+        return jsonify({'error': 'Link nicht gefunden'}), 404
+
+    if link.is_expired():
+        return jsonify({'error': 'Link abgelaufen'}), 410
+
+    if link.permission != 'write':
+        return jsonify({'error': 'Loeschen nicht erlaubt'}), 403
+
+    if link.password_hash:
+        password = request.headers.get('X-Share-Password', '')
+        if not bcrypt.check_password_hash(link.password_hash, password):
+            return jsonify({'error': 'Passwort erforderlich'}), 401
+
+    target_file = db.session.get(File, file_id)
+    if not target_file:
+        return jsonify({'error': 'Datei nicht gefunden'}), 404
+
+    shared_folder = db.session.get(File, link.file_id)
+    if target_file.parent_id != shared_folder.id:
+        return jsonify({'error': 'Datei gehoert nicht zu diesem Ordner'}), 403
+
+    # Delete from disk
+    if target_file.storage_path:
+        filepath = Path(current_app.config['UPLOAD_PATH']) / str(target_file.owner_id) / target_file.storage_path
+        if filepath.exists():
+            filepath.unlink()
+
+    db.session.delete(target_file)
+    db.session.commit()
+    return jsonify({'message': 'Datei geloescht'}), 200
+
+
 @api_bp.route('/share/<token>/verify', methods=['POST'])
 def share_verify(token):
     link = ShareLink.query.filter_by(token=token).first()

frontend/src/views/ShareView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="share-container">
-    <div class="share-card">
+    <div class="share-card" :class="{ wide: fileInfo?.is_folder && fileInfo?.permission !== 'upload_only' }">
       <i class="pi pi-cloud" style="font-size: 2rem; color: var(--p-primary-color)"></i>
 
       <div v-if="loading" class="share-loading">
@@ -17,8 +17,8 @@
         <h2 v-if="fileInfo.permission !== 'upload_only'">{{ fileInfo.name }}</h2>
         <h2 v-else>Datei-Upload</h2>
         <p class="file-size" v-if="fileInfo.size && !fileInfo.is_folder && fileInfo.permission !== 'upload_only'">{{ formatSize(fileInfo.size) }}</p>
-        <Tag v-if="fileInfo.is_folder && fileInfo.permission !== 'upload_only'" value="Ordner" severity="info" />
 
+        <!-- Password gate -->
         <div v-if="fileInfo.has_password && !authenticated" class="password-form">
           <p>Diese Freigabe ist passwortgeschuetzt.</p>
           <div class="field">
@@ -28,23 +28,54 @@
           <Button label="Entsperren" @click="verifyPassword" :loading="verifying" fluid />
         </div>
 
+        <!-- Authenticated content -->
         <div v-else class="actions-section">
-          <!-- Download (files only, not upload_only) -->
+
+          <!-- Single file: download -->
           <div v-if="!fileInfo.is_folder && fileInfo.download_allowed" class="action-block">
-            <Button
+            <Button label="Herunterladen" icon="pi pi-download" size="large" @click="downloadFile" />
-              label="Herunterladen"
-              icon="pi pi-download"
-              size="large"
-              @click="downloadFile"
-            />
           </div>
 
-          <!-- Upload-only hint -->
+          <!-- Folder: file listing (read + write) -->
+          <div v-if="fileInfo.is_folder && fileInfo.permission !== 'upload_only'" class="folder-content">
+            <div class="folder-toolbar">
+              <span class="folder-count">{{ folderFiles.length }} Dateien</span>
+              <Button v-if="fileInfo.upload_allowed" icon="pi pi-upload" label="Hochladen" size="small" @click="$refs.uploadInput.click()" />
+            </div>
+
+            <div v-if="loadingFiles" class="loading-small">
+              <i class="pi pi-spin pi-spinner"></i> Lade Dateien...
+            </div>
+
+            <div v-else class="file-list">
+              <div v-for="f in folderFiles" :key="f.id" class="file-item">
+                <div class="file-info">
+                  <i :class="f.is_folder ? 'pi pi-folder' : 'pi pi-file'"></i>
+                  <div class="file-details">
+                    <span class="file-name">{{ f.name }}</span>
+                    <span class="file-meta">{{ f.is_folder ? 'Ordner' : formatSize(f.size) }}</span>
+                  </div>
+                </div>
+                <div class="file-actions">
+                  <Button v-if="!f.is_folder" icon="pi pi-download" text size="small"
+                          @click="downloadFolderFile(f)" />
+                  <Button v-if="fileInfo.permission === 'write'" icon="pi pi-trash" text size="small"
+                          severity="danger" @click="deleteFolderFile(f)" />
+                </div>
+              </div>
+              <div v-if="!folderFiles.length" class="empty-folder">
+                <i class="pi pi-folder-open"></i>
+                <p>Ordner ist leer</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Upload only hint -->
           <p v-if="fileInfo.permission === 'upload_only'" class="upload-only-hint">
             Dieser Link erlaubt nur das Hochladen von Dateien.
           </p>
 
-          <!-- Upload (folders only) -->
+          <!-- Upload zone (write + upload_only) -->
           <div v-if="fileInfo.upload_allowed" class="action-block">
             <div class="upload-area"
                  @dragover.prevent="isDragging = true"
@@ -77,7 +108,6 @@ import axios from 'axios'
 import Button from 'primevue/button'
 import Password from 'primevue/password'
 import Message from 'primevue/message'
-import Tag from 'primevue/tag'
 import ProgressBar from 'primevue/progressbar'
 
 const route = useRoute()
@@ -91,6 +121,9 @@ const authenticated = ref(false)
 const authError = ref('')
 const verifying = ref(false)
 
+const folderFiles = ref([])
+const loadingFiles = ref(false)
+
 const isDragging = ref(false)
 const uploading = ref(false)
 const uploadPercent = ref(0)
@@ -98,19 +131,31 @@ const uploadStatus = ref('')
 const uploadSuccess = ref('')
 
 function formatSize(bytes) {
-  if (!bytes) return ''
+  if (!bytes) return '0 B'
   const units = ['B', 'KB', 'MB', 'GB']
-  let i = 0
+  let i = 0; let size = bytes
-  let size = bytes
   while (size >= 1024 && i < units.length - 1) { size /= 1024; i++ }
   return `${size.toFixed(i > 0 ? 1 : 0)} ${units[i]}`
 }
 
+function getAuthHeaders() {
+  const headers = {}
+  if (fileInfo.value?.has_password && password.value) {
+    headers['X-Share-Password'] = password.value
+  }
+  return headers
+}
+
 async function loadInfo() {
   try {
     const res = await axios.get(`/api/share/${token}/info`)
     fileInfo.value = res.data
-    if (!res.data.has_password) authenticated.value = true
+    if (!res.data.has_password) {
+      authenticated.value = true
+      if (res.data.is_folder && res.data.permission !== 'upload_only') {
+        await loadFolderFiles()
+      }
+    }
   } catch (err) {
     error.value = err.response?.data?.error || 'Link nicht gefunden oder abgelaufen'
   } finally {
@@ -124,6 +169,9 @@ async function verifyPassword() {
   try {
     await axios.post(`/api/share/${token}/verify`, { password: password.value })
     authenticated.value = true
+    if (fileInfo.value?.is_folder && fileInfo.value?.permission !== 'upload_only') {
+      await loadFolderFiles()
+    }
   } catch (err) {
     authError.value = err.response?.data?.error || 'Falsches Passwort'
   } finally {
@@ -131,6 +179,18 @@ async function verifyPassword() {
   }
 }
 
+async function loadFolderFiles() {
+  loadingFiles.value = true
+  try {
+    const res = await axios.get(`/api/share/${token}/files`, { headers: getAuthHeaders() })
+    folderFiles.value = res.data
+  } catch {
+    folderFiles.value = []
+  } finally {
+    loadingFiles.value = false
+  }
+}
+
 function downloadFile() {
   let url = `/api/share/${token}/download`
   if (fileInfo.value?.has_password && password.value) {
@@ -139,6 +199,23 @@ function downloadFile() {
   window.location.href = url
 }
 
+function downloadFolderFile(file) {
+  let url = `/api/share/${token}/files/${file.id}/download`
+  if (fileInfo.value?.has_password && password.value) {
+    url += `?password=${encodeURIComponent(password.value)}`
+  }
+  window.location.href = url
+}
+
+async function deleteFolderFile(file) {
+  try {
+    await axios.delete(`/api/share/${token}/files/${file.id}`, { headers: getAuthHeaders() })
+    folderFiles.value = folderFiles.value.filter(f => f.id !== file.id)
+  } catch (err) {
+    alert(err.response?.data?.error || 'Fehler beim Loeschen')
+  }
+}
+
 async function onDrop(e) {
   isDragging.value = false
   const files = Array.from(e.dataTransfer.files)
@@ -163,19 +240,12 @@ async function uploadFiles(files) {
     try {
       const formData = new FormData()
       formData.append('file', file)
-      if (fileInfo.value?.has_password && password.value) {
+      if (password.value) formData.append('password', password.value)
-        formData.append('password', password.value)
-      }
       await axios.post(`/api/share/${token}/upload`, formData, {
-        headers: {
+        headers: { 'Content-Type': 'multipart/form-data', ...getAuthHeaders() },
-          'Content-Type': 'multipart/form-data',
-          ...(password.value ? { 'X-Share-Password': password.value } : {}),
-        },
       })
       uploaded++
-    } catch {
+    } catch { errors++ }
-      errors++
-    }
     uploadPercent.value = Math.round(((uploaded + errors) / files.length) * 100)
   }
 
@@ -185,6 +255,11 @@ async function uploadFiles(files) {
   } else {
     uploadSuccess.value = `${uploaded} Datei${uploaded !== 1 ? 'en' : ''} erfolgreich hochgeladen`
   }
+
+  // Reload file list
+  if (fileInfo.value?.is_folder && fileInfo.value?.permission !== 'upload_only') {
+    await loadFolderFiles()
+  }
 }
 
 onMounted(loadInfo)
@@ -193,26 +268,49 @@ onMounted(loadInfo)
 <style scoped>
 .share-container {
   min-height: 100vh; display: flex; align-items: center; justify-content: center;
-  background: var(--p-surface-50);
+  background: var(--p-surface-50); padding: 1rem;
 }
 .share-card {
-  background: var(--p-surface-0); border-radius: 12px; padding: 3rem;
+  background: var(--p-surface-0); border-radius: 12px; padding: 2.5rem;
   text-align: center; max-width: 500px; width: 100%;
   box-shadow: 0 2px 12px rgba(0,0,0,0.08);
 }
+.share-card.wide { max-width: 700px; }
 .share-card h2 { margin: 1rem 0 0.25rem; font-size: 1.25rem; }
 .file-size { color: var(--p-text-muted-color); margin-bottom: 1rem; }
 .password-form { text-align: left; margin-top: 1.5rem; }
 .password-form p { margin-bottom: 1rem; color: var(--p-text-muted-color); }
 .field { margin-bottom: 1rem; }
-.actions-section { margin-top: 1.5rem; }
+.actions-section { margin-top: 1.5rem; text-align: left; }
-.action-block { margin-bottom: 1.5rem; }
+.action-block { margin-bottom: 1.5rem; text-align: center; }
 .share-loading, .share-error { margin-top: 1.5rem; }
 
+/* Folder content */
+.folder-content { margin-bottom: 1.5rem; }
+.folder-toolbar {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--p-surface-200);
+}
+.folder-count { font-size: 0.85rem; color: var(--p-text-muted-color); }
+.file-list { max-height: 400px; overflow-y: auto; }
+.file-item {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0.5rem 0; border-bottom: 1px solid var(--p-surface-100);
+}
+.file-info { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
+.file-info i { font-size: 1.1rem; color: var(--p-surface-500); flex-shrink: 0; }
+.file-details { display: flex; flex-direction: column; min-width: 0; }
+.file-name { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.file-meta { font-size: 0.75rem; color: var(--p-text-muted-color); }
+.file-actions { display: flex; flex-shrink: 0; }
+.empty-folder { text-align: center; padding: 2rem; color: var(--p-text-muted-color); }
+.empty-folder i { font-size: 1.5rem; }
+.loading-small { text-align: center; padding: 1rem; color: var(--p-text-muted-color); }
+
+/* Upload */
 .upload-area {
   border: 2px dashed var(--p-surface-300); border-radius: 10px;
-  padding: 2rem; text-align: center; cursor: pointer;
+  padding: 2rem; text-align: center; transition: all 0.2s;
-  transition: all 0.2s;
 }
 .upload-area:hover, .upload-area.dragging {
   border-color: var(--p-primary-color); background: var(--p-primary-50);
@@ -222,5 +320,5 @@ onMounted(loadInfo)
 .upload-area p { margin: 0.5rem 0; color: var(--p-text-muted-color); font-size: 0.9rem; }
 .upload-progress { margin-top: 1rem; }
 .upload-progress p { font-size: 0.85rem; color: var(--p-text-muted-color); margin-top: 0.5rem; }
-.upload-only-hint { color: var(--p-text-muted-color); font-size: 0.9rem; margin-bottom: 1rem; }
+.upload-only-hint { color: var(--p-text-muted-color); font-size: 0.9rem; margin-bottom: 1rem; text-align: center; }
 </style>