1 line
17 KiB
Plaintext
1 line
17 KiB
Plaintext
{"version":3,"sources":["webpack:///./src/components/monkeys/tracking.ts","webpack:///./src/components/codeInputField.ts","webpack:///./src/pages/pageAuthCode.ts"],"names":["TrackingMonkey","inputField","size","max","needFrame","this","container","document","createElement","classList","add","input","addEventListener","playAnimation","e","value","length","animation","frame","Math","min","round","idleAnimation","stop","canvas","style","display","direction","setDirection","setSpeed","play","loadPromise","Promise","all","loadAnimationAsAsset","loop","autoplay","width","height","then","waitForFirstFrame","_animation","currentFrame","pause","remove","CodeInputField","options","super","plainText","type","setAttribute","autocomplete","lastLength","setLabel","replace","slice","setValueSilently","onFill","codeInput","authCode","headerElement","sentTypeElement","page","CODELENGTH","codeInputField","label","name","code","submitCode","pageEl","querySelector","append","mount","cleanup","setTimeout","monkey","params","phone_number","phone_code_hash","phone_code","invokeApi","ignoreErrors","response","_","setUser","user","m","default","catch","err","good","handled","innerText","select","removeAttribute","imageDiv","isMobile","load","_authCode","evt","createEvent","initEvent","dispatchEvent","getElementsByClassName","key","args","pushToState","sentCode","focus"],"mappings":"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","file":"18.db688e1ac83bd1339811.chunk.js","sourcesContent":["/*\r\n * https://github.com/morethanwords/tweb\r\n * Copyright (C) 2019-2021 Eduard Kuzmenko\r\n * https://github.com/morethanwords/tweb/blob/master/LICENSE\r\n */\r\n\r\nimport InputField from \"../inputField\";\r\nimport lottieLoader from \"../../lib/rlottie/lottieLoader\";\r\nimport RLottiePlayer from \"../../lib/rlottie/rlottiePlayer\";\r\n\r\nexport default class TrackingMonkey {\r\n public container: HTMLElement;\r\n\r\n protected max = 45;\r\n protected needFrame = 0;\r\n\r\n protected animation: RLottiePlayer;\r\n protected idleAnimation: RLottiePlayer;\r\n\r\n protected loadPromise: Promise<any>;\r\n\r\n constructor(protected inputField: InputField, protected size: number) {\r\n this.container = document.createElement('div');\r\n this.container.classList.add('media-sticker-wrapper');\r\n\r\n const input = inputField.input;\r\n\r\n input.addEventListener('blur', () => {\r\n this.playAnimation(0);\r\n });\r\n\r\n input.addEventListener('input', (e) => {\r\n this.playAnimation(inputField.value.length);\r\n });\r\n\r\n /* codeInput.addEventListener('focus', () => {\r\n playAnimation(Math.max(codeInput.value.length, 1));\r\n }); */\r\n }\r\n\r\n // 1st symbol = frame 15\r\n // end symbol = frame 165\r\n public playAnimation(length: number) {\r\n if(!this.animation) return;\r\n\r\n length = Math.min(length, 30);\r\n let frame: number;\r\n if(length) {\r\n frame = Math.round(Math.min(this.max, length) * (165 / this.max) + 11.33);\r\n\r\n if(this.idleAnimation) {\r\n this.idleAnimation.stop(true);\r\n this.idleAnimation.canvas.style.display = 'none';\r\n }\r\n \r\n this.animation.canvas.style.display = '';\r\n } else {\r\n /* const cb = (frameNo: number) => {\r\n if(frameNo <= 1) { */\r\n /* idleAnimation.play();\r\n idleAnimation.canvas.style.display = '';\r\n animation.canvas.style.display = 'none'; */\r\n /* animation.removeListener('enterFrame', cb);\r\n }\r\n };\r\n animation.addListener('enterFrame', cb); */\r\n \r\n frame = 0;\r\n }\r\n //animation.playSegments([1, 2]);\r\n\r\n const direction = this.needFrame > frame ? -1 : 1;\r\n //console.log('keydown', length, frame, direction);\r\n\r\n this.animation.setDirection(direction);\r\n if(this.needFrame !== 0 && frame === 0) {\r\n this.animation.setSpeed(7);\r\n }\r\n /* let diff = Math.abs(needFrame - frame * direction);\r\n if((diff / 20) > 1) animation.setSpeed(diff / 20 | 0); */\r\n this.needFrame = frame;\r\n \r\n this.animation.play();\r\n\r\n /* animation.goToAndStop(15, true); */\r\n //animation.goToAndStop(length / max * );\r\n }\r\n\r\n public load() {\r\n if(this.loadPromise) return this.loadPromise;\r\n return this.loadPromise = Promise.all([\r\n lottieLoader.loadAnimationAsAsset({\r\n container: this.container,\r\n loop: true,\r\n autoplay: true,\r\n width: this.size,\r\n height: this.size\r\n }, 'TwoFactorSetupMonkeyIdle').then(animation => {\r\n this.idleAnimation = animation;\r\n\r\n // ! animationIntersector will stop animation instantly\r\n if(!this.inputField.value.length) {\r\n animation.play();\r\n }\r\n\r\n return lottieLoader.waitForFirstFrame(animation);\r\n }),\r\n\r\n lottieLoader.loadAnimationAsAsset({\r\n container: this.container,\r\n loop: false,\r\n autoplay: false,\r\n width: this.size,\r\n height: this.size\r\n }, 'TwoFactorSetupMonkeyTracking').then(_animation => {\r\n this.animation = _animation;\r\n\r\n if(!this.inputField.value.length) {\r\n this.animation.canvas.style.display = 'none';\r\n }\r\n\r\n this.animation.addEventListener('enterFrame', currentFrame => {\r\n //console.log('enterFrame', currentFrame, needFrame);\r\n //let currentFrame = Math.round(e.currentTime);\r\n \r\n if((this.animation.direction === 1 && currentFrame >= this.needFrame) ||\r\n (this.animation.direction === -1 && currentFrame <= this.needFrame)) {\r\n this.animation.setSpeed(1);\r\n this.animation.pause();\r\n }\r\n\r\n if(currentFrame === 0 && this.needFrame === 0) {\r\n //animation.curFrame = 0;\r\n \r\n if(this.idleAnimation) {\r\n this.idleAnimation.canvas.style.display = '';\r\n this.idleAnimation.play();\r\n this.animation.canvas.style.display = 'none';\r\n }\r\n }\r\n });\r\n //console.log(animation.getDuration(), animation.getDuration(true));\r\n\r\n return lottieLoader.waitForFirstFrame(_animation);\r\n })\r\n ]);\r\n }\r\n\r\n public remove() {\r\n if(this.animation) this.animation.remove();\r\n if(this.idleAnimation) this.idleAnimation.remove();\r\n }\r\n}\r\n","/*\r\n * https://github.com/morethanwords/tweb\r\n * Copyright (C) 2019-2021 Eduard Kuzmenko\r\n * https://github.com/morethanwords/tweb/blob/master/LICENSE\r\n */\r\n\r\nimport InputField, { InputFieldOptions } from \"./inputField\";\r\n\r\nexport default class CodeInputField extends InputField {\r\n constructor(options: InputFieldOptions & {\r\n length: number,\r\n onFill: (code: string) => void\r\n }) {\r\n super({\r\n plainText: true,\r\n ...options\r\n });\r\n\r\n const input = this.input as HTMLInputElement;\r\n input.type = 'tel';\r\n input.setAttribute('required', '');\r\n input.autocomplete = 'off';\r\n\r\n let lastLength = 0;\r\n this.input.addEventListener('input', (e) => {\r\n this.input.classList.remove('error');\r\n this.setLabel();\r\n \r\n const value = this.value.replace(/\\D/g, '').slice(0, options.length);\r\n this.setValueSilently(value);\r\n \r\n const length = this.value.length;\r\n if(length === options.length) { // submit code\r\n options.onFill(this.value);\r\n } else if(length === lastLength) {\r\n return;\r\n }\r\n \r\n lastLength = length;\r\n });\r\n }\r\n}\r\n","/*\r\n * https://github.com/morethanwords/tweb\r\n * Copyright (C) 2019-2021 Eduard Kuzmenko\r\n * https://github.com/morethanwords/tweb/blob/master/LICENSE\r\n */\r\n\r\nimport mediaSizes from '../helpers/mediaSizes';\r\nimport { AuthSentCode, AuthSentCodeType, AuthSignIn } from '../layer';\r\nimport appStateManager from '../lib/appManagers/appStateManager';\r\nimport apiManager from '../lib/mtproto/mtprotoworker';\r\nimport Page from './page';\r\nimport pageSignIn from './pageSignIn';\r\nimport TrackingMonkey from '../components/monkeys/tracking';\r\nimport CodeInputField from '../components/codeInputField';\r\nimport { i18n, LangPackKey } from '../lib/langPack';\r\nimport { randomLong } from '../helpers/random';\r\nimport replaceContent from '../helpers/dom/replaceContent';\r\n\r\nlet authCode: AuthSentCode.authSentCode = null;\r\n\r\nlet headerElement: HTMLHeadElement = null;\r\nlet sentTypeElement: HTMLParagraphElement = null;\r\nlet codeInput: HTMLInputElement;\r\n\r\nlet onFirstMount = (): Promise<any> => {\r\n const CODELENGTH = (authCode.type as AuthSentCodeType.authSentCodeTypeApp).length;\r\n\r\n const codeInputField = new CodeInputField({\r\n label: 'Code',\r\n name: randomLong(),\r\n length: CODELENGTH,\r\n onFill: (code) => {\r\n submitCode(code);\r\n }\r\n });\r\n\r\n codeInput = codeInputField.input as HTMLInputElement;\r\n\r\n page.pageEl.querySelector('.input-wrapper').append(codeInputField.container);\r\n\r\n const editButton = page.pageEl.querySelector('.phone-edit') as HTMLElement;\r\n\r\n editButton.addEventListener('click', function() {\r\n return pageSignIn.mount();\r\n });\r\n\r\n const cleanup = () => {\r\n setTimeout(() => {\r\n monkey.remove();\r\n }, 300);\r\n };\r\n\r\n const submitCode = (code: string) => {\r\n codeInput.setAttribute('disabled', 'true');\r\n\r\n const params: AuthSignIn = {\r\n phone_number: authCode.phone_number,\r\n phone_code_hash: authCode.phone_code_hash,\r\n phone_code: code\r\n };\r\n\r\n //console.log('invoking auth.signIn with params:', params);\r\n\r\n apiManager.invokeApi('auth.signIn', params, {ignoreErrors: true})\r\n .then((response) => {\r\n //console.log('auth.signIn response:', response);\r\n \r\n switch(response._) {\r\n case 'auth.authorization':\r\n apiManager.setUser(response.user);\r\n\r\n import('./pageIm').then(m => {\r\n m.default.mount();\r\n });\r\n cleanup();\r\n break;\r\n case 'auth.authorizationSignUpRequired':\r\n //console.log('Registration needed!');\r\n\r\n import('./pageSignUp').then(m => {\r\n m.default.mount({\r\n 'phone_number': authCode.phone_number,\r\n 'phone_code_hash': authCode.phone_code_hash\r\n });\r\n });\r\n\r\n cleanup();\r\n break;\r\n /* default:\r\n codeInput.innerText = response._;\r\n break; */\r\n }\r\n }).catch(async(err) => {\r\n let good = false;\r\n switch(err.type) {\r\n case 'SESSION_PASSWORD_NEEDED':\r\n //console.warn('pageAuthCode: SESSION_PASSWORD_NEEDED');\r\n good = true;\r\n err.handled = true;\r\n await (await import('./pagePassword')).default.mount(); // lol\r\n setTimeout(() => {\r\n codeInput.value = '';\r\n }, 300);\r\n break;\r\n case 'PHONE_CODE_EXPIRED':\r\n codeInput.classList.add('error');\r\n replaceContent(codeInputField.label, i18n('PHONE_CODE_EXPIRED'));\r\n break;\r\n case 'PHONE_CODE_EMPTY':\r\n case 'PHONE_CODE_INVALID':\r\n codeInput.classList.add('error');\r\n replaceContent(codeInputField.label, i18n('PHONE_CODE_INVALID'));\r\n break;\r\n default:\r\n codeInputField.label.innerText = err.type;\r\n break;\r\n }\r\n\r\n if(!good) {\r\n codeInputField.select();\r\n }\r\n\r\n codeInput.removeAttribute('disabled');\r\n });\r\n };\r\n\r\n const imageDiv = page.pageEl.querySelector('.auth-image') as HTMLDivElement;\r\n const size = mediaSizes.isMobile ? 100 : 166;\r\n const monkey = new TrackingMonkey(codeInputField, size);\r\n imageDiv.append(monkey.container);\r\n return monkey.load();\r\n};\r\n\r\nconst page = new Page('page-authCode', true, onFirstMount, (_authCode: typeof authCode) => {\r\n authCode = _authCode;\r\n\r\n if(!headerElement) {\r\n headerElement = page.pageEl.getElementsByClassName('phone')[0] as HTMLHeadElement;\r\n sentTypeElement = page.pageEl.getElementsByClassName('sent-type')[0] as HTMLParagraphElement;\r\n } else {\r\n codeInput.value = '';\r\n\r\n const evt = document.createEvent('HTMLEvents');\r\n evt.initEvent('input', false, true);\r\n codeInput.dispatchEvent(evt);\r\n }\r\n\r\n headerElement.innerText = authCode.phone_number;\r\n let key: LangPackKey, args: any[];\r\n switch(authCode.type._) {\r\n case 'auth.sentCodeTypeSms':\r\n key = 'Login.Code.SentSms';\r\n break;\r\n case 'auth.sentCodeTypeApp': \r\n key = 'Login.Code.SentInApp';\r\n break;\r\n case 'auth.sentCodeTypeCall': \r\n key = 'Login.Code.SentCall';\r\n break;\r\n default:\r\n key = 'Login.Code.SentUnknown';\r\n args = [authCode.type._];\r\n break;\r\n }\r\n\r\n replaceContent(sentTypeElement, i18n(key, args));\r\n\r\n appStateManager.pushToState('authState', {_: 'authStateAuthCode', sentCode: _authCode});\r\n}, () => {\r\n codeInput.focus();\r\n});\r\n\r\nexport default page;\r\n"],"sourceRoot":""} |