Содержимое

События в JS

На клиентской стороне для выполнения тех или иных операций, связанных с определенными событиями авторизации и регистрации, добавлен ряд событий, на которые можно подписаться.

На текущий момент в каждом компоненте свои события, нет какого-то единого варианта пока.

Отключение перезагрузки и редиректа

Если необходимо на конкретной странице после успешной авторизации отключить редирект в профиль пользователя или перезагрузку страницы, можно сделать это так

<script>
        BX.ready(function(){
            BX.Vue.event.$on('BXmakerAuthuserphoneUserAuthorized',(data) => {

                // отключаем перезагрузку страницы после успешной авторизации
                // перезагрузка срабатывает после этого события, поэтому так можно
                data.instance.setIsEnabledReload(false);

                // отключаем редирект на страницу заполнения профиля, может быть включено в настройках модуля
                // редирект выполняется после этого события, поэтому так можно
                data.instance.setIsEnabledRedirect(false);
            });
        })
    </script>

Call и Login

В компоненте в основном вызывается везде одно событие после любого Ajax запроса и получения ответа. Вместе с событием приходят данные о параметрах инициализации, переданных данных и полученных.

<script type="text/javascript">
/*
// так вызывается событие
$(document).trigger('bxmaker.authuserphone.ajax', {
    'params': {},  // параметры инициализации компонента
    'request': {}, // данные отправленные в запросе
    'result': {}, //  полученный ответ от сервера
});
*/


// добавление обработчика события, чтобы отследить произошедшую авторизацию /
// регистрацию и отправить событие достижения цели в Яндекс Метрику
//  заменить XXXX на номер счетчика

$(document).on("bxmaker.authuserphone.ajax", function(event, data){

    var counterId = 'XXX';

    if(data.result && data.result.response && data.request.method === "auth") {

        if(data.result.response.type == 'AUTH') {
            console.log('AUTH');
            ym(counterId, "reachGoal", "authSuccess");
        }
        else {
            console.log('REGISTER');
            ym(counterId, "reachGoal", "registerSuccess");
        }
    }

    if(data.result && data.result.response && data.request.method === "register") {
        console.log('REGISTER');
        ym(counterId, "reachGoal", "registerSuccess");
    }
})
</script>

Simple

В компоненте в основном вызывается везде одно событие после любого Ajax запроса и получения ответа. Вместе с событием приходят переданные данные и полученный ответ

Ответ на ajax запрос Simple

<script type="text/javascript">
/*
// так вызывается событие
BX.Vue.event.$emit('BXmakerAuthuserphoneSimpleAjaxResponse', {
    request: {}, // данные в запросе
    result: {}, // полученный результат
});
*/


// добавление обработчика события, чтобы отследить произошедшую авторизацию /
// регистрацию и отправить событие достижения цели в Яндекс Метрику
//  заменить XXXX на номер счетчика


BX.Vue.event.$on('BXmakerAuthuserphoneSimpleAjaxResponse',(data) => {

    var counterId = 'XXX';
    var rand = data.request.rand;

    //получить доступ к объекту класса, через который можно управлять компонентом
    // переменная определяется в шаблоне компонента
    var obj = window['BXmakerAuthuseremailSimple__' +  rand];

    // доступ к корневому vue
    var instance = obj.instance;

    // обновить капчу можно так
    // instance.refreshCaptcha();


    if(data.result.response && data.request.method === 'checkConfirmation')
    {
        // если есть response, значит все хорошо и удалось
        // проверить подтверждение и авторизоваться, зарегистрироваться

        if(data.result.response.type  == 'AUTH')
        {
            console.log('AUTH');
            ym(counterId, "reachGoal", "authSuccess");
        }
        else if(data.result.response.type == 'REG')
        {
            console.log('REGISTER');
            ym(counterId, "reachGoal", "registerSuccess");
        }


    }
});

</script>

Способ подтверждения Simple

Событие смены способа подтверждения - смс код, звонок от робота и т.п.

BX.Vue.event.$on('BXmakerAuthuserphoneSimpleChangeConfirmationType',(data) => {

    console.log('BXmakerAuthuserphoneSimpleChangeConfirmationType', data);

    var rand = data.rand;

    // объект класса компонента
    var obj = window['BXmakerAuthuserphoneSimple__' +  rand];

    console.log('obj', obj);

    // obj.instance -  объект корневого Vue компонента,
    // через который можно вызывать методы, менять значения и т.п.

    // проверим тип подтверждения
    if(data.value === obj.instance.const.CONFIRM_TYPE_SMS_CODE)
    {
        console.info('*** Способ подтверждения - СМС код')
    }
    else
    {
        console.info('*** Способ подтверждения - НЕ СМС код')
    }
});

Блок подтверждения Simple

Событие показа/скрытия блоков с проверкой телефона

/**
 * Событие показа/скрытия блоков с проверкой телефона
 */
