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

package/dist/theme/default/index.js

@@ -95,6 +95,37 @@ var import_client_fetch = require("@ory/client-fetch");
 var import_elements_react = require("@ory/elements-react");
 var import_react_hook_form = require("react-hook-form");
 var import_react_intl = require("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
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function DefaultCardFooter() {
   const { flowType } = (0, import_elements_react.useOryFlow)();
@@ -111,23 +142,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 } = (0, import_elements_react.useOryFlow)();
+  const { config, formState, flow } = (0, import_elements_react.useOryFlow)();
   const intl = (0, import_react_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__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "font-normal leading-normal antialiased text-interface-foreground-default-primary", children: [
     intl.formatMessage({
       id: "login.registration-label",
@@ -138,7 +158,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"
@@ -166,11 +187,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__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-normal leading-normal antialiased", children: formState.current === "method_active" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: screenSelectionNode && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
@@ -192,7 +208,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"
@@ -436,12 +453,8 @@ function omit(obj, keys) {
 // src/theme/default/components/card/current-identifier-button.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function DefaultCurrentIdentifierButton() {
-  const {
-    flow: { ui },
-    flowType,
-    config,
-    formState
-  } = (0, import_elements_react2.useOryFlow)();
+  const { flow, flowType, config, formState } = (0, import_elements_react2.useOryFlow)();
+  const ui = flow.ui;
   if (formState.current === "provide_identifier") {
     return null;
   }
@@ -449,7 +462,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"
@@ -459,8 +475,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__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "inline-flex min-h-5 items-center gap-2 overflow-hidden text-ellipsis", children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           arrow_left_default,
@@ -828,6 +845,7 @@ function DefaultButtonSocial({
       value: attributes.value,
       type: "submit",
       name: "provider",
+      "data-testid": `ory/ui/node/input/${attributes.name}`,
       ...props,
       onClick,
       disabled: isSubmitting,
@@ -973,8 +991,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__ */ (0, import_jsx_runtime31.jsx)("span", { className: "mt-1", children: Icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
@@ -1063,9 +1080,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") {
@@ -1114,16 +1128,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)
           };
         }
       }
@@ -1323,6 +1337,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",
@@ -1376,6 +1391,7 @@ function DefaultLabel({
           ...(0, import_elements_react10.messageTestId)(label),
           className: "leading-normal text-input-foreground-primary",
           htmlFor: attributes.name,
+          "data-testid": `ory/ui/node/input/label/${attributes.name}`,
           ...rest,
           children: (0, import_elements_react10.uiTextToFormattedMessage)(label, intl)
         }
@@ -1384,7 +1400,7 @@ function DefaultLabel({
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "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",
@@ -1425,6 +1441,7 @@ var DefaultLinkButton = (0, import_react.forwardRef)(({ attributes, node }, ref)
       ...attributes,
       ref,
       title: label ? (0, import_elements_react11.uiTextToFormattedMessage)(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"
       ),
@@ -1569,8 +1586,15 @@ function DefaultText({ node, attributes }) {
   var _a;
   const intl = (0, import_react_intl12.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { "data-testid": `node/text/${attributes.id}/label`, children: node.meta.label ? (0, import_elements_react13.uiTextToFormattedMessage)(node.meta.label, intl) : "" }),
-    (_a = attributes.text.context.secrets) == null ? void 0 : _a.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("pre", { "data-testid": `node/text/lookup_secret_codes/text`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("code", { children: text ? (0, import_elements_react13.uiTextToFormattedMessage)(text, intl) : "" }) }, index))
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { "data-testid": `ory/ui/node/text/${attributes.id}/label`, children: node.meta.label ? (0, import_elements_react13.uiTextToFormattedMessage)(node.meta.label, intl) : "" }),
+    (_a = attributes.text.context.secrets) == null ? void 0 : _a.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "pre",
+      {
+        "data-testid": `ory/ui/node/text/lookup_secret_codes/text`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("code", { children: text ? (0, import_elements_react13.uiTextToFormattedMessage)(text, intl) : "" })
+      },
+      index
+    ))
   ] });
 }
 
@@ -2340,7 +2364,7 @@ function Error2({
   error,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { children: JSON.stringify(error) || children });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { "data-testid": "ory/ui/error/raw", children: JSON.stringify(error) || children });
 }
 
 // src/theme/default/flows/login.tsx