@ory/elements-react 1.0.0-next.17 → 1.0.0-next.19

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { UiNodeGroupEnum, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, isUiNodeTextAttributes, FlowType, handleFlowError, loginUrl, handleContinueWith, recoveryUrl, instanceOfContinueWithRecoveryUi, registrationUrl, settingsUrl, isResponseError, verificationUrl, UiNodeInputAttributesTypeEnum, Configuration, FrontendApi } from '@ory/client-fetch';
-import { createContext, useContext, useState, useMemo, useReducer, useRef, useEffect } from 'react';
+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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useIntl, IntlProvider as IntlProvider$1 } from 'react-intl';
-import { useFormContext, useForm, FormProvider } from 'react-hook-form';
+import { useForm, FormProvider, useFormContext } from 'react-hook-form';
 
 // src/context/component.tsx
 var ComponentContext = createContext({
@@ -2228,266 +2228,6 @@ function OryCardHeader() {
   const { Card } = useComponents();
   return /* @__PURE__ */ jsx(Card.Header, {});
 }
-function frontendClient(sdkUrl, opts = {}) {
-  const config = new Configuration({
-    ...opts,
-    basePath: sdkUrl,
-    headers: {
-      Accept: "application/json",
-      ...opts.headers
-    }
-  });
-  return new FrontendApi(config);
-}
-
-// src/util/onSubmitLogin.ts
-async function onSubmitLogin({ config, flow }, {
-  setFlowContainer,
-  body,
-  onRedirect
-}) {
-  var _a;
-  if (!config.sdk.url) {
-    throw new Error(
-      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
-    );
-  }
-  await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateLoginFlowRaw({
-    flow: flow.id,
-    updateLoginFlowBody: body
-  }).then(() => {
-    var _a2;
-    window.location.href = (_a2 = flow.return_to) != null ? _a2 : config.sdk.url + "/self-service/login/browser";
-  }).catch(
-    handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(loginUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        setFlowContainer({
-          config,
-          flow: body2,
-          flowType: FlowType.Login
-        });
-      },
-      onRedirect
-    })
-  );
-}
-async function onSubmitRecovery({ config, flow }, {
-  setFlowContainer,
-  body,
-  onRedirect
-}) {
-  var _a;
-  if (!config.sdk.url) {
-    throw new Error(
-      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
-    );
-  }
-  await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateRecoveryFlowRaw({
-    flow: flow.id,
-    updateRecoveryFlowBody: body
-  }).then(async (res) => {
-    const flow2 = await res.value();
-    const didContinueWith = handleContinueWith(flow2.continue_with, {
-      onRedirect
-    });
-    if (didContinueWith) {
-      return;
-    }
-    setFlowContainer({
-      flow: flow2,
-      flowType: FlowType.Recovery,
-      config
-    });
-  }).catch(
-    handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(recoveryUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        if ("error" in body2) {
-          handleContinueWithRecoveryUIError(body2.error, config, onRedirect);
-          return;
-        } else {
-          setFlowContainer({
-            flow: body2,
-            flowType: FlowType.Recovery,
-            config
-          });
-        }
-      },
-      onRedirect
-    })
-  );
-}
-function handleContinueWithRecoveryUIError(error, config, onRedirect) {
-  if ("continue_with" in error.details && Array.isArray(error.details.continue_with)) {
-    const continueWithRecovery = error.details.continue_with.find(instanceOfContinueWithRecoveryUi);
-    if ((continueWithRecovery == null ? void 0 : continueWithRecovery.action) === "show_recovery_ui") {
-      onRedirect(
-        config.project.recovery_ui_url + "?flow=" + (continueWithRecovery == null ? void 0 : continueWithRecovery.flow.id),
-        false
-      );
-      return;
-    }
-  }
-  onRedirect(recoveryUrl(config), true);
-}
-async function onSubmitRegistration({ config, flow }, {
-  setFlowContainer,
-  body,
-  onRedirect
-}) {
-  var _a;
-  if (!config.sdk.url) {
-    throw new Error(
-      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
-    );
-  }
-  const client = frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {});
-  await client.updateRegistrationFlowRaw({
-    flow: flow.id,
-    updateRegistrationFlowBody: body
-  }).then(async (res) => {
-    const body2 = await res.value();
-    const didContinueWith = handleContinueWith(body2.continue_with, {
-      onRedirect
-    });
-    if (didContinueWith) {
-      return;
-    }
-    onRedirect(registrationUrl(config), true);
-  }).catch(
-    handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(registrationUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        setFlowContainer({
-          flow: body2,
-          flowType: FlowType.Registration,
-          config
-        });
-      },
-      onRedirect
-    })
-  );
-}
-async function onSubmitSettings({ config, flow }, {
-  setFlowContainer,
-  body,
-  onRedirect
-}) {
-  var _a;
-  if (!config.sdk.url) {
-    throw new Error(
-      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
-    );
-  }
-  const client = frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {});
-  await client.updateSettingsFlowRaw({
-    flow: flow.id,
-    updateSettingsFlowBody: body
-  }).then(async (res) => {
-    const body2 = await res.value();
-    const didContinueWith = handleContinueWith(body2.continue_with, {
-      onRedirect
-    });
-    if (didContinueWith) {
-      return;
-    }
-    onRedirect(settingsUrl(config), true);
-  }).catch(
-    handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(settingsUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        setFlowContainer({
-          flow: body2,
-          flowType: FlowType.Settings,
-          config
-        });
-      },
-      onRedirect
-    })
-  ).catch((err) => {
-    if (isResponseError(err)) {
-      if (err.response.status === 401) {
-        return onRedirect(
-          loginUrl(config) + "?return_to=" + settingsUrl(config),
-          true
-        );
-      }
-      throw err;
-    }
-  });
-}
-async function onSubmitVerification({ config, flow }, {
-  setFlowContainer,
-  body,
-  onRedirect
-}) {
-  var _a;
-  if (!config.sdk.url) {
-    throw new Error(
-      `Please supply your Ory Network SDK URL to the Ory Elements configuration.`
-    );
-  }
-  await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateVerificationFlowRaw({
-    flow: flow.id,
-    updateVerificationFlowBody: body
-  }).then(
-    async (res) => setFlowContainer({
-      flow: await res.value(),
-      flowType: FlowType.Verification,
-      config
-    })
-  ).catch(
-    handleFlowError({
-      onRestartFlow: () => {
-        onRedirect(verificationUrl(config), true);
-      },
-      onValidationError: (body2) => {
-        setFlowContainer({
-          flow: body2,
-          flowType: FlowType.Verification,
-          config
-        });
-      },
-      onRedirect
-    })
-  );
-}
-function computeDefaultValues(nodes) {
-  return nodes.reduce((acc, node) => {
-    const attrs = node.attributes;
-    if (isUiNodeInputAttributes(attrs)) {
-      if (attrs.name === "method" || attrs.type === "submit" || typeof attrs.value === "undefined") {
-        return acc;
-      }
-      return unrollTrait(
-        {
-          name: attrs.name,
-          value: attrs.value
-        },
-        acc
-      );
-    }
-    return acc;
-  }, {});
-}
-function unrollTrait(input, output = {}) {
-  const keys = input.name.split(".");
-  let current = output;
-  keys.forEach((key, index) => {
-    if (!key) return;
-    current = current[key] = index === keys.length - 1 ? input.value : current[key] || {};
-  });
-  return output;
-}
 function triggerToWindowCall(trigger) {
   if (!trigger) {
     return;
@@ -2517,19 +2257,19 @@ function triggerToWindowCall(trigger) {
 }
 function triggerToFunction(trigger) {
   if (typeof window === "undefined") {
-    console.error(
+    console.debug(
       "The Ory SDK is missing a required function: window is undefined."
     );
     return void 0;
   }
   const typedWindow = window;
   if (!(trigger in typedWindow) || !typedWindow[trigger]) {
-    console.error(`The Ory SDK is missing a required function: ${trigger}.`);
+    console.debug(`The Ory SDK is missing a required function: ${trigger}.`);
     return void 0;
   }
   const triggerFn = typedWindow[trigger];
   if (typeof triggerFn !== "function") {
-    console.error(
+    console.debug(
       `The Ory SDK is missing a required function: ${trigger}. It is not a function.`
     );
     return void 0;
@@ -2675,6 +2415,36 @@ function OryFormGroups({ children, groups }) {
     return /* @__PURE__ */ jsx(Node, { node }, k);
   }) });
 }
+function computeDefaultValues(nodes) {
+  return nodes.reduce((acc, node) => {
+    const attrs = node.attributes;
+    if (isUiNodeInputAttributes(attrs)) {
+      if (attrs.type === "checkbox" && typeof attrs.value === "undefined") {
+        attrs.value = false;
+      }
+      if (attrs.name === "method" || attrs.type === "submit" || typeof attrs.value === "undefined") {
+        return acc;
+      }
+      return unrollTrait(
+        {
+          name: attrs.name,
+          value: attrs.value
+        },
+        acc
+      );
+    }
+    return acc;
+  }, {});
+}
+function unrollTrait(input, output = {}) {
+  const keys = input.name.split(".");
+  let current = output;
+  keys.forEach((key, index) => {
+    if (!key) return;
+    current = current[key] = index === keys.length - 1 ? input.value : current[key] || {};
+  });
+  return output;
+}
 
 // src/components/form/form-resolver.ts
 function isCodeResendRequest(data) {
@@ -2701,78 +2471,320 @@ function useOryFormResolver() {
         };
       }
     }
-    return {
-      values: data,
-      errors: {}
-    };
-  };
-}
-function OryFormProvider({
-  children,
-  nodes
-}) {
-  const flowContainer = useOryFlow();
-  const defaultNodes = nodes ? flowContainer.flow.ui.nodes.filter((node) => node.group === UiNodeGroupEnum.Default).concat(nodes) : flowContainer.flow.ui.nodes;
-  const methods = useForm({
-    // TODO: Generify this, so we have typesafety in the submit handler.
-    defaultValues: computeDefaultValues(defaultNodes),
-    resolver: useOryFormResolver()
+    return {
+      values: data,
+      errors: {}
+    };
+  };
+}
+function OryFormProvider({
+  children,
+  nodes
+}) {
+  const flowContainer = useOryFlow();
+  const defaultNodes = nodes ? flowContainer.flow.ui.nodes.filter((node) => node.group === UiNodeGroupEnum.Default).concat(nodes) : flowContainer.flow.ui.nodes;
+  const methods = useForm({
+    // TODO: Generify this, so we have typesafety in the submit handler.
+    defaultValues: computeDefaultValues(defaultNodes),
+    resolver: useOryFormResolver()
+  });
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children });
+}
+function OryFormOidcButtons({
+  children,
+  hideDivider
+}) {
+  const {
+    flow: { ui }
+  } = useOryFlow();
+  const { setValue } = useFormContext();
+  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
+  const { Form, Card, Node: Node2 } = useComponents();
+  if (filteredNodes.length === 0) {
+    return null;
+  }
+  const otherNodes = ui.nodes.filter(
+    (node) => node.group !== "oidc" && node.group !== "default"
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Form.OidcRoot, { nodes: filteredNodes, children: children != null ? children : filteredNodes.map((node, k) => {
+      return /* @__PURE__ */ jsx(
+        Node2.OidcButton,
+        {
+          node,
+          attributes: node.attributes,
+          onClick: () => {
+            setValue(
+              "provider",
+              node.attributes.value
+            );
+            setValue("method", "oidc");
+          }
+        },
+        k
+      );
+    }) }),
+    !hideDivider && filteredNodes.length > 0 && otherNodes.length > 0 && /* @__PURE__ */ jsx(Card.Divider, {})
+  ] });
+}
+function OryFormSocialButtonsForm() {
+  const {
+    flow: { ui }
+  } = useOryFlow();
+  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
+  if (filteredNodes.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(OryFormProvider, { children: /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsx(OryFormOidcButtons, {}) }) });
+}
+function frontendClient(sdkUrl, opts = {}) {
+  const config = new Configuration({
+    ...opts,
+    basePath: sdkUrl,
+    headers: {
+      Accept: "application/json",
+      ...opts.headers
+    }
+  });
+  return new FrontendApi(config);
+}
+
+// src/util/onSubmitLogin.ts
+async function onSubmitLogin({ config, flow }, {
+  setFlowContainer,
+  body,
+  onRedirect
+}) {
+  var _a;
+  if (!config.sdk.url) {
+    throw new Error(
+      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
+    );
+  }
+  await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateLoginFlowRaw({
+    flow: flow.id,
+    updateLoginFlowBody: body
+  }).then(() => {
+    var _a2;
+    window.location.href = // eslint-disable-next-line promise/always-return
+    (_a2 = flow.return_to) != null ? _a2 : config.sdk.url + "/self-service/login/browser";
+  }).catch(
+    handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(loginUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        setFlowContainer({
+          config,
+          flow: body2,
+          flowType: FlowType.Login
+        });
+      },
+      onRedirect
+    })
+  );
+}
+async function onSubmitRecovery({ config, flow }, {
+  setFlowContainer,
+  body,
+  onRedirect
+}) {
+  var _a;
+  if (!config.sdk.url) {
+    throw new Error(
+      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
+    );
+  }
+  await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateRecoveryFlowRaw({
+    flow: flow.id,
+    updateRecoveryFlowBody: body
+  }).then(async (res) => {
+    const flow2 = await res.value();
+    const didContinueWith = handleContinueWith(flow2.continue_with, {
+      onRedirect
+    });
+    if (didContinueWith) {
+      return;
+    }
+    setFlowContainer({
+      flow: flow2,
+      flowType: FlowType.Recovery,
+      config
+    });
+  }).catch(
+    handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(recoveryUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        if ("error" in body2) {
+          handleContinueWithRecoveryUIError(body2.error, config, onRedirect);
+          return;
+        } else {
+          setFlowContainer({
+            flow: body2,
+            flowType: FlowType.Recovery,
+            config
+          });
+        }
+      },
+      onRedirect
+    })
+  );
+}
+function handleContinueWithRecoveryUIError(error, config, onRedirect) {
+  if ("continue_with" in error.details && Array.isArray(error.details.continue_with)) {
+    const continueWithRecovery = error.details.continue_with.find(instanceOfContinueWithRecoveryUi);
+    if ((continueWithRecovery == null ? void 0 : continueWithRecovery.action) === "show_recovery_ui") {
+      onRedirect(
+        config.project.recovery_ui_url + "?flow=" + (continueWithRecovery == null ? void 0 : continueWithRecovery.flow.id),
+        false
+      );
+      return;
+    }
+  }
+  onRedirect(recoveryUrl(config), true);
+}
+async function onSubmitRegistration({ config, flow }, {
+  setFlowContainer,
+  body,
+  onRedirect
+}) {
+  var _a;
+  if (!config.sdk.url) {
+    throw new Error(
+      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
+    );
+  }
+  const client = frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {});
+  await client.updateRegistrationFlowRaw({
+    flow: flow.id,
+    updateRegistrationFlowBody: body
+  }).then(async (res) => {
+    const body2 = await res.value();
+    const didContinueWith = handleContinueWith(body2.continue_with, {
+      onRedirect
+    });
+    if (didContinueWith) {
+      return;
+    }
+    onRedirect(registrationUrl(config), true);
+  }).catch(
+    handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(registrationUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        setFlowContainer({
+          flow: body2,
+          flowType: FlowType.Registration,
+          config
+        });
+      },
+      onRedirect
+    })
+  );
+}
+async function onSubmitSettings({ config, flow }, {
+  setFlowContainer,
+  body,
+  onRedirect
+}) {
+  var _a;
+  if (!config.sdk.url) {
+    throw new Error(
+      `Please supply your Ory Network SDK url to the Ory Elements configuration.`
+    );
+  }
+  const client = frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {});
+  await client.updateSettingsFlowRaw({
+    flow: flow.id,
+    updateSettingsFlowBody: body
+  }).then(async (res) => {
+    const body2 = await res.value();
+    const didContinueWith = handleContinueWith(body2.continue_with, {
+      onRedirect
+    });
+    if (didContinueWith) {
+      return;
+    }
+    setFlowContainer({
+      flow: body2,
+      flowType: FlowType.Settings,
+      config
+    });
+  }).catch(
+    handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(settingsUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        setFlowContainer({
+          flow: body2,
+          flowType: FlowType.Settings,
+          config
+        });
+      },
+      onRedirect
+    })
+  ).catch((err) => {
+    if (isResponseError(err)) {
+      if (err.response.status === 401) {
+        return onRedirect(
+          loginUrl(config) + "?return_to=" + settingsUrl(config),
+          true
+        );
+      }
+      throw err;
+    }
   });
