@ory/elements-react 1.0.0-next.41 → 1.0.0-next.43

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 1.0.0-next.43 (2025-04-10)
+
+### 🚀 Features
+
+- add missing French translations ([#401](https://github.com/ory/elements/pull/401))
+
+### 🩹 Fixes
+
+- two-step registration back button ([#428](https://github.com/ory/elements/pull/428))
+- resolve wcag2aa color contrast issues ([#367](https://github.com/ory/elements/pull/367))
+
+### ❤️  Thank You
+
+- hackerman @aeneasr
+- Jonas Hungershausen
+- Jordan Labrosse
+
 ## 1.0.0-next.41 (2025-04-07)
 
 ### 🩹 Fixes

package/dist/index.js

@@ -189,13 +189,16 @@ function nodesToAuthMethodGroups(nodes, excludeAuthMethods = []) {
     ].includes(group)
   );
 }
-function useNodesGroups(nodes) {
+function useNodesGroups(nodes, { omit } = {}) {
   const groupSorter = useGroupSorter();
   const groups = react.useMemo(() => {
     var _a;
     const groups2 = {};
     for (const node of nodes) {
-      if (node.type === "script") {
+      if ((omit == null ? void 0 : omit.includes("script")) && clientFetch.isUiNodeScriptAttributes(node.attributes)) {
+        continue;
+      }
+      if ((omit == null ? void 0 : omit.includes("input_hidden")) && clientFetch.isUiNodeInputAttributes(node.attributes) && node.attributes.type === "hidden") {
         continue;
       }
       const groupNodes = (_a = groups2[node.group]) != null ? _a : [];
@@ -1141,11 +1144,14 @@ function OryTwoStepCard() {
   const { ui } = flow;
   const nodeSorter = useNodeSorter();
   const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
-  const uniqueGroups = useNodesGroups(ui.nodes);
+  const groupsToShow = useNodesGroups(ui.nodes, {
+    // We only want to render groups that have visible elements.
+    omit: ["script", "input_hidden"]
+  });
   const options = Object.fromEntries(
     Object.values(clientFetch.UiNodeGroupEnum).filter((group) => {
       var _a2;
-      return (_a2 = uniqueGroups.groups[group]) == null ? void 0 : _a2.length;
+      return (_a2 = groupsToShow.groups[group]) == null ? void 0 : _a2.length;
     }).filter(
       (group) => ![
         clientFetch.UiNodeGroupEnum.Oidc,
@@ -1178,7 +1184,7 @@ function OryTwoStepCard() {
     }
   }
   const nonSsoNodes = removeSsoNodes(ui.nodes);
-  const finalNodes = formState.current === "method_active" ? getFinalNodes(uniqueGroups.groups, formState.method) : [];
+  const finalNodes = formState.current === "method_active" ? getFinalNodes(groupsToShow.groups, formState.method) : [];
   const handleAfterFormSubmit = (method) => {
     if (typeof method !== "string" || !isUINodeGroupEnum(method)) {
       return;
@@ -1202,35 +1208,36 @@ function OryTwoStepCard() {
     }
     return true;
   }).length > 0;
+  const captchaNodes = ui.nodes.filter(
+    (n) => n.group === clientFetch.UiNodeGroupEnum.Captcha
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
       showSso && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
       /* @__PURE__ */ jsxRuntime.jsxs(OryForm, { onAfterSubmit: handleAfterFormSubmit, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
-          formState.current === "provide_identifier" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            showSsoDivider && /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
-            nonSsoNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
-          ] }),
-          formState.current === "select_method" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              AuthMethodList,
-              {
-                options,
-                setSelectedGroup: (group) => dispatchFormState({
-                  type: "action_select_method",
-                  method: group
-                })
-              }
-            ),
-            ui.nodes.filter((n) => n.group === clientFetch.UiNodeGroupEnum.Captcha).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
-          ] }),
-          formState.current === "method_active" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            ui.nodes.filter((n) => n.type === "script").map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
-            finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
-          ] })
+        formState.current === "provide_identifier" && /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+          showSsoDivider && /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
+          nonSsoNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+        ] }),
+        formState.current === "select_method" && /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+          Object.entries(options).length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
+          Object.entries(options).length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            AuthMethodList,
+            {
+              options,
+              setSelectedGroup: (group) => dispatchFormState({
+                type: "action_select_method",
+                method: group
+              })
+            }
+          ),
+          captchaNodes.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+        ] }),
+        formState.current === "method_active" && /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+          ui.nodes.filter((n) => n.type === "script").map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
+          finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
       ] })
@@ -1240,6 +1247,9 @@ function OryTwoStepCard() {
 function AuthMethodList({ options, setSelectedGroup }) {
   const { Card } = useComponents();
   const { setValue, getValues } = reactHookForm.useFormContext();
+  if (Object.entries(options).length === 0) {
+    return null;
+  }
   const handleClick = (group, options2) => {
     var _a, _b, _c, _d;
     if (isGroupImmediateSubmit(group)) {
@@ -1665,16 +1675,19 @@ function SettingsSectionContent({ group, nodes }) {
   const { Card } = useComponents();
   const intl = reactIntl.useIntl();
   const { flow } = useOryFlow();
-  const uniqueGroups = useNodesGroups(flow.ui.nodes);
+  const groupedNodes = useNodesGroups(flow.ui.nodes, {
+    // Script nodes are already handled by the parent component.
+    omit: ["script"]
+  });
   if (group === clientFetch.UiNodeGroupEnum.Totp) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.totp,
+        nodes: groupedNodes.groups.totp,
         "data-testid": "ory/screen/settings/group/totp",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsTotp, { nodes: (_a = uniqueGroups.groups.totp) != null ? _a : [] }),
-          (_b = uniqueGroups.groups.default) == null ? void 0 : _b.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsTotp, { nodes: (_a = groupedNodes.groups.totp) != null ? _a : [] }),
+          (_b = groupedNodes.groups.default) == null ? void 0 : _b.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
         ]
       }
     );
