feat: add two-step login card (#211)

Co-authored-by: Miłosz Szekiel <[email protected]>

packages/elements-react/.vscode/i18n-ally-reviews.yml

@@ -0,0 +1,3 @@
+# Review comments generated by i18n-ally. Please commit this file.
+
+{}

packages/elements-react/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "i18n-ally.localesPaths": ["src/locales", "src/util/i18n"],
+  "i18n-ally.keystyle": "flat"
+}

packages/elements-react/package.json

@@ -28,24 +28,25 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@ory/client-fetch": "1.15.3",
+    "@ory/client-fetch": "^1.15.4",
     "clsx": "2.1.1",
     "input-otp": "1.2.4",
-    "react-hook-form": "7.52.1",
-    "tailwind-merge": "2.4.0",
-    "react-intl": "6.4.4"
+    "react-hook-form": "7.53.0",
+    "react-intl": "6.7.0",
+    "tailwind-merge": "2.5.2"
   },
   "peerDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@svgr/plugin-jsx": "^8.1.0",
-    "esbuild-plugin-svgr": "2.1.0",
-    "eslint-plugin-react": "7.35.0",
+    "@hookform/devtools": "^4.3.1",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "esbuild-plugin-svgr": "^2.1.0",
+    "eslint-plugin-react": "7.37.0",
     "postcss": "8.4.47",
     "postcss-prefix-selector": "1.16.1",
-    "tsup": "8.2.3"
+    "tsup": "8.3.0"
   },
   "keywords": [
     "ory",

packages/elements-react/src/components/card/__tests__/card-two-step.spec.ts

@@ -0,0 +1,130 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  filterZeroStepGroups,
+  getFinalNodes,
+  isChoosingMethod,
+} from "../card-two-step.utils"
+import { UiNode, UiNodeAttributes, UiNodeGroupEnum } from "@ory/client-fetch"
+
+describe("CardTwoStep/utils", () => {
+  describe("filterZeroStepGroups", () => {
+    test("should filter out nodes with group Oidc", () => {
+      const nodes: UiNode[] = [
+        { group: UiNodeGroupEnum.Oidc } as UiNode,
+        { group: UiNodeGroupEnum.Default } as UiNode,
+      ]
+      const result = filterZeroStepGroups(nodes)
+      expect(result).toHaveLength(1)
+      expect(result[0].group).toBe(UiNodeGroupEnum.Default)
+    })
+  })
+
+  describe("isChoosingMethod", () => {
+    test("should return true if a node has value 'profile:back'", () => {
+      const uiNodes: UiNode[] = [
+        {
+          attributes: { value: "profile:back" } as UiNodeAttributes,
+          group: UiNodeGroupEnum.Default,
+        } as UiNode,
+      ]
+      expect(isChoosingMethod(uiNodes)).toBe(true)
+    })
+
+    test("should return true if a node is identifier first and hidden", () => {
+      const uiNodes: UiNode[] = [
+        {
+          attributes: {
+            name: "identifier",
+            type: "hidden",
+          } as UiNodeAttributes,
+          group: UiNodeGroupEnum.IdentifierFirst,
+        } as UiNode,
+      ]
+      expect(isChoosingMethod(uiNodes)).toBe(true)
+    })
+
+    test("should return false if no conditions are met", () => {
+      const uiNodes: UiNode[] = [
+        {
+          attributes: { name: "other", type: "text" } as UiNodeAttributes,
+          group: UiNodeGroupEnum.Default,
+        } as UiNode,
+      ]
+      expect(isChoosingMethod(uiNodes)).toBe(false)
+    })
+  })
+
+  describe("getFinalNodes", () => {
+    test("should return hidden nodes from identifier_first and default groups, concatenated with selected nodes", () => {
+      const uniqueGroups = {
+        identifier_first: [
+          {
+            attributes: { type: "hidden" } as UiNodeAttributes,
+          } as UiNode,
+        ],
+        default: [
+          {
+            attributes: { type: "hidden" } as UiNodeAttributes,
+          } as UiNode,
+        ],
+      }
+      const selectedGroup = UiNodeGroupEnum.Default
+      const result = getFinalNodes(uniqueGroups, selectedGroup)
+      expect(result).toHaveLength(3)
+    })
+
+    test("should return only hidden nodes if no group is selected", () => {
+      const uniqueGroups = {
+        identifier_first: [
+          {
+            attributes: { type: "hidden" } as UiNodeAttributes,
+          } as UiNode,
+        ],
+        default: [
+          {
+            attributes: { type: "hidden" } as UiNodeAttributes,
+          } as UiNode,
+        ],
+      }
+      const result = getFinalNodes(uniqueGroups, undefined)
+      expect(result).toHaveLength(2)
+    })
+
+    test("should return an empty array if no hidden nodes are found and no group is selected", () => {
+      const uniqueGroups = {
+        identifier_first: [
+          {
+            attributes: { type: "text" } as UiNodeAttributes,
+          } as UiNode,
+        ],
+        default: [
+          {
+            attributes: { type: "text" } as UiNodeAttributes,
+          } as UiNode,
+        ],
+      }
+      const result = getFinalNodes(uniqueGroups, undefined)
+      expect(result).toHaveLength(0)
+    })
+
+    test("should return selected nodes if no hidden nodes are found", () => {
+      const uniqueGroups = {
+        identifier_first: [
+          {
+            attributes: { type: "text" } as UiNodeAttributes,
+          } as UiNode,
+        ],
+        default: [
+          {
+            attributes: { type: "text" } as UiNodeAttributes,
+          } as UiNode,
+        ],
+      }
+      const selectedGroup = UiNodeGroupEnum.Default
+      const result = getFinalNodes(uniqueGroups, selectedGroup)
+      expect(result).toHaveLength(1)
+    })
+  })
+})