two-factor-settings.twig

{% requireLogin %}

{% set currentUserSecret = craft.twoFactorAuthentication.getCurrentUserSecret() %}
{% set currentUserQRCode = craft.twoFactorAuthentication.getCurrentUserQRCode() %}

<h2>{{ 'Why two-factor authentication?'|t('two-factor-authentication') }}</h2>
<p>
    {{ 'With two-factor authentication you can improve protection of your account, because your phone (or other device) is needed as a second step during login.'|t('two-factor-authentication') }}<br />
    {{ 'When enabled, login has an extra required step: First you login as usual, second you need to enter a code generated by your personal device.'|t('two-factor-authentication') }}
</p>

<hr />

{% if craft.twoFactorAuthentication.isTwoFactorEnabled() %}

    <h2 class="success">{{ 'Your account is secured.'|t('two-factor-authentication') }}</h2>
    <p>{{ 'Two-factor authentication is enabled for your personal account.'|t('two-factor-authentication') }}</p>

    <hr />

    <h2>{{ 'Disable two-factor authentication'|t('two-factor-authentication') }}</h2>
    <p>{{ 'To disable two-factor authentication, click the button below.'|t('two-factor-authentication') }}</p>

    <form id="turnoff-form" action="{{ actionUrl('two-factor-authentication/settings/turn-off') }}" method="post" accept-charset="UTF-8">
        {{ csrfInput() }}

        <input id="submit" class="btn submit icon insecure" type="submit" value="{{- "I don't want two-factor authentication"|t('two-factor-authentication') -}}">
    </form>

{% else %}

    <h2>{{ 'Step 1: Download app'|t('two-factor-authentication') }}</h2>
    <p>{{ 'Install a TOTP app like {linkOpen}Google Authenticator{linkClose} to set-up.'|t('two-factor-authentication', {
        linkOpen: '<a href="https://support.google.com/accounts/answer/1066447?co=GENIE.Platform%3DAndroid&hl=en" target="_blank">',
        linkClose: '</a>'
        })|raw }}
    </p>

    <hr />

    <h2>{{ 'Step 2: Setup your device with your personal secret'|t('two-factor-authentication') }}</h2>
    <p>{{ 'To turn on two-factor authentication for your personal account, please use either the secret code or the QR code.'|t('two-factor-authentication') }}</p>

    <table id="groups" class="data fullwidth collapsible">
        <thead>
            <th scope="col">{{ 'Your secret code:'|t('two-factor-authentication') }}</th>
            <th scope="col">{{ 'Your QR code:'|t('two-factor-authentication') }}</th>
        </thead>
        <tbody>
            <tr>
                <td width="200">
                    <code>
                        {% for chunk in currentUserSecret %}
                            <span>{{ chunk }}</span>
                        {% endfor %}
                    </code>
                    <p class="instructions">{{ 'Make sure to setup using time-based authentication.'|t('two-factor-authentication') }}</p>
                </td>
                <td>
                    <img src="{{ currentUserQRCode|raw }}" alt="" />
                </td>
            </tr>
        </tbody>
    </table>

    <hr />

    <h2>{{ 'Step 3: Verify the code from your device'|t('two-factor-authentication') }}</h2>
    <p>{{ 'Please enter the code from your device, do note it changes every few seconds.'|t('two-factor-authentication') }}</p>

    <form id="verify-form" action="{{ actionUrl('two-factor-authentication/settings/turn-on') }}" method="post" accept-charset="UTF-8">
        {{ csrfInput() }}

        <input id="authenticationCode" type="text" name="authenticationCode" placeholder="{{ "Authentication Code"|t('two-factor-authentication') }}">

        <div class="buttons">
            <input id="submit" class="btn submit disabled icon secure" type="submit" value="{{ "Verify"|t('two-factor-authentication') }}">
            <div id="spinner" class="spinner hidden"></div>
        </div>
    </form>

{% endif %}