Авторизация по номеру телефона
Примеры кастомизации Vue комопнентов и исопльзования событий
if (BX.Vue) {
BX.Vue.mutateComponent('BXmakerAuthuserphoneInput',
{
mounted: function () {
if (this.name === 'PHONE') {
var that = this;
$(this.$refs.input).inputmask('mask',
{
'mask': '7(999) 999-99-99',
'onKeyUp': function (event) {
setTimeout(function () {
that.onInput(event);
}, 0);
}
}
);
}
},
beforeDestroy: function () {
if (this.name === 'PHONE') {
$(this.$refs.input).inputmask('unmaskedvalue');
}
},
}
);
BX.ready(function () {
BX.Vue.mutateComponent('BXmakerAuthuserphoneEnterRegForm', {
name: 'BXmakerAuthuserphoneEnterRegForm',
data() {
return {
ufKartaM: '',
hasNotCard: false,
};
},
created() {
this.$set(this.$root.expandData, 'ufKartaM', '');
this.$set(this.$root.expandData, 'hasNotCard', false);
},
watch: {
hasNotCard(val) {
this.$set(this.$root.expandData, 'hasNotCard', val);
}
},
methods: {
onChangeUfKartaM(value) {
this.ufKartaM = value;
this.$set(this.$root.expandData, 'ufKartaM', value);
},
},
template: `
<div class="bxmaker-authuserphone-enter-reg-form" >
<slot name="message" />
<BXmakerAuthuserphoneMessage :message="$root.message" :error="$root.error" />
</slot>
<BXmakerAuthuserphoneInput
v-if="!hasNotCard"
:title="$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_REG_FORM__UF_KARTA_M"
:value="ufKartaM"
@onInput="onChangeUfKartaM"
name="UF_KARTA_M"
/>
<label class="bxmaker-authuserphone-enter-reg-form-hasNotCard"
for="bxmaker-authuserphone-enter-reg-form-hasNotCard__input"
style="position: relative; top: -12px;font-weight:normal;"
>
<input id="bxmaker-authuserphone-enter-reg-form-hasNotCard__input" type="checkbox" value="1" v-model="hasNotCard" />
<span>{{$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_REG_FORM__HAS_NOT_CARD}}</span>
</label>
<slot name="login" v-if="$root.isEnabledRegisterFIO">
<BXmakerAuthuserphoneInput
:title="$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_REG_FORM_FIO"
:value="$root.fio"
@onInput="$root.setFIO"
@onEnter="onEnterFIO"
name="FIO"
ref="fio"
/>
</slot>
<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="onClickConfirm"
@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="onClickConfirm"
/>
</slot>
</div>
`,
});
BX.Vue.component('AuthSwitch', {
name: 'AuthSwitch',
emits: ['onChangeActive'],
data() {
return {
isActivePhone: true,
}
},
watch: {
isActivePhone(val) {
this.$emit('onChangeActive', val);
this.$root.setPLE('');
}
},
methods: {
onClickPhone() {
if (this.isActivePhone) return;
this.isActivePhone = true;
console.log(this, this.$root);
console.log('onClickPhone');
},
onClickEmail() {
if (!this.isActivePhone) return;
this.isActivePhone = false;
console.log('onClickEmail');
}
},
template: '' +
'<div style="display:flex;flex-direction:row; cursor:pointer;justify-content:space-between;">' +
'<div @click="onClickPhone" :class="{\'active\' : isActivePhone}">Телефон</div> ' +
'<div @click="onClickEmail" :class="{\'active\' : !isActivePhone}">Email</div>' +
'</div>'
})
BX.Vue.mutateComponent('BXmakerAuthuserphoneEnterAuthForm', {
name: 'BXmakerAuthuserphoneEnterAuthForm',
data() {
return {
isActivePhone: true,
}
},
methods: {
changeActivePhone(flag) {
this.isActivePhone = flag;
}
},
template: '<div class="bxmaker-authuserphone-enter-auth-form" >' +
' <AuthSwitch @onChangeActive="changeActivePhone" />' +
'' +
' <slot name="message" />' +
' <BXmakerAuthuserphoneMessage :message="$root.message" :error="$root.error" />' +
' </slot>' +
'' +
' <slot name="phone">' +
' <BXmakerAuthuserphoneInputPhone v-if="$root.isEnabledPhoneMask && isActivePhone"' +
' :title="$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_AUTH_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_AUTH_FORM_PHONE"' +
' :value="$root.phone"' +
' @onInput="$root.setPhone"' +
' @onEnter="onEnterPhone"' +
' name="PHONE"' +
' />' +
' </slot>' +
'' +
'' +
' <slot name="captcha">' +
' <BXmakerAuthuserphoneCaptcha' +
' :code="$root.captchaCode"' +
' :src="$root.captchaSrc"' +
' :length="$root.captchaLength"' +
' :loader="$root.captchaLoader"' +
' @onInput="$root.setCaptchaCode"' +
' @onComplete="onCompleteCaptcha"' +
' @onRefresh="$root.refreshCaptcha"' +
' />' +
' </slot>' +
'' +
' <slot name="request">' +
' <BXmakerAuthuserphoneButton' +
' :title="$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_AUTH_FORM_BUTTON"' +
' :loader="$root.startLoader"' +
' @onClick="onClickConfirm"' +
' />' +
' </slot>' +
'' +
' <slot name="bypass">' +
' <div class="bxmaker-authuserphone-enter-auth-form__bypass">' +
' <BXmakerAuthuserphoneLink @onClick="onClickAuthByPass" >' +
' {{$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_AUTH_FORM_BY_PASS}}' +
' </BXmakerAuthuserphoneLink>' +
' </div>' +
' </slot>' +
'' +
' </div>',
});
})
}
if (BX.Vue && false) {
BX.Vue.mutateComponent('BXmakerAuthuserphoneInput',
{
mounted: function () {
var that = this;
if (this.name === 'PHONE') {
that.currentType = 'tel'
that.currentPlaceholder = '+7 (XXX) XXX-XX-XX'
this._mask = IMask(this.$refs.input, {
mask: '+{7} (000) 000-00-00',
});
this._mask.on('accept', function (event) {
setTimeout(function () {
that.setValue(that._mask.value);
}, 0);
});
}
},
beforeDestroy: function () {
if (this.name === 'PHONE') {
this._mask.destroy();
}
},
}
);
}
/* Enter ******************** */
if (BX.Vue && false) {
BX.ready(function () {
BX.Vue.mutateComponent('BXmakerAuthuserphoneEnter', {
name: 'BXmakerAuthuserphoneEnter',
data() {
return {};
},
computed: {
isNeedLinkAuthByPassword() {
if (!this.$root.actionTypeIsAuth) return false;
if (this.$root.actionTypeIsAuth && !this.$root.isShowConfirm) return false;
if (this.$root.isAuthByPassword && this.$root.isShowConfirm) return false;
if (this.$root.isAuthorized) return false;
return true;
}
},
methods: {
toLoginPassword() {
this.$root.toAuth();
this.$root.setIsAuthByPassword(true);
},
},
template: `
<div class="bxmaker-authuserphone-enter" :id="'bxmaker-authuserphone-enter__' + $root.rand" >
<BXmakerAuthuserphoneEmpty v-if="$root.isAuthorized" >
{{$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_IS_AUTHORIZED}} <br>
<a href="?logout=Y">{{$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_LOGOUT}}</a>
</BXmakerAuthuserphoneEmpty>
<BXmakerAuthuserphoneEnterAuth v-show="$root.actionTypeIsAuth && !$root.isAuthorized" />
<BXmakerAuthuserphoneEnterReg v-show="$root.actionTypeIsReg && !$root.isAuthorized && this.$root.isEnabledRegister" />
<BXmakerAuthuserphoneEnterForget v-show="$root.actionTypeIsForget && !$root.isAuthorized" />
<div class="bxmaker-authuserphone-enter-auth-form__bypass" v-if="isNeedLinkAuthByPassword">
<BXmakerAuthuserphoneLink @onClick="toLoginPassword" >
{{$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_AUTH_FORM_BY_PASS}}
</BXmakerAuthuserphoneLink>
</div>
</div>
`,
});
});
}
// добавление поля даты рождения
if (BX.Vue && false) {
BX.Vue.mutateComponent('BXmakerAuthuserphoneEnterRegForm', {
name: 'BXmakerAuthuserphoneEnterRegForm',
data() {
return {
personalBirthday: '',
};
},
created() {
this.$set(this.$root.expandData, 'personalBirthday', '');
},
// mounted: function () {
// var that = this;
// $(this.$refs.personalBirthday).inputmask('mask',
// {
// 'mask': '99.99.9999',
// 'onKeyUp': function (event) {
// setTimeout(function () {
// that.onChangeDateBirthday(event);
// }, 0);
// }
// }
// );
// },
// beforeUnmount: function () {
// $(this.$refs.personalBirthday).inputmask('unmaskedvalue');
// },
methods: {
onChangeDateBirthday(event) {
var value = event.target.value;
value = value.replace(/[^\d.]+/g, '');
this.personalBirthday = value;
this.$set(this.$root.expandData, 'personalBirthday', value);
},
onBeforeContinue() {
if (this.personalBirthday.match(/^\d\d\.\d\d\.\d\d\d\d$/)) {
this.onClickConfirm();
} else {
this.$root.setError('Wrong bithhday');
}
}
},
template: `
<div class="bxmaker-authuserphone-enter-reg-form" >
<slot name="message" />
<BXmakerAuthuserphoneMessage :message="$root.message" :error="$root.error" />
</slot>
<!--ДАТА РОЖДЕНИЯ-->
<div class="bxmaker-authuserphone-input ">
<div class="bxmaker-authuserphone-input__field">
<input
type="text"
class="select__option js-calendarDateRange"
placeholder="Выбрать дату"
@input="onChangeDateBirthday"
:value="personalBirthday"
name="PERSONAL_BIRTHDAY"
ref="refBirthday"
style="padding:12px 8px;"
>
</div>
</div>
<!--ДАТА РОЖДЕНИЯ-->
<slot name="login" v-if="$root.isEnabledRegisterFIO">
<BXmakerAuthuserphoneInput
:title="$root.localize.BXMAKER_AUTHUSERPHONE_ENTER_REG_FORM_FIO"
:value="$root.fio"
@onInput="$root.setFIO"
@onEnter="onEnterFIO"
name="FIO"
ref="fio"
/>
</slot>
<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="onBeforeContinue"
@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="onBeforeContinue"
/>
</slot>
</div>
`,
});
}
/** СОбтия ************************************ */
/**
* Событие смены типа действия - Авторизация, регистрация, восстановленеи пароля..
*/
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());
});
/**
* Событие смены способа подтвреждения - смс код, звонок от робота
*/
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('*** Способ подтвреждения - НЕ СМС код')
}
});
/**
* Событие показа/скрытия блоков с проверкой телефона
*/
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('*** Подготовка к проверке номера')
}
});
/**
* Событие смены способа входа, по паролю или нет
*/
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('*** Вход через подтерждение телефона')
}
});
/* 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('*** Способ подтвреждения - НЕ СМС код')
}
});
/**
* Событие показа/скрытия блоков с проверкой телефона
*/
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('*** Подготовка к проверке номера')
}
});
/* 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('*** Способ подтвреждения - НЕ СМС код')
}
});
/**
* Событие показа/скрытия блоков с проверкой телефона
*/
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('*** Подготовка к проверке номера')
}
});