Profile name spoofing dialog

_locales/en/messages.json

@@ -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"
   }
 }

stylesheets/components/ContactSpoofingReviewDialog.scss

@@ -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;
+    }
+  }
+}

stylesheets/components/ContactSpoofingReviewDialogPerson.scss

@@ -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;
+      }
+    }
+  }
+}

stylesheets/components/TimelineWarning.scss

@@ -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;
+    }
+  }
+}

stylesheets/components/TimelineWarnings.scss

@@ -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;
+}

stylesheets/manifest.scss

@@ -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';

ts/components/Modal.tsx

@@ -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 && (

ts/components/conversation/ContactSpoofingReviewDialog.stories.tsx

@@ -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()}
+  />
+));

ts/components/conversation/ContactSpoofingReviewDialog.tsx

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

ts/components/conversation/ContactSpoofingReviewDialogPerson.tsx

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

ts/components/conversation/Timeline.stories.tsx

@@ -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} />;
+});

ts/components/conversation/Timeline.tsx

@@ -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;
+  }
 }

ts/components/conversation/TimelineWarning.tsx

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

ts/components/conversation/TimelineWarnings.tsx

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

ts/state/ducks/conversations.ts

@@ -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,
     };
   }

ts/state/selectors/conversations.ts

@@ -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 => {

ts/state/smart/Timeline.tsx

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

ts/test-both/state/selectors/conversations_test.ts

@@ -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 = {

ts/test-electron/state/ducks/conversations_test.ts

@@ -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 = {

ts/util/lint/exceptions.json

@@ -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."
   }
-]
+]

ts/views/conversation_view.ts

@@ -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,
       }),