mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Remove support for E164-based numbers

Browse source
This commit is contained in:
Fedor Indutny 2023-11-01 23:55:30 +01:00 • committed by GitHub
parent aa03ac36bc
commit 0ce593bf0d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 469 additions and 916 deletions
Download patch file Download diff file Expand all files Collapse all files

146
ts/components/SafetyNumberViewer.tsx
View file

@ -1,8 +1,7 @@
// Copyright 2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useState, useCallback } from 'react';
import classNames from 'classnames';
import React from 'react';
import { Button, ButtonVariant } from './Button';
import { QrCode } from './QrCode';
@ -11,18 +10,15 @@ import { Intl } from './Intl';
import { Emojify } from './conversation/Emojify';
import type { LocalizerType } from '../types/Util';
import type { SafetyNumberType } from '../types/safetyNumber';
import { SAFETY_NUMBER_MIGRATION_URL } from '../types/support';
import { SafetyNumberIdentifierType } from '../types/safetyNumber';
import { arrow } from '../util/keyboard';
import { SAFETY_NUMBER_URL } from '../types/support';
export type PropsType = {
contact: ConversationType;
generateSafetyNumber: (contact: ConversationType) => void;
i18n: LocalizerType;
onClose: () => void;
safetyNumbers?: ReadonlyArray<SafetyNumberType>;
safetyNumber?: SafetyNumberType;
toggleVerified: (contact: ConversationType) => void;
showOnboarding?: () => void;
verificationDisabled: boolean;
};
@ -31,12 +27,10 @@ export function SafetyNumberViewer({
generateSafetyNumber,
i18n,
onClose,
safetyNumbers,
safetyNumber,
toggleVerified,
showOnboarding,
verificationDisabled,
}: PropsType): JSX.Element | null {
const hasSafetyNumbers = safetyNumbers != null;
React.useEffect(() => {
if (!contact) {
return;
@ -47,42 +41,11 @@ export function SafetyNumberViewer({
// Keyboard navigation
const [selectedIndex, setSelectedIndex] = useState(0);
const selectPrevNumber = useCallback(() => {
setSelectedIndex(x => Math.max(x - 1, 0));
}, []);
const selectNextNumber = useCallback(() => {
if (!safetyNumbers || safetyNumbers.length === 0) {
setSelectedIndex(0);
return;
}
setSelectedIndex(x => Math.min(x + 1, safetyNumbers.length - 1));
}, [safetyNumbers]);
React.useEffect(() => {
const handleKeyDown = (ev: KeyboardEvent) => {
if (ev.key === arrow('start')) {
selectPrevNumber();
}
if (ev.key === arrow('end')) {
selectNextNumber();
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [selectPrevNumber, selectNextNumber]);
if (!contact || !hasSafetyNumbers) {
if (!contact) {
return null;
}
if (!safetyNumbers.length) {
if (!safetyNumber) {
return (
<div className="module-SafetyNumberViewer">
<div>{i18n('icu:cannotGenerateSafetyNumber')}</div>
@ -110,121 +73,36 @@ export function SafetyNumberViewer({
? i18n('icu:SafetyNumberViewer__clearVerification')
: i18n('icu:SafetyNumberViewer__markAsVerified');
const visibleSafetyNumber = safetyNumbers.at(selectedIndex);
if (!visibleSafetyNumber) {
return null;
}
const cardClassName = classNames('module-SafetyNumberViewer__card', {
'module-SafetyNumberViewer__card--aci':
visibleSafetyNumber.identifierType ===
SafetyNumberIdentifierType.ACIIdentifier,
'module-SafetyNumberViewer__card--e164':
visibleSafetyNumber.identifierType ===
SafetyNumberIdentifierType.E164Identifier,
});
const numberBlocks = visibleSafetyNumber.numberBlocks.join(' ');
const numberBlocks = safetyNumber.numberBlocks.join(' ');
const safetyNumberCard = (
<div className="module-SafetyNumberViewer__card-container">
<div className={cardClassName}>
<div className="module-SafetyNumberViewer__card">
<QrCode
className="module-SafetyNumberViewer__card__qr"
data={visibleSafetyNumber.qrData}
data={safetyNumber.qrData}
alt={i18n('icu:Install__scan-this-code')}
/>
<div className="module-SafetyNumberViewer__card__number">
{numberBlocks}
</div>
{selectedIndex > 0 && (
<button
type="button"
aria-label={i18n('icu:SafetyNumberViewer__card__prev')}
className="module-SafetyNumberViewer__card__prev"
onClick={selectPrevNumber}
/>
)}
{selectedIndex < safetyNumbers.length - 1 && (
<button
type="button"
aria-label={i18n('icu:SafetyNumberViewer__card__next')}
className="module-SafetyNumberViewer__card__next"
onClick={selectNextNumber}
/>
)}
</div>
</div>
);
const carousel = (
<div className="module-SafetyNumberViewer__carousel">
{safetyNumbers.map(({ identifierType }, index) => {
return (
<button
type="button"
aria-label={i18n('icu:SafetyNumberViewer__carousel__dot', {
index: index + 1,
total: safetyNumbers.length,
})}
aria-pressed={index === selectedIndex}
key={identifierType}
className="module-SafetyNumberViewer__carousel__dot"
onClick={() => setSelectedIndex(index)}
/>
);
})}
</div>
);
return (
<div className="module-SafetyNumberViewer">
<div className="module-SafetyNumberViewer__migration">
<div className="module-SafetyNumberViewer__migration__icon" />
<div className="module-SafetyNumberViewer__migration__text">
<p>
<Intl i18n={i18n} id="icu:SafetyNumberViewer__migration__text" />
</p>
<p>
<a
href={SAFETY_NUMBER_MIGRATION_URL}
rel="noreferrer"
target="_blank"
onClick={e => {
if (showOnboarding) {
e.preventDefault();
showOnboarding();
}
}}
>
<Intl
i18n={i18n}
id="icu:SafetyNumberViewer__migration__learn_more"
/>
</a>
</p>
</div>
</div>
{safetyNumberCard}
{safetyNumbers.length > 1 && carousel}
<div className="module-SafetyNumberViewer__help">
<Intl
i18n={i18n}
id="icu:SafetyNumberViewer__hint--migration"
id="icu:SafetyNumberViewer__hint"
components={{ name: boldName }}
/>
<br />
<a href={SAFETY_NUMBER_MIGRATION_URL} rel="noreferrer" target="_blank">
<Intl
i18n={i18n}
id="icu:SafetyNumberViewer__migration__learn_more"
/>
<a href={SAFETY_NUMBER_URL} rel="noreferrer" target="_blank">
<Intl i18n={i18n} id="icu:SafetyNumberViewer__learn_more" />
</a>
</div>