ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auth: Optimize initial loading (#2852)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-03-30 18:25:11 -05:00
parent f53e38c4a7
commit fd7c7b5dc2
10 changed files with 163 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/auth/Auth.scss
View File

@ -129,13 +129,9 @@
}
.qr-inner {
opacity: 1;
transform: scale(1);
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms;
&:not(.open) {
opacity: 0.5;
transform: scale(0.5);
transition: none !important;
&.open {
animation: qr-show 300ms ease-in-out forwards;
}
&:not(.shown) {
@ -200,3 +196,20 @@
#sign-in-password {
word-break: normal !important;
}
@keyframes qr-show {
0% {
opacity: 0;
transform: scale(0.6);
}
30% {
opacity: 0.5;
}
75% {
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}

4
src/components/main/Main.tsx
View File

@ -185,6 +185,7 @@ const Main: FC<OwnProps & StateProps> = ({
isMasterTab,
}) => {
const {
initMain,
loadAnimatedEmojis,
loadNotificationSettings,
loadNotificationExceptions,
@ -249,6 +250,7 @@ const Main: FC<OwnProps & StateProps> = ({
updateIsOnline(true);
loadConfig();
loadAppConfig();
initMain();
loadAvailableReactions();
loadAnimatedEmojis();
loadGenericEmojiEffects();
@ -270,7 +272,7 @@ const Main: FC<OwnProps & StateProps> = ({
lastSyncTime, loadAnimatedEmojis, loadEmojiKeywords, loadNotificationExceptions, loadNotificationSettings,
loadTopInlineBots, updateIsOnline, loadAvailableReactions, loadAppConfig, loadAttachBots, loadContactList,
loadPremiumGifts, checkAppVersion, loadConfig, loadGenericEmojiEffects, loadDefaultTopicIcons,
loadDefaultStatusIcons, loadRecentEmojiStatuses, isCurrentUserPremium, isMasterTab,
loadDefaultStatusIcons, loadRecentEmojiStatuses, isCurrentUserPremium, isMasterTab, initMain,
]);
// Language-based API calls

7
src/global/actions/apiUpdaters/initial.ts
View File

@ -13,10 +13,9 @@ import type {
ApiUpdateCurrentUser, ApiUpdateServerTimeOffset,
} from '../../../api/types';
import { SESSION_USER_KEY } from '../../../config';
import { subscribe } from '../../../util/notifications';
import { updateUser } from '../../reducers';
import { setLanguage } from '../../../util/langProvider';
import { selectTabState, selectNotifySettings } from '../../selectors';
import { selectTabState } from '../../selectors';
import { forceWebsync } from '../../../util/websync';
import { getShippingError, shouldClosePaymentModal } from '../../../util/getReadableErrorText';
import { clearWebTokenAuth } from '../../../util/routing';
@ -80,10 +79,6 @@ addActionHandler('apiUpdate', (global, actions, update): ActionReturnType => {
});
function onUpdateApiReady<T extends GlobalState>(global: T) {
const { hasWebNotifications, hasPushNotifications } = selectNotifySettings(global);
if (hasWebNotifications && hasPushNotifications) {
void subscribe();
}
void setLanguage(global.settings.byKey.language);
}

12
src/global/actions/ui/initial.ts
View File

@ -59,11 +59,6 @@ addActionHandler('switchMultitabRole', async (global, actions, payload): Promise
setGlobal(global);
}
actions.initApi();
const { hasWebNotifications, hasPushNotifications } = selectNotifySettings(global);
if (hasWebNotifications && hasPushNotifications) {
void subscribe();
}
}
setGlobal(global);
@ -86,6 +81,13 @@ addActionHandler('initShared', (): ActionReturnType => {
startWebsync();
});
addActionHandler('initMain', (global): ActionReturnType => {
const { hasWebNotifications, hasPushNotifications } = selectNotifySettings(global);
if (hasWebNotifications && hasPushNotifications) {
void subscribe();
}
});
addCallback((global: GlobalState) => {
let isUpdated = false;
const tabState = selectTabState(global, getCurrentTabId());

1
src/global/types.ts
View File

@ -840,6 +840,7 @@ export interface ActionPayloads {
reset: undefined;
disconnect: undefined;
initApi: undefined;
initMain: undefined;
sync: undefined;
saveSession: {
sessionData?: ApiSessionData;

9
src/hooks/useLangString.ts
View File

@ -7,7 +7,14 @@ const useLangString = (langCode: string | undefined, key: string): string | unde
if (langCode) {
langProvider
.getTranslationForLangString(langCode, key)
.then(setTranslation);
.then((value) => {
// The string is not translated, maybe the language pack was not loaded due to network or a timeout errors
if (value === key) {
return;
}
setTranslation(value);
});
}
return translation;

114
src/util/authLangPack.ts Normal file
View File

@ -0,0 +1,114 @@
/* eslint-disable max-len */
import type { ApiLangPack } from '../api/types';
export const authLangPack = {
WrongNumber: {
key: 'WrongNumber',
value: 'Wrong number?',
},
SentAppCode: {
key: 'SentAppCode',
value: 'We\'ve sent the code to the **Telegram** app on your other device.',
},
'Login.JustSentSms': {
key: 'Login.JustSentSms',
value: 'We have sent you a code via SMS. Please enter it above.',
},
'Login.Header.Password': {
key: 'Login.Header.Password',
value: 'Enter Password',
},
'Login.EnterPasswordDescription': {
key: 'Login.EnterPasswordDescription',
value: 'You have Two-Step Verification enabled, so your account is protected with an additional password.',
},
StartText: {
key: 'StartText',
value: 'Please confirm your country code and enter your phone number.',
},
'Login.PhonePlaceholder': {
key: 'Login.PhonePlaceholder',
value: 'Your phone number',
},
'Login.Next': {
key: 'Login.Next',
value: 'Next',
},
'Login.QR.Login': {
key: 'Login.QR.Login',
value: 'Log in by QR Code',
},
'Login.QR.Title': {
key: 'Login.QR.Title',
value: 'Log in to Telegram by QR Code',
},
'Login.QR.Help1': {
key: 'Login.QR.Help1',
value: 'Open Telegram on your phone',
},
'Login.QR.Help2': {
key: 'Login.QR.Help2',
value: 'Go to **Settings** > **Devices** > **Link Desktop Device**',
},
'Login.QR2.Help2': {
key: 'Login.QR.Help2',
value: 'Go to **Settings** → **Devices** → **Link Desktop Device**',
},
'Login.QR.Help3': {
key: 'Login.QR.Help3',
value: 'Point your phone at this screen to confirm login',
},
'Login.QR.Cancel': {
key: 'Login.QR.Cancel',
value: 'Log in by phone Number',
},
YourName: {
key: 'YourName',
value: 'Your Name',
},
'Login.Register.Desc': {
key: 'Login.Register.Desc',
value: 'Enter your name and add a profile picture.',
},
'Login.Register.FirstName.Placeholder': {
key: 'Login.Register.FirstName.Placeholder',
value: 'First Name',
},
'Login.Register.LastName.Placeholder': {
key: 'Login.Register.LastName.Placeholder',
value: 'Last Name',
},
'Login.SelectCountry.Title': {
key: 'Login.SelectCountry.Title',
value: 'Country',
},
lng_country_none: {
key: 'lng_country_none',
value: 'Country not found',
},
PleaseEnterPassword: {
key: 'PleaseEnterPassword',
value: 'Enter your new password',
},
PHONE_NUMBER_INVALID: {
key: 'PHONE_NUMBER_INVALID',
value: 'Invalid phone number',
},
PHONE_CODE_INVALID: {
key: 'PHONE_CODE_INVALID',
value: 'Invalid code',
},
PASSWORD_HASH_INVALID: {
key: 'PASSWORD_HASH_INVALID',
value: 'Incorrect password',
},
PHONE_PASSWORD_FLOOD: {
key: 'PHONE_PASSWORD_FLOOD',
value: 'Limit exceeded. Please try again later.',
},
PHONE_NUMBER_BANNED: {
key: 'PHONE_NUMBER_BANNED',
value: 'This phone number is banned.',
},
} as ApiLangPack;

104
src/util/fallbackLangPack.ts
View File

@ -1709,110 +1709,6 @@ export default {
key: 'lng_update_telegram',
value: 'Update Telegram',
},
'Login.QR.Title': {
key: 'Login.QR.Title',
value: 'Log in to Telegram by QR Code',
},
PHONE_NUMBER_INVALID: {
key: 'PHONE_NUMBER_INVALID',
value: 'Invalid phone number',
},
PHONE_CODE_INVALID: {
key: 'PHONE_CODE_INVALID',
value: 'Invalid code',
},
PASSWORD_HASH_INVALID: {
key: 'PASSWORD_HASH_INVALID',
value: 'Incorrect password',
},
WrongNumber: {
key: 'WrongNumber',
value: 'Wrong number?',
},
SentAppCode: {
key: 'SentAppCode',
value: 'We\'ve sent the code to the **Telegram** app on your other device.',
},
'Login.JustSentSms': {
key: 'Login.JustSentSms',
value: 'We have sent you a code via SMS. Please enter it above.',
},
'Login.Header.Password': {
key: 'Login.Header.Password',
value: 'Enter Password',
},
'Login.EnterPasswordDescription': {
key: 'Login.EnterPasswordDescription',
value: 'You have Two-Step Verification enabled, so your account is protected with an additional password.',
},
StartText: {
key: 'StartText',
value: 'Please confirm your country code and enter your phone number.',
},
'Login.PhonePlaceholder': {
key: 'Login.PhonePlaceholder',
value: 'Your phone number',
},
'Login.Next': {
key: 'Login.Next',
value: 'Next',
},
'Login.QR.Login': {
key: 'Login.QR.Login',
value: 'Log in by QR Code',
},
ContinueOnThisLanguage: {
key: 'ContinueOnThisLanguage',
value: 'Continue in English',
},
'Login.QR.Help1': {
key: 'Login.QR.Help1',
value: 'Open Telegram on your phone',
},
'Login.QR.Help2': {
key: 'Login.QR.Help2',
value: 'Go to **Settings** > **Devices** > **Link Desktop Device**',
},
'Login.QR2.Help2': {
key: 'Login.QR.Help2',
value: 'Go to **Settings** → **Devices** → **Link Desktop Device**',
},
'Login.QR.Help3': {
key: 'Login.QR.Help3',
value: 'Point your phone at this screen to confirm login',
},
'Login.QR.Cancel': {
key: 'Login.QR.Cancel',
value: 'Log in by phone Number',
},
YourName: {
key: 'YourName',
value: 'Your Name',
},
'Login.Register.Desc': {
key: 'Login.Register.Desc',
value: 'Enter your name and add a profile picture.',
},
'Login.Register.FirstName.Placeholder': {
key: 'Login.Register.FirstName.Placeholder',
value: 'First Name',
},
'Login.Register.LastName.Placeholder': {
key: 'Login.Register.LastName.Placeholder',
value: 'Last Name',
},
'Login.SelectCountry.Title': {
key: 'Login.SelectCountry.Title',
value: 'Country',
},
lng_country_none: {
key: 'lng_country_none',
value: 'Country not found',
},
PleaseEnterPassword: {
key: 'PleaseEnterPassword',
value: 'Enter your new password',
},
AutoDownloadPhotosTitle: {
key: 'AutoDownloadPhotosTitle',
value: 'Auto-download photos',

14
src/util/langProvider.ts
View File

@ -10,6 +10,7 @@ import * as cacheApi from './cacheApi';
import { callApi } from '../api/gramjs';
import { createCallbackManager } from './callbacks';
import { formatInteger } from './textFormat';
import { authLangPack } from './authLangPack';
export interface LangFn {
(key: string, value?: any, format?: 'i', pluralValue?: number): string;
@ -104,16 +105,17 @@ function createLangFn() {
}
}
if (!langPack && !fallbackLangPack) {
if (!langPack && !fallbackLangPack && !authLangPack[key]) {
return key;
}
const langString = (langPack?.[key]) || (fallbackLangPack?.[key]);
if (!langString) {
if (!fallbackLangPack) {
void importFallbackLangPack();
}
const shouldImportFallback = !fallbackLangPack && !(langPack?.[key] || fallbackLangPack?.[key]);
if (shouldImportFallback) {
void importFallbackLangPack();
}
const langString = (langPack?.[key]) || (fallbackLangPack?.[key]) || authLangPack[key];
if (!langString) {
return key;
}

4
src/util/notifications.ts
View File

@ -51,9 +51,7 @@ function checkIfPushSupported() {
return false;
}
// Check the current Notification permission.
// If its denied, it's a permanent block until the
// user changes the permission
// If permission is denied, it is blocked until the user manually changes their settings
if (Notification.permission === 'denied') {
if (DEBUG) {
// eslint-disable-next-line no-console