refactor frontend, add readme

Backend/.ignore

@@ -2,3 +2,4 @@
 .gradle
 bin
 build
+.devenv

Backend/src/main/java/com/gregor_lohaus/gtransfer/config/DefaultConfig.java

@@ -47,6 +47,8 @@ public class DefaultConfig {
     UploadConfig uc = new UploadConfig();
     uc.maxDownloadLimit = 100;
     uc.maxExpiryDays = 30;
+    uc.cleanupEnabled = true;
+    uc.cleanupIntervalMs = 3600000L;
     c.uploadConfig = uc;
 
     config = c;

Backend/src/main/java/com/gregor_lohaus/gtransfer/config/types/UploadConfig.java

@@ -9,4 +9,8 @@ public class UploadConfig implements TomlSerializable {
   public Integer maxDownloadLimit;
   @Property(name = "maxExpiryDays")
   public Integer maxExpiryDays;
+  @Property(name = "cleanupEnabled")
+  public Boolean cleanupEnabled;
+  @Property(name = "cleanupIntervalMs")
+  public Long cleanupIntervalMs;
 }

Backend/src/main/java/com/gregor_lohaus/gtransfer/controller/DownloadController.java

@@ -10,7 +10,6 @@ import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.transaction.annotation.Transactional;
-import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.ResponseBody;
@@ -28,10 +27,8 @@ public class DownloadController {
     @Autowired
     private AbstractStorageService storageService;
 
-    @GetMapping("/download/{id}")
+    @GetMapping("/download")
-    public String page(@PathVariable String id, Model model) {
+    public String page() {
-        fileRepository.findById(id)
-                .ifPresent(f -> model.addAttribute("filename", f.getName()));
         return "download/page";
     }
 

Backend/src/main/java/com/gregor_lohaus/gtransfer/controller/UploadController.java

@@ -45,8 +45,7 @@ public class UploadController {
             @RequestParam("hash") String hash,
             @RequestParam("name") String name,
             @RequestParam(required = false) Integer expiryDays,
-            @RequestParam(required = false) Integer downloadLimit,
+            @RequestParam(required = false) Integer downloadLimit) throws IOException {
-            Model model) throws IOException {
 
         storageService.put(hash, file.getBytes());
 
@@ -57,7 +56,6 @@ public class UploadController {
         f.setDownloadLimit(limit);
         fileRepository.save(f);
 
-        model.addAttribute("id", hash);
         return "upload/result :: view";
     }
 }

Backend/src/main/java/com/gregor_lohaus/gtransfer/model/FileRepository.java

@@ -1,8 +1,16 @@
 package com.gregor_lohaus.gtransfer.model;
 
+import java.time.LocalDateTime;
+import java.util.List;
+
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
 import org.springframework.stereotype.Repository;
 
 @Repository
 public interface FileRepository extends JpaRepository<File, String> {
+
+    @Query("SELECT f FROM File f WHERE f.expireyDateTime IS NOT NULL AND f.expireyDateTime < :now")
+    List<File> findExpired(@Param("now") LocalDateTime now);
 }

Backend/src/main/java/com/gregor_lohaus/gtransfer/services/FileCleanupService.java

@@ -0,0 +1,43 @@
+package com.gregor_lohaus.gtransfer.services;
+
+import java.time.LocalDateTime;
+import java.util.List;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
+import org.springframework.scheduling.annotation.Scheduled;
+import org.springframework.stereotype.Component;
+import org.springframework.transaction.annotation.Transactional;
+
+import com.gregor_lohaus.gtransfer.model.File;
+import com.gregor_lohaus.gtransfer.model.FileRepository;
+import com.gregor_lohaus.gtransfer.services.filewriter.AbstractStorageService;
+
+@Component
+@ConditionalOnProperty(name = "gtransfer-config.upload.cleanupEnabled", havingValue = "true", matchIfMissing = true)
+public class FileCleanupService {
+
+    private static final Logger log = LoggerFactory.getLogger(FileCleanupService.class);
+
+    @Autowired
+    private FileRepository fileRepository;
+
+    @Autowired
+    private AbstractStorageService storageService;
+
+    @Scheduled(fixedDelayString = "${gtransfer-config.upload.cleanupIntervalMs:3600000}")
+    @Transactional
+    public void cleanupExpiredFiles() {
+        List<File> expired = fileRepository.findExpired(LocalDateTime.now());
+        if (expired.isEmpty()) return;
+
+        for (File file : expired) {
+            storageService.delete(file.getId());
+            fileRepository.delete(file);
+        }
+
+        log.info("Cleaned up {} expired file(s)", expired.size());
+    }
+}

Backend/src/main/java/com/gregor_lohaus/gtransfer/services/filewriter/StorageServiceConfiguration.java

@@ -5,10 +5,12 @@ import java.nio.file.Path;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
+import org.springframework.scheduling.annotation.EnableScheduling;
 
 import com.gregor_lohaus.gtransfer.config.types.StorageServiceType;
 
 @Configuration
+@EnableScheduling
 public class StorageServiceConfiguration {
 
     //TODO S3 implementation

Backend/src/main/resources/static/crypto.js

@@ -16,13 +16,32 @@ async function encryptFile(arrayBuffer) {
 
     // SHA-256(rawKey) → file identifier sent to server; server never sees the key itself
     const rawKey = await crypto.subtle.exportKey('raw', key);
-    const hash = Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', rawKey)))
+    const hash = await hashKey(rawKey);
-        .map(b => b.toString(16).padStart(2, '0'))
-        .join('');
 
-    // Base64url-encode key for URL fragment
+    const base64urlKey = encodeKey(rawKey);
-    const base64urlKey = btoa(String.fromCharCode(...new Uint8Array(rawKey)))
-        .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
 
     return { payload, hash, base64urlKey };
 }
+
+async function hashKey(rawKey) {
+    return Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', rawKey)))
+        .map(b => b.toString(16).padStart(2, '0'))
+        .join('');
+}
+
+async function decryptFile(payload, key) {
+    const bytes = new Uint8Array(payload);
+    const iv = bytes.slice(0, 12);
+    const ciphertext = bytes.slice(12);
+    return crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ciphertext);
+}
+
+function encodeKey(rawKey) {
+    return btoa(String.fromCharCode(...new Uint8Array(rawKey)))
+        .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+function decodeKey(base64url) {
+    const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
+    return Uint8Array.from(atob(base64), c => c.charCodeAt(0));
+}

Backend/src/main/resources/static/download.js

@@ -1,87 +1,69 @@
-(async function () {
 const fragment = location.hash.slice(1);
 if (!fragment) {
     showError('No decryption key found in URL.');
-        return;
+} else try {
-    }
-
-    try {
     setStatus('Deriving key\u2026');
 
-        // Decode base64url → raw key bytes
+    const rawKeyBytes = decodeKey(fragment);
-        const base64 = fragment.replace(/-/g, '+').replace(/_/g, '/');
+    const id = await hashKey(rawKeyBytes);
-        const rawKeyBytes = Uint8Array.from(atob(base64), c => c.charCodeAt(0));
 
-        // Import key
     const key = await crypto.subtle.importKey(
         'raw', rawKeyBytes, { name: 'AES-GCM' }, false, ['decrypt']
     );
 
-        // Derive hash → verify it matches the file ID in the URL
-        const hash = Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', rawKeyBytes)))
-            .map(b => b.toString(16).padStart(2, '0'))
-            .join('');
-
-        const pathId = location.pathname.split('/').pop();
-        if (hash !== pathId) {
-            showError('Invalid link — key does not match file.');
-            return;
-        }
-
     setStatus('Downloading\u2026');
-        const response = await fetch(location.pathname + '/data');
+    const response = await fetch('/download/' + id + '/data');
 
     if (response.status === 410) {
         showError('This file has expired or reached its download limit.');
-            return;
+    } else if (!response.ok) {
-        }
-        if (!response.ok) {
         showError(`Download failed (${response.status}).`);
-            return;
+    } else {
-        }
-
-        // Extract filename from Content-Disposition header
         const disposition = response.headers.get('Content-Disposition') || '';
         const filename = disposition.match(/filename="?([^"]+)"?/)?.[1] || 'download';
 
         setStatus('Decrypting\u2026');
-        const encrypted = new Uint8Array(await response.arrayBuffer());
+        const plaintext = await decryptFile(await response.arrayBuffer(), key);
-        const iv         = encrypted.slice(0, 12);
-        const ciphertext = encrypted.slice(12);
 
-        const plaintext = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ciphertext);
-
-        // Trigger browser download
         const url = URL.createObjectURL(new Blob([plaintext]));
         const a = document.createElement('a');
         a.href = url;
         a.download = filename;
+
+        htmx.swap(htmx.find('#download-state'), `
+            <div class="drop-zone-icon mb-3">&#x1F512;</div>
+            <div class="fw-medium mb-2">${filename}</div>
+            <button id="download-btn" class="btn btn-outline-success mt-2">Download</button>`,
+            { swapStyle: 'innerHTML' });
+
+        htmx.on(htmx.find('#download-btn'), 'click', () => {
             a.click();
             URL.revokeObjectURL(url);
-
             showSuccess(filename);
-
+        });
+    }
 } catch (err) {
     showError('Decryption failed: ' + err.message);
 }
-})();
 
 function setStatus(msg) {
-    const el = document.getElementById('download-status');
+    const el = htmx.find('#download-status');
     if (el) el.textContent = msg;
 }
 
 function showSuccess(filename) {
-    document.getElementById('download-state').innerHTML = `
+    htmx.swap(htmx.find('#download-state'), `
         <div class="drop-zone-icon mb-3">&#x2705;</div>
         <div class="fw-medium mb-1">${filename}</div>
         <div class="drop-zone-text mb-3">Your download has started.</div>
-        <a href="/" class="btn btn-link drop-zone-text text-decoration-none">Send a file</a>`;
+        <a href="/" class="btn btn-link drop-zone-text text-decoration-none">Send a file</a>`,
+        { swapStyle: 'innerHTML' });
 }
 
 function showError(msg) {
-    document.getElementById('download-state').innerHTML = `
+    htmx.swap(htmx.find('#download-state'), `
         <div class="drop-zone-icon mb-3">&#x26A0;</div>
         <div class="drop-zone-text mb-3">${msg}</div>
-        <a href="/" class="btn btn-link drop-zone-text text-decoration-none">Go home</a>`;
+        <a href="/" class="btn btn-link drop-zone-text text-decoration-none">Go home</a>`,
+        { swapStyle: 'innerHTML' });
 }

