sftpgo/templates/webclient/mfa.html

<!--
Copyright (C) 2023 Nicola Murino

This WebUI uses the KeenThemes Mega Bundle, a proprietary theme:

https://keenthemes.com/products/templates-mega-bundle

KeenThemes HTML/CSS/JS components are allowed for use only within the
SFTPGo product and restricted to be used in a resealable HTML template
that can compete with KeenThemes products anyhow.

This WebUI is allowed for use only within the SFTPGo product and
therefore cannot be used in derivative works/products without an
explicit grant from the SFTPGo Team (support@sftpgo.com).
-->
{{template "base" .}}

{{- define "page_body"}}
<div class="card shadow-sm">
    <div class="card-header bg-light">
        <h3 data-i18n="2fa.title" class="card-title text-primary">Two-factor authentication using Authenticator apps</h3>
    </div>
    <div class="card-body">
        <div class="notice d-flex bg-light-primary rounded border-primary border border-dashed p-6 mb-5">
            <i class="ki-duotone ki-shield-tick fs-2tx text-primary me-4">
                <span class="path1"></span>
                <span class="path2"></span>
            </i>
            <div class="d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap">
                <div class="mb-3 mb-md-0 fw-semibold">
                    <h4 class="text-gray-900 fw-bold">
                        {{- if .TOTPConfig.Enabled}}
                        <span data-i18n="2fa.msg_enabled">Two-factor authentication is enabled</span> {{- if gt (len .TOTPConfigs) 1 }} ({{$.TOTPConfig.ConfigName}}) {{- end}}
                        {{- else}}
                        <span data-i18n="2fa.msg_disabled">Secure Your Account</span>
                        {{- end}}
                    </h4>
                    <div class="fs-6 text-gray-800 pe-7">
                        <span data-i18n="2fa.msg_info">
                            Two-factor authentication adds an extra layer of security to your account. To log in you'll need
                            to provide an additional authentication code.
                        </span>
                    </div>
                </div>
                {{- if .TOTPConfig.Enabled}}
                <button type="button" id="disable_btn" class="btn btn-danger ms-4 px-6 align-self-center text-nowrap">
                    <span data-i18n="general.disable" class="indicator-label">
                        Disable
                    </span>
                    <span data-i18n="general.wait" class="indicator-progress">
                        Please wait...
                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>
                </button>
                {{- end}}
            </div>
        </div>

        {{- template "errmsg" ""}}

        <div class="form-group row mt-10">
            <label data-i18n="general.configuration" class="col-md-3 col-form-label">Configuration</label>
            <div class="col-md-9">
                <select id="id_config" name="config_name" class="form-select" data-control="i18n-select2" data-hide-search="true">
                    <option data-i18n="general.none" value="">None</option>
                    {{range .TOTPConfigs}}
                    <option value="{{.}}" {{if eq . $.TOTPConfig.ConfigName}}selected{{end}}>{{.}}</option>
                    {{end}}
                </select>
            </div>
        </div>

        <div class="form-group row mt-10">
            <label data-i18n="2fa.require_for" class="col-md-3 col-form-label required">
                Require 2FA for
            </label>
            <div class="col-md-9">
                <select id="id_protocols" name="multi_factor_protocols" class="form-select" data-control="i18n-select2" data-hide-search="true" data-close-on-select="false" multiple="multiple">
                    <option></option>
                    {{range $protocol := .Protocols}}
                    <option value="{{$protocol}}" {{range $p :=$.TOTPConfig.Protocols }}{{if eq $p $protocol}}selected{{end}}{{end}}>{{$protocol}}
                    </option>
                    {{end}}
                </select>
            </div>
        </div>

        <div class="d-flex justify-content-end mt-15">
            {{- if .TOTPConfig.Enabled }}
            <button type="button" id="generate_secret_btn" class="btn btn-light-primary px-10 me-10 d-none">
                <span data-i18n="2fa.generate" class="indicator-label">
                    Generate new secret
                </span>
                <span data-i18n="general.wait" class="indicator-progress">
                    Please wait...
                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                </span>
            </button>
            {{- end}}
            <button type="button" id="save_btn" class="btn btn-primary px-10 d-none">
                <span id="save_label" class="indicator-label"></span>
                <span data-i18n="general.wait" class="indicator-progress">
                    Please wait...
                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                </span>
            </button>
        </div>

    </div>
