diff --git a/echo/frontend/src/components/settings/TwoFactorSettingsCard.tsx b/echo/frontend/src/components/settings/TwoFactorSettingsCard.tsx index 022b8bf1..85023fb0 100644 --- a/echo/frontend/src/components/settings/TwoFactorSettingsCard.tsx +++ b/echo/frontend/src/components/settings/TwoFactorSettingsCard.tsx @@ -20,13 +20,8 @@ import { Tooltip, } from "@mantine/core"; import { useDisclosure } from "@mantine/hooks"; -import { - IconCheck, - IconCopy, - IconInfoCircle, - IconLock, -} from "@tabler/icons-react"; -import { useEffect, useMemo, useState } from "react"; +import { IconCheck, IconCopy, IconLock } from "@tabler/icons-react"; +import { useEffect, useState } from "react"; import { QRCode } from "@/components/common/QRCode"; import { type GenerateTwoFactorResponse, @@ -207,8 +202,9 @@ export const TwoFactorSettingsCard = ({ {enableTwoFactorMutation.isError && ( - {enableTwoFactorMutation.error?.message ?? - t`We couldn’t enable two-factor authentication. Double-check your code and try again.`} + {getEnableTwoFactorErrorMessage( + enableTwoFactorMutation.error?.message, + )} )} @@ -274,6 +270,17 @@ export const TwoFactorSettingsCard = ({ ); }; + const getEnableTwoFactorErrorMessage = (message?: string) => { + if (!message) { + return t`We couldn’t enable two-factor authentication. Double-check your code and try again.`; + } + + if (message.includes('Invalid payload. "otp" is invalid')) { + return t`The code didn't work, please try again.`; + } + + return message; + }; return ( <> diff --git a/echo/frontend/src/components/settings/hooks/index.ts b/echo/frontend/src/components/settings/hooks/index.ts index 2100d99c..e4452dda 100644 --- a/echo/frontend/src/components/settings/hooks/index.ts +++ b/echo/frontend/src/components/settings/hooks/index.ts @@ -1,3 +1,4 @@ +import { t } from "@lingui/core/macro"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { throwWithMessage } from "@/components/auth/utils/errorUtils"; import { toast } from "@/components/common/Toaster"; @@ -49,13 +50,17 @@ export const useEnableTwoFactorMutation = () => { await postDirectus("/users/me/tfa/enable", { otp, secret }); }, onError: (error: Error) => { - toast.error(error.message); + if (error.message.includes('Invalid payload. "otp" is invalid')) { + toast.error(t`The code didn't work, please try again.`); + } else { + toast.error(error.message); + } }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["users", "me"], }); - toast.success("Two-factor authentication enabled"); + toast.success(t`Two-factor authentication enabled`); }, }); }; @@ -74,7 +79,7 @@ export const useDisableTwoFactorMutation = () => { queryClient.invalidateQueries({ queryKey: ["users", "me"], }); - toast.success("Two-factor authentication disabled"); + toast.success(t`Two-factor authentication disabled`); }, }); };