From 09963c0bb15c894e2887d593c17d7fe2393b1c5b Mon Sep 17 00:00:00 2001 From: Patrik <zepatrik@users.noreply.github.com> Date: Tue, 10 Oct 2023 18:37:18 +0200 Subject: [PATCH 1/2] fix: use unique keys for flow nodes --- examples/nextjs-spa/src/pages/recovery.tsx | 5 +-- .../nextjs-spa/src/pages/verification.tsx | 4 +-- examples/preact-spa/src/recovery.tsx | 3 +- examples/preact-spa/src/verification.tsx | 3 +- examples/react-spa/src/Recovery.tsx | 3 +- examples/react-spa/src/Verification.tsx | 3 +- .../ory/helpers/filter-flow-nodes.tsx | 34 ++++++++++++------- 7 files changed, 27 insertions(+), 28 deletions(-) diff --git a/examples/nextjs-spa/src/pages/recovery.tsx b/examples/nextjs-spa/src/pages/recovery.tsx index 4628b1e4b..32cf5cfba 100644 --- a/examples/nextjs-spa/src/pages/recovery.tsx +++ b/examples/nextjs-spa/src/pages/recovery.tsx @@ -84,10 +84,7 @@ const Recovery: NextPageWithLayout = () => { updateRecoveryFlowBody: values, }) .then(({ data }) => { - // reset the form data completely - setFlow(null) - // Form submission was successful, show the message to the user! - getFlow(data.id) + setFlow(data) }) .catch(handleError) diff --git a/examples/nextjs-spa/src/pages/verification.tsx b/examples/nextjs-spa/src/pages/verification.tsx index 25e5f7dfd..5269ab11a 100644 --- a/examples/nextjs-spa/src/pages/verification.tsx +++ b/examples/nextjs-spa/src/pages/verification.tsx @@ -81,10 +81,8 @@ const Verification: NextPageWithLayout = () => { updateVerificationFlowBody: values, }) .then(({ data }) => { - // reset the input fields - setFlow(null) // Form submission was successful, show the message to the user! - getFlow(data.id) + setFlow(data) }) .catch(handleError) diff --git a/examples/preact-spa/src/recovery.tsx b/examples/preact-spa/src/recovery.tsx index 06dc1cda3..c77af5d73 100644 --- a/examples/preact-spa/src/recovery.tsx +++ b/examples/preact-spa/src/recovery.tsx @@ -42,8 +42,7 @@ export const Recovery = () => { }) .then(({ data: flow }) => { // Form submission was successful, show the message to the user! - setFlow(null) - getFlow(flow.id) + setFlow(flow) }) .catch(sdkErrorHandler) } diff --git a/examples/preact-spa/src/verification.tsx b/examples/preact-spa/src/verification.tsx index a7958c548..98a2122a8 100644 --- a/examples/preact-spa/src/verification.tsx +++ b/examples/preact-spa/src/verification.tsx @@ -42,8 +42,7 @@ export const Verification = () => { updateVerificationFlowBody: body, }) .then(({ data: flow }) => { - setFlow(null) - getFlow(flow.id) + setFlow(flow) }) .catch(sdkErrorHandler) } diff --git a/examples/react-spa/src/Recovery.tsx b/examples/react-spa/src/Recovery.tsx index 9640b8c18..389e3a5d7 100644 --- a/examples/react-spa/src/Recovery.tsx +++ b/examples/react-spa/src/Recovery.tsx @@ -44,8 +44,7 @@ export const Recovery = () => { .updateRecoveryFlow({ flow: flow.id, updateRecoveryFlowBody: body }) .then(({ data: flow }) => { // Form submission was successful, show the message to the user! - setFlow(null) - getFlow(flow.id) + setFlow(flow) }) .catch(sdkErrorHandler) } diff --git a/examples/react-spa/src/Verification.tsx b/examples/react-spa/src/Verification.tsx index f6a915a8d..f67366772 100644 --- a/examples/react-spa/src/Verification.tsx +++ b/examples/react-spa/src/Verification.tsx @@ -49,8 +49,7 @@ export const Verification = (): JSX.Element => { updateVerificationFlowBody: body, }) .then(({ data: flow }) => { - setFlow(null) - getFlow(flow.id) + setFlow(flow) }) .catch(sdkErrorHandler) } diff --git a/src/react-components/ory/helpers/filter-flow-nodes.tsx b/src/react-components/ory/helpers/filter-flow-nodes.tsx index d6ea4fcd1..421806540 100644 --- a/src/react-components/ory/helpers/filter-flow-nodes.tsx +++ b/src/react-components/ory/helpers/filter-flow-nodes.tsx @@ -25,20 +25,28 @@ export const FilterFlowNodes = ({ const nodes = filterNodesByGroups(filter) // we don't want to map the csrf token every time, only on the form level - .filter((node) => - getInputName(node) === "csrf_token" && !includeCSRF ? false : true, - ) - .map((node, k) => - ["hidden"].includes(getNodeInputType(node.attributes)) - ? { - node: <Node node={node} key={k} {...overrides} />, - hidden: true, + .filter((node) => includeCSRF || !(getInputName(node) === "csrf_token")) + .map((node, k) => ({ + node: ( + <Node + node={node} + key={ + // input node + "name" in node.attributes + ? node.attributes.name + : // image node + "src" in node.attributes + ? node.attributes.src + : // anchor, text & script node + "id" in node.attributes + ? node.attributes.id + : k } - : { - node: <Node node={node} key={k} {...overrides} />, - hidden: false, - }, - ) + {...overrides} + /> + ), + hidden: getNodeInputType(node.attributes) === "hidden", + })) return nodes.length > 0 ? ( <> {nodes.filter((node) => node.hidden).map((node) => node.node)} From e642b4f504d3ef0402d0f2d2145796a30941365a Mon Sep 17 00:00:00 2001 From: Patrik <zepatrik@users.noreply.github.com> Date: Wed, 11 Oct 2023 09:27:59 +0200 Subject: [PATCH 2/2] fix: use type-guards --- .../ory/helpers/filter-flow-nodes.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/react-components/ory/helpers/filter-flow-nodes.tsx b/src/react-components/ory/helpers/filter-flow-nodes.tsx index 421806540..f1e3c8367 100644 --- a/src/react-components/ory/helpers/filter-flow-nodes.tsx +++ b/src/react-components/ory/helpers/filter-flow-nodes.tsx @@ -3,7 +3,11 @@ import { FilterNodesByGroups, filterNodesByGroups, getNodeInputType, + isUiNodeAnchorAttributes, + isUiNodeImageAttributes, isUiNodeInputAttributes, + isUiNodeScriptAttributes, + isUiNodeTextAttributes, } from "@ory/integrations/ui" import { JSX } from "react" @@ -31,14 +35,13 @@ export const FilterFlowNodes = ({ <Node node={node} key={ - // input node - "name" in node.attributes + isUiNodeInputAttributes(node.attributes) ? node.attributes.name - : // image node - "src" in node.attributes + : isUiNodeImageAttributes(node.attributes) ? node.attributes.src - : // anchor, text & script node - "id" in node.attributes + : isUiNodeAnchorAttributes(node.attributes) || + isUiNodeTextAttributes(node.attributes) || + isUiNodeScriptAttributes(node.attributes) ? node.attributes.id : k }