jumpserver/apps/users/templates/users/mfa_setting.html

{% extends '_without_nav_base.html' %}
{% load static %}
{% load i18n %}

{% block body %}
    <style>
    .help-inline {
        color: #7d8293;
        font-size: 12px;
        padding-right: 10px;
    }

    .btn-xs {
        width: 54px;
    }

    .onoffswitch-switch {
        height: 20px;
    }
    </style>
    <article>
        <div>
{#            // Todoi:#}
            <h3>{% trans 'Enable MFA' %}</h3>
            <div class="row" style="padding-top: 10px">
                <li class="col-sm-6" style="font-size: 14px">{% trans 'Enable' %} MFA</li>
                <div class="switch col-sm-6">
                    <span class="help-inline">
                        {% if user.mfa_force_enabled %}
                            {% trans 'MFA force enable, cannot disable' %}
                        {% endif %}
                    </span>
                    <div class="onoffswitch" style="float: right">
                        <input type="checkbox" class="onoffswitch-checkbox"
                                id="mfa-switch" onchange="switchMFA()"
                                {% if user.mfa_force_enabled %} disabled {% endif %}
                                {% if user.mfa_enabled %} checked {% endif %}
                        >
                        <label class="onoffswitch-label" for="mfa-switch">
                            <span class="onoffswitch-inner"></span>
                            <span class="onoffswitch-switch"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div id="mfa-setting" style="display: none; padding-top: 30px">
            <h3>{% trans 'MFA setting' %}</h3>
            <div style="height: 100%; width: 100%;">
                {% for b in mfa_backends %}
                    <div class="row" style="padding-top: 10px">
                        <li class="col-sm-6" style="font-size: 14px">
                            {{ b.display_name }}
                        </li>
                        <span class="col-sm-6">
                        {% if b.is_active %}
                            <button class="btn btn-warning btn-xs" style="float: right"
                                    {% if not b.can_disable %} disabled {% endif %}
                                    onclick="goTo('{{ b.get_disable_url }}')"
                            >
                                {% trans 'Reset' %}
                            </button>
                            <span class="help-inline">{{ b.help_text_of_disable }}</span>
                        {% else %}
                            <button class="btn btn-primary btn-xs" style="float: right"
                                    onclick="goTo('{{ b.get_enable_url }}')"
                            >
                                {% trans 'Enable' %}
                            </button>
                            <span class="help-inline">{{ b.help_text_of_enable }}</span>
                        {% endif %}
                    </span>
                    </div>
                {% endfor %}
            </div>
        </div>
    </article>
    <script src="{% static 'js/jumpserver.js' %}"></script>
    <script>
    function goTo(url) {
        window.open(url, '_self')
    }

    function switchMFA() {
        const switchRef = $('#mfa-switch')
        const enabled = switchRef.is(":checked")
        requestApi({
            url: '/api/v1/users/profile/',
            data: {
                mfa_level: enabled ? 1 : 0
            },
            method: 'PATCH',
            success() {
                showSettingOrNot()
            },
            error() {
                switchRef.prop('checked', !enabled)
            }
        })
        showSettingOrNot()
    }

    function showSettingOrNot() {
        const enabled = $('#mfa-switch').is(":checked")
        const settingRef = $('#mfa-setting')
        if (enabled) {
            settingRef.show()
        } else {
            settingRef.hide()
        }
    }

    window.onload = function () {
        showSettingOrNot()
    }
    </script>
{% endblock %}