diff --git a/src/components/auth/Auth.scss b/src/components/auth/Auth.scss index b4c4eda65..52c684f31 100644 --- a/src/components/auth/Auth.scss +++ b/src/components/auth/Auth.scss @@ -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); + } +} diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx index 82bbef5d7..aadb5808f 100644 --- a/src/components/main/Main.tsx +++ b/src/components/main/Main.tsx @@ -185,6 +185,7 @@ const Main: FC = ({ isMasterTab, }) => { const { + initMain, loadAnimatedEmojis, loadNotificationSettings, loadNotificationExceptions, @@ -249,6 +250,7 @@ const Main: FC = ({ updateIsOnline(true); loadConfig(); loadAppConfig(); + initMain(); loadAvailableReactions(); loadAnimatedEmojis(); loadGenericEmojiEffects(); @@ -270,7 +272,7 @@ const Main: FC = ({ 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 diff --git a/src/global/actions/apiUpdaters/initial.ts b/src/global/actions/apiUpdaters/initial.ts index 8cd5ec320..bf83636d1 100644 --- a/src/global/actions/apiUpdaters/initial.ts +++ b/src/global/actions/apiUpdaters/initial.ts @@ -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(global: T) { - const { hasWebNotifications, hasPushNotifications } = selectNotifySettings(global); - if (hasWebNotifications && hasPushNotifications) { - void subscribe(); - } void setLanguage(global.settings.byKey.language); } diff --git a/src/global/actions/ui/initial.ts b/src/global/actions/ui/initial.ts index 97a97a57b..6930e11e4 100644 --- a/src/global/actions/ui/initial.ts +++ b/src/global/actions/ui/initial.ts @@ -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()); diff --git a/src/global/types.ts b/src/global/types.ts index e867fe46e..f6f7e57db 100644 --- a/src/global/types.ts +++ b/src/global/types.ts @@ -840,6 +840,7 @@ export interface ActionPayloads { reset: undefined; disconnect: undefined; initApi: undefined; + initMain: undefined; sync: undefined; saveSession: { sessionData?: ApiSessionData; diff --git a/src/hooks/useLangString.ts b/src/hooks/useLangString.ts index b3cf35387..d05994f1b 100644 --- a/src/hooks/useLangString.ts +++ b/src/hooks/useLangString.ts @@ -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; diff --git a/src/util/authLangPack.ts b/src/util/authLangPack.ts new file mode 100644 index 000000000..df4afda20 --- /dev/null +++ b/src/util/authLangPack.ts @@ -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; diff --git a/src/util/fallbackLangPack.ts b/src/util/fallbackLangPack.ts index 6ac9d9a46..196267fd9 100644 --- a/src/util/fallbackLangPack.ts +++ b/src/util/fallbackLangPack.ts @@ -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', diff --git a/src/util/langProvider.ts b/src/util/langProvider.ts index 742c82710..79afeb651 100644 --- a/src/util/langProvider.ts +++ b/src/util/langProvider.ts @@ -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; } diff --git a/src/util/notifications.ts b/src/util/notifications.ts index e92b21b10..85320e9de 100644 --- a/src/util/notifications.ts +++ b/src/util/notifications.ts @@ -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