mailinabox/management/templates/mfa.html

<style>
    .twofactor #totp-setup-qr img {
        display: block;
        width: 256px;
        max-width: 100%;
        height: auto;
    }
</style>

<h2>Two-Factor Authentication</h2>

<p>When two-factor authentication is enabled, you will be prompted to enter a six digit code from an
authenticator app (usually on your phone) when you log into this control panel.</p>

<div class="panel panel-danger">
<div class="panel-heading">
Enabling two-factor authentication does not protect access to your email
</div>
<div class="panel-body">
Enabling two-factor authentication on this page only limits access to this control panel. Remember that most websites allow you to
reset your password by checking your email, so anyone with access to your email can typically take over
your other accounts. Additionally, if your email address or any alias that forwards to your email
address is a typical domain control validation address (e.g admin@, administrator@, postmaster@, hostmaster@,
webmaster@, abuse@), extra care should be taken to protect the account. <strong>Always use a strong password,
and ensure every administrator account for this control panel does the same.</strong>
</div>
</div>

<div class="twofactor">
    <div id="mfa-devices">
    </div>

    <form id="totp-setup" style="display: none">
        <h3>Add a TOTP Device</h3>

        <div class="form-group">
            <p>1. Install <a href="https://freeotp.github.io/">FreeOTP</a> or <a href="https://www.pcworld.com/article/3225913/what-is-two-factor-authentication-and-which-2fa-apps-are-best.html">any
            other two-factor authentication app</a> that supports TOTP.</p>
        </div>

        <div class="form-group">
            <p style="margin-bottom: 0">2. Scan the QR code in the app or directly enter the secret into the app:</p>
            <div id="totp-setup-qr"></div>
        </div>

        <div class="form-group">
            <label for="otp-label" style="font-weight: normal">3. Optionally, give your device a label so that you can remember what device you set it up on:</label>
            <input type="text" id="totp-setup-label" class="form-control" placeholder="my phone" />
        </div>

        <div class="form-group">
            <label for="otp" style="font-weight: normal">4. Use the app to generate your first six-digit code and enter it here:</label>
            <input type="text" id="totp-setup-token" class="form-control" placeholder="6-digit code" />
        </div>

        <input type="hidden" id="totp-setup-secret" />

        <div class="form-group">
            <p>When you click Enable Two-Factor Authentication, you will be logged out of the control panel and will have to log in
            again, now using your two-factor authentication app.</p>
            <button id="totp-setup-submit" disabled type="submit" class="btn">Enable Two-Factor Authentication</button>
        </div>
    </form>

    <form id="webauthn-setup" style="display: none">
        <h3>Add a WebAuthn Device</h3>
        <p>If you have a WebAuthn device such as a YubiKey, plug it in and click Add WebAuthn Device.</p>
        <button type="submit" class="btn" onclick="return do_enable_webauthn()">Add WebAuthn Device</button>
    </form>

    <div id="webauthn-setup" style="display: none">
    </div>

    <div id="output-2fa" class="panel panel-danger hidden">
        <div class="panel-body"></div>
    </div>

    <div id="mfa-device-templates" style="display: none">
      <form class="totp" style="margin: 1em 0; border: 1px solid #AAA; padding: 10px;">
          <p>Two-factor authentication is active for your account<span class="mfa-device-label"></span>.</p>
          <div class="form-group">
              <button type="submit" class="btn btn-danger">Disable TOTP Device</button>
          </div>
          <p style="margin-bottom: 0">You will have to log into the admin panel again after disabling two-factor authentication.</p>
      </form>
    </div>
</div>

