fix: add card header detection for profile_first

GitOrigin-RevId: 5881c675187abe98591efdf252891c5a0d675ccd

Author: hperl

packages/elements-react/src/theme/default/utils/__tests__/__snapshots__/constructCardHeader.spec.tsx.snap

@@ -134,6 +134,13 @@ exports[`flowType=login refresh=false combination=password constructCardHeaderTe
 }
 `;
 
+exports[`flowType=login refresh=false combination=profile_first_registration constructCardHeaderText 1`] = `
+{
+  "description": "Sign in with your Email",
+  "title": "Sign in",
+}
+`;
+
 exports[`flowType=login refresh=false combination=webauthn constructCardHeaderText 1`] = `
 {
   "description": "Sign in with a security key",
@@ -232,6 +239,13 @@ exports[`flowType=login refresh=true combination=password constructCardHeaderTex
 }
 `;
 
+exports[`flowType=login refresh=true combination=profile_first_registration constructCardHeaderText 1`] = `
+{
+  "description": "Confirm your identity with your Email",
+  "title": "Reauthenticate",
+}
+`;
+
 exports[`flowType=login refresh=true combination=webauthn constructCardHeaderText 1`] = `
 {
   "description": "Confirm your identity with a security key",
@@ -332,6 +346,13 @@ exports[`flowType=recovery refresh=false combination=password constructCardHeade
 }
 `;
 
+exports[`flowType=recovery refresh=false combination=profile_first_registration constructCardHeaderText 1`] = `
+{
+  "description": "Enter the email address associated with your account to receive a one-time access code",
+  "title": "Recover your account",
+}
+`;
+
 exports[`flowType=recovery refresh=false combination=webauthn constructCardHeaderText 1`] = `
 {
   "description": "Enter the email address associated with your account to receive a one-time access code",
@@ -432,6 +453,13 @@ exports[`flowType=recovery refresh=true combination=password constructCardHeader
 }
 `;
 
+exports[`flowType=recovery refresh=true combination=profile_first_registration constructCardHeaderText 1`] = `
+{
+  "description": "Enter the email address associated with your account to receive a one-time access code",
+  "title": "Recover your account",
+}
+`;
+
 exports[`flowType=recovery refresh=true combination=webauthn constructCardHeaderText 1`] = `
 {
   "description": "Enter the email address associated with your account to receive a one-time access code",
@@ -530,6 +558,13 @@ exports[`flowType=registration refresh=false combination=password constructCardH
 }
 `;
 
+exports[`flowType=registration refresh=false combination=profile_first_registration constructCardHeaderText 1`] = `
+{
+  "description": "Sign up with your Email",
+  "title": "Register an account",
+}
+`;
+
 exports[`flowType=registration refresh=false combination=webauthn constructCardHeaderText 1`] = `
 {
   "description": "Sign up with a security key",
@@ -628,6 +663,13 @@ exports[`flowType=registration refresh=true combination=password constructCardHe
 }
 `;
 
+exports[`flowType=registration refresh=true combination=profile_first_registration constructCardHeaderText 1`] = `
+{
+  "description": "Sign up with your Email",
+  "title": "Register an account",
+}
+`;
+
 exports[`flowType=registration refresh=true combination=webauthn constructCardHeaderText 1`] = `
 {
   "description": "Sign up with a security key",
@@ -726,6 +768,13 @@ exports[`flowType=settings refresh=false combination=password constructCardHeade
 }
 `;
 
+exports[`flowType=settings refresh=false combination=profile_first_registration constructCardHeaderText 1`] = `
+{
+  "description": "Update your account settings",
+  "title": "Account Settings",
+}
+`;
+
 exports[`flowType=settings refresh=false combination=webauthn constructCardHeaderText 1`] = `
 {
   "description": "Update your account settings",
@@ -824,6 +873,13 @@ exports[`flowType=settings refresh=true combination=password constructCardHeader
 }
 `;
 
+exports[`flowType=settings refresh=true combination=profile_first_registration constructCardHeaderText 1`] = `
+{
+  "description": "Update your account settings",
+  "title": "Account Settings",
+}
+`;
+
 exports[`flowType=settings refresh=true combination=webauthn constructCardHeaderText 1`] = `
 {
   "description": "Update your account settings",
@@ -924,6 +980,13 @@ exports[`flowType=verification refresh=false combination=password constructCardH
 }
 `;
 
+exports[`flowType=verification refresh=false combination=profile_first_registration constructCardHeaderText 1`] = `
+{
+  "description": "Enter the email address associated with your account to verify it",
+  "title": "Verify your account",
+}
+`;
+
 exports[`flowType=verification refresh=false combination=webauthn constructCardHeaderText 1`] = `
 {
   "description": "Enter the email address associated with your account to verify it",
@@ -1024,6 +1087,13 @@ exports[`flowType=verification refresh=true combination=password constructCardHe
 }
 `;
 
+exports[`flowType=verification refresh=true combination=profile_first_registration constructCardHeaderText 1`] = `
+{
+  "description": "Enter the email address associated with your account to verify it",
+  "title": "Verify your account",
+}
+`;
+
 exports[`flowType=verification refresh=true combination=webauthn constructCardHeaderText 1`] = `
 {
   "description": "Enter the email address associated with your account to verify it",

packages/elements-react/src/theme/default/utils/__tests__/constructCardHeader.spec.tsx

@@ -178,6 +178,26 @@ const identifierFirstPhone: UiNode = {
   },
 }
 
+const profileSubmit: UiNode = {
+  type: "input",
+  group: "profile",
+  attributes: {
+    name: "method",
+    type: "submit",
+    value: "profile",
+    disabled: false,
+    node_type: "input",
+  },
+  messages: [],
+  meta: {
+    label: {
+      id: 1040001,
+      text: "Sign up",
+      type: "info",
+    },
+  },
+}
+
 const combinations = {
   oidc,
   code,
@@ -193,6 +213,7 @@ const combinations = {
   default_and_passkeys: [defaultGroup, passkey],
   default_and_webauthn: [defaultGroup, aal2Nodes.webauthn],
   idenfier_first_and_oidc: [identifierFirst, oidc],
+  profile_first_registration: [defaultGroup, profileSubmit],
 }
 
 const wrapper = ({ children }: PropsWithChildren) => (

packages/elements-react/src/theme/default/utils/constructCardHeader.ts

@@ -226,6 +226,28 @@ export function useCardHeaderText(
     }
   }
 
+  if (nodes.some((node) => node.group === "profile")) {
+    const identifier = nodes.find(
+      (node) =>
+        isUiNodeInputAttributes(node.attributes) &&
+        node.attributes.name.startsWith("traits.") &&
+        node.attributes.type !== "hidden",
+    )
+
+    if (identifier) {
+      parts.push(
+        intl.formatMessage(
+          {
+            id: "card.header.parts.identifier-first",
+          },
+          {
+            identifierLabel: identifier.meta.label?.text,
+          },
+        ),
+      )
+    }
+  }
+
   switch (opts.flowType) {
     case FlowType.Login:
       if (opts.flow.refresh) {