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

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { UiNodeGroupEnum, isUiNodeInputAttributes, FlowType, Configuration, FrontendApi, handleContinueWith, handleFlowError, settingsUrl, isResponseError, loginUrl, instanceOfContinueWithRecoveryUi, recoveryUrl, verificationUrl, registrationUrl, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, isUiNodeTextAttributes, UiNodeInputAttributesTypeEnum } from '@ory/client-fetch';
-import { createContext, useContext, useRef, useEffect, useState, useReducer, useMemo } from 'react';
+import { UiNodeGroupEnum, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, FlowType, UiNodeInputAttributesTypeEnum, isUiNodeTextAttributes, handleContinueWith, handleFlowError, settingsUrl, isResponseError, loginUrl, recoveryUrl, verificationUrl, registrationUrl, Configuration, FrontendApi, instanceOfContinueWithRecoveryUi } from '@ory/client-fetch';
+import { createContext, useContext, useState, useMemo, useReducer, useRef, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useIntl, IntlProvider as IntlProvider$1 } from 'react-intl';
-import { useForm, FormProvider, useFormContext } from 'react-hook-form';
+import { useFormContext, useForm, FormProvider } from 'react-hook-form';
 
 // src/context/component.tsx
 var ComponentContext = createContext({
@@ -34,6 +34,7 @@ function useGroupSorter() {
 }
 var defaultNodeOrder = [
   "oidc",
+  "saml",
   "identifier_first",
   "default",
   "profile",
@@ -98,8 +99,10 @@ function isChoosingMethod(flow) {
     (node) => node.group === UiNodeGroupEnum.IdentifierFirst && "name" in node.attributes && node.attributes.name === "identifier" && node.attributes.type === "hidden"
   ) || flow.flowType === FlowType.Login && flow.flow.requested_aal === "aal2";
 }
-function filterOidcOut(nodes) {
-  return nodes.filter((node) => node.group !== UiNodeGroupEnum.Oidc);
+function removeSsoNodes(nodes) {
+  return nodes.filter(
+    (node) => !(node.group === UiNodeGroupEnum.Oidc || node.group === UiNodeGroupEnum.Saml)
+  );
 }
 function getFinalNodes(uniqueGroups, selectedGroup) {
   var _a, _b, _c, _d;
@@ -232,7 +235,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);
@@ -262,17 +267,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 useReducer(formStateReducer, parseStateFromFlow(flow));
+  const action = parseStateFromFlow(flow);
+  const [selectedMethod, setSelectedMethod] = 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 useReducer(formStateReducer, action);
 }
 function useOryFlow() {
   const ctx = useContext(OryFlowContext);
@@ -793,7 +805,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 === UiNodeGroupEnum.Oidc && submitData.link && supportsSelectAccountPrompt.includes(submitData.link)) {
           submitData.upstream_parameters = {
             prompt: "select_account"
           };
@@ -934,7 +946,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 === UiNodeGroupEnum.Oidc || node.group === UiNodeGroupEnum.Saml);
   const isPinCodeInput = attrs.name === "code" && node.group === "code" || attrs.name === "totp_code" && node.group === "totp";
   switch (attributes.type) {
     case UiNodeInputAttributesTypeEnum.Submit:
@@ -1017,7 +1029,9 @@ function OryFormOidcButtons() {
     flow: { ui }
   } = useOryFlow();
   const { setValue } = useFormContext();
-  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
+  const filteredNodes = ui.nodes.filter(
+    (node) => node.group === UiNodeGroupEnum.Oidc || node.group === UiNodeGroupEnum.Saml
+  );
   const { Form, Node: Node2 } = useComponents();
   if (filteredNodes.length === 0) {
     return null;
@@ -1032,7 +1046,7 @@ function OryFormOidcButtons() {
           "provider",
           node.attributes.value
         );
-        setValue("method", "oidc");
+        setValue("method", node.group);
       }
     },
     k
@@ -1042,7 +1056,7 @@ function OryFormSocialButtonsForm() {
   const {
     flow: { ui }
   } = useOryFlow();
-  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
+  const filteredNodes = ui.nodes.filter((node) => node.group === UiNodeGroupEnum.Saml || node.group === UiNodeGroupEnum.Oidc);
   if (filteredNodes.length === 0) {
     return null;
   }
@@ -1066,6 +1080,7 @@ function OryTwoStepCard() {
     }).filter(
       (group) => ![
         UiNodeGroupEnum.Oidc,
+        UiNodeGroupEnum.Saml,
         UiNodeGroupEnum.Default,
         UiNodeGroupEnum.IdentifierFirst,
         UiNodeGroupEnum.Profile,
@@ -1093,7 +1108,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)) {
@@ -1106,18 +1121,28 @@ function OryTwoStepCard() {
       });
     }
   };
