@ory/elements-react 0.0.0-pr.96c07cce → 0.0.0-pr.c7aa6707

package/dist/theme/default/index.mjs

@@ -2904,25 +2904,6 @@ function LoginCardFooter() {
     );
   }
   if (flow.refresh || flow.requested_aal === "aal2") {
-    if (authMethods.length > 1 && formState.current === "method_active") {
-      return /* @__PURE__ */ jsxs15("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
-        intl.formatMessage({
-          id: "login.2fa.go-back"
-        }),
-        " ",
-        /* @__PURE__ */ jsx34(
-          "a",
-          {
-            className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
-            href: "",
-            "data-testid": "ory/screen/login/mfa/action/selectMethod",
-            children: intl.formatMessage({
-              id: "login.2fa.go-back.link"
-            })
-          }
-        )
-      ] });
-    }
     return /* @__PURE__ */ jsxs15("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
       intl.formatMessage({
         id: "login.2fa.go-back"
@@ -3344,6 +3325,9 @@ var SvgArrowLeft = (props) => {
 };
 var arrow_left_default = SvgArrowLeft;
 
+// src/theme/default/components/card/current-identifier-button.tsx
+import { useFormContext as useFormContext12 } from "react-hook-form";
+
 // src/theme/default/utils/attributes.ts
 function omit(obj, keys) {
   const ret = { ...obj };
@@ -3353,13 +3337,37 @@ function omit(obj, keys) {
   return ret;
 }
 
+// src/util/omitAttributes.ts
+function omitInputAttributes({
+  ...attrs
+}) {
+  return omit(attrs, [
+    "autocomplete",
+    "label",
+    "node_type",
+    "maxlength",
+    "onclick",
+    "onclickTrigger",
+    "onload",
+    "onloadTrigger"
+  ]);
+}
+
 // src/theme/default/components/card/current-identifier-button.tsx
-import { useFormContext as useFormContext12 } from "react-hook-form";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import { jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
 function DefaultCurrentIdentifierButton() {
+  var _a;
   const { flow, flowType, config, formState } = useOryFlow4();
-  const { setValue } = useFormContext12();
+  const { setValue, getValues, watch } = useFormContext12();
+  const [turnstileResponse, setTurnstileResponse] = useState4();
   const ui = flow.ui;
+  const captchaVerificationValue = (_a = watch("transient_payload")) == null ? void 0 : _a.captcha_turnstile_response;
+  useEffect3(() => {
+    if (captchaVerificationValue) {
+      setTurnstileResponse(captchaVerificationValue);
+    }
+  }, [captchaVerificationValue]);
   if (formState.current === "provide_identifier") {
     return null;
   }
@@ -3374,11 +3382,6 @@ function DefaultCurrentIdentifierButton() {
     flow,
     `${config.sdk.url}/self-service/${flowType}/browser`
   );
-  const attributes = omit(nodeBackButton, [
-    "autocomplete",
-    "node_type",
-    "maxlength"
-  ]);
   const screenSelectionNode = findScreenSelectionButton(flow.ui.nodes);
   if (screenSelectionNode) {
     return /* @__PURE__ */ jsxs16("form", { action: flow.ui.action, method: flow.ui.method, children: [
@@ -3389,12 +3392,16 @@ function DefaultCurrentIdentifierButton() {
         return false;
       }).map((n) => {
         const attrs = n.attributes;
+        let value = getValues(attrs.name) || attrs.value;
+        if (attrs.name === "transient_payload.captcha_turnstile_response" && turnstileResponse) {
+          value = turnstileResponse;
+        }
         return /* @__PURE__ */ jsx36(
           "input",
           {
             type: "hidden",
             name: attrs.name,
-            value: attrs.value
+            value
           },
           attrs.name
         );
@@ -3403,7 +3410,7 @@ function DefaultCurrentIdentifierButton() {
         "button",
         {
           className: "group inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-identifier border px-[11px] py-[5px] transition-colors border-button-identifier-border-border-default bg-button-identifier-background-default hover:border-button-identifier-border-border-hover hover:bg-button-identifier-background-hover",
-          ...attributes,
+          ...omitInputAttributes(nodeBackButton),
           type: "submit",
           onClick: () => {
             setValue(
@@ -3435,7 +3442,7 @@ function DefaultCurrentIdentifierButton() {
     "a",
     {
       className: "group inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-identifier border px-[11px] py-[5px] transition-colors border-button-identifier-border-border-default bg-button-identifier-background-default hover:border-button-identifier-border-border-hover hover:bg-button-identifier-background-hover",
-      ...attributes,
+      ...omitInputAttributes(nodeBackButton),
       href: initFlowUrl2,
       title: `Adjust ${nodeBackButton == null ? void 0 : nodeBackButton.value}`,
       "data-testid": `ory/screen/${flowType}/action/restart`,
@@ -3581,7 +3588,7 @@ import {
   uiTextToFormattedMessage as uiTextToFormattedMessage2,
   useOryFlow as useOryFlow7
 } from "@ory/elements-react";
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 import { useFormContext as useFormContext13 } from "react-hook-form";
 import { useIntl as useIntl11 } from "react-intl";
 import { useDebounceValue } from "usehooks-ts";
@@ -3801,24 +3808,6 @@ function Spinner({ className }) {
 
 // src/theme/default/components/form/social.tsx
 import { UiNodeGroupEnum as UiNodeGroupEnum16 } from "@ory/client-fetch";
-
-// src/util/omitAttributes.ts
-function omitInputAttributes({
-  ...attrs
-}) {
-  return omit(attrs, [
-    "autocomplete",
-    "label",
-    "node_type",
-    "maxlength",
-    "onclick",
-    "onclickTrigger",
-    "onload",
-    "onloadTrigger"
-  ]);
-}
-
-// src/theme/default/components/form/social.tsx
 import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
 function extractProvider(context) {
   if (context && typeof context === "object" && "provider" in context && typeof context.provider === "string") {
@@ -3854,7 +3843,7 @@ function DefaultButtonSocial({
     onClick == null ? void 0 : onClick();
     setClicked(true);
   };
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isSubmitting) {
       setClicked(false);
     }
@@ -4095,7 +4084,7 @@ import {
 import { cva } from "class-variance-authority";
 import { useFormContext as useFormContext14 } from "react-hook-form";
 import { useIntl as useIntl14 } from "react-intl";
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 import { jsx as jsx65, jsxs as jsxs31 } from "react/jsx-runtime";
 var buttonStyles = cva(
   [
@@ -4136,14 +4125,14 @@ var DefaultButton = ({
 }) => {
   var _a;
   const { type, name, value, ...rest } = attributes;
-  const [clicked, setClicked] = useState4(false);
+  const [clicked, setClicked] = useState5(false);
   const intl = useIntl14();
   const label = getNodeLabel(node);
   const {
     formState: { isSubmitting },
     setValue
   } = useFormContext14();
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isSubmitting) {
       setClicked(false);
     }
@@ -4359,7 +4348,7 @@ import {
   uiTextToFormattedMessage as uiTextToFormattedMessage6,
   useOryFlow as useOryFlow10
 } from "@ory/elements-react";
-import { useRef as useRef2, useState as useState5 } from "react";
+import { useRef as useRef2, useState as useState6 } from "react";
 import { useFormContext as useFormContext16 } from "react-hook-form";
 import { useIntl as useIntl17 } from "react-intl";
 
@@ -4418,7 +4407,7 @@ var DefaultInput = ({
     return /* @__PURE__ */ jsx73(
       "input",
       {
-        ...rest,
+        ...omitInputAttributes(rest),
         onClick,
         maxLength: maxlength,
         autoComplete: autocomplete,
@@ -4463,7 +4452,7 @@ var DefaultInput = ({
 function PasswordToggle({
   inputRef
 }) {
-  const [shown, setShown] = useState5(false);
+  const [shown, setShown] = useState6(false);
   const handleClick = () => {
     setShown(!shown);
     if (inputRef.current) {
@@ -4981,7 +4970,7 @@ var DefaultPageHeader = (_props) => {
 };
 
 // src/theme/default/components/settings/settings-oidc.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { useFormContext as useFormContext19 } from "react-hook-form";
 import { useDebounceValue as useDebounceValue2 } from "usehooks-ts";
 
@@ -5038,7 +5027,7 @@ function UnlinkRow({ button }) {
     button.onClick();
     setClicked(true);
   };
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isSubmitting) {
       setClicked(false);
     }
@@ -5487,48 +5476,53 @@ function DefaultAuthMethodListContainer({
 // src/theme/default/components/form/captcha.tsx
 import { isUiNodeInputAttributes as isUiNodeInputAttributes9 } from "@ory/client-fetch";
 import { Turnstile } from "@marsidev/react-turnstile";
-import { useRef as useRef3 } from "react";
+import { useEffect as useEffect7, useRef as useRef3 } from "react";
 import { useFormContext as useFormContext24 } from "react-hook-form";
 import { jsx as jsx98 } from "react/jsx-runtime";
 var DefaultCaptcha = ({ node }) => {
-  const { setValue } = useFormContext24();
+  const { setValue, formState } = useFormContext24();
   const ref = useRef3();
-  const nodes = [];
-  if (isUiNodeInputAttributes9(node.attributes)) {
-    if (node.attributes.name === "transient_payload.captcha_turnstile_response") {
-      nodes.push(
-        /* @__PURE__ */ jsx98(DefaultInput, { node, attributes: node.attributes }, 1)
-      );
+  const prevSubmitCount = useRef3(formState.submitCount);
+  useEffect7(() => {
+    if (formState.submitCount > prevSubmitCount.current && formState.isSubmitSuccessful) {
+      prevSubmitCount.current = formState.submitCount;
+      setTimeout(() => {
+        if (ref.current) {
+          ref.current.reset();
+        }
+      }, 100);
     }
+  }, [formState.submitCount, formState.isSubmitSuccessful]);
+  if (!isUiNodeInputAttributes9(node.attributes)) {
+    return null;
   }
-  if (isUiNodeInputAttributes9(node.attributes) && node.attributes.name === "captcha_turnstile_options") {
+  if (node.attributes.name === "transient_payload.captcha_turnstile_response") {
+    return /* @__PURE__ */ jsx98(DefaultInput, { node, attributes: node.attributes }, 1);
+  } else if (node.attributes.name === "captcha_turnstile_options") {
     const options = JSON.parse(node.attributes.value);
-    nodes.push(
-      /* @__PURE__ */ jsx98(
-        Turnstile,
-        {
-          ref,
-          siteKey: options.sitekey,
-          options: {
-            action: options.action,
-            size: "flexible",
-            theme: options.theme,
-            responseField: false,
-            responseFieldName: options.response_field_name
-          },
-          onExpire: () => {
-            var _a;
-            return (_a = ref.current) == null ? void 0 : _a.reset();
-          },
-          onSuccess: (token) => {
-            setValue(options.response_field_name, token);
-          }
+    return /* @__PURE__ */ jsx98(
+      Turnstile,
+      {
+        ref,
+        siteKey: options.sitekey,
+        options: {
+          action: options.action,
+          size: "flexible",
+          theme: options.theme,
+          responseField: false,
+          responseFieldName: options.response_field_name
         },
-        2
-      )
+        onExpire: () => {
+          var _a;
+          return (_a = ref.current) == null ? void 0 : _a.reset();
+        },
+        onSuccess: (token) => {
+          setValue(options.response_field_name, token);
+        }
+      }
     );
   }
-  return nodes;
+  return null;
 };
 
 // src/theme/default/assets/icons/personal.svg