feat: add web UI for managing products

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013gwc3aCiyQxmCWQke8RvEz
2026-09-05 15:17:42 +02:00
parent 3b0e824c5b
commit f73ea41a6c
3 changed files with 177 additions and 0 deletions
@@ -0,0 +1,43 @@
+const express = require('express');
+const basicAuth = require('express-basic-auth');
+const { renderIndex } = require('./views');
+
+function createApp(deps) {
+  const {
+    listProducts, addProduct, deleteProduct,
+    checkAllProducts, authUser, authPass,
+  } = deps;
+
+  const app = express();
+  app.use(express.urlencoded({ extended: false }));
+  app.use(basicAuth({ users: { [authUser]: authPass }, challenge: true }));
+
+  app.get('/', (req, res) => {
+    const products = listProducts();
+    const message = req.query.checked ? 'Controle uitgevoerd.' : undefined;
+    res.send(renderIndex({ products, message }));
+  });
+
+  app.post('/products', (req, res) => {
+    const { name, url } = req.body;
+    if (name && url) {
+      addProduct({ name, url });
+    }
+    res.redirect('/');
+  });
+
+  app.post('/products/:id/delete', (req, res) => {
+    deleteProduct(Number(req.params.id));
+    res.redirect('/');
+  });
+
+  app.post('/check-now', async (req, res) => {
+    const products = listProducts();
+    await checkAllProducts(products);
+    res.redirect('/?checked=1');
+  });
+
+  return app;
+}
+
+module.exports = { createApp };
@@ -0,0 +1,63 @@
+function escapeHtml(str) {
+  return String(str).replace(/[&<>"']/g, (c) => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+  }[c]));
+}
+
+function formatPrice(price) {
+  return price == null ? '—' : `€${Number(price).toFixed(2).replace('.', ',')}`;
+}
+
+function renderProductRow(product) {
+  return `
+    <tr>
+      <td>${escapeHtml(product.name)}</td>
+      <td><a href="${escapeHtml(product.url)}" target="_blank" rel="noopener">bekijken</a></td>
+      <td>${formatPrice(product.last_price)}</td>
+      <td>${product.last_checked_at ? escapeHtml(product.last_checked_at) : '—'}</td>
+      <td>${escapeHtml(product.last_check_status || '—')}</td>
+      <td>
+        <form method="post" action="/products/${product.id}/delete" onsubmit="return confirm('Product verwijderen?');">
+          <button type="submit">Verwijder</button>
+        </form>
+      </td>
+    </tr>`;
+}
+
+function renderIndex({ products, message }) {
+  return `<!doctype html>
+<html lang="nl">
+<head>
+  <meta charset="utf-8">
+  <title>Korting — prijstracker</title>
+  <style>
+    body { font-family: system-ui, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
+    table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
+    th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid #ddd; }
+    .message { background: #eef; padding: 0.5rem 1rem; border-radius: 4px; }
+  </style>
+</head>
+<body>
+  <h1>Korting — prijstracker</h1>
+  ${message ? `<p class="message">${escapeHtml(message)}</p>` : ''}
+  <form method="post" action="/products">
+    <input name="name" placeholder="Naam" required>
+    <input name="url" type="url" placeholder="https://..." required>
+    <button type="submit">Toevoegen</button>
+  </form>
+  <form method="post" action="/check-now">
+    <button type="submit">Nu controleren</button>
+  </form>
+  <table>
+    <thead>
+      <tr><th>Naam</th><th>URL</th><th>Prijs</th><th>Laatst gecontroleerd</th><th>Status</th><th></th></tr>
+    </thead>
+    <tbody>
+      ${products.map(renderProductRow).join('')}
+    </tbody>
+  </table>
+</body>
+</html>`;
+}
+
+module.exports = { renderIndex, escapeHtml, formatPrice };
@@ -0,0 +1,71 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const request = require('supertest');
+const { createApp } = require('../src/app');
+
+function makeDeps(overrides = {}) {
+  let products = [];
+  let nextId = 1;
+  return {
+    listProducts: () => products,
+    addProduct: ({ name, url }) => {
+      const product = { id: nextId++, name, url, last_price: null, last_checked_at: null, last_check_status: null };
+      products.push(product);
+      return product;
+    },
+    deleteProduct: (id) => { products = products.filter((p) => p.id !== id); },
+    checkAllProducts: async () => [],
+    authUser: 'admin',
+    authPass: 'secret',
+    ...overrides,
+  };
+}
+
+test('rejects requests without basic auth credentials', async () => {
+  const app = createApp(makeDeps());
+  const res = await request(app).get('/');
+  assert.equal(res.status, 401);
+});
+
+test('lists products for authenticated requests', async () => {
+  const deps = makeDeps();
+  deps.addProduct({ name: 'Voorbeeld', url: 'https://example.com' });
+  const app = createApp(deps);
+  const res = await request(app).get('/').auth('admin', 'secret');
+  assert.equal(res.status, 200);
+  assert.match(res.text, /Voorbeeld/);
+});
+
+test('adding a product redirects to the list', async () => {
+  const deps = makeDeps();
+  const app = createApp(deps);
+  const res = await request(app)
+    .post('/products')
+    .auth('admin', 'secret')
+    .type('form')
+    .send({ name: 'Nieuw product', url: 'https://shop.example/p' });
+  assert.equal(res.status, 302);
+  assert.equal(res.headers.location, '/');
+  const list = await request(app).get('/').auth('admin', 'secret');
+  assert.match(list.text, /Nieuw product/);
+});
+
+test('deleting a product removes it from the list', async () => {
+  const deps = makeDeps();
+  const product = deps.addProduct({ name: 'Weg ermee', url: 'https://shop.example/p2' });
+  const app = createApp(deps);
+  const res = await request(app).post(`/products/${product.id}/delete`).auth('admin', 'secret');
+  assert.equal(res.status, 302);
+  const list = await request(app).get('/').auth('admin', 'secret');
+  assert.doesNotMatch(list.text, /Weg ermee/);
+});
+
+test('check-now triggers checkAllProducts and redirects with confirmation', async () => {
+  let called = false;
+  const deps = makeDeps({ checkAllProducts: async () => { called = true; return []; } });
+  const app = createApp(deps);
+  const res = await request(app).post('/check-now').auth('admin', 'secret');
+  assert.equal(res.status, 302);
+  assert.equal(res.headers.location, '/?checked=1');
+  assert.equal(called, true);
+});