Merge remote-tracking branch 'upstream/clearnet' into perf-improv

_locales/en/messages.json

@@ -414,5 +414,7 @@
   "unpinConversation": "Unpin Conversation",
   "pinConversationLimitTitle": "Pinned conversations limit",
   "pinConversationLimitToastDescription": "You can only pin $number$ conversations",
-  "latestUnreadIsAbove": "First unread message is above"
+  "latestUnreadIsAbove": "First unread message is above",
+  "sendRecoveryPhraseTitle": "Sending Recovery Phrase",
+  "sendRecoveryPhraseMessage": "You are attempting to send your recovery phrase which can be used to access your account. Are you sure you want to send this message?"
 }

ts/components/conversation/InviteContactsDialog.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 
-import { SessionModal } from '../session/SessionModal';
 import { SessionButton, SessionButtonColor } from '../session/SessionButton';
 import { ContactType, SessionMemberListItem } from '../session/SessionMemberListItem';
-import { DefaultTheme, useTheme } from 'styled-components';
+import { useTheme } from 'styled-components';
 import { getConversationController } from '../../session/conversations';
 import { ToastUtils, UserUtils } from '../../session/utils';
 import { initiateGroupUpdate } from '../../session/group';

ts/components/conversation/ModeratorsAddDialog.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
 import { PubKey } from '../../session/types';
 import { ToastUtils } from '../../session/utils';
-import { DefaultTheme, useTheme } from 'styled-components';
+import { useTheme } from 'styled-components';
 import { SessionSpinner } from '../session/SessionSpinner';
 import { Flex } from '../basic/Flex';
 import { ApiV2 } from '../../opengroup/opengroupV2';
