@ory/elements-react 1.2.0-rc.0 → 1.2.0-rc.1

package/dist/index.mjs

@@ -1,8 +1,9 @@
-import { UiNodeGroupEnum, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, FlowType, getNodeId, Configuration, FrontendApi, isUiNodeTextAttributes, UiNodeInputAttributesTypeEnum, handleContinueWith, isResponseError as isResponseError$1, loginUrl, settingsUrl, registrationUrl, FetchError, ResponseError, recoveryUrl, instanceOfContinueWithRecoveryUi, verificationUrl as verificationUrl$1 } from '@ory/client-fetch';
-import { createContext, useContext, useRef, useEffect, useState, useMemo, useReducer } from 'react';
+import { UiNodeGroupEnum, getNodeLabel, UiNodeInputAttributesTypeEnum, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, FlowType, getNodeId, Configuration, FrontendApi, handleContinueWith, isResponseError as isResponseError$1, loginUrl, settingsUrl, registrationUrl, FetchError, ResponseError, recoveryUrl, instanceOfContinueWithRecoveryUi, verificationUrl as verificationUrl$1 } from '@ory/client-fetch';
+import { createContext, useMemo, useEffect, useCallback, useContext, useRef, useState, useReducer } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useIntl, IntlContext, createIntlCache, createIntl, RawIntlProvider } from 'react-intl';
-import { useFormContext, useForm, FormProvider } from 'react-hook-form';
+import { useController, useFormState, useFormContext, useForm, FormProvider } from 'react-hook-form';
+import { useDebounceValue } from 'usehooks-ts';
 import { Toaster, toast } from 'sonner';
 
 // src/context/component.tsx
