Username recovery improvements

This commit is contained in:
Fedor Indutny 2024-02-06 10:35:59 -08:00 committed by GitHub
parent a70ae1060d
commit 533a1b32d4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 423 additions and 99 deletions

View file

@ -29,9 +29,11 @@ export type PropsType = Readonly<{
colorId?: number;
usernameLinkCorrupted: boolean;
usernameLinkState: UsernameLinkState;
usernameLinkRecovered: boolean;
setUsernameLinkColor: (colorId: number) => void;
resetUsernameLink: () => void;
clearUsernameLinkRecovered: () => void;
saveAttachment: SaveAttachmentActionCreatorType;
showToast: ShowToastAction;
onBack: () => void;
@ -532,10 +534,12 @@ export function UsernameLinkModalBody({
username,
usernameLinkCorrupted,
usernameLinkState,
usernameLinkRecovered,
colorId: initialColorId = ColorEnum.UNKNOWN,
setUsernameLinkColor,
resetUsernameLink,
clearUsernameLinkRecovered,
saveAttachment,
showToast,
@ -544,6 +548,7 @@ export function UsernameLinkModalBody({
const [pngData, setPngData] = useState<Uint8Array | undefined>();
const [showColors, setShowColors] = useState(false);
const [confirmReset, setConfirmReset] = useState(false);
const [isRecovered, setIsRecovered] = useState(false);
const [showError, setShowError] = useState(false);
const [colorId, setColorId] = useState(initialColorId);
@ -662,10 +667,17 @@ export function UsernameLinkModalBody({
}, []);
const onConfirmReset = useCallback(() => {
setShowError(false);
setConfirmReset(false);
resetUsernameLink();
}, [resetUsernameLink]);
const onCloseError = useCallback(() => {
if (showError) {
onBack();
}
}, [showError, onBack]);
useEffect(() => {
if (!usernameLinkCorrupted) {
return;
@ -682,12 +694,21 @@ export function UsernameLinkModalBody({
setShowError(true);
}, [usernameLinkState]);
const onClearError = useCallback(() => {
setShowError(false);
useEffect(() => {
if (usernameLinkRecovered) {
setIsRecovered(true);
// Only show the modal once
clearUsernameLinkRecovered();
}
}, [usernameLinkRecovered, clearUsernameLinkRecovered]);
const onClearIsRecovered = useCallback(() => {
setIsRecovered(false);
}, []);
const isResettingLink =
usernameLinkCorrupted || usernameLinkState !== UsernameLinkState.Ready;
const isReady = usernameLinkState === UsernameLinkState.Ready;
const isResettingLink = usernameLinkCorrupted || !isReady;
const info = (
<>
@ -754,7 +775,7 @@ export function UsernameLinkModalBody({
);
let linkImage: JSX.Element | undefined;
if (usernameLinkState === UsernameLinkState.Ready && link) {
if (isReady && link) {
linkImage = (
<svg
className={`${CLASS}__card__qr__blotches`}
@ -820,11 +841,30 @@ export function UsernameLinkModalBody({
<ConfirmationDialog
i18n={i18n}
dialogName="UsernameLinkModal__error"
onClose={onClearError}
onClose={onCloseError}
cancelButtonVariant={ButtonVariant.Secondary}
cancelText={i18n('icu:cancel')}
actions={[
{
action: onConfirmReset,
style: 'affirmative',
text: i18n('icu:UsernameLinkModalBody__error__fix-now'),
},
]}
>
{i18n('icu:UsernameLinkModalBody__error__text')}
</ConfirmationDialog>
)}
{isRecovered && (
<ConfirmationDialog
i18n={i18n}
dialogName="UsernameLinkModal__error"
onClose={onClearIsRecovered}
cancelButtonVariant={ButtonVariant.Secondary}
cancelText={i18n('icu:ok')}
>
{i18n('icu:UsernameLinkModalBody__error__text')}
{i18n('icu:UsernameLinkModalBody__recovered__text')}
</ConfirmationDialog>
)}