Domain redirects: send an address to another, over HTTP and HTTPS

A website resource can now redirect to a full address (301 or 302), optionally
keeping the path and query, with no target or login. The Add resource wizard
has a Domain redirect choice that opens the HTTPS and HTTP sides together.
Deleting a site no longer removes redirects. Uses Reef v0.1.10 and Blacktip v0.1.9.

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

web/index.html

@@ -666,24 +666,69 @@ function mappingRow(m, st, series) {
   const pubAddr = web ? m.proto + '://' + (m.hostname || '*') + (m.port === (m.proto === 'https' ? 443 : 80) ? '' : ':' + portText(m)) : (m.hostname ? m.hostname + ' @ ' : '') + m.bindIp + ':' + portText(m);
   return h('tr', {},
     h('td', {title:why}, badge(label, tone)),
-    h('td', {}, h('div', {}, m.name, ' ', h('span', {class:'tag'}, m.proto), m.proxyProtocol ? h('span', {class:'tag', style:'margin-left:4px', title:'the target is told the real client address'}, 'proxy ' + m.proxyProtocol) : null, prot ? h('span', {style:'margin-left:4px', title:'Visitors have to sign in'}, badge('Login', 'accent')) : null),
+    h('td', {}, h('div', {}, m.name, ' ', h('span', {class:'tag'}, m.proto), m.redirectTo ? h('span', {class:'tag', style:'margin-left:4px'}, 'redirect') : null,m.proxyProtocol ? h('span', {class:'tag', style:'margin-left:4px', title:'the target is told the real client address'}, 'proxy ' + m.proxyProtocol) : null, prot ? h('span', {style:'margin-left:4px', title:'Visitors have to sign in'}, badge('Login', 'accent')) : null),
       tagList(m),
       s.error ? h('div', {class:'err small mono clip', title:s.error}, s.error) : null,
       s.cert && m.proto === 'https' ? h('div', {class:'small clip ' + (s.cert.startsWith('error') ? 'err' : 'dim'), title:s.cert}, 'Certificate: ' + s.cert) : null),
     h('td', {}, h('span', {class:'mono'}, pubAddr), h('div', {class:'dim small'}, (edge ? edge.name : '?') + (web && m.bindIp !== '0.0.0.0' ? ' · ' + m.bindIp : ''))),
-    h('td', {class:'small'}, m.targets.map((t, i) => {
+    h('td', {class:'small'}, m.redirectTo ? h('div', {}, h('span', {class:'mono clip', title:m.redirectTo}, '→ ' + m.redirectTo),
+      h('div', {class:'dim'}, (m.redirectPermanent ? 'Permanent (301)' : 'Temporary (302)') + (m.redirectKeepPath ? ', keeps the path' : ''))) : m.targets.map((t, i) => {
       const th = (s.targets || [])[i], site = byId(st.sites, t.siteId);
       return h('div', {title:th && !th.healthy ? th.detail : '', style:'margin-bottom:4px'}, badge(th ? (th.healthy ? 'Up' : 'Down') : 'Unknown', th ? (th.healthy ? 'success' : 'danger') : ''), ' ', site ? site.name : '?', h('div', {class:'mono'}, t.host + ':' + t.port));
     })),
     h('td', {class:'small dim'}, m.total && m.total.conns ? [`${m.total.conns} conn`, h('br'), `${bytes(m.total.bytesIn)} in, ${bytes(m.total.bytesOut)} out`] : 'None yet', spark(series)),
     h('td', {}, h('div', {class:'actions'},
-      h('button', {class:'ghost', onclick:() => portForm(m)}, 'Edit'),
+      h('button', {class:'ghost', onclick:() => m.redirectTo ? redirectForm(m) : portForm(m)}, 'Edit'),
       h('button', {class:'ghost', onclick: act(async () => { await api('PUT', O('/mappings/' + m.id), {...m, enabled:!m.enabled}); refresh(); })}, m.enabled ? 'Pause' : 'Enable'),
       web && prot ? h('button', {class:'ghost', onclick:() => shareDialog(m)}, 'Share') : null,
       web && prot ? h('button', {class:'ghost', title:'Everyone currently signed in to this resource has to sign in again', onclick: ask({title:`Sign everyone out of ${m.name}?`, body:'Everyone who is signed in to this resource has to sign in again. They can sign back in straight away.', confirm:'Sign out visitors', danger:false}, async () => { await api('POST', O(`/mappings/${m.id}/revoke`)); toast('Visitors signed out'); })}, 'Sign out visitors') : null,
       h('button', {class:'ghost danger', onclick: ask({title:`Close ${m.name}?`, body:'The port closes and visitors can no longer reach it. You can open it again later.', confirm:'Close resource'}, async () => { await api('DELETE', O('/mappings/' + m.id)); refresh(); })}, 'Close'))));
 }
 
+// A redirect sends visitors from one hostname to another address. New ones open the HTTPS side on port 443 and,
+// if asked, the plain HTTP side on port 80, so both ways of typing the old name land on the new one.
+function redirectForm(existing) {
+  const st = S.st, m = existing || {proto:'https', enabled:true, bindIp:'0.0.0.0', redirectPermanent:true, redirectKeepPath:true};
+  const edgeSel = h('select', {}, st.edges.map(e => h('option', {value:e.id, selected:e.id === m.edgeId}, e.name + (e.online ? '' : ' (offline)'))));
+  const ipIn = h('select', {});
+  const refreshIPs = () => {
+    const e = byId(st.edges, edgeSel.value), keep = ipIn.value || m.bindIp || '0.0.0.0';
+    const saved = existing && m.edgeId === edgeSel.value && m.bindIp !== '0.0.0.0' ? [m.bindIp] : [];
+    const ips = [...new Set([...((e && e.ips) || []), ...saved])];
+    const label = ip => { const d = st.domains.filter(x => x.ip === ip).map(x => x.name); return d.length ? `${ip} (${d.join(', ')})` : ip; };
+    ipIn.replaceChildren(h('option', {value:'0.0.0.0'}, 'Every address on the edge'), ...ips.map(ip => h('option', {value:ip}, label(ip))));
+    ipIn.value = ips.includes(keep) ? keep : '0.0.0.0';
+  };
+  edgeSel.onchange = refreshIPs; refreshIPs();
+  const from = h('input', {value:m.hostname || '', list:'rdoms', placeholder:'old.example.com or *.example.com'});
+  const doms = h('datalist', {id:'rdoms'}, st.domains.map(d => h('option', {value:d.name})));
+  const to = h('input', {value:m.redirectTo || '', placeholder:'https://new.example.com'});
+  const kind = h('select', {}, [[true, 'Permanent (301): browsers and search engines remember it'], [false, 'Temporary (302): checked every time']].map(([v, t]) => h('option', {value:String(v), selected:!!m.redirectPermanent === v}, t)));
+  const keep = chk('Keep the path and query, so old.example.com/a?b=1 goes to the same place on the new address', m.redirectKeepPath);
+  const both = chk('Also redirect plain HTTP (port 80)', true);
+  const name = h('input', {value:m.name || '', placeholder:'optional'}), tg = tagInput(m.tags, allTags(st.mappings));
+  const save = act(async () => {
+    const base = {name:name.value, edgeId:edgeSel.value, bindIp:ipIn.value || '0.0.0.0', hostname:from.value, redirectTo:to.value, redirectPermanent:kind.value === 'true',
+      redirectKeepPath:keep.box.checked, tags:tg.get(), enabled:m.enabled !== false, targets:[]};
+    if (existing) { await api('PUT', O('/mappings/' + m.id), {...base, proto:m.proto, port:m.port}); }
+    else {
+      await api('POST', O('/mappings'), {...base, proto:'https', port:443});
+      if (both.box.checked) {
+        try { await api('POST', O('/mappings'), {...base, proto:'http', port:80, name:name.value ? name.value + ' (HTTP)' : ''}); }
+        catch (e) { throw new Error('The HTTPS redirect was added, but the HTTP one could not be: ' + e.message); }
+      }
+    }
+    close(); toast(existing ? 'Redirect saved' : 'Redirect added'); refresh();
+  });
+  const close = modal(existing ? 'Edit redirect' : 'Add a domain redirect', h('div', {class:'stack'},
+    h('p', {class:'dim'}, existing ? `This redirect answers ${m.proto === 'https' ? 'HTTPS on port ' : 'HTTP on port '}${m.port}.` : 'Visitors who open the old address are sent to the new one. HTTPS gets its certificate automatically.'),
+    h('div', {class:'grid'}, field('Redirect this address', from, st.domains.length ? 'Must be under one of your domains' : 'Add a domain on the Domains tab first'), field('To', to, 'A full address, starting with http:// or https://')),
+    doms, field('Type', kind), keep, existing ? null : both,
+    h('div', {class:'grid'}, field('Edge', edgeSel), field('Public IP', ipIn, 'Domains pointed at an address are shown next to it')),
+    h('div', {class:'grid'}, field('Name', name), tg.el),
+    h('div', {class:'actions form-actions'}, h('button', {class:'ghost', onclick:() => close()}, 'Cancel'), h('button', {class:'btn', onclick:save}, existing ? 'Save changes' : 'Add redirect'))), {sticky:true});
+}
+
 function portForm(existing) {
   const st = S.st, m = existing || { proto:'tcp', enabled:true, bindIp:'0.0.0.0', targets:[{siteId:'', host:'127.0.0.1', port:''}], auth:{}, rules:[] };
   const a = m.auth || {};
@@ -817,6 +862,7 @@ function portForm(existing) {
       ['both', 'TCP + UDP', 'The same port for both, as many games want.'],
       ['tls', 'TLS passthrough', 'Route encrypted traffic by hostname without decrypting it.'],
       ['http', 'Website, plain HTTP', 'No certificate: for internal use or behind another proxy.'],
+      ['redirect', 'Domain redirect', 'Send visitors from one address to another, such as old.example.com to new.example.com.'],
     ];
     const [accessFs, rulesFs, advFs] = [...webBox.children];
     let step = 0, chosen = false;
@@ -856,6 +902,7 @@ function portForm(existing) {
       port.value = t === 'https' || t === 'tls' ? '443' : t === 'http' ? '80' : (targets[0] && targets[0].port ? String(targets[0].port) : '');
     };
     const pick = v => {
+      if (v === 'redirect') { close(); redirectForm(); return; }
       protoSel.value = v; chosen = true; protoSel.onchange();
       if (v === 'https') redir.box.checked = true;
       port.value = ''; step = 1; draw();