{% extends "base.html" %}

{% block title %}{{ _('Set Up TOTP-based Two-Factor Authentication') }} — {{ service_name }}{% endblock %}

{% block content %}
<div class="text-center">
  <h1>{{ _('Set Up TOTP-based Two-Factor Authentication') }}</h1>
  <form action="{{ url_for('frontend.setup_totp_two_factor_authentication') }}" method="post">
    {{ setup_form.hidden_tag() }}
    <p class="text-muted">{{ _('Please scan the following QR Code using an app such as Google Authenticator and then enter the generated verification code in the field below to complete the setup:') }}</p>
    <img src="{{ qrcode_url }}" alt="{{ _('TOTP Setup QR Code') }}" />
    <p class="text-muted">{{ _('or enter the following setup key:') }}</p>
    <p id="totp_secret">{{ secret }}</p>
    <div class="form-group {% if setup_form.is_submitted() %}has-error{% endif %}">
      <input type="text" autocomplete="off" placeholder="{{ _('Verification Code') }}" name="{{ setup_form.code.name }}" class="form-control" style="width: 204px; display:inline-block;"/>
    </div>
    <div class="form-group">
      <input type="text" placeholder="{{ _('Description') }}" name="{{ setup_form.description.name }}" class="form-control" style="width: 204px; display:inline-block;"/>
    </div>
    <div>
      <input type="submit" value="{{ _('Set Up') }}" class="btn btn-primary" style="width:100px;" />
      <a href="{{ url_for('.user_me_preferences') }}" class="btn btn-default" style="width:100px;">{{ _('Cancel') }}</a>
    </div>
  </form>
</div>
{% endblock %}
