{% extends "base.html" %}
{% from "components/ui.html" import breadcrumb, 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 %}{{ breadcrumb([("Accounts", "/ui/accounts"), ("Connect an account", None)]) }}{% endblock %}
{% block content %}
{# Connect with a password: ``settings`` fill the server fields, a
   ``provider`` names the candidate's, ``suffix`` keeps ids apart,
   ``error`` shows under the password why the last try was refused. #}
{% macro connect_form(email, settings, suffix="", provider=None, password_label="Password", hint=None, folded=True, primary=True, display_name="", error=None) %}
{% 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">
    {% if not provider %}
    <div class="field">
      <label for="f-provider{{ ids }}">Protocol</label>
      <select id="f-provider{{ ids }}" name="provider">
        {% if "imap" in offers %}<option value="imap" selected>IMAP</option>{% endif %}
        {% if "pop3" in offers %}<option value="pop3">POP3: the inbox only, no folders, no read state</option>{% endif %}
      </select>
    </div>
    {% endif %}
    <div class="field">
      <label for="f-display_name{{ ids }}">Display name</label>
      <input id="f-display_name{{ ids }}" name="display_name" value="{{ display_name }}" placeholder="optional" />
    </div>
    <div class="field{{ ' invalid' if error }}">
      <label for="f-password{{ ids }}">{{ password_label }}</label>
      <input id="f-password{{ ids }}" name="password" type="password" autocomplete="new-password" required{% if error %} autofocus aria-describedby="e-password{{ ids }}"{% endif %} />
      {% if error %}<span class="field-error" id="e-password{{ ids }}" role="alert">{{ error }}</span>{% endif %}
      {% if hint %}<span class="hint">{{ hint }}</span>{% endif %}
    </div>
  </div>
  {% if folded %}
  <details class="fold">
    <summary>Servers</summary>
    {{ connection_fields(settings, security, suffix=suffix, protocol=provider) }}
  </details>
  {% else %}
  <div class="fold">{{ connection_fields(settings, security, suffix=suffix, protocol=provider) }}</div>
  {% endif %}
  <div class="form-actions"><button{% if primary %} class="primary"{% endif %} type="submit">Connect</button></div>
</form>
{% endmacro %}
{# Two ways: in this browser, sent back to this service, or with a code
   entered at the provider on any device. The first only where the
   provider can send the browser back here (``in_browser``), the second
   only where it offers codes (``with_code``). #}
{% macro sign_in_form(provider, hint="") %}
{% if provider in in_browser %}
<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 | signs_in_at }}</button>
</form>
{% endif %}
{% if provider in with_code %}
<form class="inline" method="post" action="/ui/oauth/{{ provider }}/device">
  {{ csrf_field() }}
  <button{% if provider not in in_browser %} class="primary"{% endif %} type="submit">Sign in {% if provider in in_browser %}with a code{% else %}with {{ provider | signs_in_at }} and a code{% endif %}</button>
</form>
{% endif %}
{% endmacro %}
{% macro ways_hint(provider) %}{% if provider in in_browser and provider in with_code %}In the browser, the provider sends you back to this service. Or sign in with a code on any device.{% elif provider in in_browser %}In the browser, the provider sends you back to this service.{% else %}{{ provider | signs_in_at }} sends a browser back to this service only at localhost, so you sign in with a code on any device.{% endif %}{% endmacro %}

<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" aria-label="Address" required{% if not discovery and not retry %} autofocus{% endif %} />
      <button class="{{ 'primary' if not discovery and not retry }}" 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 retry %}
<section class="card">
  <header><h2>2. Your servers</h2><span class="meta">The provider refused. Nothing was stored.</span></header>
  <div class="body">
    {{ connect_form(email, retry.settings, provider=retry.provider, password_label="API token" if retry.settings.get("auth") == "token" else "Password", folded=False, display_name=retry.display_name, error=retry.error, hint="Tried against the provider first, then stored encrypted. Never shown again.") }}
  </div>
</section>
{% endif %}

{% 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 %}

<h2 class="step-title">2. How to connect {{ discovery.email }}</h2>

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

{% for candidate in usable %}
<section class="card way">
  <header>
    <h2>{{ candidate.name or discovery.domain }}</h2>
    <span class="meta">found by {{ candidate.source.value }}</span>
    <span class="right">
      {% if loop.first and not sign_ins %}<span class="tag accent">recommended</span>{% endif %}
      {% 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": "App password", "api_token": "API token"}.get(candidate.credential.value, "Password"), hint="Tried against the provider first, then stored encrypted. Never shown again.") }}
  </div>
</section>
{% endfor %}

{% if oauth_providers and not sign_ins %}
<section class="card way">
  <header><h2>Sign in with your provider</h2><span class="meta">if the address is at one of these</span></header>
  <div class="body toolbar">
    {% for provider in oauth_providers %}{{ sign_in_form(provider, discovery.email) }}<span class="muted">{{ ways_hint(provider) }}</span>{% endfor %}
  </div>
</section>
{% endif %}

{% if "imap" in offers or "pop3" in offers %}
<details class="card way"{% if not usable and not sign_ins %} open{% endif %}>
  <summary class="card-summary"><h2>Set up by hand</h2></summary>
  <div class="body">
    {% if not usable and not sign_ins %}<p class="muted">No way to connect {{ discovery.email }} over JMAP, IMAP or POP3 was found. Enter your provider's servers.</p>{% endif %}
    {{ connect_form(discovery.email, {}, suffix="hand", folded=False, primary=not usable and not sign_ins) }}
  </div>
</details>
{% endif %}

{% if "jmap" in offers %}
<details class="card way">
  <summary class="card-summary"><h2>Set up a JMAP server by hand</h2></summary>
  <div class="body">
    {{ connect_form(discovery.email, {}, suffix="jmap", provider="jmap", password_label="Password or API token", folded=False, primary=False, hint="Choose below which one it is. Tried against the server first, then stored encrypted.") }}
  </div>
</details>
{% endif %}

<details class="card">
  <summary class="card-summary"><h2>What the sources answered</h2></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 %}
<div class="form-actions"><a class="btn" href="/ui/accounts">Cancel</a></div>
{% endblock %}