feat: add login flow, history page, session management, and nav guard

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

frontend/js/app.js

@@ -3,7 +3,7 @@
  * Orchestrates page transitions and wires up all feature modules.
  */
 
-import { submitJob, getJob } from './api.js';
+import { submitJob, getJob, requestMagicLink, verifyToken, listJobs } from './api.js';
 import { initAoiMap, activateDrawRect, activateDrawPolygon, geocode, loadGeoJSON, initResultsMap } from './map.js';
 import { initIndicators, getSelectedIds } from './indicators.js';
 import { renderResults } from './results.js';
@@ -11,6 +11,7 @@ import { renderResults } from './results.js';
 /* ── Application State ───────────────────────────────────── */
 
 const state = {
+  session: null,    // { email, token }
   aoi: null,        // { name, bbox }
   timeRange: null,  // { start, end }
   indicators: [],   // string[]
@@ -18,9 +19,30 @@ const state = {
   jobData: null,    // full job response
 };
 
+/* ── Session Persistence ────────────────────────────────── */
+
+const SESSION_KEY = 'aperture_session';
+
+function saveSession(email, token) {
+  state.session = { email, token };
+  sessionStorage.setItem(SESSION_KEY, JSON.stringify(state.session));
+}
+
+function loadSession() {
+  const raw = sessionStorage.getItem(SESSION_KEY);
+  if (raw) {
+    try { state.session = JSON.parse(raw); } catch { state.session = null; }
+  }
+}
+
+function clearSession() {
+  state.session = null;
+  sessionStorage.removeItem(SESSION_KEY);
+}
+
 /* ── Router ──────────────────────────────────────────────── */
 
-const PAGES = ['landing', 'define-area', 'indicators', 'confirm', 'status', 'results'];
+const PAGES = ['landing', 'login', 'define-area', 'indicators', 'confirm', 'status', 'results', 'history'];
 let _currentPage = null;
 let _pollTimer = null;
 
@@ -30,6 +52,12 @@ function navigate(pageId) {
     _pollTimer = null;
   }
 
+  // Auth guard — redirect to login if not authenticated
+  const AUTH_REQUIRED = ['define-area', 'indicators', 'confirm', 'status', 'results', 'history'];
+  if (AUTH_REQUIRED.includes(pageId) && !state.session) {
+    pageId = 'login';
+  }
+
   // Hide all pages
   document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
 
@@ -47,17 +75,84 @@ function navigate(pageId) {
 
 const pageSetup = {
   'landing': setupLanding,
+  'login': setupLogin,
   'define-area': setupDefineArea,
   'indicators': setupIndicators,
   'confirm': setupConfirm,
   'status': setupStatus,
   'results': setupResults,
+  'history': setupHistory,
 };
 
+/* ── Login Page ─────────────────────────────────────────── */
+
+let _loginInit = false;
+
+function setupLogin() {
+  if (_loginInit) return;
+  _loginInit = true;
+
+  const emailStep = document.getElementById('login-email-step');
+  const tokenStep = document.getElementById('login-token-step');
+  const emailInput = document.getElementById('login-email');
+  const tokenInput = document.getElementById('login-token');
+  const sendBtn = document.getElementById('login-send-btn');
+  const verifyBtn = document.getElementById('login-verify-btn');
+  const backLink = document.getElementById('login-back-link');
+  const heading = document.getElementById('login-token-heading');
+
+  let _loginEmail = '';
+
+  sendBtn.addEventListener('click', async () => {
+    const email = emailInput.value.trim();
+    if (!email) return;
+    sendBtn.disabled = true;
+    try {
+      const resp = await requestMagicLink(email);
+      _loginEmail = email;
+      emailStep.style.display = 'none';
+      tokenStep.style.display = 'block';
+      // Demo mode: auto-fill token
+      if (resp.demo_token) {
+        heading.textContent = 'Demo code';
+        tokenInput.value = resp.demo_token;
+      } else {
+        heading.textContent = 'Check your email';
+      }
+    } catch (err) {
+      showError(err.message || 'Failed to send magic link');
+    } finally {
+      sendBtn.disabled = false;
+    }
+  });
+
+  verifyBtn.addEventListener('click', async () => {
+    const token = tokenInput.value.trim();
+    if (!token) return;
+    verifyBtn.disabled = true;
+    try {
+      await verifyToken(_loginEmail, token);
+      saveSession(_loginEmail, token);
+      navigate('history');
+    } catch (err) {
+      showError(err.message || 'Invalid or expired code');
+    } finally {
+      verifyBtn.disabled = false;
+    }
+  });
+
+  backLink.addEventListener('click', (e) => {
+    e.preventDefault();
+    tokenStep.style.display = 'none';
+    emailStep.style.display = 'block';
+    tokenInput.value = '';
+  });
+}
+
 /* Landing ─────────────────────────────────────────────────── */
 
 function setupLanding() {
-  document.getElementById('cta-start').addEventListener('click', () => navigate('define-area'), { once: true });
+  document.getElementById('cta-start').addEventListener('click', () => navigate('login'), { once: true });
 }
 
 /* Define Area ─────────────────────────────────────────────── */
@@ -185,6 +280,13 @@ function setupConfirm() {
   document.getElementById('confirm-period-end').textContent   = state.timeRange?.end   || '—';
   document.getElementById('confirm-indicators').textContent   = state.indicators.length;
 
+  // Auto-fill email from session
+  const emailInput = document.getElementById('confirm-email');
+  if (state.session && state.session.email) {
+    emailInput.value = state.session.email;
+    emailInput.readOnly = true;
+  }
+
   const backBtn   = document.getElementById('confirm-back-btn');
   const submitBtn = document.getElementById('confirm-submit-btn');
 
@@ -304,6 +406,86 @@ function setupResults() {
   }
 }
 
+/* ── History Page ────────────────────────────────────────── */
+
+let _historyInit = false;
+
+function setupHistory() {
+  const listEl = document.getElementById('history-list');
+  const emptyEl = document.getElementById('history-empty');
+
+  // Wire up buttons (once)
+  if (!_historyInit) {
+    _historyInit = true;
+    document.getElementById('history-new-btn').addEventListener('click', () => navigate('define-area'));
+    document.getElementById('history-empty-cta').addEventListener('click', () => navigate('define-area'));
+    document.getElementById('history-signout').addEventListener('click', (e) => {
+      e.preventDefault();
+      clearSession();
+      navigate('landing');
+    });
+  }
+
+  // Fetch and render jobs
+  listJobs().then(jobs => {
+    listEl.innerHTML = '';
+    if (jobs.length === 0) {
+      listEl.style.display = 'none';
+      emptyEl.style.display = 'flex';
+      return;
+    }
+    listEl.style.display = 'grid';
+    emptyEl.style.display = 'none';
+    for (const job of jobs) {
+      const card = document.createElement('div');
+      card.className = 'history-card';
+      card.setAttribute('role', 'button');
+      card.setAttribute('tabindex', '0');
+      const dateStr = new Date(job.created_at).toLocaleDateString(undefined, {
+        year: 'numeric', month: 'short', day: 'numeric',
+      });
+      card.innerHTML = `
+        <div class="history-card-name">${_esc(job.aoi_name || 'Untitled')}</div>
+        <div class="history-card-meta">
+          <span class="history-card-date">${_esc(dateStr)}</span>
+          <span><span class="badge badge-${job.status}">${_esc(job.status)}</span></span>
+        </div>
+        <div class="history-card-indicators">${job.indicator_count} indicator${job.indicator_count !== 1 ? 's' : ''}</div>
+      `;
+      card.addEventListener('click', () => {
+        state.jobId = job.id;
+        navigate(job.status === 'complete' ? 'results' : 'status');
+      });
+      card.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); card.click(); }
+      });
+      listEl.appendChild(card);
+    }
+  }).catch(err => {
+    showError('Failed to load analyses');
+  });
+}
+
+/* ── Global Topbar Wiring ───────────────────────────────── */
+
+function wireTopbarLinks() {
+  document.querySelectorAll('.nav-my-analyses').forEach(link => {
+    link.addEventListener('click', (e) => { e.preventDefault(); navigate('history'); });
+  });
+  document.querySelectorAll('.nav-signout').forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      clearSession();
+      navigate('landing');
+    });
+  });
+  // Results page "New analysis" button
+  const resultsNewBtn = document.getElementById('results-new-btn');
+  if (resultsNewBtn) {
+    resultsNewBtn.addEventListener('click', () => navigate('define-area'));
+  }
+}
+
 /* ── Steps Indicator ─────────────────────────────────────── */
 
 const STEP_PAGES = ['define-area', 'indicators', 'confirm'];
@@ -361,5 +543,7 @@ function _capFirst(s) {
 /* ── Bootstrap ───────────────────────────────────────────── */
 
 document.addEventListener('DOMContentLoaded', () => {
+  loadSession();
+  wireTopbarLinks();
   navigate('landing');
 });