Auth: Default initial method to QR code

src/api/gramjs/methods/client.ts

@@ -68,6 +68,7 @@ export async function init(_onUpdate: OnApiUpdate, sessionData?: ApiSessionData)
       firstAndLastNames: onRequestRegistration,
       qrCode: onRequestQrCode,
       onError: onAuthError,
+      initialMethod: 'qrCode',
     });
 
     if (DEBUG) {

src/bundles/auth.ts

@@ -1,4 +1,3 @@
 export { default as AuthCode } from '../components/auth/AuthCode';
 export { default as AuthPassword } from '../components/auth/AuthPassword';
 export { default as AuthRegister } from '../components/auth/AuthRegister';
-export { default as AuthQrCode } from '../components/auth/AuthQrCode';

src/components/auth/Auth.scss

@@ -9,6 +9,10 @@
   @media (min-width: 600px) and (min-height: 450px) {
     padding: 1.5rem;
     padding-top: 6.8rem;
+
+    &.qr {
+      padding-top: 5rem;
+    }
   }
 
   #logo, .AvatarEditable label {
@@ -104,12 +108,14 @@
 }
 
 #auth-qr-form {
-  .qr-container {
+  .qr-container, .qr-loading {
     height: 280px;
+  }
 
+  .qr-container {
     opacity: 1;
     transform: scale(1);
-    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .3s;
+    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms;
 
     &.pre-animate {
       opacity: 0.5;

src/components/auth/Auth.tsx

@@ -11,7 +11,7 @@ import AuthPhoneNumber from './AuthPhoneNumber';
 import AuthCode from './AuthCode.async';
 import AuthPassword from './AuthPassword.async';
 import AuthRegister from './AuthRegister.async';
-import AuthQrCode from './AuthQrCode.async';
+import AuthQrCode from './AuthQrCode';
 
 import './Auth.scss';
 
@@ -24,9 +24,6 @@ const Auth: FC<StateProps & DispatchProps> = ({ authState, reset, initApi }) =>
     initApi();
   }, [reset, initApi]);
 
-  useEffect(() => {
-  }, []);
-
   switch (authState) {
     case 'authorizationStateWaitCode':
       return <UiLoader page="authCode" key="authCode"><AuthCode /></UiLoader>;
@@ -34,11 +31,11 @@ const Auth: FC<StateProps & DispatchProps> = ({ authState, reset, initApi }) =>
       return <UiLoader page="authPassword" key="authPassword"><AuthPassword /></UiLoader>;
     case 'authorizationStateWaitRegistration':
       return <AuthRegister />;
-    case 'authorizationStateWaitQrCode':
-      return <UiLoader page="authQrCode" key="authQrCode"><AuthQrCode /></UiLoader>;
     case 'authorizationStateWaitPhoneNumber':
-    default:
       return <UiLoader page="authPhoneNumber" key="authPhoneNumber"><AuthPhoneNumber /></UiLoader>;
+    case 'authorizationStateWaitQrCode':
+    default:
+      return <UiLoader page="authQrCode" key="authQrCode"><AuthQrCode /></UiLoader>;
   }
 };
 

src/components/auth/AuthPhoneNumber.tsx

@@ -25,7 +25,7 @@ type StateProps = Pick<GlobalState, (
   'authPhoneNumber' | 'authIsLoading' | 'authIsLoadingQrCode' | 'authError' | 'authRememberMe' | 'authNearestCountry'
 )>;
 type DispatchProps = Pick<GlobalActions, (
-  'setAuthPhoneNumber' | 'setAuthRememberMe' | 'loadNearestCountry' | 'clearAuthError' | 'gotToAuthQrCode'
+  'setAuthPhoneNumber' | 'setAuthRememberMe' | 'loadNearestCountry' | 'clearAuthError' | 'goToAuthQrCode'
 )>;
 
 const MIN_NUMBER_LENGTH = 7;
@@ -45,7 +45,7 @@ const AuthPhoneNumber: FC<StateProps & DispatchProps> = ({
   setAuthRememberMe,
   loadNearestCountry,
   clearAuthError,
-  gotToAuthQrCode,
+  goToAuthQrCode,
 }) => {
   // eslint-disable-next-line no-null/no-null
   const inputRef = useRef<HTMLInputElement>(null);
@@ -183,7 +183,7 @@ const AuthPhoneNumber: FC<StateProps & DispatchProps> = ({
             )
           )}
           {isAuthReady && (
-            <Button isText ripple isLoading={authIsLoadingQrCode} onClick={gotToAuthQrCode}>
+            <Button isText ripple isLoading={authIsLoadingQrCode} onClick={goToAuthQrCode}>
               Log in by QR code
             </Button>
           )}