<script>
    var el = {
        output: document.getElementById('output-2fa'),
        totpSetupForm: document.getElementById('totp-setup'),
        totpSetupToken: document.getElementById('totp-setup-token'),
        totpSetupSecret: document.getElementById('totp-setup-secret'),
        totpSetupLabel: document.getElementById('totp-setup-label'),
        totpQr: document.getElementById('totp-setup-qr'),
        totpSetupSubmit: document.querySelector('#totp-setup-submit'),
        webauthnSetupForm: document.getElementById('webauthn-setup'),
        wrapper: document.querySelector('.twofactor')
    }

    function update_setup_disabled(evt) {
        var val = evt.target.value.trim();

        if (
            typeof val !== 'string' ||
            typeof el.totpSetupSecret.value !== 'string' ||
            val.length !== 6 ||
            el.totpSetupSecret.value.length !== 32 ||
            !(/^\+?\d+$/.test(val))
        ) {
            el.totpSetupSubmit.setAttribute('disabled', '');
        } else {
            el.totpSetupSubmit.removeAttribute('disabled');
        }
    }

    function render_totp_setup(provisioned_totp) {
        $(el.totpSetupForm).show();

        var img = document.createElement('img');
        img.src = "data:image/png;base64," + provisioned_totp.qr_code_base64;

        var code = document.createElement('div');
        code.innerHTML = `Secret: ${provisioned_totp.secret}`;

        el.totpQr.appendChild(img);
        el.totpQr.appendChild(code);

        el.totpSetupToken.addEventListener('input', update_setup_disabled);
        el.totpSetupForm.addEventListener('submit', do_enable_totp);

        el.totpSetupSecret.setAttribute('value', provisioned_totp.secret);

        el.wrapper.classList.add('disabled');
    }

    function arrayBufferToBase64(a) { return btoa(String.fromCharCode(...new Uint8Array(a))); }
    function base64ToArrayBuffer(b) { return Uint8Array.from(atob(b), c => c.charCodeAt(0)); }

    function render_webauthn_setup(provisioning) {
        $(el.webauthnSetupForm).show();
        provisioning.challenge = base64ToArrayBuffer(provisioning.challenge);
        provisioning.user.id = new TextEncoder().encode(provisioning.user.name);
        window.mailinabix_mfa_webauthn_provision = provisioning;
    }

    function render_disable(mfa) {
        var panel = $('#mfa-device-templates .' + mfa.type).clone();
        $('#mfa-devices').append(panel);
        panel.attr('data-mfa-id', mfa.id);
        panel.on('submit', do_disable);
        if (mfa.label)
          panel.find(".mfa-device-label").text(" on device '" + mfa.label + "'");
    }

    function hide_error() {
        el.output.querySelector('.panel-body').innerHTML = '';
        el.output.classList.add('hidden');
    }

    function render_error(msg) {
        el.output.querySelector('.panel-body').innerHTML = msg;
        el.output.classList.remove('hidden');
    }

    function reset_view() {
        el.wrapper.classList.remove('loaded', 'disabled', 'enabled');
        $('#mfa-devices > *').remove();

        hide_error();

        $(el.totpSetupForm).hide();
        el.totpSetupForm.reset();
        el.totpSetupForm.removeEventListener('submit', do_enable_totp);
        el.totpSetupSecret.setAttribute('value', '');
        el.totpSetupToken.removeEventListener('input', update_setup_disabled);
        el.totpSetupSubmit.setAttribute('disabled', '');
        el.totpQr.innerHTML = '';

        $(el.webauthnSetupForm).hide();
    }

    function show_mfa() {
        reset_view();

        api(
            '/mfa/status',
            'POST',
            {},
            function(res) {
                el.wrapper.classList.add('loaded');

                res.enabled_mfa.forEach(function(mfa) {
                    if (mfa.type == "totp") {
                        render_disable(mfa);
                    }
                });

                if (res.new_mfa.totp)
                    render_totp_setup(res.new_mfa.totp);
                if (res.new_mfa.webauthn && 'credentials' in navigator)
                    render_webauthn_setup(res.new_mfa.webauthn);
            }
        );
    }

    function do_disable(evt) {
        evt.preventDefault();
        hide_error();

        api(
            '/mfa/disable',
            'POST',
            { id: $(this).attr('data-mfa-id') },
            function() {
                do_logout();
            }
        );

        return false;
    }

    function do_enable_totp(evt) {
        evt.preventDefault();
        hide_error();

        api(
            '/mfa/enable/totp',
            'POST',
            {
                token: $(el.totpSetupToken).val(),
                secret: $(el.totpSetupSecret).val(),
                label: $(el.totpSetupLabel).val()
            },
            function(res) { do_logout(); },
            function(res) { render_error(res); }
        );

        return false;
    }

    function do_enable_webauthn() {
        navigator.credentials.create({ publicKey: window.mailinabix_mfa_webauthn_provision })
        .then(function(creds) {
            api(
                '/mfa/enable/webauthn',
                'POST',
                {
                    attestationObject: arrayBufferToBase64(creds.response['attestationObject']),
                    clientDataJSON: arrayBufferToBase64(creds.response['clientDataJSON'])
                },
                function(res) { do_logout(); },
                function(res) { render_error(res); }
            );
        });
        return false;
    }

</script>