From 973df5d245afbc12d045d67e3205d8718ff5f284 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 20 Jul 2021 14:46:19 +1000 Subject: [PATCH 1/6] clicking outside of confirmation modal body closes confirmation modal. --- ts/components/session/SessionConfirm.tsx | 3 - ts/components/session/SessionWrapperModal.tsx | 78 ++++++++++--------- 2 files changed, 42 insertions(+), 39 deletions(-) diff --git a/ts/components/session/SessionConfirm.tsx b/ts/components/session/SessionConfirm.tsx index 190c11632..3fc51d325 100644 --- a/ts/components/session/SessionConfirm.tsx +++ b/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'; diff --git a/ts/components/session/SessionWrapperModal.tsx b/ts/components/session/SessionWrapperModal.tsx index bc0abea83..8a706725b 100644 --- a/ts/components/session/SessionWrapperModal.tsx +++ b/ts/components/session/SessionWrapperModal.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useRef } from 'react'; import classNames from 'classnames'; import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/'; @@ -7,27 +7,7 @@ import { DefaultTheme, 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; -}; +import { nodeName } from 'jquery'; export type SessionWrapperModalType = { title?: string; @@ -79,10 +59,36 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => { [props.onClose] ); + const modalRef = useRef(null); + + const handleClick = (e: any) => { + if (!modalRef.current?.contains(e.target)) { + console.log('clicked outside of modal'); + props.onClose?.(); + } + } + + useEffect(() => { + // on mount + document.addEventListener("mousedown", handleClick); + + // unmount + return () => { + document.removeEventListener("mousedown", handleClick); + } + }, []) + return ( -
-
-
+
+
+
{showHeader ? (
@@ -99,17 +105,17 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
{headerIconButtons ? headerIconButtons.map((iconItem: any) => { - return ( - - ); - }) + return ( + + ); + }) : null}
From 3fca7ef4de978cc0f1af783d8616328834c699ae Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 20 Jul 2021 14:47:57 +1000 Subject: [PATCH 2/6] remove unused imports. --- ts/components/session/SessionWrapperModal.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/ts/components/session/SessionWrapperModal.tsx b/ts/components/session/SessionWrapperModal.tsx index 8a706725b..09bb4c60c 100644 --- a/ts/components/session/SessionWrapperModal.tsx +++ b/ts/components/session/SessionWrapperModal.tsx @@ -2,12 +2,11 @@ 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'; -import { nodeName } from 'jquery'; export type SessionWrapperModalType = { title?: string; @@ -69,10 +68,8 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => { } useEffect(() => { - // on mount document.addEventListener("mousedown", handleClick); - // unmount return () => { document.removeEventListener("mousedown", handleClick); } From 28924a63bb64bcb4d482a05116bc156fbf081556 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 20 Jul 2021 15:03:30 +1000 Subject: [PATCH 3/6] removing some unusued imports. --- ts/components/conversation/InviteContactsDialog.tsx | 3 +-- ts/components/conversation/ModeratorsAddDialog.tsx | 3 +-- ts/components/conversation/ModeratorsRemoveDialog.tsx | 3 --- ts/components/session/SessionWrapperModal.tsx | 1 - 4 files changed, 2 insertions(+), 8 deletions(-) diff --git a/ts/components/conversation/InviteContactsDialog.tsx b/ts/components/conversation/InviteContactsDialog.tsx index b8e3848fa..a566e06e6 100644 --- a/ts/components/conversation/InviteContactsDialog.tsx +++ b/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'; diff --git a/ts/components/conversation/ModeratorsAddDialog.tsx b/ts/components/conversation/ModeratorsAddDialog.tsx index 5a4649d94..07d6aac5b 100644 --- a/ts/components/conversation/ModeratorsAddDialog.tsx +++ b/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); diff --git a/ts/components/conversation/ModeratorsRemoveDialog.tsx b/ts/components/conversation/ModeratorsRemoveDialog.tsx index 30d6d10d3..2bf51fa5c 100644 --- a/ts/components/conversation/ModeratorsRemoveDialog.tsx +++ b/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'; diff --git a/ts/components/session/SessionWrapperModal.tsx b/ts/components/session/SessionWrapperModal.tsx index 09bb4c60c..462e9cc5d 100644 --- a/ts/components/session/SessionWrapperModal.tsx +++ b/ts/components/session/SessionWrapperModal.tsx @@ -62,7 +62,6 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => { const handleClick = (e: any) => { if (!modalRef.current?.contains(e.target)) { - console.log('clicked outside of modal'); props.onClose?.(); } } From ca4dec9fda7a0fc2cc25d2b09dc200ab1d6ec786 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 20 Jul 2021 15:23:48 +1000 Subject: [PATCH 4/6] linting, formatting, testing --- ts/components/session/SessionWrapperModal.tsx | 45 +++++++++---------- 1 file changed, 20 insertions(+), 25 deletions(-) diff --git a/ts/components/session/SessionWrapperModal.tsx b/ts/components/session/SessionWrapperModal.tsx index 462e9cc5d..611867f18 100644 --- a/ts/components/session/SessionWrapperModal.tsx +++ b/ts/components/session/SessionWrapperModal.tsx @@ -64,27 +64,22 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => { if (!modalRef.current?.contains(e.target)) { props.onClose?.(); } - } + }; useEffect(() => { - document.addEventListener("mousedown", handleClick); + document.addEventListener('mousedown', handleClick); return () => { - document.removeEventListener("mousedown", handleClick); - } - }, []) + document.removeEventListener('mousedown', handleClick); + }; + }, []); return (
-
-
+ className={classNames('loki-dialog modal', additionalClassName ? additionalClassName : null)} + > +
+
{showHeader ? (
@@ -101,17 +96,17 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
{headerIconButtons ? headerIconButtons.map((iconItem: any) => { - return ( - - ); - }) + return ( + + ); + }) : null}
From 966012016bbd367fbcd6b174a81d627a5f32b732 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Wed, 21 Jul 2021 12:22:03 +1000 Subject: [PATCH 5/6] Popup confirmation before sending a message containing the users recovery phrase. --- _locales/en/messages.json | 4 +- ts/components/session/SessionSeedModal.tsx | 3 +- ts/components/session/SessionWrapperModal.tsx | 45 +++++++++---------- .../conversation/SessionConversation.tsx | 36 ++++++++++++--- 4 files changed, 54 insertions(+), 34 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 5db95684d..843b74917 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -413,5 +413,7 @@ "pinConversation": "Pin Conversation", "unpinConversation": "Unpin Conversation", "pinConversationLimitTitle": "Pinned conversations limit", - "pinConversationLimitToastDescription": "You can only pin $number$ conversations" + "pinConversationLimitToastDescription": "You can only pin $number$ conversations", + "sendRecoveryPhraseTitle": "Sending Recovery Phrase", + "sendRecoveryPhraseMessage": "You are attempting send your recovery phrase which can be used to access your account. Are you sure you want to send this message?" } diff --git a/ts/components/session/SessionSeedModal.tsx b/ts/components/session/SessionSeedModal.tsx index 2ed5c820a..7e01ec1d4 100644 --- a/ts/components/session/SessionSeedModal.tsx +++ b/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'; diff --git a/ts/components/session/SessionWrapperModal.tsx b/ts/components/session/SessionWrapperModal.tsx index 462e9cc5d..611867f18 100644 --- a/ts/components/session/SessionWrapperModal.tsx +++ b/ts/components/session/SessionWrapperModal.tsx @@ -64,27 +64,22 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => { if (!modalRef.current?.contains(e.target)) { props.onClose?.(); } - } + }; useEffect(() => { - document.addEventListener("mousedown", handleClick); + document.addEventListener('mousedown', handleClick); return () => { - document.removeEventListener("mousedown", handleClick); - } - }, []) + document.removeEventListener('mousedown', handleClick); + }; + }, []); return (
-
-
+ className={classNames('loki-dialog modal', additionalClassName ? additionalClassName : null)} + > +
+
{showHeader ? (
@@ -101,17 +96,17 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
{headerIconButtons ? headerIconButtons.map((iconItem: any) => { - return ( - - ); - }) + return ( + + ); + }) : null}
diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index 82bdb317e..280cb6cd6 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -39,6 +39,7 @@ import { updateMentionsMembers } from '../../../state/ducks/mentionsInput'; import { sendDataExtractionNotification } from '../../../session/messages/outgoing/controlMessage/DataExtractionNotificationMessage'; import { SessionButtonColor } from '../SessionButton'; +import { updateConfirmModal } from '../../../state/ducks/modalDialog'; interface State { // Message sending progress messageProgressVisible: boolean; @@ -233,12 +234,35 @@ export class SessionConversation extends React.Component { 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(); } }; const showMessageDetails = !!messageDetailShowProps; From 6a536a4f60114f860e576ecc267fdfbed673b2ad Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Thu, 22 Jul 2021 16:49:10 +1000 Subject: [PATCH 6/6] grammar fix --- _locales/en/messages.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 843b74917..82bcac367 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -415,5 +415,5 @@ "pinConversationLimitTitle": "Pinned conversations limit", "pinConversationLimitToastDescription": "You can only pin $number$ conversations", "sendRecoveryPhraseTitle": "Sending Recovery Phrase", - "sendRecoveryPhraseMessage": "You are attempting send your recovery phrase which can be used to access your account. Are you sure you want to send this message?" + "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?" }