BX.Vue.event.$on('BXmakerAuthuserphoneSimpleChangeShowConfirm',(data) => {

    console.log('BXmakerAuthuserphoneSimpleChangeShowConfirm', data);

    var rand = data.rand;

    // объект класса компонента
    var obj = window['BXmakerAuthuserphoneSimple__' +  rand];

    console.log('obj', obj);

    // obj.instance -  объект корневого Vue компонента,
    // через который можно вызывать методы, менять значения и т.п.

    // проверим тип подтверждения
    if(data.value)
    {
        console.info('*** Проверяется номер')
    }
    else
    {
        console.info('*** Подготовка к проверке номера')
    }
});

После авторизации / регистрации

//  так вызываются 

/*  после регистрации */
 BX.Vue.event.$emit('BXmakerAuthuserphoneUserRegistered', {
   request: requestData,
   result: data,
   instance: this
                        });
                        
/* после авторизации */
                        
                        
BX.Vue.event.$emit('BXmakerAuthuserphoneUserAuthorized', { 
   request: requestData, 
   result: data, 
       instance: this 
});

// соответственно подписываемся так
BX.Vue.event.$on('BXmakerAuthuserphoneUserAuthorized',(data) => { alert('1');});
 

Enter

В компоненте в основном вызывается везде одно событие после любого Ajax запроса и получения ответа. Вместе с событием приходят переданные данные и полученный ответ

Ответ на ajax запрос Enter

<script type="text/javascript">
/*
// так вызывается событие
BX.Vue.event.$emit('BXmakerAuthuserphoneEnterAjaxResponse', {
    request: {}, // данные в запросе
    result: {}, // полученный результат
});
*/


// добавление обработчика события, чтобы отследить произошедшую авторизацию /
// регистрацию и отправить событие достижения цели в Яндекс Метрику
//  заменить XXXX на номер счетчика


BX.Vue.event.$on('BXmakerAuthuserphoneEnterAjaxResponse',(data) => {

    var counterId = 'XXX';
    var rand = data.request.rand;

    //получить доступ к объекту класса, через который можно управлять компонентом
    // переменная определяется в шаблоне компонента
    var obj = window['BXmakerAuthuserphoneEnter__' +  rand];

    // доступ к корневому vue
    var instance = obj.instance;

    // обновить капчу можно так
    // instance.refreshCaptcha();


    if(data.result.response && data.request.method === 'authByPassword')
    {
        // если есть response, значит все хорошо и удалось
        // проверить подтверждение и авторизоваться

            console.log('AUTH');
            ym(counterId, "reachGoal", "authSuccess");
    }

     if(data.result.response && data.request.method === 'register')
    {
        // если есть response, значит все хорошо и удалось
        // проверить подтверждение и зарегистрироваться

            console.log('REGISTER');
            ym(counterId, "reachGoal", "registerSuccess");
    }


    if(data.result.response && data.request.method === 'authByPhone')
    {
        // если есть response, значит все хорошо и удалось
        // проверить подтверждение и авторизоваться, зарегистрироваться
        if(data.result.response.type  == 'AUTH')
        {
            console.log('AUTH');
            ym(counterId, "reachGoal", "authSuccess");
        }
        else if(data.result.response.type == 'REG')
        {
            console.log('REGISTER');
            ym(counterId, "reachGoal", "registerSuccess");
        }
    }


});
</script>

Тип действия Enter

Событие смены типа действия - Авторизация, регистрация, восстановление пароля и т.п.


BX.Vue.event.$on('BXmakerAuthuserphoneEnterChangeActionType',(data) => {

    console.log('BXmakerAuthuserphoneEnterChangeActionType', data);

    var rand = data.rand;

    // объект класса компонента
    var obj = window['BXmakerAuthuserphoneEnter__' +  rand];

    console.log('obj', obj);

    // obj.instance -  объект корневого Vue компонента,
    // через который можно вызывать методы, менять значения и т.п.

    // выведем сообщение над формой
    obj.instance.setMessage('event ok ' + (new Date()).toLocaleString());

});

Способ подтверждения Enter

Событие смены способа подтверждения - смс код, звонок от робота и т.п.

BX.Vue.event.$on('BXmakerAuthuserphoneEnterChangeConfirmationType',(data) => {

    console.log('BXmakerAuthuserphoneEnterChangeConfirmationType', data);

    var rand = data.rand;

    // объект класса компонента
    var obj = window['BXmakerAuthuserphoneEnter__' +  rand];

    console.log('obj', obj);

    // obj.instance -  объект корневого Vue компонента,
    // через который можно вызывать методы, менять значения и т.п.

    // проверим тип подтверждения
    if(data.value === obj.instance.const.CONFIRM_TYPE_SMS_CODE)
    {
        console.info('*** Способ подтверждения - СМС код')
    }
    else
    {
        console.info('*** Способ подтверждения - НЕ СМС код')
    }
});

Блок подтверждения Enter

Событие показа/скрытия блоков с проверкой телефона

BX.Vue.event.$on('BXmakerAuthuserphoneEnterChangeShowConfirm',(data) => {

    console.log('BXmakerAuthuserphoneEnterChangeShowConfirm', data);

    var rand = data.rand;

    // объект класса компонента
    var obj = window['BXmakerAuthuserphoneEnter__' +  rand];

    console.log('obj', obj);

    // obj.instance -  объект корневого Vue компонента,
    // через который можно вызывать методы, менять значения и т.п.

    // проверим тип подтверждения
    if(data.value)
    {
        console.info('*** Проверяется номер')
    }
    else
    {
        console.info('*** Подготовка к проверке номера')
    }

});