</div>

{{- if .TOTPConfig.Enabled}}
<div class="notice d-flex bg-light-primary rounded border-primary border border-dashed p-6 my-10">
    <i class="ki-duotone ki-shield-tick fs-2tx text-primary me-4">
        <span class="path1"></span>
        <span class="path2"></span>
    </i>
    <div class="d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap">
        <div class="mb-3 mb-md-0 fw-semibold">
            <h4 data-i18n="2fa.recovery_codes" class="text-gray-900 fw-bold">
                Recovery codes
            </h4>
            <div class="fs-6 text-gray-800">
                <p data-i18n="2fa.recovery_codes_msg1">Recovery codes are a set of one time use codes that can be used in place of the authentication code to login to the web UI. You can use them if you lose access to your phone to login to your account and disable or regenerate two-factor configuration.</p>
                <p data-i18n="2fa.recovery_codes_msg2">To keep your account secure, don't share or distribute your recovery codes. We recommend saving them with a secure password manager.</p>
                <p data-i18n="2fa.recovery_codes_msg3">If you generate new recovery codes, you automatically invalidate old ones.</p>
            </div>
            <div class="d-flex justify-content-center mt-10">
                <button type="button" id="generate_recovery_code_btn" class="btn btn-primary px-10 me-10">
                    <span data-i18n="general.generate" class="indicator-label">
                        Generate
                    </span>
                    <span data-i18n="general.wait" class="indicator-progress">
                        Please wait...
                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>
                </button>
                <button type="button" id="view_recovery_code_btn" class="btn btn-primary px-10">
                    <span data-i18n="general.view" id="save_label" class="indicator-label">View</span>
                    <span data-i18n="general.wait" class="indicator-progress">
                        Please wait...
                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>
{{- end}}
{{- end}}

{{- define "additionalnavitems"}}
<div class="d-flex align-items-center ms-2 ms-lg-3" id="kt_header_user_menu_toggle">
    <div class="btn btn-icon btn-active-light-primary w-35px h-35px w-md-40px h-md-40px" data-bs-toggle="modal" data-bs-target="#info_modal">
        <i class="ki-duotone ki-information-2 fs-2">
            <i class="path1"></i>
            <i class="path2"></i>
            <i class="path3"></i>
        </i>
    </div>
</div>
{{- end}}

