Кастомизация компонента Enter

Рассмотрим пример кастомизации комопнента Enter. В частности стоит задача добавить поле с выпадающим списком вариантов типа пользователя.

Клиентская сторона

Для решения, необходимо добавить на для клиентской стороны мутацию комопнента vue отвечающего за отображения формы регистрации. Скопируем компонент из файла /bitrix/js/bxmaker/authuserphone/enter/src/components/BXmakerAuthuserphoneEnterRegForm.js Уберем методы лишние методы, так как они наследуются от исходного компонента и в мутации не обязательно их переписывать. В итоге приведем к следующему виду

BX.Vue.mutateComponent('BXmakerAuthuserphoneEnterRegForm', {
    name: 'BXmakerAuthuserphoneEnterRegForm',
    data() {
        return {
            userType: '',
            userTypeOptions: [
                {id: 'FL', name: 'Розничный покупатель'},
                {id: 'UL', name: 'Оптовый покупатель'},
            ],
        };
    },
    created() {
        // this.$root.setExpandData('userType', 'FL');
        this.$set(this.$root.expandData, 'userType','FL' );
    },
    methods: {
        onChangeuserType(data) {
            // this.$root.setExpandData('userType', data.target.value);
            this.$set(this.$root.expandData, 'userType',data.target.value );
        },
    },
    template: `
            <div class="bxmaker-authuserphone-enter-reg-form"  >
                 
                 <slot name="message" />  
                        <BXmakerAuthuserphoneMessage :message="$root.message" :error="$root.error" />
                   </slot>     
                   
                   <div class="bxmaker-authuserphone-input bxmaker-authuserphone-input--custom-select ">
                       <div class="bxmaker-authuserphone-input__field">
                       <select name="USER_TYPE" autocomplete="off" @change="onChangeuserType"> 
                        <option v-for="type in userTypeOptions" :key="type.id" :value="type.id" :selected="type.id === userType">{{type.name}}</option>
                       </select>
                       </div> 
                   </div>
                                       

                                      
                    <slot name="phone">        
                    
                      <BXmakerAuthuserphoneInputPhone  v-if="$root.isEnabledPhoneMask"
                            :title="$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_REG_FORM_PHONE" 
                            :value="$root.phone" 
                            @onChange="onChangePhone" 
                            @onEnter="onEnterPhone" 
                            name="PHONE" 
                            :defaultCountry="$root.phoneMaskDefaultCountry"
                            :countryTopList="$root.phoneMaskCountryTopList"                          
                        />
                                  
                        <BXmakerAuthuserphoneInput v-else 
                            :title="$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_REG_FORM_PHONE" 
                            :value="$root.phone" 
                            @onInput="$root.setPhone"        
                            @onEnter="onEnterPhone"                    
                            name="PHONE" 
                        />
                    </slot>
                    <slot name="login" v-if="$root.isEnabledRegisterLogin">                   
                        <BXmakerAuthuserphoneInput 
                            :title="$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_REG_FORM_LOGIN" 
                            :value="$root.login" 
                            @onInput="$root.setLogin" 
                            @onEnter="onEnterLogin"   
                            name="LOGIN" 
                            ref="login"
                        />
                    </slot>
                    <slot name="email" v-if="$root.isEnabledRegisterEmail">                   
                        <BXmakerAuthuserphoneInput 
                            :title="$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_REG_FORM_EMAIL" 
                            :value="$root.email" 
                            @onInput="$root.setEmail" 
                            @onEnter="onEnterEmail"   
                            name="EMAIL" 
                            ref="email"
                        />
                    </slot>
                    
                     <slot name="pass" v-if="$root.isEnabledRegisterPassword">                   
                        <BXmakerAuthuserphoneInputPassword 
                            :title="$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_REG_FORM_PASSWORD" 
                            :value="$root.password" 
                            @onInput="$root.setPassword" 
                            @onEnter="onEnterPassword"   
                            name="PASSWORD" 
                            ref="password"
                        />
                    </slot>
                                                            
                    
                 <slot name="captcha">
                        <BXmakerAuthuserphoneCaptcha 
                            :code="$root.captchaCode"
                            :src="$root.captchaSrc"
                            :length="$root.captchaLength"
                            :loader="$root.captchaLoader"
                            @onInput="$root.setCaptchaCode"
                            @onComplete="onClickConfirmation"
                            @onRefresh="$root.refreshCaptcha"
                           />  
                 </slot>   
                 
                 <slot name="consent" v-if="$root.isEnabledRequestConsent">
                    <BXmakerAuthuserphoneConsent
                        :button="$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_REG_FORM_BUTTON"
                        :text="$root.consentText"
                        :isReceived="$root.isConsentReceived"
                        @onAgree="onConsentAgree"
                        @onDisagree="$root.consentDisagree"
                        ref="consent"
                     />
                 </slot>   
                 
                     
                     <slot name="request">
                        <BXmakerAuthuserphoneButton 
                            :title="$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_REG_FORM_BUTTON"  
                            :loader="$root.startLoader"
                            @onClick="onClickConfirmation" 
                        />
                    </slot>
                   
                             
            </div>
        `,
});

