@ory/elements-react 0.0.0-pr.5cdcf132 → 0.0.0-pr.6ecad3e0

package/dist/theme/default/index.js

@@ -268,6 +268,7 @@ function frontendClient(sdkUrl, opts = {}) {
   const config = new import_client_fetch6.Configuration({
     ...opts,
     basePath: sdkUrl,
+    credentials: "include",
     headers: {
       Accept: "application/json",
       ...opts.headers
@@ -2887,6 +2888,19 @@ function LoginCardFooter() {
       `${config.sdk.url}/self-service/${flowType}/browser`
     );
   }
+  if (authMethods.length > 1 && formState.current === "method_active") {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "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.method.go-back"
+        })
+      }
+    ) });
+  }
   if (flow.refresh || flow.requested_aal === "aal2") {
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
       intl.formatMessage({
@@ -2929,17 +2943,6 @@ function LoginCardFooter() {
         }
       )
     ] }),
-    authMethods.length > 1 && formState.current === "method_active" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      "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.method.go-back"
-        })
-      }
-    ) }),
     authMethods.length === 1 && authMethods[0] === "code" && formState.current === "method_active" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "a",
       {
@@ -3303,6 +3306,9 @@ var SvgArrowLeft = (props) => {
 };
 var arrow_left_default = SvgArrowLeft;
 
+// src/theme/default/components/card/current-identifier-button.tsx
+var import_react_hook_form13 = require("react-hook-form");
+
 // src/theme/default/utils/attributes.ts
 function omit(obj, keys) {
   const ret = { ...obj };
@@ -3312,13 +3318,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
-var import_react_hook_form13 = require("react-hook-form");
+var import_react7 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function DefaultCurrentIdentifierButton() {
+  var _a;
   const { flow, flowType, config, formState } = (0, import_elements_react4.useOryFlow)();
-  const { setValue } = (0, import_react_hook_form13.useFormContext)();
+  const { setValue, getValues, watch } = (0, import_react_hook_form13.useFormContext)();
+  const [turnstileResponse, setTurnstileResponse] = (0, import_react7.useState)();
   const ui = flow.ui;
+  const captchaVerificationValue = (_a = watch("transient_payload")) == null ? void 0 : _a.captcha_turnstile_response;
+  (0, import_react7.useEffect)(() => {
+    if (captchaVerificationValue) {
+      setTurnstileResponse(captchaVerificationValue);
+    }
+  }, [captchaVerificationValue]);
   if (formState.current === "provide_identifier") {
     return null;
   }
@@ -3333,11 +3363,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__ */ (0, import_jsx_runtime36.jsxs)("form", { action: flow.ui.action, method: flow.ui.method, children: [
@@ -3348,12 +3373,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__ */ (0, import_jsx_runtime36.jsx)(
           "input",
           {
             type: "hidden",
             name: attrs.name,
-            value: attrs.value
+            value
           },
           attrs.name
         );
@@ -3362,7 +3391,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(
@@ -3394,7 +3423,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`,
@@ -3485,11 +3514,23 @@ function DefaultCardHeader() {
 var import_elements_react6 = require("@ory/elements-react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function DefaultCardLogo() {
+  var _a;
   const flow = (0, import_elements_react6.useOryFlow)();
+  if (flow.config.project.logo_light_url) {
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      "img",
+      {
+        src: flow.config.project.logo_light_url,
+        width: 100,
+        height: 36,
+        alt: "Logo"
+      }
+    );
+  }
   if (flow.config.logoUrl) {
     return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { src: flow.config.logoUrl, width: 100, height: 36, alt: "Logo" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h1", { className: "text-xl font-semibold leading-normal text-interface-foreground-default-primary", children: flow.config.name });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h1", { className: "text-xl font-semibold leading-normal text-interface-foreground-default-primary", children: (_a = flow.config.project.name) != null ? _a : flow.config.name });
 }
 
 // src/theme/default/components/card/layout.tsx
@@ -3521,7 +3562,7 @@ var import_client_fetch31 = require("@ory/client-fetch");
 
 // src/theme/default/components/form/social.tsx
 var import_elements_react7 = require("@ory/elements-react");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_hook_form14 = require("react-hook-form");
 var import_react_intl12 = require("react-intl");
 var import_usehooks_ts = require("usehooks-ts");
@@ -3741,24 +3782,6 @@ function Spinner({ className }) {
 
 // src/theme/default/components/form/social.tsx
 var import_client_fetch30 = require("@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
 var import_jsx_runtime55 = require("react/jsx-runtime");
 function extractProvider(context) {
   if (context && typeof context === "object" && "provider" in context && typeof context.provider === "string") {
@@ -3794,7 +3817,7 @@ function DefaultButtonSocial({
     onClick == null ? void 0 : onClick();
     setClicked(true);
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!isSubmitting) {
       setClicked(false);
     }
@@ -4033,7 +4056,7 @@ var import_elements_react9 = require("@ory/elements-react");
 var import_class_variance_authority = require("class-variance-authority");
 var import_react_hook_form15 = require("react-hook-form");
 var import_react_intl15 = require("react-intl");
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var buttonStyles = (0, import_class_variance_authority.cva)(
   [
@@ -4074,14 +4097,14 @@ var DefaultButton = ({
 }) => {
   var _a;
   const { type, name, value, ...rest } = attributes;
-  const [clicked, setClicked] = (0, import_react8.useState)(false);
+  const [clicked, setClicked] = (0, import_react9.useState)(false);
   const intl = (0, import_react_intl15.useIntl)();
   const label = (0, import_client_fetch32.getNodeLabel)(node);
   const {
     formState: { isSubmitting },
     setValue
   } = (0, import_react_hook_form15.useFormContext)();
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!isSubmitting) {
       setClicked(false);
     }
@@ -4239,10 +4262,10 @@ var import_elements_react11 = require("@ory/elements-react");
 var import_client_fetch34 = require("@ory/client-fetch");
 
 // src/util/childCounter.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 function countRenderableChildren(children) {
-  return import_react9.Children.toArray(children).filter((c) => {
-    if ((0, import_react9.isValidElement)(c)) {
+  return import_react10.Children.toArray(children).filter((c) => {
+    if ((0, import_react10.isValidElement)(c)) {
       return true;
     }
     return false;
@@ -4291,7 +4314,7 @@ function DefaultImage({ attributes, node }) {
 // src/theme/default/components/form/input.tsx
 var import_client_fetch35 = require("@ory/client-fetch");
 var import_elements_react12 = require("@ory/elements-react");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_hook_form17 = require("react-hook-form");
 var import_react_intl18 = require("react-intl");
 
@@ -4336,7 +4359,7 @@ var DefaultInput = ({
   const { value, autocomplete, name, maxlength, ...rest } = attributes;
   const intl = (0, import_react_intl18.useIntl)();
   const { flowType } = (0, import_elements_react12.useOryFlow)();
-  const inputRef = (0, import_react10.useRef)(null);
+  const inputRef = (0, import_react11.useRef)(null);
   const formattedLabel = label ? intl.formatMessage(
     {
       id: "input.placeholder",
@@ -4350,7 +4373,7 @@ var DefaultInput = ({
     return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       "input",
       {
-        ...rest,
+        ...omitInputAttributes(rest),
         onClick,
         maxLength: maxlength,
         autoComplete: autocomplete,
@@ -4395,7 +4418,7 @@ var DefaultInput = ({
 function PasswordToggle({
   inputRef
 }) {
-  const [shown, setShown] = (0, import_react10.useState)(false);
+  const [shown, setShown] = (0, import_react11.useState)(false);
   const handleClick = () => {
     setShown(!shown);
     if (inputRef.current) {
@@ -4490,10 +4513,10 @@ function DefaultLabel({
 // src/theme/default/components/form/link-button.tsx
 var import_client_fetch37 = require("@ory/client-fetch");
 var import_elements_react14 = require("@ory/elements-react");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_intl20 = require("react-intl");
 var import_jsx_runtime75 = require("react/jsx-runtime");
-var DefaultLinkButton = (0, import_react11.forwardRef)(({ attributes, node }, ref) => {
+var DefaultLinkButton = (0, import_react12.forwardRef)(({ attributes, node }, ref) => {
   const intl = (0, import_react_intl20.useIntl)();
   const label = (0, import_client_fetch37.getNodeLabel)(node);
   return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
@@ -4741,12 +4764,12 @@ var getUserInitials = (session) => {
 };
 
 // src/theme/default/components/ui/dropdown-menu.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuContent = (0, import_react12.forwardRef)(({ className, sideOffset = 16, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+var DropdownMenuContent = (0, import_react13.forwardRef)(({ className, sideOffset = 16, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -4761,7 +4784,7 @@ var DropdownMenuContent = (0, import_react12.forwardRef)(({ className, sideOffse
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = (0, import_react12.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+var DropdownMenuItem = (0, import_react13.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -4779,7 +4802,7 @@ var DropdownMenuItem = (0, import_react12.forwardRef)(({ className, inset, ...pr
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuLabel = (0, import_react12.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+var DropdownMenuLabel = (0, import_react13.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -4794,7 +4817,7 @@ var DropdownMenuLabel = (0, import_react12.forwardRef)(({ className, inset, ...p
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 // src/theme/default/components/ui/user-avater.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/theme/default/assets/icons/user.svg
 var React28 = __toESM(require("react"));
@@ -4807,7 +4830,7 @@ var user_default = SvgUser;
 
 // src/theme/default/components/ui/user-avater.tsx
 var import_jsx_runtime84 = require("react/jsx-runtime");
-var UserAvatar = (0, import_react13.forwardRef)(
+var UserAvatar = (0, import_react14.forwardRef)(
   ({ initials, ...rest }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       "button",
@@ -4899,7 +4922,7 @@ var DefaultPageHeader = (_props) => {
 };
 
 // src/theme/default/components/settings/settings-oidc.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_react_hook_form20 = require("react-hook-form");
 var import_usehooks_ts2 = require("usehooks-ts");
 
@@ -4956,7 +4979,7 @@ function UnlinkRow({ button }) {
     button.onClick();
     setClicked(true);
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!isSubmitting) {
       setClicked(false);
     }
@@ -5405,48 +5428,53 @@ function DefaultAuthMethodListContainer({
 // src/theme/default/components/form/captcha.tsx
 var import_client_fetch39 = require("@ory/client-fetch");
 var import_react_turnstile = require("@marsidev/react-turnstile");
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_react_hook_form25 = require("react-hook-form");
 var import_jsx_runtime98 = require("react/jsx-runtime");
 var DefaultCaptcha = ({ node }) => {
-  const { setValue } = (0, import_react_hook_form25.useFormContext)();
-  const ref = (0, import_react15.useRef)();
-  const nodes = [];
-  if ((0, import_client_fetch39.isUiNodeInputAttributes)(node.attributes)) {
-    if (node.attributes.name === "transient_payload.captcha_turnstile_response") {
-      nodes.push(
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(DefaultInput, { node, attributes: node.attributes }, 1)
-      );
+  const { setValue, formState } = (0, import_react_hook_form25.useFormContext)();
+  const ref = (0, import_react16.useRef)();
+  const prevSubmitCount = (0, import_react16.useRef)(formState.submitCount);
+  (0, import_react16.useEffect)(() => {
+    if (formState.submitCount > prevSubmitCount.current && formState.isSubmitSuccessful) {
+      prevSubmitCount.current = formState.submitCount;
+      setTimeout(() => {
+        if (ref.current) {
+          ref.current.reset();
+        }
+      }, 100);
     }
+  }, [formState.submitCount, formState.isSubmitSuccessful]);
+  if (!(0, import_client_fetch39.isUiNodeInputAttributes)(node.attributes)) {
+    return null;
   }
-  if ((0, import_client_fetch39.isUiNodeInputAttributes)(node.attributes) && node.attributes.name === "captcha_turnstile_options") {
+  if (node.attributes.name === "transient_payload.captcha_turnstile_response") {
+    return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(DefaultInput, { node, attributes: node.attributes }, 1);
+  } else if (node.attributes.name === "captcha_turnstile_options") {
     const options = JSON.parse(node.attributes.value);
-    nodes.push(
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-        import_react_turnstile.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__ */ (0, import_jsx_runtime98.jsx)(
+      import_react_turnstile.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
@@ -5576,7 +5604,7 @@ function getOryComponents(overrides) {
 
 // src/theme/default/flows/error.tsx
 var import_client_fetch40 = require("@ory/client-fetch");
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_react_intl24 = require("react-intl");
 var import_jsx_runtime103 = require("react/jsx-runtime");
 function isOAuth2Error(error) {
@@ -5587,7 +5615,7 @@ var errorDescriptions = {
   5: "The server encountered an error and could not complete your request"
 };
 function useStandardize(error) {
-  return (0, import_react16.useMemo)(() => {
+  return (0, import_react17.useMemo)(() => {
     var _a;
     if (isOAuth2Error(error)) {
       return {
@@ -5718,10 +5746,22 @@ function GoBackButton({ config }) {
   return null;
 }
 function ErrorLogo({ config }) {
+  var _a;
+  if (config.project.logo_light_url) {
+    return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+      "img",
+      {
+        src: config.project.logo_light_url,
+        width: 100,
+        height: 36,
+        alt: "Logo"
+      }
+    );
+  }
   if (config.logoUrl) {
     return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("img", { src: config.logoUrl, width: 100, height: 36, alt: "Logo" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("h1", { className: "text-xl font-semibold leading-normal text-interface-foreground-default-primary", children: config.name });
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("h1", { className: "text-xl font-semibold leading-normal text-interface-foreground-default-primary", children: (_a = config.project.name) != null ? _a : config.name });
 }
 
 // src/theme/default/flows/login.tsx