Profile name spoofing dialog

This commit is contained in:
Evan Hahn 2021-04-21 11:31:12 -05:00 committed by Scott Nonnenberg
parent 814255c10e
commit e7ef3de6d0
21 changed files with 893 additions and 15 deletions

View File

@ -5164,5 +5164,35 @@
"ForwardMessageModal--continue": {
"message": "Continue",
"description": "aria-label for the 'next' button in the forward a message modal dialog"
},
"ContactSpoofing__same-name": {
"message": "Review requests carefully. Signal found another contact with the same name. $link$",
"description": "Shown in the timeline warning when you have a message request from someone with the same name as someone else",
"placeholders": {
"link": {
"content": "$1",
"example": "Review request"
}
}
},
"ContactSpoofing__same-name__link": {
"message": "Review request",
"description": "Shown in the timeline warning when you have a message request from someone with the same name as someone else"
},
"ContactSpoofingReviewDialog__title": {
"message": "Review request",
"description": "Title for the contact name spoofing review dialog"
},
"ContactSpoofingReviewDialog__description": {
"message": "If you're not sure who the request is from, review the contacts below and take action.",
"description": "Description for the contact spoofing review dialog"
},
"ContactSpoofingReviewDialog__possibly-unsafe-title": {
"message": "Request",
"description": "Header in the contact spoofing review dialog, shown above the potentially-unsafe user"
},
"ContactSpoofingReviewDialog__safe-title": {
"message": "Your contact",
"description": "Header in the contact spoofing review dialog, shown above the \"safe\" user"
}
}

View File

@ -0,0 +1,40 @@
.module-ContactSpoofingReviewDialog {
user-select: none;
p {
@include font-body-2;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-05;
}
}
h2 {
@include font-body-1-bold;
}
hr {
border: 0;
height: 1px;
margin: 16px 0;
@include light-theme {
background: $color-gray-05;
}
@include dark-theme {
background: $color-gray-90;
}
}
&__buttons {
margin-top: 8px;
.module-Button:not(:last-child) {
margin-right: 12px;
}
}
}

View File

@ -0,0 +1,27 @@
.module-ContactSpoofingReviewDialogPerson {
display: flex;
&:is(button) {
@include button-reset;
}
&__info {
margin-left: 12px;
&__contact-name {
@include font-body-1;
}
&__property {
@include font-body-2;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-05;
}
}
}
}

View File

@ -0,0 +1,76 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-TimelineWarning {
@mixin icon($icon) {
@include light-theme {
@include color-svg($icon, $color-gray-60);
}
@include dark-theme {
@include color-svg($icon, $color-gray-20);
}
}
align-items: center;
display: flex;
padding: 16px;
user-select: none;
border-top-width: 1px;
border-top-style: solid;
&:last-child {
border-bottom-width: 1px;
border-bottom-style: solid;
}
@include light-theme {
color: $color-gray-65;
background: $color-gray-02;
border-color: $color-gray-15;
}
@include dark-theme {
color: $color-gray-15;
background: $color-gray-80;
border-color: $color-gray-65;
}
&__generic-icon {
@include icon('../images/icons/v2/info-outline-24.svg');
width: 20px;
height: 20px;
}
&__text {
@include font-body-2;
flex-grow: 1;
margin-left: 12px;
margin-right: 12px;
&__link {
@include button-reset;
display: inline;
font-weight: bold;
text-decoration: none;
@include light-theme {
color: $ultramarine-brand-light;
}
@include dark-theme {
color: $color-ios-blue-tint;
}
}
}
&__close-button {
@include button-reset;
&::after {
@include icon('../images/icons/v2/x-24.svg');
content: '';
display: block;
height: 20px;
width: 20px;
}
}
}

View File

@ -0,0 +1,13 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-TimelineWarnings {
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
display: flex;
flex-direction: column;
}

View File

@ -32,6 +32,8 @@
@import './components/Button.scss';
@import './components/ContactPill.scss';
@import './components/ContactPills.scss';
@import './components/ContactSpoofingReviewDialog.scss';
@import './components/ContactSpoofingReviewDialogPerson.scss';
@import './components/ConversationHeader.scss';
@import './components/EditConversationAttributesModal.scss';
@import './components/ForwardMessageModal.scss';
@ -43,3 +45,5 @@
@import './components/SafetyNumberViewer.scss';
@import './components/SearchResultsLoadingFakeHeader.scss';
@import './components/SearchResultsLoadingFakeRow.scss';
@import './components/TimelineWarning.scss';
@import './components/TimelineWarnings.scss';

View File

