136 lines
4.1 KiB
TypeScript
136 lines
4.1 KiB
TypeScript
// Copyright 2020-2021 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import * as React from 'react';
|
|
import { noop } from 'lodash';
|
|
|
|
import { Avatar } from './Avatar';
|
|
import { ConfirmationDialog } from './ConfirmationDialog';
|
|
import { InContactsIcon } from './InContactsIcon';
|
|
import { Modal } from './Modal';
|
|
|
|
import type { ConversationType } from '../state/ducks/conversations';
|
|
import type { LocalizerType } from '../types/Util';
|
|
import { isInSystemContacts } from '../util/isInSystemContacts';
|
|
|
|
export type SafetyNumberProps = {
|
|
contactID: string;
|
|
onClose?: () => void;
|
|
};
|
|
|
|
export type Props = {
|
|
readonly confirmText?: string;
|
|
readonly contacts: Array<ConversationType>;
|
|
readonly i18n: LocalizerType;
|
|
readonly onCancel: () => void;
|
|
readonly onConfirm: () => void;
|
|
readonly renderSafetyNumber: (props: SafetyNumberProps) => JSX.Element;
|
|
};
|
|
|
|
export const SafetyNumberChangeDialog = ({
|
|
confirmText,
|
|
contacts,
|
|
i18n,
|
|
onCancel,
|
|
onConfirm,
|
|
renderSafetyNumber,
|
|
}: Props): JSX.Element => {
|
|
const [selectedContact, setSelectedContact] = React.useState<
|
|
ConversationType | undefined
|
|
>(undefined);
|
|
const cancelButtonRef = React.createRef<HTMLButtonElement>();
|
|
|
|
React.useEffect(() => {
|
|
if (cancelButtonRef && cancelButtonRef.current) {
|
|
cancelButtonRef.current.focus();
|
|
}
|
|
}, [cancelButtonRef, contacts]);
|
|
|
|
const onClose = selectedContact
|
|
? () => {
|
|
setSelectedContact(undefined);
|
|
}
|
|
: onCancel;
|
|
|
|
if (selectedContact) {
|
|
return (
|
|
<Modal i18n={i18n} onClose={onClose}>
|
|
{renderSafetyNumber({ contactID: selectedContact.id, onClose })}
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ConfirmationDialog
|
|
actions={[
|
|
{
|
|
action: onConfirm,
|
|
text: confirmText || i18n('sendMessageToContact'),
|
|
style: 'affirmative',
|
|
},
|
|
]}
|
|
i18n={i18n}
|
|
onCancel={onClose}
|
|
onClose={noop}
|
|
title={i18n('safetyNumberChanges')}
|
|
>
|
|
<div className="module-SafetyNumberChangeDialog__message">
|
|
{i18n('changedVerificationWarning')}
|
|
</div>
|
|
<ul className="module-SafetyNumberChangeDialog__contacts">
|
|
{contacts.map((contact: ConversationType) => {
|
|
const shouldShowNumber = Boolean(contact.name || contact.profileName);
|
|
|
|
return (
|
|
<li
|
|
className="module-SafetyNumberChangeDialog__contact"
|
|
key={contact.id}
|
|
>
|
|
<Avatar
|
|
acceptedMessageRequest={contact.acceptedMessageRequest}
|
|
avatarPath={contact.avatarPath}
|
|
color={contact.color}
|
|
conversationType="direct"
|
|
i18n={i18n}
|
|
isMe={contact.isMe}
|
|
name={contact.name}
|
|
phoneNumber={contact.phoneNumber}
|
|
profileName={contact.profileName}
|
|
title={contact.title}
|
|
sharedGroupNames={contact.sharedGroupNames}
|
|
size={52}
|
|
unblurredAvatarPath={contact.unblurredAvatarPath}
|
|
/>
|
|
<div className="module-SafetyNumberChangeDialog__contact--wrapper">
|
|
<div className="module-SafetyNumberChangeDialog__contact--name">
|
|
{contact.title}
|
|
{isInSystemContacts(contact) ? (
|
|
<span>
|
|
{' '}
|
|
<InContactsIcon i18n={i18n} />
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
{shouldShowNumber ? (
|
|
<div className="module-SafetyNumberChangeDialog__contact--number">
|
|
{contact.phoneNumber}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<button
|
|
className="module-SafetyNumberChangeDialog__contact--view"
|
|
onClick={() => {
|
|
setSelectedContact(contact);
|
|
}}
|
|
tabIndex={0}
|
|
type="button"
|
|
>
|
|
{i18n('view')}
|
|
</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</ConfirmationDialog>
|
|
);
|
|
};
|