From 1fb082917fed4d5a0ded6722899b91328e5faf9b Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 4 Oct 2022 13:29:10 +1100 Subject: [PATCH] fix: copy of login screen with password and setting screen --- _locales/en/messages.json | 20 ++++--- stylesheets/_session_password.scss | 10 +++- ts/components/SessionPasswordPrompt.tsx | 60 ++++++++----------- .../message-content/MessageAuthorText.tsx | 4 +- .../dialog/SessionPasswordDialog.tsx | 2 +- ts/components/settings/BlockedList.tsx | 5 +- ts/components/settings/SessionSettings.tsx | 40 +++---------- ts/mains/password_start.tsx | 2 + ts/types/LocalizerKeys.ts | 4 ++ 9 files changed, 67 insertions(+), 80 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index bd7e2f439..100ea14de 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -114,6 +114,7 @@ "clear": "Clear", "clearAllData": "Clear All Data", "deleteAccountWarning": "This will permanently delete your messages and contacts.", + "deleteAccountFromLogin": "Are you sure you want to clear your device?", "deleteContactConfirmation": "Are you sure you want to delete this conversation?", "quoteThumbnailAlt": "Thumbnail of image from quoted message", "imageAttachmentAlt": "Image attached to message", @@ -266,16 +267,16 @@ "updateGroupDialogTitle": "Updating $name$...", "showRecoveryPhrase": "Recovery Phrase", "yourSessionID": "Your Session ID", - "setAccountPasswordTitle": "Set Account Password", + "setAccountPasswordTitle": "Password", "setAccountPasswordDescription": "Require password to unlock Session.", - "changeAccountPasswordTitle": "Change Account Password", + "changeAccountPasswordTitle": "Change Password", "changeAccountPasswordDescription": "Change the password required to unlock Session.", - "removeAccountPasswordTitle": "Remove Account Password", + "removeAccountPasswordTitle": "Remove Password", "removeAccountPasswordDescription": "Remove the password required to unlock Session.", "enterPassword": "Please enter your password", "confirmPassword": "Confirm password", "enterNewPassword": "Please enter your new password", - "confirmNewPassword": "Confirm new password", + "confirmNewPassword": "Confirm password", "showRecoveryPhrasePasswordRequest": "Please enter your password", "recoveryPhraseSavePromptMain": "Your recovery phrase is the master key to your Session ID — you can use it to restore your Session ID if you lose access to your device. Store your recovery phrase in a safe place, and don't give it to anyone.", "invalidOpenGroupUrl": "Invalid URL", @@ -295,12 +296,12 @@ "setPasswordInvalid": "Passwords do not match", "changePasswordInvalid": "The old password you entered is incorrect", "removePasswordInvalid": "Incorrect password", - "setPasswordTitle": "Set Password", - "changePasswordTitle": "Changed Password", - "removePasswordTitle": "Removed Password", + "setPasswordTitle": "Password Set", + "changePasswordTitle": "Password Changed", + "removePasswordTitle": "Password Removed", "setPasswordToastDescription": "Your password has been set. Please keep it safe.", "changePasswordToastDescription": "Your password has been changed. Please keep it safe.", - "removePasswordToastDescription": "You have removed your password.", + "removePasswordToastDescription": "Your password has been removed.", "publicChatExists": "You are already connected to this community", "connectToServerFail": "Couldn't join community", "connectingToServer": "Connecting...", @@ -414,6 +415,9 @@ "dialogClearAllDataDeletionFailedTitleQuestion": "Do you want to delete data from just this device?", "dialogClearAllDataDeletionFailedMultiple": "Data not deleted by those Service Nodes: $snodes$", "dialogClearAllDataDeletionQuestion": "Would you like to clear this device only, or delete your data from the network as well?", + "clearDevice": "Clear Device", + "tryAgain": "Try Again", + "areYouSureClearDevice": "Are you sure you want to clear your device?", "deviceOnly": "Clear Device Only", "entireAccount": "Clear Device and Network", "areYouSureDeleteDeviceOnly": "Are you sure you want to delete your device data only?", diff --git a/stylesheets/_session_password.scss b/stylesheets/_session_password.scss index 9d14c4513..2c9547813 100644 --- a/stylesheets/_session_password.scss +++ b/stylesheets/_session_password.scss @@ -1,8 +1,16 @@ .password { height: 100vh; + color: white; //TODO theming update .clear-data-wrapper { - margin: auto; + display: flex; + height: 100%; + width: 100%; + background-color: $session-color-black; + + .clear-data-container { + margin: auto; + } .warning-info-area { display: flex; diff --git a/ts/components/SessionPasswordPrompt.tsx b/ts/components/SessionPasswordPrompt.tsx index b20d519f7..8be2918df 100644 --- a/ts/components/SessionPasswordPrompt.tsx +++ b/ts/components/SessionPasswordPrompt.tsx @@ -7,15 +7,17 @@ import autoBind from 'auto-bind'; import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton'; import { SessionSpinner } from './basic/SessionSpinner'; import { switchHtmlToDarkTheme } from '../state/ducks/SessionTheme'; +import { ToastUtils } from '../session/utils'; +import { isString } from 'lodash'; interface State { - error: string; errorCount: number; clearDataView: boolean; loading: boolean; } export const MAX_LOGIN_TRIES = 3; +// tslint:disable: use-simple-attributes const TextPleaseWait = (props: { isLoading: boolean }) => { if (!props.isLoading) { @@ -31,7 +33,6 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { super(props); this.state = { - error: '', errorCount: 0, clearDataView: false, loading: false, @@ -48,7 +49,6 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { } public render() { - const showResetElements = this.state.errorCount >= MAX_LOGIN_TRIES; const isLoading = this.state.loading; const wrapperClass = this.state.clearDataView @@ -59,13 +59,13 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { : 'password-prompt-container'; const infoAreaClass = this.state.clearDataView ? 'warning-info-area' : 'password-info-area'; const infoTitle = this.state.clearDataView - ? window.i18n('clearAllData') + ? window.i18n('clearDevice') : window.i18n('passwordViewTitle'); const buttonGroup = this.state.clearDataView ? this.renderClearDataViewButtons() : this.renderPasswordViewButtons(); const featureElement = this.state.clearDataView ? ( -

{window.i18n('deleteAccountWarning')}

+

{window.i18n('deleteAccountFromLogin')}

) : ( { const infoIcon = this.state.clearDataView ?? ( ); - const errorSection = !this.state.clearDataView && ( -
- {this.state.error && ( - <> - {showResetElements ? ( -
{window.i18n('maxPasswordAttempts')}
- ) : ( -
{this.state.error}
- )} - - )} -
- ); + const spinner = isLoading ? : null; return ( @@ -108,7 +96,6 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { {spinner || featureElement} - {errorSection} {buttonGroup} @@ -137,7 +124,12 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { errorCount: this.state.errorCount + 1, }); - this.setState({ error }); + if (error && isString(error)) { + ToastUtils.pushToastError('onLogin', error); + } else if (error?.message && isString(error.message)) { + ToastUtils.pushToastError('onLogin', error.message); + } + global.setTimeout(() => { document.getElementById('password-prompt-input')?.focus(); }, 50); @@ -160,7 +152,6 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { private initClearDataView() { this.setState({ - error: '', errorCount: 0, clearDataView: true, }); @@ -174,17 +165,17 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { {showResetElements && ( <> )} @@ -194,21 +185,20 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { private renderClearDataViewButtons(): JSX.Element { return (
+ { this.setState({ clearDataView: false }); }} /> - -
); } diff --git a/ts/components/conversation/message/message-content/MessageAuthorText.tsx b/ts/components/conversation/message/message-content/MessageAuthorText.tsx index 89d4a21c2..d669e6591 100644 --- a/ts/components/conversation/message/message-content/MessageAuthorText.tsx +++ b/ts/components/conversation/message/message-content/MessageAuthorText.tsx @@ -20,7 +20,9 @@ type Props = { messageId: string; }; -const StyledAuthorContainer = styled(Flex)`color: var(--color-text)`; +const StyledAuthorContainer = styled(Flex)` + color: var(--color-text); +`; export const MessageAuthorText = (props: Props) => { const selected = useSelector(state => getMessageAuthorProps(state as any, props.messageId)); diff --git a/ts/components/dialog/SessionPasswordDialog.tsx b/ts/components/dialog/SessionPasswordDialog.tsx index 870211b96..49bc90400 100644 --- a/ts/components/dialog/SessionPasswordDialog.tsx +++ b/ts/components/dialog/SessionPasswordDialog.tsx @@ -117,7 +117,7 @@ export class SessionPasswordDialog extends React.Component {
diff --git a/ts/components/settings/BlockedList.tsx b/ts/components/settings/BlockedList.tsx index 8812cc985..f7b9e8ab3 100644 --- a/ts/components/settings/BlockedList.tsx +++ b/ts/components/settings/BlockedList.tsx @@ -18,14 +18,15 @@ const BlockedEntriesContainer = styled.div` overflow: auto; min-height: 40px; max-height: 100%; - background: var(--color-input-background); // TODO theming update + background: inherit; // TODO theming update `; const BlockedEntriesRoundedContainer = styled.div` overflow: hidden; border-radius: 16px; padding: var(--margins-lg); - background: var(--color-input-background); // TODO theming update + background: none; // TODO theming update + border: 1px solid #e5e5ea; // TODO Theming update `; const BlockedContactsSection = styled.div` diff --git a/ts/components/settings/SessionSettings.tsx b/ts/components/settings/SessionSettings.tsx index d991228be..b44934916 100644 --- a/ts/components/settings/SessionSettings.tsx +++ b/ts/components/settings/SessionSettings.tsx @@ -15,6 +15,7 @@ import { matchesHash } from '../../util/passwordUtils'; import { SettingsCategoryPermissions } from './section/CategoryPermissions'; import { SettingsCategoryHelp } from './section/CategoryHelp'; import styled from 'styled-components'; +import { ToastUtils } from '../../session/utils'; export function getMediaPermissionsSettings() { return window.getSettingValue('media-permissions'); @@ -42,9 +43,6 @@ export interface SettingsViewProps { interface State { hasPassword: boolean | null; - pwdLockError: string | null; - mediaSetting: boolean | null; - callMediaSetting: boolean | null; shouldLockSettings: boolean | null; } @@ -93,8 +91,7 @@ const StyledPasswordInput = styled.input` border: none; border-radius: 2px; text-align: center; - font-size: 24px; - letter-spacing: 5px; + font-size: 16px; font-family: var(--font-default); `; @@ -104,31 +101,27 @@ const StyledH3 = styled.h3` `; const PasswordLock = ({ - pwdLockError, validatePasswordLock, }: { - pwdLockError: string | null; validatePasswordLock: () => Promise; }) => { return (
- {window.i18n('password')} + {window.i18n('passwordViewTitle')} - {pwdLockError &&
{pwdLockError}
} -
@@ -195,9 +188,6 @@ export class SessionSettingsView extends React.Component {shouldRenderPasswordLock ? ( - + ) : ( + , document.getElementById('root') diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts index 8394717c3..95a12580f 100644 --- a/ts/types/LocalizerKeys.ts +++ b/ts/types/LocalizerKeys.ts @@ -162,6 +162,7 @@ export type LocalizerKeys = | 'spellCheckDirty' | 'debugLogExplanation' | 'closedGroupInviteFailTitle' + | 'areYouSureClearDevice' | 'setAccountPasswordDescription' | 'removeAccountPasswordDescription' | 'establishingConnection' @@ -348,6 +349,8 @@ export type LocalizerKeys = | 'openGroupInvitation' | 'callMissedCausePermission' | 'mediaPermissionsDescription' + | 'tryAgain' + | 'clearDevice' | 'media' | 'noMembersInThisGroup' | 'saveLogToDesktop' @@ -478,6 +481,7 @@ export type LocalizerKeys = | 'titleIsNow' | 'removePasswordToastDescription' | 'recoveryPhrase' + | 'deleteAccountFromLogin' | 'newMessages' | 'you' | 'pruneSettingTitle'