feat(ui): update SignInForm default authentication error message

.changeset/shiny-clowns-divide.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": patch
+---
+
+feat(ui): update `SignInForm` default authentication error message 

packages/ui-components/src/components/SignInForm/SignInForm.component.tsx

@@ -31,7 +31,7 @@ export interface SignInFormProps extends Omit<FormHTMLAttributes<HTMLFormElement
   /**
    * Error message to display when authentication fails.
    * Pass a string for a custom error message.
-   * Pass `true` to display the default error message "Authentication failed".
+   * Pass `true` to display the default error message "Unable to authenticate the provided credentials.".
    * Pass `false` or omit to hide the error message.
    */
   error?: string | boolean
@@ -69,7 +69,8 @@ export const SignInForm = ({
   children,
   ...props
 }: SignInFormProps): ReactNode => {
-  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 (
     <form className={`juno-sign-in-form ${className}`} {...props}>

packages/ui-components/src/components/SignInForm/SignInForm.stories.tsx

@@ -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: {

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(<SignInForm data-testid="my-signin-form" />)
-      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(<SignInForm data-testid="my-signin-form" error={false} />)
-      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(<SignInForm data-testid="my-signin-form" error={true} />)
-      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(<SignInForm data-testid="my-signin-form" error="Invalid credentials. Please try again." />)
       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(<SignInForm data-testid="my-signin-form" error="" />)
-      expect(screen.queryByText("Authentication failed")).not.toBeInTheDocument()
+      expect(screen.queryByText("Unable to authenticate the provided credentials.")).not.toBeInTheDocument()
     })
   })