{{- define "modals"}}
<div class="modal fade" id="recovery_codes_modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="idRecoveryCodesTitle" class="modal-title"></h3>
                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-color-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                </div>
            </div>
            <div class="modal-body">
                <div id="idRecoveryCodesList" class="d-flex flex-column">
                </div>
            </div>
            <div class="modal-footer">
                <button data-i18n="general.ok" class="btn btn-primary" type="button" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="info_modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 data-i18n="2fa.info_title" class="modal-title">Learn about two-factor authentication</h3>
                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-color-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                </div>
            </div>
            <div class="modal-body fw-semibold fs-6">
                <p data-i18n="2fa.info1">SSH protocol (SFTP/SCP/SSH commands) will ask for the passcode if the client uses keyboard interactive authentication.</p>
                <p data-i18n="2fa.info2">HTTP protocol means Web UI and REST APIs. Web UI will ask for the passcode using a specific page. For REST API
                    you have to add the passcode using an HTTP header.</p>
                <p data-i18n="2fa.info3">FTP has no standard way to support two factor authentication, if you enable the FTP support, you have to add the
                    TOTP passcode after the password. For example if your password is "password" and your one time passcode is
                    "123456" you have to use "password123456" as password.</p>
                <p data-i18n="2fa.info4">WebDAV is not supported since each single request must be authenticated and a passcode cannot be reused.</p>
            </div>
            <div class="modal-footer">
                <button data-i18n="general.ok" class="btn btn-primary" type="button" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="qrcode_modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 data-i18n="2fa.setup_title" class="modal-title">Set up two-factor authentication</h3>
                <div data-i18n="[aria-label]general.close" class="btn btn-icon btn-sm btn-active-color-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                </div>
            </div>
            <div class="modal-body scroll-y pt-10 pb-15 px-lg-17">
                <div class="text-gray-700 fw-semibold fs-6 mb-10">
                    <span data-i18n="2fa.setup_msg">
                        Use your preferred Authenticator App (e.g. Microsoft Authenticator, Google Authenticator, Authy, 1Password etc. ) to scan the QR code. It will generate an authentication code for you to enter below.
                    </span>
                </div>
                <div id="id_qr_code_container" class="pt-5 text-center">
                </div>
                <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed my-10 p-6">
                    <i class="ki-duotone ki-information fs-2tx text-warning me-4">
                        <span class="path1"></span>
                        <span class="path2"></span>
                        <span class="path3"></span>
                    </i>
                    <div class="d-flex flex-stack flex-grow-1">
                        <div class="fw-semibold">
                            <div class="fs-6 text-gray-800">
                                <span data-i18n="2fa.setup_help">If you have trouble using the QR code, select manual entry on your app, and enter the code:</span>
                                <span id="id_secret" class="fw-bold text-gray-900 pt-2"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="errorModalMsg" class="d-none rounded border-warning border border-dashed bg-light-warning d-flex align-items-center p-5 mb-10">
                    <i class="ki-duotone ki-information fs-3x text-warning me-5"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                    <div class="text-gray-700 fw-bold fs-5 d-flex flex-column pe-0 pe-sm-10">
                        <span id="errorModalTxt"></span>
                    </div>
                    <button id="id_dismiss_error_modal_msg" type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon btn-sm btn-active-light-primary ms-sm-auto">
                        <i class="ki-duotone ki-cross fs-2x text-primary"><span class="path1"></span><span class="path2"></span></i>
                    </button>
                </div>

                <div class="fv-row">
                    <input data-i18n="[placeholder]login.auth_code" type="text" id="id_passcode" name="passcode" class="form-control form-control-lg form-control-solid" placeholder="Enter authentication code" spellcheck="false" />
                </div>
            </div>
            <div class="modal-footer">
                <button data-i18n="general.cancel" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary ms-6" id="passcode_btn">
                    <span data-i18n="general.submit" class="indicator-label">
                        Submit
                    </span>
                    <span data-i18n="general.wait" class="indicator-progress">
                        Please wait...
                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>
{{- end}}

