feat: hide label on hidden input type (#149)

ory · Sep 26, 2023 · 19ef0a9 · 19ef0a9
1 parent 85cc979
commit 19ef0a9
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 21 deletions.
diff --git a/src/react-components/input-field.tsx b/src/react-components/input-field.tsx
@@ -40,7 +40,7 @@ export const InputField = ({
       data-testid={dataTestid}
       className={cn(className, gridStyle({ gap: 4 }))}
     >
-      {title && (
+      {title && props.type !== "hidden" && (
         <label
           htmlFor={inputId}
           className={typographyStyle({ size: "small", type: "regular" })}

diff --git a/src/react-components/ory/helpers/node.spec.tsx b/src/react-components/ory/helpers/node.spec.tsx
@@ -0,0 +1,28 @@
+import { test, expect } from "@playwright/experimental-ct-react"
+import { Node } from "./node"
+
+test("hidden input field shouldn't show label", async ({ mount }) => {
+  const component = await mount(
+    <Node
+      node={{
+        group: "default",
+        attributes: {
+          name: "name",
+          disabled: false,
+          type: "hidden",
+          node_type: "input",
+          label: {
+            type: "info",
+            text: "Hidden input",
+            id: 1234,
+          },
+        },
+        messages: [],
+        meta: {},
+        type: "input",
+      }}
+    />,
+  )
+
+  await expect(component).toBeHidden()
+})
diff --git a/src/react-components/ory/sections/auth-code-section.spec.tsx b/src/react-components/ory/sections/auth-code-section.spec.tsx
@@ -29,14 +29,33 @@ test("should render when ui nodes contain `code` group", async ({ mount }) => {
           group: "code",
           attributes: {
             name: "resend",
-            node_type: "hidden",
-            type: "hidden",
+            node_type: "input",
+            type: "submit",
             required: true,
             disabled: false,
             value: "code",
           },
           messages: [],
           type: "input",
+          meta: {
+            label: {
+              id: 1070008,
+              text: "Resend Code",
+              type: "info",
+            },
+          },
+        },
+        {
+          group: "code",
+          attributes: {
+            name: "method",
+            node_type: "input",
+            type: "hidden",
+            disabled: false,
+            value: "code",
+          },
+          messages: [],
+          type: "input",
           meta: {},
         },
         {
@@ -45,15 +64,14 @@ test("should render when ui nodes contain `code` group", async ({ mount }) => {
             name: "method",
             node_type: "input",
             type: "submit",
-            required: true,
             disabled: false,
             value: "code",
           },
           messages: [],
           type: "input",
           meta: {
             label: {
-              id: 1040006,
+              id: 1070005,
               text: "Sign up with code",
               type: "info",
             },
@@ -63,7 +81,10 @@ test("should render when ui nodes contain `code` group", async ({ mount }) => {
     />,
   )
   await expect(container.locator("input[name=code]")).toBeVisible()
-  await expect(container.locator("input[name=resend]")).toBeHidden()
+  await expect(
+    container.locator('input[name=method][value="code"]'),
+  ).toBeAttached()
+  await expect(container.locator("button[name=resend]")).toBeVisible()
   await expect(container.locator("button[name=method]")).toBeVisible()
 })
 

diff --git a/src/react-components/ory/sections/auth-code-section.tsx b/src/react-components/ory/sections/auth-code-section.tsx
@@ -11,27 +11,38 @@ export const AuthCodeSection = ({
   nodes,
 }: AuthCodeSectionProps): JSX.Element | null =>
   hasCode(nodes) ? (
-    <div className={gridStyle({ gap: 32 })}>
-      <div className={gridStyle({ gap: 16 })}>
-        {/* default group is used here automatically for login */}
+    <>
+      {/* place this outisde of the grid so that hidden fields dont break the layout */}
+      <FilterFlowNodes
+        filter={{
+          nodes: nodes,
+          groups: "code",
+          withoutDefaultAttributes: true,
+          attributes: ["hidden"],
+        }}
+      />
+      <div className={gridStyle({ gap: 32 })}>
+        <div className={gridStyle({ gap: 16 })}>
+          {/* default group is used here automatically for login */}
+          <FilterFlowNodes
+            filter={{
+              nodes: nodes,
+              groups: "code",
+              withoutDefaultAttributes: true,
+              excludeAttributes: ["hidden", "button", "submit"], // the form will take care of default (csrf) hidden fields
+            }}
+          />
+        </div>
+        {/* include hidden here because we want to have resend support */}
+        {/* exclude default group because we dont want to map csrf twice */}
         <FilterFlowNodes
           filter={{
             nodes: nodes,
             groups: "code",
             withoutDefaultAttributes: true,
-            excludeAttributes: ["hidden", "button", "submit"], // the form will take care of hidden fields
+            attributes: ["button", "submit"],
           }}
         />
       </div>
-      {/* include hidden here because we want to have resend support */}
-      {/* exclude default group because we dont want to map csrf twice */}
-      <FilterFlowNodes
-        filter={{
-          nodes: nodes,
-          groups: "code",
-          withoutDefaultAttributes: true,
-          attributes: ["button", "submit"],
-        }}
-      />
-    </div>
+    </>
   ) : null