-  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children });
 }
-function OryFormOidcButtons({
-  children,
-  hideDivider
+async function onSubmitVerification({ config, flow }, {
+  setFlowContainer,
+  body,
+  onRedirect
 }) {
-  const {
-    flow: { ui }
-  } = useOryFlow();
-  const { setValue } = useFormContext();
-  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
-  const { Form, Card, Node: Node2 } = useComponents();
-  if (filteredNodes.length === 0) {
-    return null;
+  var _a;
+  if (!config.sdk.url) {
+    throw new Error(
+      `Please supply your Ory Network SDK URL to the Ory Elements configuration.`
+    );
   }
-  const otherNodes = ui.nodes.filter(
-    (node) => node.group !== "oidc" && node.group !== "default"
+  await frontendClient(config.sdk.url, (_a = config.sdk.options) != null ? _a : {}).updateVerificationFlowRaw({
+    flow: flow.id,
+    updateVerificationFlowBody: body
+  }).then(
+    async (res) => setFlowContainer({
+      flow: await res.value(),
+      flowType: FlowType.Verification,
+      config
+    })
+  ).catch(
+    handleFlowError({
+      onRestartFlow: () => {
+        onRedirect(verificationUrl(config), true);
+      },
+      onValidationError: (body2) => {
+        setFlowContainer({
+          flow: body2,
+          flowType: FlowType.Verification,
+          config
+        });
+      },
+      onRedirect
+    })
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Form.OidcRoot, { nodes: filteredNodes, children: children != null ? children : filteredNodes.map((node, k) => {
-      return /* @__PURE__ */ jsx(
-        Node2.OidcButton,
-        {
-          node,
-          attributes: node.attributes,
-          onClick: () => {
-            setValue(
-              "provider",
-              node.attributes.value
-            );
-            setValue("method", "oidc");
-          }
-        },
-        k
-      );
-    }) }),
-    !hideDivider && filteredNodes.length > 0 && otherNodes.length > 0 && /* @__PURE__ */ jsx(Card.Divider, {})
-  ] });
-}
-function OryFormSocialButtonsForm() {
-  const {
-    flow: { ui }
-  } = useOryFlow();
-  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
-  if (filteredNodes.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(OryFormProvider, { children: /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsx(OryFormOidcButtons, {}) }) });
 }
