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">
    <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">
        <h1>${_('Setup the authenticator app')}</h1>

        <p>Authenticator apps like <a href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2' target="_blank" rel="noopener noreferrer">Google Authenticator</a>, etc. generate one-time passwords that are used as a second factor to verify you identity.</p>
        <rhodecode-toast id="notifications"></rhodecode-toast>

        <div id="setup_2fa">
            ${h.secure_form(h.route_path('setup_2fa'), request=request, id='totp_form')}
            <div class="sign-in-title">
                <h1>${_('Scan the QR code')}: "${totp_name}"</h1>
            </div>
            <p>${_('Use an authenticator app to scan.')}</p>
            <img alt="qr-code" src="data:image/png;base64, ${qr}"/>

            <p>${_('Unable to scan?')} <a id="toggleLink">${_('Click here')}</a></p>
            <div id="secretDiv" class="hidden">
                <p>${_('Copy and use this code to manually set up an authenticator app')}</p>
                <input type="text" class="input-monospace" value="${key}" id="secret_totp" name="secret_totp" style="width: 400px"/>
                <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${key}" title="${_('Copy the secret key')}"></i>
            </div>

            <div id="verify_2fa">

                <div class="form mt-4">
                    <div class="field">
                        <p>
                        <div class="label">
                            <label for="totp" class="form-label text-dark font-weight-bold" style="text-align: left;">${_('Verify the code from the app')}:</label>
                        </div>
                        </p>
                        <p>
                        <div>
                            <div class="input-group">
                                ${h.text('totp', class_='form-control', style='width: 40%;')}
                                <div id="formErrors">
                                    % if 'totp' in errors:
                                        <span class="error-message">${errors.get('totp')}</span>
                                        <br />
                                    % endif
                                </div>
                                <div class="input-group-append">
                                    ${h.submit('verify_2fa',_('Verify'),class_="btn btn-primary", style='width: 40%;')}
                                </div>
                            </div>
                        </div>
                        </p>
                    </div>
                </div>
            </div>
            ${h.end_form()}
        </div>
    </div>
</div>

<script>

document.getElementById('toggleLink').addEventListener('click', function() {
let hiddenField = document.getElementById('secretDiv');
if (hiddenField.classList.contains('hidden')) {
  hiddenField.classList.remove('hidden');
}
});

</script>