68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import QrCreator from 'qr-creator';
|
|
import React, {
|
|
FC, useEffect, useRef, memo,
|
|
} from '../../lib/teact/teact';
|
|
import { withGlobal } from '../../lib/teact/teactn';
|
|
import { GlobalState, GlobalActions } from '../../global/types';
|
|
|
|
import { pick } from '../../util/iteratees';
|
|
|
|
import Loading from '../ui/Loading';
|
|
import Button from '../ui/Button';
|
|
import buildClassName from '../../util/buildClassName';
|
|
import useHistoryBack from '../../hooks/useHistoryBack';
|
|
|
|
type StateProps = Pick<GlobalState, 'connectionState' | 'authQrCode'>;
|
|
type DispatchProps = Pick<GlobalActions, 'returnToAuthPhoneNumber'>;
|
|
|
|
const DATA_PREFIX = 'tg://login?token=';
|
|
|
|
const AuthCode: FC<StateProps & DispatchProps> = ({
|
|
connectionState, authQrCode, returnToAuthPhoneNumber,
|
|
}) => {
|
|
// eslint-disable-next-line no-null/no-null
|
|
const qrCodeRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!authQrCode || connectionState !== 'connectionStateReady') {
|
|
return;
|
|
}
|
|
|
|
const container = qrCodeRef.current!;
|
|
|
|
container.innerHTML = '';
|
|
container.classList.remove('pre-animate');
|
|
QrCreator.render({
|
|
text: `${DATA_PREFIX}${authQrCode.token}`,
|
|
radius: 0.5,
|
|
ecLevel: 'M',
|
|
fill: '#4E96D4',
|
|
size: 280,
|
|
}, container);
|
|
}, [connectionState, authQrCode]);
|
|
|
|
useHistoryBack(returnToAuthPhoneNumber);
|
|
|
|
return (
|
|
<div id="auth-qr-form" className="custom-scroll">
|
|
<div className="auth-form">
|
|
<div className={buildClassName('qr-container', authQrCode && 'pre-animate')} ref={qrCodeRef}>
|
|
{!authQrCode && <Loading />}
|
|
</div>
|
|
<h3> Log in to Telegram by QR Code</h3>
|
|
<ol>
|
|
<li><span>Open Telegram on your phone</span></li>
|
|
<li><span>Go to <b>Settings</b> > <b>Devices</b> > <b>Scan QR</b></span></li>
|
|
<li><span>Point your phone at this screen to confirm login</span></li>
|
|
</ol>
|
|
<Button isText onClick={returnToAuthPhoneNumber}>Log in by phone number</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(withGlobal(
|
|
(global): StateProps => pick(global, ['connectionState', 'authQrCode']),
|
|
(setGlobal, actions): DispatchProps => pick(actions, ['returnToAuthPhoneNumber']),
|
|
)(AuthCode));
|