Update README

Update button styling and render additional elements on file page if authenticated
README: add Caddy reverse proxy example
2026-03-03 16:36:06 -08:00 · 2026-03-03 16:35:02 -08:00 · 2026-03-03 16:20:47 -08:00 · 2026-03-03 16:19:35 -08:00 · 2026-03-03 16:18:34 -08:00 · 2026-03-03 16:04:56 -08:00
25 changed files with 1832 additions and 8 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,11 @@
+PORT=3000
+HOST=0.0.0.0
+JWT_SECRET=change-me-to-a-long-random-secret
+JWT_EXPIRY=7d
+DB_PATH=./data/nanodrop.db
+UPLOAD_DIR=./data/uploads
+LOG_FILE=./data/nanodrop.log
+MAX_FILE_SIZE=104857600
+BASE_URL=http://localhost:3000
+COOKIE_SECURE=false
+TRUST_PROXY=false
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -21,7 +21,7 @@ Simple file-sharing platform. TypeScript + Fastify + SQLite.
 ## Code Quality

 - Review code after every change. Refactor for readability.
- Use TDD: write tests first, then implement.
+- Use strict red/green TDD: write the test first, confirm it FAILS (red), then implement until it passes (green).
 - Build and test after every change.
 - Break large functions into smaller ones, extract duplicate code.
 - Search for duplicated code in tests and extract into reusable helpers.
