Telegram Web K with changes to work inside I2P
https://web.telegram.i2p/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
3.6 KiB
132 lines
3.6 KiB
4 years ago
|
import pageIm from './pageIm';
|
||
|
import CryptoWorker from '../lib/crypto/cryptoworker';
|
||
|
import { putPreloader } from '../components/misc';
|
||
|
|
||
|
import LottieLoader from '../lib/lottieLoader';
|
||
|
import passwordManager from '../lib/mtproto/passwordManager';
|
||
|
import apiManager from '../lib/mtproto/apiManager';
|
||
|
import Page from './page';
|
||
|
|
||
|
let onFirstMount = () => {
|
||
|
let needFrame = 0;
|
||
|
let animation: /* AnimationItem */any = undefined;
|
||
|
|
||
|
let passwordVisible = false;
|
||
|
|
||
|
fetch('assets/img/TwoFactorSetupMonkeyClose.tgs')
|
||
|
.then(res => res.arrayBuffer())
|
||
|
.then(async(data) => {
|
||
|
let str = await CryptoWorker.gzipUncompress<string>(data, true);
|
||
|
|
||
|
animation = await LottieLoader.loadAnimation({
|
||
|
container: page.pageEl.querySelector('.auth-image'),
|
||
|
renderer: 'svg',
|
||
|
loop: false,
|
||
|
autoplay: false,
|
||
|
animationData: JSON.parse(str)
|
||
|
});
|
||
|
|
||
|
console.log(animation.getDuration(true));
|
||
|
//animation.goToAndStop(822);
|
||
|
|
||
|
animation.addEventListener('enterFrame', (e: any) => {
|
||
|
//console.log('enterFrame', e, needFrame);
|
||
|
let currentFrame = Math.round(e.currentTime);
|
||
|
|
||
|
if((e.direction == 1 && currentFrame >= needFrame) ||
|
||
|
(e.direction == -1 && currentFrame <= needFrame)) {
|
||
|
animation.setSpeed(1);
|
||
|
animation.pause();
|
||
|
}
|
||
|
});
|
||
|
|
||
|
needFrame = 49;
|
||
|
animation.play();
|
||
|
});
|
||
|
|
||
|
const btnNext = page.pageEl.querySelector('button') as HTMLButtonElement;
|
||
|
const passwordInput = document.getElementById('password') as HTMLInputElement;
|
||
|
//const passwordInputLabel = passwordInput.nextElementSibling as HTMLLabelElement;
|
||
|
const toggleVisible = page.pageEl.querySelector('.toggle-visible') as HTMLSpanElement;
|
||
|
|
||
|
let handleError = (err: any) => {
|
||
|
btnNext.removeAttribute('disabled');
|
||
|
|
||
|
switch(err.type) {
|
||
|
default:
|
||
|
btnNext.innerText = err.type;
|
||
|
break;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
toggleVisible.addEventListener('click', function(this, e) {
|
||
|
if(!passwordVisible) {
|
||
|
this.classList.add('tgico-eye2');
|
||
|
passwordInput.setAttribute('type', 'text');
|
||
|
animation.setDirection(-1);
|
||
|
needFrame = 0;
|
||
|
animation.play();
|
||
|
} else {
|
||
|
this.classList.remove('tgico-eye2');
|
||
|
passwordInput.setAttribute('type', 'password');
|
||
|
animation.setDirection(1);
|
||
|
needFrame = 49;
|
||
|
animation.play();
|
||
|
}
|
||
|
|
||
|
passwordVisible = !passwordVisible;
|
||
|
});
|
||
|
|
||
|
btnNext.addEventListener('click', function(this, e) {
|
||
|
if(!passwordInput.value.length) {
|
||
|
passwordInput.classList.add('error');
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
this.setAttribute('disabled', 'true');
|
||
|
let value = passwordInput.value;
|
||
|
|
||
|
this.textContent = 'PLEASE WAIT...';
|
||
|
putPreloader(this);
|
||
|
|
||
|
passwordManager.getState()
|
||
|
.then(state => {
|
||
|
console.log(state);
|
||
|
passwordManager.check(state, value).then((response: any) => {
|
||
|
console.log('passwordManager response:', response);
|
||
|
|
||
|
switch(response._) {
|
||
|
case 'auth.authorization':
|
||
|
apiManager.setUserAuth({
|
||
|
id: response.user.id
|
||
|
});
|
||
|
|
||
|
pageIm.mount();
|
||
|
if(animation) animation.destroy();
|
||
|
break;
|
||
|
default:
|
||
|
btnNext.removeAttribute('disabled');
|
||
|
btnNext.innerText = response._;
|
||
|
break;
|
||
|
}
|
||
|
}).catch(handleError);
|
||
|
}).catch(handleError);
|
||
|
});
|
||
|
|
||
|
passwordInput.addEventListener('keypress', function(this, e) {
|
||
|
this.classList.remove('error');
|
||
|
|
||
|
if(e.key == 'Enter') {
|
||
|
return btnNext.click();
|
||
|
}
|
||
|
});
|
||
|
|
||
|
/* passwordInput.addEventListener('input', function(this, e) {
|
||
|
|
||
|
}); */
|
||
|
};
|
||
|
|
||
|
const page = new Page('page-password', true, onFirstMount);
|
||
|
|
||
|
export default page;
|