@ory/elements-react 0.0.0-pr.3a98de9 → 0.0.0-pr.4a28a8f

package/CHANGELOG.md

@@ -1,3 +1,63 @@
+## 1.0.0-next.39 (2025-03-25)
+
+### 🚀 Features
+
+- add SAML group handling ([#390](https://github.com/ory/elements/pull/390))
+
+### ❤️  Thank You
+
+- hackerman @aeneasr
+
+## 1.0.0-next.38 (2025-03-24)
+
+### 🩹 Fixes
+
+- hide registration link again ([#387](https://github.com/ory/elements/pull/387))
+
+### ❤️  Thank You
+
+- hackerman @aeneasr
+
+## 1.0.0-next.37 (2025-03-12)
+
+### 🩹 Fixes
+
+- correctly render test id for error card ([#386](https://github.com/ory/elements/pull/386))
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.36 (2025-03-12)
+
+### 🩹 Fixes
+
+- handle error messages for selected methods ([#385](https://github.com/ory/elements/pull/385))
+
+### ❤️  Thank You
+
+- Pierre Caillaud @pcaillaudm
+
+## 1.0.0-next.35 (2025-03-12)
+
+### 🚀 Features
+
+- add more intelligent error screen ([#383](https://github.com/ory/elements/pull/383))
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.34 (2025-03-12)
+
+### 🩹 Fixes
+
+- use correct import paths ([#384](https://github.com/ory/elements/pull/384))
+
+### ❤️  Thank You
+
+- hackerman @aeneasr
+
 ## 1.0.0-next.33 (2025-03-07)
 
 ### 🚀 Features

package/dist/index.d.mts

@@ -404,6 +404,7 @@ type OryClientConfiguration = {
         registration_ui_url: string;
         verification_ui_url: string;
         login_ui_url: string;
+        default_redirect_url?: string;
     };
     intl?: IntlConfig;
 };

package/dist/index.d.ts

@@ -404,6 +404,7 @@ type OryClientConfiguration = {
         registration_ui_url: string;
         verification_ui_url: string;
         login_ui_url: string;
+        default_redirect_url?: string;
     };
     intl?: IntlConfig;
 };

package/dist/index.js

@@ -36,6 +36,7 @@ function useGroupSorter() {
 }
 var defaultNodeOrder = [
   "oidc",
+  "saml",
   "identifier_first",
   "default",
   "profile",
@@ -100,8 +101,10 @@ function isChoosingMethod(flow) {
     (node) => node.group === clientFetch.UiNodeGroupEnum.IdentifierFirst && "name" in node.attributes && node.attributes.name === "identifier" && node.attributes.type === "hidden"
   ) || flow.flowType === clientFetch.FlowType.Login && flow.flow.requested_aal === "aal2";
 }
-function filterOidcOut(nodes) {
-  return nodes.filter((node) => node.group !== clientFetch.UiNodeGroupEnum.Oidc);
+function removeSsoNodes(nodes) {
+  return nodes.filter(
+    (node) => !(node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml)
+  );
 }
 function getFinalNodes(uniqueGroups, selectedGroup) {
   var _a, _b, _c, _d;
@@ -234,7 +237,9 @@ function parseStateFromFlow(flow) {
         return { current: "method_active", method: "code" };
       } else if (methodWithMessage) {
         return { current: "method_active", method: methodWithMessage.group };
-      } else if (flow.flow.active && !["default", "identifier_first", "oidc"].includes(flow.flow.active)) {
+      } else if (flow.flow.active && !["default", "identifier_first", "oidc", "saml"].includes(
+        flow.flow.active
+      )) {
         return { current: "method_active", method: flow.flow.active };
       } else if (isChoosingMethod(flow)) {
         const authMethods = nodesToAuthMethodGroups(flow.flow.ui.nodes);
@@ -264,17 +269,24 @@ function parseStateFromFlow(flow) {
   );
   throw new Error("Unknown form state");
 }
-function formStateReducer(state, action) {
-  switch (action.type) {
-    case "action_flow_update":
-      return parseStateFromFlow(action.flow);
-    case "action_select_method":
-      return { current: "method_active", method: action.method };
-  }
-  return state;
-}
 function useFormStateReducer(flow) {
-  return react.useReducer(formStateReducer, parseStateFromFlow(flow));
+  const action = parseStateFromFlow(flow);
+  const [selectedMethod, setSelectedMethod] = react.useState();
+  const formStateReducer = (state, action2) => {
+    switch (action2.type) {
+      case "action_flow_update": {
+        if (selectedMethod)
+          return { current: "method_active", method: selectedMethod };
+        return parseStateFromFlow(action2.flow);
+      }
+      case "action_select_method": {
+        setSelectedMethod(action2.method);
+        return { current: "method_active", method: action2.method };
+      }
+    }
+    return state;
+  };
+  return react.useReducer(formStateReducer, action);
 }
 function useOryFlow() {
   const ctx = react.useContext(OryFlowContext);
@@ -795,7 +807,7 @@ function useOryFormSubmit(onAfterSubmit) {
         if ("lookup_secret_confirm" in submitData || "lookup_secret_reveal" in submitData || "lookup_secret_regenerate" in submitData || "lookup_secret_disable" in submitData) {
           submitData.method = "lookup_secret";
         }
-        if (submitData.method === "oidc" && submitData.link && supportsSelectAccountPrompt.includes(submitData.link)) {
+        if (submitData.method === clientFetch.UiNodeGroupEnum.Oidc && submitData.link && supportsSelectAccountPrompt.includes(submitData.link)) {
           submitData.upstream_parameters = {
             prompt: "select_account"
           };
@@ -936,7 +948,7 @@ var NodeInput = ({
       triggerToWindowCall(onclickTrigger);
     }
   };
-  const isSocial = (attrs.name === "provider" || attrs.name === "link") && node.group === "oidc";
+  const isSocial = (attrs.name === "provider" || attrs.name === "link") && (node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml);
   const isPinCodeInput = attrs.name === "code" && node.group === "code" || attrs.name === "totp_code" && node.group === "totp";
   switch (attributes.type) {
     case clientFetch.UiNodeInputAttributesTypeEnum.Submit:
@@ -1019,7 +1031,9 @@ function OryFormOidcButtons() {
     flow: { ui }
   } = useOryFlow();
   const { setValue } = reactHookForm.useFormContext();
-  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
+  const filteredNodes = ui.nodes.filter(
+    (node) => node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml
+  );
   const { Form, Node: Node2 } = useComponents();
   if (filteredNodes.length === 0) {
     return null;
@@ -1034,7 +1048,7 @@ function OryFormOidcButtons() {
           "provider",
           node.attributes.value
         );
-        setValue("method", "oidc");
+        setValue("method", node.group);
       }
     },
     k
@@ -1044,7 +1058,7 @@ function OryFormSocialButtonsForm() {
   const {
     flow: { ui }
   } = useOryFlow();
-  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
+  const filteredNodes = ui.nodes.filter((node) => node.group === clientFetch.UiNodeGroupEnum.Saml || node.group === clientFetch.UiNodeGroupEnum.Oidc);
   if (filteredNodes.length === 0) {
     return null;
   }
@@ -1068,6 +1082,7 @@ function OryTwoStepCard() {
     }).filter(
       (group) => ![
         clientFetch.UiNodeGroupEnum.Oidc,
+        clientFetch.UiNodeGroupEnum.Saml,
         clientFetch.UiNodeGroupEnum.Default,
         clientFetch.UiNodeGroupEnum.IdentifierFirst,
         clientFetch.UiNodeGroupEnum.Profile,
@@ -1095,7 +1110,7 @@ function OryTwoStepCard() {
       };
     }
   }
-  const nonOidcNodes = filterOidcOut(ui.nodes);
+  const nonSsoNodes = removeSsoNodes(ui.nodes);
   const finalNodes = formState.current === "method_active" ? getFinalNodes(uniqueGroups.groups, formState.method) : [];
   const handleAfterFormSubmit = (method) => {
     if (typeof method !== "string" || !isUINodeGroupEnum(method)) {
@@ -1108,18 +1123,28 @@ function OryTwoStepCard() {
       });
     }
   };
-  const hasOidc = ui.nodes.some((node) => node.group === clientFetch.UiNodeGroupEnum.Oidc);
-  const showOidc = !(formState.current === "method_active" && formState.method !== "oidc");
+  const hasSso = ui.nodes.some(
+    (node) => node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml
+  );
+  const showSso = !(formState.current === "method_active" && !(formState.method === clientFetch.UiNodeGroupEnum.Oidc || formState.method === clientFetch.UiNodeGroupEnum.Saml));
+  const showSsoDivider = hasSso && nonSsoNodes.filter((n) => {
+    if (clientFetch.isUiNodeInputAttributes(n.attributes)) {
+      return n.attributes.type !== clientFetch.UiNodeInputAttributesTypeEnum.Hidden;
+    } else if (clientFetch.isUiNodeScriptAttributes(n.attributes)) {
+      return false;
+    }
+    return true;
+  }).length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
-      showOidc && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
+      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: [
-            hasOidc && /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
-            nonOidcNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+            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, {}),
@@ -1212,9 +1237,11 @@ function OryFormGroupDivider() {
   const {
     flow: { ui }
   } = useOryFlow();
-  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
+  const filteredNodes = ui.nodes.filter(
+    (node) => node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml
+  );
   const otherNodes = ui.nodes.filter(
-    (node) => node.group !== "oidc" && node.group !== "default"
+    (node) => !(node.group === clientFetch.UiNodeGroupEnum.Oidc || node.group === clientFetch.UiNodeGroupEnum.Saml) && node.group !== "default"
   );
   if (filteredNodes.length > 0 && otherNodes.length > 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {});
@@ -1240,7 +1267,7 @@ function OrySettingsOidc({ nodes }) {
     onClick: () => {
       if (node.attributes.node_type === "input") {
         setValue("link", node.attributes.value);
-        setValue("method", "oidc");
+        setValue("method", node.group);
       }
     }
   }));
@@ -1249,7 +1276,7 @@ function OrySettingsOidc({ nodes }) {
     onClick: () => {
       if (node.attributes.node_type === "input") {
         setValue("unlink", node.attributes.value);
-        setValue("method", "oidc");
+        setValue("method", node.group);
       }
     }
   }));
@@ -2003,7 +2030,13 @@ var en_default = {
   "property.phone": "phone",
   "property.username": "username",
   "property.identifier": "identifier",
-  "property.code": "code"
+  "property.code": "code",
+  "error.title.what-happened": "What happened?",
+  "error.title.what-can-i-do": "What can I do?",
+  "error.instructions": "Please try again in a few minutes or contact the website operator.",
+  "error.footer.text": "When reporting this error, please include the following information:",
+  "error.footer.copy": "Copy",
+  "error.action.go-back": "Go back"
 };
 
 // src/locales/de.json
@@ -2268,7 +2301,13 @@ var de_default = {
   "property.password": "Passwort",
   "property.phone": "Telefon",
   "property.code": "Code",
-  "property.username": "Benutzername"
+  "property.username": "Benutzername",
+  "error.title.what-happened": "Was ist passiert?",
+  "error.footer.copy": "Kopieren",
+  "error.footer.text": "Bitte f\xFCgen Sie bei der Meldung dieses Fehlers die folgenden Informationen hinzu:",
+  "error.instructions": "Bitte versuchen Sie es in wenigen Minuten erneut oder wenden Sie sich an den Website-Betreiber.",
+  "error.title.what-can-i-do": "Was kann ich tun?",
+  "error.action.go-back": "Zur\xFCck"
 };
 
 // src/locales/es.json
@@ -2284,7 +2323,7 @@ var es_default = {
   "error.back-button": "Regresar",
   "error.description": "Ocurri\xF3 un error con el siguiente mensaje:",
   "error.support-email-link": "Si el problema persiste, por favor contacte a <a>{contactSupportEmail}</a>",
-  "error.title": "Ocurri\xF3 un error",
+  "error.title": "",
   "error.title-internal-server-error": "Error Interno del Servidor",
   "error.title-not-found": "404 - P\xE1gina no encontrada",
   "identities.messages.1010001": "Iniciar sesi\xF3n",
@@ -2533,7 +2572,13 @@ var es_default = {
   "property.identifier": "",
   "property.password": "",
   "property.phone": "",
-  "property.username": ""
+  "property.username": "",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.instructions": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": ""
 };
 
 // src/locales/fr.json
@@ -2798,7 +2843,13 @@ var fr_default = {
   "property.identifier": "",
   "property.password": "",
   "property.phone": "",
-  "property.username": ""
+  "property.username": "",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": "",
+  "error.instructions": ""
 };
 
 // src/locales/nl.json
@@ -3063,7 +3114,13 @@ var nl_default = {
   "property.identifier": "",
   "property.password": "",
   "property.phone": "",
-  "property.username": ""
+  "property.username": "",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": "",
+  "error.instructions": ""
 };
 
 // src/locales/pl.json
@@ -3328,7 +3385,13 @@ var pl_default = {
   "property.password": "",
   "property.phone": "",
   "property.username": "",
-  "property.identifier": ""
+  "property.identifier": "",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": "",
+  "error.instructions": ""
 };
 
 // src/locales/pt.json
@@ -3593,7 +3656,13 @@ var pt_default = {
   "property.identifier": "",
   "property.password": "",
   "property.phone": "",
-  "property.username": ""
+  "property.username": "",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": "",
+  "error.instructions": ""
 };
 
 // src/locales/sv.json
@@ -3858,7 +3927,13 @@ var sv_default = {
   "property.phone": "telefon",
   "property.username": "anv\xE4ndarnamn",
   "property.identifier": "identifier",
-  "property.code": "kod"
+  "property.code": "kod",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": "",
+  "error.instructions": ""
 };
 
 // src/locales/index.ts