-function OryForm({ children, onAfterSubmit }) {
-  var _a;
-  const { Form } = useComponents();
+
+// src/components/form/useOryFormSubmit.ts
+var supportsSelectAccountPrompt = ["google", "github"];
+function useOryFormSubmit(onAfterSubmit) {
   const flowContainer = useOryFlow();
   const methods = useFormContext();
-  const intl = useIntl();
+  const handleSuccess = (flow) => {
+    flowContainer.setFlowContainer(flow);
+    methods.reset(computeDefaultValues(flow.flow.ui.nodes));
+  };
   const onRedirect = (url, external) => {
     if (external) {
       window.location.href = url;
@@ -2780,10 +2792,6 @@ function OryForm({ children, onAfterSubmit }) {
     }
     window.location.href = url;
   };
-  const handleSuccess = (flow) => {
-    flowContainer.setFlowContainer(flow);
-    methods.reset(computeDefaultValues(flow.flow.ui.nodes));
-  };
   const onSubmit = async (data) => {
     switch (flowContainer.flowType) {
       case FlowType.Login: {
@@ -2842,10 +2850,10 @@ function OryForm({ children, onAfterSubmit }) {
         if ("totp_unlink" in submitData) {
           submitData.method = "totp";
         }
-        if ("lookup_secret_confirm" in submitData || "lookup_secret_reveal" in submitData || "lookup_secret_regenerate" in submitData) {
+        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") {
+        if (submitData.method === "oidc" && submitData.link && supportsSelectAccountPrompt.includes(submitData.link)) {
           submitData.upstream_parameters = {
             prompt: "select_account"
           };
@@ -2870,8 +2878,20 @@ function OryForm({ children, onAfterSubmit }) {
     if ("code" in data) {
       methods.setValue("code", "");
     }
+    if ("totp_code" in data) {
+      methods.setValue("totp_code", "");
+    }
     onAfterSubmit == null ? void 0 : onAfterSubmit(data.method);
   };
+  return onSubmit;
+}
+function OryForm({ children, onAfterSubmit }) {
+  var _a;
+  const { Form } = useComponents();
+  const flowContainer = useOryFlow();
+  const methods = useFormContext();
+  const intl = useIntl();
+  const onSubmit = useOryFormSubmit(onAfterSubmit);
   const hasMethods = flowContainer.flow.ui.nodes.filter((node) => {
     if (isUiNodeInputAttributes(node.attributes)) {
       return node.attributes.name !== "csrf_token";
@@ -2928,9 +2948,31 @@ function OryCardValidationMessages({ ...props }) {
   }
   return /* @__PURE__ */ jsx(Message.Root, { ...props, children: messages == null ? void 0 : messages.map((message) => /* @__PURE__ */ jsx(Message.Content, { message }, message.id)) });
 }
-function OryFormSection({ children, nodes }) {
+function OryFormSection({
+  children,
+  nodes,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(OryFormProvider, { nodes, children: /* @__PURE__ */ jsx(OryFormSectionInner, { ...rest, children }) });
+}
+function OryFormSectionInner({
+  children,
+  ...rest
+}) {
   const { Card } = useComponents();
-  return /* @__PURE__ */ jsx(OryFormProvider, { nodes, children: /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsx(Card.SettingsSection, { children }) }) });
+  const flowContainer = useOryFlow();
+  const onSubmit = useOryFormSubmit();
+  const methods = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Card.SettingsSection,
+    {
+      action: flowContainer.flow.ui.action,
+      method: flowContainer.flow.ui.method,
+      onSubmit: (e) => void methods.handleSubmit(onSubmit)(e),
+      ...rest,
+      children
+    }
+  );
 }
 function OryCardContent({ children }) {
   const { Card } = useComponents();
@@ -2984,7 +3026,7 @@ function OryTwoStepCard() {
   const {
     flow: { ui }
   } = useOryFlow();
-  const { Form } = useComponents();
+  const { Form, Card } = useComponents();
   const { flowType, formState, dispatchFormState } = useOryFlow();
   const nodeSorter = useNodeSorter();
   const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
@@ -3018,16 +3060,19 @@ function OryTwoStepCard() {
           children: [
             /* @__PURE__ */ jsxs(Form.Group, { children: [
               formState.current === "provide_identifier" && zeroStepGroups.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)),
-              formState.current === "select_method" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-                AuthMethodList,
-                {
-                  options,
-                  setSelectedGroup: (group) => dispatchFormState({
-                    type: "action_select_method",
-                    method: group
-                  })
-                }
-              ) }),
+              formState.current === "select_method" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Card.Divider, {}),
+                /* @__PURE__ */ jsx(
+                  AuthMethodList,
+                  {
+                    options,
+                    setSelectedGroup: (group) => dispatchFormState({
+                      type: "action_select_method",
+                      method: group
+                    })
+                  }
+                )
+              ] }),
               formState.current === "method_active" && /* @__PURE__ */ jsxs(Fragment, { children: [
                 ui.nodes.filter((n) => n.type === "script").map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)),
                 finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
@@ -3086,8 +3131,25 @@ var getUnlinkButtons = (nodes) => nodes.filter(
 function OrySettingsOidc({ nodes }) {
   const { Card, Form } = useComponents();
   const intl = useIntl();
-  const linkButtons = getLinkButtons(nodes);
-  const unlinkButtons = getUnlinkButtons(nodes);
+  const { setValue } = useFormContext();
+  const linkButtons = getLinkButtons(nodes).map((node) => ({
+    ...node,
+    onClick: () => {
+      if (node.attributes.node_type === "input") {
+        setValue("link", node.attributes.value);
+        setValue("method", "oidc");
+      }
+    }
+  }));
+  const unlinkButtons = getUnlinkButtons(nodes).map((node) => ({
+    ...node,
+    onClick: () => {
+      if (node.attributes.node_type === "input") {
+        setValue("unlink", node.attributes.value);
+        setValue("method", "oidc");
+      }
+    }
+  }));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Card.SettingsSectionContent,
@@ -3103,7 +3165,12 @@ function OrySettingsOidc({ nodes }) {
         )
       }
     ),
-    /* @__PURE__ */ jsx(Card.SettingsSectionFooter, { children: /* @__PURE__ */ jsx("span", { children: intl.formatMessage({ id: "settings.oidc.info" }) }) })
+    /* @__PURE__ */ jsx(
+      Card.SettingsSectionFooter,
+      {
+        text: intl.formatMessage({ id: "settings.oidc.info" })
+      }
+    )
   ] });
 }
 var getTriggerNode = (nodes) => nodes.find(
@@ -3116,11 +3183,9 @@ var getRemoveNodes = (nodes) => nodes.filter(
   (node) => "name" in node.attributes && node.attributes.name === "passkey_remove"
 );
 function OrySettingsPasskey({ nodes }) {
-  var _a;
   const { Card, Form } = useComponents();
   const intl = useIntl();
-  const { flow } = useOryFlow();
-  const { groups } = useNodesGroups(flow.ui.nodes);
+  const { setValue } = useFormContext();
   const triggerButton = getTriggerNode(nodes);
   const settingsNodes = getSettingsNodes(nodes);
   const removeNodes = getRemoveNodes(nodes);
@@ -3135,6 +3200,12 @@ function OrySettingsPasskey({ nodes }) {
   const onTriggerClick = () => {
     triggerToWindowCall(onclickTrigger);
   };
+  const removePasskeyHandler = (value) => {
+    return () => {
+      setValue("passkey_remove", value);
+      setValue("method", "passkey");
+    };
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       Card.SettingsSectionContent,
@@ -3144,7 +3215,6 @@ function OrySettingsPasskey({ nodes }) {
           id: "settings.passkey.description"
         }),
         children: [
-          (_a = groups.default) == null ? void 0 : _a.map((node, i) => /* @__PURE__ */ jsx(Node, { node }, `passkey-default-nodes-${i}`)),
           settingsNodes.map((node, i) => /* @__PURE__ */ jsx(Node, { node }, `passkey-settings-nodes-${i}`)),
           /* @__PURE__ */ jsx(
             Form.PasskeySettings,
@@ -3154,13 +3224,22 @@ function OrySettingsPasskey({ nodes }) {
                 attributes: triggerAttributes,
                 onClick: onTriggerClick
               },
-              removeButtons: removeNodes
+              removeButtons: removeNodes.map((node) => ({
+                ...node,
+                onClick: node.attributes.node_type === "input" ? removePasskeyHandler(node.attributes.value) : () => {
+                }
+              }))
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Card.SettingsSectionFooter, { children: /* @__PURE__ */ jsx("span", { children: intl.formatMessage({ id: "settings.passkey.info" }) }) })
+    /* @__PURE__ */ jsx(
+      Card.SettingsSectionFooter,
+      {
+        text: intl.formatMessage({ id: "settings.passkey.info" })
+      }
+    )
   ] });
 }
 var getRegenerateNode = (nodes) => nodes.find(
@@ -3172,17 +3251,39 @@ var getRevealNode = (nodes) => nodes.find(
 var getRecoveryCodes = (nodes) => nodes.find(
   (node) => "id" in node.attributes && node.attributes.id === "lookup_secret_codes"
 );
+var getDisableNode = (nodes) => nodes.find(
+  (node) => "name" in node.attributes && node.attributes.name === "lookup_secret_disable"
+);
+var getConfirmNode = (nodes) => nodes.find(
+  (node) => "name" in node.attributes && node.attributes.name === "lookup_secret_confirm"
+);
 function OrySettingsRecoveryCodes({
   nodes
 }) {
-  var _a, _b;
-  const { Card, Form } = useComponents();
+  var _a, _b, _c;
+  const { Card, Form, Node: Node2 } = useComponents();
   const intl = useIntl();
   const codesNode = getRecoveryCodes(nodes);
   const revealNode = getRevealNode(nodes);
   const regenerateNode = getRegenerateNode(nodes);
+  const disableNode = getDisableNode(nodes);
+  const confirmNode = getConfirmNode(nodes);
+  const { setValue } = useFormContext();
   const codesContext = (_b = (_a = codesNode == null ? void 0 : codesNode.attributes) == null ? void 0 : _a.text.context) != null ? _b : {};
   const secrets = codesContext.secrets ? codesContext.secrets.map((i) => i.text) : [];
+  const onRegenerate = () => {
+    if ((regenerateNode == null ? void 0 : regenerateNode.attributes.node_type) === "input") {
+      setValue(regenerateNode == null ? void 0 : regenerateNode.attributes.name, "true");
+      setValue("method", "lookup_secret");
+    }
+  };
+  const onReveal = () => {
+    if ((revealNode == null ? void 0 : revealNode.attributes.node_type) === "input") {
+      setValue(revealNode == null ? void 0 : revealNode.attributes.name, "true");
+      setValue("method", "lookup_secret");
+    }
+  };
+  const footerNode = (_c = disableNode != null ? disableNode : regenerateNode) != null ? _c : confirmNode;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Card.SettingsSectionContent,
@@ -3196,14 +3297,20 @@ function OrySettingsRecoveryCodes({
           {
             codes: secrets,
             revealButton: revealNode,
-            regnerateButton: regenerateNode
+            regnerateButton: regenerateNode,
+            onRegenerate,
+            onReveal
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx(Card.SettingsSectionFooter, { children: nodes.filter(
-      (node) => "type" in node.attributes && node.attributes.type === "submit" && "name" in node.attributes && node.attributes.name !== "lookup_secret_reveal" && node.attributes.name !== "lookup_secret_regenerate"
-    ).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)) })
+    /* @__PURE__ */ jsx(Card.SettingsSectionFooter, { children: footerNode && /* @__PURE__ */ jsx(
+      Node2.Button,
+      {
+        node: footerNode,
+        attributes: footerNode.attributes
+      }
+    ) })
   ] });
 }
 var getQrCodeNode = (nodes) => nodes.find(
@@ -3224,37 +3331,49 @@ var getTotpLinkButton = (nodes) => nodes.find(
 function OrySettingsTotp({ nodes }) {
   const { Card, Form, Node: Node2 } = useComponents();
   const intl = useIntl();
+  const { setValue } = useFormContext();
   const totpUnlink = getTotpUnlinkInput(nodes);
   const qrNode = getQrCodeNode(nodes);
   const secretNode = getTotpSecretNode(nodes);
   const totpCodeNode = getTotpInputNode(nodes);
   const totpLinkButton = getTotpLinkButton(nodes);
-  const props = {
-    totpImage: qrNode,
-    totpSecret: secretNode,
-    totpInput: totpCodeNode,
-    totpUnlink
+  const handleUnlink = () => {
+    if ((totpUnlink == null ? void 0 : totpUnlink.attributes.node_type) === "input") {
+      setValue(totpUnlink.attributes.name, totpUnlink.attributes.value);
+      setValue("method", "totp");
+    }
   };
-  const content = /* @__PURE__ */ jsx(Form.TotpSettings, { ...props });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Card.SettingsSectionContent,
       {
         title: intl.formatMessage({ id: "settings.totp.title" }),
         description: intl.formatMessage({ id: "settings.totp.description" }),
-        children: content
+        children: /* @__PURE__ */ jsx(
+          Form.TotpSettings,
+          {
+            totpImage: qrNode,
+            totpSecret: secretNode,
+            totpInput: totpCodeNode,
+            totpUnlink,
+            onUnlink: handleUnlink
+          }
+        )
       }
     ),
-    /* @__PURE__ */ jsxs(Card.SettingsSectionFooter, { children: [
-      /* @__PURE__ */ jsx("span", { children: totpUnlink ? intl.formatMessage({ id: "settings.totp.info.linked" }) : intl.formatMessage({ id: "settings.totp.info.not-linked" }) }),
-      totpLinkButton && /* @__PURE__ */ jsx(
-        Node2.Button,
-        {
-          node: totpLinkButton,
-          attributes: totpLinkButton.attributes
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx(
+      Card.SettingsSectionFooter,
+      {
+        text: totpUnlink ? intl.formatMessage({ id: "settings.totp.info.linked" }) : intl.formatMessage({ id: "settings.totp.info.not-linked" }),
+        children: totpLinkButton && /* @__PURE__ */ jsx(
+          Node2.Button,
+          {
+            node: totpLinkButton,
+            attributes: totpLinkButton.attributes
+          }
+        )
+      }
+    )
   ] });
 }
 var getInputNode = (nodes) => nodes.find(
@@ -3266,22 +3385,16 @@ var getTriggerNode2 = (nodes) => nodes.find(
 var getRemoveButtons = (nodes) => nodes.filter(
   (node) => "name" in node.attributes && node.attributes.name === "webauthn_remove"
 );
-var getScriptNode = (nodes) => nodes.find(
-  (node) => "id" in node.attributes && node.attributes.id === "webauthn_script"
-);
 var getRegisterNode = (nodes) => nodes.find(
   (node) => "name" in node.attributes && node.attributes.name === "webauthn_register"
 );
 function OrySettingsWebauthn({ nodes }) {
-  var _a;
   const { Card, Form } = useComponents();
   const intl = useIntl();
-  const { flow } = useOryFlow();
-  const { groups } = useNodesGroups(flow.ui.nodes);
+  const { setValue } = useFormContext();
   const triggerButton = getTriggerNode2(nodes);
   const inputNode = getInputNode(nodes);
   const removeButtons = getRemoveButtons(nodes);
-  const scriptNode = getScriptNode(nodes);
   const registerNode = getRegisterNode(nodes);
   if (!inputNode || !triggerButton) {
     return null;
@@ -3294,6 +3407,12 @@ function OrySettingsWebauthn({ nodes }) {
   const onTriggerClick = () => {
     triggerToWindowCall(onclickTrigger);
   };
+  const removeWebauthnKeyHandler = (value) => {
+    return () => {
+      setValue("webauthn_remove", value);
+      setValue("method", "webauthn");
+    };
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       Card.SettingsSectionContent,
@@ -3303,9 +3422,6 @@ function OrySettingsWebauthn({ nodes }) {
           id: "settings.webauthn.description"
         }),
         children: [
-          (_a = groups.default) == null ? void 0 : _a.map((node, i) => /* @__PURE__ */ jsx(Node, { node }, `webauthn-default-${i}`)),
-          scriptNode && /* @__PURE__ */ jsx(Node, { node: scriptNode }),
-          registerNode && /* @__PURE__ */ jsx(Node, { node: registerNode }),
           /* @__PURE__ */ jsx(
             Form.WebauthnSettings,
             {
@@ -3315,42 +3431,102 @@ function OrySettingsWebauthn({ nodes }) {
                 attributes: triggerAttributes,
                 onClick: onTriggerClick
               },
-              removeButtons
+              removeButtons: removeButtons.map((node) => ({
+                ...node,
+                onClick: node.attributes.node_type === "input" ? removeWebauthnKeyHandler(node.attributes.value) : () => {
+                }
+              }))
             }
-          )
+          ),
+          registerNode && /* @__PURE__ */ jsx(Node, { node: registerNode })
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Card.SettingsSectionFooter, { children: /* @__PURE__ */ jsx("span", { children: intl.formatMessage({ id: "settings.webauthn.info" }) }) })
+    /* @__PURE__ */ jsx(
+      Card.SettingsSectionFooter,
+      {
+        text: intl.formatMessage({ id: "settings.webauthn.info" })
+      }
+    )
   ] });
 }
 function SettingsSectionContent({ group, nodes }) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const { Card } = useComponents();
   const intl = useIntl();
   const { flow } = useOryFlow();
   const uniqueGroups = useNodesGroups(flow.ui.nodes);
   if (group === UiNodeGroupEnum.Totp) {
-    return /* @__PURE__ */ jsx(OryFormSection, { nodes: uniqueGroups.groups.totp, children: /* @__PURE__ */ jsx(OrySettingsTotp, { nodes: (_a = uniqueGroups.groups.totp) != null ? _a : [] }) });
+    return /* @__PURE__ */ jsxs(
+      OryFormSection,
+      {
+        nodes: uniqueGroups.groups.totp,
+        "data-testid": "totp-settings",
+        children: [
+          /* @__PURE__ */ jsx(OrySettingsTotp, { nodes: (_a = uniqueGroups.groups.totp) != null ? _a : [] }),
+          (_b = uniqueGroups.groups.default) == null ? void 0 : _b.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+        ]
+      }
+    );
   }
   if (group === UiNodeGroupEnum.LookupSecret) {
-    return /* @__PURE__ */ jsx(OryFormSection, { nodes: uniqueGroups.groups.lookup_secret, children: /* @__PURE__ */ jsx(
-      OrySettingsRecoveryCodes,
+    return /* @__PURE__ */ jsxs(
+      OryFormSection,
       {
-        nodes: (_b = uniqueGroups.groups.lookup_secret) != null ? _b : []
+        nodes: uniqueGroups.groups.lookup_secret,
+        "data-testid": "recovery-codes-settings",
+        children: [
+          /* @__PURE__ */ jsx(
+            OrySettingsRecoveryCodes,
+            {
+              nodes: (_c = uniqueGroups.groups.lookup_secret) != null ? _c : []
+            }
+          ),
+          (_d = uniqueGroups.groups.default) == null ? void 0 : _d.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+        ]
       }
-    ) });
+    );
   }
   if (group === UiNodeGroupEnum.Oidc) {
-    return /* @__PURE__ */ jsx(OryFormSection, { nodes: uniqueGroups.groups.oidc, children: /* @__PURE__ */ jsx(OrySettingsOidc, { nodes: (_c = uniqueGroups.groups.oidc) != null ? _c : [] }) });
+    return /* @__PURE__ */ jsxs(
+      OryFormSection,
+      {
+        nodes: uniqueGroups.groups.oidc,
+        "data-testid": "oidc-settings",
+        children: [
+          /* @__PURE__ */ jsx(OrySettingsOidc, { nodes: (_e = uniqueGroups.groups.oidc) != null ? _e : [] }),
+          (_f = uniqueGroups.groups.default) == null ? void 0 : _f.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+        ]
+      }
+    );
   }
   if (group === UiNodeGroupEnum.Webauthn) {
-    return /* @__PURE__ */ jsx(OryFormSection, { nodes: uniqueGroups.groups.webauthn, children: /* @__PURE__ */ jsx(OrySettingsWebauthn, { nodes: (_d = uniqueGroups.groups.webauthn) != null ? _d : [] }) });
+    return /* @__PURE__ */ jsxs(
+      OryFormSection,
+      {
+        nodes: uniqueGroups.groups.webauthn,
+        "data-testid": "webauthn-settings",
+        children: [
+          /* @__PURE__ */ jsx(OrySettingsWebauthn, { nodes: (_g = uniqueGroups.groups.webauthn) != null ? _g : [] }),
+          (_h = uniqueGroups.groups.default) == null ? void 0 : _h.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+        ]
+      }
+    );
   }
   if (group === UiNodeGroupEnum.Passkey) {
-    return /* @__PURE__ */ jsx(OryFormSection, { nodes: uniqueGroups.groups.passkey, children: /* @__PURE__ */ jsx(OrySettingsPasskey, { nodes: (_e = uniqueGroups.groups.passkey) != null ? _e : [] }) });
+    return /* @__PURE__ */ jsxs(
+      OryFormSection,
+      {
+        nodes: uniqueGroups.groups.passkey,
+        "data-testid": "passkey-settings",
+        children: [
+          /* @__PURE__ */ jsx(OrySettingsPasskey, { nodes: (_i = uniqueGroups.groups.passkey) != null ? _i : [] }),
+          (_j = uniqueGroups.groups.default) == null ? void 0 : _j.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs(OryFormSection, { nodes, children: [
+  return /* @__PURE__ */ jsxs(OryFormSection, { nodes, "data-testid": `${group}-settings`, children: [
     /* @__PURE__ */ jsxs(
       Card.SettingsSectionContent,
       {
@@ -3361,7 +3537,7 @@ function SettingsSectionContent({ group, nodes }) {
           id: `settings.${group}.description`
         }),
         children: [
-          (_f = uniqueGroups.groups.default) == null ? void 0 : _f.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)),
+          (_k = uniqueGroups.groups.default) == null ? void 0 : _k.map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)),
           nodes.filter(
             (node) => "type" in node.attributes && node.attributes.type !== "submit"
           ).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
@@ -3373,11 +3549,16 @@ function SettingsSectionContent({ group, nodes }) {
     ).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)) })
   ] });
 }
+var getScriptNode = (nodes) => nodes.find(
+  (node) => "id" in node.attributes && node.attributes.id === "webauthn_script"
+);
 function OrySettingsCard() {
   const { flow } = useOryFlow();
   const uniqueGroups = useNodesGroups(flow.ui.nodes);
+  const scriptNode = getScriptNode(flow.ui.nodes);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(OryCardValidationMessages, {}),
+    scriptNode && /* @__PURE__ */ jsx(Node, { node: scriptNode }),
     uniqueGroups.entries.map(([group, nodes]) => {
       if (group === UiNodeGroupEnum.Default) {
         return null;