<div class="container" style="width: auto; max-width: 1170px;">
    <div class="row" style="margin-top: 16%;margin-bottom: auto;">
        <div class="col-md-8 col-lg-6" style="margin-left: auto; margin-right: auto; float: none;">
            <div class="panel panel-primary">
                <div class="panel-heading">Двухфакторная авторизация</div>
                <div class="panel-body">
                    <div class="updprof-error">[[!+cp.error_message]]</div>
                    <p>[[!+cp.successMessage]]</p>
                    {set $twoFa = $_modx->runSnippet('!2faCheckOn',['user_id' => $_modx->user.id])}
                    
                    <form class="form-horizontal" action="[[~[[*id]]]]" method="post" id="2fa-form" style="margin-top: 15px;">
                        <div class="form-group" style="text-align: left;">
                            <label for="2fa-chek" class="col-sm-6 control-label" style="text-align: left;">Двухфакторная авторизация через email</label>
                            <div class="col-sm-2">
                                <input type="hidden" name="user_id"  value="{$_modx->user.id}" class="form-control">
                                <input type="radio" name="2fa-chek" {if $twoFa == 'email'}checked{/if} id="2fa-chek" value="email" class="form-control">
                                <span class="help-block text-error">
                                    [[!+cp.error.password_old]]
                                </span>
                            </div>
                            
                        </div>
                        <div class="form-group" style="text-align: left;">
                            
                            <label for="2fa-chek" class="col-sm-6 control-label" style="text-align: left;">Двухфакторная авторизация через приложение</label>
                            <div class="col-sm-2">
                                <input type="hidden" name="user_id"  value="{$_modx->user.id}" class="form-control">
                                <input type="radio" name="2fa-chek" {if $twoFa == 'google'}checked{/if} id="2fa-chek" value="google" class="form-control">
                                <span class="help-block text-error">
                                    [[!+cp.error.password_old]]
                                </span>
                            </div>
                        </div>
                        <input type="submit" value="Сохранить" name="2fa-on"  class="btn btn-primary pull-right" style="float: unset !important;margin-right: 10px;">
                        <input type="button" value="Отмена" class="btn btn-primary " onclick="location.href='/profile/';" style="width: 95px;">
                        
                        <p id="2fa-message"></p>
                    </form>
                    
                    <script>
                         
                          $('#2fa-form').on('submit', function(e) {
                             var fields = {}
                              
                              $.each($('#2fa-form').serializeArray(), function() {
                                if(this.name.indexOf('[]') <= 0) {
                                  fields[this.name] = this.value
                                } else {
                                  // Для чекбоксов посложнее
                                  var name = this.name.replace('[]','')
                                  if(typeof(fields['filter'][name]) == 'undefined') {
                                    fields[name] = [];
                                  }
                                  fields[name].push(this.value);
                                }
                              })
                            $.post(document.location.href, {
                              action: '2faOn',
                              dataType: 'json',
                              fields: fields,
                            }, function(data) {
                                let obj = $.parseJSON(data)
                                $('#2fa-message').html(obj.message)
                                if(obj.success){
                                    document.location.reload();
                                }
                                
                            })
                              return false;
                          });
                          $(document).on('submit','#2fa-form-remove',function(e) {
                             var fields = {}
                              
                              $.each($('#2fa-form-remove').serializeArray(), function() {
                                if(this.name.indexOf('[]') <= 0) {
                                  fields[this.name] = this.value
                                } else {
                                  // Для чекбоксов посложнее
                                  var name = this.name.replace('[]','')
                                  if(typeof(fields['filter'][name]) == 'undefined') {
                                    fields[name] = [];
                                  }
                                  fields[name].push(this.value);
                                }
                              })
                            $.post(document.location.href, {
                              action: '2faOn_remove',
                              dataType: 'json',
                              fields: fields,
                            }, function(data) {
                                let obj = $.parseJSON(data)
                                $('#2faremove-message').html(obj.message)
                                if(obj.success){
                                    document.location.reload();
                                }
                                
                            })
                              return false;
                          });
                          
                        
                </script>
                {if $twoFa == 'google'}
                    [[!GAuthx? &responseTpl=`GAuthxResponseTpl` &tpl=`GAuthxTplCustom`]]
                {/if}
                {if $twoFa == 'email'}
                    <form class="form-horizontal" method="post" id="2fa-form-remove" style="margin-top: 25px;">
                        <input type="hidden" name="user_id" value="{$_modx->user.id}" class="form-control">
                        <input type="submit" value="Удалить двухфакторную авторизация по email" name="2fa-remove" class="btn btn-danger pull-right" style="float: unset !important;">
                        <p id="2faremove-message"></p>
                    </form>
                {/if}
                
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .navbar-collapse.collapse{
        display: block!important;
        margin-top: 0px !important;
        border: none;
    }
    .form-control {
    
    border: none !important;
    box-shadow: none !important;
    }
    .form-control:focus {
    
    box-shadow: none !important;
}
</style>