@ -13,6 +13,7 @@ type PropsType = {
children: ReactNode;
hasXButton?: boolean;
i18n: LocalizerType;
moduleClassName?: string;
onClose?: () => void;
title?: ReactNode;
theme?: Theme;
@ -22,6 +23,7 @@ export function Modal({
children,
hasXButton,
i18n,
moduleClassName,
onClose = noop,
title,
theme,
@ -35,7 +37,8 @@ export function Modal({
<div
className={classNames(
'module-Modal',
hasHeader ? 'module-Modal--has-header' : 'module-Modal--no-header'
hasHeader ? 'module-Modal--has-header' : 'module-Modal--no-header',
moduleClassName
)}
>
{hasHeader && (

View File

@ -0,0 +1,32 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import { setup as setupI18n } from '../../../js/modules/i18n';
import enMessages from '../../../_locales/en/messages.json';
import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
import { ContactSpoofingReviewDialog } from './ContactSpoofingReviewDialog';
const i18n = setupI18n('en', enMessages);
const story = storiesOf(
'Components/Conversation/ContactSpoofingReviewDialog',
module
);
story.add('Default', () => (
<ContactSpoofingReviewDialog
i18n={i18n}
onBlock={action('onBlock')}
onBlockAndDelete={action('onBlockAndDelete')}
onClose={action('onClose')}
onDelete={action('onDelete')}
onShowContactModal={action('onShowContactModal')}
onUnblock={action('onUnblock')}
possiblyUnsafeConversation={getDefaultConversation()}
safeConversation={getDefaultConversation()}
/>
));

View File

@ -0,0 +1,117 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { FunctionComponent, useState } from 'react';
import { LocalizerType } from '../../types/Util';
import { ConversationType } from '../../state/ducks/conversations';
import {
MessageRequestActionsConfirmation,
MessageRequestState,
} from './MessageRequestActionsConfirmation';
import { Modal } from '../Modal';
import { ContactSpoofingReviewDialogPerson } from './ContactSpoofingReviewDialogPerson';
import { Button, ButtonVariant } from '../Button';
import { assert } from '../../util/assert';
type PropsType = {
i18n: LocalizerType;
onBlock: () => unknown;
onBlockAndDelete: () => unknown;
onClose: () => void;
onDelete: () => unknown;
onShowContactModal: (contactId: string) => unknown;
onUnblock: () => unknown;
possiblyUnsafeConversation: ConversationType;
safeConversation: ConversationType;
};
export const ContactSpoofingReviewDialog: FunctionComponent<PropsType> = ({
i18n,
onBlock,
onBlockAndDelete,
onClose,
onDelete,
onShowContactModal,
onUnblock,
possiblyUnsafeConversation,
safeConversation,
}) => {
assert(
possiblyUnsafeConversation.type === 'direct',
'<ContactSpoofingReviewDialog> expected a direct conversation for the "possibly unsafe" conversation'
);
assert(
safeConversation.type === 'direct',
'<ContactSpoofingReviewDialog> expected a direct conversation for the "safe" conversation'
);
const [messageRequestState, setMessageRequestState] = useState(
MessageRequestState.default
);
if (messageRequestState !== MessageRequestState.default) {
return (
<MessageRequestActionsConfirmation
i18n={i18n}
onBlock={onBlock}
onBlockAndDelete={onBlockAndDelete}
onUnblock={onUnblock}
onDelete={onDelete}
name={possiblyUnsafeConversation.name}
profileName={possiblyUnsafeConversation.profileName}
phoneNumber={possiblyUnsafeConversation.phoneNumber}
title={possiblyUnsafeConversation.title}
conversationType="direct"
state={messageRequestState}
onChangeState={setMessageRequestState}
/>
);
}
return (
<Modal
hasXButton
i18n={i18n}
moduleClassName="module-ContactSpoofingReviewDialog"
onClose={onClose}
title={i18n('ContactSpoofingReviewDialog__title')}
>
<p>{i18n('ContactSpoofingReviewDialog__description')}</p>
<h2>{i18n('ContactSpoofingReviewDialog__possibly-unsafe-title')}</h2>
<ContactSpoofingReviewDialogPerson
conversation={possiblyUnsafeConversation}
i18n={i18n}
>
<div className="module-ContactSpoofingReviewDialog__buttons">
<Button
variant={ButtonVariant.SecondaryDestructive}
onClick={() => {
setMessageRequestState(MessageRequestState.deleting);
}}
>
{i18n('MessageRequests--delete')}
</Button>
<Button
variant={ButtonVariant.SecondaryDestructive}
onClick={() => {
setMessageRequestState(MessageRequestState.blocking);
}}
>
{i18n('MessageRequests--block')}
</Button>
</div>
</ContactSpoofingReviewDialogPerson>
<hr />
<h2>{i18n('ContactSpoofingReviewDialog__safe-title')}</h2>
<ContactSpoofingReviewDialogPerson
conversation={safeConversation}
i18n={i18n}
onClick={() => {
onShowContactModal(safeConversation.id);
}}
/>
</Modal>
);
};

View File

@ -0,0 +1,78 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { FunctionComponent, ReactNode } from 'react';
import { ConversationType } from '../../state/ducks/conversations';
import { LocalizerType } from '../../types/Util';
import { assert } from '../../util/assert';
import { Avatar, AvatarSize } from '../Avatar';
import { ContactName } from './ContactName';
import { SharedGroupNames } from '../SharedGroupNames';
type PropsType = {
children?: ReactNode;
conversation: ConversationType;
i18n: LocalizerType;
onClick?: () => void;
};
export const ContactSpoofingReviewDialogPerson: FunctionComponent<PropsType> = ({
children,
conversation,
i18n,
onClick,
}) => {
assert(
conversation.type === 'direct',
'<ContactSpoofingReviewDialogPerson> expected a direct conversation'
);
const contents = (
<>
<Avatar
{...conversation}
conversationType={conversation.type}
size={AvatarSize.FIFTY_TWO}
className="module-ContactSpoofingReviewDialogPerson__avatar"
i18n={i18n}
/>
<div className="module-ContactSpoofingReviewDialogPerson__info">
<ContactName
i18n={i18n}
module="module-ContactSpoofingReviewDialogPerson__info__contact-name"
title={conversation.title}
/>
{conversation.phoneNumber ? (
<div className="module-ContactSpoofingReviewDialogPerson__info__property">
{conversation.phoneNumber}
</div>
) : null}
<div className="module-ContactSpoofingReviewDialogPerson__info__property">
<SharedGroupNames
i18n={i18n}
sharedGroupNames={conversation.sharedGroupNames || []}
/>
</div>
{children}
</div>
</>
);
if (onClick) {
return (
<button
type="button"
className="module-ContactSpoofingReviewDialogPerson"
onClick={onClick}
>
{contents}
</button>
);
}
return (
<div className="module-ContactSpoofingReviewDialogPerson">{contents}</div>
);
};

View File

@ -11,6 +11,7 @@ import enMessages from '../../../_locales/en/messages.json';
import { PropsType, Timeline } from './Timeline';
import { TimelineItem, TimelineItemType } from './TimelineItem';
import { ConversationHero } from './ConversationHero';
import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
import { LastSeenIndicator } from './LastSeenIndicator';
import { TimelineLoadingRow } from './TimelineLoadingRow';
import { TypingBubble } from './TypingBubble';
@ -260,6 +261,16 @@ const actions = () => ({
returnToActiveCall: action('returnToActiveCall'),
contactSupport: action('contactSupport'),
closeContactSpoofingReview: action('closeContactSpoofingReview'),
reviewMessageRequestNameCollision: action(
'reviewMessageRequestNameCollision'
),
onBlock: action('onBlock'),
onBlockAndDelete: action('onBlockAndDelete'),
onDelete: action('onDelete'),
onUnblock: action('onUnblock'),
});
const renderItem = (id: string) => (
@ -330,6 +341,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
undefined,
invitedContactsForNewlyCreatedGroup:
overrideProps.invitedContactsForNewlyCreatedGroup || [],
warning: overrideProps.warning,
id: '',
renderItem,
@ -419,3 +431,14 @@ story.add('With invited contacts for a newly-created group', () => {
return <Timeline {...props} />;
});
story.add('With "same name" warning', () => {
const props = createProps({
warning: {
safeConversation: getDefaultConversation(),
},
items: [],
});
return <Timeline {...props} />;
});

View File

@ -1,9 +1,9 @@
// Copyright 2019-2020 Signal Messenger, LLC
// Copyright 2019-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import { debounce, get, isNumber } from 'lodash';
import classNames from 'classnames';
import React, { CSSProperties } from 'react';
import React, { CSSProperties, ReactNode } from 'react';
import {
AutoSizer,
CellMeasurer,
@ -11,6 +11,7 @@ import {
List,
Grid,
} from 'react-virtualized';
import Measure from 'react-measure';
import { ScrollDownButton } from './ScrollDownButton';
@ -18,10 +19,15 @@ import { GlobalAudioProvider } from '../GlobalAudioContext';
import { LocalizerType } from '../../types/Util';
import { ConversationType } from '../../state/ducks/conversations';
import { assert } from '../../util/assert';
import { PropsActions as MessageActionsType } from './Message';
import { PropsActions as SafetyNumberActionsType } from './SafetyNumberNotification';
import { Intl } from '../Intl';
import { TimelineWarning } from './TimelineWarning';
import { TimelineWarnings } from './TimelineWarnings';
import { NewlyCreatedGroupInvitedContactsDialog } from '../NewlyCreatedGroupInvitedContactsDialog';
import { ContactSpoofingReviewDialog } from './ContactSpoofingReviewDialog';
const AT_BOTTOM_THRESHOLD = 15;
const NEAR_BOTTOM_THRESHOLD = 15;
@ -30,6 +36,10 @@ const LOAD_MORE_THRESHOLD = 30;
const SCROLL_DOWN_BUTTON_THRESHOLD = 8;
export const LOAD_COUNTDOWN = 1;
export type WarningType = {
safeConversation: ConversationType;
};
export type PropsDataType = {
haveNewest: boolean;
haveOldest: boolean;
@ -54,6 +64,12 @@ type PropsHousekeepingType = {
selectedMessageId?: string;
invitedContactsForNewlyCreatedGroup: Array<ConversationType>;
warning?: WarningType;
contactSpoofingReview?: {
possiblyUnsafeConversation: ConversationType;
safeConversation: ConversationType;
};
i18n: LocalizerType;
renderItem: (
@ -74,17 +90,27 @@ type PropsHousekeepingType = {
type PropsActionsType = {
clearChangedMessages: (conversationId: string) => unknown;
clearInvitedConversationsForNewlyCreatedGroup: () => void;
closeContactSpoofingReview: () => void;
setLoadCountdownStart: (
conversationId: string,
loadCountdownStart?: number
) => unknown;
setIsNearBottom: (conversationId: string, isNearBottom: boolean) => unknown;
reviewMessageRequestNameCollision: (
_: Readonly<{
safeConversationId: string;
}>
) => void;
loadAndScroll: (messageId: string) => unknown;
loadOlderMessages: (messageId: string) => unknown;
loadNewerMessages: (messageId: string) => unknown;
loadNewestMessages: (messageId: string, setFocus?: boolean) => unknown;
markMessageRead: (messageId: string) => unknown;
onBlock: () => unknown;
onBlockAndDelete: () => unknown;
onDelete: () => unknown;
onUnblock: () => unknown;
selectMessage: (messageId: string, conversationId: string) => unknown;
clearSelectedMessage: () => unknown;
updateSharedGroups: () => unknown;
@ -142,6 +168,9 @@ type StateType = {
shouldShowScrollDownButton: boolean;
areUnreadBelowCurrentPosition: boolean;
hasDismissedWarning: boolean;
lastMeasuredWarningHeight: number;
};
export class Timeline extends React.PureComponent<PropsType, StateType> {
@ -178,6 +207,8 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
prevPropScrollToIndex: scrollToIndex,
shouldShowScrollDownButton: false,
areUnreadBelowCurrentPosition: false,
hasDismissedWarning: false,
lastMeasuredWarningHeight: 0,
};
}
@ -554,6 +585,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
renderTypingBubble,
updateSharedGroups,
} = this.props;
const { lastMeasuredWarningHeight } = this.state;
const styleWithWidth = {
...style,
@ -562,11 +594,14 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
const row = index;
const oldestUnreadRow = this.getLastSeenIndicatorRow();
const typingBubbleRow = this.getTypingBubbleRow();
let rowContents;
let rowContents: ReactNode;
if (haveOldest && row === 0) {
rowContents = (
<div data-row={row} style={styleWithWidth} role="row">
{this.getWarning() ? (
<div style={{ height: lastMeasuredWarningHeight }} />
) : null}
{renderHeroRow(id, this.resizeHeroRow, updateSharedGroups)}
</div>
);
@ -802,7 +837,10 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
window.unregisterForActive(this.updateWithVisibleRows);
}
public componentDidUpdate(prevProps: PropsType): void {
public componentDidUpdate(
prevProps: Readonly<PropsType>,
prevState: Readonly<StateType>
): void {
const {
id,
clearChangedMessages,
@ -814,6 +852,15 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
typingContact,
} = this.props;
// Warnings can increase the size of the first row (adding padding for the floating
// warning), so we recompute it when the warnings change.
const hadWarning = Boolean(
prevProps.warning && !prevState.hasDismissedWarning
);
if (hadWarning !== Boolean(this.getWarning())) {
this.recomputeRowHeights(0);
}
// There are a number of situations which can necessitate that we forget about row
// heights previously calculated. We reset the minimum number of rows to minimize
// unexpected changes to the scroll position. Those changes happen because
@ -1071,11 +1118,19 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
public render(): JSX.Element | null {
const {
clearInvitedConversationsForNewlyCreatedGroup,
closeContactSpoofingReview,
contactSpoofingReview,
i18n,
id,
items,
isGroupV1AndDisabled,
invitedContactsForNewlyCreatedGroup,
isGroupV1AndDisabled,
items,
onBlock,
onBlockAndDelete,
onDelete,
onUnblock,
showContactModal,
reviewMessageRequestNameCollision,
} = this.props;
const {
shouldShowScrollDownButton,
@ -1127,6 +1182,57 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
</AutoSizer>
);
const warning = this.getWarning();
let timelineWarning: ReactNode;
if (warning) {
timelineWarning = (
<Measure
bounds
onResize={({ bounds }) => {
if (!bounds) {
assert(false, 'We should be measuring the bounds');
return;
}
this.setState({ lastMeasuredWarningHeight: bounds.height });
}}
>
{({ measureRef }) => (
<TimelineWarnings ref={measureRef}>
<TimelineWarning
i18n={i18n}
onClose={() => {
this.setState({ hasDismissedWarning: true });
}}
>
<TimelineWarning.IconContainer>
<TimelineWarning.GenericIcon />
</TimelineWarning.IconContainer>
<TimelineWarning.Text>
<Intl
i18n={i18n}
id="ContactSpoofing__same-name"
components={{
link: (
<TimelineWarning.Link
onClick={() => {
reviewMessageRequestNameCollision({
safeConversationId: warning.safeConversation.id,
});
}}
>
{i18n('ContactSpoofing__same-name__link')}
</TimelineWarning.Link>
),
}}
/>
</TimelineWarning.Text>
</TimelineWarning>
</TimelineWarnings>
)}
</Measure>
);
}
return (
<>
<div
@ -1139,6 +1245,8 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
>
{timelineWarning}
<GlobalAudioProvider conversationId={id}>
{autoSizer}
</GlobalAudioProvider>
@ -1159,7 +1267,33 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
onClose={clearInvitedConversationsForNewlyCreatedGroup}
/>
)}
{contactSpoofingReview && (
<ContactSpoofingReviewDialog
i18n={i18n}
onBlock={onBlock}
onBlockAndDelete={onBlockAndDelete}
onClose={closeContactSpoofingReview}
onDelete={onDelete}
onShowContactModal={showContactModal}
onUnblock={onUnblock}
possiblyUnsafeConversation={
contactSpoofingReview.possiblyUnsafeConversation
}
safeConversation={contactSpoofingReview.safeConversation}
/>
)}
</>
);
}
private getWarning(): undefined | WarningType {
const { hasDismissedWarning } = this.state;
if (hasDismissedWarning) {
return undefined;
}
const { warning } = this.props;
return warning;
}
}

View File

@ -0,0 +1,65 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { ReactNode } from 'react';
import { LocalizerType } from '../../types/Util';
const CLASS_NAME = 'module-TimelineWarning';
const ICON_CONTAINER_CLASS_NAME = `${CLASS_NAME}__icon-container`;
const GENERIC_ICON_CLASS_NAME = `${CLASS_NAME}__generic-icon`;
const TEXT_CLASS_NAME = `${CLASS_NAME}__text`;
const LINK_CLASS_NAME = `${TEXT_CLASS_NAME}__link`;
const CLOSE_BUTTON_CLASS_NAME = `${CLASS_NAME}__close-button`;
type PropsType = {
children: ReactNode;
i18n: LocalizerType;
onClose: () => void;
};
export function TimelineWarning({
children,
i18n,
onClose,
}: Readonly<PropsType>): JSX.Element {
return (
<div className={CLASS_NAME}>
{children}
<button
aria-label={i18n('close')}
className={CLOSE_BUTTON_CLASS_NAME}
onClick={onClose}
type="button"
/>
</div>
);
}
TimelineWarning.IconContainer = ({
children,
}: Readonly<{ children: ReactNode }>): JSX.Element => (
<div className={ICON_CONTAINER_CLASS_NAME}>{children}</div>
);
TimelineWarning.GenericIcon = () => <div className={GENERIC_ICON_CLASS_NAME} />;
TimelineWarning.Text = ({
children,
}: Readonly<{ children: ReactNode }>): JSX.Element => (
<div className={TEXT_CLASS_NAME}>{children}</div>
);
type LinkProps = {
children: ReactNode;
onClick: () => void;
};
TimelineWarning.Link = ({
children,
onClick,
}: Readonly<LinkProps>): JSX.Element => (
<button className={LINK_CLASS_NAME} onClick={onClick} type="button">
{children}
</button>
);

View File

@ -0,0 +1,18 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { forwardRef, ReactNode } from 'react';
const CLASS_NAME = 'module-TimelineWarnings';
type PropsType = {
children: ReactNode;
};
export const TimelineWarnings = forwardRef<HTMLDivElement, PropsType>(
({ children }, ref) => (
<div className={CLASS_NAME} ref={ref}>
{children}
</div>
)
);

View File

@ -275,6 +275,10 @@ type ComposerStateType =
| { isCreating: true; hasError: false }
));
type ContactSpoofingReviewStateType = {
safeConversationId: string;
};
export type ConversationsStateType = {
preJoinConversation?: PreJoinConversationType;
invitedConversationIdsForNewlyCreatedGroup?: Array<string>;
@ -289,6 +293,7 @@ export type ConversationsStateType = {
selectedConversationPanelDepth: number;
showArchived: boolean;
composer?: ComposerStateType;
contactSpoofingReview?: ContactSpoofingReviewStateType;
// Note: it's very important that both of these locations are always kept up to date
messagesLookup: MessageLookupType;
@ -335,6 +340,9 @@ type ClearInvitedConversationsForNewlyCreatedGroupActionType = {
type CloseCantAddContactToGroupModalActionType = {
type: 'CLOSE_CANT_ADD_CONTACT_TO_GROUP_MODAL';
};
type CloseContactSpoofingReviewActionType = {
type: 'CLOSE_CONTACT_SPOOFING_REVIEW';
};
type CloseMaximumGroupSizeModalActionType = {
type: 'CLOSE_MAXIMUM_GROUP_SIZE_MODAL';
};
@ -512,6 +520,12 @@ export type SelectedConversationChangedActionType = {
messageId?: string;
};
};
type ReviewMessageRequestNameCollisionActionType = {
type: 'REVIEW_MESSAGE_REQUEST_NAME_COLLISION';
payload: {
safeConversationId: string;
};
};
type ShowInboxActionType = {
type: 'SHOW_INBOX';
payload: null;
@ -569,6 +583,7 @@ export type ConversationActionType =
| ClearSelectedMessageActionType
| ClearUnreadMetricsActionType
| CloseCantAddContactToGroupModalActionType
| CloseContactSpoofingReviewActionType
| CloseMaximumGroupSizeModalActionType
| CloseRecommendedGroupSizeModalActionType
| ConversationAddedActionType
@ -587,6 +602,7 @@ export type ConversationActionType =
| RemoveAllConversationsActionType
| RepairNewestMessageActionType
| RepairOldestMessageActionType
| ReviewMessageRequestNameCollisionActionType
| ScrollToMessageActionType
| SelectedConversationChangedActionType
| SetComposeGroupAvatarActionType
@ -617,6 +633,7 @@ export const actions = {
clearSelectedMessage,
clearUnreadMetrics,
closeCantAddContactToGroupModal,
closeContactSpoofingReview,
closeRecommendedGroupSizeModal,
closeMaximumGroupSizeModal,
conversationAdded,
@ -634,6 +651,7 @@ export const actions = {
removeAllConversations,
repairNewestMessage,
repairOldestMessage,
reviewMessageRequestNameCollision,
scrollToMessage,
selectMessage,
setComposeGroupAvatar,
@ -863,6 +881,14 @@ function repairOldestMessage(
};
}
function reviewMessageRequestNameCollision(
payload: Readonly<{
safeConversationId: string;
}>
): ReviewMessageRequestNameCollisionActionType {
return { type: 'REVIEW_MESSAGE_REQUEST_NAME_COLLISION', payload };
}
function messagesReset(
conversationId: string,
messages: Array<MessageType>,
@ -977,6 +1003,9 @@ function clearUnreadMetrics(
function closeCantAddContactToGroupModal(): CloseCantAddContactToGroupModalActionType {
return { type: 'CLOSE_CANT_ADD_CONTACT_TO_GROUP_MODAL' };
}
function closeContactSpoofingReview(): CloseContactSpoofingReviewActionType {
return { type: 'CLOSE_CONTACT_SPOOFING_REVIEW' };
}
function closeMaximumGroupSizeModal(): CloseMaximumGroupSizeModalActionType {
return { type: 'CLOSE_MAXIMUM_GROUP_SIZE_MODAL' };
}
@ -1343,6 +1372,10 @@ export function reducer(
};
}
if (action.type === 'CLOSE_CONTACT_SPOOFING_REVIEW') {
return omit(state, 'contactSpoofingReview');
}
if (action.type === 'CLOSE_MAXIMUM_GROUP_SIZE_MODAL') {
return closeComposerModal(state, 'maximumGroupSizeModalState' as const);
}
@ -1379,7 +1412,8 @@ export function reducer(
const { id, data } = payload;
const { conversationLookup } = state;
let { showArchived, selectedConversationId } = state;
const { selectedConversationId } = state;
let { showArchived } = state;
const existing = conversationLookup[id];
// In the change case we only modify the lookup if we already had that conversation
@ -1387,6 +1421,8 @@ export function reducer(
return state;
}
const keysToOmit: Array<keyof ConversationsStateType> = [];
if (selectedConversationId === id) {
// Archived -> Inbox: we go back to the normal inbox view
if (existing.isArchived && !data.isArchived) {
@ -1397,12 +1433,16 @@ export function reducer(
// behavior - no selected conversation in the left pane, but a conversation show
// in the right pane.
if (!existing.isArchived && data.isArchived) {
selectedConversationId = undefined;
keysToOmit.push('selectedConversationId');
}
if (!existing.isBlocked && data.isBlocked) {
keysToOmit.push('contactSpoofingReview');
}
}
return {
...state,
...omit(state, keysToOmit),
selectedConversationId,
showArchived,
conversationLookup: {
@ -1444,7 +1484,7 @@ export function reducer(
: undefined;
return {
...state,
...omit(state, 'contactSpoofingReview'),
selectedConversationId,
selectedConversationPanelDepth: 0,
messagesLookup: omit(state.messagesLookup, messageIds),
@ -1879,6 +1919,13 @@ export function reducer(
};
}
if (action.type === 'REVIEW_MESSAGE_REQUEST_NAME_COLLISION') {
return {
...state,
contactSpoofingReview: action.payload,
};
}
if (action.type === 'MESSAGES_ADDED') {
const { conversationId, isActive, isNewMessage, messages } = action.payload;
const { messagesByConversation, messagesLookup } = state;
@ -2059,7 +2106,7 @@ export function reducer(
const { id } = payload;
return {
...state,
...omit(state, 'contactSpoofingReview'),
selectedConversationId: id,
};
}

View File

@ -89,6 +89,18 @@ export const getConversationsByGroupId = createSelector(
}
);
const getAllConversations = createSelector(
getConversationLookup,
(lookup): Array<ConversationType> => Object.values(lookup)
);
export const getConversationsByTitleSelector = createSelector(
getAllConversations,
(conversations): ((title: string) => Array<ConversationType>) => (
title: string
) => conversations.filter(conversation => conversation.title === title)
);
export const getSelectedConversationId = createSelector(
getConversations,
(state: ConversationsStateType): string | undefined => {

View File

@ -5,13 +5,18 @@ import { pick } from 'lodash';
import React from 'react';
import { connect } from 'react-redux';
import { mapDispatchToProps } from '../actions';
import { Timeline } from '../../components/conversation/Timeline';
import {
Timeline,
WarningType as TimelineWarningType,
} from '../../components/conversation/Timeline';
import { StateType } from '../reducer';
import { ConversationType } from '../ducks/conversations';
import { getIntl } from '../selectors/user';
import {
getConversationMessagesSelector,
getConversationSelector,
getConversationsByTitleSelector,
getInvitedContactsForNewlyCreatedGroup,
getSelectedMessage,
} from '../selectors/conversations';
@ -24,6 +29,8 @@ import { SmartTimelineLoadingRow } from './TimelineLoadingRow';
import { renderAudioAttachment } from './renderAudioAttachment';
import { renderEmojiPicker } from './renderEmojiPicker';
import { assert } from '../../util/assert';
// Workaround: A react component's required properties are filtering up through connect()
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
/* eslint-disable @typescript-eslint/no-explicit-any */
@ -80,6 +87,60 @@ function renderTypingBubble(id: string): JSX.Element {
return <FilteredSmartTypingBubble id={id} />;
}
const getWarning = (
conversation: Readonly<ConversationType>,
state: Readonly<StateType>
): undefined | TimelineWarningType => {
if (
conversation.type === 'direct' &&
!conversation.acceptedMessageRequest &&
!conversation.isBlocked
) {
const getConversationsWithTitle = getConversationsByTitleSelector(state);
const conversationsWithSameTitle = getConversationsWithTitle(
conversation.title
);
assert(
conversationsWithSameTitle.length,
'Expected at least 1 conversation with the same title (this one)'
);
const safeConversation = conversationsWithSameTitle.find(
otherConversation =>
otherConversation.acceptedMessageRequest &&
otherConversation.type === 'direct' &&
otherConversation.id !== conversation.id
);
return safeConversation ? { safeConversation } : undefined;
}
return undefined;
};
const getContactSpoofingReview = (
selectedConversationId: string,
state: Readonly<StateType>
):
| undefined
| {
possiblyUnsafeConversation: ConversationType;
safeConversation: ConversationType;
} => {
const { contactSpoofingReview } = state.conversations;
if (!contactSpoofingReview) {
return undefined;
}
const conversationSelector = getConversationSelector(state);
return {
possiblyUnsafeConversation: conversationSelector(selectedConversationId),
safeConversation: conversationSelector(
contactSpoofingReview.safeConversationId
),
};
};
const mapStateToProps = (state: StateType, props: ExternalProps) => {
const { id, ...actions } = props;
@ -99,6 +160,10 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
state
),
selectedMessageId: selectedMessage ? selectedMessage.id : undefined,
warning: getWarning(conversation, state),
contactSpoofingReview: getContactSpoofingReview(id, state),
i18n: getIntl(state),
renderItem,
renderLastSeenIndicator,

View File

@ -28,6 +28,7 @@ import {
getMaximumGroupSizeModalState,
getPlaceholderContact,
getRecommendedGroupSizeModalState,
getConversationsByTitleSelector,
getSelectedConversation,
getSelectedConversationId,
hasGroupCreationError,
@ -1288,6 +1289,35 @@ describe('both/state/selectors/conversations', () => {
});
});
describe('#getConversationsByTitleSelector', () => {
it('returns a selector that finds conversations by title', () => {
const state = {
...getEmptyRootState(),
conversations: {
...getEmptyState(),
conversationLookup: {
abc: { ...getDefaultConversation('abc'), title: 'Janet' },
def: { ...getDefaultConversation('def'), title: 'Janet' },
geh: { ...getDefaultConversation('geh'), title: 'Rick' },
},
},
};
const selector = getConversationsByTitleSelector(state);
assert.sameMembers(
selector('Janet').map(c => c.id),
['abc', 'def']
);
assert.sameMembers(
selector('Rick').map(c => c.id),
['geh']
);
assert.isEmpty(selector('abc'));
assert.isEmpty(selector('xyz'));
});
});
describe('#getSelectedConversationId', () => {
it('returns undefined if no conversation is selected', () => {
const state = {

View File

@ -31,6 +31,7 @@ const {
clearGroupCreationError,
clearInvitedConversationsForNewlyCreatedGroup,
closeCantAddContactToGroupModal,
closeContactSpoofingReview,
closeMaximumGroupSizeModal,
closeRecommendedGroupSizeModal,
createGroup,
@ -47,6 +48,7 @@ const {
startComposing,
showChooseGroupMembers,
startSettingGroupMetadata,
reviewMessageRequestNameCollision,
toggleConversationInChooseMembers,
} = actions;
@ -550,6 +552,29 @@ describe('both/state/ducks/conversations', () => {
});
});
describe('CLOSE_CONTACT_SPOOFING_REVIEW', () => {
it('closes the contact spoofing review modal if it was open', () => {
const state = {
...getEmptyState(),
contactSpoofingReview: {
safeConversationId: 'abc123',
},
};
const action = closeContactSpoofingReview();
const actual = reducer(state, action);
assert.isUndefined(actual.contactSpoofingReview);
});
it("does nothing if the modal wasn't already open", () => {
const state = getEmptyState();
const action = closeContactSpoofingReview();
const actual = reducer(state, action);
assert.deepEqual(actual, state);
});
});
describe('CLOSE_MAXIMUM_GROUP_SIZE_MODAL', () => {
it('closes the maximum group size modal if it was open', () => {
const state = {
@ -1151,6 +1176,20 @@ describe('both/state/ducks/conversations', () => {
});
});
describe('REVIEW_MESSAGE_REQUEST_NAME_COLLISION', () => {
it('starts reviewing a message request name collision', () => {
const state = getEmptyState();
const action = reviewMessageRequestNameCollision({
safeConversationId: 'def',
});
const actual = reducer(state, action);
assert.deepEqual(actual.contactSpoofingReview, {
safeConversationId: 'def',
});
});
});
describe('SET_COMPOSE_GROUP_AVATAR', () => {
it("can clear the composer's group avatar", () => {
const state = {

View File

@ -16654,7 +16654,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Timeline.js",
"line": " this.listRef = react_1.default.createRef();",
"lineNumber": 33,
"lineNumber": 39,
"reasonCategory": "usageTrusted",
"updated": "2019-07-31T00:19:18.696Z",
"reasonDetail": "Timeline needs to interact with its child List directly"
@ -16927,4 +16927,4 @@
"updated": "2021-01-08T15:46:32.143Z",
"reasonDetail": "Doesn't manipulate the DOM. This is just a function."
}
]
]

View File

@ -779,6 +779,9 @@ Whisper.ConversationView = Whisper.View.extend({
setupTimeline() {
const { id } = this.model;
const messageRequestEnum =
window.textsecure.protobuf.SyncMessage.MessageRequestResponse.Type;
const contactSupport = () => {
const baseUrl =
'https://support.signal.org/hc/LOCALE/requests/new?desktop&chat_refreshed';
@ -950,6 +953,28 @@ Whisper.ConversationView = Whisper.View.extend({
loadAndScroll: this.loadAndScroll.bind(this),
loadOlderMessages,
markMessageRead,
onBlock: () => {
this.syncMessageRequestResponse('onBlock', messageRequestEnum.BLOCK);
},
onBlockAndDelete: () => {
this.syncMessageRequestResponse(
'onBlockAndDelete',
messageRequestEnum.BLOCK_AND_DELETE
);
},
onDelete: () => {
this.syncMessageRequestResponse(
'onDelete',
messageRequestEnum.DELETE
);
},
onUnblock: () => {
this.syncMessageRequestResponse(
'onUnblock',
messageRequestEnum.ACCEPT
);
},
onShowContactModal: this.showContactModal.bind(this),
scrollToQuotedMessage,
updateSharedGroups: this.model.throttledUpdateSharedGroups,
}),