From 2de396521efaf077d023a8755fa581fac8ab076e Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Thu, 26 Aug 2021 02:54:42 +0300
Subject: [PATCH] Phone number placeholder

---
 src/components/misc.ts             | 16 ++++--
 src/helpers/dom/placeCaretAtEnd.ts |  4 +-
 src/index.hbs                      |  2 +-
 src/pages/pageSignIn.ts            | 81 +++++++++++++++++++++---------
 src/scss/partials/_input.scss      | 13 +++++
 5 files changed, 84 insertions(+), 32 deletions(-)

diff --git a/src/components/misc.ts b/src/components/misc.ts
index ff0bcdd8..a622ff82 100644
--- a/src/components/misc.ts
+++ b/src/components/misc.ts
@@ -52,8 +52,8 @@ export function setButtonLoader(elem: HTMLButtonElement, icon = 'check') {
 }
 
 let sortedCountries: Country[];
-export function formatPhoneNumber(str: string) {
-  str = str.replace(/\D/g, '');
+export function formatPhoneNumber(originalStr: string) {
+  let str = originalStr.replace(/\D/g, '');
   let phoneCode = str.slice(0, 6);
   
   ////console.log('str', str, phoneCode);
@@ -65,7 +65,7 @@ export function formatPhoneNumber(str: string) {
     return c.phoneCode.split(' and ').find((c) => phoneCode.indexOf(c.replace(/\D/g, '')) === 0);
   });
 
-  if(!country) return {formatted: str, country};
+  if(!country) return {formatted: str, country, leftPattern: ''};
 
   country = PhoneCodesMain[country.phoneCode] || country;
   
@@ -79,8 +79,16 @@ export function formatPhoneNumber(str: string) {
   /* if(country.pattern) {
     str = str.slice(0, country.pattern.length);
   } */
+
+  let leftPattern = pattern && pattern.length > str.length ? pattern.slice(str.length) : '';
+  if(leftPattern) {
+    /* const length = str.length;
+    leftPattern = leftPattern.split('').map((_, idx) => (length + idx).toString().slice(-1)).join(''); */
+    leftPattern = leftPattern.replace(/X/g, '‒');
+    // leftPattern = leftPattern.replace(/X/g, '0');
+  }
   
-  return {formatted: str, country};
+  return {formatted: str, country, leftPattern};
 }
 
 /* export function parseMenuButtonsTo(to: {[name: string]: HTMLElement}, elements: HTMLCollection | NodeListOf<HTMLElement>) {
diff --git a/src/helpers/dom/placeCaretAtEnd.ts b/src/helpers/dom/placeCaretAtEnd.ts
index f2b01636..d8542453 100644
--- a/src/helpers/dom/placeCaretAtEnd.ts
+++ b/src/helpers/dom/placeCaretAtEnd.ts
@@ -11,8 +11,8 @@
 
 import { isTouchSupported } from "../touchSupport";
 
-export default function placeCaretAtEnd(el: HTMLElement) {
-  if(isTouchSupported) {
+export default function placeCaretAtEnd(el: HTMLElement, ignoreTouchCheck = false) {
+  if(isTouchSupported && (!ignoreTouchCheck || document.activeElement !== el)) {
     return;
   }
   
diff --git a/src/index.hbs b/src/index.hbs
index 30ee2a61..c4e93f55 100644
--- a/src/index.hbs
+++ b/src/index.hbs
@@ -40,7 +40,7 @@
     <div class="scrollable scrollable-y">
       <div class="tabs-container auth-pages__container" data-animation="tabs">
         <div class="tabs-tab page-sign">
-          <div class="container center-align">
+          <div class="container">
             <div class="auth-image">
               <svg class="sign-logo" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
                 <use href="#logo" />
diff --git a/src/pages/pageSignIn.ts b/src/pages/pageSignIn.ts
index d56ea57c..52076c24 100644
--- a/src/pages/pageSignIn.ts
+++ b/src/pages/pageSignIn.ts
@@ -35,6 +35,7 @@ import replaceContent from "../helpers/dom/replaceContent";
 import toggleDisability from "../helpers/dom/toggleDisability";
 import sessionStorage from "../lib/sessionStorage";
 import { DcAuthKey } from "../types";
+import placeCaretAtEnd from "../helpers/dom/placeCaretAtEnd";
 
 type Country = _Country & {
   li?: HTMLLIElement[]
@@ -142,9 +143,12 @@ let onFirstMount = () => {
     countryInput.value = countryName;
     lastCountrySelected = countries.find(c => c.name === countryName);
     
-    telEl.value = lastValue = phoneCode;
+    telInputField.value = lastValue = phoneCode;
     hidePicker();
-    setTimeout(() => telEl.focus(), 0);
+    setTimeout(() => {
+      telEl.focus();
+      placeCaretAtEnd(telEl, true);
+    }, 0);
   };
   
   initSelect();
@@ -250,38 +254,61 @@ let onFirstMount = () => {
   
   const telInputField = new InputField({
     label: 'Login.PhoneLabel',
-    plainText: true,
+    //plainText: true,
     name: 'phone'
   });
-  let telEl = telInputField.input as HTMLInputElement;
-  telEl.type = 'tel';
-  telEl.autocomplete = 'rr55RandomRR55';
-  telEl.addEventListener('input', function(this: typeof telEl, e) {
+
+  telInputField.container.classList.add('input-field-phone');
+
+  let telEl = telInputField.input;
+  if(telEl instanceof HTMLInputElement) {
+    telEl.type = 'tel';
+    telEl.autocomplete = 'rr55RandomRR55';
+  } else {
+    telEl.inputMode = 'decimal';
+
+    const pixelRatio = window.devicePixelRatio;
+    if(pixelRatio > 1) {
+      const letterSpacing = -(pixelRatio * .16) + 'px';
+      telEl.style.setProperty('--letter-spacing', letterSpacing);
+    }
+
+    const originalFunc = telInputField.setValueSilently.bind(telInputField);
+    telInputField.setValueSilently = (value) => {
+      originalFunc(value);
+      placeCaretAtEnd(telInputField.input, true);
+    };
+  }
+  
+  telEl.addEventListener('input', () => {
     //console.log('input', this.value);
-    this.classList.remove('error');
+    telEl.classList.remove('error');
 
     lottieLoader.loadLottieWorkers();
 
-    const value = this.value;
+    const value = telInputField.value;
     const diff = Math.abs(value.length - lastValue.length);
     if(diff > 1 && !pasted && isAppleMobile) {
-      this.value = lastValue + value;
+      telInputField.setValueSilently(lastValue + value);
     }
 
     pasted = false;
 
     telInputField.setLabel();
 
-    let formatted: string, country: Country;
-    if(this.value.replace(/\++/, '+') === '+') {
-      this.value = '+';
+    let formatted: string, country: Country, leftPattern = '';
+    if(telInputField.value.replace(/\++/, '+') === '+') {
+      telInputField.setValueSilently('+');
     } else {
-      const o = formatPhoneNumber(this.value);
+      const o = formatPhoneNumber(telInputField.value);
       formatted = o.formatted;
       country = o.country;
-      this.value = lastValue = formatted ? '+' + formatted : '';
+      leftPattern = o.leftPattern;
+      telInputField.setValueSilently(lastValue = formatted ? '+' + formatted : '');
     }
 
+    telEl.dataset.leftPattern = leftPattern/* .replace(/X/g, '0') */;
+
     //console.log(formatted, country);
 
     let countryName = country ? country.name : ''/* 'Unknown' */;
@@ -290,15 +317,15 @@ let onFirstMount = () => {
       lastCountrySelected = country;
     }
 
-    //if(country && (this.value.length - 1) >= (country.pattern ? country.pattern.length : 9)) {
-    if(country || (this.value.length - 1) > 1) {
+    //if(country && (telInputField.value.length - 1) >= (country.pattern ? country.pattern.length : 9)) {
+    if(country || (telInputField.value.length - 1) > 1) {
       btnNext.style.visibility = '';
     } else {
       btnNext.style.visibility = 'hidden';
     }
   });
 
