Merge pull request #1714 from Bilb/fix-dialogs

Fix dialogs

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",

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 <SessionSpinner loading={true} />
+  }
+
   const nodes = [
     {
       label: window.i18n('device'),

ts/components/conversation/UpdateGroupNameDialog.tsx

@@ -78,7 +78,7 @@ export class UpdateGroupNameDialog extends React.Component<Props, State> {
     );
 
     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 (

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 && <SessionConfirm {...confirmModalState} />}
-      {inviteModalState && <InviteContactsDialog {...inviteModalState} />}
-      {addModeratorsModalState && <AddModeratorsDialog {...addModeratorsModalState} />}
-      {removeModeratorsModalState && <RemoveModeratorsDialog {...removeModeratorsModalState} />}
-      {updateGroupMembersModalState && (
-        <UpdateGroupMembersDialog {...updateGroupMembersModalState} />
-      )}
-      {updateGroupNameModalState && <UpdateGroupNameDialog {...updateGroupNameModalState} />}
-      {userDetailsModalState && <UserDetailsDialog {...userDetailsModalState} />}
-      {changeNicknameModal && <SessionNicknameDialog {...changeNicknameModal} />}
-      {editProfileModalState && <EditProfileDialog {...editProfileModalState} />}
-      {onionPathModalState && <OnionPathModal {...onionPathModalState} />}
-      {recoveryPhraseModalState && <SessionSeedModal {...recoveryPhraseModalState} />}
-      {adminLeaveClosedGroupModalState && (
-        <AdminLeaveClosedGroupDialog {...adminLeaveClosedGroupModalState} />
-      )}
-    </>
-  );
-};
-
 /**
  * ActionsPanel is the far left banner (not the left pane).
  * The panel with buttons to switch between the message/contact/settings/theme views

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 && <SessionConfirm {...confirmModalState} />}
+      {inviteModalState && <InviteContactsDialog {...inviteModalState} />}
+      {addModeratorsModalState && <AddModeratorsDialog {...addModeratorsModalState} />}
+      {removeModeratorsModalState && <RemoveModeratorsDialog {...removeModeratorsModalState} />}
+      {updateGroupMembersModalState && (
+        <UpdateGroupMembersDialog {...updateGroupMembersModalState} />
+      )}
+      {updateGroupNameModalState && <UpdateGroupNameDialog {...updateGroupNameModalState} />}
+      {userDetailsModalState && <UserDetailsDialog {...userDetailsModalState} />}
+      {changeNicknameModal && <SessionNicknameDialog {...changeNicknameModal} />}
+      {editProfileModalState && <EditProfileDialog {...editProfileModalState} />}
+      {onionPathModalState && <OnionPathModal {...onionPathModalState} />}
+      {recoveryPhraseModalState && <SessionSeedModal {...recoveryPhraseModalState} />}
+      {adminLeaveClosedGroupModalState && (
+        <AdminLeaveClosedGroupDialog {...adminLeaveClosedGroupModalState} />
+      )}
+      {sessionPasswordModalState && <SessionPasswordModal {...sessionPasswordModalState} />}
+    </>
+  );
+};

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<Props, State> {
+export class SessionPasswordModal extends React.Component<Props, State> {
   private passportInput: HTMLInputElement | null = null;
 
   constructor(props: any) {
@@ -42,14 +36,7 @@ class SessionPasswordModalInner extends React.Component<Props, State> {
       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<Props, State> {
   }
 
   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<Props, State> {
         : [window.i18n('enterPassword'), window.i18n('confirmPassword')];
 
     const confirmButtonColor =
-      action === PasswordAction.Remove ? SessionButtonColor.Danger : SessionButtonColor.Primary;
+      passwordAction === 'remove' ? SessionButtonColor.Danger : SessionButtonColor.Primary;
 
     return (
-      <SessionWrapperModal title={window.i18n(`${action}Password`)} onClose={this.closeDialog}>
+      <SessionWrapperModal
+        title={window.i18n(`${passwordAction}Password`)}
+        onClose={this.closeDialog}
+      >
         <SpacerSM />
 
         <div className="session-modal__input-group">
@@ -87,7 +77,7 @@ class SessionPasswordModalInner extends React.Component<Props, State> {
             placeholder={placeholders[0]}
             onKeyUp={this.onPasswordInput}
           />
-          {action !== PasswordAction.Remove && (
+          {passwordAction !== 'remove' && (
             <input
               type="password"
               id="password-modal-input-confirm"
@@ -95,7 +85,7 @@ class SessionPasswordModalInner extends React.Component<Props, State> {
               onKeyUp={this.onPasswordConfirmInput}
             />
           )}
-          {action === PasswordAction.Change && (
+          {passwordAction === 'change' && (
             <input
               type="password"
               id="password-modal-input-reconfirm"
@@ -183,7 +173,7 @@ class SessionPasswordModalInner extends React.Component<Props, State> {
       SessionIconType.Lock
     );
 
-    this.props.onOk(this.props.action);
+    this.props.onOk();
     this.closeDialog();
   }
 
@@ -222,7 +212,7 @@ class SessionPasswordModalInner extends React.Component<Props, State> {
       SessionIconType.Lock
     );
 
-    this.props.onOk(this.props.action);
+    this.props.onOk();
     this.closeDialog();
   }
 
@@ -243,31 +233,30 @@ class SessionPasswordModalInner extends React.Component<Props, State> {
       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<Props, State> {
         );
         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<Props, State> {
     this.setState({ currentPasswordRetypeEntered });
   }
 }
-
-export const SessionPasswordModal = withTheme(SessionPasswordModalInner);

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<Props, State> {
   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);
+          },
+        })
+      );
     }
   }
 

ts/components/session/conversation/SessionConversation.tsx

@@ -304,7 +304,6 @@ export class SessionConversation extends React.Component<Props, State> {
             removeAttachment={this.removeAttachment}
             onChoseAttachments={this.onChoseAttachments}
             theme={this.props.theme}
-            updateConfirmModal={actions.updateConfirmModal}
           />
         </div>
 

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,

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<SettingsViewProps, State> {
       pwdLockError: null,
       mediaSetting: null,
       shouldLockSettings: true,
-      modal: null,
     };
 
     this.settingsViewRef = React.createRef();
@@ -174,12 +173,8 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
           <h3>{window.i18n('password')}</h3>
           <input type="password" id="password-lock-input" defaultValue="" placeholder="Password" />
 
-          <SpacerXS />
           {this.state.pwdLockError && (
-            <>
-              <div className="session-label warning">{this.state.pwdLockError}</div>
-              <SpacerLG />
-            </>
+            <div className="session-label warning">{this.state.pwdLockError}</div>
           )}
 
           <SessionButton
@@ -234,8 +229,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
           categoryTitle={window.i18n(`${category}SettingsTitle`)}
         />
 
-        {this.state.modal ? this.state.modal : null}
-
         <div className="session-settings-view">
           {shouldRenderPasswordLock ? (
             this.renderPasswordLock()
@@ -512,7 +505,7 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
           buttonColor: SessionButtonColor.Primary,
         },
         onClick: () => {
-          this.displayPasswordModal(PasswordAction.Set);
+          this.displayPasswordModal('set');
         },
         confirmationDialogParams: undefined,
       },
@@ -530,7 +523,7 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
           buttonColor: SessionButtonColor.Primary,
         },
         onClick: () => {
-          this.displayPasswordModal(PasswordAction.Change);
+          this.displayPasswordModal('change');
         },
         confirmationDialogParams: undefined,
       },
@@ -548,7 +541,7 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
           buttonColor: SessionButtonColor.Danger,
         },
         onClick: () => {
-          this.displayPasswordModal(PasswordAction.Remove);
+          this.displayPasswordModal('remove');
         },
         confirmationDialogParams: undefined,
       },
@@ -556,25 +549,14 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
   }
 
   private displayPasswordModal(passwordAction: PasswordAction) {
-    this.setState({
-      ...this.state,
-      modal: (
-        <SessionPasswordModal
-          onClose={() => {
-            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<LocalSettingType> {

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<AdminLeaveClosedGroupModalState | null>) {
       return { ...state, adminLeaveClosedGroup: action.payload };
     },
+    sessionPassword(state, action: PayloadAction<SessionPasswordModalState>) {
+      return { ...state, sessionPasswordModal: action.payload };
+    },
   },
 });
 
@@ -106,5 +114,6 @@ export const {
   onionPathModal,
   recoveryPhraseModal,
   adminLeaveClosedGroup,
+  sessionPassword,
 } = actions;
 export const modalReducer = reducer;

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
+);