-  const hasOidc = ui.nodes.some((node) => node.group === UiNodeGroupEnum.Oidc);
-  const showOidc = !(formState.current === "method_active" && formState.method !== "oidc");
+  const hasSso = ui.nodes.some(
+    (node) => node.group === UiNodeGroupEnum.Oidc || node.group === UiNodeGroupEnum.Saml
+  );
+  const showSso = !(formState.current === "method_active" && !(formState.method === UiNodeGroupEnum.Oidc || formState.method === UiNodeGroupEnum.Saml));
+  const showSsoDivider = hasSso && nonSsoNodes.filter((n) => {
+    if (isUiNodeInputAttributes(n.attributes)) {
+      return n.attributes.type !== UiNodeInputAttributesTypeEnum.Hidden;
+    } else if (isUiNodeScriptAttributes(n.attributes)) {
+      return false;
+    }
+    return true;
+  }).length > 0;
   return /* @__PURE__ */ jsxs(OryCard, { children: [
     /* @__PURE__ */ jsx(OryCardHeader, {}),
     /* @__PURE__ */ jsxs(OryCardContent, { children: [
       /* @__PURE__ */ jsx(OryCardValidationMessages, {}),
-      showOidc && /* @__PURE__ */ jsx(OryFormSocialButtonsForm, {}),
+      showSso && /* @__PURE__ */ jsx(OryFormSocialButtonsForm, {}),
       /* @__PURE__ */ jsxs(OryForm, { onAfterSubmit: handleAfterFormSubmit, children: [
         /* @__PURE__ */ jsxs(Form.Group, { children: [
           formState.current === "provide_identifier" && /* @__PURE__ */ jsxs(Fragment, { children: [
-            hasOidc && /* @__PURE__ */ jsx(Card.Divider, {}),
-            nonOidcNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+            showSsoDivider && /* @__PURE__ */ jsx(Card.Divider, {}),
+            nonSsoNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
           ] }),
           formState.current === "select_method" && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Card.Divider, {}),
@@ -1210,9 +1235,11 @@ function OryFormGroupDivider() {
   const {
     flow: { ui }
   } = useOryFlow();
-  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
+  const filteredNodes = ui.nodes.filter(
+    (node) => node.group === UiNodeGroupEnum.Oidc || node.group === UiNodeGroupEnum.Saml
+  );
   const otherNodes = ui.nodes.filter(
-    (node) => node.group !== "oidc" && node.group !== "default"
+    (node) => !(node.group === UiNodeGroupEnum.Oidc || node.group === UiNodeGroupEnum.Saml) && node.group !== "default"
   );
   if (filteredNodes.length > 0 && otherNodes.length > 0) {
     return /* @__PURE__ */ jsx(Card.Divider, {});
@@ -1238,7 +1265,7 @@ function OrySettingsOidc({ nodes }) {
     onClick: () => {
       if (node.attributes.node_type === "input") {
         setValue("link", node.attributes.value);
-        setValue("method", "oidc");
+        setValue("method", node.group);
       }
     }
   }));
@@ -1247,7 +1274,7 @@ function OrySettingsOidc({ nodes }) {
     onClick: () => {
       if (node.attributes.node_type === "input") {
         setValue("unlink", node.attributes.value);
-        setValue("method", "oidc");
+        setValue("method", node.group);
       }
     }
   }));
@@ -2001,7 +2028,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
@@ -2266,7 +2299,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
@@ -2282,7 +2321,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",
@@ -2531,7 +2570,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
@@ -2796,7 +2841,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
@@ -3061,7 +3112,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
@@ -3326,7 +3383,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
@@ -3591,7 +3654,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
@@ -3856,7 +3925,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