Fix sign in page
This commit is contained in:
parent
fa73477a9e
commit
86f2304be1
@ -39,7 +39,7 @@ let onFirstMount = () => {
|
|||||||
//const countries: Country[] = _countries.default.filter(c => c.emoji);
|
//const countries: Country[] = _countries.default.filter(c => c.emoji);
|
||||||
const countries: Country[] = Config.Countries.filter(c => c.emoji).sort((a, b) => a.name.localeCompare(b.name));
|
const countries: Country[] = Config.Countries.filter(c => c.emoji).sort((a, b) => a.name.localeCompare(b.name));
|
||||||
|
|
||||||
let lastCountrySelected = '';
|
let lastCountrySelected: Country = null;
|
||||||
|
|
||||||
var selectCountryCode = page.pageEl.querySelector('input[name="countryCode"]')! as HTMLInputElement;
|
var selectCountryCode = page.pageEl.querySelector('input[name="countryCode"]')! as HTMLInputElement;
|
||||||
var parent = selectCountryCode.parentElement;
|
var parent = selectCountryCode.parentElement;
|
||||||
@ -108,11 +108,15 @@ let onFirstMount = () => {
|
|||||||
let phoneCode = target.querySelector<HTMLElement>('.phone-code').innerText;
|
let phoneCode = target.querySelector<HTMLElement>('.phone-code').innerText;
|
||||||
|
|
||||||
selectCountryCode.value = countryName;
|
selectCountryCode.value = countryName;
|
||||||
lastCountrySelected = countryName;
|
lastCountrySelected = countries.find(c => c.name == countryName);
|
||||||
|
|
||||||
telEl.value = phoneCode;
|
telEl.value = phoneCode;
|
||||||
setTimeout(() => telEl.focus(), 0);
|
setTimeout(() => telEl.focus(), 0);
|
||||||
console.log('clicked', e, countryName, phoneCode);
|
//console.log('clicked', e, countryName, phoneCode);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
countries.forEach((c) => {
|
||||||
|
c.li.forEach(li => li.style.display = '');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -136,15 +140,16 @@ let onFirstMount = () => {
|
|||||||
if(good) matches.push(c);
|
if(good) matches.push(c);
|
||||||
});
|
});
|
||||||
|
|
||||||
if(matches.length == 1 && matches[0].li.length == 1) {
|
// Код ниже автоматически выберет страну если она осталась одна при поиске
|
||||||
|
/* if(matches.length == 1 && matches[0].li.length == 1) {
|
||||||
if(matches[0].name == lastCountrySelected) return false;
|
if(matches[0].name == lastCountrySelected) return false;
|
||||||
console.log('clicking', matches[0]);
|
//console.log('clicking', matches[0]);
|
||||||
|
|
||||||
var clickEvent = document.createEvent('MouseEvents');
|
var clickEvent = document.createEvent('MouseEvents');
|
||||||
clickEvent.initEvent('mousedown', true, true);
|
clickEvent.initEvent('mousedown', true, true);
|
||||||
matches[0].li[0].dispatchEvent(clickEvent);
|
matches[0].li[0].dispatchEvent(clickEvent);
|
||||||
return false;
|
return false;
|
||||||
} else if(matches.length == 0) {
|
} else */if(matches.length == 0) {
|
||||||
countries.forEach((c) => {
|
countries.forEach((c) => {
|
||||||
c.li.forEach(li => li.style.display = '');
|
c.li.forEach(li => li.style.display = '');
|
||||||
});
|
});
|
||||||
@ -162,21 +167,25 @@ let onFirstMount = () => {
|
|||||||
let sortedCountries = countries.slice().sort((a, b) => b.phoneCode.length - a.phoneCode.length);
|
let sortedCountries = countries.slice().sort((a, b) => b.phoneCode.length - a.phoneCode.length);
|
||||||
|
|
||||||
let telEl = page.pageEl.querySelector('input[name="phone"]') as HTMLInputElement;
|
let telEl = page.pageEl.querySelector('input[name="phone"]') as HTMLInputElement;
|
||||||
|
const telLabel = telEl.nextElementSibling as HTMLLabelElement;
|
||||||
telEl.addEventListener('input', function(this: typeof telEl, e) {
|
telEl.addEventListener('input', function(this: typeof telEl, e) {
|
||||||
this.classList.remove('error');
|
this.classList.remove('error');
|
||||||
|
|
||||||
|
telLabel.innerText = 'Phone Number';
|
||||||
|
|
||||||
let {formatted, country} = formatPhoneNumber(this.value);
|
let {formatted, country} = formatPhoneNumber(this.value);
|
||||||
this.value = formatted ? '+' + formatted : '';
|
this.value = formatted ? '+' + formatted : '';
|
||||||
|
|
||||||
console.log(formatted, country);
|
//console.log(formatted, country);
|
||||||
|
|
||||||
let countryName = country ? country.name : ''/* 'Unknown' */;
|
let countryName = country ? country.name : ''/* 'Unknown' */;
|
||||||
if(countryName != selectCountryCode.value) {
|
if(countryName != selectCountryCode.value && (!lastCountrySelected || !country || lastCountrySelected.phoneCode != country.phoneCode)) {
|
||||||
selectCountryCode.value = countryName;
|
selectCountryCode.value = countryName;
|
||||||
lastCountrySelected = countryName;
|
lastCountrySelected = country;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(country && (this.value.length - 1) >= (country.pattern ? country.pattern.length : 9)) {
|
//if(country && (this.value.length - 1) >= (country.pattern ? country.pattern.length : 9)) {
|
||||||
|
if(country || (this.value.length - 1) > 1) {
|
||||||
btnNext.style.visibility = '';
|
btnNext.style.visibility = '';
|
||||||
} else {
|
} else {
|
||||||
btnNext.style.visibility = 'hidden';
|
btnNext.style.visibility = 'hidden';
|
||||||
@ -184,7 +193,7 @@ let onFirstMount = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
telEl.addEventListener('keypress', function(this: typeof telEl, e) {
|
telEl.addEventListener('keypress', function(this: typeof telEl, e) {
|
||||||
if(this.value.length >= 9 && e.key == 'Enter') {
|
if(!btnNext.style.visibility &&/* this.value.length >= 9 && */ e.key == 'Enter') {
|
||||||
return btnNext.click();
|
return btnNext.click();
|
||||||
} else if(/\D/.test(e.key)) {
|
} else if(/\D/.test(e.key)) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -229,6 +238,7 @@ let onFirstMount = () => {
|
|||||||
this.innerText = 'NEXT';
|
this.innerText = 'NEXT';
|
||||||
switch(err.type) {
|
switch(err.type) {
|
||||||
case 'PHONE_NUMBER_INVALID':
|
case 'PHONE_NUMBER_INVALID':
|
||||||
|
telLabel.innerText = 'Phone Number Invalid';
|
||||||
telEl.classList.add('error');
|
telEl.classList.add('error');
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
@ -252,12 +262,12 @@ let onFirstMount = () => {
|
|||||||
if(country) {
|
if(country) {
|
||||||
if(!selectCountryCode.value.length && !telEl.value.length) {
|
if(!selectCountryCode.value.length && !telEl.value.length) {
|
||||||
selectCountryCode.value = country.name;
|
selectCountryCode.value = country.name;
|
||||||
lastCountrySelected = country.name;
|
lastCountrySelected = country;
|
||||||
telEl.value = '+' + country.phoneCode.split(' and ').shift();
|
telEl.value = '+' + country.phoneCode.split(' and ').shift();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return console.log('woohoo', nearestDcResult, country);
|
//console.log('woohoo', nearestDcResult, country);
|
||||||
})//.catch(tryAgain);
|
})//.catch(tryAgain);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user