refactored password change modal.

ts/components/session/LeftPaneSettingSection.tsx

@@ -108,13 +108,6 @@ const onDeleteAccount = ( setModal: any) => {
   const title = window.i18n('clearAllData');
   const message = window.i18n('deleteAccountWarning');
 
-  // window.confirmationDialog({
-  //   title,
-  //   message,
-  //   resolve: deleteAccount,
-  //   okTheme: 'danger',
-  // });
-
   const clearModal = () => {
     setModal(null);
   }

ts/components/session/SessionPasswordModal.tsx

@@ -7,6 +7,7 @@ import { ToastUtils } from '../../session/utils';
 import { SessionIconType } from './icon';
 import { DefaultTheme, withTheme } from 'styled-components';
 import { getPasswordHash } from '../../data/data';
+import { SessionWrapperModal } from './SessionWrapperModal';
 export enum PasswordAction {
   Set = 'set',
   Change = 'change',
@@ -72,7 +73,7 @@ class SessionPasswordModalInner extends React.Component<Props, State> {
       action === PasswordAction.Remove ? SessionButtonColor.Danger : SessionButtonColor.Primary;
 
     return (
-      <SessionModal
+      <SessionWrapperModal
         title={window.i18n(`${action}Password`)}
         onClose={this.closeDialog}
         theme={this.props.theme}
@@ -119,7 +120,7 @@ class SessionPasswordModalInner extends React.Component<Props, State> {
 
           <SessionButton text={window.i18n('cancel')} onClick={this.closeDialog} />
         </div>
-      </SessionModal>
+      </SessionWrapperModal>
     );
   }
 

ts/components/session/settings/SessionSettings.tsx

@@ -11,6 +11,8 @@ import { ConversationController } from '../../../session/conversations';
 import { getConversationLookup, getConversations } from '../../../state/selectors/conversations';
 import { connect } from 'react-redux';
 import { getPasswordHash } from '../../../../ts/data/data';
+import { PasswordAction, SessionPasswordModal } from '../SessionPasswordModal';
+import { ModalStatusLight } from '../../OnionStatusDialog';
 
 export enum SessionSettingCategory {
   Appearance = 'appearance',
@@ -40,6 +42,7 @@ interface State {
   pwdLockError: string | null;
   mediaSetting: boolean | null;
   shouldLockSettings: boolean | null;
+  modal: JSX.Element | null;
 }
 
 interface LocalSettingType {
@@ -68,6 +71,7 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
       pwdLockError: null,
       mediaSetting: null,
       shouldLockSettings: true,
+      modal: null
     };
 
     this.settingsViewRef = React.createRef();
@@ -221,6 +225,9 @@ 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()
@@ -479,10 +486,7 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
           buttonColor: SessionButtonColor.Primary,
         },
         onClick: () => {
-          window.Whisper.events.trigger('showPasswordDialog', {
+          this.displayPasswordModal(PasswordAction.Set);
-            action: 'set',
-            onSuccess: this.onPasswordUpdated,
-          });
         },
         confirmationDialogParams: undefined,
       },
@@ -500,10 +504,7 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
           buttonColor: SessionButtonColor.Primary,
         },
         onClick: () => {
-          window.Whisper.events.trigger('showPasswordDialog', {
+          this.displayPasswordModal(PasswordAction.Change);
-            action: 'change',
-            onSuccess: this.onPasswordUpdated,
-          });
         },
         confirmationDialogParams: undefined,
       },
@@ -521,16 +522,27 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
           buttonColor: SessionButtonColor.Danger,
         },
         onClick: () => {
-          window.Whisper.events.trigger('showPasswordDialog', {
+          this.displayPasswordModal(PasswordAction.Remove);
-            action: 'remove',
-            onSuccess: this.onPasswordUpdated,
-          });
         },
         confirmationDialogParams: undefined,
       },
     ];
   }
 
+  private displayPasswordModal(passwordAction: PasswordAction) {
+    this.setState({
+      ...this.state,
+      modal: <SessionPasswordModal onClose={() => this.clearModal()} onOk={this.onPasswordUpdated} action={passwordAction}></SessionPasswordModal>
+    })
+  }
+
+  private clearModal(): void {
+    this.setState({
+      ...this.state,
+      modal: null
+    });
+  }
+
   private getBlockedUserSettings(): Array<LocalSettingType> {
     const results: Array<LocalSettingType> = [];
     const blockedNumbers = BlockedNumberController.getBlockedNumbers();