--- a/19
+++ b/19
@@ -0,0 +1,19 @@
+FROM node:22-alpine
+
+# Install native build tools for bcrypt
+RUN apk add --no-cache python3 make g++
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY tsconfig.json ./
+COPY src ./src
+COPY public ./public
+
+RUN mkdir -p /app/data/uploads
+
+EXPOSE 3000
+
+CMD ["node", "--import", "tsx", "src/index.ts"]
--- a/README.md
+++ b/README.md
@@ -0,0 +1,168 @@
+# Nanodrop
+
+Vibe coded alternative to Google Drive for sharing files
+
+- Server-rendered HTML, no client-side framework
+- SQLite database, files stored on disk
+- JWT authentication via httpOnly cookies
+- REST API alongside the web UI
+
+## Stack
+
+- **Runtime:** Node.js 22
+- **Framework:** Fastify
+- **Database:** SQLite (better-sqlite3)
+- **Language:** TypeScript (ESM, run directly via tsx)
+
+---
+
+## Quick start (local)
+
+```sh
+npm install
+JWT_SECRET=changeme npm run dev
+```
+
+Create a user first:
+
+```sh
+npm run register-user -- --username alice --password secret
+```
+
+Then open `http://localhost:3000`.
+
+---
+
+## Docker
+
+### Build and run
+
+```sh
+docker compose up -d
+```
+
+Requires a `.env` file (or environment variables) with at minimum:
+
+```env
+JWT_SECRET=your-secret-here
+```
+
+All data (database + uploads) is stored in the `nanodrop-data` Docker volume.
+
+### Register a user in Docker
+
+```sh
+docker compose run --rm register-user --username alice --password secret
+```
+
+### Environment variables
+
+| Variable | Default | Description |
+|---|---|---|
+| `JWT_SECRET` | *(required)* | Secret key for signing JWTs |
+| `JWT_EXPIRY` | `7d` | JWT token lifetime |
+| `PORT` | `3000` | Port to listen on |
+| `HOST` | `0.0.0.0` | Host to bind |
+| `BASE_URL` | `http://localhost:3000` | Public base URL (used in share links) |
+| `DB_PATH` | `./data/nanodrop.db` | SQLite database path |
+| `UPLOAD_DIR` | `./data/uploads` | Upload storage directory |
+| `LOG_FILE` | `./data/nanodrop.log` | Auth and access log path |
+| `MAX_FILE_SIZE` | `104857600` | Max upload size in bytes (100 MB) |
+| `COOKIE_SECURE` | `false` | Set `true` when serving over HTTPS |
+| `TRUST_PROXY` | `false` | Set `true` when behind a reverse proxy |
+
+### Reverse proxy
+
+Set `TRUST_PROXY=true` when running behind a reverse proxy so Nanodrop sees the real client IP in logs.
+
+**Caddy** (`Caddyfile`):
+
+```caddy
+files.example.com {
+    reverse_proxy localhost:3000
+
+    request_body {
+        max_size 110MB
+    }
+}
+```
+
+Caddy sets `X-Forwarded-For` and handles TLS automatically. Set `COOKIE_SECURE=true` since traffic to the app arrives over HTTPS.
+
+**nginx** (`sites-available/nanodrop`):
+
+```nginx
+server {
+    server_name files.example.com;
+
+    location / {
+        proxy_pass         http://127.0.0.1:3000;
+        proxy_set_header   Host              $host;
+        proxy_set_header   X-Real-IP         $remote_addr;
+        proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
+        proxy_set_header   X-Forwarded-Proto $scheme;
+        client_max_body_size 110M;
+    }
+}
+```
+
+---
+
+## Fail2ban
+
+Nanodrop logs failed login attempts to `LOG_FILE` (default `./data/nanodrop.log`) in this format:
+
+```
+[2026-03-03T12:00:00.000Z] AUTH_FAILURE ip=203.0.113.42 user-agent="curl/8.0" username="admin"
+```
+
+### 1. Create a filter
+
+`/etc/fail2ban/filter.d/nanodrop.conf`:
+
+```ini
+[Definition]
+failregex = ^.* AUTH_FAILURE ip=<HOST> .*$
+ignoreregex =
+```
+
+### 2. Create a jail
+
+`/etc/fail2ban/jail.d/nanodrop.conf`:
+
+```ini
+[nanodrop]
+enabled  = true
+filter   = nanodrop
+logpath  = /path/to/nanodrop.log
+maxretry = 5
+findtime = 60
+bantime  = 600
+```
+
+Adjust `logpath` to wherever your `LOG_FILE` is. With Docker, the log file lives inside the `nanodrop-data` volume — mount it to a host path or bind-mount a host directory instead of the named volume to make it accessible to fail2ban:
+
+```yaml
+# docker-compose.yml override
+volumes:
+  - /var/lib/nanodrop:/app/data
+```
+
+Then set `logpath = /var/lib/nanodrop/nanodrop.log`.
+
+### 3. Reload fail2ban
+
+```sh
+sudo fail2ban-client reload
+sudo fail2ban-client status nanodrop
+```
+
+---
+
+## Development
+
+```sh
+npm run dev      # start with hot reload via tsx
+npm test         # run all tests (vitest)
+npm run build    # type check (tsc --noEmit)
+```
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,33 @@
+x-env: &env
+  PORT: "${PORT:-3000}"
+  HOST: "${HOST:-0.0.0.0}"
+  JWT_SECRET: "${JWT_SECRET}"
+  JWT_EXPIRY: "${JWT_EXPIRY:-7d}"
+  DB_PATH: "${DB_PATH:-./data/nanodrop.db}"
+  UPLOAD_DIR: "${UPLOAD_DIR:-./data/uploads}"
+  LOG_FILE: "${LOG_FILE:-./data/nanodrop.log}"
+  MAX_FILE_SIZE: "${MAX_FILE_SIZE:-104857600}"
+  BASE_URL: "${BASE_URL:-http://localhost:3000}"
+  COOKIE_SECURE: "${COOKIE_SECURE:-false}"
+  TRUST_PROXY: "${TRUST_PROXY:-false}"
+
+services:
+  nanodrop:
+    build: .
+    ports:
+      - "${PORT:-3000}:3000"
+    environment: { <<: *env }
+    volumes:
+      - nanodrop-data:/app/data
+    restart: unless-stopped
+
+  register-user:
+    build: .
+    profiles: [tools]
+    entrypoint: ["node", "--import", "tsx", "src/cli/register-user.ts"]
+    environment: { <<: *env }
+    volumes:
+      - nanodrop-data:/app/data
+
+volumes:
+  nanodrop-data:
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
  "type": "module",
  "main": "dist/index.js",
  "scripts": {
-    "build": "tsc",
+    "build": "tsc --noEmit",
    "dev": "tsx src/index.ts",
    "test": "vitest run",
    "test:watch": "vitest",
--- a/public/style.css
+++ b/public/style.css
@@ -0,0 +1,418 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');
+
+/* ── Reset ──────────────────────────────────────────────── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ── Tokens ─────────────────────────────────────────────── */
+:root {
+  --black:   #000;
+  --white:   #fff;
+  --gray-50: #fafafa;
+  --gray-100:#f0f0f0;
+  --gray-200:#e0e0e0;
+  --gray-400:#999;
+  --gray-600:#555;
+  --red:     #c00;
+
+  --font: 'IBM Plex Mono', 'Courier New', monospace;
+  --border: 1px solid var(--black);
+  --radius: 0;
+}
+
+/* ── Base ───────────────────────────────────────────────── */
+html { font-size: 14px; }
+
+body {
+  font-family: var(--font);
+  background: var(--white);
+  color: var(--black);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: var(--black);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+a:hover { color: var(--gray-600); }
+
+/* ── Header ─────────────────────────────────────────────── */
+header {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  padding: 0 2rem;
+  height: 48px;
+  border-bottom: var(--border);
+  flex-shrink: 0;
+}
+
+.logo {
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-decoration: none;
+  color: var(--black);
+}
+.logo:hover { color: var(--gray-600); }
+
+nav {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin-left: auto;
+}
+
+nav a {
+  display: block;
+  padding: 0 1rem;
+  height: 48px;
+  line-height: 48px;
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  text-decoration: none;
+  color: var(--gray-600);
+  border-left: var(--border);
+}
+nav a:hover {
+  color: var(--black);
+  background: var(--gray-100);
+}
+
+nav form {
+  display: contents;
+}
+
+nav button[type="submit"] {
+  display: block;
+  padding: 0 1rem;
+  height: 48px;
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  background: none;
+  border: none;
+  border-left: var(--border);
+  color: var(--gray-600);
+  cursor: pointer;
+  font-family: var(--font);
+}
+nav button[type="submit"]:hover {
+  color: var(--black);
+  background: var(--gray-100);
+}
+
+/* ── Main ───────────────────────────────────────────────── */
+main {
+  flex: 1;
+  padding: 3rem 2rem;
+}
+
+/* ── Form Container ─────────────────────────────────────── */
+.form-container {
+  max-width: 400px;
+}
+
+.form-container h1 {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: var(--border);
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--gray-600);
+}
+
+input[type="text"],
+input[type="password"],
+input[type="file"] {
+  width: 100%;
+  padding: 0.6rem 0.75rem;
+  font-family: var(--font);
+  font-size: 13px;
+  background: var(--white);
+  border: var(--border);
+  color: var(--black);
+  outline: none;
+  transition: background 0.1s;
+}
+input[type="text"]:focus,
+input[type="password"]:focus {
+  background: var(--gray-50);
+  box-shadow: inset 0 0 0 2px var(--black);
+}
+
+input[type="file"] {
+  padding: 0.5rem;
+  cursor: pointer;
+}
+input[type="file"]::-webkit-file-upload-button {
+  font-family: var(--font);
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  background: var(--black);
+  color: var(--white);
+  border: none;
+  padding: 0.3rem 0.6rem;
+  cursor: pointer;
+  margin-right: 0.75rem;
+}
+input[type="file"]::file-selector-button {
+  font-family: var(--font);
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  background: var(--black);
+  color: var(--white);
+  border: none;
+  padding: 0.3rem 0.6rem;
+  cursor: pointer;
+  margin-right: 0.75rem;
+}
+
+/* ── Primary Button ─────────────────────────────────────── */
+button[type="submit"],
+.btn-primary {
+  display: inline-block;
+  padding: 0.6rem 1.25rem;
+  font-family: var(--font);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  background: var(--black);
+  color: var(--white);
+  border: var(--border);
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+  text-align: center;
+}
+button[type="submit"]:hover,
+.btn-primary:hover {
+  background: var(--gray-600);
+}
+
+/* ── Danger Button ──────────────────────────────────────── */
+button.danger {
+  display: inline-block;
+  padding: 0.3rem 0.6rem;
+  font-family: var(--font);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  background: none;
+  color: var(--red);
+  border: 1px solid var(--red);
+  cursor: pointer;
+}
+button.danger:hover {
+  background: var(--red);
+  color: var(--white);
+}
+
+/* ── Generic Link-button (.btn for file-view) ───────────── */
+a.btn {
+  display: inline-block;
+  padding: 0.6rem 1.25rem;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-decoration: none;
+  background: var(--black);
+  color: var(--white);
+  border: var(--border);
+  transition: background 0.1s;
+}
+a.btn:hover {
+  background: var(--gray-600);
+  color: var(--white);
+}
+
+/* ── Error ──────────────────────────────────────────────── */
+.error {
+  font-size: 12px;
+  color: var(--red);
+  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--red);
+  background: #fff5f5;
+  margin-bottom: 0.5rem;
+}
+
+/* ── Share Box ──────────────────────────────────────────── */
+.share-box {
+  display: flex;
+  gap: 0;
+  margin: 1.25rem 0 1rem;
+}
+
+.share-box input[readonly] {
+  flex: 1;
+  background: var(--gray-100);
+  color: var(--gray-600);
+  border-right: none;
+  cursor: text;
+}
+.share-box input[readonly]:focus {
+  box-shadow: none;
+  background: var(--gray-100);
+}
+
+/* Copy button — outline style, distinct from submit */
+.share-box button {
+  padding: 0.6rem 1rem;
+  font-family: var(--font);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  background: var(--white);
+  color: var(--black);
+  border: var(--border);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.1s;
+  flex-shrink: 0;
+}
+.share-box button:hover {
+  background: var(--gray-100);
+}
+
+/* ── Table ──────────────────────────────────────────────── */
+h1 {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  margin-bottom: 1.25rem;
+  padding-bottom: 1rem;
+  border-bottom: var(--border);
+}
+
+h1 + p {
+  margin-bottom: 1.5rem;
+  font-size: 12px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  border: var(--border);
+}
+
+th {
+  padding: 0.6rem 1rem;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  text-align: left;
+  background: var(--gray-100);
+  border-bottom: var(--border);
+  color: var(--gray-600);
+}
+
+td {
+  padding: 0.6rem 1rem;
+  font-size: 12px;
+  border-bottom: 1px solid var(--gray-200);
+  vertical-align: middle;
+}
+
+tr:last-child td { border-bottom: none; }
+
+tr:hover td { background: var(--gray-50); }
+
+td a {
+  font-weight: 500;
+}
+
+td:last-child {
+  width: 160px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+/* ── Copy Link Button ───────────────────────────────────── */
+button.copy-link {
+  display: inline-block;
+  padding: 0.3rem 0.6rem;
+  font-family: var(--font);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  background: var(--white);
+  color: var(--black);
+  border: var(--border);
+  cursor: pointer;
+  margin-right: 0.4rem;
+}
+button.copy-link:hover {
+  background: var(--gray-100);
+}
+
+/* ── File View ──────────────────────────────────────────── */
+.file-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 48px - 6rem);
+  gap: 1.5rem;
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.file-view h1 {
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--gray-600);
+  word-break: break-all;
+  border-bottom: none;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+.file-view img,
+.file-view video,
+.file-view audio {
+  width: 100%;
+  max-width: 720px;
+  border: var(--border);
+  display: block;
+}
+
+.file-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+/* ── Utility ─────────────────────────────────────────────── */
+.form-container > p {
+  font-size: 12px;
+  color: var(--gray-600);
+  margin-top: 1rem;
+  line-height: 1.7;
+}
+.form-container > p strong {
+  color: var(--black);
+  font-weight: 600;
+}
+.form-container > p a {
+  color: var(--black);
+}
--- a/src/cli/register-user.ts
+++ b/src/cli/register-user.ts
@@ -0,0 +1,33 @@
+import { parseArgs } from 'util';
+import { loadConfig } from '../config.ts';
+import { initDb } from '../db/schema.ts';
+import { createUser, getUserByUsername } from '../db/users.ts';
+import { hashPassword } from '../services/auth.ts';
+
+const { values } = parseArgs({
+  args: process.argv.slice(2),
+  options: {
+    username: { type: 'string' },
+    password: { type: 'string' },
+  },
+});
+
+const { username, password } = values;
+
+if (!username || !password) {
+  console.error('Usage: npm run register-user -- --username <user> --password <pass>');
+  process.exit(1);
+}
+
+const config = loadConfig();
+const db = initDb(config.dbPath);
+
+const existing = getUserByUsername(db, username);
+if (existing) {
+  console.error(`User "${username}" already exists.`);
+  process.exit(1);
+}
+
+const passwordHash = await hashPassword(password);
+createUser(db, { username, passwordHash });
+console.log(`User "${username}" created successfully.`);
--- a/src/index.ts
+++ b/src/index.ts
@@ -0,0 +1,20 @@
+import { mkdirSync } from 'fs';
+import { loadConfig } from './config.ts';
+import { initDb } from './db/schema.ts';
+import { createServer } from './server.ts';
+
+const config = loadConfig();
+
+mkdirSync(config.uploadDir, { recursive: true });
+
+const db = initDb(config.dbPath);
+const app = createServer({ config, db });
+
+try {
+  await app.listen({ port: config.port, host: config.host });
+  const displayHost = config.host === '0.0.0.0' ? 'localhost' : config.host;
+  console.log(`Nanodrop running on http://${displayHost}:${config.port}`);
+} catch (err) {
+  console.error(err);
+  process.exit(1);
+}
--- a/src/middleware/auth.ts
+++ b/src/middleware/auth.ts
@@ -0,0 +1,24 @@
+import type { FastifyRequest, FastifyReply } from 'fastify';
+
+export async function requireAuth(request: FastifyRequest, reply: FastifyReply): Promise<void> {
+  try {
+    await request.jwtVerify();
+  } catch {
+    // API routes get 401, page routes get redirect
+    const isApi = request.url.startsWith('/api/');
+    if (isApi) {
+      reply.status(401).send({ error: 'Unauthorized' });
+    } else {
+      reply.redirect('/');
+    }
+  }
+}
+
+export function tokenCookieOptions(secure: boolean): {
+  httpOnly: boolean;
+  sameSite: 'strict';
+  secure: boolean;
+  path: string;
+} {
+  return { httpOnly: true, sameSite: 'strict', secure, path: '/' };
+}
--- a/src/routes/api/v1/auth.ts
+++ b/src/routes/api/v1/auth.ts
@@ -0,0 +1,49 @@
+import type { FastifyPluginAsync } from 'fastify';
+import type Database from 'better-sqlite3';
+import type { Config } from '../../../config.ts';
+import type { Logger } from '../../../middleware/logging.ts';
+import { getUserByUsername } from '../../../db/users.ts';
+import { verifyPassword } from '../../../services/auth.ts';
+import { requireAuth, tokenCookieOptions } from '../../../middleware/auth.ts';
+
+interface Deps {
+  db: Database.Database;
+  config: Config;
+  logger: Logger;
+}
+
+interface LoginBody {
+  username: string;
+  password: string;
+}
+
+export const authApiRoutes: FastifyPluginAsync<{ deps: Deps }> = async (app, { deps }) => {
+  const { db, config, logger } = deps;
+
+  app.post<{ Body: LoginBody }>('/login', async (request, reply) => {
+    const { username, password } = request.body ?? {};
+    const ip = request.ip;
+    const userAgent = request.headers['user-agent'] ?? '';
+
+    if (!username || !password) {
+      return reply.status(400).send({ error: 'username and password are required' });
+    }
+
+    const user = getUserByUsername(db, username);
+    const valid = user ? await verifyPassword(password, user.password_hash) : false;
+
+    if (!user || !valid) {
+      await logger.authFailure({ ip, userAgent, username });
+      return reply.status(401).send({ error: 'Invalid credentials' });
+    }
+
+    await logger.authSuccess({ ip, userAgent, username });
+
+    const token = app.jwt.sign({ sub: user.id, username: user.username }, { expiresIn: config.jwtExpiry });
+    reply.setCookie('token', token, tokenCookieOptions(config.cookieSecure)).send({ ok: true });
+  });
+
+  app.post('/logout', { preHandler: requireAuth }, async (_request, reply) => {
+    reply.clearCookie('token', { path: '/' }).send({ ok: true });
+  });
+};
--- a/src/routes/api/v1/files.ts
+++ b/src/routes/api/v1/files.ts
@@ -0,0 +1,72 @@
+import type { FastifyPluginAsync } from 'fastify';
+import { extname } from 'path';
+import { nanoid } from 'nanoid';
+import type Database from 'better-sqlite3';
+import type { Config } from '../../../config.ts';
+import type { Logger } from '../../../middleware/logging.ts';
+import type { JwtPayload } from '../../../types.ts';
+import { createFile, getFilesByUserId, getFileById, deleteFile } from '../../../db/files.ts';
+import { saveFile, deleteStoredFile } from '../../../services/storage.ts';
+import { requireAuth } from '../../../middleware/auth.ts';
+
+interface Deps {
+  db: Database.Database;
+  config: Config;
+  logger: Logger;
+}
+
+export const filesApiRoutes: FastifyPluginAsync<{ deps: Deps }> = async (app, { deps }) => {
+  const { db, config } = deps;
+
+  app.get('/', { preHandler: requireAuth }, async (request, reply) => {
+    const { sub: userId } = request.user as JwtPayload;
+    const files = getFilesByUserId(db, userId);
+    reply.send({ files });
+  });
+
+  app.post('/', { preHandler: requireAuth }, async (request, reply) => {
+    const { sub: userId } = request.user as JwtPayload;
+    const data = await request.file();
+
+    if (!data) {
+      return reply.status(400).send({ error: 'No file uploaded' });
+    }
+
+    const fileBuffer = await data.toBuffer();
+    const id = nanoid();
+    const rawExt = extname(data.filename);
+    const ext = /^\.[a-zA-Z0-9]+$/.test(rawExt) ? rawExt : '';
+    const storedName = `${id}${ext}`;
+
+    await saveFile(config.uploadDir, storedName, fileBuffer);
+
+    const file = createFile(db, {
+      id,
+      userId,
+      originalName: data.filename,
+      mimeType: data.mimetype,
+      size: fileBuffer.length,
+      storedName,
+    });
+
+    reply.status(201).send({ file, url: `${config.baseUrl}/f/${id}` });
+  });
+
+  app.delete('/:id', { preHandler: requireAuth }, async (request, reply) => {
+    const { sub: userId } = request.user as JwtPayload;
+    const { id } = request.params as { id: string };
+
+    const file = getFileById(db, id);
+    if (!file) {
+      return reply.status(404).send({ error: 'File not found' });
+    }
+
+    const deleted = deleteFile(db, id, userId);
+    if (!deleted) {
+      return reply.status(403).send({ error: 'Forbidden' });
+    }
+
+    await deleteStoredFile(config.uploadDir, file.stored_name);
+    reply.send({ ok: true });
+  });
+};
--- a/src/routes/pages.ts
+++ b/src/routes/pages.ts
@@ -0,0 +1,166 @@
+import type { FastifyPluginAsync } from 'fastify';
+import { extname } from 'path';
+import { readFile } from 'fs/promises';
+import { nanoid } from 'nanoid';
+import type Database from 'better-sqlite3';
+import type { Config } from '../config.ts';
+import type { Logger } from '../middleware/logging.ts';
+import type { JwtPayload } from '../types.ts';
+import { getUserByUsername } from '../db/users.ts';
+import { createFile, getFileById, getFilesByUserId, deleteFile } from '../db/files.ts';
+import { verifyPassword } from '../services/auth.ts';
+import { saveFile, deleteStoredFile, getFilePath } from '../services/storage.ts';
+import { requireAuth, tokenCookieOptions } from '../middleware/auth.ts';
+import { loginPage } from '../views/login.ts';
+import { uploadPage, uploadResultPage } from '../views/upload.ts';
+import { fileListPage } from '../views/file-list.ts';
+import { fileViewPage } from '../views/file-view.ts';
+import { notFoundPage } from '../views/not-found.ts';
+
+interface Deps {
+  db: Database.Database;
+  config: Config;
+  logger: Logger;
+}
+
+export const pageRoutes: FastifyPluginAsync<{ deps: Deps }> = async (app, { deps }) => {
+  const { db, config, logger } = deps;
+
+  // GET / — login page or redirect if authed
+  app.get('/', async (request, reply) => {
+    try {
+      await request.jwtVerify();
+      return reply.redirect('/upload');
+    } catch {
+      return reply.type('text/html').send(loginPage());
+    }
+  });
+
+  // POST /login — form login
+  app.post<{ Body: { username?: string; password?: string } }>('/login', async (request, reply) => {
+    const { username = '', password = '' } = request.body ?? {};
+    const ip = request.ip;
+    const userAgent = request.headers['user-agent'] ?? '';
+
+    const user = getUserByUsername(db, username);
+    const valid = user ? await verifyPassword(password, user.password_hash) : false;
+
+    if (!user || !valid) {
+      await logger.authFailure({ ip, userAgent, username });
+      return reply.type('text/html').send(loginPage({ error: 'Invalid username or password' }));
+    }
+
+    await logger.authSuccess({ ip, userAgent, username });
+
+    const token = app.jwt.sign({ sub: user.id, username: user.username }, { expiresIn: config.jwtExpiry });
+    reply.setCookie('token', token, tokenCookieOptions(config.cookieSecure)).redirect('/upload');
+  });
+
+  // POST /logout
+  app.post('/logout', { preHandler: requireAuth }, async (_request, reply) => {
+    reply.clearCookie('token', { path: '/' }).redirect('/');
+  });
+
+  // GET /upload
+  app.get('/upload', { preHandler: requireAuth }, async (_request, reply) => {
+    reply.type('text/html').send(uploadPage());
+  });
+
+  // POST /upload
+  app.post('/upload', { preHandler: requireAuth }, async (request, reply) => {
+    const { sub: userId } = request.user as JwtPayload;
+
+    const data = await request.file();
+    if (!data) {
+      return reply.type('text/html').send(uploadPage({ error: 'No file selected' }));
+    }
+
+    const fileBuffer = await data.toBuffer();
+    const id = nanoid();
+    const rawExt = extname(data.filename);
+    const ext = /^\.[a-zA-Z0-9]+$/.test(rawExt) ? rawExt : '';
+    const storedName = `${id}${ext}`;
+
+    await saveFile(config.uploadDir, storedName, fileBuffer);
+
+    createFile(db, {
+      id,
+      userId,
+      originalName: data.filename,
+      mimeType: data.mimetype,
+      size: fileBuffer.length,
+      storedName,
+    });
+
+    const shareUrl = `${config.baseUrl}/f/${id}`;
+    reply.type('text/html').send(uploadResultPage(shareUrl, data.filename));
+  });
+
+  // GET /files
+  app.get('/files', { preHandler: requireAuth }, async (request, reply) => {
+    const { sub: userId } = request.user as JwtPayload;
+    const files = getFilesByUserId(db, userId);
+    reply.type('text/html').send(fileListPage(files, config.baseUrl));
+  });
+
+  // POST /files/:id/delete
+  app.post<{ Params: { id: string } }>('/files/:id/delete', { preHandler: requireAuth }, async (request, reply) => {
+    const { sub: userId } = request.user as JwtPayload;
+    const { id } = request.params;
+
+    const file = getFileById(db, id);
+    if (file) {
+      const deleted = deleteFile(db, id, userId);
+      if (deleted) {
+        await deleteStoredFile(config.uploadDir, file.stored_name);
+      }
+    }
+
+    reply.redirect('/files');
+  });
+
+  // GET /f/:id — public file view (owner-aware)
+  app.get<{ Params: { id: string } }>('/f/:id', async (request, reply) => {
+    const { id } = request.params;
+
+    let userId: number | null = null;
+    try {
+      await request.jwtVerify();
+      userId = (request.user as JwtPayload).sub;
+    } catch { /* not logged in — fine */ }
+
+    const file = getFileById(db, id);
+
+    if (!file) {
+      await logger.fileNotFound({ ip: request.ip, userAgent: request.headers['user-agent'] ?? '', fileId: id });
+      return reply.status(404).type('text/html').send(notFoundPage());
+    }
+
+    const isOwner = userId !== null && userId === file.user_id;
+    reply.type('text/html').send(fileViewPage(file, isOwner));
+  });
+
+  // GET /f/:id/raw — serve raw file
+  app.get<{ Params: { id: string } }>('/f/:id/raw', async (request, reply) => {
+    const { id } = request.params;
+    const file = getFileById(db, id);
+
+    if (!file) {
+      await logger.fileNotFound({ ip: request.ip, userAgent: request.headers['user-agent'] ?? '', fileId: id });
+      return reply.status(404).send({ error: 'Not found' });
+    }
+
+    const filePath = getFilePath(config.uploadDir, file.stored_name);
+    const data = await readFile(filePath);
+    const safeFilename = file.original_name.replace(/["\\\r\n]/g, '_');
+    reply
+      .header('Content-Type', file.mime_type)
+      .header('Content-Disposition', `inline; filename="${safeFilename}"`)
+      .send(data);
+  });
+
+  // 404 handler
+  app.setNotFoundHandler((_request, reply) => {
+    reply.status(404).type('text/html').send(notFoundPage());
+  });
+};
--- a/src/server.ts
+++ b/src/server.ts
@@ -0,0 +1,46 @@
+import Fastify from 'fastify';
+import fastifyCookie from '@fastify/cookie';
+import fastifyJwt from '@fastify/jwt';
+import fastifyMultipart from '@fastify/multipart';
+import fastifyFormbody from '@fastify/formbody';
+import fastifyStatic from '@fastify/static';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
+import type Database from 'better-sqlite3';
+import type { Config } from './config.ts';
+import { createLogger } from './middleware/logging.ts';
+import { authApiRoutes } from './routes/api/v1/auth.ts';
+import { filesApiRoutes } from './routes/api/v1/files.ts';
+import { pageRoutes } from './routes/pages.ts';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+interface ServerDeps {
+  config: Config;
+  db: Database.Database;
+}
+
+export function createServer({ config, db }: ServerDeps) {
+  const app = Fastify({ logger: false, trustProxy: config.trustProxy });
+  const logger = createLogger(config.logFile);
+
+  app.register(fastifyCookie);
+  app.register(fastifyJwt, {
+    secret: config.jwtSecret,
+    cookie: { cookieName: 'token', signed: false },
+  });
+  app.register(fastifyFormbody);
+  app.register(fastifyMultipart, { limits: { fileSize: config.maxFileSize } });
+  app.register(fastifyStatic, {
+    root: join(__dirname, '..', 'public'),
+    prefix: '/public/',
+  });
+
+  const deps = { db, config, logger };
+
+  app.register(authApiRoutes, { prefix: '/api/v1/auth', deps });
+  app.register(filesApiRoutes, { prefix: '/api/v1/files', deps });
+  app.register(pageRoutes, { prefix: '/', deps });
+
+  return app;
+}
--- a/src/views/file-list.ts
+++ b/src/views/file-list.ts
@@ -0,0 +1,42 @@
+import { layout, escHtml } from './layout.ts';
+import type { FileRow } from '../db/files.ts';
+
+export function fileListPage(files: FileRow[], baseUrl: string): string {
+  const rows = files.length === 0
+    ? '<tr><td colspan="5">No files yet. <a href="/upload">Upload one.</a></td></tr>'
+    : files.map((f) => {
+        const shareUrl = `${baseUrl}/f/${escHtml(f.id)}`;
+        return `
+        <tr>
+          <td><a href="/f/${escHtml(f.id)}">${escHtml(f.original_name)}</a></td>
+          <td>${escHtml(f.mime_type)}</td>
+          <td>${formatBytes(f.size)}</td>
+          <td>${escHtml(f.created_at)}</td>
+          <td>
+            <button class="copy-link" onclick="navigator.clipboard.writeText('${shareUrl}')">Copy link</button>
+            <form method="POST" action="/files/${escHtml(f.id)}/delete" style="display:inline">
+              <button type="submit" class="danger">Delete</button>
+            </form>
+          </td>
+        </tr>`;
+      }).join('');
+
+  return layout('My files', `
+    <h1>My files</h1>
+    <p><a href="/upload">Upload new file</a></p>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th><th>Type</th><th>Size</th><th>Uploaded</th><th></th>
+        </tr>
+      </thead>
+      <tbody>${rows}</tbody>
+    </table>
+  `, { authed: true });
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
--- a/src/views/file-view.ts
+++ b/src/views/file-view.ts
@@ -0,0 +1,38 @@
+import { layout, escHtml } from './layout.ts';
+import type { FileRow } from '../db/files.ts';
+
+export function fileViewPage(file: FileRow, isOwner: boolean): string {
+  const rawUrl = escHtml(`/f/${file.id}/raw`);
+  const safeName = escHtml(file.original_name);
+  const actions = `
+    <div class="file-actions">
+      <a href="${rawUrl}" download="${safeName}" class="btn">Download</a>
+      <a href="${rawUrl}" target="_blank" class="btn">Open</a>
+    </div>`;
+
+  const deleteForm = isOwner
+    ? `<form method="POST" action="/files/${escHtml(file.id)}/delete">
+      <button type="submit" class="danger">Delete</button>
+    </form>`
+    : '';
+
+  let media = '';
+  if (file.mime_type.startsWith('image/')) {
+    media = `<img src="${rawUrl}" alt="${safeName}">`;
+  } else if (file.mime_type.startsWith('video/')) {
+    media = `<video controls src="${rawUrl}" preload="metadata"></video>`;
+  } else if (file.mime_type.startsWith('audio/')) {
+    media = `<audio controls src="${rawUrl}" preload="metadata"></audio>`;
+  }
+
+  const layoutOpts = isOwner ? { authed: true } : { hideHeader: true };
+
+  return layout(file.original_name, `
+    <div class="file-view">
+      <h1>${safeName}</h1>
+      ${media}
+      ${actions}
+      ${deleteForm}
+    </div>
+  `, layoutOpts);
+}
--- a/src/views/layout.ts
+++ b/src/views/layout.ts
@@ -0,0 +1,44 @@
+export function layout(title: string, body: string, opts: { authed?: boolean; hideHeader?: boolean } = {}): string {
+  const { authed = false, hideHeader = false } = opts;
+  const nav = authed
+    ? `<nav>
+        <a href="/upload">Upload</a>
+        <a href="/files">My Files</a>
+        <form method="POST" action="/logout" style="display:inline">
+          <button type="submit">Logout</button>
+        </form>
+       </nav>`
+    : '';
+
+  const header = hideHeader
+    ? ''
+    : `  <header>
+    <a href="/" class="logo">Nanodrop</a>
+    ${nav}
+  </header>`;
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escHtml(title)} — Nanodrop</title>
+  <link rel="stylesheet" href="/public/style.css">
+</head>
+<body>
+${header}
+  <main>
+    ${body}
+  </main>
+</body>
+</html>`;
+}
+
+export function escHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
--- a/src/views/login.ts
+++ b/src/views/login.ts
@@ -0,0 +1,25 @@
+import { layout } from './layout.ts';
+
+export function loginPage(opts: { error?: string } = {}): string {
+  const errorHtml = opts.error
+    ? `<p class="error">${opts.error}</p>`
+    : '';
+
+  return layout('Login', `
+    <div class="form-container">
+      <h1>Sign in</h1>
+      ${errorHtml}
+      <form method="POST" action="/login">
+        <label>
+          Username
+          <input type="text" name="username" required autofocus>
+        </label>
+        <label>
+          Password
+          <input type="password" name="password" required>
+        </label>
+        <button type="submit">Login</button>
+      </form>
+    </div>
+  `);
+}
--- a/src/views/not-found.ts
+++ b/src/views/not-found.ts
@@ -0,0 +1,11 @@
+import { layout } from './layout.ts';
+
+export function notFoundPage(): string {
+  return layout('Not found', `
+    <div class="form-container">
+      <h1>404 — Not found</h1>
+      <p>The page or file you requested does not exist.</p>
+      <p><a href="/">Go home</a></p>
+    </div>
+  `);
+}
--- a/src/views/upload.ts
+++ b/src/views/upload.ts
@@ -0,0 +1,36 @@
+import { layout, escHtml } from './layout.ts';
+
+export function uploadPage(opts: { error?: string } = {}): string {
+  const errorHtml = opts.error ? `<p class="error">${opts.error}</p>` : '';
+
+  return layout('Upload', `
+    <div class="form-container">
+      <h1>Upload a file</h1>
+      ${errorHtml}
+      <form method="POST" action="/upload" enctype="multipart/form-data">
+        <label>
+          File
+          <input type="file" name="file" required>
+        </label>
+        <button type="submit">Upload</button>
+      </form>
+    </div>
+  `, { authed: true });
+}
+
+export function uploadResultPage(shareUrl: string, filename: string): string {
+  const safeUrl = escHtml(shareUrl);
+  const safeName = escHtml(filename);
+
+  return layout('File uploaded', `
+    <div class="form-container">
+      <h1>File uploaded</h1>
+      <p><strong>${safeName}</strong> is ready to share.</p>
+      <div class="share-box">
+        <input type="text" id="share-url" value="${safeUrl}" readonly>
+        <button onclick="navigator.clipboard.writeText(document.getElementById('share-url').value)">Copy link</button>
+      </div>
+      <p><a href="/upload">Upload another</a> &middot; <a href="/files">My files</a></p>
+    </div>
+  `, { authed: true });
+}
--- a/tests/helpers/setup.ts
+++ b/tests/helpers/setup.ts
@@ -0,0 +1,88 @@
+import { mkdtempSync, rmSync, mkdirSync } from 'fs';
+import { tmpdir } from 'os';
+import { join } from 'path';
+import { initDb } from '../../src/db/schema.ts';
+import { createServer } from '../../src/server.ts';
+import type { Config } from '../../src/config.ts';
+import type Database from 'better-sqlite3';
+import type { FastifyInstance } from 'fastify';
+
+export async function loginAs(app: FastifyInstance, username: string, password: string): Promise<string> {
+  const res = await app.inject({
+    method: 'POST',
+    url: '/api/v1/auth/login',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ username, password }),
+  });
+  const cookie = res.headers['set-cookie'] as string;
+  return cookie.split(';')[0].replace('token=', '');
+}
+
+export interface MultipartFile {
+  filename: string;
+  contentType: string;
+  data: Buffer;
+}
+
+export function buildMultipart(files: Record<string, MultipartFile>): { payload: Buffer; headers: Record<string, string> } {
+  const boundary = '----TestBoundary' + Math.random().toString(36).slice(2);
+  const parts: Buffer[] = [];
+
+  for (const [fieldname, file] of Object.entries(files)) {
+    parts.push(Buffer.from(
+      `--${boundary}\r\n` +
+      `Content-Disposition: form-data; name="${fieldname}"; filename="${file.filename}"\r\n` +
+      `Content-Type: ${file.contentType}\r\n\r\n`,
+    ));
+    parts.push(file.data);
+    parts.push(Buffer.from('\r\n'));
+  }
+  parts.push(Buffer.from(`--${boundary}--\r\n`));
+
+  return {
+    payload: Buffer.concat(parts),
+    headers: { 'content-type': `multipart/form-data; boundary=${boundary}` },
+  };
+}
+
+export interface TestContext {
+  app: FastifyInstance;
+  db: Database.Database;
+  uploadDir: string;
+  logFile: string;
+  cleanup: () => void;
+}
+
+export function createTestApp(): TestContext {
+  const tmpDir = mkdtempSync(join(tmpdir(), 'nanodrop-int-'));
+  const uploadDir = join(tmpDir, 'uploads');
+  const logFile = join(tmpDir, 'test.log');
+
+  mkdirSync(uploadDir, { recursive: true });
+
+  const db = initDb(':memory:');
+
+  const config: Config = {
+    port: 0,
+    host: '127.0.0.1',
+    jwtSecret: 'test-secret-key',
+    jwtExpiry: '1h',
+    dbPath: ':memory:',
+    uploadDir,
+    logFile,
+    maxFileSize: 10 * 1024 * 1024,
+    baseUrl: 'http://localhost:3000',
+    cookieSecure: false,
+    trustProxy: false,
+  };
+
+  const app = createServer({ config, db });
+
+  return {
+    app,
+    db,
+    uploadDir,
+    logFile,
+    cleanup: () => rmSync(tmpDir, { recursive: true, force: true }),
+  };
+}
--- a/tests/integration/auth-api.test.ts
+++ b/tests/integration/auth-api.test.ts
@@ -0,0 +1,101 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { createTestApp, type TestContext } from '../helpers/setup.ts';
+import { createUser } from '../../src/db/users.ts';
+import { hashPassword } from '../../src/services/auth.ts';
+
+describe('POST /api/v1/auth/login', () => {
+  let ctx: TestContext;
+
+  beforeEach(async () => {
+    ctx = createTestApp();
+    const hash = await hashPassword('secret');
+    createUser(ctx.db, { username: 'alice', passwordHash: hash });
+  });
+
+  afterEach(async () => {
+    await ctx.app.close();
+    ctx.cleanup();
+  });
+
+  it('returns 200 and sets cookie on valid credentials', async () => {
+    const res = await ctx.app.inject({
+      method: 'POST',
+      url: '/api/v1/auth/login',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ username: 'alice', password: 'secret' }),
+    });
+    expect(res.statusCode).toBe(200);
+    expect(res.json()).toEqual({ ok: true });
+    expect(res.headers['set-cookie']).toMatch(/token=/);
+  });
+
+  it('returns 401 on wrong password', async () => {
+    const res = await ctx.app.inject({
+      method: 'POST',
+      url: '/api/v1/auth/login',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ username: 'alice', password: 'wrong' }),
+    });
+    expect(res.statusCode).toBe(401);
+  });
+
+  it('returns 401 on unknown user', async () => {
+    const res = await ctx.app.inject({
+      method: 'POST',
+      url: '/api/v1/auth/login',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ username: 'ghost', password: 'x' }),
+    });
+    expect(res.statusCode).toBe(401);
+  });
+
+  it('returns 400 when fields are missing', async () => {
+    const res = await ctx.app.inject({
+      method: 'POST',
+      url: '/api/v1/auth/login',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ username: 'alice' }),
+    });
+    expect(res.statusCode).toBe(400);
+  });
+});
+
+describe('POST /api/v1/auth/logout', () => {
+  let ctx: TestContext;
+  let token: string;
+
+  beforeEach(async () => {
+    ctx = createTestApp();
+    const hash = await hashPassword('secret');
+    createUser(ctx.db, { username: 'alice', passwordHash: hash });
+
+    const res = await ctx.app.inject({
+      method: 'POST',
+      url: '/api/v1/auth/login',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ username: 'alice', password: 'secret' }),
+    });
+    const cookie = res.headers['set-cookie'] as string;
+    token = cookie.split(';')[0].replace('token=', '');
+  });
+
+  afterEach(async () => {
+    await ctx.app.close();
+    ctx.cleanup();
+  });
+
+  it('clears cookie on logout', async () => {
+    const res = await ctx.app.inject({
+      method: 'POST',
+      url: '/api/v1/auth/logout',
+      cookies: { token },
+    });
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['set-cookie']).toMatch(/token=;/);
+  });
+
+  it('returns 401 without cookie', async () => {
+    const res = await ctx.app.inject({ method: 'POST', url: '/api/v1/auth/logout' });
+    expect(res.statusCode).toBe(401);
+  });
+});
--- a/tests/integration/files-api.test.ts
+++ b/tests/integration/files-api.test.ts
@@ -0,0 +1,120 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { createTestApp, type TestContext, loginAs, buildMultipart } from '../helpers/setup.ts';
+import { createUser } from '../../src/db/users.ts';
+import { hashPassword } from '../../src/services/auth.ts';
+
+describe('GET /api/v1/files', () => {
+  let ctx: TestContext;
+  let token: string;
+
+  beforeEach(async () => {
+    ctx = createTestApp();
+    const hash = await hashPassword('secret');
+    createUser(ctx.db, { username: 'alice', passwordHash: hash });
+    token = await loginAs(ctx.app, 'alice', 'secret');
+  });
+
+  afterEach(async () => {
+    await ctx.app.close();
+    ctx.cleanup();
+  });
+
+  it('returns empty list for new user', async () => {
+    const res = await ctx.app.inject({
+      method: 'GET',
+      url: '/api/v1/files',
+      cookies: { token },
+    });
+    expect(res.statusCode).toBe(200);
+    expect(res.json().files).toEqual([]);
+  });
+
+  it('returns 401 without auth', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: '/api/v1/files' });
+    expect(res.statusCode).toBe(401);
+  });
+});
+
+describe('POST /api/v1/files', () => {
+  let ctx: TestContext;
+  let token: string;
+
+  beforeEach(async () => {
+    ctx = createTestApp();
+    const hash = await hashPassword('secret');
+    createUser(ctx.db, { username: 'alice', passwordHash: hash });
+    token = await loginAs(ctx.app, 'alice', 'secret');
+  });
+
+  afterEach(async () => {
+    await ctx.app.close();
+    ctx.cleanup();
+  });
+
+  it('uploads a file and returns url', async () => {
+    const res = await ctx.app.inject({
+      method: 'POST',
+      url: '/api/v1/files',
+      cookies: { token },
+      ...buildMultipart({ file: { filename: 'test.txt', contentType: 'text/plain', data: Buffer.from('hello') } }),
+    });
+    expect(res.statusCode).toBe(201);
+    const body = res.json();
+    expect(body.url).toMatch(/\/f\//);
+    expect(body.file.original_name).toBe('test.txt');
+  });
+
+  it('returns 401 without auth', async () => {
+    const res = await ctx.app.inject({ method: 'POST', url: '/api/v1/files' });
+    expect(res.statusCode).toBe(401);
+  });
+});
+
+describe('DELETE /api/v1/files/:id', () => {
+  let ctx: TestContext;
+  let token: string;
+  let fileId: string;
+
+  beforeEach(async () => {
+    ctx = createTestApp();
+    const hash = await hashPassword('secret');
+    createUser(ctx.db, { username: 'alice', passwordHash: hash });
+    token = await loginAs(ctx.app, 'alice', 'secret');
+
+    const uploadRes = await ctx.app.inject({
+      method: 'POST',
+      url: '/api/v1/files',
+      cookies: { token },
+      ...buildMultipart({ file: { filename: 'f.txt', contentType: 'text/plain', data: Buffer.from('data') } }),
+    });
+    fileId = uploadRes.json().file.id;
+  });
+
+  afterEach(async () => {
+    await ctx.app.close();
+    ctx.cleanup();
+  });
+
+  it('deletes an owned file', async () => {
+    const res = await ctx.app.inject({
+      method: 'DELETE',
+      url: `/api/v1/files/${fileId}`,
+      cookies: { token },
+    });
+    expect(res.statusCode).toBe(200);
+  });
+
+  it('returns 404 for non-existent file', async () => {
+    const res = await ctx.app.inject({
+      method: 'DELETE',
+      url: '/api/v1/files/doesnotexist',
+      cookies: { token },
+    });
+    expect(res.statusCode).toBe(404);
+  });
+
+  it('returns 401 without auth', async () => {
+    const res = await ctx.app.inject({ method: 'DELETE', url: `/api/v1/files/${fileId}` });
+    expect(res.statusCode).toBe(401);
+  });
+});
--- a/tests/integration/pages.test.ts
+++ b/tests/integration/pages.test.ts
@@ -0,0 +1,263 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { createTestApp, type TestContext, loginAs, buildMultipart } from '../helpers/setup.ts';
+import { createUser } from '../../src/db/users.ts';
+import { hashPassword } from '../../src/services/auth.ts';
+
+async function setup() {
+  const ctx = createTestApp();
+  const hash = await hashPassword('secret');
+  createUser(ctx.db, { username: 'alice', passwordHash: hash });
+  return ctx;
+}
+
+describe('GET /', () => {
+  let ctx: TestContext;
+
+  beforeEach(async () => { ctx = await setup(); });
+  afterEach(async () => { await ctx.app.close(); ctx.cleanup(); });
+
+  it('shows login page when unauthenticated', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: '/' });
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toMatch(/text\/html/);
+    expect(res.body).toContain('Sign in');
+  });
+
+  it('redirects to /upload when authenticated', async () => {
+    const token = await loginAs(ctx.app, 'alice', 'secret');
+    const res = await ctx.app.inject({ method: 'GET', url: '/', cookies: { token } });
+    expect(res.statusCode).toBe(302);
+    expect(res.headers['location']).toBe('/upload');
+  });
+});
+
+describe('POST /login (page)', () => {
+  let ctx: TestContext;
+
+  beforeEach(async () => { ctx = await setup(); });
+  afterEach(async () => { await ctx.app.close(); ctx.cleanup(); });
+
+  it('redirects to /upload on valid credentials', async () => {
+    const res = await ctx.app.inject({
+      method: 'POST',
+      url: '/login',
+      headers: { 'content-type': 'application/x-www-form-urlencoded' },
+      payload: 'username=alice&password=secret',
+    });
+    expect(res.statusCode).toBe(302);
+    expect(res.headers['location']).toBe('/upload');
+    expect(res.headers['set-cookie']).toMatch(/token=/);
+  });
+
+  it('shows login page with error on invalid credentials', async () => {
+    const res = await ctx.app.inject({
+      method: 'POST',
+      url: '/login',
+      headers: { 'content-type': 'application/x-www-form-urlencoded' },
+      payload: 'username=alice&password=wrong',
+    });
+    expect(res.statusCode).toBe(200);
+    expect(res.body).toContain('Invalid');
+  });
+});
+
+describe('GET /upload + POST /upload', () => {
+  let ctx: TestContext;
+  let token: string;
+
+  beforeEach(async () => {
+    ctx = await setup();
+    token = await loginAs(ctx.app, 'alice', 'secret');
+  });
+  afterEach(async () => { await ctx.app.close(); ctx.cleanup(); });
+
+  it('shows upload form', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: '/upload', cookies: { token } });
+    expect(res.statusCode).toBe(200);
+    expect(res.body).toContain('Upload');
+  });
+
+  it('redirects to / when not authenticated', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: '/upload' });
+    expect(res.statusCode).toBe(302);
+    expect(res.headers['location']).toBe('/');
+  });
+
+  it('shows result page after upload', async () => {
+    const res = await ctx.app.inject({
+      method: 'POST',
+      url: '/upload',
+      cookies: { token },
+      ...buildMultipart({ file: { filename: 'doc.txt', contentType: 'text/plain', data: Buffer.from('content') } }),
+    });
+    expect(res.statusCode).toBe(200);
+    expect(res.body).toContain('doc.txt');
+    expect(res.body).toContain('/f/');
+  });
+});
+
+describe('GET /f/:id and GET /f/:id/raw', () => {
+  let ctx: TestContext;
+  let fileId: string;
+
+  beforeEach(async () => {
+    ctx = await setup();
+    const token = await loginAs(ctx.app, 'alice', 'secret');
+    const uploadRes = await ctx.app.inject({
+      method: 'POST',
+      url: '/upload',
+      cookies: { token },
+      ...buildMultipart({ file: { filename: 'hello.txt', contentType: 'text/plain', data: Buffer.from('hello!') } }),
+    });
+    // Extract file id from response body
+    const match = uploadRes.body.match(/\/f\/([^/"]+)/);
+    fileId = match?.[1] ?? '';
+  });
+  afterEach(async () => { await ctx.app.close(); ctx.cleanup(); });
+
+  it('shows file view page', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: `/f/${fileId}` });
+    expect(res.statusCode).toBe(200);
+    expect(res.body).toContain('hello.txt');
+  });
+
+  it('serves raw file', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: `/f/${fileId}/raw` });
+    expect(res.statusCode).toBe(200);
+    expect(res.body).toBe('hello!');
+  });
+
+  it('returns 404 for unknown file', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: '/f/doesnotexist' });
+    expect(res.statusCode).toBe(404);
+  });
+});
+
+describe('GET /f/:id — image inline', () => {
+  let ctx: TestContext;
+  let fileId: string;
+
+  beforeEach(async () => {
+    ctx = await setup();
+    const token = await loginAs(ctx.app, 'alice', 'secret');
+    const uploadRes = await ctx.app.inject({
+      method: 'POST',
+      url: '/upload',
+      cookies: { token },
+      ...buildMultipart({ file: { filename: 'photo.png', contentType: 'image/png', data: Buffer.from('fakepng') } }),
+    });
+    const match = uploadRes.body.match(/\/f\/([^/"]+)/);
+    fileId = match?.[1] ?? '';
+  });
+  afterEach(async () => { await ctx.app.close(); ctx.cleanup(); });
+
+  it('shows <img> tag for image files', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: `/f/${fileId}` });
+    expect(res.statusCode).toBe(200);
+    expect(res.body).toContain('<img');
+  });
+});
+
+describe('GET /files — copy link', () => {
+  let ctx: TestContext;
+  let token: string;
+
+  beforeEach(async () => {
+    ctx = await setup();
+    token = await loginAs(ctx.app, 'alice', 'secret');
+    await ctx.app.inject({
+      method: 'POST',
+      url: '/upload',
+      cookies: { token },
+      ...buildMultipart({ file: { filename: 'test.txt', contentType: 'text/plain', data: Buffer.from('hi') } }),
+    });
+  });
+  afterEach(async () => { await ctx.app.close(); ctx.cleanup(); });
+
+  it('shows Copy link button for each file', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: '/files', cookies: { token } });
+    expect(res.statusCode).toBe(200);
+    expect(res.body).toContain('Copy link');
+  });
+});
+
+describe('GET /f/:id — owner-aware header', () => {
+  let ctx: TestContext;
+  let aliceToken: string;
+  let bobToken: string;
+  let fileId: string;
+
+  beforeEach(async () => {
+    ctx = createTestApp();
+    const hash = await hashPassword('secret');
+    createUser(ctx.db, { username: 'alice', passwordHash: hash });
+    createUser(ctx.db, { username: 'bob', passwordHash: hash });
+
+    aliceToken = await loginAs(ctx.app, 'alice', 'secret');
+    bobToken = await loginAs(ctx.app, 'bob', 'secret');
+
+    const uploadRes = await ctx.app.inject({
+      method: 'POST',
+      url: '/upload',
+      cookies: { token: aliceToken },
+      ...buildMultipart({ file: { filename: 'owned.txt', contentType: 'text/plain', data: Buffer.from('data') } }),
+    });
+    const match = uploadRes.body.match(/\/f\/([^/"]+)/);
+    fileId = match?.[1] ?? '';
+  });
+  afterEach(async () => { await ctx.app.close(); ctx.cleanup(); });
+
+  it('shows nav when owner views their file', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: `/f/${fileId}`, cookies: { token: aliceToken } });
+    expect(res.statusCode).toBe(200);
+    expect(res.body).toContain('My Files');
+  });
+
+  it('shows delete button when owner views', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: `/f/${fileId}`, cookies: { token: aliceToken } });
+    expect(res.statusCode).toBe(200);
+    expect(res.body).toContain('delete');
+  });
+
+  it('no header when non-owner views', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: `/f/${fileId}`, cookies: { token: bobToken } });
+    expect(res.statusCode).toBe(200);
+    expect(res.body).not.toContain('<header');
+  });
+
+  it('no header when unauthenticated', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: `/f/${fileId}` });
+    expect(res.statusCode).toBe(200);
+    expect(res.body).not.toContain('<header');
+  });
+});
+
+describe('POST /files/:id/delete', () => {
+  let ctx: TestContext;
+  let token: string;
+  let fileId: string;
+
+  beforeEach(async () => {
+    ctx = await setup();
+    token = await loginAs(ctx.app, 'alice', 'secret');
+    const uploadRes = await ctx.app.inject({
+      method: 'POST',
+      url: '/upload',
+      cookies: { token },
+      ...buildMultipart({ file: { filename: 'del.txt', contentType: 'text/plain', data: Buffer.from('bye') } }),
+    });
+    const match = uploadRes.body.match(/\/f\/([^/"]+)/);
+    fileId = match?.[1] ?? '';
+  });
+  afterEach(async () => { await ctx.app.close(); ctx.cleanup(); });
+
+  it('deletes and redirects to /files', async () => {
+    const res = await ctx.app.inject({
+      method: 'POST',
+      url: `/files/${fileId}/delete`,
+      cookies: { token },
+    });
+    expect(res.statusCode).toBe(302);
+    expect(res.headers['location']).toBe('/files');
+  });
+});
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,16 +3,13 @@
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
-    "outDir": "dist",
-    "rootDir": "src",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true
+    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "tests"]
Author	SHA1	Message	Date
Brendan Chen	8b27038793	Update README	2026-03-03 16:36:06 -08:00
Brendan Chen	191f5298d1	Update button styling and render additional elements on file page if authenticated	2026-03-03 16:35:02 -08:00
Brendan Chen	c017761bd1	README: add Caddy reverse proxy example Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-03 16:20:47 -08:00
Brendan Chen	c9e2d36e78	Add README with setup, Docker, and fail2ban instructions Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-03 16:19:35 -08:00
Brendan Chen	5a47ae938e	Fix four bugs and add logo/branding polish - docker-compose: add register-user service (profiles: [tools]) with YAML anchor to avoid env duplication - src/index.ts: show localhost instead of 0.0.0.0 in startup message - file-view: render <img> inline for image/* MIME types - file-list: add Copy link button per row (requires baseUrl param) - layout: add hideLogo option; file view page hides the logo - style.css: remove uppercase from .logo (Nanodrop not NANODROP), add button.copy-link styles, add .file-view img styles, widen last td Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-03 16:18:34 -08:00
Brendan Chen	b5ea21d44c	Use inline env vars in docker-compose, verify Docker build works - docker-compose.yml: replace env_file with explicit environment block so all variables are passable directly (JWT_SECRET required, rest have defaults) - Confirmed Docker image builds successfully Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-03 16:04:56 -08:00
Brendan Chen	751862a486	Redesign frontend: IBM Plex Mono, black/white editorial aesthetic - IBM Plex Mono font from Google Fonts for the monospace character - Pure black/white/gray palette — no colors except red for errors/danger - 1px solid black borders system throughout (no shadows, no rounding) - Header nav uses border-left separators with hover backgrounds - Primary button: solid black; copy button: white outline (visually distinct) - Share box: readonly input + copy button flush with no gap - Table: outer border + gray header row + subtle row hover - File view: centered with border around video/audio players - Danger button: red outline, fills on hover Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-03 16:04:18 -08:00
Brendan Chen	8d5e5c8a4d	Fix TypeScript config for .ts import extensions - allowImportingTsExtensions: true + noEmit: true in tsconfig - build script runs tsc --noEmit (type-check only) - Dockerfile simplified to single stage using tsx at runtime (no tsc compilation needed; tsx handles .ts imports natively) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-03 16:02:29 -08:00
Brendan Chen	6d8fb9105d	Code review fixes, Docker, and deployment config - Fix tsconfig: switch to ESNext/Bundler module resolution (tsx compatible) - Sanitize file extensions against path traversal (^.[a-zA-Z0-9]+$ only) - Sanitize Content-Disposition filename to prevent header injection - Extract tokenCookieOptions helper to eliminate duplication across auth handlers - Remove unused baseUrl param from fileListPage - Add Dockerfile (multi-stage build with alpine + native tools for bcrypt) - Add docker-compose.yml with named volume for data persistence - Add .env.example with all environment variables documented Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-03 15:58:39 -08:00
Brendan Chen	8fd1464b9d	Add server, routes, views, CLI, CSS, and integration tests - Server factory with Fastify plugins (JWT, cookie, multipart, formbody, static) - Auth middleware: requireAuth preHandler (401 for API, redirect for pages) - Auth API routes: POST /api/v1/auth/login, POST /api/v1/auth/logout - File API routes: GET/POST /api/v1/files, DELETE /api/v1/files/:id - Page routes: /, /login, /logout, /upload, /files, /files/:id/delete, /f/:id, /f/:id/raw - HTML views: layout, login, upload, file-list, file-view, not-found - CLI register-user script - public/style.css dark theme - Test helpers: createTestApp, loginAs, buildMultipart - Integration tests for auth API, file API, and page routes (51 tests passing) - Update CLAUDE.md with red/green TDD and commit instructions Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-03 15:55:14 -08:00