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

package/dist/theme/default/index.mjs

@@ -43,6 +43,37 @@ import { FlowType } from "@ory/client-fetch";
 import { useOryFlow } from "@ory/elements-react";
 import { useFormContext } from "react-hook-form";
 import { useIntl } from "react-intl";
+
+// src/theme/default/utils/url.ts
+function restartFlowUrl(flow, fallback) {
+  return flow.request_url || appendReturnTo(fallback, flow.return_to);
+}
+function initFlowUrl(sdkUrl, flowType, flow) {
+  const result = `${sdkUrl}/self-service/${flowType}/browser`;
+  const qs = new URLSearchParams();
+  if (flow.return_to) {
+    qs.set("return_to", flow.return_to);
+  } else if (typeof window !== "undefined") {
+    const searchParams = new URLSearchParams(window.location.search);
+    if (searchParams.has("return_to")) {
+      qs.set("return_to", searchParams.get("return_to") || "");
+    }
+  }
+  if (qs.toString().length === 0) {
+    return result;
+  }
+  return result + "?" + qs.toString();
+}
+function appendReturnTo(url, returnTo) {
+  if (!returnTo) {
+    return url;
+  }
+  const urlObj = new URL(url);
+  urlObj.searchParams.set("return_to", returnTo);
+  return urlObj.toString();
+}
+
+// src/theme/default/components/card/footer.tsx
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function DefaultCardFooter() {
   const { flowType } = useOryFlow();
@@ -59,23 +90,12 @@ function DefaultCardFooter() {
       return null;
   }
 }
