From 2cd69f7d986e62d396127b2d9c86f39bab2e2daf Mon Sep 17 00:00:00 2001
From: morethanwords <thanwords24@gmail.com>
Date: Tue, 19 Jan 2021 21:49:01 +0400
Subject: [PATCH] Input label animation fix

---
 src/components/chat/bubbles.ts    |  24 +++--
 src/index.hbs                     |  35 +-------
 src/lib/mtproto/authorizer.ts     |  71 +++++++++++----
 src/lib/mtproto/mtproto.worker.ts |  20 +++--
 src/pages/pageAuthCode.ts         |  15 +++-
 src/pages/pagePassword.ts         |  26 +++++-
 src/pages/pageSignIn.ts           | 143 ++++++++++++++++++++----------
 src/scss/partials/_input.scss     |  24 +++--
 8 files changed, 224 insertions(+), 134 deletions(-)

diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts
index 83b606cd..7c9f4e89 100644
--- a/src/components/chat/bubbles.ts
+++ b/src/components/chat/bubbles.ts
@@ -24,7 +24,7 @@ import animationIntersector from "../animationIntersector";
 import { months } from "../../helpers/date";
 import RichTextProcessor from "../../lib/richtextprocessor";
 import mediaSizes from "../../helpers/mediaSizes";
-import { isAndroid, isApple, isSafari } from "../../helpers/userAgent";
+import { isAndroid, isApple, isSafari, isAppleMobile } from "../../helpers/userAgent";
 import { langPack } from "../../lib/langPack";
 import AvatarElement from "../avatar";
 import { formatPhoneNumber } from "../misc";