{{- define "extra_js"}}
<script type="text/javascript" {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}}>
     const qrModal = new bootstrap.Modal('#qrcode_modal');
     const recCodesModal = new bootstrap.Modal('#recovery_codes_modal');

    function onConfigChanged() {
        let selectedConfig = $('#id_config option:selected').val();
        if (selectedConfig == ""){
            $('#save_btn').addClass("d-none");
            $('#generate_secret_btn').addClass("d-none");
        } else {
            //{{- if .TOTPConfig.Enabled }}
            if (selectedConfig == "{{.TOTPConfig.ConfigName}}"){
                $('#save_label').text($.t('general.submit'));
            } else {
                $('#save_label').text($.t('general.enable'));
            }
            $('#save_btn').removeClass("d-none");
            $('#generate_secret_btn').removeClass("d-none");
            //{{- else}}
            $('#save_btn').removeClass("d-none");
            $('#save_label').text($.t('general.enable'));
            $('#generate_secret_btn').addClass("d-none");
            //{{- end}}
        }
    }

    function generateRecoveryCodes() {
        el = document.querySelector('#generate_recovery_code_btn');
        el.setAttribute('data-kt-indicator', 'on');
		el.disabled = true;

        axios.post('{{.RecCodesURL}}', null, {
            	timeout: 15000,
                headers: {
                    'X-CSRF-TOKEN': '{{.CSRFToken}}'
                },
                validateStatus: function (status) {
                    return status == 200;
                }
       	    }).then(function (response){
                el.removeAttribute('data-kt-indicator');
                el.disabled = false;
                $('#idRecoveryCodesTitle').text($.t('2fa.new_recovery_codes'));
                let recList = $('#idRecoveryCodesList');
                recList.empty();
                $.each(response.data, function(key, item) {
                    itemCode = escapeHTML(item);
                    recList.append(`<li class="d-flex align-items-center py-2 fw-semibold fs-5 text-gray-800"><span class="bullet bullet-dot me-5"></span>${itemCode}</li>`);
                });
                recCodesModal.show();
            }).catch(function (error){
                el.removeAttribute('data-kt-indicator');
                el.disabled = false;
                ModalAlert.fire({
                    text: $.t('2fa.recovery_codes_gen_err'),
                    icon: "warning",
                    confirmButtonText: $.t('general.ok'),
                    customClass: {
                        confirmButton: "btn btn-danger"
                    }
                });
            });
    }

    function viewRecoveryCodes() {
        el = document.querySelector('#view_recovery_code_btn');
        el.setAttribute('data-kt-indicator', 'on');
		el.disabled = true;

        axios.get('{{.RecCodesURL}}',{
            	timeout: 15000,
                headers: {
                    'X-CSRF-TOKEN': '{{.CSRFToken}}'
                },
                validateStatus: function (status) {
                    return status == 200;
                }
       	    }).then(function (response){
                el.removeAttribute('data-kt-indicator');
                el.disabled = false;
                $('#idRecoveryCodesTitle').text($.t('2fa.recovery_codes'));
                let recList = $('#idRecoveryCodesList');
                recList.empty();
                $.each(response.data, function(key, item) {
                    itemCode = escapeHTML(item.code);
                    let txtStyleClass = "";
                    if (item.used) {
                        txtStyleClass = "line-through";
                    }
                    recList.append(`<li class="d-flex align-items-center py-2 fw-semibold fs-5 text-gray-800 ${txtStyleClass}"><span class="bullet bullet-dot me-5"></span>${itemCode}</li>`);
                });
                recCodesModal.show();
            }).catch(function (error){
                el.removeAttribute('data-kt-indicator');
                el.disabled = false;
                ModalAlert.fire({
                    text: $.t('2fa.recovery_codes_get_err'),
                    icon: "warning",
                    confirmButtonText: $.t('general.ok'),
                    customClass: {
                        confirmButton: "btn btn-danger"
                    }
                });
            });
    }

    function disableConfig() {
        ModalAlert.fire({
            text: $.t('2fa.disable_question'),
            icon: "warning",
            confirmButtonText: $.t('general.confirm'),
            cancelButtonText: $.t('general.cancel'),
            customClass: {
                confirmButton: "btn btn-danger",
                cancelButton: 'btn btn-secondary'
            }
        }).then((result) => {
            if (result.isConfirmed){
                doSaveConfig(document.querySelector('#disable_btn'), null, false, true);
            }
        });
    }

    function validatePasscode() {
        el = document.querySelector('#passcode_btn');
        let errDivEl = $('#errorModalMsg');
        let errTxtEl = $('#errorModalTxt');
        let errorMessage = '2fa.auth_code_invalid';
        let passcode = $('#id_passcode').val();

        errDivEl.addClass("d-none");
        if (passcode == "") {
            setI18NData(errTxtEl, '2fa.auth_code_required');
            errDivEl.removeClass("d-none");
            return;
        }
        el.setAttribute('data-kt-indicator', 'on');
		el.disabled = true;

        axios.post("{{.ValidateTOTPURL}}", {
                passcode: passcode,
                config_name: $('#id_config option:selected').val(),
                secret: $('#id_secret').text()
            }, {
                headers: {
                    timeout: 15000,
                    'X-CSRF-TOKEN': '{{.CSRFToken}}'
                },
                validateStatus: function (status) {
                    return status == 200;
                }
            }).then(function (response){
                el.removeAttribute('data-kt-indicator');
                el.disabled = false;
                if (!response.data.message) {
                    setI18NData(errTxtEl, errorMessage);
                    errDivEl.removeClass("d-none");
                    return;
                }
                qrModal.hide();
                doSaveConfig(null, null, true, false);
            }).catch(function (error){
                el.removeAttribute('data-kt-indicator');
                el.disabled = false;
                setI18NData(errTxtEl, errorMessage);
                errDivEl.removeClass("d-none");
            });
    }

    function confirmGenerateSecret() {
        ModalAlert.fire({
            text: $.t('2fa.generate_question'),
            icon: "warning",
            confirmButtonText: $.t('general.confirm'),
            cancelButtonText: $.t('general.cancel'),
            customClass: {
                confirmButton: "btn btn-danger",
                cancelButton: 'btn btn-secondary'
            }
        }).then((result) => {
            if (result.isConfirmed){
                el = document.querySelector('#generate_secret_btn');
                configName = $('#id_config option:selected').val();
                generateSecret(el,configName);
            }
        });
    }

    function generateSecret(el, configName) {
        if (!el || !configName){
            confirmGenerateSecret();
            return;
        }

        let errDivEl = $('#errorMsg');
        let errTxtEl = $('#errorTxt');
        if ($('#id_protocols').find('option:selected').length == 0){
            setI18NData(errTxtEl, '2fa.no_protocol');
            errDivEl.removeClass("d-none");
            return;
        }

        let errorMessage =  '2fa.auth_secret_gen_err';

        $('#id_secret').text("");
        errDivEl.addClass("d-none");
        el.setAttribute('data-kt-indicator', 'on');
		el.disabled = true;

        axios.post("{{.GenerateTOTPURL}}", {
                config_name: configName
            }, {
                headers: {
                    timeout: 15000,
                    'X-CSRF-TOKEN': '{{.CSRFToken}}'
                },
                validateStatus: function (status) {
                    return status == 200;
                }
            }).then(function (response){
                el.removeAttribute('data-kt-indicator');
                el.disabled = false;
                if (!response.data.secret) {
                    setI18NData(errTxtEl, errorMessage);
                    errDivEl.removeClass("d-none");
                    return;
                }
                $('#id_secret').text(response.data.secret);
                $('#errorModalMsg').addClass("d-none");
                $('#id_passcode').val("");
                let qrCodeContainer = document.getElementById("id_qr_code_container");
                clearChilds(qrCodeContainer);
                let qrCodeImg = document.createElement("img");
                qrCodeImg.classList.add("mw-150px");
                qrCodeImg.src = "{{.MFAURL}}/qrcode?url="+encodeURIComponent(response.data.url);
                qrCodeImg.alt = $.t('general.qr_code');
                qrCodeContainer.appendChild(qrCodeImg);
                qrModal.show();
            }).catch(function (error){
                el.removeAttribute('data-kt-indicator');
                el.disabled = false;
                setI18NData(errTxtEl, errorMessage);
                errDivEl.removeClass("d-none");
            });
    }

    function doSaveConfig(el, configName, full, disabled) {
        if (!el){
            el = document.querySelector('#save_btn');
        }
        if (!configName) {
            configName = $('#id_config option:selected').val();
        }
        let errDivEl = $('#errorMsg');
        let errTxtEl = $('#errorTxt');
        let errorMessage = '2fa.save_err';
        let protocolsArray = [];
        $('#id_protocols').find('option:selected').each(function(){
            protocolsArray.push($(this).val());
        });
        if (protocolsArray.length == 0){
            setI18NData(errTxtEl, '2fa.no_protocol');
            errDivEl.removeClass("d-none");
            return;
        }
        let postData = {
            protocols: protocolsArray
        }
        if (full){
            postData.config_name = configName;
            postData.secret = {
                status: "Plain",
                payload: $('#id_secret').text()
            }
        }
        if (disabled){
            postData.enabled = false;
        } else {
            postData.enabled = true;
        }
        errDivEl.addClass("d-none");
        el.setAttribute('data-kt-indicator', 'on');
		el.disabled = true;

        axios.post("{{.SaveTOTPURL}}", postData, {
                headers: {
                    timeout: 15000,
                    'X-CSRF-TOKEN': '{{.CSRFToken}}'
                },
                validateStatus: function (status) {
                    return status == 200;
                }
            }).then(function (response){
                el.removeAttribute('data-kt-indicator');
                el.disabled = false;
                if (!response.data.message) {
                    setI18NData(errTxtEl, errorMessage);
                    errDivEl.removeClass("d-none");
                    return;
                }
                ModalAlert.fire({
                    text: $.t('general.config_saved'),
                    icon: "success",
                    confirmButtonText: $.t('general.ok'),
                    customClass: {
                        confirmButton: 'btn btn-primary'
                    }
                }).then((result) => {
                    if (result.isConfirmed){
                        location.reload();
                    }
                });
            }).catch(function (error) {
                el.removeAttribute('data-kt-indicator');
                el.disabled = false;
                if (error && error.response) {
                    switch (error.response.status) {
                        case 400:
                            errorMessage = "2fa.save_err_proto";
                            break;
                    }
                }
                setI18NData(errTxtEl, errorMessage);
                errDivEl.removeClass("d-none");
            });

    }

    function saveConfig() {
        let selectedConfig = $('#id_config option:selected').val();
        let saveBtn = document.querySelector('#save_btn');
        if (selectedConfig == "{{.TOTPConfig.ConfigName}}"){
            doSaveConfig(saveBtn, selectedConfig, false, false);
            return;
        }
        generateSecret(saveBtn, selectedConfig);
    }

    $(document).on("i18nshow", function(){
        onConfigChanged();

        var dismissErrorModalBtn = $('#id_dismiss_error_modal_msg');
        if (dismissErrorModalBtn){
            dismissErrorModalBtn.on("click",function(){
                $('#errorModalMsg').addClass("d-none");
            });
        }

        var disableBtn = $('#disable_btn');
        if (disableBtn){
            disableBtn.on("click", function(){
                disableConfig();
            });
        }

        var generateSecretBtn = $('#generate_secret_btn');
        if (generateSecretBtn){
            generateSecretBtn.on("click", function(){
                generateSecret();
            });
        }

        var saveBtn = $('#save_btn');
        if (saveBtn){
            saveBtn.on("click", function(){
                saveConfig();
            });
        }

        var generateRecoveryCodeBtn = $('#generate_recovery_code_btn');
        if (generateRecoveryCodeBtn){
            generateRecoveryCodeBtn.on("click", function(){
                generateRecoveryCodes();
            });
        }

        var viewRecoveryCodesBtn = $('#view_recovery_code_btn');
        if (viewRecoveryCodesBtn){
            viewRecoveryCodesBtn.on("click", function(){
                viewRecoveryCodes();
            });
        }

        var passcodeBtn = $('#passcode_btn');
        if (passcodeBtn){
            passcodeBtn.on("click", function() {
                validatePasscode();
            });
        }

        var configSelect = $('#id_config');
        if (configSelect){
            configSelect.on("change", function(){
                onConfigChanged();
            });
        }

    });

</script>
{{- end}}