rhodecode/templates/configure_2fa.mako

<%inherit file="base/root.mako"/>

<%def name="title()">
    ${_('Setup 2FA')}
    %if c.rhodecode_name:
        &middot; ${h.branding(c.rhodecode_name)}
    %endif
</%def>

<style>body{background-color:#eeeeee;}</style>

<div class="loginbox" style="width: 600px">

    <div class="header-account">
        <div id="header-inner" class="title">
            <div id="logo">
                % if c.rhodecode_name:
                <div class="branding">
                   <a href="${h.route_path('home')}">${h.branding(c.rhodecode_name)}</a>
                </div>
                % endif
            </div>
        </div>
    </div>

    <div class="loginwrapper">
        <rhodecode-toast id="notifications"></rhodecode-toast>

        <div class="sign-in-title">
            <h1>${_('Set up the authenticator app')} - ${_('scan the QR code')}</h1>
        </div>
        <div class="inner form">
            ${h.secure_form(h.route_path('setup_2fa'), request=request, id='totp_form')}
            <strong>${_('Use an authenticator app to scan.')}</strong><br/>

             ## QR CODE
            <code>${_('Account')}: ${totp_name}</code><br/>
            <div class="qr-code-container">
                <img alt="qr-code" src="data:image/png;base64, ${qr}"/>
            </div>

            <div id="alternativeCode" style="margin: -10px 0 5px 0">${_('Unable to scan?')} <a id="toggleLink">${_('Click here')}</a></div>

            ## Secret alternative code
            <div id="secretDiv" style="display: none">

                <div style="padding: 10px 0">
                  <strong style="padding: 4px 0">${_('Copy and use this code to manually set up an authenticator app')}</strong>
                  <code>${key}</code><i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${key}" title="${_('Copy the secret key')}" ></i><br/>
                  <code>${_('type')}: time-based</code>
                </div>

            </div>

            <label for="totp">${_('Verify the code from the app')}:</label>
            ${h.text('totp', class_='form-control', )}
            <div id="formErrors">
                % if 'totp' in errors:
                    <span class="error-message">${errors.get('totp')}</span>
                    <br />
                % endif
                % if 'secret_totp' in errors:
                    <span class="error-message">SECRET:${errors.get('secret_totp')}</span>
                    <br />
                % endif
            </div>
            ${h.hidden('secret_totp', key)}
            ${h.submit('verify_2fa',_('Verify'), class_="btn sign-in")}

            ${h.end_form()}
        </div>

    </div>

</div>

<script type="text/javascript">

$(document).ready(function() {

    $( "#toggleLink" ).on("click", function() {
      $( "#secretDiv" ).toggle();
      $( "#alternativeCode").hide();
      $('#totp').focus();
    });

    $('#totp').focus();
})

</script>