{#
  This template receives different input based on state of tf-setup. In addition
  to form values the following are available:
  On GET or unsuccessful POST:
    choices: Value of SECURITY_TWO_FACTOR_ENABLED_METHODS (with possible addition of 'delete')
    two_factor_required: Value of SECURITY_TWO_FACTOR_REQUIRED
    primary_method: the translated name of two-factor method that has already been set up.
  On successful POST:
    chosen_method: which 2FA method was chosen (e.g. sms, authenticator)
    choices: Value of SECURITY_TWO_FACTOR_ENABLED_METHODS
    changing: boolean - True if user is trying to change/disable 2FA
    state_token: if changing - this is the new (non-session) way to validate
      the new 2FA method

    If chosen_method == 'authenticator':
      authr_qrcode: the image source for the qrcode
      authr_key: same key as in qrcode - for possible manual entry
      authr_username: same username as in qrcode
      authr_issuer: same issuer as in qrcode
#}
{% set title = title|default(_fsdomain("Two-Factor Setup")) %}
{% extends "security/base.html" %}
{% from "security/_macros.html" import render_field_with_errors, render_field,
 render_field_no_label, render_field_errors, render_form_errors, render_csrf %}

{% block content %}
  {% include "security/_messages.html" %}
  <h1>{{ _fsdomain("Two-Factor authentication adds an extra layer of security to your account") }}</h1>
  <h3>{{ _fsdomain("In addition to your username and password, you'll need to use a code.") }}</h3>
  <form action="{{ url_for_security('two_factor_setup') }}" method="post" name="two_factor_setup_form">
    {{ two_factor_setup_form.hidden_tag() }}
    {{ render_form_errors(two_factor_setup_form) }}
    <div class="fs-div">{{ _fsdomain("Currently setup two-factor method: %(method)s", method=primary_method) }}</div>
    <hr class="fs-gap">
    {% for subfield in two_factor_setup_form.setup %}
      {% if subfield.data in choices %}{{ render_field_with_errors(subfield) }}{% endif %}
    {% endfor %}
    <div class="fs-div">
      {% if "sms" in choices %}
        {{ render_field_with_errors(two_factor_setup_form.phone) }}
      {% endif %}
    </div>
    <div class="fs-gap">
      {{ render_field_errors(two_factor_setup_form.setup) }}
      {{ render_field_errors(two_factor_setup_form.csrf_token) }}
      {{ render_field(two_factor_setup_form.submit) }}
    </div>
    {% if chosen_method=="authenticator" %}
      <hr>
      <div class="fs-center">
        <div>
          {{ _fsdomain("Open an authenticator app on your device and scan the following QRcode (or enter the code below manually) to start receiving codes:") }}
        </div>
        <div>
          <img alt="{{ _fsdomain('Two-Factor authentication code') }}" id="qrcode" src="{{ authr_qrcode }}">
          {# TODO: add width and height attrs #}
        </div>
        <div>{{ authr_key }}</div>
      </div>
    {% endif %}
  </form>
  {% if chosen_method %}
    {# Hide this when first setting up #}
    {# This is the fill in code part #}
    <hr class="fs-gap">
    <div class="fs-important">{{ _fsdomain("Enter code to complete setup") }}</div>
    {% if changing %}
      {% set faction = url_for_security('two_factor_setup_validate', token=state_token) %}
    {% else %}
      {% set faction = url_for_security('two_factor_token_validation') %}
    {% endif %}
    <form action="{{ faction }}" method="post" name="two_factor_verify_code_form">
      {# explicitly render csrf_token so we can change the ID so we don't get duplicates #}
      {{ render_csrf(two_factor_verify_code_form, "code") }}
      {{ render_field_with_errors(two_factor_verify_code_form.code, placeholder=_fsdomain("enter numeric code")) }}
      <div class="fs-gap">{{ render_field(two_factor_verify_code_form.submit) }}</div>
    </form>
  {% else %}
    {% if security.support_mfa and security.multi_factor_recovery_codes %}
      <hr class="fs-gap">
      <h3>{{ _fsdomain("Recovery Codes") }}</h3>
      <div class="fs-div">
        {{ _fsdomain("This application supports setting up recovery codes.") }}
        <a href="{{ url_for_security('mf_recovery_codes') }}">{{ _fsdomain("You can set them up here.") }}</a>
      </div>
    {% endif %}
    {% if security.webauthn %}
      <hr class="fs-gap">
      <h3>{{ _fsdomain("WebAuthn") }}</h3>
      <div class="fs-div">
        {{ _fsdomain("This application supports WebAuthn security keys.") }}
        <a href="{{ url_for_security('wan_register') }}">{{ _fsdomain("You can set them up here.") }}</a>
      </div>
    {% endif %}
  {% endif %}

  {% include "security/_menu.html" %}
{% endblock content %}
