fix: show identifier_first node in card header (#215)

packages/elements-react/src/tests/jest/test-utils.tsx

@@ -2,6 +2,7 @@ import { PropsWithChildren, ReactElement } from "react"
 import { OryComponentProvider } from "../../context"
 import { OryDefaultComponents } from "../../theme/default"
 import { render, RenderOptions } from "@testing-library/react"
+import { OryClientConfiguration } from "../../util"
 
 const AllProviders = ({ children }: PropsWithChildren) => (
   <OryComponentProvider components={OryDefaultComponents}>
@@ -14,5 +15,21 @@ const customRender = (
   options?: Omit<RenderOptions, "wrapper">,
 ) => render(ui, { wrapper: AllProviders, ...options })
 
+export const defaultConfiguration: OryClientConfiguration = {
+  name: "test",
+  project: {
+    login_ui_url: "http://localhost:4455/login",
+    recovery_ui_url: "http://localhost:4455/recovery",
+    registration_ui_url: "http://localhost:4455/registration",
+    verification_ui_url: "http://localhost:4455/verification",
+    recovery_enabled: true,
+    registration_enabled: true,
+    verification_enabled: true,
+  },
+  sdk: {
+    url: "http://localhost:4455",
+  },
+}
+
 export * from "@testing-library/react"
 export { customRender as render }

packages/elements-react/src/theme/default/components/card/header.tsx

@@ -1,98 +1,5 @@
-import { FlowType, isUiNodeInputAttributes } from "@ory/client-fetch"
-import { FlowContainer, useComponents, useOryFlow } from "@ory/elements-react"
-
-function joinWithCommaOr(list: string[]): string {
-  if (list.length === 0) {
-    return "."
-  } else if (list.length === 1) {
-    return list[0] + "."
-  } else {
-    const last = list.pop()
-    return `${list.join(", ")} or ${last}.`
-  }
-}
-
-function constructCardHeaderText(container: FlowContainer) {
-  const parts = []
-  const ui = container.flow.ui
-
-  if (ui.nodes.find((node) => node.group === "password")) {
-    switch (container.flowType) {
-      case FlowType.Registration:
-        parts.push(`your email and a password`)
-        break
-      default:
-        parts.push(`your email and password`)
-    }
-  }
-  if (ui.nodes.find((node) => node.group === "oidc")) {
-    parts.push(`a social provider`)
-  }
-
-  if (ui.nodes.find((node) => node.group === "code")) {
-    parts.push(`a code sent to your email`)
-  }
-
-  // TODO - PassKeys
-  if (ui.nodes.find((node) => node.group === "passkey")) {
-    parts.push(`a PassKey`)
-  }
-
-  if (ui.nodes.find((node) => node.group === "webauthn")) {
-    parts.push(`a security key`)
-  }
-
-  if (ui.nodes.find((node) => node.group === "default")) {
-    const primaryIdentifier = ui.nodes.filter(
-      (node) =>
-        isUiNodeInputAttributes(node.attributes) &&
-        node.attributes.name.startsWith("traits"),
-    )
-    if (primaryIdentifier.length == 1) {
-      const label = primaryIdentifier[0].meta.label
-      if (label) {
-        parts.push(`your ${label.text}`)
-      }
-    }
-  }
-
-  switch (container.flowType) {
-    case FlowType.Login:
-      if (container.flow.refresh) {
-        return {
-          title: "Reauthenticate",
-          description: "Confirm your identity with " + joinWithCommaOr(parts),
-        }
-      }
-      return {
-        title: "Sign in",
-        description:
-          parts.length > 0 ? "Sign in with " + joinWithCommaOr(parts) : "",
-      }
-    case FlowType.Registration:
-      return {
-        title: "Sign up",
-        description:
-          parts.length > 0 ? "Sign up with " + joinWithCommaOr(parts) : "",
-      }
-    case FlowType.Recovery:
-      return {
-        title: "Recover your account",
-        description:
-          "Enter the email address associated with your account to receive a one-time access code",
-      }
-    case FlowType.Settings:
-      return {
-        title: "Update your account",
-      }
-    case FlowType.Verification:
-      return {
-        title: "Verify your account",
-        description:
-          "Enter the email address associated with your account to verify it",
-      }
-  }
-}
+import { useComponents, useOryFlow } from "@ory/elements-react"
+import { constructCardHeaderText } from "../../utils/constructCardHeader"
 
 function InnerCardHeader({ title, text }: { title: string; text?: string }) {
   const { CardLogo } = useComponents()
@@ -111,7 +18,10 @@ function InnerCardHeader({ title, text }: { title: string; text?: string }) {
 
 export function DefaultCardHeader() {
   const context = useOryFlow()
-  const { title, description } = constructCardHeaderText(context)
+  const { title, description } = constructCardHeaderText(
+    context.flow.ui.nodes,
+    context,
+  )
 
   return <InnerCardHeader title={title} text={description} />
 }