Backend/src/main/resources/static/upload.js

@@ -1,54 +1,50 @@
-const dropZone = document.getElementById('drop-zone');
+const dropZone = htmx.find('#drop-zone');
-const fileInput = document.getElementById('file-input');
+const fileInput = htmx.find('#file-input');
 const promptHtml = dropZone.innerHTML;
 
 let selectedFile = null;
 
-// ── File selection ────────────────────────────────────────────────────────────
+htmx.on(dropZone, 'click', () => {
-
-dropZone.addEventListener('click', () => {
     if (selectedFile === null) fileInput.click();
 });
 
-fileInput.addEventListener('change', e => {
+htmx.on(fileInput, 'change', e => {
     if (e.target.files[0]) onFileSelected(e.target.files[0]);
 });
 
-dropZone.addEventListener('dragover', e => {
+htmx.on(dropZone, 'dragover', e => {
     e.preventDefault();
-    dropZone.classList.add('dragover');
+    htmx.addClass(dropZone, 'dragover');
 });
 
-dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
+htmx.on(dropZone, 'dragleave', () => htmx.removeClass(dropZone, 'dragover'));
 
-dropZone.addEventListener('drop', e => {
+htmx.on(dropZone, 'drop', e => {
     e.preventDefault();
-    dropZone.classList.remove('dragover');
+    htmx.removeClass(dropZone, 'dragover');
     if (e.dataTransfer.files[0] && selectedFile === null) onFileSelected(e.dataTransfer.files[0]);
 });
 
 function onFileSelected(file) {
     selectedFile = file;
-    // Use htmx to fetch the options form — server renders max values from config
     htmx.ajax('GET', '/upload/options?name=' + encodeURIComponent(file.name), {
         target: '#drop-zone',
         swap: 'innerHTML'
     });
 }
 
-// ── Upload (called from onclick in server-rendered options form) ──────────────
-
 async function startUpload() {
-    const expiryDays = document.getElementById('expiry-days')?.value;
+    const expiryDays    = htmx.find('#expiry-days')?.value;
-    const downloadLimit = document.getElementById('download-limit')?.value;
+    const downloadLimit = htmx.find('#download-limit')?.value;
 
-    dropZone.innerHTML = `
+    htmx.swap(dropZone, `
         <div class="mb-3">
             <div class="spinner-border text-success" role="status">
                 <span class="visually-hidden">Loading\u2026</span>
             </div>
         </div>
-        <div class="drop-zone-text" id="upload-status">Encrypting\u2026</div>`;
+        <div class="drop-zone-text" id="upload-status">Encrypting\u2026</div>`,
+        { swapStyle: 'innerHTML' });
 
     try {
         const { payload, hash, base64urlKey } = await encryptFile(await selectedFile.arrayBuffer());
@@ -65,38 +61,33 @@ async function startUpload() {
         const response = await fetch('/upload', { method: 'POST', body: formData });
         if (!response.ok) throw new Error(`Server error ${response.status}`);
 
-        // Server returns HTML fragment; prepend origin and append key fragment client-side
+        htmx.swap(dropZone, await response.text(), { swapStyle: 'innerHTML' });
-        dropZone.innerHTML = await response.text();
         htmx.process(dropZone);
-        const shareLink = document.getElementById('share-link');
+        htmx.find('#share-link').value = window.location.origin + '/download#' + base64urlKey;
-        shareLink.value = window.location.origin + shareLink.value + '#' + base64urlKey;
 
     } catch (err) {
-        dropZone.innerHTML = `
+        htmx.swap(dropZone, `
             <div class="drop-zone-icon mb-3">&#x26A0;</div>
             <div class="drop-zone-text mb-3">${err.message}</div>
-            <button class="btn btn-link drop-zone-text text-decoration-none" onclick="resetUpload()">Try again</button>`;
+            <button class="btn btn-link drop-zone-text text-decoration-none" onclick="resetUpload()">Try again</button>`,
+            { swapStyle: 'innerHTML' });
     }
 }
 
 function setStatus(msg) {
-    const el = document.getElementById('upload-status');
+    const el = htmx.find('#upload-status');
     if (el) el.textContent = msg;
 }
 
-// ── Reset (called from onclick in server-rendered fragments) ──────────────────
-
 function resetUpload() {
     selectedFile = null;
     fileInput.value = '';
-    dropZone.innerHTML = promptHtml;
+    htmx.swap(dropZone, promptHtml, { swapStyle: 'innerHTML' });
 }
 
-// ── Copy link (called from onclick in result fragment) ────────────────────────
-
 async function copyLink() {
-    await navigator.clipboard.writeText(document.getElementById('share-link').value);
+    await navigator.clipboard.writeText(htmx.find('#share-link').value);
-    const btn = document.getElementById('copy-btn');
+    const btn = htmx.find('#copy-btn');
     btn.textContent = 'Copied!';
     setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
 }

Backend/src/main/resources/templates/download/page.html

@@ -3,10 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title th:text="${filename != null ? filename + ' — GTransfer' : 'GTransfer'}">GTransfer</title>
+    <title>GTransfer</title>
     <link rel="stylesheet" th:href="@{/webjars/bootstrap/dist/css/bootstrap.min.css}">
     <link rel="stylesheet" th:href="@{/style.css}">
-    <script th:src="@{/download.js}" defer></script>
+    <script th:src="@{/webjars/htmx.org/dist/htmx.min.js}" defer></script>
+    <script th:src="@{/crypto.js}" defer></script>
+    <script th:src="@{/download.js}" type="module"></script>
 </head>
 <body class="d-flex flex-column min-vh-100">
 
@@ -18,7 +20,6 @@
     <main class="flex-grow-1 d-flex align-items-center justify-content-center py-5 px-3">
         <div id="download-state" class="drop-zone text-center py-5 px-4" style="max-width: 520px; width: 100%;">
             <div class="drop-zone-icon mb-3">&#x1F512;</div>
-            <div class="fw-medium mb-2" th:if="${filename != null}" th:text="${filename}"></div>
 <div class="drop-zone-text" id="download-status">Preparing&hellip;</div>
         </div>
     </main>

Backend/src/main/resources/templates/upload/result.html

@@ -5,8 +5,7 @@
     <div class="drop-zone-icon mb-3">&#x2705;</div>
     <div class="drop-zone-text mb-3">Your file is ready to share</div>
     <div class="input-group mb-2">
-        <input type="text" id="share-link" class="form-control form-control-sm"
+        <input type="text" id="share-link" class="form-control form-control-sm" readonly>
-               th:value="@{/download/{id}(id=${id})}" readonly>
         <button id="copy-btn" class="btn btn-outline-success btn-sm" onclick="copyLink()">Copy</button>
     </div>
     <button class="btn btn-link drop-zone-text text-decoration-none small" onclick="resetUpload()">

README.md

@@ -0,0 +1,45 @@
+# GTransfer
+
+A self-hosted, end-to-end encrypted file transfer service. The server stores only ciphertext and never has access to encryption keys or plaintext.
+
+## How encryption works
+
+### Upload
+
+1. **Key generation** — the browser generates a random 256-bit AES-GCM key using the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API). The key never leaves the browser.
+
+2. **Encryption** — the file is encrypted with AES-GCM. A random 96-bit (12-byte) IV is generated for each upload. The IV is prepended to the ciphertext to produce the payload:
+   ```
+   payload = IV (12 bytes) || ciphertext
+   ```
+
+3. **File ID** — the server needs a way to identify the file without knowing the key. The client computes `SHA-256(rawKey)` and uses the hex digest as the file ID. This is a one-way operation — the server cannot reverse it to obtain the key.
+
+4. **Upload** — the encrypted payload and file ID are sent to the server. The server stores the ciphertext and records the file ID, name, expiry, and download limit in the database.
+
+5. **Share link** — the raw key is base64url-encoded and placed in the [URL fragment](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash):
+   ```
+   https://example.com/download#<base64url(rawKey)>
+   ```
+   Browsers never include the fragment in HTTP requests, so the key is never transmitted to the server.
+
+### Download
+
+1. **Key extraction** — the browser reads the key from the URL fragment and decodes it from base64url.
+
+2. **File lookup** — the client computes `SHA-256(rawKey)` to derive the file ID and fetches the encrypted payload from `/download/<id>/data`.
+
+3. **Decryption** — the IV is read from the first 12 bytes of the payload, and the remainder is decrypted with AES-GCM. AES-GCM is authenticated encryption, so any tampering with the ciphertext causes decryption to fail with an authentication error.
+
+4. **Download** — the plaintext is written to a `Blob` and the browser is prompted to save it.
+
+### Security properties
+
+| Property | Detail |
+|---|---|
+| Encryption | AES-256-GCM |
+| IV | 96-bit random, unique per upload |
+| Key derivation | None — key is randomly generated |
+| File ID | SHA-256(rawKey) — server cannot reverse to key |
+| Key transport | URL fragment — never sent to server |
+| Server access | Ciphertext, file metadata, SHA-256 of key only |