ECHO-591 error messages revised for 2fa in settings page

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 = ({
 			<Stack gap="lg">
 				{enableTwoFactorMutation.isError && (
 					<Alert color="red" variant="light">
-						{enableTwoFactorMutation.error?.message ??
-							t`We couldn’t enable two-factor authentication. Double-check your code and try again.`}
+						{getEnableTwoFactorErrorMessage(
+							enableTwoFactorMutation.error?.message,
+						)}
 					</Alert>
 				)}
 
@@ -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 (
 		<>
 			<Paper withBorder p="lg" radius="lg">

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`);
 		},
 	});
 };