From 724ddd783f09fed961be48be474cadd30b70e24c Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Fri, 16 Apr 2021 09:04:28 +0400 Subject: [PATCH] (iOS) Fixed autofocus on auth code input Don't reset focus from password --- src/components/checkboxField.ts | 8 +++++++- src/pages/pagePassword.ts | 20 +++++++++++++------- src/pages/pageSignIn.ts | 27 ++++++++++++++++----------- src/pages/pageSignUp.ts | 7 ++++++- src/scss/partials/_checkbox.scss | 4 ++-- src/scss/partials/_input.scss | 4 ++-- 6 files changed, 46 insertions(+), 24 deletions(-) diff --git a/src/components/checkboxField.ts b/src/components/checkboxField.ts index 8304f5d7..1d455400 100644 --- a/src/components/checkboxField.ts +++ b/src/components/checkboxField.ts @@ -40,7 +40,7 @@ export default class CheckboxField { } if(options.disabled) { - label.classList.add('checkbox-disabled'); + this.toggleDisability(true); } const input = this.input = document.createElement('input'); @@ -110,6 +110,7 @@ export default class CheckboxField { if(options.withRipple) { label.classList.add('checkbox-ripple', 'hover-effect'); ripple(label, undefined, undefined, true); + //label.prepend(input); } else if(options.withHover) { label.classList.add('hover-effect'); } @@ -129,4 +130,9 @@ export default class CheckboxField { public setValueSilently(checked: boolean) { this.input.checked = checked; } + + public toggleDisability(disable: boolean) { + this.label.classList.toggle('checkbox-disabled', disable); + return () => this.toggleDisability(!disable); + } } diff --git a/src/pages/pagePassword.ts b/src/pages/pagePassword.ts index 103661fe..52878b16 100644 --- a/src/pages/pagePassword.ts +++ b/src/pages/pagePassword.ts @@ -17,7 +17,7 @@ import PasswordMonkey from '../components/monkeys/password'; import RichTextProcessor from '../lib/richtextprocessor'; import I18n from '../lib/langPack'; import LoginPage from './loginPage'; -import { htmlToSpan, replaceContent } from '../helpers/dom'; +import { attachClickEvent, cancelEvent, htmlToSpan, replaceContent, toggleDisability } from '../helpers/dom'; const TEST = false; let passwordInput: HTMLInputElement; @@ -65,17 +65,21 @@ let onFirstMount = (): Promise => { let state: AccountPassword; - btnNext.addEventListener('click', function(this, e) { + const onSubmit = (e?: Event) => { + if(e) { + cancelEvent(e); + } + if(!passwordInput.value.length) { passwordInput.classList.add('error'); return; } - this.setAttribute('disabled', 'true'); + const toggle = toggleDisability([passwordInput, btnNext], true); let value = passwordInput.value; btnNextI18n.update({key: 'PleaseWait'}); - const preloader = putPreloader(this); + const preloader = putPreloader(btnNext); passwordManager.check(value, state).then((response) => { //console.log('passwordManager response:', response); @@ -93,7 +97,7 @@ let onFirstMount = (): Promise => { break; } }).catch((err: any) => { - btnNext.removeAttribute('disabled'); + toggle(); passwordInputField.input.classList.add('error'); switch(err.type) { @@ -108,14 +112,16 @@ let onFirstMount = (): Promise => { getState(); }); - }); + }; + + attachClickEvent(btnNext, onSubmit); passwordInput.addEventListener('keypress', function(this, e) { this.classList.remove('error'); btnNextI18n.update({key: 'Login.Next'}); if(e.key === 'Enter') { - return btnNext.click(); + return onSubmit(); } }); diff --git a/src/pages/pageSignIn.ts b/src/pages/pageSignIn.ts index d138a5ed..cdda6170 100644 --- a/src/pages/pageSignIn.ts +++ b/src/pages/pageSignIn.ts @@ -10,7 +10,7 @@ import Countries, { Country as _Country } from "../countries"; import appStateManager from "../lib/appManagers/appStateManager"; import apiManager from "../lib/mtproto/mtprotoworker"; import { RichTextProcessor } from '../lib/richtextprocessor'; -import { attachClickEvent, cancelEvent, replaceContent } from "../helpers/dom"; +import { attachClickEvent, cancelEvent, replaceContent, toggleDisability } from "../helpers/dom"; import Page from "./page"; import InputField from "../components/inputField"; import CheckboxField from "../components/checkboxField"; @@ -296,7 +296,7 @@ let onFirstMount = () => { telEl.addEventListener('keypress', function(this: typeof telEl, e) { //console.log('keypress', this.value); if(!btnNext.style.visibility &&/* this.value.length >= 9 && */ e.key === 'Enter') { - return btnNext.click(); + return onSubmit(); } else if(/\D/.test(e.key) && !(e.metaKey || e.ctrlKey) && !(e.key === '+' && e.shiftKey/* && !this.value */)) { e.preventDefault(); return false; @@ -317,12 +317,15 @@ let onFirstMount = () => { btnNext = Button('btn-primary btn-color-primary', {text: 'Login.Next'}); btnNext.style.visibility = 'hidden'; - btnNext.addEventListener('click', function(this: HTMLElement, e) { - this.setAttribute('disabled', 'true'); + const onSubmit = (e?: Event) => { + if(e) { + cancelEvent(e); + } + + const toggle = toggleDisability([/* telEl, countryInput, */btnNext, btnQr], true); - replaceContent(this, i18n('PleaseWait')); - putPreloader(this); - //this.innerHTML = 'PLEASE WAIT...'; + replaceContent(btnNext, i18n('PleaseWait')); + putPreloader(btnNext); //return; @@ -340,22 +343,24 @@ let onFirstMount = () => { import('./pageAuthCode').then(m => m.default.mount(Object.assign(code, {phone_number: phone_number}))); }).catch(err => { - this.removeAttribute('disabled'); + toggle(); switch(err.type) { case 'PHONE_NUMBER_INVALID': telInputField.setError(); replaceContent(telInputField.label, i18n('Login.PhoneLabelInvalid')); telEl.classList.add('error'); - replaceContent(this, i18n('Login.Next')); + replaceContent(btnNext, i18n('Login.Next')); break; default: console.error('auth.sendCode error:', err); - this.innerText = err.type; + btnNext.innerText = err.type; break; } }); - }); + }; + + attachClickEvent(btnNext, onSubmit); const btnQr = Button('btn-primary btn-secondary btn-primary-transparent primary', {text: 'Login.QR.Login'}); diff --git a/src/pages/pageSignUp.ts b/src/pages/pageSignUp.ts index 8d6b4500..5e4141ac 100644 --- a/src/pages/pageSignUp.ts +++ b/src/pages/pageSignUp.ts @@ -11,7 +11,7 @@ import Button from '../components/button'; import InputField from '../components/inputField'; import { putPreloader } from '../components/misc'; import PopupAvatar from '../components/popups/avatar'; -import { replaceContent } from '../helpers/dom'; +import { blurActiveElement, replaceContent } from '../helpers/dom'; import appStateManager from '../lib/appManagers/appStateManager'; import I18n, { i18n } from '../lib/langPack'; //import apiManager from '../lib/mtproto/apiManager'; @@ -158,6 +158,11 @@ const onFirstMount = () => import('../lib/appManagers/appProfileManager').then(i } }); }); + + blurActiveElement(); + return new Promise((resolve) => { + window.requestAnimationFrame(resolve); + }); }); const page = new Page('page-signUp', true, onFirstMount, (_authCode: typeof authCode) => { diff --git a/src/scss/partials/_checkbox.scss b/src/scss/partials/_checkbox.scss index 354d2375..5bbd8bb0 100644 --- a/src/scss/partials/_checkbox.scss +++ b/src/scss/partials/_checkbox.scss @@ -262,9 +262,9 @@ } } - &:checked + .checkbox-box { + /* &:checked + .checkbox-box { - } + } */ &:disabled + .checkbox-box, &:disabled ~ .checkbox-caption { cursor: default; diff --git a/src/scss/partials/_input.scss b/src/scss/partials/_input.scss index 608d4551..a6226278 100644 --- a/src/scss/partials/_input.scss +++ b/src/scss/partials/_input.scss @@ -122,10 +122,10 @@ //padding: 0 calc(1rem - 1px); } - &:disabled { + /* &:disabled { background-color: #fff; color: #000; - } + } */ &.error { border-color: var(--danger-color);