callback.js

import { loadFlow, clearFlow, exchangeCode, curlFor, redact } from './cimd.js';

const $ = (id) => document.getElementById(id);
const params = new URLSearchParams(location.search);

function row(tbody, cells, className) {
  const tr = document.createElement('tr');
  if (className) tr.className = className;
  for (const cell of cells) {
    const td = document.createElement('td');
    td.textContent = cell;
    tr.append(td);
  }
  tbody.append(tr);
}

function fail(title, body) {
  $('errorTitle').textContent = title;
  $('errorBody').textContent = body;
  $('error').hidden = false;
  $('subtitle').textContent = 'The flow stopped here.';
}

const flow = loadFlow();
const code = params.get('code');
const error = params.get('error');

if (error) {
  fail(
    `The server returned ${error}`,
    [
      params.get('error_description') || '(no description)',
      params.get('error_uri') ? `More: ${params.get('error_uri')}` : '',
    ]
      .filter(Boolean)
      .join('\n\n')
  );
} else if (!flow) {
  fail(
    'No flow in this tab',
    'The code verifier and state live in sessionStorage for this tab only. ' +
      'If you opened this URL directly, or in a different tab, start the flow again from the home page.'
  );
} else if (!code) {
  fail('No code in the response', `Query string was: ${location.search || '(empty)'}`);
} else {
  render();
}

function render() {
  $('subtitle').textContent = 'The server sent an authorization code back.';

  const p = $('params');
  row(p, ['code', code]);
  row(p, ['state', params.get('state') || '(absent)']);
  row(p, ['iss', params.get('iss') || '(absent)']);

  const c = $('checks');
  const stateOk = params.get('state') === flow.state;
  row(
    c,
    ['state matches the one this tab sent', stateOk ? 'pass' : 'FAIL'],
    stateOk ? 'pass' : 'fail'
  );

  const iss = params.get('iss');
  if (flow.issCheck) {
    const issOk = iss === flow.issuer;
    row(
      c,
      [`iss equals ${flow.issuer}`, issOk ? 'pass' : iss ? `FAIL — got ${iss}` : 'FAIL — absent'],
      issOk ? 'pass' : 'fail'
    );
  } else {
    row(c, ['iss returned (RFC 9207)', iss ? 'present, though not advertised' : 'not advertised, not sent']);
  }

  $('curl').textContent = curlFor({ flow, code });
  $('response').hidden = false;

  if (!stateOk) {
    $('exchangeBtn').disabled = true;
    $('exchangeIntro').textContent =
      'The state does not match, so this response is not the one this tab asked for. The exchange is blocked.';
  }
}

let tokenResponse = null;
let revealed = false;

$('exchangeBtn').addEventListener('click', async () => {
  const btn = $('exchangeBtn');
  btn.setAttribute('aria-busy', 'true');
  btn.disabled = true;
  $('error').hidden = true;

  try {
    tokenResponse = await exchangeCode({ flow, code });
    $('tokenTitle').textContent = 'Token response';
    $('tokenJson').textContent = JSON.stringify(redact(tokenResponse), null, 2);
    $('tokenNote').textContent =
      'Tokens are held in this tab only. Closing it discards them. Nothing is written to localStorage.';
    $('tokenResult').hidden = false;
    $('curlWrap').open = false;
    btn.textContent = 'Exchanged';
    clearFlow();
  } catch (err) {
    if (err.cors) {
      $('curlWrap').open = true;
      fail('The browser blocked the token request', err.message);
    } else {
      fail('The token endpoint rejected the exchange', err.message);
      btn.disabled = false;
      btn.textContent = 'Try the exchange again';
    }
  } finally {
    btn.removeAttribute('aria-busy');
  }
});

$('revealBtn').addEventListener('click', () => {
  revealed = !revealed;
  $('tokenJson').textContent = JSON.stringify(
    revealed ? tokenResponse : redact(tokenResponse),
    null,
    2
  );
  $('revealBtn').textContent = revealed ? 'Hide the full token' : 'Show the full token';
});