@@ -209,6 +209,6 @@ export default memo(withGlobal(
     'setAuthRememberMe',
     'clearAuthError',
     'loadNearestCountry',
-    'gotToAuthQrCode',
+    'goToAuthQrCode',
   ]),
 )(AuthPhoneNumber));

src/components/auth/AuthQrCode.async.tsx

@@ -1,13 +0,0 @@
-import React, { FC, memo } from '../../lib/teact/teact';
-import { Bundles } from '../../util/moduleLoader';
-
-import useModuleLoader from '../../hooks/useModuleLoader';
-import Loading from '../ui/Loading';
-
-const AuthQrCodeAsync: FC = () => {
-  const AuthQrCode = useModuleLoader(Bundles.Auth, 'AuthQrCode');
-
-  return AuthQrCode ? <AuthQrCode /> : <Loading />;
-};
-
-export default memo(AuthQrCodeAsync);

src/components/auth/AuthQrCode.tsx

@@ -9,7 +9,6 @@ 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'>;
@@ -32,6 +31,7 @@ const AuthCode: FC<StateProps & DispatchProps> = ({
 
     container.innerHTML = '';
     container.classList.remove('pre-animate');
+
     QrCreator.render({
       text: `${DATA_PREFIX}${authQrCode.token}`,
       radius: 0.5,
@@ -45,11 +45,13 @@ const AuthCode: FC<StateProps & DispatchProps> = ({
 
   return (
     <div id="auth-qr-form" className="custom-scroll">
-      <div className="auth-form">
+      <div className="auth-form qr">
-        <div className={buildClassName('qr-container', authQrCode && 'pre-animate')} ref={qrCodeRef}>
+        {authQrCode ? (
-          {!authQrCode && <Loading />}
+          <div key="qr-container" className="qr-container pre-animate" ref={qrCodeRef} />
-        </div>
+        ) : (
-        <h3> Log in to Telegram by QR Code</h3>
+          <div key="qr-loading" className="qr-loading"><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&nbsp;<b>Settings</b>&nbsp;&gt;&nbsp;<b>Devices</b>&nbsp;&gt;&nbsp;<b>Scan QR</b></span></li>

src/global/types.ts

@@ -401,7 +401,7 @@ export type ActionTypes = (
   'toggleSafeLinkModal' | 'openHistoryCalendar' | 'closeHistoryCalendar' |
   // auth
   'setAuthPhoneNumber' | 'setAuthCode' | 'setAuthPassword' | 'signUp' | 'returnToAuthPhoneNumber' | 'signOut' |
-  'setAuthRememberMe' | 'clearAuthError' | 'uploadProfilePhoto' | 'gotToAuthQrCode' | 'clearCache' |
+  'setAuthRememberMe' | 'clearAuthError' | 'uploadProfilePhoto' | 'goToAuthQrCode' | 'clearCache' |
   // chats
   'preloadTopChatMessages' | 'loadChats' | 'loadMoreChats' | 'openChat' | 'openChatWithInfo' |
   'openSupportChat' | 'openTipsChat' |

src/lib/gramjs/client/auth.ts

@@ -13,6 +13,7 @@ export interface UserAuthParams {
     qrCode: (qrCode: { token: Buffer; expires: number }) => Promise<void>;
     onError: (err: Error) => void;
     forceSMS?: boolean;
+    initialMethod?: 'phoneNumber' | 'qrCode';
 }
 
 export interface BotAuthParams {
@@ -24,6 +25,7 @@ interface ApiCredentials {
     apiHash: string;
 }
 
+const DEFAULT_INITIAL_METHOD = 'phoneNumber';
 const QR_CODE_TIMEOUT = 30000;
 
 export async function authFlow(
@@ -31,11 +33,20 @@ export async function authFlow(
     apiCredentials: ApiCredentials,
     authParams: UserAuthParams | BotAuthParams,
 ) {
-    const me = 'phoneNumber' in authParams
+    let me: Api.TypeUser;
-        ? await signInUser(client, apiCredentials, authParams)
+
-        : await signInBot(client, apiCredentials, authParams);
+    if ('botAuthToken' in authParams) {
+        me = await signInBot(client, apiCredentials, authParams);
+    } else {
+        const { initialMethod = DEFAULT_INITIAL_METHOD } = authParams;
+
+        if (initialMethod === 'phoneNumber') {
+            me = await signInUser(client, apiCredentials, authParams);
+        } else {
+            me = await signInUserWithQrCode(client, apiCredentials, authParams);
+        }
+    }
 
-    // TODO @logger
     client._log.info('Signed in successfully as', utils.getDisplayName(me));
 }
 

src/modules/actions/api/initial.ts

@@ -101,7 +101,7 @@ addReducer('returnToAuthPhoneNumber', (global) => {
   };
 });
 
-addReducer('gotToAuthQrCode', (global) => {
+addReducer('goToAuthQrCode', (global) => {
   void callApi('restartAuthWithQr');
 
   return {