diff --git a/.changeset/shiny-clowns-divide.md b/.changeset/shiny-clowns-divide.md new file mode 100644 index 0000000000..487cc04602 --- /dev/null +++ b/.changeset/shiny-clowns-divide.md @@ -0,0 +1,5 @@ +--- +"@cloudoperators/juno-ui-components": patch +--- + +feat(ui): update `SignInForm` default authentication error message diff --git a/packages/ui-components/src/components/SignInForm/SignInForm.component.tsx b/packages/ui-components/src/components/SignInForm/SignInForm.component.tsx index c813fae5d2..9aa4d4baec 100644 --- a/packages/ui-components/src/components/SignInForm/SignInForm.component.tsx +++ b/packages/ui-components/src/components/SignInForm/SignInForm.component.tsx @@ -31,7 +31,7 @@ export interface SignInFormProps extends Omit { - const errorMessage = error === true ? "Authentication failed" : typeof error === "string" ? error : null + const errorMessage = + error === true ? "Unable to authenticate the provided credentials." : typeof error === "string" ? error : null return (
diff --git a/packages/ui-components/src/components/SignInForm/SignInForm.stories.tsx b/packages/ui-components/src/components/SignInForm/SignInForm.stories.tsx index ad7cf4fcef..6425ffb208 100644 --- a/packages/ui-components/src/components/SignInForm/SignInForm.stories.tsx +++ b/packages/ui-components/src/components/SignInForm/SignInForm.stories.tsx @@ -44,7 +44,7 @@ const commonFormChildren = (additionalInputs?: React.ReactNode) => [ {additionalInputs} , - , ] @@ -65,6 +65,22 @@ export const Default: Story = { }, } +export const WithError: Story = { + parameters: { + docs: { + description: { + story: "Sign-in form displaying the default authentication error message when `error={true}` is passed.", + }, + }, + }, + args: { + title: "Sign In", + error: true, + resetPwUrl: "#", + children: commonFormChildren(), + }, +} + export const AdditionalInputs: Story = { parameters: { docs: { diff --git a/packages/ui-components/src/components/SignInForm/SignInForm.test.tsx b/packages/ui-components/src/components/SignInForm/SignInForm.test.tsx index 31e4a26f75..5913faf433 100644 --- a/packages/ui-components/src/components/SignInForm/SignInForm.test.tsx +++ b/packages/ui-components/src/components/SignInForm/SignInForm.test.tsx @@ -76,23 +76,23 @@ describe("SignInForm Component Tests", () => { describe("Error Prop", () => { test("does not display error message by default", () => { render() - expect(screen.queryByText("Authentication failed")).not.toBeInTheDocument() + expect(screen.queryByText("Unable to authenticate the provided credentials.")).not.toBeInTheDocument() }) test("does not display error when error={false}", () => { render() - expect(screen.queryByText("Authentication failed")).not.toBeInTheDocument() + expect(screen.queryByText("Unable to authenticate the provided credentials.")).not.toBeInTheDocument() }) test("displays default error message when error={true}", () => { render() - expect(screen.getByText("Authentication failed")).toBeInTheDocument() + expect(screen.getByText("Unable to authenticate the provided credentials.")).toBeInTheDocument() }) test("displays custom error message when error is a string", () => { render() expect(screen.getByText("Invalid credentials. Please try again.")).toBeInTheDocument() - expect(screen.queryByText("Authentication failed")).not.toBeInTheDocument() + expect(screen.queryByText("Unable to authenticate the provided credentials.")).not.toBeInTheDocument() }) test("error message renders as Message component with error variant", () => { @@ -104,7 +104,7 @@ describe("SignInForm Component Tests", () => { test("does not render error when error is empty string", () => { render() - expect(screen.queryByText("Authentication failed")).not.toBeInTheDocument() + expect(screen.queryByText("Unable to authenticate the provided credentials.")).not.toBeInTheDocument() }) })