{% extends "base.html" %}
{% from "components/ui.html" import csrf_field with context %}
{% from "components/connection.html" import connection_fields %}
{% block title %}Connect an account · {{ APP_NAME }}{% endblock %}
{% block heading %}Connect an account{% endblock %}
{% block subheading %}<div class="sub">Look up how to reach an address, then sign in with its password</div>{% endblock %}
{% block content %}
{# Connect with a password: ``settings`` fill the server fields, a
   ``provider`` names the candidate's, ``suffix`` keeps ids apart. #}
{% macro connect_form(email, settings, suffix="", provider=None, password_label="Password", hint=None, folded=True, primary=True) %}
{% set ids = "-" ~ suffix if suffix else "" %}
<form method="post" action="/ui/accounts">
  {{ csrf_field() }}
  <input type="hidden" name="email" value="{{ email }}" />
  {% if provider %}<input type="hidden" name="provider" value="{{ provider }}" />{% endif %}
  <div class="form-grid">
    <div class="field">
      <label for="f-display_name{{ ids }}">Display name</label>
      <input id="f-display_name{{ ids }}" name="display_name" placeholder="optional" />
    </div>
    <div class="field">
      <label for="f-password{{ ids }}">{{ password_label }}</label>
      <input id="f-password{{ ids }}" name="password" type="password" autocomplete="new-password" required />
      {% if hint %}<span class="hint">{{ hint }}</span>{% endif %}
    </div>
  </div>
  {% if folded %}
  <details class="fold">
    <summary>Servers</summary>
    {{ connection_fields(settings, security) }}
  </details>
  {% else %}
  <div class="fold">{{ connection_fields(settings, security) }}</div>
  {% endif %}
  <div class="form-actions"><button{% if primary %} class="primary"{% endif %} type="submit">Connect</button></div>
</form>
{% endmacro %}
{% macro sign_in_form(provider, hint="") %}
<form class="inline" method="post" action="/ui/oauth/{{ provider }}/start">
  {{ csrf_field() }}
  <input type="hidden" name="login_hint" value="{{ hint }}" />
  <button class="primary" type="submit">Sign in with {{ provider | capitalize }}</button>
</form>
{% endmacro %}
{% if oauth_providers and not discovery %}
<section class="card">
  <header><h2>Sign in with your provider</h2></header>
  <div class="body toolbar">
    {% for provider in oauth_providers %}{{ sign_in_form(provider) }}{% endfor %}
    <span class="muted">No password is needed. The provider asks you, and this service keeps only a token it can renew.</span>
  </div>
</section>
{% endif %}
<section class="card">
  <header><h2>1. The address</h2></header>
  <div class="body">
    <form class="toolbar" method="post" action="/ui/accounts/discover">
      {{ csrf_field() }}
      <input class="grow" name="email" type="email" value="{{ email }}" placeholder="name@example.org" required />
      <button class="primary" type="submit">Look up</button>
    </form>
    <p class="hint faint">Asks public sources how the address's provider is reached. No password leaves this service.</p>
  </div>
</section>

{% if discovery %}
{% for hint in discovery.hints %}
<div class="notice warn">{{ hint.text }}{% if hint.url %} <a href="{{ hint.url }}" rel="noreferrer">More</a>{% endif %}</div>
{% endfor %}

{% for candidate in sign_ins %}
<section class="card">
  <header>
    <h2>2. {{ candidate.name or discovery.domain }}</h2>
    <span class="meta">found by {{ candidate.source.value }}</span>
  </header>
  <div class="body toolbar">
    {{ sign_in_form(candidate.oauth_provider, discovery.email) }}
    <span class="muted">No password is needed. {{ candidate.oauth_provider | capitalize }} asks you, and this service keeps only a token it can renew.</span>
  </div>
</section>
{% endfor %}

{% for candidate in usable %}
<section class="card">
  <header>
    <h2>2. {{ candidate.name or discovery.domain }}</h2>
    <span class="meta">found by {{ candidate.source.value }}</span>
    <span class="right">
      {% if candidate.confirmed %}<span class="tag ok">trusted source</span>{% else %}<span class="tag warn">check these servers</span>{% endif %}
    </span>
  </header>
  <div class="body">
    {% if not candidate.confirmed %}
    <div class="notice warn">This answer does not come from the domain itself or from a known provider. Connect only if the servers below are really your provider's.</div>
    {% endif %}
    {% for hint in candidate.hints %}
    <p class="muted">{{ hint.text }}{% if hint.url %} <a href="{{ hint.url }}" rel="noreferrer">More</a>{% endif %}</p>
    {% endfor %}
    {{ connect_form(discovery.email, candidate.settings, suffix=loop.index, provider=candidate.provider.value, password_label="App password" if candidate.credential.value == "app_password" else "Password", hint="Tried against the provider first, then stored encrypted. Never shown again.") }}
  </div>
</section>
{% endfor %}

<section class="card">
  <header><h2>{{ "Or set it up by hand" if usable or sign_ins else "2. Set it up by hand" }}</h2></header>
  <div class="body">
    {% if not usable and not sign_ins %}<p class="muted">No way to connect {{ discovery.email }} over IMAP was found. Enter your provider's servers.</p>{% endif %}
    {{ connect_form(discovery.email, {}, folded=False, primary=False) }}
  </div>
</section>

<details class="card fold">
  <summary class="body">What the sources answered</summary>
  <div class="body tight">
    <table>
      <tbody>
        {% for report in discovery.sources %}
        <tr><td>{{ report.source.value }}</td><td>{{ report.outcome.value }}</td><td class="muted">{{ report.message | or_missing }}</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</details>
{% endif %}
{% endblock %}