Вход по паролю Enter

Событие смены способа входа, по паролю или нет

BX.Vue.event.$on('BXmakerAuthuserphoneEnterChangeIsAuthByPassword',(data) => {

    console.log('BXmakerAuthuserphoneEnterChangeIsAuthByPassword', data);

    var rand = data.rand;

    // объект класса компонента
    var obj = window['BXmakerAuthuserphoneEnter__' +  rand];

    console.log('obj', obj);

    // obj.instance -  объект корневого Vue компонента,
    // через который можно вызывать методы, менять значения и т.п.

    // проверим тип подтверждения
    if(data.value)
    {
        console.info('*** Вход по паролю')
    }
    else
    {
        console.info('*** Вход через подтверждение телефона')
    }
});

Отключить перезагрузку страницы после успешного входа

/* 
rand - генерируется компонентом и неизменяется,
 также можно указать свое значение, если передать 
в параметры вызова компонента нужное значение,
 например: RAND_STRING => 'ajax12'
*/
var rand = 'PJfejo'; 
// объект класса компонента
var obj = window['BXmakerAuthuserphoneEnter__' +  rand];

// obj.instance -  объект корневого Vue компонента,
    
obj.instance.setIsEnabledReload(false);

После авторизации / регистрации

//  так вызываются 

/*  после регистрации */
 BX.Vue.event.$emit('BXmakerAuthuserphoneUserRegistered', {
   request: requestData,
   result: data,
   instance: this
                        });
                        
/* после авторизации */
                        
                        
BX.Vue.event.$emit('BXmakerAuthuserphoneUserAuthorized', { 
   request: requestData, 
   result: data, 
       instance: this 
});

// соответственно подписываемся так
BX.Vue.event.$on('BXmakerAuthuserphoneUserAuthorized',(data) => { alert('1');});
 

Edit

В компоненте в основном вызывается везде одно событие после любого Ajax запроса и получения ответа. Вместе с событием приходят переданные данные и полученный ответ

Ответ на ajax запрос Edit

<script type="text/javascript">
/*
// так вызывается событие
BX.Vue.event.$emit('BXmakerAuthuserphoneEditAjaxResponse', {
    request: {}, // данные в запросе
    result: {}, // полученный результат
});
*/


// добавление обработчика события, чтобы отследить произошедшую авторизацию /
// регистрацию и отправить событие достижения цели в Яндекс Метрику
//  заменить XXXX на номер счетчика


BX.Vue.event.$on('BXmakerAuthuserphoneEditAjaxResponse',(data) => {

    var counterId = 'XXX';
    var rand = data.request.rand;

    //получить доступ к объекту класса, через который можно управлять компонентом
    // переменная определяется в шаблоне компонента
    var obj = window['BXmakerAuthuserphoneEdit__' +  rand];

    // доступ к корневому vue
    var instance = obj.instance;

    // скрыть подтверждение можно так -
    // instance.hideConfirmation();
    // или показать
    // instance.showConfirmation();


    if(data.result.response && data.request.method === 'checkConfirmation')
    {
        // если есть response, значит все хорошо и в нем сообщение об успешности выполнения операции
        console.log('PHONE_IS_CHANGED');

        ym(counterId, "reachGoal", "PHONE_IS_CHANGED");

    }
});


</script>

Способ подтверждения Edit

Событие смены способа подтверждения - смс код, звонок от робота и т.п.

BX.Vue.event.$on('BXmakerAuthuserphoneEditChangeConfirmationType',(data) => {

    console.log('BXmakerAuthuserphoneEditChangeConfirmationType', data);

    var rand = data.rand;

    // объект класса компонента
    var obj = window['BXmakerAuthuserphoneEdit__' +  rand];

    console.log('obj', obj);

    // obj.instance -  объект корневого Vue компонента,
    // через который можно вызывать методы, менять значения и т.п.

    // проверим тип подтверждения
    if(data.value === obj.instance.const.CONFIRM_TYPE_SMS_CODE)
    {
        console.info('*** Способ подтверждения - СМС код')
    }
    else
    {
        console.info('*** Способ подтверждения - НЕ СМС код')
    }
});

Блок подтверждения Edit

Событие показа/скрытия блоков с проверкой телефона

BX.Vue.event.$on('BXmakerAuthuserphoneEditChangeShowConfirm',(data) => {

    console.log('BXmakerAuthuserphoneEditChangeShowConfirm', data);

    var rand = data.rand;

    // объект класса компонента
    var obj = window['BXmakerAuthuserphoneEdit__' +  rand];

    console.log('obj', obj);

    // obj.instance -  объект корневого Vue компонента,
    // через который можно вызывать методы, менять значения и т.п.

    // проверим тип подтверждения
    if(data.value)
    {
        console.info('*** Проверяется номер')
    }
    else
    {
        console.info('*** Подготовка к проверке номера')
    }
});