{% extends "authentic2/base-page.html" %}
{% load i18n %}

{% block content %}
  <div>
    <p>
      {% blocktrans trimmed %}
        To secure your account login, you can set up an app on your smartphone (or any other
        compatible device) that will allow you to generate the one-time codes required each time
        you log in.
      {% endblocktrans %}
    </p>

    <h2>{% trans "Step 1: Install a One-Time Code Generator application" %}</h2>
    <p>
      {% blocktrans trimmed %}
        You need to install a one-time code generator app on your smartphone (or any other
        compatible device). This app must support the
        <a href="http://en.wikipedia.org/wiki/Time-based_One-time_Password_Algorithm">TOTP</a>
        standard. If you don’t already have such an app (this is a common feature of password
        manager applications.), you can install one of the suggested apps below:
      {% endblocktrans %}
    </p>
    <ul>
      <li>
        {% blocktrans trimmed %}
          If you use an <strong>Android</strong> phone, you can use the
          <strong>Aegis Authenticator</strong> app, available on the
          <a href="https://play.google.com/store/apps/details?id=com.beemdevelopment.aegis">Google
            Play Store</a> or on <a href="https://f-droid.org/en/packages/com.beemdevelopment.aegis/">
              F-Droid</a>
        {% endblocktrans %}
      </li>
      <li>
        {% blocktrans trimmed %}
          If you use an <strong>Apple</strong> phone, you can use the <strong>Authy</strong> app,
          available on the <a href="https://apps.apple.com/us/app/twilio-authy/id494168017">App
            Store</a>
        {% endblocktrans %}
      </li>
    </ul>

    <h2>{% trans "Step 2: Setting Up the One-Time Code Generator application" %}</h2>
    <p>
      {% blocktrans trimmed %}
        This setup only needs to be done once: once configured, you will only need to open the app
        and enter the displayed code.
      {% endblocktrans %}
    </p>
    <p>
      {% blocktrans trimmed %}
        To set up authentication, please open your one-time code generator app and follow one of
        the instructions below:
      {% endblocktrans %}
    </p>

    <h3>{% trans "Automatic Setup" %}</h3>
    <p>
      {% blocktrans trimmed %}
        If your app allows it, you can scan the QR code below to set up the app automatically:
      {% endblocktrans %}
    </p>

    <div style="text-align: center">
      <img src="data:image/png;base64,{{ uri.decode }}"
           alt="{% trans "If no image is displayed here, please use the manual method." %}">
    </div>

    <h3>{% trans "Manual Setup" %}</h3>
    <p>
      {% blocktrans trimmed %}
        You can also set up the app manually by entering the following secret key into the app:
      {% endblocktrans %}
    </p>
    <pre id="totp_secret" style="text-align: center">{{ secret }}</pre>

    <script type="text/javascript">
      $("#totp_secret")
        .on("mouseover", function() { $(this).css("filter", ""); })
        .on("mouseleave", function() { $(this).css("filter", "blur(0.3em)"); })
        .css("filter", "blur(0.3em)");
    </script>

    <p>{% trans "You will also find below the additional parameters that may be required:" %}</p>
    <ul>
      <li><strong>{% trans "Algorithm:" %}</strong> <em>SHA-1</em></li>
      <li><strong>{% trans "Code renewal interval:" %}</strong> <em>{% trans "30 seconds" %}</em></li>
      <li><strong>{% trans "Code length:" %}</strong> <em>{% trans "6 digits" %}</em></li>
    </ul>

    <p>
      <strong>{% trans "Note:" %}</strong>
      {% trans "These parameters correspond to the standard described in RFC 6638." %}
    </p>

    <h2>{% trans "Step 3: Validating Your First One-Time Code" %}</h2>

    <form method="post" autocomplete="off" action="">
      {% csrf_token %}
      {{ form.as_p }}
      <button class="submit-button" name="{{ submit_name }}">{% trans "Verify the code" %}</button>
    </form>

{% endblock %}