262 lines
8.7 KiB
TypeScript
262 lines
8.7 KiB
TypeScript
import { MTProto } from "../lib/mtproto/mtproto";
|
|
import { putPreloader, getNearestDc, scrollable } from "./misc";
|
|
import {RichTextProcessor} from '../lib/richtextprocessor';
|
|
|
|
import { unifiedCountryCodeEmoji, countryCodeEmoji, findUpTag } from "../lib/utils";
|
|
import pageAuthCode from "./pageAuthCode";
|
|
|
|
let installed = false;
|
|
|
|
type Country = {
|
|
name: string,
|
|
code: string,
|
|
phoneCode: string,
|
|
li?: HTMLLIElement[]
|
|
};
|
|
|
|
import _countries from '../countries_pretty.json';
|
|
|
|
//export default () => import('../countries_pretty.json').then(async(results) => {
|
|
export default () => {
|
|
//let pageAuthCode = await import('./pageAuthCode');
|
|
//Array.from(document.querySelectorAll('body > .whole:not(.page-authCode)')).forEach(div => div.style.display = 'none');
|
|
const pageEl = document.body.getElementsByClassName('page-sign')[0] as HTMLDivElement;
|
|
pageEl.style.display = '';
|
|
|
|
let btnNext = pageEl.querySelector('button');
|
|
|
|
if(installed) {
|
|
btnNext.textContent = 'NEXT';
|
|
btnNext.removeAttribute('disabled');
|
|
return;
|
|
}
|
|
|
|
installed = true;
|
|
|
|
//const countries: Country[] = results[0].default;
|
|
const countries: Country[] = _countries;
|
|
|
|
let lastCountrySelected = '';
|
|
|
|
var selectCountryCode = pageEl.querySelector('input[name="countryCode"]')! as HTMLInputElement;
|
|
var parent = selectCountryCode.parentElement;
|
|
|
|
var wrapper = document.createElement('div');
|
|
wrapper.classList.add('select-wrapper', 'z-depth-4');
|
|
|
|
var list = document.createElement('ul');
|
|
wrapper.appendChild(list);
|
|
|
|
//let wrapperScroll = OverlayScrollbars(wrapper, (window as any).scrollbarOptions);
|
|
let wrapperScroll = scrollable(wrapper);
|
|
|
|
let initedSelect = false;
|
|
|
|
selectCountryCode.addEventListener('focus', function(this: typeof selectCountryCode, e) {
|
|
/* this.removeAttribute('readonly'); */
|
|
if(!initedSelect) {
|
|
countries.forEach((c) => {
|
|
initedSelect = true;
|
|
|
|
/* let unified = unifiedCountryCodeEmoji(c.code);
|
|
let emoji = unified.split('-').reduce((prev, curr) => prev + String.fromCodePoint(parseInt(curr, 16)), ''); */
|
|
let emoji = countryCodeEmoji(c.code);
|
|
|
|
let liArr: Array<HTMLLIElement> = [];
|
|
c.phoneCode.split(' and ').forEach((phoneCode: string) => {
|
|
let li = document.createElement('li');
|
|
var spanEmoji = document.createElement('span');
|
|
/* spanEmoji.innerHTML = countryCodeEmoji(c.code); */
|
|
//spanEmoji.classList.add('emoji-outer', 'emoji-sizer');
|
|
//spanEmoji.innerHTML = `<span class="emoji-inner" style="background: url(${sheetUrl}${sheetNo}.png);background-position:${xPos}% ${yPos}%;background-size:${sizeX}% ${sizeY}%" data-codepoints="${unified}"></span>`;
|
|
|
|
|
|
|
|
let kek = RichTextProcessor.wrapRichText(emoji);
|
|
//console.log(c.name, emoji, kek, spanEmoji.innerHTML);
|
|
|
|
li.appendChild(spanEmoji);
|
|
spanEmoji.outerHTML = kek;
|
|
|
|
li.append(c.name);
|
|
|
|
var span = document.createElement('span');
|
|
span.classList.add('phone-code');
|
|
span.innerText = '+' + phoneCode;
|
|
li.appendChild(span);
|
|
|
|
liArr.push(li);
|
|
list.append(li);
|
|
});
|
|
|
|
c.li = liArr;
|
|
});
|
|
|
|
list.addEventListener('mousedown', function(e) {
|
|
let target = e.target as HTMLElement;
|
|
if(target.tagName != 'LI') target = findUpTag(target, 'LI');
|
|
|
|
let countryName = target.childNodes[1].textContent;//target.innerText.split('\n').shift();
|
|
let phoneCode = target.querySelector<HTMLElement>('.phone-code').innerText;
|
|
|
|
selectCountryCode.value = countryName;
|
|
lastCountrySelected = countryName;
|
|
|
|
telEl.value = phoneCode;
|
|
setTimeout(() => telEl.focus(), 0);
|
|
console.log('clicked', e, countryName, phoneCode);
|
|
});
|
|
}
|
|
|
|
parent.appendChild(wrapper);
|
|
}/* , {once: true} */);
|
|
selectCountryCode.addEventListener('blur', function(this: typeof selectCountryCode, e) {
|
|
parent.removeChild(wrapper);
|
|
e.cancelBubble = true;
|
|
}, {capture: true});
|
|
|
|
selectCountryCode.addEventListener('keyup', function(this: typeof selectCountryCode, e) {
|
|
if(e.ctrlKey || e.key == 'Control') return false;
|
|
|
|
//let i = new RegExp('^' + this.value, 'i');
|
|
let _value = this.value.toLowerCase();
|
|
let matches: Country[] = [];
|
|
countries.forEach((c) => {
|
|
let good = c.name.toLowerCase().indexOf(_value) !== -1/* == 0 */;//i.test(c.name);
|
|
|
|
c.li.forEach(li => li.style.display = good ? '' : 'none');
|
|
if(good) matches.push(c);
|
|
});
|
|
|
|
if(matches.length == 1 && matches[0].li.length == 1) {
|
|
if(matches[0].name == lastCountrySelected) return false;
|
|
console.log('clicking', matches[0]);
|
|
|
|
var clickEvent = document.createEvent('MouseEvents');
|
|
clickEvent.initEvent('mousedown', true, true);
|
|
matches[0].li[0].dispatchEvent(clickEvent);
|
|
return false;
|
|
} else if(matches.length == 0) {
|
|
countries.forEach((c) => {
|
|
c.li.forEach(li => li.style.display = '');
|
|
});
|
|
}
|
|
});
|
|
|
|
let arrowDown = pageEl.querySelector('.arrow-down') as HTMLSpanElement;
|
|
arrowDown.addEventListener('mousedown', function(this: typeof arrowDown, e) {
|
|
e.cancelBubble = true;
|
|
e.preventDefault();
|
|
if(selectCountryCode.matches(':focus')) selectCountryCode.blur();
|
|
else selectCountryCode.focus();
|
|
});
|
|
|
|
let telEl = pageEl.querySelector('input[name="phone"]') as HTMLInputElement;
|
|
telEl.addEventListener('input', function(this: typeof telEl, e) {
|
|
this.classList.remove('error');
|
|
this.value = '+' + this.value
|
|
.replace(/[^0-9\s]/g, '')
|
|
/* .replace(/(\d{1,4})(\d{1,3})?(\d{1,3})?/g, function(txt, f, s, t) {
|
|
if (t) {
|
|
return `(${f}) ${s}-${t}`
|
|
} else if (s) {
|
|
return `(${f}) ${s}`
|
|
} else if (f) {
|
|
return `(${f})`
|
|
}
|
|
}) */;
|
|
|
|
let sorted = countries.slice().sort((a, b) => b.phoneCode.length - a.phoneCode.length);
|
|
let phoneCode = this.value.slice(1, 7).replace(/\D/g, '');
|
|
let country = sorted.find((c) => {
|
|
return c.phoneCode.split(' and ').find((c) => phoneCode.indexOf(c) == 0);
|
|
});
|
|
|
|
console.log(phoneCode, country);
|
|
|
|
let countryName = country ? country.name : ''/* 'Unknown' */;
|
|
if(countryName != selectCountryCode.value) {
|
|
selectCountryCode.value = countryName;
|
|
lastCountrySelected = countryName;
|
|
}
|
|
|
|
if(this.value.length >= 9) {
|
|
btnNext.style.display = '';
|
|
}
|
|
});
|
|
|
|
telEl.addEventListener('keypress', function(this: typeof telEl, e) {
|
|
if(this.value.length >= 9 && e.key == 'Enter') {
|
|
return btnNext.click();
|
|
} else if(/\D/.test(e.key)) {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
/* telEl.addEventListener('focus', function(this: typeof telEl, e) {
|
|
this.removeAttribute('readonly'); // fix autocomplete
|
|
});*/
|
|
|
|
/* MTProto.authorizer.auth(2);
|
|
MTProto.networkerFactory.startAll(); */
|
|
|
|
btnNext.addEventListener('click', function(this: HTMLElement, e) {
|
|
this.setAttribute('disabled', 'true');
|
|
|
|
this.textContent = 'PLEASE WAIT...';
|
|
putPreloader(this);
|
|
//this.innerHTML = 'PLEASE WAIT...';
|
|
|
|
let phone_number = telEl.value;
|
|
MTProto.apiManager.invokeApi('auth.sendCode', {
|
|
/* flags: 0, */
|
|
phone_number: phone_number,
|
|
api_id: Config.App.id,
|
|
api_hash: Config.App.hash,
|
|
settings: {
|
|
_: 'codeSettings', // that's how we sending Type
|
|
flags: 0
|
|
}
|
|
/* lang_code: navigator.language || 'en' */
|
|
}).then((code: any) => {
|
|
console.log('got code', code);
|
|
|
|
pageEl.style.display = 'none';
|
|
|
|
// @ts-ignore
|
|
pageAuthCode(Object.assign(code, {phone_number: phone_number}));
|
|
}).catch(err => {
|
|
this.removeAttribute('disabled');
|
|
|
|
this.innerText = 'NEXT';
|
|
switch(err.type) {
|
|
case 'PHONE_NUMBER_INVALID':
|
|
telEl.classList.add('error');
|
|
break;
|
|
default:
|
|
this.innerText = err.type;
|
|
break;
|
|
}
|
|
});
|
|
});
|
|
|
|
let tryAgain = () => {
|
|
getNearestDc().then((nearestDcResult: any) => {
|
|
let country = countries.find((c) => c.code == nearestDcResult.country);
|
|
if(country) {
|
|
if(!selectCountryCode.value.length && !telEl.value.length) {
|
|
selectCountryCode.value = country.name;
|
|
lastCountrySelected = country.name;
|
|
telEl.value = '+' + country.phoneCode.split(' and ').shift();
|
|
}
|
|
}
|
|
|
|
return console.log('woohoo', nearestDcResult, country);
|
|
})//.catch(tryAgain);
|
|
};
|
|
|
|
tryAgain();
|
|
|
|
};
|