sftpgo-mirror/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"}}

{{- if .TOTPConfig.Enabled}}
<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">
                <span data-i18n="2fa.msg_enabled"></span> {{- if gt (len .TOTPConfigs) 1 }}
                ({{$.TOTPConfig.ConfigName}}) {{- end}}
            </h4>
            <div class="fs-6 text-gray-800 pe-7">
                <span data-i18n="2fa.msg_info"></span>
            </div>
        </div>
        <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>
    </div>
</div>
{{- end}}

<div class="card shadow-sm">
    <div class="card-header bg-light">
        <h3 data-i18n="2fa.title" class="card-title section-title">Two-factor authentication using Authenticator apps</h3>
    </div>
    <div class="card-body">
        {{- if not .TOTPConfig.Enabled}}
        <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">
                        <span data-i18n="2fa.msg_disabled">Secure Your Account</span>
                    </h4>
                    <div class="fs-6 text-gray-800 pe-7">
                        <span data-i18n="2fa.msg_info"></span>
                    </div>
                </div>
            </div>
        </div>
        {{- end}}
        <div class="form-group row mt-10">
            <label for="id_config" 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 for="id_protocols" 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="accordion shadow-sm my-10" id="id_accordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="accordion_rec_codes">
            <button class="accordion-button section-title text-primary collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion_rec_codes_body" aria-expanded="false" aria-controls="accordion_rec_codes_body">
                <span data-i18n="2fa.recovery_codes">
                    Recovery codes
                </span>
            </button>
        </h2>
        <div id="accordion_rec_codes_body" class="accordion-collapse collapse" aria-labelledby="accordion_rec_codes" data-bs-parent="#id_accordion">
            <div class="accordion-body">
                <div class="fs-5 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" class="fs-4 fw-bold">If you generate new recovery codes, you automatically invalidate old ones.</p>
                </div>
                <div class="d-flex justify-content-end mt-10">
                    <button type="button" id="generate_recovery_code_btn" class="btn btn-light-primary px-10 me-10">
                        <span data-i18n="2fa.recovery_codes_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="2fa.recovery_codes_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>
</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-light-primary" data-bs-dismiss="modal" aria-label="Close">
                    <i class="ki-solid ki-cross fs-2x text-gray-700"></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-light-primary" data-bs-dismiss="modal" aria-label="Close">
                    <i class="ki-solid ki-cross fs-2x text-gray-700"></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-light-primary" data-bs-dismiss="modal" aria-label="Close">
                    <i class="ki-solid ki-cross fs-2x text-gray-700"></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-5 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-5 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-solid ki-cross fs-2x text-gray-700"></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');
    const requiredProtocols = [];
    {{- range .RequiredProtocols}}
    requiredProtocols.push('{{.}}');
    {{- end}}

    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-primary"
                    }
                });
            });
    }

    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-primary"
                    }
                });
            });
    }

    function disableConfig() {
        if (requiredProtocols.length > 0){
            ModalAlert.fire({
                text: $.t('2fa.required_protocols', {val: requiredProtocols.join(', ')}),
                icon: "warning",
                confirmButtonText: $.t('general.ok'),
                customClass: {
                    confirmButton: "btn btn-primary"
                }
            });
            return;
        }
        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;
        }

        if ($('#id_protocols').find('option:selected').length == 0){
            ModalAlert.fire({
                text: $.t('2fa.no_protocol'),
                icon: "warning",
                confirmButtonText: $.t('general.ok'),
                customClass: {
                    confirmButton: "btn btn-primary"
                }
            });
            return;
        }

        let errorMessage =  '2fa.auth_secret_gen_err';
        $('#id_secret').text("");
        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) {
                    ModalAlert.fire({
                        text: $.t(errorMessage),
                        icon: "warning",
                        confirmButtonText: $.t('general.ok'),
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    });
                    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;
                ModalAlert.fire({
                    text: $.t(errorMessage),
                    icon: "warning",
                    confirmButtonText: $.t('general.ok'),
                    customClass: {
                        confirmButton: "btn btn-primary"
                    }
                });
            });
    }

    function doSaveConfig(el, configName, full, disabled) {
        if (!el){
            el = document.querySelector('#save_btn');
        }
        if (!configName) {
            configName = $('#id_config option:selected').val();
        }
        let errorMessage = '2fa.save_err';
        let protocolsArray = [];
        if (!disabled) {
            $('#id_protocols').find('option:selected').each(function(){
                protocolsArray.push($(this).val());
            });
            if (protocolsArray.length == 0){
                ModalAlert.fire({
                    text: $.t('2fa.no_protocol'),
                    icon: "warning",
                    confirmButtonText: $.t('general.ok'),
                    customClass: {
                        confirmButton: "btn btn-primary"
                    }
                });
                return;
            }
        }
        for (let i = 0; i < requiredProtocols.length > 0; i++){
            if (!protocolsArray.includes(requiredProtocols[i])){
                ModalAlert.fire({
                    text: $.t('2fa.required_protocols', {val: requiredProtocols.join(', ')}),
                    icon: "warning",
                    confirmButtonText: $.t('general.ok'),
                    customClass: {
                        confirmButton: "btn btn-primary"
                    }
                });
                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;
        }
        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) {
                    ModalAlert.fire({
                        text: $.t(errorMessage),
                        icon: "warning",
                        confirmButtonText: $.t('general.ok'),
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    });
                    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;
                ModalAlert.fire({
                    text: $.t(errorMessage),
                    icon: "warning",
                    confirmButtonText: $.t('general.ok'),
                    customClass: {
                        confirmButton: "btn btn-primary"
                    }
                });
            });

    }

    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}}