-function getReturnToQueryParam() {
-  if (typeof window !== "undefined") {
-    const searchParams = new URLSearchParams(window.location.search);
-    return searchParams.get("return_to");
-  }
-}
 function LoginCardFooter() {
-  const { config, formState } = useOryFlow();
+  const { config, formState, flow } = useOryFlow();
   const intl = useIntl();
   if (!config.project.registration_enabled || formState.current !== "provide_identifier") {
     return null;
   }
-  let registrationLink = `${config.sdk.url}/self-service/registration/browser`;
-  const returnTo = getReturnToQueryParam();
-  if (returnTo) {
-    registrationLink += `?return_to=${returnTo}`;
-  }
   return /* @__PURE__ */ jsxs4("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
     intl.formatMessage({
       id: "login.registration-label",
@@ -86,7 +106,8 @@ function LoginCardFooter() {
       "a",
       {
         className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
-        href: registrationLink,
+        href: initFlowUrl(config.sdk.url, "registration", flow),
+        "data-testid": "ory/ui/login/link/registration",
         children: intl.formatMessage({
           id: "login.registration-button",
           defaultMessage: "Sign up"
@@ -114,11 +135,6 @@ function RegistrationCardFooter() {
       setValue("screen", "credential-selection");
     }
   }
-  let loginLink = `${config.sdk.url}/self-service/login/browser`;
-  const returnTo = getReturnToQueryParam();
-  if (returnTo) {
-    loginLink += `?return_to=${returnTo}`;
-  }
   return /* @__PURE__ */ jsx4("span", { className: "font-normal leading-normal antialiased", children: formState.current === "method_active" ? /* @__PURE__ */ jsx4(Fragment, { children: screenSelectionNode && /* @__PURE__ */ jsx4(
     "button",
     {
@@ -140,7 +156,8 @@ function RegistrationCardFooter() {
       "a",
       {
         className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
-        href: loginLink,
+        href: initFlowUrl(config.sdk.url, "login", flow),
+        "data-testid": "ory/ui/login/link/login",
         children: intl.formatMessage({
           id: "registration.login-button",
           defaultMessage: "Sign in"
@@ -387,12 +404,8 @@ function omit(obj, keys) {
 // src/theme/default/components/card/current-identifier-button.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function DefaultCurrentIdentifierButton() {
-  const {
-    flow: { ui },
-    flowType,
-    config,
-    formState
-  } = useOryFlow2();
+  const { flow, flowType, config, formState } = useOryFlow2();
+  const ui = flow.ui;
   if (formState.current === "provide_identifier") {
     return null;
   }
@@ -400,7 +413,10 @@ function DefaultCurrentIdentifierButton() {
   if ((nodeBackButton == null ? void 0 : nodeBackButton.attributes.node_type) !== "input" || !nodeBackButton.attributes.value) {
     return null;
   }
-  const initFlowUrl = `${config.sdk.url}/self-service/${flowType}/browser`;
+  const initFlowUrl2 = restartFlowUrl(
+    flow,
+    `${config.sdk.url}/self-service/${flowType}/browser`
+  );
   const attributes = omit(nodeBackButton.attributes, [
     "autocomplete",
     "node_type"
@@ -410,8 +426,9 @@ function DefaultCurrentIdentifierButton() {
     {
       className: "group inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-full 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,
-      href: initFlowUrl,
+      href: initFlowUrl2,
       title: `Adjust ${nodeBackButton == null ? void 0 : nodeBackButton.attributes.value}`,
+      "data-testid": "ory/ui/login/link/restart",
       children: /* @__PURE__ */ jsxs5("span", { className: "inline-flex min-h-5 items-center gap-2 overflow-hidden text-ellipsis", children: [
         /* @__PURE__ */ jsx6(
           arrow_left_default,
@@ -786,6 +803,7 @@ function DefaultButtonSocial({
       value: attributes.value,
       type: "submit",
       name: "provider",
+      "data-testid": `ory/ui/node/input/${attributes.name}`,
       ...props,
       onClick,
       disabled: isSubmitting,
@@ -931,8 +949,7 @@ function DefaultAuthMethodListItem({
       className: "flex cursor-pointer gap-3 py-2 text-left items-start",
       onClick,
       type: isGroupImmediateSubmit(group) ? "submit" : "button",
-      id: `auth-method-list-item-${group}`,
-      "data-testid": "auth-method-list-item",
+      "data-testid": `ory/ui/groups/auth-method/${group}`,
       "aria-label": `Authenticate with ${group}`,
       children: [
         /* @__PURE__ */ jsx31("span", { className: "mt-1", children: Icon && /* @__PURE__ */ jsx31(
@@ -1023,9 +1040,6 @@ var DefaultButton = ({
       value,
       name,
       type: type === "button" ? "button" : "submit",
-      onSubmit: () => {
-        setValue(name, value);
-      },
       onClick: (e) => {
         onClick == null ? void 0 : onClick(e);
         if (type !== "button") {
@@ -1077,16 +1091,16 @@ var uiTextToFormattedMessage4 = ({ id, context = {}, text }, intl) => {
               new Date(value),
               /* @__PURE__ */ new Date()
             ),
-            [key + "_since_minutes"]: Math.abs(
+            [key + "_since_minutes"]: Math.ceil(
               (value - (/* @__PURE__ */ new Date()).getTime() / 1e3) / 60
-            ).toFixed(2),
+            ).toFixed(0),
             [key + "_until"]: intl.formatDateTimeRange(
               /* @__PURE__ */ new Date(),
               new Date(value)
             ),
-            [key + "_until_minutes"]: Math.abs(
+            [key + "_until_minutes"]: Math.ceil(
               ((/* @__PURE__ */ new Date()).getTime() / 1e3 - value) / 60
-            ).toFixed(2)
+            ).toFixed(0)
           };
         }
       }
@@ -1289,6 +1303,7 @@ var DefaultInput = ({
       maxLength: maxlength,
       autoComplete: autocomplete,
       placeholder: formattedLabel,
+      "data-testid": `ory/ui/node/input/${name}`,
       className: cn(
         "antialiased rounded-forms border leading-tight transition-colors placeholder:h-[20px] placeholder:text-input-foreground-tertiary focus-visible:outline-none focus:ring-0",
         "bg-input-background-default border-input-border-default text-input-foreground-primary",
@@ -1351,6 +1366,7 @@ function DefaultLabel({
           ...messageTestId3(label),
           className: "leading-normal text-input-foreground-primary",
           htmlFor: attributes.name,
+          "data-testid": `ory/ui/node/input/label/${attributes.name}`,
           ...rest,
           children: uiTextToFormattedMessage7(label, intl)
         }
@@ -1359,7 +1375,7 @@ function DefaultLabel({
       /* @__PURE__ */ jsx39(
         "a",
         {
-          href: config.project.recovery_ui_url,
+          href: initFlowUrl(config.sdk.url, "recovery", flow),
           className: "text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline",
           children: intl.formatMessage({
             id: "forms.label.forgot-password",
@@ -1402,6 +1418,7 @@ var DefaultLinkButton = forwardRef(({ attributes, node }, ref) => {
       ...attributes,
       ref,
       title: label ? uiTextToFormattedMessage8(label, intl) : "",
+      "data-testid": `ory/ui/node/link/${attributes.id}`,
       className: cn(
         "antialiased rounded cursor-pointer text-center border gap-3 leading-none bg-button-primary-background-default hover:bg-button-primary-background-hover transition-colors text-button-primary-foreground-default hover:text-button-primary-foreground-hover p-4 font-medium"
       ),
@@ -1546,8 +1563,15 @@ function DefaultText({ node, attributes }) {
   var _a;
   const intl = useIntl12();
   return /* @__PURE__ */ jsxs26(Fragment3, { children: [
-    /* @__PURE__ */ jsx44("p", { "data-testid": `node/text/${attributes.id}/label`, children: node.meta.label ? uiTextToFormattedMessage9(node.meta.label, intl) : "" }),
-    (_a = attributes.text.context.secrets) == null ? void 0 : _a.map((text, index) => /* @__PURE__ */ jsx44("pre", { "data-testid": `node/text/lookup_secret_codes/text`, children: /* @__PURE__ */ jsx44("code", { children: text ? uiTextToFormattedMessage9(text, intl) : "" }) }, index))
+    /* @__PURE__ */ jsx44("p", { "data-testid": `ory/ui/node/text/${attributes.id}/label`, children: node.meta.label ? uiTextToFormattedMessage9(node.meta.label, intl) : "" }),
+    (_a = attributes.text.context.secrets) == null ? void 0 : _a.map((text, index) => /* @__PURE__ */ jsx44(
+      "pre",
+      {
+        "data-testid": `ory/ui/node/text/lookup_secret_codes/text`,
+        children: /* @__PURE__ */ jsx44("code", { children: text ? uiTextToFormattedMessage9(text, intl) : "" })
+      },
+      index
+    ))
   ] });
 }
 
@@ -2320,7 +2344,7 @@ function Error({
   error,
   children
 }) {
-  return /* @__PURE__ */ jsx63("div", { children: JSON.stringify(error) || children });
+  return /* @__PURE__ */ jsx63("div", { "data-testid": "ory/ui/error/raw", children: JSON.stringify(error) || children });
 }
 
 // src/theme/default/flows/login.tsx