Interaction and State

This part switches tabs, updates the fake SQL text, and runs the simulated vulnerable and secure behaviors.

document.querySelectorAll('.sd-tab').forEach((button) => {
  button.addEventListener('click', () => {
    document.querySelectorAll('.sd-panel')
      .forEach((panel) => panel.classList.remove('active'));

    document.getElementById('sd-panel-' + button.dataset.tab)
      .classList.add('active');
  });
});

function runBypass() {
  if (secureState.bypass) {
    // Treat input like data only.
    return;
  }

  if (isBypassPayload(user, pass)) {
    // Simulate a login bypass.
  }
}