Translate login authentication errors

commafeed-client/src/app/client.test.ts

@@ -0,0 +1,23 @@
+import type { AxiosError } from "axios"
+import { describe, expect, it } from "vitest"
+import { loginErrorToStrings } from "./client"
+
+const axiosError = (status: number, data: unknown) =>
+    ({
+        isAxiosError: true,
+        response: { status, data },
+    }) as AxiosError
+
+describe("loginErrorToStrings", () => {
+    it("uses the translated message for authentication errors", () => {
+        const error = axiosError(401, { message: "wrong username or password" })
+
+        expect(loginErrorToStrings(error, "Translated authentication error")).toEqual(["Translated authentication error"])
+    })
+
+    it("preserves backend messages for unexpected errors", () => {
+        const error = axiosError(500, { message: "unexpected error" })
+
+        expect(loginErrorToStrings(error, "Translated authentication error")).toEqual(["unexpected error"])
+    })
+})

commafeed-client/src/app/client.ts

@@ -136,6 +136,15 @@ export const errorToStrings = (err: unknown) => {
     return strings
 }
 
+/**
+ * Transform a login error into messages that can be displayed to the user.
+ * Authentication failures use a client-provided message so it can be translated.
+ */
+export const loginErrorToStrings = (err: unknown, authenticationErrorMessage: string) => {
+    if (isAuthenticationError(err)) return [authenticationErrorMessage]
+    return errorToStrings(err)
+}
+
 function isMessageError(err: AxiosError): err is AxiosError<{ message: string }> {
     return !!err.response && !!err.response.data && typeof err.response.data === "object" && "message" in err.response.data
 }