@@ -1683,16 +1696,16 @@ function SettingsSectionContent({ group, nodes }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.lookup_secret,
+        nodes: groupedNodes.groups.lookup_secret,
         "data-testid": "ory/screen/settings/group/lookup_secret",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             OrySettingsRecoveryCodes,
             {
-              nodes: (_c = uniqueGroups.groups.lookup_secret) != null ? _c : []
+              nodes: (_c = groupedNodes.groups.lookup_secret) != null ? _c : []
             }
           ),
-          (_d = uniqueGroups.groups.default) == null ? void 0 : _d.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          (_d = groupedNodes.groups.default) == null ? void 0 : _d.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
         ]
       }
     );
@@ -1701,11 +1714,11 @@ function SettingsSectionContent({ group, nodes }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.oidc,
+        nodes: groupedNodes.groups.oidc,
         "data-testid": "ory/screen/settings/group/oidc",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsOidc, { nodes: (_e = uniqueGroups.groups.oidc) != null ? _e : [] }),
-          (_f = uniqueGroups.groups.default) == null ? void 0 : _f.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsOidc, { nodes: (_e = groupedNodes.groups.oidc) != null ? _e : [] }),
+          (_f = groupedNodes.groups.default) == null ? void 0 : _f.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
         ]
       }
     );
@@ -1714,11 +1727,11 @@ function SettingsSectionContent({ group, nodes }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.webauthn,
+        nodes: groupedNodes.groups.webauthn,
         "data-testid": "ory/screen/settings/group/webauthn",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsWebauthn, { nodes: (_g = uniqueGroups.groups.webauthn) != null ? _g : [] }),
-          (_h = uniqueGroups.groups.default) == null ? void 0 : _h.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsWebauthn, { nodes: (_g = groupedNodes.groups.webauthn) != null ? _g : [] }),
+          (_h = groupedNodes.groups.default) == null ? void 0 : _h.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
         ]
       }
     );
@@ -1727,11 +1740,11 @@ function SettingsSectionContent({ group, nodes }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       OryFormSection,
       {
-        nodes: uniqueGroups.groups.passkey,
+        nodes: groupedNodes.groups.passkey,
         "data-testid": "ory/screen/settings/group/passkey",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsPasskey, { nodes: (_i = uniqueGroups.groups.passkey) != null ? _i : [] }),
-          (_j = uniqueGroups.groups.default) == null ? void 0 : _j.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          /* @__PURE__ */ jsxRuntime.jsx(OrySettingsPasskey, { nodes: (_i = groupedNodes.groups.passkey) != null ? _i : [] }),
+          (_j = groupedNodes.groups.default) == null ? void 0 : _j.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
         ]
       }
     );
@@ -1752,7 +1765,7 @@ function SettingsSectionContent({ group, nodes }) {
               id: `settings.${group}.description`
             }),
             children: [
-              (_k = uniqueGroups.groups.default) == null ? void 0 : _k.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
+              (_k = groupedNodes.groups.default) == null ? void 0 : _k.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
               nodes.filter(
                 (node) => "type" in node.attributes && node.attributes.type !== "submit"
               ).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
@@ -1766,16 +1779,16 @@ function SettingsSectionContent({ group, nodes }) {
     }
   );
 }
-var getScriptNode = (nodes) => nodes.find(
-  (node) => "id" in node.attributes && node.attributes.id === "webauthn_script"
+var onlyScriptNodes = (nodes) => nodes.filter(
+  (node) => clientFetch.isUiNodeScriptAttributes(node.attributes) && node.attributes.id === "webauthn_script"
 );
 function OrySettingsCard() {
   const { flow } = useOryFlow();
-  const uniqueGroups = useNodesGroups(flow.ui.nodes);
-  const scriptNode = getScriptNode(flow.ui.nodes);
+  const uniqueGroups = useNodesGroups(flow.ui.nodes, { omit: ["script"] });
+  const scriptNodes = onlyScriptNodes(flow.ui.nodes);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
-    scriptNode && /* @__PURE__ */ jsxRuntime.jsx(Node, { node: scriptNode }),
+    scriptNodes.map((n) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node: n })),
     uniqueGroups.entries.map(([group, nodes]) => {
       if (group === clientFetch.UiNodeGroupEnum.Default) {
         return null;
@@ -2301,7 +2314,7 @@ var de_default = {
   "two-step.code.description": "Ein Best\xE4tigungscode wird an Ihre E-Mail gesendet.",
   "two-step.code.title": "E-Mail-Code",
   "two-step.passkey.description": "Verwenden Sie die Fingerabdruck- oder Gesichtserkennung Ihres Ger\xE4ts",
-  "two-step.passkey.title": "Passwort (empfohlen)",
+  "two-step.passkey.title": "Passkey (empfohlen)",
   "two-step.password.description": "Geben Sie Ihr Passwort ein, das mit Ihrem Konto verkn\xFCpft ist",
   "two-step.password.title": "Passwort",
   "two-step.webauthn.title": "Sicherheitsschl\xFCssel",