@@ -2428,9 +2428,11 @@ export default class ChatBubbles {
           //this.scrollable.scrollTop = this.scrollable.scrollHeight;
           isTouchSupported && isApple && (this.scrollable.container.style.overflow = '');
 
-          this.scrollable.container.style.display = 'none';
-          void this.scrollable.container.offsetLeft; // reflow
-          this.scrollable.container.style.display = '';
+          if(isSafari && !isAppleMobile) { // * fix blinking and jumping
+            this.scrollable.container.style.display = 'none';
+            void this.scrollable.container.offsetLeft; // reflow
+            this.scrollable.container.style.display = '';
+          }
 
           /* if(DEBUG) {
             this.log('performHistoryResult: have set up scrollTop:', newScrollTop, this.scrollable.scrollTop, this.isHeavyAnimationInProgress);
@@ -2707,14 +2709,18 @@ export default class ChatBubbles {
           const promises = [topRes.animationPromise, middleRes.animationPromise, bottomRes.animationPromise];
           const delays: number[] = [topRes.lastMsDelay, middleRes.lastMsDelay, bottomRes.lastMsDelay];
 
+          let promise: Promise<any>;
           if(topIds.length || middleIds.length || bottomIds.length) {
-            dispatchHeavyAnimationEvent(Promise.all(promises), Math.max(...delays) + 200); // * 200 - transition time
+            promise = Promise.all(promises);
+            dispatchHeavyAnimationEvent(promise, Math.max(...delays) + 200); // * 200 - transition time
           }
-        }
 
-        setTimeout(() => {
-          this.loadMoreHistory(true, true);
-        }, 0);
+          (promise || Promise.resolve()).then(() => {
+            setTimeout(() => { // preload messages
+              this.loadMoreHistory(reverse, true);
+            }, 0);
+          });
+        }
       });
     }
 
diff --git a/src/index.hbs b/src/index.hbs
index dc2f0b51..0f4dd5ab 100644
--- a/src/index.hbs
+++ b/src/index.hbs
@@ -39,25 +39,6 @@
             </div>
             <h4>Sign in to Telegram</h4>
             <p class="subtitle">Please confirm your country and<br> enter your phone number.</p>
-            <div class="input-wrapper">
-              {{!-- <form action=""> --}}
-                <div class="input-field input-select">
-                  <input type="text" name="countryCode" id="countryCode" autocomplete="rrRandomRR" required />
-                  <label for="countryCode">Country</label>
-                  <span class="arrow arrow-down"></span>
-                </div>
-                <div class="input-field">
-                  <input type="tel" name="phone" id="phone" autocomplete="rr55RandomRR55" required />
-                  <label for="phone">Phone Number</label>
-                </div>
-                <label class="checkbox-field">
-                  <input type="checkbox" id="keepSigned" checked="checked">
-                  <span>Keep me signed in</span>
-                </label>
-                <button class="btn-primary rp" style="visibility: hidden;">NEXT</button>
-              {{!-- </form> --}}
-              <div class="qr"><a href="#" class="a-qr">Quick log in using QR code</a></div>
-            </div>
           </div>
         </div>
         <div class="page-signQR">
@@ -78,12 +59,7 @@
               <span class="phone-edit tgico-edit"></span>
             </div>
             <p class="subtitle sent-type"></p>
-            <div class="input-wrapper">
-              <div class="input-field">
-                <input type="tel" name="code" id="code" autocomplete="off" required />
-                <label for="code">Code</label>
-              </div>
-            </div>
+            <div class="input-wrapper"></div>
           </div>
         </div>
         <div class="page-password">
@@ -91,14 +67,7 @@
             <div class="auth-image"></div>
             <h4 class="phone">Enter Your Password</h4>
             <p class="subtitle">Your account is protected with<br>an additional password</p>
-            <div class="input-wrapper">
-              <div class="input-field">
-                <input type="password" name="password" id="password" autocomplete="off" required />
-                <label for="password">Password</label>
-                <span class="toggle-visible tgico"></span>
-              </div>
-              <button class="btn-primary rp">NEXT</button>
-            </div>
+            <div class="input-wrapper"></div>
           </div>
         </div>
         <div class="page-signUp">
diff --git a/src/lib/mtproto/authorizer.ts b/src/lib/mtproto/authorizer.ts
index 80d5e545..57236bf7 100644
--- a/src/lib/mtproto/authorizer.ts
+++ b/src/lib/mtproto/authorizer.ts
@@ -10,6 +10,7 @@ import CryptoWorker from "../crypto/cryptoworker";
 
 import { logger, LogLevels } from "../logger";
 import { bytesCmp, bytesToHex, bytesFromHex, bytesXor } from "../../helpers/bytes";
+import { DEBUG } from "./mtproto_config";
 //import { bigInt2str, greater, int2bigInt, one, powMod, str2bigInt, sub } from "../../vendor/leemon";
 
 /* let fNewNonce: any = bytesFromHex('8761970c24cb2329b5b2459752c502f3057cb7e8dbab200e526e8767fdc73b3c').reverse();
@@ -100,10 +101,14 @@ export class Authorizer {
       transport: transport
     };
     
-    this.log('mtpSendPlainRequest: creating requestPromise');
+    if(DEBUG) {
+      this.log('mtpSendPlainRequest: creating requestPromise');
+    }
     
     return transport.send(resultArray).then(result => {
-      this.log('mtpSendPlainRequest: in good sector', result);
+      if(DEBUG) {
+        this.log('mtpSendPlainRequest: in good sector', result);
+      }
       
       if(!result || !result.byteLength) {
         return Promise.reject(baseError);
@@ -148,7 +153,9 @@ export class Authorizer {
     // need
     rsaKeysManager.prepare().then(() => {});
     
-    this.log('Send req_pq', auth.nonce.hex);
+    if(DEBUG) {
+      this.log('Send req_pq', auth.nonce.hex);
+    }
     try {
       var deserializer = await this.mtpSendPlainRequest(auth.dcId, request.getBytes(true));
     } catch(error) {
@@ -172,7 +179,9 @@ export class Authorizer {
     auth.pq = response.pq;
     auth.fingerprints = response.server_public_key_fingerprints;
     
-    this.log('Got ResPQ', bytesToHex(auth.serverNonce), bytesToHex(auth.pq), auth.fingerprints);
+    if(DEBUG) {
+      this.log('Got ResPQ', bytesToHex(auth.serverNonce), bytesToHex(auth.pq), auth.fingerprints);
+    }
     
     let publicKey = await rsaKeysManager.select(auth.fingerprints);
     if(!publicKey) {
@@ -181,7 +190,9 @@ export class Authorizer {
     
     auth.publicKey = publicKey;
     
-    this.log('PQ factorization start', auth.pq);
+    if(DEBUG) {
+      this.log('PQ factorization start', auth.pq);
+    }
     
     try {
       var pAndQ = await CryptoWorker.factorize(auth.pq);
@@ -193,7 +204,9 @@ export class Authorizer {
     auth.p = pAndQ[0];
     auth.q = pAndQ[1];
     
-    this.log('PQ factorization done', pAndQ);
+    if(DEBUG) {
+      this.log('PQ factorization done', pAndQ);
+    }
     /* let p = new Uint32Array(new Uint8Array(auth.p).buffer)[0];
     let q = new Uint32Array(new Uint8Array(auth.q).buffer)[0];
     console.log(dT(), 'PQ factorization done', pAndQ, p.toString(16), q.toString(16)); */
@@ -258,18 +271,22 @@ export class Authorizer {
     
     let requestBytes = request.getBytes(true);
     
-    this.log('Send req_DH_params', req_DH_params/* , requestBytes.hex */);
+    if(DEBUG) {
+      this.log('Send req_DH_params', req_DH_params/* , requestBytes.hex */);
+    }
     
     try {
       var deserializer = await this.mtpSendPlainRequest(auth.dcId, requestBytes);
     } catch(error) {
-      this.log('Send req_DH_params FAIL!', error);
+      this.log.error('Send req_DH_params FAIL!', error);
       throw error;
     }
     
     var response = deserializer.fetchObject('Server_DH_Params', 'RESPONSE');
     
-    this.log('Sent req_DH_params, response:', response);
+    if(DEBUG) {
+      this.log('Sent req_DH_params, response:', response);
+    }
     
     if(response._ != 'server_DH_params_fail' && response._ != 'server_DH_params_ok') {
       throw new Error('[MT] Server_DH_Params response invalid: ' + response._);
@@ -347,7 +364,9 @@ export class Authorizer {
       throw new Error('[MT] server_DH_inner_data serverNonce mismatch');
     }
     
-    this.log('Done decrypting answer');
+    if(DEBUG) {
+      this.log('Done decrypting answer');
+    }
     auth.g = response.g;
     auth.dhPrime = response.dh_prime;
     auth.gA = response.g_a;
@@ -367,13 +386,19 @@ export class Authorizer {
   }
   
   public mtpVerifyDhParams(g: number, dhPrime: Uint8Array, gA: Uint8Array) {
-    this.log('Verifying DH params', g, dhPrime, gA);
+    if(DEBUG) {
+      this.log('Verifying DH params', g, dhPrime, gA);
+    }
+
     var dhPrimeHex = bytesToHex(dhPrime);
     if(g != 3 || dhPrimeHex !== 'c71caeb9c6b1c9048e6c522f70f13f73980d40238e3e21c14934d037563d930f48198a0aa7c14058229493d22530f4dbfa336f6e0ac925139543aed44cce7c3720fd51f69458705ac68cd4fe6b6b13abdc9746512969328454f18faf8c595f642477fe96bb2a941d5bcd1d4ac8cc49880708fa9b378e3c4f3a9060bee67cf9a4a4a695811051907e162753b56b0f6b410dba74d8a84b2a14b3144e0ef1284754fd17ed950d5965b4b9dd46582db1178d169c6bc465b0d6ff9ca3928fef5b9ae4e418fc15e83ebea0f87fa9ff5eed70050ded2849f47bf959d956850ce929851f0d8115f635b105ee2e4e15d04b2454bf6f4fadf034b10403119cd8e3b92fcc5b') {
       // The verified value is from https://core.telegram.org/mtproto/security_guidelines
       throw new Error('[MT] DH params are not verified: unknown dhPrime');
     }
-    this.log('dhPrime cmp OK');
+
+    if(DEBUG) {
+      this.log('dhPrime cmp OK');
+    }
     
     var gABigInt = new BigInteger(bytesToHex(gA), 16);
     //const _gABigInt = str2bigInt(bytesToHex(gA), 16);
@@ -392,7 +417,10 @@ export class Authorizer {
     //if(greater(gABigInt, sub(_dhPrimeBigInt, one))) {
       throw new Error('[MT] DH params are not verified: gA >= dhPrime - 1');
     }
-    this.log('1 < gA < dhPrime-1 OK');
+
+    if(DEBUG) {
+      this.log('1 < gA < dhPrime-1 OK');
+    }
     
     
     var two = new BigInteger(/* null */'');
@@ -410,7 +438,10 @@ export class Authorizer {
     if(gABigInt.compareTo(dhPrimeBigInt.subtract(twoPow)) >= 0) {
       throw new Error('[MT] DH params are not verified: gA > dhPrime - 2^{2048-64}');
     }
-    this.log('2^{2048-64} < gA < dhPrime-2^{2048-64} OK');
+
+    if(DEBUG) {
+      this.log('2^{2048-64} < gA < dhPrime-2^{2048-64} OK');
+    }
     
     return true;
   }
@@ -450,7 +481,9 @@ export class Authorizer {
       encrypted_data: encryptedData
     });
     
-    this.log('Send set_client_DH_params');
+    if(DEBUG) {
+      this.log('Send set_client_DH_params');
+    }
     
     try {
       var deserializer = await this.mtpSendPlainRequest(auth.dcId, request.getBytes(true));
@@ -483,7 +516,9 @@ export class Authorizer {
     authKeyAux = authKeyHash.slice(0, 8),
     authKeyId = authKeyHash.slice(-8);
     
-    this.log('Got Set_client_DH_params_answer', response._, authKey);
+    if(DEBUG) {
+      this.log('Got Set_client_DH_params_answer', response._, authKey);
+    }
     switch(response._) {
       case 'dh_gen_ok':
         var newNonceHash1 = (await CryptoWorker.sha1Hash(auth.newNonce.concat([1], authKeyAux))).slice(-16);
@@ -494,7 +529,9 @@ export class Authorizer {
         }
         
         var serverSalt = bytesXor(auth.newNonce.slice(0, 8), auth.serverNonce.slice(0, 8));
-        this.log('Auth successfull!', authKeyId, authKey, serverSalt);
+        if(DEBUG) {
+          this.log('Auth successfull!', authKeyId, authKey, serverSalt);
+        }
         
         auth.authKeyId = authKeyId;
         auth.authKey = authKey;
diff --git a/src/lib/mtproto/mtproto.worker.ts b/src/lib/mtproto/mtproto.worker.ts
index da42b587..6bafe356 100644
--- a/src/lib/mtproto/mtproto.worker.ts
+++ b/src/lib/mtproto/mtproto.worker.ts
@@ -109,7 +109,7 @@ ctx.addEventListener('message', async(e) => {
       case 'gzipUncompress':
         // @ts-ignore
         return cryptoWorker[task.task].apply(cryptoWorker, task.args).then(result => {
-          respond({taskId: taskId, result: result});
+          respond({taskId, result});
         });
   
       case 'setQueueId':
@@ -127,16 +127,18 @@ ctx.addEventListener('message', async(e) => {
             result = await result;
           }
   
-          respond({taskId: taskId, result: result});
-        } catch(err) {
-          respond({taskId: taskId, error: err});
+          respond({taskId, result});
+        } catch(error) {
+          respond({taskId, error});
         }
       }
 
       case 'getNetworker': {
         // @ts-ignore
-        apiManager[task.task].apply(apiManager, task.args);
-        respond({taskId: taskId, result: null});
+        apiManager[task.task].apply(apiManager, task.args).finally(() => {
+          respond({taskId, result: null});
+        });
+        
         break;
       }
   
@@ -149,9 +151,9 @@ ctx.addEventListener('message', async(e) => {
             result = await result;
           }
   
-          respond({taskId: taskId, result: result});
-        } catch(err) {
-          respond({taskId: taskId, error: err});
+          respond({taskId, result});
+        } catch(error) {
+          respond({taskId, error});
         }
   
         //throw new Error('Unknown task: ' + task.task);
diff --git a/src/pages/pageAuthCode.ts b/src/pages/pageAuthCode.ts
index a257b874..2a428563 100644
--- a/src/pages/pageAuthCode.ts
+++ b/src/pages/pageAuthCode.ts
@@ -11,6 +11,7 @@ import pageIm from './pageIm';
 import pagePassword from './pagePassword';
 import pageSignIn from './pageSignIn';
 import pageSignUp from './pageSignUp';
+import InputField from '../components/inputField';
 
 let authCode: AuthSentCode.authSentCode = null;
 
@@ -28,7 +29,19 @@ let onFirstMount = (): Promise<any> => {
 
   const CODELENGTH = (authCode.type as AuthSentCodeType.authSentCodeTypeApp).length;
 
-  codeInput = page.pageEl.querySelector('#code') as HTMLInputElement;
+  const codeInputField = new InputField({
+    label: 'Code',
+    name: 'code',
+    plainText: true
+  });
+
+  codeInput = codeInputField.input as HTMLInputElement;
+  codeInput.type = 'tel';
+  codeInput.setAttribute('required', '');
+  codeInput.autocomplete = 'off';
+
+  page.pageEl.querySelector('.input-wrapper').append(codeInputField.container);
+
   const codeInputLabel = codeInput.nextElementSibling as HTMLLabelElement;
   const editButton = page.pageEl.querySelector('.phone-edit') as HTMLElement;
 
diff --git a/src/pages/pagePassword.ts b/src/pages/pagePassword.ts
index 647c99ed..9651d447 100644
--- a/src/pages/pagePassword.ts
+++ b/src/pages/pagePassword.ts
@@ -12,6 +12,8 @@ import passwordManager from '../lib/mtproto/passwordManager';
 import { cancelEvent } from '../helpers/dom';
 import Page from './page';
 import pageIm from './pageIm';
+import InputField from '../components/inputField';
+import Button from '../components/button';
 
 const TEST = false;
 let passwordInput: HTMLInputElement;
@@ -22,10 +24,28 @@ let onFirstMount = (): Promise<any> => {
 
   let passwordVisible = false;
 
-  const btnNext = page.pageEl.querySelector('button') as HTMLButtonElement;
-  passwordInput = document.getElementById('password') as HTMLInputElement;
+  const btnNext = Button('btn-primary', {text: 'NEXT'});
+
+  const passwordInputField = new InputField({
+    label: 'Password',
+    name: 'password',
+    plainText: true
+  });
+
+  passwordInput = passwordInputField.input as HTMLInputElement;
+  passwordInput.type = 'password';
+  passwordInput.setAttribute('required', '');
+  passwordInput.autocomplete = 'off';
+
   const passwordInputLabel = passwordInput.nextElementSibling as HTMLLabelElement;
-  const toggleVisible = page.pageEl.querySelector('.toggle-visible') as HTMLSpanElement;
+
+  const toggleVisible = document.createElement('span');
+  toggleVisible.classList.add('toggle-visible', 'tgico');
+
+  passwordInputField.container.append(toggleVisible);
+
+  page.pageEl.querySelector('.input-wrapper').append(passwordInputField.container, btnNext);
+
   let getStateInterval: number;
 
   let getState = () => {
diff --git a/src/pages/pageSignIn.ts b/src/pages/pageSignIn.ts
index ce880d37..dfceae52 100644
--- a/src/pages/pageSignIn.ts
+++ b/src/pages/pageSignIn.ts
@@ -9,6 +9,10 @@ import { findUpTag } from "../helpers/dom";
 import Page from "./page";
 import pageAuthCode from "./pageAuthCode";
 import pageSignQR from './pageSignQR';
+import InputField from "../components/inputField";
+import CheckboxField from "../components/checkbox";
+import Button from "../components/button";
+import { isAppleMobile } from "../helpers/userAgent";
 
 type Country = _Country & {
   li?: HTMLLIElement[]
@@ -35,23 +39,33 @@ let onFirstMount = () => {
 
   let lastCountrySelected: Country = null;
 
-  var selectCountryCode = page.pageEl.querySelector('input[name="countryCode"]')! as HTMLInputElement;
-  var parent = selectCountryCode.parentElement;
+  const inputWrapper = document.createElement('div');
+  inputWrapper.classList.add('input-wrapper');
 
-  var wrapper = document.createElement('div');
-  wrapper.classList.add('select-wrapper', 'z-depth-3', 'hide');
+  const countryInputField = new InputField({
+    label: 'Country',
+    name: 'countryCode',
+    plainText: true
+  });
 
-  var list = document.createElement('ul');
-  wrapper.appendChild(list);
+  countryInputField.container.classList.add('input-select');
 
-  //let wrapperScroll = OverlayScrollbars(wrapper, (window as any).scrollbarOptions);
-  let scroll = new Scrollable(wrapper);
+  const countryInput = countryInputField.input as HTMLInputElement;
+  countryInput.autocomplete = 'rrRandomRR';
 
-  let initedSelect = false;
+  const selectWrapper = document.createElement('div');
+  selectWrapper.classList.add('select-wrapper', 'z-depth-3', 'hide');
 
-  page.pageEl.querySelector('.a-qr').addEventListener('click', () => {
-    pageSignQR.mount();
-  });
+  const arrowDown = document.createElement('span');
+  arrowDown.classList.add('arrow', 'arrow-down');
+  countryInputField.container.append(arrowDown);
+
+  const selectList = document.createElement('ul');
+  selectWrapper.appendChild(selectList);
+
+  const scroll = new Scrollable(selectWrapper);
+
+  let initedSelect = false;
 
   let initSelect = () => {
     initSelect = null;
@@ -88,20 +102,20 @@ let onFirstMount = () => {
         li.appendChild(span);
 
         liArr.push(li);
-        list.append(li);
+        selectList.append(li);
       });
 
       c.li = liArr;
     });
     
-    list.addEventListener('mousedown', function(e) {
+    selectList.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;
+      countryInput.value = countryName;
       lastCountrySelected = countries.find(c => c.name == countryName);
       
       telEl.value = lastValue = phoneCode;
@@ -109,14 +123,14 @@ let onFirstMount = () => {
       //console.log('clicked', e, countryName, phoneCode);
     });
 
-    parent.appendChild(wrapper);
+    countryInputField.container.appendChild(selectWrapper);
   };
   
   initSelect();
 
   let hideTimeout: number;
 
-  selectCountryCode.addEventListener('focus', function(this: typeof selectCountryCode, e) {
+  countryInput.addEventListener('focus', function(this: typeof countryInput, e) {
     if(initSelect) {
       initSelect();
     } else {
@@ -127,20 +141,20 @@ let onFirstMount = () => {
 
     clearTimeout(hideTimeout);
 
-    wrapper.classList.remove('hide');
-    void wrapper.offsetWidth; // reflow
-    wrapper.classList.add('active');
+    selectWrapper.classList.remove('hide');
+    void selectWrapper.offsetWidth; // reflow
+    selectWrapper.classList.add('active');
   });
-  selectCountryCode.addEventListener('blur', function(this: typeof selectCountryCode, e) {
-    wrapper.classList.remove('active');
+  countryInput.addEventListener('blur', function(this: typeof countryInput, e) {
+    selectWrapper.classList.remove('active');
     hideTimeout = window.setTimeout(() => {
-      wrapper.classList.add('hide');
+      selectWrapper.classList.add('hide');
     }, 200);
     
     e.cancelBubble = true;
   }, {capture: true});
 
-  selectCountryCode.addEventListener('keyup', function(this: typeof selectCountryCode, e) {
+  countryInput.addEventListener('keyup', function(this: typeof countryInput, e) {
     if(e.ctrlKey || e.key == 'Control') return false;
 
     //let i = new RegExp('^' + this.value, 'i');
@@ -169,24 +183,31 @@ let onFirstMount = () => {
     }
   });
 
-  let arrowDown = page.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();
+    if(countryInput.matches(':focus')) countryInput.blur();
+    else countryInput.focus();
   });
 
   let pasted = false;
   let lastValue = '';
-  let telEl = page.pageEl.querySelector('input[name="phone"]') as HTMLInputElement;
+  
+  const telInputField = new InputField({
+    label: 'Phone Number',
+    plainText: true,
+    name: 'phone'
+  });
+  let telEl = telInputField.input as HTMLInputElement;
+  telEl.type = 'tel';
+  telEl.autocomplete = 'rr55RandomRR55';
   const telLabel = telEl.nextElementSibling as HTMLLabelElement;
   telEl.addEventListener('input', function(this: typeof telEl, e) {
     //console.log('input', this.value);
     this.classList.remove('error');
 
     const diff = Math.abs(this.value.length - lastValue.length);
-    if(diff > 1 && !pasted) {
+    if(diff > 1 && !pasted && isAppleMobile) {
       this.value = lastValue + this.value;
     }
 
@@ -200,8 +221,8 @@ let onFirstMount = () => {
     //console.log(formatted, country);
 
     let countryName = country ? country.name : ''/* 'Unknown' */;
-    if(countryName != selectCountryCode.value && (!lastCountrySelected || !country || lastCountrySelected.phoneCode != country.phoneCode)) {
-      selectCountryCode.value = countryName;
+    if(countryName != countryInput.value && (!lastCountrySelected || !country || lastCountrySelected.phoneCode != country.phoneCode)) {
+      countryInput.value = countryName;
       lastCountrySelected = country;
     }
 
@@ -226,7 +247,7 @@ let onFirstMount = () => {
     //console.log('keypress', this.value);
     if(!btnNext.style.visibility &&/* this.value.length >= 9 && */ e.key == 'Enter') {
       return btnNext.click();
-    } else if(/\D/.test(e.key)) {
+    } else if(/\D/.test(e.key) && !(e.metaKey || e.ctrlKey)) {
       e.preventDefault();
       return false;
     }
@@ -236,8 +257,11 @@ let onFirstMount = () => {
     this.removeAttribute('readonly'); // fix autocomplete
   });*/
 
-  /* authorizer.auth(2);
-  networkerFactory.startAll(); */
+  const signedCheckboxField = CheckboxField('Keep me signed in', 'keepSession');
+  signedCheckboxField.input.checked = true;
+
+  btnNext = Button('btn-primary', {text: 'NEXT'});
+  btnNext.style.visibility = 'hidden';
 
   btnNext.addEventListener('click', function(this: HTMLElement, e) {
     this.setAttribute('disabled', 'true');
@@ -277,33 +301,56 @@ let onFirstMount = () => {
       }
     });
   });
+  
+  const qrDiv = document.createElement('div');
+  qrDiv.classList.add('qr');
+
+  const qrLink = document.createElement('a');
+  qrLink.href = '#';
+  qrLink.classList.add('a-qr');
+  qrLink.innerText = 'Quick log in using QR code';
+
+  qrDiv.append(qrLink);
+
+  qrLink.addEventListener('click', () => {
+    pageSignQR.mount();
+  });
+
+  inputWrapper.append(countryInputField.container, telInputField.container, signedCheckboxField.label, btnNext, qrDiv);
+
+  page.pageEl.querySelector('.container').append(inputWrapper);
 
   let tryAgain = () => {
     apiManager.invokeApi('help.getNearestDc').then((nearestDcResult) => {
       const dcs = [1, 2, 3, 4, 5];
-      //dcs.splice(nearestDcResult.this_dc - 1, 1);
+      const done: number[] = [nearestDcResult.this_dc];
 
       let promise: Promise<any>;
       if(nearestDcResult.nearest_dc != nearestDcResult.this_dc) {
-        //MTProto.apiManager.baseDcID = nearestDcResult.nearest_dc;
-
         promise = apiManager.getNetworker(nearestDcResult.nearest_dc).then(() => {
-
+          done.push(nearestDcResult.nearest_dc)
         });
       }
 
       (promise || Promise.resolve()).then(() => {
-        dcs.forEach(dcId => {
-          apiManager.getNetworker(dcId, {fileDownload: true});
-        });
+        const g = () => {
+          const dcId = dcs.shift();
+          if(!dcId) return;
+
+          setTimeout(() => { // * если одновременно запросить все нетворкеры, не будет проходить запрос на код
+            apiManager.getNetworker(dcId, {fileDownload: true}).finally(g);
+          }, done.includes(dcId) ? 0 : 3000);
+        };
+        
+        g();
       });
       
       return nearestDcResult;
     }).then((nearestDcResult) => {
-      let country = countries.find((c) => c.code == nearestDcResult.country);
+      let country = countries.find((c) => c.code === nearestDcResult.country);
       if(country) {
-        if(!selectCountryCode.value.length && !telEl.value.length) {
-          selectCountryCode.value = country.name;
+        if(!countryInput.value.length && !telEl.value.length) {
+          countryInput.value = country.name;
           lastCountrySelected = country;
           telEl.value = lastValue = '+' + country.phoneCode.split(' and ').shift();
         }
@@ -317,12 +364,10 @@ let onFirstMount = () => {
 };
 
 const page = new Page('page-sign', true, onFirstMount, () => {
-  if(!btnNext) {
-    btnNext = page.pageEl.querySelector('button');
+  if(btnNext) {
+    btnNext.textContent = 'NEXT';
+    btnNext.removeAttribute('disabled');
   }
-  
-  btnNext.textContent = 'NEXT';
-  btnNext.removeAttribute('disabled');
 
   appStateManager.pushToState('authState', {_: 'authStateSignIn'});
   appStateManager.saveState();
diff --git a/src/scss/partials/_input.scss b/src/scss/partials/_input.scss
index 52715b30..db28f482 100644
--- a/src/scss/partials/_input.scss
+++ b/src/scss/partials/_input.scss
@@ -4,7 +4,12 @@
 }
 
 .input-field {
+  --height: 54px;
   position: relative;
+
+  @include respond-to(handhelds) {
+    --height: 50px;
+  }
   
   .arrow-down {
     position: absolute;
@@ -35,24 +40,24 @@
   label {
     position: absolute;
     color: $placeholder-color;
+    top: 0;
     left: 1rem;
     right: auto;
     z-index: 2;
-    top: 50%;
     height: 1.5rem;
-    transform: translateY(-50%);
+    transform: translate(0, 0);
     background-color: #fff;
-    transition: .2s transform, .2s padding, .1s opacity, .2s top, .2s left;
+    transition: .2s transform, .2s padding, .1s opacity;
     transform-origin: left center;
     pointer-events: none;
+    margin-top: calc((var(--height) - 1.5rem) / 2); // * Center of first line
 
     body.animation-level-0 & {
       transition: none;
     }
   }
   
-  input, &-input {
-    --height: 54px;
+  &-input {
     --padding: 1rem;
     --border-width: 1px;
     --border-width-top: 2px;
@@ -80,9 +85,6 @@
       }
     }
 
-    @include respond-to(handhelds) {
-      --height: 50px;
-    }
     /* font-weight: 500; */
 
     /* &:hover {
@@ -133,13 +135,9 @@
     }
     
     &:focus ~ label, &:valid ~ label, &:not(:empty) ~ label, &:disabled ~ label {
-      //transform: translate(-.3125rem, -2.375rem) scale(.75);
-      //transform: translate(-.3125rem, -50%) scale(.75);
-      transform: translateY(-50%) scale(.75);
-      top: 1px;
+      transform: translate(-.25rem, calc(var(--height) / -2 + .125rem)) scale(.75);
       padding: 0 6px;
       opacity: 1;
-      left: .75rem;
       font-weight: 500;
     }
   }