rms-devremote 3.0.0

package/src/setup-server/public/setup.js

@@ -0,0 +1,687 @@
+/* ============================================================
+   RMS DevRemote — Setup Wizard Client
+   ============================================================ */
+
+// ---------------------------------------------------------------------------
+// State
+// ---------------------------------------------------------------------------
+const state = {
+  currentStep: 0,
+  terminalDomain: '',
+  notifyDomain: '',
+  tunnelToken: '',
+  email: '',
+  ttydPassword: '',
+  pin: '',
+  ntfyTopic: '',
+  ntfyPassword: '',
+  notifyDomainResult: '',
+  prereqsOk: false,
+  setupOk: false,
+};
+
+const TOTAL_STEPS = 9;
+
+// ---------------------------------------------------------------------------
+// WebSocket
+// ---------------------------------------------------------------------------
+let ws = null;
+let wsReady = false;
+
+function connectWS() {
+  ws = new WebSocket('ws://localhost:3456');
+  ws.addEventListener('open', () => { wsReady = true; });
+  ws.addEventListener('message', (ev) => {
+    try {
+      const msg = JSON.parse(ev.data);
+      handleWsMessage(msg);
+    } catch { /* ignore */ }
+  });
+  ws.addEventListener('close', () => {
+    wsReady = false;
+    setTimeout(connectWS, 2000);
+  });
+  ws.addEventListener('error', () => { ws.close(); });
+}
+
+function handleWsMessage(msg) {
+  if (msg.type === 'status') {
+    appendLog(msg.data.message, 'normal');
+    advanceProgress();
+  } else if (msg.type === 'complete') {
+    appendLog('Configuration terminee !', 'ok');
+    setProgress(100);
+    setTimeout(() => goToStep(state.currentStep + 1), 800);
+  } else if (msg.type === 'error') {
+    appendLog('Erreur: ' + (msg.data.message || 'inconnue'), 'err');
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Progress helpers (step 5)
+// ---------------------------------------------------------------------------
+let progressValue = 0;
+let progressIdx = 0;
+const PROGRESS_STEPS_COUNT = 3;
+
+function resetProgress() {
+  progressValue = 0;
+  progressIdx = 0;
+  setProgress(0);
+  const logEl = document.getElementById('progress-log');
+  if (logEl) logEl.textContent = '';
+}
+
+function advanceProgress() {
+  progressIdx++;
+  const pct = Math.min(Math.round((progressIdx / PROGRESS_STEPS_COUNT) * 90), 90);
+  setProgress(pct);
+}
+
+function setProgress(pct) {
+  progressValue = pct;
+  const fill = document.getElementById('progress-fill');
+  if (fill) fill.style.width = pct + '%';
+}
+
+function appendLog(text, cls) {
+  const logEl = document.getElementById('progress-log');
+  if (!logEl) return;
+  const line = document.createElement('span');
+  line.className = 'log-line' + (cls && cls !== 'normal' ? ' ' + cls : '');
+  line.textContent = '> ' + text;
+  logEl.appendChild(line);
+  logEl.appendChild(document.createTextNode('\n'));
+  logEl.scrollTop = logEl.scrollHeight;
+}
+
+// ---------------------------------------------------------------------------
+// Clipboard
+// ---------------------------------------------------------------------------
+function copyToClipboard(text, btnEl) {
+  navigator.clipboard.writeText(text).then(() => {
+    const original = btnEl.textContent;
+    btnEl.textContent = 'Copie !';
+    btnEl.disabled = true;
+    setTimeout(() => {
+      btnEl.textContent = original;
+      btnEl.disabled = false;
+    }, 1500);
+  }).catch(() => {
+    alert('Impossible de copier. Copiez manuellement: ' + text);
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Password generator
+// ---------------------------------------------------------------------------
+function generatePassword(length) {
+  const len = length || 16;
+  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$';
+  let pwd = '';
+  const arr = new Uint8Array(len);
+  crypto.getRandomValues(arr);
+  arr.forEach(function(b) { pwd += chars[b % chars.length]; });
+  return pwd;
+}
+
+// ---------------------------------------------------------------------------
+// Step navigation
+// ---------------------------------------------------------------------------
+function goToStep(n) {
+  if (n < 0 || n >= TOTAL_STEPS) return;
+  state.currentStep = n;
+  renderStep(n);
+  updateStepIndicator(n);
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+function nextStep() { goToStep(state.currentStep + 1); }
+function prevStep() { goToStep(state.currentStep - 1); }
+
+// ---------------------------------------------------------------------------
+// Step indicator
+// ---------------------------------------------------------------------------
+function updateStepIndicator(active) {
+  const dots = document.querySelectorAll('.step-dot');
+  const lines = document.querySelectorAll('.step-line');
+  dots.forEach(function(dot, i) {
+    dot.classList.remove('done', 'active');
+    if (i < active) dot.classList.add('done');
+    else if (i === active) dot.classList.add('active');
+  });
+  lines.forEach(function(line, i) {
+    line.classList.remove('done');
+    if (i < active) line.classList.add('done');
+  });
+}
+
+// ---------------------------------------------------------------------------
+// DOM helpers (safe, no innerHTML with user data)
+// ---------------------------------------------------------------------------
+function el(tag, opts) {
+  const e = document.createElement(tag);
+  if (opts) {
+    if (opts.className) e.className = opts.className;
+    if (opts.id) e.id = opts.id;
+    if (opts.textContent !== undefined) e.textContent = opts.textContent;
+    if (opts.type) e.type = opts.type;
+    if (opts.placeholder) e.placeholder = opts.placeholder;
+    if (opts.value !== undefined) e.value = opts.value;
+    if (opts.maxlength) e.maxLength = opts.maxlength;
+    if (opts.inputmode) e.inputMode = opts.inputmode;
+    if (opts.autocomplete) e.autocomplete = opts.autocomplete;
+    if (opts.disabled) e.disabled = true;
+    if (opts.href) e.href = opts.href;
+    if (opts.target) e.target = opts.target;
+    if (opts.style) e.style.cssText = opts.style;
+  }
+  return e;
+}
+
+function card(title, subtitle) {
+  const c = el('div', { className: 'card' });
+  c.appendChild(el('h2', { textContent: title }));
+  if (subtitle) c.appendChild(el('p', { className: 'subtitle', textContent: subtitle }));
+  return c;
+}
+
+function navRow(showBack, nextDisabled) {
+  const row = el('div', { className: 'nav-row' });
+  const back = el('button', { className: 'btn secondary', id: 'btn-prev', textContent: '\u2190 Retour' });
+  if (!showBack) back.style.visibility = 'hidden';
+  const next = el('button', { className: 'btn', id: 'btn-next', textContent: 'Suivant \u2192' });
+  if (nextDisabled) next.disabled = true;
+  row.appendChild(back);
+  row.appendChild(next);
+  return row;
+}
+
+function infoRow(label, value, copyBtn) {
+  const row = el('div', { className: 'info-row' });
+  row.appendChild(el('span', { className: 'info-label', textContent: label }));
+  row.appendChild(el('span', { className: 'info-value', textContent: value }));
+  if (copyBtn) {
+    const btn = el('button', { className: 'btn small', textContent: 'Copier' });
+    btn.addEventListener('click', function(ev) { copyToClipboard(value, ev.currentTarget); });
+    row.appendChild(btn);
+  }
+  return row;
+}
+
+function alert(type, msg) {
+  const a = el('div', { className: 'alert ' + type, textContent: msg });
+  return a;
+}
+
+// ---------------------------------------------------------------------------
+// Render each step
+// ---------------------------------------------------------------------------
+function renderStep(n) {
+  const container = document.getElementById('step-container');
+  if (!container) return;
+  while (container.firstChild) container.removeChild(container.firstChild);
+
+  switch (n) {
+    case 0: renderPrereqs(container); break;
+    case 1: renderDomains(container); break;
+    case 2: renderTunnel(container); break;
+    case 3: renderAccess(container); break;
+    case 4: renderPassword(container); break;
+    case 5: renderDockerBuild(container); break;
+    case 6: renderPhoneConfig(container); break;
+    case 7: renderPin(container); break;
+    case 8: renderSummary(container); break;
+    default: break;
+  }
+}
+
+// ----- Step 0: Prerequisites -----
+function renderPrereqs(container) {
+  const c = card('Prerequis systeme', 'Verification des dependances necessaires au fonctionnement.');
+  const list = el('ul', { className: 'prereq-list', id: 'prereq-list' });
+  const deps = [['docker','Docker'],['tmux','tmux'],['ttyd','ttyd'],['claude','Claude CLI'],['jq','jq']];
+  deps.forEach(function(d) {
+    const li = el('li', { id: 'prereq-' + d[0] });
+    const icon = el('span', { className: 'prereq-icon pending', id: 'icon-' + d[0], textContent: '\u25CC' });
+    li.appendChild(icon);
+    li.appendChild(el('span', { textContent: d[1] }));
+    list.appendChild(li);
+  });
+  c.appendChild(list);
+  const alertWrap = el('div', { id: 'prereq-alert' });
+  c.appendChild(alertWrap);
+  const nav = navRow(false, true);
+  c.appendChild(nav);
+  container.appendChild(c);
+  document.getElementById('btn-prev').addEventListener('click', prevStep);
+  document.getElementById('btn-next').addEventListener('click', nextStep);
+  checkPrereqs();
+}
+
+async function checkPrereqs() {
+  try {
+    const res = await fetch('/api/prereqs');
+    const data = await res.json();
+    let allOk = true;
+    Object.entries(data).forEach(function(entry) {
+      const key = entry[0];
+      const ok = entry[1];
+      const icon = document.getElementById('icon-' + key);
+      if (icon) {
+        icon.className = 'prereq-icon ' + (ok ? 'ok' : 'fail');
+        icon.textContent = ok ? '\u2714' : '\u2718';
+      }
+      if (!ok) allOk = false;
+    });
+    state.prereqsOk = allOk;
+    const alertEl = document.getElementById('prereq-alert');
+    const nextBtn = document.getElementById('btn-next');
+    if (allOk) {
+      if (alertEl) alertEl.appendChild(alert('success', 'Tous les prerequis sont satisfaits.'));
+      if (nextBtn) nextBtn.disabled = false;
+    } else {
+      if (alertEl) alertEl.appendChild(alert('error', 'Certains outils manquent. Installez-les avant de continuer.'));
+    }
+  } catch (err) {
+    const alertEl = document.getElementById('prereq-alert');
+    if (alertEl) alertEl.appendChild(alert('error', 'Impossible de verifier les prerequis.'));
+  }
+}
+
+// ----- Step 1: Domains -----
+function renderDomains(container) {
+  const c = card('Domaines', 'Configurez les domaines Cloudflare pour votre terminal et les notifications.');
+  function field(labelText, inputId, placeholder, value) {
+    const f = el('div', { className: 'field' });
+    f.appendChild(el('label', { textContent: labelText }));
+    f.appendChild(el('input', { type: 'text', id: inputId, placeholder: placeholder, value: value || '' }));
+    return f;
+  }
+  c.appendChild(field('Domaine terminal (ex: terminal.mondomaine.com)', 'input-terminal-domain', 'terminal.mondomaine.com', state.terminalDomain));
+  c.appendChild(field('Domaine notifications ntfy (ex: notify.mondomaine.com)', 'input-notify-domain', 'notify.mondomaine.com', state.notifyDomain));
+  const nav = navRow(true, false);
+  c.appendChild(nav);
+  container.appendChild(c);
+  document.getElementById('btn-prev').addEventListener('click', prevStep);
+  document.getElementById('btn-next').addEventListener('click', function() {
+    const t = document.getElementById('input-terminal-domain').value.trim();
+    const n = document.getElementById('input-notify-domain').value.trim();
+    if (!t || !n) { window.alert('Veuillez remplir les deux domaines.'); return; }
+    state.terminalDomain = t;
+    state.notifyDomain = n;
+    nextStep();
+  });
+}
+
+// ----- Step 2: Cloudflare Tunnel -----
+function renderTunnel(container) {
+  const c = card('Tunnel Cloudflare', 'Creez un tunnel Cloudflare et copiez le token ici.');
+  const instr = el('div', { className: 'instructions' });
+  const lines = [
+    '1. Allez sur one.dash.cloudflare.com',
+    '2. Networks → Tunnels → Create a Tunnel',
+    '3. Type: Cloudflared, donnez un nom (ex: devremote)',
+    '4. Copiez le token (apres --token)',
+    '5. Configurez deux Public Hostnames :',
+    '   - ' + state.terminalDomain + ' → http://localhost:7681',
+    '   - ' + state.notifyDomain + ' → http://localhost:2586',
+  ];
+  lines.forEach(function(line) {
+    instr.appendChild(el('span', { textContent: line }));
+    instr.appendChild(document.createElement('br'));
+  });
+  c.appendChild(instr);
+  const f = el('div', { className: 'field' });
+  f.appendChild(el('label', { textContent: 'Token Cloudflare Tunnel' }));
+  f.appendChild(el('input', { type: 'text', id: 'input-tunnel-token', placeholder: 'eyJ...', value: state.tunnelToken }));
+  c.appendChild(f);
+  const nav = navRow(true, false);
+  c.appendChild(nav);
+  container.appendChild(c);
+  document.getElementById('btn-prev').addEventListener('click', prevStep);
+  document.getElementById('btn-next').addEventListener('click', function() {
+    const t = document.getElementById('input-tunnel-token').value.trim();
+    if (!t) { window.alert('Veuillez coller le token du tunnel.'); return; }
+    state.tunnelToken = t;
+    nextStep();
+  });
+}
+
+// ----- Step 3: Cloudflare Access -----
+function renderAccess(container) {
+  const c = card('Cloudflare Access', 'Protegez votre terminal avec Cloudflare Access (authentification par email).');
+  const instr = el('div', { className: 'instructions' });
+  const lines = [
+    '1. Dans Cloudflare Zero Trust → Access → Applications → Add an Application',
+    '2. Type: Self-hosted',
+    '3. Application domain: ' + state.terminalDomain,
+    '4. Policy : autorisez votre adresse email',
+    '5. Renseignez ci-dessous l\'email autorise',
+  ];
+  lines.forEach(function(line) {
+    instr.appendChild(el('span', { textContent: line }));
+    instr.appendChild(document.createElement('br'));
+  });
+  c.appendChild(instr);
+  const f = el('div', { className: 'field' });
+  f.appendChild(el('label', { textContent: 'Email autorise (Cloudflare Access)' }));
+  f.appendChild(el('input', { type: 'email', id: 'input-email', placeholder: 'vous@exemple.com', value: state.email }));
+  c.appendChild(f);
+  const nav = navRow(true, false);
+  c.appendChild(nav);
+  container.appendChild(c);
+  document.getElementById('btn-prev').addEventListener('click', prevStep);
+  document.getElementById('btn-next').addEventListener('click', function() {
+    const e = document.getElementById('input-email').value.trim();
+    if (!e) { window.alert('Veuillez saisir votre email.'); return; }
+    state.email = e;
+    nextStep();
+  });
+}
+
+// ----- Step 4: Terminal password -----
+function renderPassword(container) {
+  if (!state.ttydPassword) state.ttydPassword = generatePassword(16);
+  const c = card('Mot de passe terminal', 'Ce mot de passe protege l\'acces a votre terminal via ttyd.');
+  const f = el('div', { className: 'field' });
+  f.appendChild(el('label', { textContent: 'Mot de passe ttyd' }));
+  const row = el('div', { className: 'input-row' });
+  const input = el('input', { type: 'text', id: 'input-ttyd-pwd', value: state.ttydPassword });
+  const genBtn = el('button', { className: 'btn secondary small', textContent: 'Generer' });
+  const cpyBtn = el('button', { className: 'btn secondary small', textContent: 'Copier' });
+  genBtn.addEventListener('click', function() {
+    const p = generatePassword(16);
+    input.value = p;
+    state.ttydPassword = p;
+  });
+  cpyBtn.addEventListener('click', function(ev) { copyToClipboard(input.value, ev.currentTarget); });
+  row.appendChild(input);
+  row.appendChild(genBtn);
+  row.appendChild(cpyBtn);
+  f.appendChild(row);
+  c.appendChild(f);
+  const nav = navRow(true, false);
+  c.appendChild(nav);
+  container.appendChild(c);
+  document.getElementById('btn-prev').addEventListener('click', prevStep);
+  document.getElementById('btn-next').addEventListener('click', function() {
+    const p = input.value.trim();
+    if (!p) { window.alert('Veuillez definir un mot de passe.'); return; }
+    state.ttydPassword = p;
+    nextStep();
+  });
+}
+
+// ----- Step 5: Docker build -----
+function renderDockerBuild(container) {
+  const c = card('Installation Docker', 'Demarrage des conteneurs (Cloudflare tunnel + ntfy)...');
+  const wrap = el('div', { className: 'progress-wrap' });
+  const track = el('div', { className: 'progress-bar-track' });
+  const fill = el('div', { className: 'progress-bar-fill', id: 'progress-fill' });
+  track.appendChild(fill);
+  wrap.appendChild(track);
+  const log = el('div', { className: 'progress-log', id: 'progress-log' });
+  wrap.appendChild(log);
+  c.appendChild(wrap);
+  const alertWrap = el('div', { id: 'build-alert' });
+  c.appendChild(alertWrap);
+  const nav = navRow(false, true);
+  c.appendChild(nav);
+  container.appendChild(c);
+  document.getElementById('btn-prev').addEventListener('click', prevStep);
+  document.getElementById('btn-next').addEventListener('click', nextStep);
+  resetProgress();
+  startSetup();
+}
+
+async function startSetup() {
+  const nextBtn = document.getElementById('btn-next');
+  const alertEl = document.getElementById('build-alert');
+  try {
+    const res = await fetch('/api/setup', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        terminalDomain: state.terminalDomain,
+        notifyDomain: state.notifyDomain,
+        tunnelToken: state.tunnelToken,
+        ttydPassword: state.ttydPassword,
+        email: state.email,
+        pin: state.pin,
+      }),
+    });
+    const data = await res.json();
+    if (data.ok) {
+      state.ntfyTopic = data.ntfyTopic;
+      state.ntfyPassword = data.ntfyPassword;
+      state.notifyDomainResult = data.notifyDomain;
+      state.setupOk = true;
+      setProgress(100);
+      appendLog('Succes !', 'ok');
+      if (nextBtn) nextBtn.disabled = false;
+    } else {
+      throw new Error(data.error || 'Echec setup');
+    }
+  } catch (err) {
+    if (alertEl) {
+      while (alertEl.firstChild) alertEl.removeChild(alertEl.firstChild);
+      alertEl.appendChild(alert('error', 'Erreur : ' + err.message));
+    }
+    appendLog('Echec : ' + err.message, 'err');
+  }
+}
+
+// ----- Step 6: Phone config -----
+function renderPhoneConfig(container) {
+  const domain = state.notifyDomainResult || state.notifyDomain;
+  const topic = state.ntfyTopic;
+  const password = state.ntfyPassword;
+
+  const c = card('Configuration telephone', 'Installez l\'application ntfy sur votre telephone et configurez-la.');
+  const instr = el('div', { className: 'instructions' });
+  const lines = [
+    '1. Installez ntfy depuis l\'App Store / Play Store',
+    '2. Ajoutez un serveur avec l\'URL ci-dessous',
+    '3. Connectez-vous avec le login admin et le mot de passe ci-dessous',
+    '4. Abonnez-vous au topic ci-dessous',
+  ];
+  lines.forEach(function(line) {
+    instr.appendChild(el('span', { textContent: line }));
+    instr.appendChild(document.createElement('br'));
+  });
+  c.appendChild(instr);
+
+  const info = el('div', { className: 'info-block' });
+  info.appendChild(infoRow('URL serveur', 'https://' + domain, true));
+  info.appendChild(infoRow('Login', 'admin', true));
+  info.appendChild(infoRow('Mot de passe', password, true));
+  info.appendChild(infoRow('Topic', topic, true));
+  c.appendChild(info);
+
+  const alertWrap = el('div', { id: 'notif-alert' });
+  c.appendChild(alertWrap);
+
+  const navR = el('div', { className: 'nav-row' });
+  const backBtn = el('button', { className: 'btn secondary', id: 'btn-prev', textContent: '\u2190 Retour' });
+  const rightGroup = el('div', { style: 'display:flex;gap:10px' });
+  const testBtn = el('button', { className: 'btn secondary', id: 'btn-test', textContent: 'Tester notification' });
+  const nextBtn2 = el('button', { className: 'btn', id: 'btn-next', textContent: 'Suivant \u2192' });
+  rightGroup.appendChild(testBtn);
+  rightGroup.appendChild(nextBtn2);
+  navR.appendChild(backBtn);
+  navR.appendChild(rightGroup);
+  c.appendChild(navR);
+  container.appendChild(c);
+
+  backBtn.addEventListener('click', prevStep);
+  nextBtn2.addEventListener('click', nextStep);
+  testBtn.addEventListener('click', async function() {
+    testBtn.disabled = true;
+    testBtn.textContent = 'Envoi...';
+    const alertEl = document.getElementById('notif-alert');
+    while (alertEl.firstChild) alertEl.removeChild(alertEl.firstChild);
+    try {
+      const res = await fetch('/api/test-notification', { method: 'POST' });
+      const data = await res.json();
+      alertEl.appendChild(alert(
+        data.ok ? 'success' : 'error',
+        data.ok ? 'Notification envoyee ! Verifiez votre telephone.' : 'Echec envoi. Verifiez la configuration ntfy.'
+      ));
+    } catch {
+      alertEl.appendChild(alert('error', 'Erreur reseau.'));
+    }
+    testBtn.disabled = false;
+    testBtn.textContent = 'Tester notification';
+  });
+}
+
+// ----- Step 7: PIN -----
+function renderPin(container) {
+  const c = card('Code PIN', 'Definissez un code PIN a 6 chiffres pour securiser l\'acces au dashboard.');
+
+  function pinGroup(id) {
+    const f = el('div', { className: 'field' });
+    f.appendChild(el('label', { textContent: id === 'pin' ? 'Code PIN (6 chiffres)' : 'Confirmer le PIN' }));
+    const g = el('div', { className: 'pin-group', id: id + '-inputs' });
+    for (let i = 0; i < 6; i++) {
+      g.appendChild(el('input', { type: 'password', inputmode: 'numeric', maxlength: 1, id: id + '-' + i, autocomplete: 'off' }));
+    }
+    f.appendChild(g);
+    return f;
+  }
+
+  c.appendChild(pinGroup('pin'));
+  c.appendChild(pinGroup('cpin'));
+  const alertWrap = el('div', { id: 'pin-alert' });
+  c.appendChild(alertWrap);
+  const nav = navRow(true, false);
+  c.appendChild(nav);
+  container.appendChild(c);
+
+  setupPinInputs('pin', 6);
+  setupPinInputs('cpin', 6);
+
+  document.getElementById('btn-prev').addEventListener('click', prevStep);
+  document.getElementById('btn-next').addEventListener('click', function() {
+    const pin1 = getPinValue('pin', 6);
+    const pin2 = getPinValue('cpin', 6);
+    const alertEl = document.getElementById('pin-alert');
+    while (alertEl.firstChild) alertEl.removeChild(alertEl.firstChild);
+    if (pin1.length !== 6) {
+      alertEl.appendChild(alert('error', 'Entrez un PIN de 6 chiffres.'));
+      return;
+    }
+    if (pin1 !== pin2) {
+      alertEl.appendChild(alert('error', 'Les PINs ne correspondent pas.'));
+      return;
+    }
+    state.pin = pin1;
+    nextStep();
+  });
+}
+
+function setupPinInputs(prefix, count) {
+  for (let i = 0; i < count; i++) {
+    const input = document.getElementById(prefix + '-' + i);
+    if (!input) continue;
+    (function(idx) {
+      input.addEventListener('input', function() {
+        input.value = input.value.replace(/\D/g, '').slice(0, 1);
+        if (input.value && idx < count - 1) {
+          const next = document.getElementById(prefix + '-' + (idx + 1));
+          if (next) next.focus();
+        }
+      });
+      input.addEventListener('keydown', function(ev) {
+        if (ev.key === 'Backspace' && !input.value && idx > 0) {
+          const prev = document.getElementById(prefix + '-' + (idx - 1));
+          if (prev) prev.focus();
+        }
+      });
+    })(i);
+  }
+}
+
+function getPinValue(prefix, count) {
+  let val = '';
+  for (let i = 0; i < count; i++) {
+    const inp = document.getElementById(prefix + '-' + i);
+    val += (inp ? inp.value : '');
+  }
+  return val;
+}
+
+// ----- Step 8: Summary -----
+function renderSummary(container) {
+  const domain = state.notifyDomainResult || state.notifyDomain;
+  const c = card('Configuration terminee !', 'Voici un recapitulatif de votre configuration.');
+
+  function section(title) {
+    const s = el('div', { className: 'summary-section' });
+    s.appendChild(el('h3', { textContent: title }));
+    const block = el('div', { className: 'info-block' });
+    s.appendChild(block);
+    return { section: s, block: block };
+  }
+
+  const domains = section('Domaines');
+  domains.block.appendChild(infoRow('Terminal', state.terminalDomain, true));
+  domains.block.appendChild(infoRow('Notifications', domain, true));
+  c.appendChild(domains.section);
+
+  const terminal = section('Terminal');
+  terminal.block.appendChild(infoRow('Email acces', state.email, true));
+  terminal.block.appendChild(infoRow('Mot de passe ttyd', state.ttydPassword, true));
+  c.appendChild(terminal.section);
+
+  const ntfy = section('Notifications ntfy');
+  ntfy.block.appendChild(infoRow('URL', 'https://' + domain, true));
+  ntfy.block.appendChild(infoRow('Login', 'admin', true));
+  ntfy.block.appendChild(infoRow('Mot de passe', state.ntfyPassword, true));
+  ntfy.block.appendChild(infoRow('Topic', state.ntfyTopic, true));
+  c.appendChild(ntfy.section);
+
+  const successAlert = el('div', { className: 'alert success' });
+  successAlert.appendChild(el('span', { textContent: 'Lancez maintenant : ' }));
+  successAlert.appendChild(el('strong', { textContent: 'rms-devremote link' }));
+  successAlert.appendChild(el('span', { textContent: ' pour demarrer la session !' }));
+  c.appendChild(successAlert);
+
+  const navR = el('div', { className: 'nav-row' });
+  navR.appendChild(el('span', {}));
+  const finishBtn = el('button', { className: 'btn', id: 'btn-finish', textContent: 'Terminer' });
+  navR.appendChild(finishBtn);
+  c.appendChild(navR);
+  container.appendChild(c);
+
+  finishBtn.addEventListener('click', async function() {
+    try { await fetch('/api/done', { method: 'POST' }); } catch { /* ignore */ }
+    finishBtn.textContent = 'Fermeture...';
+    finishBtn.disabled = true;
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Build step indicator DOM
+// ---------------------------------------------------------------------------
+function buildStepIndicator() {
+  const wrap = document.getElementById('step-indicator');
+  if (!wrap) return;
+  for (let i = 0; i < TOTAL_STEPS; i++) {
+    const dot = el('div', { className: 'step-dot', textContent: String(i + 1) });
+    wrap.appendChild(dot);
+    if (i < TOTAL_STEPS - 1) {
+      wrap.appendChild(el('div', { className: 'step-line' }));
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Init
+// ---------------------------------------------------------------------------
+document.addEventListener('DOMContentLoaded', function() {
+  connectWS();
+  buildStepIndicator();
+  goToStep(0);
+});