@@ -19,7 +19,6 @@ type Props = {
 export const AddModeratorsDialog = (props: Props) => {
   const { conversationId } = props;
 
-  const theme = useTheme();
   const dispatch = useDispatch();
   const convo = getConversationController().get(conversationId);
 

ts/components/conversation/ModeratorsRemoveDialog.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-import { DefaultTheme } from 'styled-components';
-import { ConversationModel } from '../../models/conversation';
 import { ApiV2 } from '../../opengroup/opengroupV2';
 import { getConversationController } from '../../session/conversations';
 import { PubKey } from '../../session/types';
@@ -8,7 +6,6 @@ import { ToastUtils } from '../../session/utils';
 import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
 import { ContactType, SessionMemberListItem } from '../session/SessionMemberListItem';
-import { SessionModal } from '../session/SessionModal';
 import { SessionSpinner } from '../session/SessionSpinner';
 import _ from 'lodash';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';

ts/components/session/SessionConfirm.tsx

@@ -1,13 +1,10 @@
 import React, { useState } from 'react';
-import { SessionModal } from './SessionModal';
 import { SessionButton, SessionButtonColor } from './SessionButton';
 import { SessionHtmlRenderer } from './SessionHTMLRenderer';
 import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
 import { DefaultTheme, useTheme, withTheme } from 'styled-components';
 import { SessionWrapperModal } from './SessionWrapperModal';
-import { useDispatch } from 'react-redux';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
-import { update } from 'lodash';
 import { SpacerLG } from '../basic/Text';
 import { SessionSpinner } from './SessionSpinner';
 

ts/components/session/SessionSeedModal.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
-import { SessionModal } from './SessionModal';
 import { SessionButton } from './SessionButton';
 import { ToastUtils, UserUtils } from '../../session/utils';
-import { DefaultTheme, withTheme } from 'styled-components';
+import { withTheme } from 'styled-components';
 import { PasswordUtil } from '../../util';
 import { getPasswordHash } from '../../data/data';
 import { QRCode } from 'react-qr-svg';

ts/components/session/SessionWrapperModal.tsx

@@ -1,34 +1,13 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
 
 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/';
-import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton';
-import { DefaultTheme, useTheme } from 'styled-components';
+import { SessionButton } from './SessionButton';
+import { useTheme } from 'styled-components';
 
 // tslint:disable-next-line: no-submodule-imports
 import useKey from 'react-use/lib/useKey';
 
-type Props = {
-  title: string;
-  onClose: any;
-  showExitIcon?: boolean;
-  showHeader?: boolean;
-  headerReverse?: boolean;
-  //Maximum of two icons or buttons in header
-  headerIconButtons?: Array<{
-    iconType: SessionIconType;
-    iconRotation: number;
-    onClick?: any;
-  }>;
-  headerButtons?: Array<{
-    buttonType: SessionButtonType;
-    buttonColor: SessionButtonColor;
-    text: string;
-    onClick?: any;
-  }>;
-  theme: DefaultTheme;
-};
-
 export type SessionWrapperModalType = {
   title?: string;
   showHeader?: boolean;
@@ -79,10 +58,28 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
     [props.onClose]
   );
 
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const handleClick = (e: any) => {
+    if (!modalRef.current?.contains(e.target)) {
+      props.onClose?.();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, []);
+
   return (
-    <div className={`loki-dialog modal ${additionalClassName}`}>
+    <div
+      className={classNames('loki-dialog modal', additionalClassName ? additionalClassName : null)}
+    >
       <div className="session-confirm-wrapper">
-        <div className="session-modal">
+        <div ref={modalRef} className="session-modal">
           {showHeader ? (
             <div className={classNames('session-modal__header', headerReverse && 'reverse')}>
               <div className="session-modal__header__close">

ts/components/session/conversation/SessionConversation.tsx

@@ -15,7 +15,7 @@ import { SessionMessagesListContainer } from './SessionMessagesListContainer';
 import { LightboxGallery, MediaItemType } from '../../LightboxGallery';
 
 import { AttachmentType, AttachmentTypeWithPath, save } from '../../../types/Attachment';
-import { ToastUtils } from '../../../session/utils';
+import { ToastUtils, UserUtils } from '../../../session/utils';
 import * as MIME from '../../../types/MIME';
 import { SessionFileDropzone } from './SessionFileDropzone';
 import {
@@ -37,12 +37,14 @@ import {
   isFirstUnreadMessageIdAbove,
 } from '../../../state/selectors/conversations';
 
+import { SessionButtonColor } from '../SessionButton';
+import { updateConfirmModal } from '../../../state/ducks/modalDialog';
+
 interface State {
   showRecordingView: boolean;
   stagedAttachments: Array<StagedAttachmentType>;
   isDraggingFile: boolean;
 }
-
 export interface LightBoxOptions {
   media: Array<MediaItemType>;
   attachment: AttachmentTypeWithPath;
@@ -211,12 +213,35 @@ export class SessionConversation extends React.Component<Props, State> {
       if (!conversationModel) {
         return;
       }
-      void conversationModel.sendMessage(body, attachments, quote, preview, groupInvitation);
-      if (this.messageContainerRef.current) {
-        // force scrolling to bottom on message sent
-        // this will mark all messages as read, and reset the conversation unreadCount
-        (this.messageContainerRef
-          .current as any).scrollTop = this.messageContainerRef.current?.scrollHeight;
+
+      const sendAndScroll = () => {
+        void conversationModel.sendMessage(body, attachments, quote, preview, groupInvitation);
+        if (this.messageContainerRef.current) {
+          (this.messageContainerRef
+            .current as any).scrollTop = this.messageContainerRef.current?.scrollHeight;
+        }
+      };
+
+      // const recoveryPhrase = window.textsecure.storage.get('mnemonic');
+      const recoveryPhrase = UserUtils.getCurrentRecoveryPhrase();
+
+      // string replace to fix case where pasted text contains invis characters causing false negatives
+      if (body.replace(/\s/g, '').includes(recoveryPhrase.replace(/\s/g, ''))) {
+        window.inboxStore?.dispatch(
+          updateConfirmModal({
+            title: window.i18n('sendRecoveryPhraseTitle'),
+            message: window.i18n('sendRecoveryPhraseMessage'),
+            okTheme: SessionButtonColor.Danger,
+            onClickOk: () => {
+              sendAndScroll();
+            },
+            onClickClose: () => {
+              window.inboxStore?.dispatch(updateConfirmModal(null));
+            },
+          })
+        );
+      } else {
+        sendAndScroll();
       }
 
       window.inboxStore?.dispatch(quoteMessage(undefined));