Add contract e-signature step with PDF viewer and canvas pad (issue #6)

Frontend (step 5):
- PDF.js 3.11.174 from CDN renders the contract inline in a scrollable viewer
- Next button logic stays unlocked; signature pad is visually locked (greyed +
  pointer-events:none) until user scrolls to the bottom of the contract
- HTML5 canvas signature pad with mouse and touch support; Clear button resets
- Typed full name field required to confirm identity
- Fallback agreement text renders if /api/contracts/template returns 404,
  auto-marks as scrolled — photographer adds PDF later with no code change

Backend:
- GET /api/contracts/template — serves api/contracts/model-release.pdf
- POST /api/bookings/:id/sign — stamps signature image + name/date/booking ID
  onto the PDF via pdf-lib, saves to api/signed-contracts/<id>.pdf, updates
  contract_signed_at and contract_pdf_path in the bookings table, fires n8n
  webhook; gracefully skips PDF stamping if template is missing
- submitBooking() now calls POST /api/bookings then POST /api/bookings/:id/sign
  sequentially before showing the success screen

Closes #6

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

api/server.js

@@ -1,11 +1,16 @@
 require('dotenv').config();
 const express = require('express');
 const cors = require('cors');
+const fs = require('fs');
+const path = require('path');
 const db = require('./db');
 
 const app = express();
 const PORT = process.env.PORT || 3001;
 
+const CONTRACTS_DIR = path.join(__dirname, 'contracts');
+const SIGNED_DIR = path.join(__dirname, 'signed-contracts');
+
 app.use(cors({ origin: process.env.CORS_ORIGIN || '*', credentials: true }));
 app.use(express.json({ limit: '10mb' }));
 
@@ -13,6 +18,17 @@ app.get('/api/health', (req, res) => {
   res.json({ ok: true });
 });
 
+// Serve the contract template PDF to the frontend PDF.js viewer
+app.get('/api/contracts/template', (req, res) => {
+  const contractPath = path.join(CONTRACTS_DIR, 'model-release.pdf');
+  if (!fs.existsSync(contractPath)) {
+    return res.status(404).json({ error: 'Contract template not available' });
+  }
+  res.setHeader('Content-Type', 'application/pdf');
+  res.setHeader('Cache-Control', 'no-store');
+  res.sendFile(contractPath);
+});
+
 app.post('/api/bookings', (req, res) => {
   const {
     client_name, client_email, client_phone, client_sub,
@@ -32,4 +48,78 @@ app.post('/api/bookings', (req, res) => {
   res.status(201).json({ id: result.lastInsertRowid });
 });
 
+// Stamp the signature onto the contract PDF and record it
+app.post('/api/bookings/:id/sign', async (req, res) => {
+  const id = parseInt(req.params.id, 10);
+  const { signature_png, full_name } = req.body;
+
+  if (!signature_png || !full_name) {
+    return res.status(400).json({ error: 'signature_png and full_name are required' });
+  }
+
+  const booking = db.prepare('SELECT * FROM bookings WHERE id = ?').get(id);
+  if (!booking) return res.status(404).json({ error: 'Booking not found' });
+
+  const contractTemplate = path.join(CONTRACTS_DIR, 'model-release.pdf');
+  let pdfPath = null;
+
+  if (fs.existsSync(contractTemplate)) {
+    try {
+      const { PDFDocument, rgb, StandardFonts } = require('pdf-lib');
+
+      const pdfBytes = fs.readFileSync(contractTemplate);
+      const pdfDoc = await PDFDocument.load(pdfBytes);
+      const pages = pdfDoc.getPages();
+
+      const sigPageIndex = Math.max(0, parseInt(process.env.CONTRACT_SIG_PAGE || '1', 10) - 1);
+      const sigX = parseFloat(process.env.CONTRACT_SIG_X || '100');
+      const sigY = parseFloat(process.env.CONTRACT_SIG_Y || '100');
+      const page = pages[Math.min(sigPageIndex, pages.length - 1)];
+
+      // Embed the signature image
+      const sigBase64 = signature_png.replace(/^data:image\/png;base64,/, '');
+      const sigImage = await pdfDoc.embedPng(Buffer.from(sigBase64, 'base64'));
+      const imgDims = sigImage.scaleToFit(200, 60);
+      page.drawImage(sigImage, { x: sigX, y: sigY, width: imgDims.width, height: imgDims.height });
+
+      // Print name, date, and booking ID below signature
+      const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
+      const dateStr = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+      page.drawText(`${full_name}  ·  ${dateStr}  ·  Booking #${id}`, {
+        x: sigX,
+        y: sigY - 14,
+        size: 9,
+        font,
+        color: rgb(0.2, 0.2, 0.2),
+      });
+
+      fs.mkdirSync(SIGNED_DIR, { recursive: true });
+      const outPath = path.join(SIGNED_DIR, `${id}.pdf`);
+      fs.writeFileSync(outPath, await pdfDoc.save());
+      pdfPath = `signed-contracts/${id}.pdf`;
+    } catch (err) {
+      console.error('PDF stamping failed:', err.message);
+      // Non-fatal — still record the agreement
+    }
+  }
+
+  const now = new Date().toISOString();
+  db.prepare(`
+    UPDATE bookings SET contract_signed_at = ?, contract_pdf_path = ? WHERE id = ?
+  `).run(now, pdfPath, id);
+
+  // Fire n8n webhook asynchronously if configured
+  const webhookUrl = process.env.N8N_WEBHOOK_URL;
+  if (webhookUrl) {
+    const record = db.prepare('SELECT * FROM bookings WHERE id = ?').get(id);
+    fetch(webhookUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ event: 'contract_signed', booking: record }),
+    }).catch(e => console.error('n8n webhook error:', e.message));
+  }
+
+  res.json({ ok: true, signed_at: now, pdf_path: pdfPath });
+});
+
 app.listen(PORT, () => console.log(`API listening on port ${PORT}`));