From e8020348b490ec4b397f996637626ffede157bf3 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 22 Jun 2021 14:28:46 +1000 Subject: [PATCH 1/9] fix up onion path animation with no glowing nodes --- stylesheets/_session.scss | 4 +++ ts/components/OnionStatusDialog.tsx | 2 +- .../conversation/InviteContactsDialog.tsx | 2 -- ts/components/session/icon/SessionIcon.tsx | 32 ++++++++++++------- .../session/network/SessionOffline.tsx | 7 ++-- ts/hooks/useNetwork.ts | 22 ------------- 6 files changed, 29 insertions(+), 40 deletions(-) delete mode 100644 ts/hooks/useNetwork.ts diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 261a7e36d..622277f15 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -18,6 +18,10 @@ word-break: break-all; } +.session-icon-button svg path { + transition: fill 0.3s ease; +} + input, textarea { caret-color: $session-color-green !important; diff --git a/ts/components/OnionStatusDialog.tsx b/ts/components/OnionStatusDialog.tsx index 465b77989..776e3dd17 100644 --- a/ts/components/OnionStatusDialog.tsx +++ b/ts/components/OnionStatusDialog.tsx @@ -116,7 +116,7 @@ export const ModalStatusLight = (props: StatusLightType) => { glowDuration={glowDuration} glowStartDelay={glowStartDelay} iconType={SessionIconType.Circle} - iconSize={SessionIconSize.Medium} + iconSize={SessionIconSize.Small} theme={theme} /> ); diff --git a/ts/components/conversation/InviteContactsDialog.tsx b/ts/components/conversation/InviteContactsDialog.tsx index 21702bf46..fe21a5f56 100644 --- a/ts/components/conversation/InviteContactsDialog.tsx +++ b/ts/components/conversation/InviteContactsDialog.tsx @@ -41,8 +41,6 @@ const InviteContactsDialogInner = (props: Props) => { } const chatName = convo.get('name'); - // const chatServer = convo.get('server'); - // const channelId = convo.get('channelId'); const isPublicConvo = convo.isPublic(); const [contactList, setContactList] = useState( diff --git a/ts/components/session/icon/SessionIcon.tsx b/ts/components/session/icon/SessionIcon.tsx index e698b71d5..1818cf674 100644 --- a/ts/components/session/icon/SessionIcon.tsx +++ b/ts/components/session/icon/SessionIcon.tsx @@ -62,43 +62,51 @@ const rotate = keyframes` * Creates a glow animation made for multiple element sequentially */ const glow = (color: string, glowDuration: number, glowStartDelay: number) => { - const dropShadowType = `drop-shadow(0px 0px 4px ${color}) `; - //increase shadow intensity by 3 - const dropShadow = `${dropShadowType.repeat(1)};`; + const dropShadow = `drop-shadow(0px 0px 6px ${color});`; // creating keyframe for sequential animations let kf = ''; - for (let i = 0; i <= glowDuration; i++) { - // const percent = (100 / glowDuration) * i; - const percent = (100 / glowDuration) * i; - if (i === glowStartDelay) { + const durationWithLoop = glowDuration + 1; + for (let i = 0; i <= durationWithLoop; i++) { + const percent = (100 / durationWithLoop) * i; + + if (i === glowStartDelay + 1) { kf += `${percent}% { filter: ${dropShadow} - transform: scale(1.5); + transform: scale(1.1); }`; } else { kf += `${percent}% { filter: none; - transform: scale(0.8); + transform: scale(0.9); }`; } } return keyframes`${kf}`; }; -const animation = (props: any) => { +const animation = (props: { + rotateDuration?: number; + glowDuration?: number; + glowStartDelay?: number; + iconColor?: string; +}) => { if (props.rotateDuration) { return css` ${rotate} ${props.rotateDuration}s infinite linear; `; - } else if (props.glowDuration !== undefined && props.glowStartDelay !== undefined) { + } else if ( + props.glowDuration !== undefined && + props.glowStartDelay !== undefined && + props.iconColor + ) { return css` ${glow( props.iconColor, props.glowDuration, props.glowStartDelay - )} ${props.glowDuration}s ease-in infinite; + )} ${props.glowDuration}s ease infinite; `; } else { return; diff --git a/ts/components/session/network/SessionOffline.tsx b/ts/components/session/network/SessionOffline.tsx index 8230520c3..3dbb4a6b4 100644 --- a/ts/components/session/network/SessionOffline.tsx +++ b/ts/components/session/network/SessionOffline.tsx @@ -1,6 +1,8 @@ import React from 'react'; + +// tslint:disable-next-line: no-submodule-imports +import useNetworkState from 'react-use/lib/useNetworkState'; import styled from 'styled-components'; -import { useNetwork } from '../../../hooks/useNetwork'; type ContainerProps = { show: boolean; @@ -24,8 +26,7 @@ const OfflineTitle = styled.h3` const OfflineMessage = styled.div``; export const SessionOffline = () => { - const isOnline = useNetwork(); - + const isOnline = useNetworkState().online; return ( {window.i18n('offline')} diff --git a/ts/hooks/useNetwork.ts b/ts/hooks/useNetwork.ts deleted file mode 100644 index d92fc9937..000000000 --- a/ts/hooks/useNetwork.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { useEffect, useState } from 'react'; - -export function useNetwork() { - const [isOnline, setNetwork] = useState(window.navigator.onLine); - const updateNetwork = () => { - setNetwork(window.navigator.onLine); - }; - - // there are some weird behavior with this api. - // basically, online events might not be called if the pc has a virtual machine running - // https://github.com/electron/electron/issues/11290#issuecomment-348598311 - useEffect(() => { - window.addEventListener('offline', updateNetwork); - window.addEventListener('online', updateNetwork); - - return () => { - window.removeEventListener('offline', updateNetwork); - window.removeEventListener('online', updateNetwork); - }; - }); - return isOnline; -} From 151dcd1431b48001107f393d6ee22f44260a679f Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 22 Jun 2021 14:28:46 +1000 Subject: [PATCH 2/9] fix up onion path animation with no glowing nodes --- stylesheets/_session.scss | 4 +++ ts/components/OnionStatusDialog.tsx | 2 +- .../conversation/InviteContactsDialog.tsx | 2 -- ts/components/session/icon/SessionIcon.tsx | 32 ++++++++++++------- .../session/network/SessionOffline.tsx | 7 ++-- ts/hooks/useNetwork.ts | 22 ------------- 6 files changed, 29 insertions(+), 40 deletions(-) delete mode 100644 ts/hooks/useNetwork.ts diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 261a7e36d..622277f15 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -18,6 +18,10 @@ word-break: break-all; } +.session-icon-button svg path { + transition: fill 0.3s ease; +} + input, textarea { caret-color: $session-color-green !important; diff --git a/ts/components/OnionStatusDialog.tsx b/ts/components/OnionStatusDialog.tsx index 465b77989..776e3dd17 100644 --- a/ts/components/OnionStatusDialog.tsx +++ b/ts/components/OnionStatusDialog.tsx @@ -116,7 +116,7 @@ export const ModalStatusLight = (props: StatusLightType) => { glowDuration={glowDuration} glowStartDelay={glowStartDelay} iconType={SessionIconType.Circle} - iconSize={SessionIconSize.Medium} + iconSize={SessionIconSize.Small} theme={theme} /> ); diff --git a/ts/components/conversation/InviteContactsDialog.tsx b/ts/components/conversation/InviteContactsDialog.tsx index 21702bf46..fe21a5f56 100644 --- a/ts/components/conversation/InviteContactsDialog.tsx +++ b/ts/components/conversation/InviteContactsDialog.tsx @@ -41,8 +41,6 @@ const InviteContactsDialogInner = (props: Props) => { } const chatName = convo.get('name'); - // const chatServer = convo.get('server'); - // const channelId = convo.get('channelId'); const isPublicConvo = convo.isPublic(); const [contactList, setContactList] = useState( diff --git a/ts/components/session/icon/SessionIcon.tsx b/ts/components/session/icon/SessionIcon.tsx index e698b71d5..1818cf674 100644 --- a/ts/components/session/icon/SessionIcon.tsx +++ b/ts/components/session/icon/SessionIcon.tsx @@ -62,43 +62,51 @@ const rotate = keyframes` * Creates a glow animation made for multiple element sequentially */ const glow = (color: string, glowDuration: number, glowStartDelay: number) => { - const dropShadowType = `drop-shadow(0px 0px 4px ${color}) `; - //increase shadow intensity by 3 - const dropShadow = `${dropShadowType.repeat(1)};`; + const dropShadow = `drop-shadow(0px 0px 6px ${color});`; // creating keyframe for sequential animations let kf = ''; - for (let i = 0; i <= glowDuration; i++) { - // const percent = (100 / glowDuration) * i; - const percent = (100 / glowDuration) * i; - if (i === glowStartDelay) { + const durationWithLoop = glowDuration + 1; + for (let i = 0; i <= durationWithLoop; i++) { + const percent = (100 / durationWithLoop) * i; + + if (i === glowStartDelay + 1) { kf += `${percent}% { filter: ${dropShadow} - transform: scale(1.5); + transform: scale(1.1); }`; } else { kf += `${percent}% { filter: none; - transform: scale(0.8); + transform: scale(0.9); }`; } } return keyframes`${kf}`; }; -const animation = (props: any) => { +const animation = (props: { + rotateDuration?: number; + glowDuration?: number; + glowStartDelay?: number; + iconColor?: string; +}) => { if (props.rotateDuration) { return css` ${rotate} ${props.rotateDuration}s infinite linear; `; - } else if (props.glowDuration !== undefined && props.glowStartDelay !== undefined) { + } else if ( + props.glowDuration !== undefined && + props.glowStartDelay !== undefined && + props.iconColor + ) { return css` ${glow( props.iconColor, props.glowDuration, props.glowStartDelay - )} ${props.glowDuration}s ease-in infinite; + )} ${props.glowDuration}s ease infinite; `; } else { return; diff --git a/ts/components/session/network/SessionOffline.tsx b/ts/components/session/network/SessionOffline.tsx index 8230520c3..3dbb4a6b4 100644 --- a/ts/components/session/network/SessionOffline.tsx +++ b/ts/components/session/network/SessionOffline.tsx @@ -1,6 +1,8 @@ import React from 'react'; + +// tslint:disable-next-line: no-submodule-imports +import useNetworkState from 'react-use/lib/useNetworkState'; import styled from 'styled-components'; -import { useNetwork } from '../../../hooks/useNetwork'; type ContainerProps = { show: boolean; @@ -24,8 +26,7 @@ const OfflineTitle = styled.h3` const OfflineMessage = styled.div``; export const SessionOffline = () => { - const isOnline = useNetwork(); - + const isOnline = useNetworkState().online; return ( {window.i18n('offline')} diff --git a/ts/hooks/useNetwork.ts b/ts/hooks/useNetwork.ts deleted file mode 100644 index d92fc9937..000000000 --- a/ts/hooks/useNetwork.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { useEffect, useState } from 'react'; - -export function useNetwork() { - const [isOnline, setNetwork] = useState(window.navigator.onLine); - const updateNetwork = () => { - setNetwork(window.navigator.onLine); - }; - - // there are some weird behavior with this api. - // basically, online events might not be called if the pc has a virtual machine running - // https://github.com/electron/electron/issues/11290#issuecomment-348598311 - useEffect(() => { - window.addEventListener('offline', updateNetwork); - window.addEventListener('online', updateNetwork); - - return () => { - window.removeEventListener('offline', updateNetwork); - window.removeEventListener('online', updateNetwork); - }; - }); - return isOnline; -} From feab29a4fedc589441e9d025e3b04eef7b40de0c Mon Sep 17 00:00:00 2001 From: Audric Date: Wed, 23 Jun 2021 13:17:04 +1000 Subject: [PATCH 3/9] remove file server submodule --- .eslintignore | 1 - .github/workflows/build-binaries.yml | 3 --- .github/workflows/pull-request.yml | 3 --- .github/workflows/release.yml | 3 --- .gitmodules | 4 ---- .prettierignore | 1 - tools/unusedLocalizedString.py | 4 ++-- 7 files changed, 2 insertions(+), 17 deletions(-) delete mode 100644 .gitmodules diff --git a/.eslintignore b/.eslintignore index cbc861134..3389f1dad 100644 --- a/.eslintignore +++ b/.eslintignore @@ -32,4 +32,3 @@ ts/**/*.js # Libloki specific files libloki/test/components.js libloki/modules/mnemonic.js -session-file-server/** diff --git a/.github/workflows/build-binaries.yml b/.github/workflows/build-binaries.yml index ee7610304..f14d51fd1 100644 --- a/.github/workflows/build-binaries.yml +++ b/.github/workflows/build-binaries.yml @@ -20,9 +20,6 @@ jobs: - name: Checkout git repo uses: actions/checkout@v2 - - name: Pull git submodules - run: git submodule update --init - - name: Install node uses: actions/setup-node@v1 with: diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index fa5c758b0..1ce275553 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -22,9 +22,6 @@ jobs: - name: Checkout git repo uses: actions/checkout@v2 - - name: Pull git submodules - run: git submodule update --init - - name: Install node uses: actions/setup-node@v1 with: diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index e7fdfd45b..fa58a83fa 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -20,9 +20,6 @@ jobs: - name: Checkout git repo uses: actions/checkout@v2 - - name: Pull git submodules - run: git submodule update --init - - name: Install node uses: actions/setup-node@v1 with: diff --git a/.gitmodules b/.gitmodules deleted file mode 100644 index 69117c0be..000000000 --- a/.gitmodules +++ /dev/null @@ -1,4 +0,0 @@ -[submodule "session-file-server"] - path = session-file-server - url = https://github.com/loki-project/session-file-server/ - branch = session diff --git a/.prettierignore b/.prettierignore index b8d49a937..6d510d168 100644 --- a/.prettierignore +++ b/.prettierignore @@ -49,5 +49,4 @@ stylesheets/_intlTelInput.scss # Coverage coverage/** .nyc_output/** -session-file-server/** release/** diff --git a/tools/unusedLocalizedString.py b/tools/unusedLocalizedString.py index 32d1dd2b3..9c0cbec12 100755 --- a/tools/unusedLocalizedString.py +++ b/tools/unusedLocalizedString.py @@ -13,8 +13,8 @@ files = [y for x in os.walk(dir_path) for y in glob(os.path.join(x[0], '*.js'))] files += [y for x in os.walk(dir_path) for y in glob(os.path.join(x[0], '*.ts'))] files += [y for x in os.walk(dir_path) for y in glob(os.path.join(x[0], '*.tsx'))] -# exclude node_modules and session-file-server directories -filtered_files = [f for f in files if "node_modules" not in f and "session-file-server" not in f] +# exclude node_modules directories +filtered_files = [f for f in files if "node_modules" not in f] # search for this pattern in _locales/en/messages.json: it is a defined localized string patternLocalizedString = re.compile("^ \".*\"\: {") From f1ee7589a01172895c824e6d9063c35c25daf125 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Thu, 24 Jun 2021 10:50:35 +1000 Subject: [PATCH 4/9] fix session password dialog --- ts/components/session/ActionsPanel.tsx | 37 +--------- ts/components/session/ModalContainer.tsx | 68 +++++++++++++++++++ .../session/SessionPasswordModal.tsx | 67 +++++++----------- .../conversation/SessionCompositionBox.tsx | 27 +++----- .../conversation/SessionConversation.tsx | 1 - .../session/settings/SessionSettings.tsx | 46 ++++--------- ts/state/ducks/modalDialog.tsx | 9 +++ ts/state/selectors/modal.ts | 6 ++ 8 files changed, 135 insertions(+), 126 deletions(-) create mode 100644 ts/components/session/ModalContainer.tsx diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx index 725cb8244..45910298b 100644 --- a/ts/components/session/ActionsPanel.tsx +++ b/ts/components/session/ActionsPanel.tsx @@ -73,6 +73,7 @@ import { editProfileModal, onionPathModal } from '../../state/ducks/modalDialog' import { SessionSeedModal } from './SessionSeedModal'; import { AdminLeaveClosedGroupDialog } from '../conversation/AdminLeaveClosedGroupDialog'; import { uploadOurAvatar } from '../../interactions/conversationInteractions'; +import { ModalContainer } from './ModalContainer'; // tslint:disable-next-line: no-import-side-effect no-submodule-imports @@ -279,42 +280,6 @@ const doAppStartUp = () => { SwarmPolling.getInstance().start(); }; -const ModalContainer = () => { - const confirmModalState = useSelector(getConfirmModal); - const inviteModalState = useSelector(getInviteContactModal); - const addModeratorsModalState = useSelector(getAddModeratorsModal); - const removeModeratorsModalState = useSelector(getRemoveModeratorsModal); - const updateGroupMembersModalState = useSelector(getUpdateGroupMembersModal); - const updateGroupNameModalState = useSelector(getUpdateGroupNameModal); - const userDetailsModalState = useSelector(getUserDetailsModal); - const changeNicknameModal = useSelector(getChangeNickNameDialog); - const editProfileModalState = useSelector(getEditProfileDialog); - const onionPathModalState = useSelector(getOnionPathDialog); - const recoveryPhraseModalState = useSelector(getRecoveryPhraseDialog); - const adminLeaveClosedGroupModalState = useSelector(getAdminLeaveClosedGroupDialog); - - return ( - <> - {confirmModalState && } - {inviteModalState && } - {addModeratorsModalState && } - {removeModeratorsModalState && } - {updateGroupMembersModalState && ( - - )} - {updateGroupNameModalState && } - {userDetailsModalState && } - {changeNicknameModal && } - {editProfileModalState && } - {onionPathModalState && } - {recoveryPhraseModalState && } - {adminLeaveClosedGroupModalState && ( - - )} - - ); -}; - /** * ActionsPanel is the far left banner (not the left pane). * The panel with buttons to switch between the message/contact/settings/theme views diff --git a/ts/components/session/ModalContainer.tsx b/ts/components/session/ModalContainer.tsx new file mode 100644 index 000000000..5560a7617 --- /dev/null +++ b/ts/components/session/ModalContainer.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; +import { + getAddModeratorsModal, + getAdminLeaveClosedGroupDialog, + getChangeNickNameDialog, + getConfirmModal, + getEditProfileDialog, + getInviteContactModal, + getOnionPathDialog, + getRecoveryPhraseDialog, + getRemoveModeratorsModal, + getSessionPasswordDialog, + getUpdateGroupMembersModal, + getUpdateGroupNameModal, + getUserDetailsModal, +} from '../../state/selectors/modal'; +import { AdminLeaveClosedGroupDialog } from '../conversation/AdminLeaveClosedGroupDialog'; +import { InviteContactsDialog } from '../conversation/InviteContactsDialog'; +import { AddModeratorsDialog } from '../conversation/ModeratorsAddDialog'; +import { RemoveModeratorsDialog } from '../conversation/ModeratorsRemoveDialog'; +import { UpdateGroupMembersDialog } from '../conversation/UpdateGroupMembersDialog'; +import { UpdateGroupNameDialog } from '../conversation/UpdateGroupNameDialog'; +import { EditProfileDialog } from '../EditProfileDialog'; +import { OnionPathModal } from '../OnionStatusDialog'; +import { UserDetailsDialog } from '../UserDetailsDialog'; +import { SessionConfirm } from './SessionConfirm'; +import { SessionNicknameDialog } from './SessionNicknameDialog'; +import { SessionPasswordModal } from './SessionPasswordModal'; +import { SessionSeedModal } from './SessionSeedModal'; + +export const ModalContainer = () => { + const confirmModalState = useSelector(getConfirmModal); + const inviteModalState = useSelector(getInviteContactModal); + const addModeratorsModalState = useSelector(getAddModeratorsModal); + const removeModeratorsModalState = useSelector(getRemoveModeratorsModal); + const updateGroupMembersModalState = useSelector(getUpdateGroupMembersModal); + const updateGroupNameModalState = useSelector(getUpdateGroupNameModal); + const userDetailsModalState = useSelector(getUserDetailsModal); + const changeNicknameModal = useSelector(getChangeNickNameDialog); + const editProfileModalState = useSelector(getEditProfileDialog); + const onionPathModalState = useSelector(getOnionPathDialog); + const recoveryPhraseModalState = useSelector(getRecoveryPhraseDialog); + const adminLeaveClosedGroupModalState = useSelector(getAdminLeaveClosedGroupDialog); + const sessionPasswordModalState = useSelector(getSessionPasswordDialog); + + return ( + <> + {confirmModalState && } + {inviteModalState && } + {addModeratorsModalState && } + {removeModeratorsModalState && } + {updateGroupMembersModalState && ( + + )} + {updateGroupNameModalState && } + {userDetailsModalState && } + {changeNicknameModal && } + {editProfileModalState && } + {onionPathModalState && } + {recoveryPhraseModalState && } + {adminLeaveClosedGroupModalState && ( + + )} + {sessionPasswordModalState && } + + ); +}; diff --git a/ts/components/session/SessionPasswordModal.tsx b/ts/components/session/SessionPasswordModal.tsx index 54ce013ec..8e6c0777e 100644 --- a/ts/components/session/SessionPasswordModal.tsx +++ b/ts/components/session/SessionPasswordModal.tsx @@ -1,25 +1,19 @@ import React from 'react'; -import { SessionModal } from './SessionModal'; import { SessionButton, SessionButtonColor } from './SessionButton'; import { missingCaseError, PasswordUtil } from '../../util/'; import { ToastUtils } from '../../session/utils'; import { SessionIconType } from './icon'; -import { DefaultTheme, withTheme } from 'styled-components'; import { getPasswordHash } from '../../data/data'; import { SessionWrapperModal } from './SessionWrapperModal'; import { SpacerLG, SpacerSM } from '../basic/Text'; -export enum PasswordAction { - Set = 'set', - Change = 'change', - Remove = 'remove', -} +import autoBind from 'auto-bind'; +import { sessionPassword } from '../../state/ducks/modalDialog'; +export type PasswordAction = 'set' | 'change' | 'remove'; interface Props { - action: PasswordAction; - onOk: any; - onClose: any; - theme: DefaultTheme; + passwordAction: PasswordAction; + onOk: () => void; } interface State { @@ -29,7 +23,7 @@ interface State { currentPasswordRetypeEntered: string | null; } -class SessionPasswordModalInner extends React.Component { +export class SessionPasswordModal extends React.Component { private passportInput: HTMLInputElement | null = null; constructor(props: any) { @@ -42,14 +36,7 @@ class SessionPasswordModalInner extends React.Component { currentPasswordRetypeEntered: null, }; - this.showError = this.showError.bind(this); - - this.setPassword = this.setPassword.bind(this); - this.closeDialog = this.closeDialog.bind(this); - - this.onPasswordInput = this.onPasswordInput.bind(this); - this.onPasswordConfirmInput = this.onPasswordConfirmInput.bind(this); - this.onPasswordRetypeInput = this.onPasswordRetypeInput.bind(this); + autoBind(this); } public componentDidMount() { @@ -60,9 +47,9 @@ class SessionPasswordModalInner extends React.Component { } public render() { - const { action, onOk } = this.props; + const { passwordAction } = this.props; const placeholders = - action === PasswordAction.Change + passwordAction === 'change' ? [ window.i18n('typeInOldPassword'), window.i18n('enterPassword'), @@ -71,10 +58,13 @@ class SessionPasswordModalInner extends React.Component { : [window.i18n('enterPassword'), window.i18n('confirmPassword')]; const confirmButtonColor = - action === PasswordAction.Remove ? SessionButtonColor.Danger : SessionButtonColor.Primary; + passwordAction === 'remove' ? SessionButtonColor.Danger : SessionButtonColor.Primary; return ( - +
@@ -87,7 +77,7 @@ class SessionPasswordModalInner extends React.Component { placeholder={placeholders[0]} onKeyUp={this.onPasswordInput} /> - {action !== PasswordAction.Remove && ( + {passwordAction !== 'remove' && ( { onKeyUp={this.onPasswordConfirmInput} /> )} - {action === PasswordAction.Change && ( + {passwordAction === 'change' && ( { SessionIconType.Lock ); - this.props.onOk(this.props.action); + this.props.onOk(); this.closeDialog(); } @@ -222,7 +212,7 @@ class SessionPasswordModalInner extends React.Component { SessionIconType.Lock ); - this.props.onOk(this.props.action); + this.props.onOk(); this.closeDialog(); } @@ -243,31 +233,30 @@ class SessionPasswordModalInner extends React.Component { window.i18n('removePasswordToastDescription') ); - this.props.onOk(this.props.action); + this.props.onOk(); this.closeDialog(); } // tslint:disable-next-line: cyclomatic-complexity private async setPassword() { - const { action } = this.props; + const { passwordAction } = this.props; const { currentPasswordEntered, currentPasswordConfirmEntered, currentPasswordRetypeEntered, } = this.state; - const { Set, Remove, Change } = PasswordAction; // Trim leading / trailing whitespace for UX const firstPasswordEntered = (currentPasswordEntered || '').trim(); const secondPasswordEntered = (currentPasswordConfirmEntered || '').trim(); const thirdPasswordEntered = (currentPasswordRetypeEntered || '').trim(); - switch (action) { - case Set: { + switch (passwordAction) { + case 'set': { await this.handleActionSet(firstPasswordEntered, secondPasswordEntered); return; } - case Change: { + case 'change': { await this.handleActionChange( firstPasswordEntered, secondPasswordEntered, @@ -275,19 +264,17 @@ class SessionPasswordModalInner extends React.Component { ); return; } - case Remove: { + case 'remove': { await this.handleActionRemove(firstPasswordEntered); return; } default: - throw missingCaseError(action); + throw missingCaseError(passwordAction); } } private closeDialog() { - if (this.props.onClose) { - this.props.onClose(); - } + window.inboxStore?.dispatch(sessionPassword(null)); } private async onPasswordInput(event: any) { @@ -317,5 +304,3 @@ class SessionPasswordModalInner extends React.Component { this.setState({ currentPasswordRetypeEntered }); } } - -export const SessionPasswordModal = withTheme(SessionPasswordModalInner); diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index 40c431a6b..dca24b74a 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -33,15 +33,9 @@ import { SessionMemberListItem } from '../SessionMemberListItem'; import autoBind from 'auto-bind'; import { SectionType } from '../ActionsPanel'; import { SessionSettingCategory } from '../settings/SessionSettings'; -import { - defaultMentionsInputReducer, - updateMentionsMembers, -} from '../../../state/ducks/mentionsInput'; import { getMentionsInput } from '../../../state/selectors/mentionsInput'; -import { useDispatch } from 'react-redux'; import { updateConfirmModal } from '../../../state/ducks/modalDialog'; import { SessionButtonColor } from '../SessionButton'; -import { any } from 'underscore'; import { SessionConfirmDialogProps } from '../SessionConfirm'; export interface ReplyingToMessageProps { @@ -93,7 +87,6 @@ interface Props { showLeftPaneSection: (section: SectionType) => void; showSettingsSection: (category: SessionSettingCategory) => void; theme: DefaultTheme; - updateConfirmModal: (props: SessionConfirmDialogProps) => any; } interface State { @@ -247,15 +240,17 @@ export class SessionCompositionBox extends React.Component { private showLinkSharingConfirmationModalDialog(e: any) { const pastedText = e.clipboardData.getData('text'); if (this.isURL(pastedText)) { - this.props.updateConfirmModal({ - shouldShowConfirm: () => !window.getSettingValue('link-preview-setting'), - title: window.i18n('linkPreviewsTitle'), - message: window.i18n('linkPreviewsConfirmMessage'), - okTheme: SessionButtonColor.Danger, - onClickOk: () => { - window.setSettingValue('link-preview-setting', true); - }, - }); + window.inboxStore?.dispatch( + updateConfirmModal({ + shouldShowConfirm: () => !window.getSettingValue('link-preview-setting'), + title: window.i18n('linkPreviewsTitle'), + message: window.i18n('linkPreviewsConfirmMessage'), + okTheme: SessionButtonColor.Danger, + onClickOk: () => { + window.setSettingValue('link-preview-setting', true); + }, + }) + ); } } diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index 55b01dae2..c599965a5 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -304,7 +304,6 @@ export class SessionConversation extends React.Component { removeAttachment={this.removeAttachment} onChoseAttachments={this.onChoseAttachments} theme={this.props.theme} - updateConfirmModal={actions.updateConfirmModal} />
diff --git a/ts/components/session/settings/SessionSettings.tsx b/ts/components/session/settings/SessionSettings.tsx index 2d3edaa94..772e8204c 100644 --- a/ts/components/session/settings/SessionSettings.tsx +++ b/ts/components/session/settings/SessionSettings.tsx @@ -13,10 +13,11 @@ import { connect } from 'react-redux'; import { getPasswordHash } from '../../../../ts/data/data'; import { SpacerLG, SpacerXS } from '../../basic/Text'; import { shell } from 'electron'; -import { PasswordAction, SessionPasswordModal } from '../SessionPasswordModal'; import { SessionConfirmDialogProps } from '../SessionConfirm'; import { mapDispatchToProps } from '../../../state/actions'; import { unblockConvoById } from '../../../interactions/conversationInteractions'; +import { sessionPassword } from '../../../state/ducks/modalDialog'; +import { PasswordAction } from '../SessionPasswordModal'; export enum SessionSettingCategory { Appearance = 'appearance', @@ -47,7 +48,6 @@ interface State { pwdLockError: string | null; mediaSetting: boolean | null; shouldLockSettings: boolean | null; - modal: JSX.Element | null; } interface ConfirmationDialogParams extends SessionConfirmDialogProps { @@ -80,7 +80,6 @@ class SettingsViewInner extends React.Component { pwdLockError: null, mediaSetting: null, shouldLockSettings: true, - modal: null, }; this.settingsViewRef = React.createRef(); @@ -174,12 +173,8 @@ class SettingsViewInner extends React.Component {

{window.i18n('password')}

- {this.state.pwdLockError && ( - <> -
{this.state.pwdLockError}
- - +
{this.state.pwdLockError}
)} { categoryTitle={window.i18n(`${category}SettingsTitle`)} /> - {this.state.modal ? this.state.modal : null} -
{shouldRenderPasswordLock ? ( this.renderPasswordLock() @@ -512,7 +505,7 @@ class SettingsViewInner extends React.Component { buttonColor: SessionButtonColor.Primary, }, onClick: () => { - this.displayPasswordModal(PasswordAction.Set); + this.displayPasswordModal('set'); }, confirmationDialogParams: undefined, }, @@ -530,7 +523,7 @@ class SettingsViewInner extends React.Component { buttonColor: SessionButtonColor.Primary, }, onClick: () => { - this.displayPasswordModal(PasswordAction.Change); + this.displayPasswordModal('change'); }, confirmationDialogParams: undefined, }, @@ -548,7 +541,7 @@ class SettingsViewInner extends React.Component { buttonColor: SessionButtonColor.Danger, }, onClick: () => { - this.displayPasswordModal(PasswordAction.Remove); + this.displayPasswordModal('remove'); }, confirmationDialogParams: undefined, }, @@ -556,25 +549,14 @@ class SettingsViewInner extends React.Component { } private displayPasswordModal(passwordAction: PasswordAction) { - this.setState({ - ...this.state, - modal: ( - { - this.clearModal(); - }} - onOk={this.onPasswordUpdated} - action={passwordAction} - /> - ), - }); - } - - private clearModal(): void { - this.setState({ - ...this.state, - modal: null, - }); + window.inboxStore?.dispatch( + sessionPassword({ + passwordAction, + onOk: () => { + this.onPasswordUpdated(passwordAction); + }, + }) + ); } private getBlockedUserSettings(): Array { diff --git a/ts/state/ducks/modalDialog.tsx b/ts/state/ducks/modalDialog.tsx index 9fba3bfa8..91ce81173 100644 --- a/ts/state/ducks/modalDialog.tsx +++ b/ts/state/ducks/modalDialog.tsx @@ -1,5 +1,6 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { SessionConfirmDialogProps } from '../../components/session/SessionConfirm'; +import { PasswordAction } from '../../components/session/SessionPasswordModal'; export type ConfirmModalState = SessionConfirmDialogProps | null; export type InviteContactModalState = { conversationId: string } | null; @@ -13,6 +14,8 @@ export type EditProfileModalState = {} | null; export type OnionPathModalState = EditProfileModalState; export type RecoveryPhraseModalState = EditProfileModalState; +export type SessionPasswordModalState = { passwordAction: PasswordAction; onOk: () => void } | null; + export type UserDetailsModalState = { conversationId: string; authorAvatarPath?: string; @@ -32,6 +35,7 @@ export type ModalState = { onionPathModal: OnionPathModalState; recoveryPhraseModal: RecoveryPhraseModalState; adminLeaveClosedGroup: AdminLeaveClosedGroupModalState; + sessionPasswordModal: SessionPasswordModalState; }; export const initialModalState: ModalState = { @@ -47,6 +51,7 @@ export const initialModalState: ModalState = { onionPathModal: null, recoveryPhraseModal: null, adminLeaveClosedGroup: null, + sessionPasswordModal: null, }; const ModalSlice = createSlice({ @@ -89,6 +94,9 @@ const ModalSlice = createSlice({ adminLeaveClosedGroup(state, action: PayloadAction) { return { ...state, adminLeaveClosedGroup: action.payload }; }, + sessionPassword(state, action: PayloadAction) { + return { ...state, sessionPasswordModal: action.payload }; + }, }, }); @@ -106,5 +114,6 @@ export const { onionPathModal, recoveryPhraseModal, adminLeaveClosedGroup, + sessionPassword, } = actions; export const modalReducer = reducer; diff --git a/ts/state/selectors/modal.ts b/ts/state/selectors/modal.ts index 769b18e23..ec3f765a8 100644 --- a/ts/state/selectors/modal.ts +++ b/ts/state/selectors/modal.ts @@ -12,6 +12,7 @@ import { OnionPathModalState, RecoveryPhraseModalState, RemoveModeratorsModalState, + SessionPasswordModalState, UpdateGroupMembersModalState, UpdateGroupNameModalState, UserDetailsModalState, @@ -80,3 +81,8 @@ export const getAdminLeaveClosedGroupDialog = createSelector( getModal, (state: ModalState): AdminLeaveClosedGroupModalState => state.adminLeaveClosedGroup ); + +export const getSessionPasswordDialog = createSelector( + getModal, + (state: ModalState): SessionPasswordModalState => state.sessionPasswordModal +); From 54f06cca1b3f703a98341563edf69e3b220e46c3 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Thu, 24 Jun 2021 11:01:03 +1000 Subject: [PATCH 5/9] disable editing of open group name --- ts/components/conversation/UpdateGroupNameDialog.tsx | 2 +- ts/components/session/menu/Menu.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/ts/components/conversation/UpdateGroupNameDialog.tsx b/ts/components/conversation/UpdateGroupNameDialog.tsx index 1109f80bf..5547b57bf 100644 --- a/ts/components/conversation/UpdateGroupNameDialog.tsx +++ b/ts/components/conversation/UpdateGroupNameDialog.tsx @@ -78,7 +78,7 @@ export class UpdateGroupNameDialog extends React.Component { ); const isAdmin = this.convo.isPublic() - ? this.convo.isAdmin(window.storage.get('primaryDevicePubKey')) + ? false // disable editing of opengroup rooms as we don't handle them for now : true; return ( diff --git a/ts/components/session/menu/Menu.tsx b/ts/components/session/menu/Menu.tsx index 09519cf9c..33a77b4b6 100644 --- a/ts/components/session/menu/Menu.tsx +++ b/ts/components/session/menu/Menu.tsx @@ -10,7 +10,6 @@ import { updateConfirmModal, } from '../../../state/ducks/modalDialog'; import { ConversationController } from '../../../session/conversations'; -import { UserUtils } from '../../../session/utils'; import { blockConvoById, clearNickNameByConvoId, From 34681210e3f66565dac46caa218bd2c4b9028c21 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Thu, 24 Jun 2021 11:03:16 +1000 Subject: [PATCH 6/9] bump package.json to 1.6.6 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 40d2ae106..258ec57cd 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "session-desktop", "productName": "Session", "description": "Private messaging from your desktop", - "version": "1.6.5", + "version": "1.6.6", "license": "GPL-3.0", "author": { "name": "Loki Project", From 27b4ac283f2ffa479883cf84aeebbdf3a77e02ff Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Thu, 24 Jun 2021 11:13:11 +1000 Subject: [PATCH 7/9] render spinner onion path dialog if no path --- ts/components/OnionStatusDialog.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/ts/components/OnionStatusDialog.tsx b/ts/components/OnionStatusDialog.tsx index 776e3dd17..7d3b250e5 100644 --- a/ts/components/OnionStatusDialog.tsx +++ b/ts/components/OnionStatusDialog.tsx @@ -26,6 +26,7 @@ import { // tslint:disable-next-line: no-submodule-imports import useNetworkState from 'react-use/lib/useNetworkState'; +import { SessionSpinner } from './session/SessionSpinner'; export type StatusLightType = { glowStartDelay: number; @@ -38,6 +39,10 @@ const OnionPathModalInner = () => { // including the device and destination in calculation const glowDuration = onionPath.length + 2; + if (!onionPath) { + return + } + const nodes = [ { label: window.i18n('device'), From d7eb0d5af11ef5253ff54df8162d377dee735dee Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Thu, 24 Jun 2021 11:15:44 +1000 Subject: [PATCH 8/9] lint --- ts/components/OnionStatusDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/components/OnionStatusDialog.tsx b/ts/components/OnionStatusDialog.tsx index 7d3b250e5..f927f2fe8 100644 --- a/ts/components/OnionStatusDialog.tsx +++ b/ts/components/OnionStatusDialog.tsx @@ -40,7 +40,7 @@ const OnionPathModalInner = () => { const glowDuration = onionPath.length + 2; if (!onionPath) { - return + return ; } const nodes = [ From 7fadfac7dcc7fdeb1bed4243b61b77781f2d62e5 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Thu, 24 Jun 2021 12:59:34 +1000 Subject: [PATCH 9/9] fix spinner for onion path loading dialog --- .../{OnionStatusDialog.tsx => OnionStatusPathDialog.tsx} | 6 +++--- ts/components/session/ActionsPanel.tsx | 2 +- ts/components/session/ModalContainer.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) rename ts/components/{OnionStatusDialog.tsx => OnionStatusPathDialog.tsx} (96%) diff --git a/ts/components/OnionStatusDialog.tsx b/ts/components/OnionStatusPathDialog.tsx similarity index 96% rename from ts/components/OnionStatusDialog.tsx rename to ts/components/OnionStatusPathDialog.tsx index f927f2fe8..bfdbc88c3 100644 --- a/ts/components/OnionStatusDialog.tsx +++ b/ts/components/OnionStatusPathDialog.tsx @@ -11,7 +11,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { StateType } from '../state/reducer'; import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from './session/icon'; -import { SessionWrapperModal } from '../components/session/SessionWrapperModal'; +import { SessionWrapperModal } from './session/SessionWrapperModal'; import ip2country from 'ip2country'; import countryLookup from 'country-code-lookup'; @@ -38,8 +38,8 @@ const OnionPathModalInner = () => { const onionPath = useSelector(getFirstOnionPath); // including the device and destination in calculation const glowDuration = onionPath.length + 2; - - if (!onionPath) { + console.warn('onionPath', onionPath); + if (!onionPath || onionPath.length === 0) { return ; } diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx index 45910298b..62dc37126 100644 --- a/ts/components/session/ActionsPanel.tsx +++ b/ts/components/session/ActionsPanel.tsx @@ -45,7 +45,7 @@ import { FSv2 } from '../../fileserver'; import { debounce } from 'lodash'; import { DURATION } from '../../session/constants'; import { actions as conversationActions } from '../../state/ducks/conversations'; -import { ActionPanelOnionStatusLight, OnionPathModal } from '../OnionStatusDialog'; +import { ActionPanelOnionStatusLight, OnionPathModal } from '../OnionStatusPathDialog'; import { EditProfileDialog } from '../EditProfileDialog'; import { SessionConfirm } from './SessionConfirm'; import { diff --git a/ts/components/session/ModalContainer.tsx b/ts/components/session/ModalContainer.tsx index 5560a7617..a5dfe0a21 100644 --- a/ts/components/session/ModalContainer.tsx +++ b/ts/components/session/ModalContainer.tsx @@ -22,7 +22,7 @@ import { RemoveModeratorsDialog } from '../conversation/ModeratorsRemoveDialog'; import { UpdateGroupMembersDialog } from '../conversation/UpdateGroupMembersDialog'; import { UpdateGroupNameDialog } from '../conversation/UpdateGroupNameDialog'; import { EditProfileDialog } from '../EditProfileDialog'; -import { OnionPathModal } from '../OnionStatusDialog'; +import { OnionPathModal } from '../OnionStatusPathDialog'; import { UserDetailsDialog } from '../UserDetailsDialog'; import { SessionConfirm } from './SessionConfirm'; import { SessionNicknameDialog } from './SessionNicknameDialog';