Apache Allura™

{#-
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
-#}
{% set hide_left_bar = True %}
{% set current_menu_item = '/auth/preferences' %}
{% extends "allura:templates/user_account_base.html" %}

{% block title %}{{c.user.username}} / Multifactor Authentication Setup{% endblock %}

{% block header %}Multifactor Authentication Setup for {{c.user.username}}{% endblock %}

{% block content %}
  {{ super() }}
  <div class='grid-20'>
    {% if setup %}
        {% if c.user.get_pref('multifactor') %}
            <h3>Warning: this will invalidate your previous multifactor configuration.</h3>
        {% endif %}
        <h2>Install App</h2>
        <form action="totp_send_link" id="totp_send_link" method="post">
        <p>To use two-factor authentication, you will need to install an app on your phone.<br>
            Install Google Authenticator for
            <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"><b>Android</b></a>
            or <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605"><b>iOS</b></a>.
            <a href="#" class="ajax-submit-form">Email me these links.</a>
            <br>
            Or use another app like Duo Mobile, Authy, or Authenticator for Windows phones.
        </p>
        {{ lib.csrf_token() }}
        </form>
    {% endif %}

    <h2>Scan this with your app:</h2>
    <img class="qrcode" src="{{ h.base64uri(qr) }}"/>
    <p style="margin-left:1rem">
        Or enter setup key: {{ key_b32 }}
    </p>

    {% if setup %}
        <h2>Enter the code</h2>
        <form method="POST" action="totp_set" id="totp_set">
        <p>
            Enter the {{ config['auth.multifactor.totp.length'] }}-digit code from the app, to confirm it is set up correctly:<br>
            {% if request.validation.errors['code'] %}
                <span class="fielderror">{{ request.validation.errors['code'] }}</span><br>
            {% endif %}
            <input type="text" name="code" autofocus autocomplete="off" maxlength="{{ config['auth.multifactor.totp.length']|int + 1 }}"/>
            {{ lib.csrf_token() }}
            <br>
            <input type="submit" value="Submit">
            <a class="cancel" href="/auth/preferences/">Cancel</a>
        </p>
        </form>
    {% else %}
        <p>
            You may use this to set up additional devices with the same two-factor key.<br>
            <br>
            If you are replacing a device, please <a href="totp_new">regenerate a brand new key</a>.<br>
            <br>
            <a href="/auth/preferences/">Back</a>
        </p>
    {% endif %}
  </div>
{% endblock %}

{% block extra_css %}
<style type="text/css">
    .qrcode {
        /* compensate for whitespace on QR code image */
        position: relative;
        top: -15px;
        margin-bottom: -15px;
    }
    a.cancel {
        /* align with floated button */
        display: inline-block;
        margin: 6px 10px;
    }
</style>
{% endblock %}

{% block extra_js %}
<script type="text/javascript">
$(function() {
      $('a.ajax-submit-form').click(function(e){
          e.preventDefault();
          $form = $(this).closest('form');
          $.post($form.attr('action'), $form.serialize())
                  .done(function() {
                      $('#messages').notify({message: 'Email sent!'});
                  })
                  .fail(function() {
                      $('#messages').notify({message: 'Error sending email', status: 'error'});
                  });
      });
});
</script>
{% endblock %}