311 lines
11 KiB
TypeScript
311 lines
11 KiB
TypeScript
import type { FC } from '../../../lib/teact/teact';
|
|
import React, {
|
|
memo, useCallback, useMemo, useState,
|
|
} from '../../../lib/teact/teact';
|
|
import { getActions } from '../../../global';
|
|
|
|
import { SettingsScreens } from '../../../types';
|
|
|
|
import useAppLayout from '../../../hooks/useAppLayout';
|
|
import useLang from '../../../hooks/useLang';
|
|
import useMultiClick from '../../../hooks/useMultiClick';
|
|
import useOldLang from '../../../hooks/useOldLang';
|
|
|
|
import Button from '../../ui/Button';
|
|
import ConfirmDialog from '../../ui/ConfirmDialog';
|
|
import DropdownMenu from '../../ui/DropdownMenu';
|
|
import MenuItem from '../../ui/MenuItem';
|
|
|
|
type OwnProps = {
|
|
currentScreen: SettingsScreens;
|
|
editedFolderId?: number;
|
|
onReset: () => void;
|
|
onScreenSelect: (screen: SettingsScreens) => void;
|
|
};
|
|
|
|
const SettingsHeader: FC<OwnProps> = ({
|
|
currentScreen,
|
|
editedFolderId,
|
|
onReset,
|
|
onScreenSelect,
|
|
}) => {
|
|
const {
|
|
signOut,
|
|
openDeleteChatFolderModal,
|
|
} = getActions();
|
|
|
|
const { isMobile } = useAppLayout();
|
|
const [isSignOutDialogOpen, setIsSignOutDialogOpen] = useState(false);
|
|
|
|
const handleMultiClick = useMultiClick(5, () => {
|
|
onScreenSelect(SettingsScreens.Experimental);
|
|
});
|
|
|
|
const openSignOutConfirmation = useCallback(() => {
|
|
setIsSignOutDialogOpen(true);
|
|
}, []);
|
|
|
|
const closeSignOutConfirmation = useCallback(() => {
|
|
setIsSignOutDialogOpen(false);
|
|
}, []);
|
|
|
|
const openDeleteFolderConfirmation = useCallback(() => {
|
|
if (!editedFolderId) return;
|
|
|
|
openDeleteChatFolderModal({ folderId: editedFolderId });
|
|
}, [editedFolderId, openDeleteChatFolderModal]);
|
|
|
|
const handleSignOutMessage = useCallback(() => {
|
|
closeSignOutConfirmation();
|
|
signOut({ forceInitApi: true });
|
|
}, [closeSignOutConfirmation, signOut]);
|
|
|
|
const SettingsMenuButton: FC<{ onTrigger: () => void; isOpen?: boolean }> = useMemo(() => {
|
|
return ({ onTrigger, isOpen }) => (
|
|
<Button
|
|
round
|
|
ripple={!isMobile}
|
|
size="smaller"
|
|
color="translucent"
|
|
className={isOpen ? 'active' : ''}
|
|
onClick={onTrigger}
|
|
ariaLabel="More actions"
|
|
>
|
|
<i className="icon icon-more" />
|
|
</Button>
|
|
);
|
|
}, [isMobile]);
|
|
|
|
const oldLang = useOldLang();
|
|
const lang = useLang();
|
|
|
|
function renderHeaderContent() {
|
|
switch (currentScreen) {
|
|
case SettingsScreens.EditProfile:
|
|
return <h3>{oldLang('lng_settings_information')}</h3>;
|
|
case SettingsScreens.General:
|
|
return <h3>{oldLang('General')}</h3>;
|
|
case SettingsScreens.QuickReaction:
|
|
return <h3>{oldLang('DoubleTapSetting')}</h3>;
|
|
case SettingsScreens.CustomEmoji:
|
|
return <h3>{oldLang('Emoji')}</h3>;
|
|
case SettingsScreens.Notifications:
|
|
return <h3>{oldLang('Notifications')}</h3>;
|
|
case SettingsScreens.DataStorage:
|
|
return <h3>{oldLang('DataSettings')}</h3>;
|
|
case SettingsScreens.Privacy:
|
|
return <h3>{oldLang('PrivacySettings')}</h3>;
|
|
case SettingsScreens.Language:
|
|
return <h3>{oldLang('Language')}</h3>;
|
|
case SettingsScreens.DoNotTranslate:
|
|
return <h3>{oldLang('DoNotTranslate')}</h3>;
|
|
case SettingsScreens.Stickers:
|
|
return <h3>{oldLang('StickersName')}</h3>;
|
|
case SettingsScreens.Experimental:
|
|
return <h3>{oldLang('lng_settings_experimental')}</h3>;
|
|
|
|
case SettingsScreens.GeneralChatBackground:
|
|
return <h3>{oldLang('ChatBackground')}</h3>;
|
|
case SettingsScreens.GeneralChatBackgroundColor:
|
|
return <h3>{oldLang('SetColor')}</h3>;
|
|
|
|
case SettingsScreens.PrivacyPhoneNumber:
|
|
return <h3>{oldLang('PrivacyPhone')}</h3>;
|
|
case SettingsScreens.PrivacyLastSeen:
|
|
return <h3>{oldLang('PrivacyLastSeen')}</h3>;
|
|
case SettingsScreens.PrivacyProfilePhoto:
|
|
return <h3>{oldLang('Privacy.ProfilePhoto')}</h3>;
|
|
case SettingsScreens.PrivacyBio:
|
|
return <h3>{oldLang('PrivacyBio')}</h3>;
|
|
case SettingsScreens.PrivacyBirthday:
|
|
return <h3>{oldLang('PrivacyBirthday')}</h3>;
|
|
case SettingsScreens.PrivacyGifts:
|
|
return <h3>{lang('PrivacyGifts')}</h3>;
|
|
case SettingsScreens.PrivacyForwarding:
|
|
return <h3>{oldLang('PrivacyForwards')}</h3>;
|
|
case SettingsScreens.PrivacyVoiceMessages:
|
|
return <h3>{oldLang('PrivacyVoiceMessages')}</h3>;
|
|
case SettingsScreens.PrivacyMessages:
|
|
return <h3>{oldLang('PrivacyMessages')}</h3>;
|
|
case SettingsScreens.PrivacyGroupChats:
|
|
return <h3>{oldLang('AutodownloadGroupChats')}</h3>;
|
|
case SettingsScreens.PrivacyPhoneCall:
|
|
return <h3>{oldLang('Calls')}</h3>;
|
|
|
|
case SettingsScreens.PrivacyLastSeenAllowedContacts:
|
|
case SettingsScreens.PrivacyProfilePhotoAllowedContacts:
|
|
case SettingsScreens.PrivacyBioAllowedContacts:
|
|
case SettingsScreens.PrivacyGroupChatsAllowedContacts:
|
|
return <h3>{oldLang('AlwaysShareWith')}</h3>;
|
|
|
|
case SettingsScreens.PrivacyLastSeenDeniedContacts:
|
|
case SettingsScreens.PrivacyProfilePhotoDeniedContacts:
|
|
case SettingsScreens.PrivacyBioDeniedContacts:
|
|
case SettingsScreens.PrivacyGroupChatsDeniedContacts:
|
|
return <h3>{oldLang('NeverShareWith')}</h3>;
|
|
|
|
case SettingsScreens.PrivacyPhoneNumberAllowedContacts:
|
|
case SettingsScreens.PrivacyBirthdayAllowedContacts:
|
|
case SettingsScreens.PrivacyGiftsAllowedContacts:
|
|
case SettingsScreens.PrivacyForwardingAllowedContacts:
|
|
case SettingsScreens.PrivacyVoiceMessagesAllowedContacts:
|
|
case SettingsScreens.PrivacyPhoneCallAllowedContacts:
|
|
case SettingsScreens.PrivacyPhoneP2PAllowedContacts:
|
|
return <h3>{oldLang('AlwaysAllow')}</h3>;
|
|
|
|
case SettingsScreens.PrivacyPhoneNumberDeniedContacts:
|
|
case SettingsScreens.PrivacyBirthdayDeniedContacts:
|
|
case SettingsScreens.PrivacyGiftsDeniedContacts:
|
|
case SettingsScreens.PrivacyForwardingDeniedContacts:
|
|
case SettingsScreens.PrivacyVoiceMessagesDeniedContacts:
|
|
case SettingsScreens.PrivacyPhoneCallDeniedContacts:
|
|
case SettingsScreens.PrivacyPhoneP2PDeniedContacts:
|
|
return <h3>{oldLang('NeverAllow')}</h3>;
|
|
|
|
case SettingsScreens.Performance:
|
|
return <h3>{lang('MenuAnimations')}</h3>;
|
|
|
|
case SettingsScreens.ActiveSessions:
|
|
return <h3>{oldLang('SessionsTitle')}</h3>;
|
|
case SettingsScreens.ActiveWebsites:
|
|
return <h3>{oldLang('OtherWebSessions')}</h3>;
|
|
case SettingsScreens.PrivacyBlockedUsers:
|
|
return <h3>{oldLang('BlockedUsers')}</h3>;
|
|
|
|
case SettingsScreens.TwoFaDisabled:
|
|
case SettingsScreens.TwoFaEnabled:
|
|
return <h3>{oldLang('TwoStepVerification')}</h3>;
|
|
case SettingsScreens.TwoFaNewPassword:
|
|
case SettingsScreens.TwoFaChangePasswordNew:
|
|
case SettingsScreens.TwoFaChangePasswordConfirm:
|
|
return <h3>{oldLang('PleaseEnterCurrentPassword')}</h3>;
|
|
case SettingsScreens.TwoFaNewPasswordConfirm:
|
|
return <h3>{oldLang('PleaseReEnterPassword')}</h3>;
|
|
case SettingsScreens.TwoFaNewPasswordHint:
|
|
case SettingsScreens.TwoFaChangePasswordHint:
|
|
return <h3>{oldLang('PasswordHint')}</h3>;
|
|
case SettingsScreens.TwoFaNewPasswordEmail:
|
|
case SettingsScreens.TwoFaRecoveryEmail:
|
|
return <h3>{oldLang('RecoveryEmailTitle')}</h3>;
|
|
case SettingsScreens.TwoFaNewPasswordEmailCode:
|
|
case SettingsScreens.TwoFaRecoveryEmailCode:
|
|
return <h3>Recovery Email Code</h3>;
|
|
case SettingsScreens.TwoFaCongratulations:
|
|
return <h3>{oldLang('TwoStepVerificationPasswordSet')}</h3>;
|
|
case SettingsScreens.TwoFaChangePasswordCurrent:
|
|
case SettingsScreens.TwoFaTurnOff:
|
|
case SettingsScreens.TwoFaRecoveryEmailCurrentPassword:
|
|
return <h3>{oldLang('PleaseEnterCurrentPassword')}</h3>;
|
|
|
|
case SettingsScreens.PasscodeDisabled:
|
|
case SettingsScreens.PasscodeEnabled:
|
|
case SettingsScreens.PasscodeNewPasscode:
|
|
case SettingsScreens.PasscodeNewPasscodeConfirm:
|
|
case SettingsScreens.PasscodeCongratulations:
|
|
return <h3>{oldLang('Passcode')}</h3>;
|
|
|
|
case SettingsScreens.PasscodeTurnOff:
|
|
return <h3>{oldLang('PasscodeController.Disable.Title')}</h3>;
|
|
|
|
case SettingsScreens.PasscodeChangePasscodeCurrent:
|
|
case SettingsScreens.PasscodeChangePasscodeNew:
|
|
return <h3>{oldLang('PasscodeController.Change.Title')}</h3>;
|
|
|
|
case SettingsScreens.PasscodeChangePasscodeConfirm:
|
|
return <h3>{oldLang('PasscodeController.ReEnterPasscode.Placeholder')}</h3>;
|
|
|
|
case SettingsScreens.Folders:
|
|
return <h3>{oldLang('Filters')}</h3>;
|
|
case SettingsScreens.FoldersCreateFolder:
|
|
return <h3>{oldLang('FilterNew')}</h3>;
|
|
case SettingsScreens.FoldersShare:
|
|
return <h3>{oldLang('FolderLinkScreen.Title')}</h3>;
|
|
case SettingsScreens.FoldersEditFolder:
|
|
case SettingsScreens.FoldersEditFolderFromChatList:
|
|
case SettingsScreens.FoldersEditFolderInvites:
|
|
return (
|
|
<div className="settings-main-header">
|
|
<h3>{oldLang('FilterEdit')}</h3>
|
|
{Boolean(editedFolderId) && (
|
|
<DropdownMenu
|
|
className="settings-more-menu"
|
|
trigger={SettingsMenuButton}
|
|
positionX="right"
|
|
>
|
|
<MenuItem icon="delete" destructive onClick={openDeleteFolderConfirmation}>
|
|
{oldLang('Delete')}
|
|
</MenuItem>
|
|
</DropdownMenu>
|
|
)}
|
|
</div>
|
|
);
|
|
case SettingsScreens.FoldersIncludedChats:
|
|
case SettingsScreens.FoldersIncludedChatsFromChatList:
|
|
case SettingsScreens.FoldersExcludedChats:
|
|
case SettingsScreens.FoldersExcludedChatsFromChatList:
|
|
return (
|
|
<h3>
|
|
{oldLang(
|
|
currentScreen === SettingsScreens.FoldersIncludedChats
|
|
|| currentScreen === SettingsScreens.FoldersIncludedChatsFromChatList
|
|
? 'FilterInclude' : 'FilterExclude',
|
|
)}
|
|
</h3>
|
|
);
|
|
default:
|
|
return (
|
|
<div className="settings-main-header">
|
|
{/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
|
|
<h3 onClick={handleMultiClick}>
|
|
{oldLang('SETTINGS')}
|
|
</h3>
|
|
|
|
<Button
|
|
round
|
|
ripple={!isMobile}
|
|
size="smaller"
|
|
color="translucent"
|
|
// eslint-disable-next-line react/jsx-no-bind
|
|
onClick={() => onScreenSelect(SettingsScreens.EditProfile)}
|
|
ariaLabel={oldLang('lng_settings_information')}
|
|
>
|
|
<i className="icon icon-edit" />
|
|
</Button>
|
|
<DropdownMenu
|
|
className="settings-more-menu"
|
|
trigger={SettingsMenuButton}
|
|
positionX="right"
|
|
>
|
|
<MenuItem icon="logout" onClick={openSignOutConfirmation}>{oldLang('LogOutTitle')}</MenuItem>
|
|
</DropdownMenu>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="left-header">
|
|
<Button
|
|
round
|
|
size="smaller"
|
|
color="translucent"
|
|
onClick={onReset}
|
|
ariaLabel={oldLang('AccDescrGoBack')}
|
|
>
|
|
<i className="icon icon-arrow-left" />
|
|
</Button>
|
|
{renderHeaderContent()}
|
|
<ConfirmDialog
|
|
isOpen={isSignOutDialogOpen}
|
|
onClose={closeSignOutConfirmation}
|
|
text={oldLang('lng_sure_logout')}
|
|
confirmLabel={oldLang('AccountSettings.Logout')}
|
|
confirmHandler={handleSignOutMessage}
|
|
confirmIsDestructive
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(SettingsHeader);
|