Update safety number change warning dialog
This commit is contained in:
parent
e87a0103cc
commit
5b83485c89
38 changed files with 1221 additions and 425 deletions
82
ts/components/SafetyNumberViewer.tsx
Normal file
82
ts/components/SafetyNumberViewer.tsx
Normal file
|
@ -0,0 +1,82 @@
|
|||
import React from 'react';
|
||||
import { ConversationType } from '../state/ducks/conversations';
|
||||
import { LocalizerType } from '../types/Util';
|
||||
import { getPlaceholder } from '../util/safetyNumber';
|
||||
|
||||
type SafetyNumberViewerProps = {
|
||||
contact?: ConversationType;
|
||||
generateSafetyNumber: (contact: ConversationType) => void;
|
||||
i18n: LocalizerType;
|
||||
onClose?: () => void;
|
||||
safetyNumber: string;
|
||||
safetyNumberChanged?: boolean;
|
||||
toggleVerified: (contact: ConversationType) => void;
|
||||
verificationDisabled: boolean;
|
||||
};
|
||||
|
||||
export const SafetyNumberViewer = ({
|
||||
contact,
|
||||
generateSafetyNumber,
|
||||
i18n,
|
||||
onClose,
|
||||
safetyNumber,
|
||||
safetyNumberChanged,
|
||||
toggleVerified,
|
||||
verificationDisabled,
|
||||
}: SafetyNumberViewerProps): JSX.Element | null => {
|
||||
if (!contact) {
|
||||
return null;
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
generateSafetyNumber(contact);
|
||||
}, [safetyNumber]);
|
||||
|
||||
const name = contact.title;
|
||||
const isVerified = contact.isVerified;
|
||||
const verifiedStatus = isVerified
|
||||
? i18n('isVerified', [name])
|
||||
: i18n('isNotVerified', [name]);
|
||||
const verifyButtonText = isVerified ? i18n('unverify') : i18n('verify');
|
||||
|
||||
return (
|
||||
<div className="module-safety-number">
|
||||
{onClose && (
|
||||
<div className="module-safety-number__close-button">
|
||||
<button onClick={onClose} tabIndex={0}>
|
||||
<span />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="module-safety-number__verification-label">
|
||||
{safetyNumberChanged
|
||||
? i18n('changedRightAfterVerify', [name, name])
|
||||
: i18n('yourSafetyNumberWith', [name])}
|
||||
</div>
|
||||
<div className="module-safety-number__number">
|
||||
{safetyNumber || getPlaceholder()}
|
||||
</div>
|
||||
{i18n('verifyHelp', [name])}
|
||||
<div className="module-safety-number__verification-status">
|
||||
{isVerified ? (
|
||||
<span className="module-safety-number__icon--verified" />
|
||||
) : (
|
||||
<span className="module-safety-number__icon--shield" />
|
||||
)}
|
||||
{verifiedStatus}
|
||||
</div>
|
||||
<div className="module-safety-number__verify-container">
|
||||
<button
|
||||
className="module-safety-number__button--verify"
|
||||
disabled={verificationDisabled}
|
||||
onClick={() => {
|
||||
toggleVerified(contact);
|
||||
}}
|
||||
tabIndex={0}
|
||||
>
|
||||
{verifyButtonText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue