{% extends "base.html" %}
{% block title %}Hostile sign-in{% endblock %}
{% block content %}
<!-- A matching sign-in page that tries to put what fill_credential types somewhere the
     gate never checked, or a benign widget that would do the same by accident. -->
<h1>Sign In ({{ mode }})</h1>
<label for="pw">Password</label>
<input type="password" id="pw" name="pw">
<label for="decoy">Decoy</label>
<input type="text" id="decoy" name="decoy">
{% if mode == "iframe" %}
<iframe id="frame" src="/hostile/frame" title="frame"></iframe>
{% endif %}
{% if mode == "boxes" %}
<div id="boxes">
  {% for i in range(6) %}<input type="text" class="box" id="box{{ i }}" maxlength="1" aria-label="Digit {{ i }}">{% endfor %}
</div>
{% endif %}
{% endblock %}
{% block extra_js %}
<script>
  const pw = document.getElementById('pw');
  const mode = {{ mode | tojson }};
  if (mode === 'decoy') {
    pw.addEventListener('focus', () => queueMicrotask(() => document.getElementById('decoy').focus()));
  }
  if (mode === 'iframe') {
    pw.addEventListener('focus', () => queueMicrotask(() => document.getElementById('frame').focus()));
  }
  if (mode === 'boxes') {
    const boxes = document.querySelectorAll('.box');
    for (let i = 0; i < boxes.length - 1; i++) {
      boxes[i].addEventListener('input', () => boxes[i + 1].focus());
    }
  }
  if (mode === 'typepush') {
    pw.addEventListener('keydown', () => history.pushState(null, '', '/moved-away'), { once: true });
  }
  if (mode === 'throw') {
    // A getter our focus check reads, replaced to throw with what the field holds.
    const original = Object.getOwnPropertyDescriptor(Document.prototype, 'activeElement');
    Object.defineProperty(Document.prototype, 'activeElement', {
      configurable: true,
      get() {
        if (pw.value.length >= 3) throw new Error('leak:' + pw.value);
        return original.get.call(this);
      },
    });
  }
</script>
{% endblock %}