{% extends "base.html" %}
{% block title %}Sign in a device{% endblock %}
{% block content %}
{# The mark (docs/backgrounds.md §2): brand only, no data. #}
<script type="application/json" id="backdrop-data">{"scene":"mark"}</script>
{% include "backdrop.html" %}
<div class="head"><h1>Sign in a device <small>an app asked to use your account</small></h1></div>
{% if let Some(e) = error %}<p class="error">{{ e }}</p>{% endif %}
{% if let Some(d) = done %}
<section class="card wide device-done {% if d.approved %}ok{% else %}no{% endif %}">
  {% if d.approved %}
  <h2><span class="device-mark" aria-hidden="true">✓</span> Signed in</h2>
  <p><strong>{{ d.client }}</strong> is now signed in as <strong>{{ d.username }}</strong>. You can close this page and return to it: it picks up its token by itself, so there is nothing to copy or enter.</p>
  <p class="small mute">It is listed under <a href="/settings/tokens">Settings → Tokens</a>, where you can revoke it.</p>
  {% else %}
  <h2><span class="device-mark" aria-hidden="true">✕</span> Denied</h2>
  <p><strong>{{ d.client }}</strong> was not signed in, and its code no longer works.</p>
  {% endif %}
  <p class="small"><a href="/device">Sign in another device</a></p>
</section>
{% else if let Some((d, asked)) = pending %}
<form class="card wide" method="post" action="/device">
  <input type="hidden" name="_csrf" value="{{ shell.csrf }}">
  <input type="hidden" name="code" value="{{ d.user_code }}">
  <h2><strong>{{ d.client }}</strong> wants to sign in as you</h2>
  <p class="small">Code <code>{{ d.user_code }}</code>, asked for <time title="{{ d.created_ms|when_i }}">{{ d.created_ms|ago_i }}</time>{% if !d.requester.is_empty() %} from <code>{{ d.requester }}</code>{% endif %}.</p>
  <p class="warn small">Approve only a code you started yourself, just now, on your own device. If someone sent you this code or link, deny it: they are asking for access to your account.</p>
  <p class="small">The app gets a token with what you allow here. It expires after 90 days without use, and you can revoke it under Settings → Tokens.</p>
  <label>Allow it to</label>
  <div class="scopes">
    {% for (name, what) in asked %}<label><input type="checkbox" name="scopes" value="{{ name }}" checked> <code>{{ name }}</code> <span class="small mute">{{ what }}</span></label>{% endfor %}
  </div>
  <button type="submit" name="action" value="approve">APPROVE</button>
  <button type="submit" name="action" value="deny" class="secondary">DENY</button>
</form>
{% else %}
<form class="card" method="post" action="/device">
  <input type="hidden" name="_csrf" value="{{ shell.csrf }}">
  <label for="code">The code your app shows</label>
  <input type="text" id="code" name="code" value="{{ code }}" required autofocus autocomplete="off" placeholder="BCDF-GHJK" style="text-transform:uppercase">
  <button type="submit" name="action" value="lookup">CONTINUE</button>
</form>
{% endif %}
{% endblock %}