-  telEl.addEventListener('paste', (e) => {
+  telEl.addEventListener('paste', () => {
     pasted = true;
     //console.log('paste', telEl.value);
   });
@@ -307,7 +334,7 @@ let onFirstMount = () => {
     console.log('change', telEl.value);
   }); */
 
-  telEl.addEventListener('keypress', function(this: typeof telEl, e) {
+  telEl.addEventListener('keypress', (e) => {
     //console.log('keypress', this.value);
     if(!btnNext.style.visibility &&/* this.value.length >= 9 && */ e.key === 'Enter') {
       return onSubmit();
@@ -362,7 +389,7 @@ let onFirstMount = () => {
 
     //return;
 
-    let phone_number = telEl.value;
+    let phone_number = telInputField.value;
     apiManager.invokeApi('auth.sendCode', {
       phone_number: phone_number,
       api_id: App.id,
@@ -424,10 +451,11 @@ let onFirstMount = () => {
   inputWrapper.append(countryInputField.container, telInputField.container, signedCheckboxField.label, btnNext, btnQr);
 
   const h4 = document.createElement('h4');
+  h4.classList.add('text-center');
   _i18n(h4, 'Login.Title');
 
   const subtitle = document.createElement('div');
-  subtitle.classList.add('subtitle');
+  subtitle.classList.add('subtitle', 'text-center');
   _i18n(subtitle, 'Login.StartText');
 
   page.pageEl.querySelector('.container').append(h4, subtitle, inputWrapper);
@@ -470,12 +498,15 @@ let onFirstMount = () => {
       
       return nearestDcResult;
     }).then((nearestDcResult) => {
-      let country = countries.find((c) => c.code === nearestDcResult.country);
-      if(country) {
-        if(!countryInput.value.length && !telEl.value.length) {
+      if(!countryInput.value.length && !telInputField.value.length) {
+        const country = countries.find((c) => c.code === nearestDcResult.country);
+        if(country) {
           countryInput.value = country.name;
           lastCountrySelected = country;
-          telEl.value = lastValue = '+' + country.phoneCode.split(' and ').shift();
+          const str = '+' + country.phoneCode.split(' and ').shift();
+          const {leftPattern} = formatPhoneNumber(str);
+          telInputField.setValueSilently(lastValue = str);
+          telEl.dataset.leftPattern = leftPattern;
         }
       }
   
diff --git a/src/scss/partials/_input.scss b/src/scss/partials/_input.scss
index 98f236d0..99b19096 100644
--- a/src/scss/partials/_input.scss
+++ b/src/scss/partials/_input.scss
@@ -433,3 +433,16 @@ input:focus, button:focus {
     }
   }
 }
+
+.input-field-phone {
+  .input-field-input {
+    --letter-spacing: .24px;
+
+    &:after {
+      content: attr(data-left-pattern);
+      // opacity: .4;
+      color: $placeholder-color;
+      letter-spacing: var(--letter-spacing);
+    }
+  }
+}