Подключаем этот скрипт на странице, разместив например в шаблоне сайте или иначе.

Серверная сторона

Для серверной стороны добавим несколько обработчиков, один будет проверять заполненность дополнительного поля и подставлять значений в итоговый массив описывающий пользователя для добавления. А также добавим обработчик который будет проверять указан ли email и возвращать ошибку если не указан

if (\Bitrix\Main\Loader::includeModule('bxmaker.authuserphone')) {
    //регистрируем событие, которое также вызывает модуль перед добавлением пользователя
    $eventManager = \Bitrix\Main\EventManager::getInstance();
    $eventManager->addEventHandler(
        "main",
        "OnBeforeUserRegister",
        "bxmaker_authuserphone_event_main_onBeforeUserRegister"
    );


    // непосредственно обработчик осбытия
    function bxmaker_authuserphone_event_main_onBeforeUserRegister(&$arFields)
    {
        $req = \Bitrix\Main\Application::getInstance()->getContext()->getRequest();

        // дополнитлеьные данные приходят в этом поле
        $arExpandData = $req->getPost('expandData');

        if (empty($arFields['UF_TYPE'])) {
            $arFields['UF_TYPE'] = 'FL';
        }

        if (is_array($arExpandData) && isset($arExpandData['userType']) && in_array(
                $arExpandData['userType'],
                ['UL', 'FL']
            )) {
            $arFields['UF_TYPE'] = trim(htmlentities($arExpandData['userType'], ENT_QUOTES));
        } else {
            throw new \BXmaker\AuthUserPhone\Exception\BaseException(
                'Не заполнено поле обязательное - Тип пользователя', 'ERROR_USER_TYPE'
            );
        }
    }

    $eventManager = \Bitrix\Main\EventManager::getInstance();
    $eventManager->addEventHandler(
        "bxmaker.authuserphone",
        "BXmakerAuthUserPhoneEnterComponentAjax",
        "bxmaker_authuserphone_event_main_BXmakerAuthUserPhoneEnterComponentAjaxr"
    );

    function bxmaker_authuserphone_event_main_BXmakerAuthUserPhoneEnterComponentAjaxr(\Bitrix\Main\Event $event)
    {
        /**
         * @var $jsonResponse \BXmaker\AuthUserPhone\Ajax\JsonResponse
         * @var $component \BXmakerAuthUserPhoneCallComponent
         */
        $fields = $event->getParameter('fields');
        $component = $fields['component'];

        $email = $component->request()->getPost('email');
        $method = $component->request()->getPost('method');

        if ($method != 'register') {
            return new \Bitrix\Main\EventResult(\Bitrix\Main\EventResult::SUCCESS, null);
        }

        if (empty($email)) {
            throw new \BXmaker\AuthUserPhone\Exception\BaseException('Укажите Email  адрес', 'ERROR_EMAIL');
        }

        if (!$component->manager()->isValidEmail($email)) {
            throw new \BXmaker\AuthUserPhone\Exception\BaseException('Email указан не верно', 'ERROR_EMAIL_NOT_SET');
        }
        if ($component->manager()->param()->isEnabledUniqueEmail() && $component->manager()->isExistEmail($email)) {
            throw new \BXmaker\AuthUserPhone\Exception\BaseException(
                'Аккаунт с таким Email  уже существует', 'ERROR_EMAIL_USED'
            );
        }

        return new \Bitrix\Main\EventResult(\Bitrix\Main\EventResult::SUCCESS, null);
    }
}