@@ -577,12 +578,13 @@ function OryCardHeader() {
 }
 function computeDefaultValues(flow) {
   const defaults = flow.ui.nodes.reduce((acc, node) => {
+    var _a;
     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") {
+      if (attrs.name === "method" || attrs.type === "submit") {
         return acc;
       }
       if (attrs.name.startsWith("grant_scope")) {
@@ -604,7 +606,7 @@ function computeDefaultValues(flow) {
       return unrollTrait(
         {
           name: attrs.name,
-          value: attrs.value
+          value: (_a = attrs.value) != null ? _a : ""
         },
         acc
       );
@@ -1054,6 +1056,35 @@ async function onSubmitVerification({ flow }, config, {
   );
 }
 
+// src/util/removeFalsyValues.ts
+function removeEmptyStrings(input) {
+  if (Array.isArray(input)) {
+    return input.map((item) => removeEmptyStrings(item)).filter(
+      (v) => v || typeof v === "boolean" || typeof v === "number"
+    );
+  }
+  if (input === null || typeof input !== "object") {
+    return input;
+  }
+  const obj = input;
+  const out = {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (value && typeof value === "object") {
+      const cleaned = removeEmptyStrings(value);
+      if (Array.isArray(cleaned)) {
+        if (cleaned.length) {
+          out[key] = cleaned;
+        }
+      } else if (cleaned && Object.keys(cleaned).length > 0) {
+        out[key] = cleaned;
+      }
+    } else if (value || typeof value === "boolean" || typeof value === "number") {
+      out[key] = value;
+    }
+  }
+  return out;
+}
+
 // src/components/form/useOryFormSubmit.ts
 var supportsSelectAccountPrompt = ["google", "github"];
 function useOryFormSubmit(onAfterSubmit) {
@@ -1062,12 +1093,17 @@ function useOryFormSubmit(onAfterSubmit) {
   const config = useOryConfiguration();
   const handleSuccess = (flow) => {
     flowContainer.setFlowContainer(flow);
-    methods.reset(computeDefaultValues(flow.flow));
+    const newValues = computeDefaultValues(flow.flow);
+    methods.reset(newValues, {
+      keepSubmitCount: true
+    });
   };
   const onRedirect = (url, _external) => {
     window.location.assign(url);
   };
-  const onSubmit = async (data) => {
+  const onSubmit = async (initialData) => {
+    const data = removeEmptyStrings(initialData);
+    console.log("Submitting form data:", data);
     switch (flowContainer.flowType) {
       case FlowType.Login: {
         const submitData = {
@@ -1214,7 +1250,7 @@ function OryForm({ children, onAfterSubmit }) {
     {
       action: flowContainer.flow.ui.action,
       method: flowContainer.flow.ui.method,
-      onSubmit: (e) => void methods.handleSubmit(onSubmit)(e),
+      onSubmit: (e) => void methods.handleSubmit(onSubmit, console.error)(e),
       children
     }
   );
@@ -1245,16 +1281,376 @@ function OryCardValidationMessages({
   }
   return /* @__PURE__ */ jsx(Message.Root, { children: messages == null ? void 0 : messages.map((message) => /* @__PURE__ */ jsx(Message.Content, { message }, message.id)) });
 }
+
+// src/util/utilFixSDKTypesHelper.ts
+function isUiNodeInput(node) {
+  return node.type === "input";
+}
+function isUiNodeImage(node) {
+  return node.type === "img";
+}
+function isUiNodeAnchor(node) {
+  return node.type === "a";
+}
+function isUiNodeText(node) {
+  return node.type === "text";
+}
+function isUiNodeScript(node) {
+  return node.type === "script";
+}
+function isUiNodeDiv(node) {
+  return node.type === "div";
+}
+function ConsentCheckboxRenderer({ node }) {
+  const attributes = node.attributes;
+  const { Node: Node2 } = useComponents();
+  const { setValue, watch, formState } = useFormContext();
+  const scopes = watch("grant_scope");
+  const checked = useMemo(() => {
+    if (Array.isArray(scopes)) {
+      return scopes.includes(attributes.value);
+    }
+    return false;
+  }, [scopes, attributes.value]);
+  const handleScopeChange = (checked2) => {
+    const scopes2 = watch("grant_scope");
+    if (Array.isArray(scopes2)) {
+      if (checked2) {
+        setValue(
+          "grant_scope",
+          Array.from(/* @__PURE__ */ new Set([...scopes2, attributes.value]))
+        );
+      } else {
+        setValue(
+          "grant_scope",
+          scopes2.filter((scope) => scope !== attributes.value)
+        );
+      }
+    }
+  };
+  const inputProps = {
+    value: attributes.value,
+    checked: checked === true,
+    disabled: attributes.disabled || !formState.isReady,
+    name: attributes.name
+  };
+  return /* @__PURE__ */ jsx(
+    Node2.ConsentScopeCheckbox,
+    {
+      attributes,
+      node,
+      inputProps,
+      onCheckedChange: handleScopeChange
+    }
+  );
+}
+function ButtonRenderer({ node }) {
+  const { Node: Node2 } = useComponents();
+  const { formState, setValue } = useFormContext();
+  const [clicked, setClicked] = useDebounceValue(false, 100);
+  const handleClick = useCallback(() => {
+    setValue(node.attributes.name, node.attributes.value);
+    setClicked(true);
+    if (node.attributes.onclickTrigger) {
+      triggerToWindowCall(node.attributes.onclickTrigger);
+    }
+  }, [node.attributes, setValue, setClicked]);
+  const buttonProps = {
+    type: node.attributes.type === "submit" ? "submit" : "button",
+    name: node.attributes.name,
+    value: node.attributes.value,
+    onClick: handleClick,
+    disabled: node.attributes.disabled || !formState.isReady || formState.isSubmitting
+  };
+  useEffect(() => {
+    if (!formState.isSubmitting) {
+      setClicked(false);
+    }
+  }, [formState.isSubmitting, setClicked]);
+  return /* @__PURE__ */ jsx(
+    Node2.Button,
+    {
+      attributes: node.attributes,
+      node,
+      buttonProps,
+      isSubmitting: clicked
+    }
+  );
+}
+function CheckboxRenderer({ node }) {
+  const attributes = node.attributes;
+  const { Node: Node2 } = useComponents();
+  const controller = useController({
+    name: attributes.name,
+    defaultValue: attributes.value,
+    disabled: attributes.disabled
+  });
+  const inputProps = {
+    ...controller.field,
+    type: "checkbox",
+    value: controller.field.value === true ? "true" : "false",
+    checked: controller.field.value === true,
+    disabled: attributes.disabled || !controller.formState.isReady
+  };
+  return /* @__PURE__ */ jsx(
+    Node2.Label,
+    {
+      attributes: { ...attributes, label: void 0 },
+      node: { ...node, meta: { ...node.meta, label: void 0 } },
+      fieldError: controller.fieldState.error,
+      children: /* @__PURE__ */ jsx(
+        Node2.Checkbox,
+        {
+          attributes,
+          node,
+          inputProps,
+          onClick: () => {
+          }
+        }
+      )
+    }
+  );
+}
+function ImageRenderer({ node }) {
+  const { Node: Node2 } = useComponents();
+  return /* @__PURE__ */ jsx(Node2.Image, { node, attributes: node.attributes });
+}
+
+// src/util/nodes.ts
+function isDynamicText(text) {
+  return text.id === 1070002 && !!text.context && "name" in text.context && typeof text.context["name"] === "string";
+}
+
+// src/util/i18n/index.ts
+var uiTextToFormattedMessage = ({ id, context = {}, text }, intl) => {
+  const contextInjectedMessage = Object.entries(context).reduce(
+    (accumulator, [key, value]) => {
+      if (Array.isArray(value)) {
+        return {
+          ...accumulator,
+          [key]: value,
+          [key + "_list"]: intl.formatList(value)
+        };
+      } else if (key.endsWith("_unix")) {
+        if (typeof value === "number") {
+          return {
+            ...accumulator,
+            [key]: intl.formatDate(new Date(value * 1e3)),
+            [key + "_since"]: intl.formatDateTimeRange(
+              new Date(value),
+              /* @__PURE__ */ new Date()
+            ),
+            [key + "_since_minutes"]: Math.ceil(
+              (value - (/* @__PURE__ */ new Date()).getTime() / 1e3) / 60
+            ).toFixed(0),
+            [key + "_until"]: intl.formatDateTimeRange(
+              /* @__PURE__ */ new Date(),
+              new Date(value)
+            ),
+            [key + "_until_minutes"]: Math.ceil(
+              ((/* @__PURE__ */ new Date()).getTime() / 1e3 - value) / 60
+            ).toFixed(0)
+          };
+        }
+      } else if (key === "property") {
+        return {
+          ...accumulator,
+          [key]: intl.formatMessage({
+            id: `property.${value}`,
+            defaultMessage: value
+          })
+        };
+      }
+      return {
+        ...accumulator,
+        [key]: value
+      };
+    },
+    {}
+  );
+  return intl.formatMessage(
+    {
+      id: `identities.messages.${id}`,
+      defaultMessage: text
+    },
+    contextInjectedMessage
+  );
+};
+function resolvePlaceholder(text, intl) {
+  const fallback = intl.formatMessage(
+    {
+      id: "input.placeholder",
+      defaultMessage: "Enter your {placeholder}"
+    },
+    {
+      placeholder: uiTextToFormattedMessage(text, intl)
+    }
+  );
+  if (isDynamicText(text)) {
+    const field = text.context.name;
+    return intl.formatMessage({
+      id: `forms.input.placeholder.${field}`,
+      defaultMessage: fallback
+    });
+  }
+  return fallback;
+}
+
+// src/util/test-id.ts
+function messageTestId(message) {
+  return {
+    "data-testid": `ory/message/${message.id}`
+  };
+}
+function useInputProps(attributes, placeholder) {
+  const controller = useController({
+    name: attributes.name,
+    control: void 0,
+    disabled: attributes.disabled,
+    shouldUnregister: true
+    // TODO: consider adding rules based on attributes.required, attributes.pattern, etc.
+  });
+  const handleClick = () => {
+    if (attributes.onclickTrigger) {
+      triggerToWindowCall(attributes.onclickTrigger);
+    }
+  };
+  return {
+    ...controller.field,
+    type: attributes.type,
+    onClick: handleClick,
+    maxLength: attributes.maxlength,
+    autoComplete: attributes.autocomplete,
+    placeholder: placeholder || "",
+    disabled: attributes.disabled || !controller.formState.isReady
+  };
+}
+function InputRenderer({ node }) {
+  const { Node: Node2 } = useComponents();
+  const label = getNodeLabel(node);
+  const intl = useIntl();
+  const formState = useFormState();
+  const attributes = node.attributes;
+  const placeholder = label ? resolvePlaceholder(label, intl) : "";
+  const inputProps = useInputProps(attributes, placeholder);
+  const isPinCodeInput = attributes.name === "code" && node.group === "code" || attributes.name === "totp_code" && node.group === "totp";
+  const InputComponent = isPinCodeInput ? Node2.CodeInput : Node2.Input;
+  return /* @__PURE__ */ jsx(
+    Node2.Label,
+    {
+      attributes,
+      node,
+      fieldError: formState.errors[attributes.name],
+      children: /* @__PURE__ */ jsx(
+        InputComponent,
+        {
+          attributes,
+          node,
+          onClick: inputProps.onClick,
+          inputProps
+        }
+      )
+    }
+  );
+}
+function extractProvider(context) {
+  if (context && typeof context === "object" && "provider" in context && typeof context.provider === "string") {
+    return context.provider;
+  }
+  return void 0;
+}
+function SSOButtonRenderer({ node }) {
+  var _a, _b;
+  const { Node: Node2 } = useComponents();
+  const attributes = node.attributes;
+  const {
+    setValue,
+    formState: { isSubmitting, isReady }
+  } = useFormContext();
+  const [clicked, setClicked] = useDebounceValue(false, 100);
+  useEffect(() => {
+    if (!isSubmitting) {
+      setClicked(false);
+    }
+  }, [isSubmitting, setClicked]);
+  const clickHandler = useCallback(() => {
+    setValue("provider", attributes.value);
+    setValue("method", node.group);
+    setClicked(true);
+  }, [setValue, attributes.value, node.group, setClicked]);
+  const buttonProps = {
+    type: "submit",
+    name: attributes.name,
+    value: attributes.value,
+    onClick: clickHandler,
+    disabled: attributes.disabled || !isReady || isSubmitting
+  };
+  const provider = (_b = extractProvider((_a = node.meta.label) == null ? void 0 : _a.context)) != null ? _b : "";
+  return /* @__PURE__ */ jsx(
+    Node2.SsoButton,
+    {
+      node,
+      attributes,
+      buttonProps,
+      provider,
+      isSubmitting: clicked
+    }
+  );
+}
+function TextRenderer({ node }) {
+  const { Node: Node2 } = useComponents();
+  return /* @__PURE__ */ jsx(Node2.Text, { node, attributes: node.attributes });
+}
+
+// src/components/form/nodes/renderer/index.ts
+var NodeRenderer = {
+  Button: ButtonRenderer,
+  SsoButton: SSOButtonRenderer,
+  ConsentCheckbox: ConsentCheckboxRenderer,
+  Input: InputRenderer,
+  Checkbox: CheckboxRenderer,
+  Image: ImageRenderer,
+  Text: TextRenderer
+};
+function NodeButton({ node }) {
+  var _a;
+  const isResendNode = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
+  const isScreenSelectionNode2 = "name" in node.attributes && node.attributes.name === "screen";
+  if (isResendNode || isScreenSelectionNode2) {
+    return null;
+  }
+  if (node.group === "oauth2_consent") {
+    return null;
+  }
+  const isSocial = (node.attributes.name === "provider" || node.attributes.name === "link") && (node.group === UiNodeGroupEnum.Oidc || node.group === UiNodeGroupEnum.Saml);
+  if (isSocial) {
+    return /* @__PURE__ */ jsx(NodeRenderer.SsoButton, { node });
+  }
+  return /* @__PURE__ */ jsx(NodeRenderer.Button, { node });
+}
+function HiddenInputRenderer({ node }) {
+  const { Node: Node2 } = useComponents();
+  const attributes = node.attributes;
+  const inputProps = useInputProps(attributes);
+  return /* @__PURE__ */ jsx(
+    Node2.Input,
+    {
+      inputProps,
+      attributes,
+      node,
+      onClick: () => {
+      }
+    }
+  );
+}
 var NodeInput = ({
   node,
   attributes
 }) => {
   var _a;
-  const { Node: Node2 } = useComponents();
-  const { setValue, watch } = useFormContext();
+  const { setValue } = useFormContext();
   const {
     onloadTrigger,
-    onclickTrigger,
     // These properties do not exist on input fields so we remove them (as we already have handled them).
     onclick: _ignoredOnclick,
     onload: _ignoredOnload,
@@ -1281,117 +1677,44 @@ var NodeInput = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- ignore onloadTrigger for now, until we make sure this is stable
     []
   );
-  const handleClick = () => {
-    setFormValue();
-    if (onclickTrigger) {
-      triggerToWindowCall(onclickTrigger);
-    }
-  };
-  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";
-  const handleScopeChange = (checked) => {
-    const scopes = watch("grant_scope");
-    if (Array.isArray(scopes)) {
-      if (checked) {
-        setValue("grant_scope", Array.from(/* @__PURE__ */ new Set([...scopes, attrs.value])));
-      } else {
-        setValue(
-          "grant_scope",
-          scopes.filter((scope) => scope !== attrs.value)
-        );
-      }
-    }
-  };
   switch (attributes.type) {
     case UiNodeInputAttributesTypeEnum.Submit:
-    case UiNodeInputAttributesTypeEnum.Button:
-      if (isSocial) {
-        return /* @__PURE__ */ jsx(
-          Node2.SsoButton,
-          {
-            node,
-            attributes: attrs,
-            onClick: () => {
-              setValue(
-                "provider",
-                node.attributes.value
-              );
-              setValue("method", node.group);
-            }
-          }
-        );
-      }
-      if (isResendNode || isScreenSelectionNode2) {
-        return null;
-      }
-      if (node.group === "oauth2_consent") {
-        return null;
-      }
-      return /* @__PURE__ */ jsx(
-        Node2.Label,
-        {
-          attributes: { ...attrs, label: void 0 },
-          node: { ...node, meta: { ...node.meta, label: void 0 } },
-          children: /* @__PURE__ */ jsx(Node2.Button, { attributes: attrs, node, onClick: handleClick })
-        }
-      );
+    case UiNodeInputAttributesTypeEnum.Button: {
+      return /* @__PURE__ */ jsx(NodeButton, { node });
+    }
     case UiNodeInputAttributesTypeEnum.DatetimeLocal:
       throw new Error("Not implemented");
     case UiNodeInputAttributesTypeEnum.Checkbox:
       if (node.group === "oauth2_consent" && node.attributes.node_type === "input") {
         switch (node.attributes.name) {
           case "grant_scope":
-            return /* @__PURE__ */ jsx(
-              Node2.ConsentScopeCheckbox,
-              {
-                attributes: attrs,
-                node,
-                onCheckedChange: handleScopeChange
-              }
-            );
+            return /* @__PURE__ */ jsx(ConsentCheckboxRenderer, { node });
           default:
             return null;
         }
       }
-      return /* @__PURE__ */ jsx(
-        Node2.Label,
-        {
-          attributes: { ...attrs, label: void 0 },
-          node: { ...node, meta: { ...node.meta, label: void 0 } },
-          children: /* @__PURE__ */ jsx(Node2.Checkbox, { attributes: attrs, node, onClick: handleClick })
-        }
-      );
+      return /* @__PURE__ */ jsx(CheckboxRenderer, { node });
     case UiNodeInputAttributesTypeEnum.Hidden:
-      return /* @__PURE__ */ jsx(Node2.Input, { attributes: attrs, node, onClick: handleClick });
+      return /* @__PURE__ */ jsx(HiddenInputRenderer, { node });
     default:
-      if (isPinCodeInput) {
-        return /* @__PURE__ */ jsx(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx(
-          Node2.CodeInput,
-          {
-            attributes: attrs,
-            node,
-            onClick: handleClick
-          }
-        ) });
-      }
-      return /* @__PURE__ */ jsx(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx(Node2.Input, { attributes: attrs, node, onClick: handleClick }) });
+      return /* @__PURE__ */ jsx(InputRenderer, { node });
   }
 };
-var Node = ({ node, onClick }) => {
+var ignoredScriptGroups = ["captcha"];
+var NodeBase = ({ node }) => {
   const { Node: Node2 } = useComponents();
   if (node.group === UiNodeGroupEnum.Captcha) {
     return /* @__PURE__ */ jsx(Node2.Captcha, { node });
   }
-  if (isUiNodeImageAttributes(node.attributes)) {
-    return /* @__PURE__ */ jsx(Node2.Image, { node, attributes: node.attributes });
-  } else if (isUiNodeTextAttributes(node.attributes)) {
-    const attrs = node.attributes;
-    return /* @__PURE__ */ jsx(Node2.Text, { attributes: attrs, node });
-  } else if (isUiNodeInputAttributes(node.attributes)) {
-    return /* @__PURE__ */ jsx(NodeInput, { node, attributes: node.attributes, onClick });
-  } else if (isUiNodeAnchorAttributes(node.attributes)) {
+  if (isUiNodeImage(node)) {
+    return /* @__PURE__ */ jsx(NodeRenderer.Image, { node });
+  } else if (isUiNodeText(node)) {
+    return /* @__PURE__ */ jsx(NodeRenderer.Text, { node });
+  } else if (isUiNodeInput(node)) {
+    return /* @__PURE__ */ jsx(NodeInput, { node, attributes: node.attributes });
+  } else if (isUiNodeAnchor(node)) {
     return /* @__PURE__ */ jsx(Node2.Anchor, { attributes: node.attributes, node });
-  } else if (isUiNodeScriptAttributes(node.attributes)) {
+  } else if (isUiNodeScript(node) && !ignoredScriptGroups.includes(node.group)) {
     const {
       crossorigin,
       referrerpolicy,
@@ -1409,6 +1732,7 @@ var Node = ({ node, onClick }) => {
   }
   return null;
 };
+var Node = Object.assign(NodeBase, NodeRenderer);
 function MethodActiveForm({
   formState
 }) {
@@ -1437,29 +1761,14 @@ function OryFormSsoButtons() {
   const {
     flow: { ui }
   } = useOryFlow();
-  const { setValue } = useFormContext();
   const filteredNodes = ui.nodes.filter(
     (node) => node.group === UiNodeGroupEnum.Oidc || node.group === UiNodeGroupEnum.Saml
   );
-  const { Form, Node: Node2 } = useComponents();
+  const { Form } = useComponents();
   if (filteredNodes.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Form.SsoRoot, { nodes: filteredNodes, children: filteredNodes.map((node) => /* @__PURE__ */ jsx(
-    Node2.SsoButton,
-    {
-      node,
-      attributes: node.attributes,
-      onClick: () => {
-        setValue(
-          "provider",
-          node.attributes.value
-        );
-        setValue("method", node.group);
-      }
-    },
-    getNodeId(node)
-  )) });
+  return /* @__PURE__ */ jsx(Form.SsoRoot, { nodes: filteredNodes, children: filteredNodes.map((node) => /* @__PURE__ */ jsx(Node, { node }, getNodeId(node))) });
 }
 function OryFormSsoForm() {
   const {
@@ -1501,7 +1810,7 @@ function AuthMethodList({
   setSelectedGroup
 }) {
   const { Card } = useComponents();
-  const { setValue, getValues } = useFormContext();
+  const { setValue, getValues, formState } = useFormContext();
   if (Object.entries(options).length === 0) {
     return null;
   }
@@ -1521,7 +1830,8 @@ function AuthMethodList({
     {
       group,
       title: options2.title,
-      onClick: () => handleClick(group, options2)
+      onClick: () => handleClick(group, options2),
+      disabled: !formState.isReady || formState.isSubmitting
     },
     group
   )) });
@@ -1659,6 +1969,42 @@ function OrySettingsFormSectionInner({
     }
   );
 }
+function findResendNode(nodes) {
+  return nodes.find(
+    (n) => "name" in n.attributes && (["email", "recovery_confirm_address"].includes(n.attributes.name) && n.attributes.type === "submit" || n.attributes.name === "resend")
+  );
+}
+function useResendCode() {
+  const flowContainer = useOryFlow();
+  const resendCodeNode = findResendNode(flowContainer.flow.ui.nodes);
+  const formSubmit = useOryFormSubmit();
+  const handleResend = useCallback(() => {
+    const hiddenFields = flowContainer.flow.ui.nodes.filter(
+      (n) => n.attributes.node_type === "input" && (n.attributes.type === "hidden" || n.group === "default")
+    );
+    const hiddenData = computeDefaultValues({
+      active: flowContainer.flow.active,
+      ui: { nodes: hiddenFields }
+    });
+    if ((resendCodeNode == null ? void 0 : resendCodeNode.attributes) && "name" in resendCodeNode.attributes) {
+      const data = {
+        code: void 0,
+        [resendCodeNode.attributes.name]: resendCodeNode.attributes.value,
+        method: "code"
+      };
+      formSubmit({ ...hiddenData, ...data });
+    }
+  }, [
+    flowContainer.flow.active,
+    flowContainer.flow.ui.nodes,
+    formSubmit,
+    resendCodeNode
+  ]);
+  return {
+    resendCode: handleResend,
+    resendCodeNode
+  };
+}
 function OryConsentCard() {
   const { Form, Card } = useComponents();
   const flow = useOryFlow();
@@ -1697,32 +2043,54 @@ function showToast(toast$1, ToastComponent) {
 }
 var getLinkButtons = (nodes) => nodes.filter(
   (node) => "name" in node.attributes && node.attributes.name === "link"
-);
+).filter(isUiNodeInput);
 var getUnlinkButtons = (nodes) => nodes.filter(
   (node) => "name" in node.attributes && node.attributes.name === "unlink"
-);
+).filter(isUiNodeInput);
 function OrySettingsOidc({ nodes }) {
   const { Card, Form } = useComponents();
   const intl = useIntl();
-  const { setValue } = useFormContext();
-  const linkButtons = getLinkButtons(nodes).map((node) => ({
-    ...node,
-    onClick: () => {
-      if (node.attributes.node_type === "input") {
-        setValue("link", node.attributes.value);
-        setValue("method", node.group);
-      }
+  const { setValue, formState } = useFormContext();
+  const linkButtons = getLinkButtons(nodes).map(
+    (node) => {
+      const clickHandler = function() {
+        if (node.attributes.node_type === "input") {
+          setValue("link", node.attributes.value);
+          setValue("method", node.group);
+        }
+      };
+      return {
+        ...node,
+        onClick: clickHandler,
+        buttonProps: {
+          name: node.attributes.name,
+          value: node.attributes.value,
+          onClick: clickHandler,
+          type: "submit"
+        }
+      };
     }
-  }));
-  const unlinkButtons = getUnlinkButtons(nodes).map((node) => ({
-    ...node,
-    onClick: () => {
-      if (node.attributes.node_type === "input") {
-        setValue("unlink", node.attributes.value);
-        setValue("method", node.group);
-      }
+  );
+  const unlinkButtons = getUnlinkButtons(nodes).map(
+    (node) => {
+      const clickHandler = function() {
+        if (node.attributes.node_type === "input") {
+          setValue("unlink", node.attributes.value);
+          setValue("method", node.group);
+        }
+      };
+      return {
+        ...node,
+        onClick: clickHandler,
+        buttonProps: {
+          name: node.attributes.name,
+          value: node.attributes.value,
+          onClick: clickHandler,
+          type: "submit"
+        }
+      };
     }
-  }));
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Card.SettingsSectionContent,
@@ -1733,7 +2101,8 @@ function OrySettingsOidc({ nodes }) {
           Form.SsoSettings,
           {
             linkButtons,
-            unlinkButtons
+            unlinkButtons,
+            isSubmitting: formState.isSubmitting
           }
         )
       }
@@ -1746,7 +2115,7 @@ function OrySettingsOidc({ nodes }) {
     )
   ] });
 }
-var getTriggerNode = (nodes) => nodes.find(
+var getTriggerNode = (nodes) => nodes.filter(isUiNodeInput).find(
   (node) => "name" in node.attributes && node.attributes.name === "passkey_register_trigger"
 );
 var getSettingsNodes = (nodes) => nodes.filter(
@@ -1754,11 +2123,11 @@ var getSettingsNodes = (nodes) => nodes.filter(
 );
 var getRemoveNodes = (nodes) => nodes.filter(
   (node) => "name" in node.attributes && node.attributes.name === "passkey_remove"
-);
+).filter(isUiNodeInput);
 function OrySettingsPasskey({ nodes }) {
   const { Card, Form } = useComponents();
   const intl = useIntl();
-  const { setValue } = useFormContext();
+  const { setValue, formState } = useFormContext();
   const triggerButton = getTriggerNode(nodes);
   const settingsNodes = getSettingsNodes(nodes);
   const removeNodes = getRemoveNodes(nodes);
@@ -1792,14 +2161,27 @@ function OrySettingsPasskey({ nodes }) {
           /* @__PURE__ */ jsx(
             Form.PasskeySettings,
             {
+              isSubmitting: formState.isSubmitting,
               triggerButton: {
                 ...triggerButton,
-                attributes: triggerAttributes,
-                onClick: onTriggerClick
+                onClick: onTriggerClick,
+                buttonProps: {
+                  name: triggerAttributes.name,
+                  value: triggerAttributes.value,
+                  onClick: onTriggerClick,
+                  type: "button"
+                }
               },
               removeButtons: removeNodes.map((node) => ({
                 ...node,
                 onClick: node.attributes.node_type === "input" ? removePasskeyHandler(node.attributes.value) : () => {
+                },
+                buttonProps: {
+                  name: node.attributes.name,
+                  value: node.attributes.value,
+                  onClick: node.attributes.node_type === "input" ? removePasskeyHandler(node.attributes.value) : () => {
+                  },
+                  type: "button"
                 }
               }))
             }
@@ -1816,32 +2198,32 @@ function OrySettingsPasskey({ nodes }) {
   ] });
 }
 var getRegenerateNode = (nodes) => nodes.find(
-  (node) => "name" in node.attributes && node.attributes.name === "lookup_secret_regenerate"
+  (node) => "name" in node.attributes && node.attributes.name === "lookup_secret_regenerate" && isUiNodeInput(node)
 );
 var getRevealNode = (nodes) => nodes.find(
-  (node) => "name" in node.attributes && node.attributes.name === "lookup_secret_reveal"
+  (node) => "name" in node.attributes && node.attributes.name === "lookup_secret_reveal" && isUiNodeInput(node)
 );
 var getRecoveryCodes = (nodes) => nodes.find(
-  (node) => "id" in node.attributes && node.attributes.id === "lookup_secret_codes"
+  (node) => "id" in node.attributes && node.attributes.id === "lookup_secret_codes" && isUiNodeText(node)
 );
 var getDisableNode = (nodes) => nodes.find(
-  (node) => "name" in node.attributes && node.attributes.name === "lookup_secret_disable"
+  (node) => "name" in node.attributes && node.attributes.name === "lookup_secret_disable" && isUiNodeInput(node)
 );
 var getConfirmNode = (nodes) => nodes.find(
-  (node) => "name" in node.attributes && node.attributes.name === "lookup_secret_confirm"
+  (node) => "name" in node.attributes && node.attributes.name === "lookup_secret_confirm" && isUiNodeInput(node)
 );
 function OrySettingsRecoveryCodes({
   nodes
 }) {
   var _a, _b, _c;
-  const { Card, Form, Node: Node2 } = useComponents();
+  const { Card, Form } = 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 { setValue, formState } = 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 = () => {
@@ -1870,41 +2252,36 @@ function OrySettingsRecoveryCodes({
           {
             codes: secrets,
             revealButton: revealNode,
-            regnerateButton: regenerateNode,
+            regenerateButton: regenerateNode,
             onRegenerate,
-            onReveal
+            onReveal,
+            isSubmitting: formState.isSubmitting
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx(Card.SettingsSectionFooter, { children: footerNode && /* @__PURE__ */ jsx(
-      Node2.Button,
-      {
-        node: footerNode,
-        attributes: footerNode.attributes
-      }
-    ) })
+    /* @__PURE__ */ jsx(Card.SettingsSectionFooter, { children: footerNode && /* @__PURE__ */ jsx(Node, { node: footerNode }) })
   ] });
 }
 var getQrCodeNode = (nodes) => nodes.find(
-  (node) => "id" in node.attributes && node.attributes.id === "totp_qr"
+  (node) => "id" in node.attributes && node.attributes.id === "totp_qr" && isUiNodeImage(node)
 );
 var getTotpSecretNode = (nodes) => nodes.find(
-  (node) => "id" in node.attributes && node.attributes.id === "totp_secret_key"
+  (node) => "id" in node.attributes && node.attributes.id === "totp_secret_key" && isUiNodeText(node)
 );
 var getTotpInputNode = (nodes) => nodes.find(
-  (node) => "name" in node.attributes && node.attributes.name === "totp_code"
+  (node) => "name" in node.attributes && node.attributes.name === "totp_code" && isUiNodeInput(node)
 );
 var getTotpUnlinkInput = (nodes) => nodes.find(
-  (node) => "name" in node.attributes && node.attributes.name === "totp_unlink"
+  (node) => "name" in node.attributes && node.attributes.name === "totp_unlink" && isUiNodeInput(node)
 );
 var getTotpLinkButton = (nodes) => nodes.find(
-  (node) => "name" in node.attributes && node.attributes.name === "method"
+  (node) => "name" in node.attributes && node.attributes.name === "method" && isUiNodeInput(node)
 );
 function OrySettingsTotp({ nodes }) {
-  const { Card, Form, Node: Node2 } = useComponents();
+  const { Card, Form } = useComponents();
   const intl = useIntl();
-  const { setValue } = useFormContext();
+  const { setValue, formState } = useFormContext();
   const totpUnlink = getTotpUnlinkInput(nodes);
   const qrNode = getQrCodeNode(nodes);
   const secretNode = getTotpSecretNode(nodes);
@@ -1922,14 +2299,22 @@ function OrySettingsTotp({ nodes }) {
       {
         title: intl.formatMessage({ id: "settings.totp.title" }),
         description: intl.formatMessage({ id: "settings.totp.description" }),
-        children: /* @__PURE__ */ jsx(
+        children: qrNode && secretNode && totpCodeNode && !totpUnlink ? /* @__PURE__ */ jsx(
+          TotpSettingsLink,
+          {
+            totpImage: qrNode,
+            totpSecret: secretNode,
+            totpInput: totpCodeNode
+          }
+        ) : /* @__PURE__ */ jsx(
           Form.TotpSettings,
           {
             totpImage: qrNode,
             totpSecret: secretNode,
-            totpInput: totpCodeNode,
+            totpInput: void 0,
             totpUnlink,
-            onUnlink: handleUnlink
+            onUnlink: handleUnlink,
+            isSubmitting: formState.isSubmitting
           }
         )
       }
@@ -1938,17 +2323,31 @@ function OrySettingsTotp({ nodes }) {
       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
-          }
-        )
+        children: totpLinkButton && /* @__PURE__ */ jsx(Node, { node: totpLinkButton })
       }
     )
   ] });
 }
+function TotpSettingsLink({
+  totpImage,
+  totpSecret,
+  totpInput
+}) {
+  const { formState } = useFormContext();
+  const { Form } = useComponents();
+  return /* @__PURE__ */ jsx(
+    Form.TotpSettings,
+    {
+      totpImage,
+      totpSecret,
+      totpInput,
+      totpUnlink: void 0,
+      onUnlink: () => {
+      },
+      isSubmitting: formState.isSubmitting
+    }
+  );
+}
 var getInputNode = (nodes) => nodes.find(
   (node) => "name" in node.attributes && node.attributes.name === "webauthn_register_displayname"
 );
@@ -1962,30 +2361,14 @@ var getRegisterNode = (nodes) => nodes.find(
   (node) => "name" in node.attributes && node.attributes.name === "webauthn_register"
 );
 function OrySettingsWebauthn({ nodes }) {
-  const { Card, Form } = useComponents();
+  const { Card } = useComponents();
   const intl = useIntl();
-  const { setValue } = useFormContext();
   const triggerButton = getTriggerNode2(nodes);
   const inputNode = getInputNode(nodes);
-  const removeButtons = getRemoveButtons(nodes);
   const registerNode = getRegisterNode(nodes);
-  if (!inputNode || !triggerButton) {
+  if (!inputNode || !triggerButton || inputNode.attributes.node_type !== "input") {
     return null;
   }
-  const {
-    onclick: _onClick,
-    onclickTrigger,
-    ...triggerAttributes
-  } = triggerButton.attributes;
-  const onTriggerClick = () => {
-    triggerToWindowCall(onclickTrigger);
-  };
-  const removeWebauthnKeyHandler = (value) => {
-    return () => {
-      setValue("webauthn_remove", value);
-      setValue("method", "webauthn");
-    };
-  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       Card.SettingsSectionContent,
@@ -1996,19 +2379,11 @@ function OrySettingsWebauthn({ nodes }) {
         }),
         children: [
           /* @__PURE__ */ jsx(
-            Form.WebauthnSettings,
+            WebauthnForm,
             {
-              nameInput: inputNode,
-              triggerButton: {
-                ...triggerButton,
-                attributes: triggerAttributes,
-                onClick: onTriggerClick
-              },
-              removeButtons: removeButtons.map((node) => ({
-                ...node,
-                onClick: node.attributes.node_type === "input" ? removeWebauthnKeyHandler(node.attributes.value) : () => {
-                }
-              }))
+              inputNode,
+              nodes,
+              triggerButton
             }
           ),
           registerNode && /* @__PURE__ */ jsx(Node, { node: registerNode })
@@ -2023,6 +2398,54 @@ function OrySettingsWebauthn({ nodes }) {
     )
   ] });
 }
+function WebauthnForm({ inputNode, triggerButton, nodes }) {
+  const { Form } = useComponents();
+  const { setValue, formState } = useFormContext();
+  const removeButtons = getRemoveButtons(nodes);
+  const {
+    onclick: _onClick,
+    onclickTrigger,
+    ...triggerAttributes
+  } = triggerButton.attributes;
+  const onTriggerClick = () => {
+    triggerToWindowCall(onclickTrigger);
+  };
+  const removeWebauthnKeyHandler = (value) => {
+    return () => {
+      setValue("webauthn_remove", value);
+      setValue("method", "webauthn");
+    };
+  };
+  return /* @__PURE__ */ jsx(
+    Form.WebauthnSettings,
+    {
+      isSubmitting: formState.isSubmitting,
+      nameInput: inputNode,
+      triggerButton: {
+        ...triggerButton,
+        onClick: onTriggerClick,
+        buttonProps: {
+          name: triggerAttributes.name,
+          value: triggerAttributes.value,
+          onClick: onTriggerClick,
+          type: "button"
+        }
+      },
+      removeButtons: removeButtons.map((node) => ({
+        ...node,
+        onClick: node.attributes.node_type === "input" ? removeWebauthnKeyHandler(node.attributes.value) : () => {
+        },
+        buttonProps: {
+          name: node.attributes.name,
+          value: node.attributes.value,
+          onClick: node.attributes.node_type === "input" ? removeWebauthnKeyHandler(node.attributes.value) : () => {
+          },
+          type: "submit"
+        }
+      }))
+    }
+  );
+}
 function SettingsSectionContent({ group, nodes }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const { Card } = useComponents();
@@ -2169,69 +2592,6 @@ function SettingsMessageToaster() {
   return /* @__PURE__ */ jsx(Toaster, {});
 }
 
-// src/util/i18n/index.ts
-var uiTextToFormattedMessage = ({ id, context = {}, text }, intl) => {
-  const contextInjectedMessage = Object.entries(context).reduce(
-    (accumulator, [key, value]) => {
-      if (Array.isArray(value)) {
-        return {
-          ...accumulator,
-          [key]: value,
-          [key + "_list"]: intl.formatList(value)
-        };
-      } else if (key.endsWith("_unix")) {
-        if (typeof value === "number") {
-          return {
-            ...accumulator,
-            [key]: intl.formatDate(new Date(value * 1e3)),
-            [key + "_since"]: intl.formatDateTimeRange(
-              new Date(value),
-              /* @__PURE__ */ new Date()
-            ),
-            [key + "_since_minutes"]: Math.ceil(
-              (value - (/* @__PURE__ */ new Date()).getTime() / 1e3) / 60
-            ).toFixed(0),
-            [key + "_until"]: intl.formatDateTimeRange(
-              /* @__PURE__ */ new Date(),
-              new Date(value)
-            ),
-            [key + "_until_minutes"]: Math.ceil(
-              ((/* @__PURE__ */ new Date()).getTime() / 1e3 - value) / 60
-            ).toFixed(0)
-          };
-        }
-      } else if (key === "property") {
-        return {
-          ...accumulator,
-          [key]: intl.formatMessage({
-            id: `property.${value}`,
-            defaultMessage: value
-          })
-        };
-      }
-      return {
-        ...accumulator,
-        [key]: value
-      };
-    },
-    {}
-  );
-  return intl.formatMessage(
-    {
-      id: `identities.messages.${id}`,
-      defaultMessage: text
-    },
-    contextInjectedMessage
-  );
-};
-
-// src/util/test-id.ts
-function messageTestId(message) {
-  return {
-    "data-testid": `ory/message/${message.id}`
-  };
-}
-
 // src/locales/af.json
 var af_default = {
   "consent.action-accept": "Toelaat",
@@ -27053,6 +27413,6 @@ var OryLocales = Object.freeze({
   zu: zu_default
 });
 
-export { OryCard, OryCardContent, OryCardFooter, OryCardHeader, OryCardValidationMessages, OryConfigurationProvider, OryConsentCard, OryForm, OryFormGroupDivider, OryFormSsoButtons, OryFormSsoForm, OryLocales, OryPageHeader, OryProvider, OrySelfServiceFlowCard, OrySettingsCard, OrySettingsFormSection, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryConfiguration, useOryFlow };
+export { Node, OryCard, OryCardContent, OryCardFooter, OryCardHeader, OryCardValidationMessages, OryConfigurationProvider, OryConsentCard, OryForm, OryFormGroupDivider, OryFormSsoButtons, OryFormSsoForm, OryLocales, OryPageHeader, OryProvider, OrySelfServiceFlowCard, OrySettingsCard, OrySettingsFormSection, isUiNodeAnchor, isUiNodeDiv, isUiNodeImage, isUiNodeInput, isUiNodeScript, isUiNodeText, messageTestId, resolvePlaceholder, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryConfiguration, useOryFlow, useResendCode };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map