@ory/elements-react 1.0.0-next.15 → 1.0.0-next.17

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { UiNodeGroupEnum, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, isUiNodeTextAttributes, UiNodeInputAttributesTypeEnum, FlowType, Configuration, FrontendApi, handleContinueWith, settingsUrl, handleFlowError, isResponseError, loginUrl, recoveryUrl, verificationUrl, registrationUrl } from '@ory/client-fetch';
-import { createContext, useContext, useRef, useEffect, useState, useReducer, useMemo } from 'react';
+import { UiNodeGroupEnum, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, isUiNodeTextAttributes, FlowType, handleFlowError, loginUrl, handleContinueWith, recoveryUrl, instanceOfContinueWithRecoveryUi, registrationUrl, settingsUrl, isResponseError, verificationUrl, UiNodeInputAttributesTypeEnum, Configuration, FrontendApi } from '@ory/client-fetch';
+import { createContext, useContext, useState, useMemo, useReducer, useRef, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useIntl, IntlProvider as IntlProvider$1 } from 'react-intl';
-import { useForm, FormProvider, useFormContext } from 'react-hook-form';
+import { useFormContext, useForm, FormProvider } from 'react-hook-form';
 
 // src/context/component.tsx
 var ComponentContext = createContext({
@@ -105,20 +105,34 @@ function getFinalNodes(uniqueGroups, selectedGroup) {
 }
 
 // src/context/form-state.ts
+function findMethodWithMessage(nodes) {
+  var _a;
+  return (_a = nodes == null ? void 0 : nodes.filter((n) => !["default", "identifier_first"].includes(n.group))) == null ? void 0 : _a.find((node) => {
+    var _a2;
+    return ((_a2 = node.messages) == null ? void 0 : _a2.length) > 0;
+  });
+}
 function parseStateFromFlow(flow) {
+  var _a;
   switch (flow.flowType) {
     case FlowType.Registration:
-    case FlowType.Login:
+    case FlowType.Login: {
+      const methodWithMessage = findMethodWithMessage(flow.flow.ui.nodes);
       if (flow.flow.active == "link_recovery") {
         return { current: "method_active", method: "link" };
       } else if (flow.flow.active == "code_recovery") {
         return { current: "method_active", method: "code" };
+      } else if (methodWithMessage) {
+        return { current: "method_active", method: methodWithMessage.group };
+      } else if (flow.flow.active && !["default", "identifier_first", "oidc"].includes(flow.flow.active)) {
+        return { current: "method_active", method: flow.flow.active };
       } else if (isChoosingMethod(flow.flow.ui.nodes)) {
         return { current: "select_method" };
-      } else if (flow.flow.active) {
-        return { current: "method_active", method: flow.flow.active };
+      } else if ((_a = flow.flow.ui.messages) == null ? void 0 : _a.some((m) => m.id === 1010016)) {
+        return { current: "select_method" };
       }
       return { current: "provide_identifier" };
+    }
     case FlowType.Recovery:
     case FlowType.Verification:
       if (flow.flow.active === "code" || flow.flow.active === "link") {
@@ -425,7 +439,8 @@ var en_default = {
   "settings.passkey.title": "Manage Passkeys",
   "settings.passkey.description": "Manage your passkey settings",
   "settings.passkey.info": "Manage your passkey settings",
-  "card.footer.select-another-method": "Select another method"
+  "card.footer.select-another-method": "Select another method",
+  "account-linking.title": "Link account"
 };
 
 // src/locales/de.json
@@ -671,7 +686,8 @@ var de_default = {
   "settings.title-totp": "Verwalten Sie die 2FA TOTP Authenticator-App",
   "settings.title-webauthn": "Hardware-Token verwalten",
   "settings.webauthn.info": "Hardware-Tokens werden f\xFCr die Zweitfaktor-Authentifizierung oder als Erstfaktor-Authentifizierung mit Passkeys verwendet",
-  "card.footer.select-another-method": "Eine andere Methode verwenden"
+  "card.footer.select-another-method": "Eine andere Methode verwenden",
+  "account-linking.title": "Account Verbinden"
 };
 
 // src/locales/es.json
@@ -917,7 +933,8 @@ var es_default = {
   "settings.title-totp": "",
   "settings.title-webauthn": "",
   "settings.webauthn.info": "",
-  "card.footer.select-another-method": ""
+  "card.footer.select-another-method": "",
+  "account-linking.title": ""
 };
 
 // src/locales/fr.json
@@ -1163,7 +1180,8 @@ var fr_default = {
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
   "settings.webauthn.title": "",
-  "card.footer.select-another-method": ""
+  "card.footer.select-another-method": "",
+  "account-linking.title": ""
 };
 
 // src/locales/nl.json
@@ -1409,7 +1427,8 @@ var nl_default = {
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
   "settings.webauthn.title": "",
-  "card.footer.select-another-method": ""
+  "card.footer.select-another-method": "",
+  "account-linking.title": ""
 };
 
 // src/locales/pl.json
@@ -1655,7 +1674,8 @@ var pl_default = {
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
   "settings.webauthn.title": "",
-  "card.footer.select-another-method": ""
+  "card.footer.select-another-method": "",
+  "account-linking.title": ""
 };
 
 // src/locales/pt.json
@@ -1901,7 +1921,8 @@ var pt_default = {
   "settings.webauthn.description": "",
   "settings.webauthn.info": "",
   "settings.webauthn.title": "",
-  "card.footer.select-another-method": ""
+  "card.footer.select-another-method": "",
+  "account-linking.title": ""
 };
 
 // src/locales/sv.json
@@ -2147,7 +2168,8 @@ var sv_default = {
   "settings.webauthn.description": "Hantera inst\xE4llningarna f\xF6r din maskinvarutoken",
   "settings.webauthn.info": "H\xE5rdvarutokens anv\xE4nds f\xF6r andrafaktorsautentisering eller som f\xF6rstafaktor med l\xF6senordsnycklar",
   "settings.webauthn.title": "Hantera maskinvarutokens",
-  "card.footer.select-another-method": "V\xE4lj en annan metod"
+  "card.footer.select-another-method": "V\xE4lj en annan metod",
+  "account-linking.title": "L\xE4nka ditt konto"
 };
 
 // src/locales/index.ts
@@ -2285,16 +2307,34 @@ async function onSubmitRecovery({ config, flow }, {
         onRedirect(recoveryUrl(config), true);
       },
       onValidationError: (body2) => {
-        setFlowContainer({
-          flow: body2,
-          flowType: FlowType.Recovery,
-          config
-        });
+        if ("error" in body2) {
+          handleContinueWithRecoveryUIError(body2.error, config, onRedirect);
+          return;
+        } else {
+          setFlowContainer({
+            flow: body2,
+            flowType: FlowType.Recovery,
+            config
+          });
+        }
       },
       onRedirect
     })
   );
 }
+function handleContinueWithRecoveryUIError(error, config, onRedirect) {
+  if ("continue_with" in error.details && Array.isArray(error.details.continue_with)) {
+    const continueWithRecovery = error.details.continue_with.find(instanceOfContinueWithRecoveryUi);
+    if ((continueWithRecovery == null ? void 0 : continueWithRecovery.action) === "show_recovery_ui") {
+      onRedirect(
+        config.project.recovery_ui_url + "?flow=" + (continueWithRecovery == null ? void 0 : continueWithRecovery.flow.id),
+        false
+      );
+      return;
+    }
+  }
+  onRedirect(recoveryUrl(config), true);
+}
 async function onSubmitRegistration({ config, flow }, {
   setFlowContainer,
   body,
@@ -2425,20 +2465,22 @@ function computeDefaultValues(nodes) {
   return nodes.reduce((acc, node) => {
     const attrs = node.attributes;
     if (isUiNodeInputAttributes(attrs)) {
-      if (attrs.name === "method" || attrs.type === "submit" || typeof attrs.value === "undefined")
+      if (attrs.name === "method" || attrs.type === "submit" || typeof attrs.value === "undefined") {
         return acc;
-      const unrolled = unrollTrait({
-        name: attrs.name,
-        value: attrs.value
-      });
-      Object.assign(acc, unrolled != null ? unrolled : { [attrs.name]: attrs.value });
+      }
+      return unrollTrait(
+        {
+          name: attrs.name,
+          value: attrs.value
+        },
+        acc
+      );
     }
     return acc;
   }, {});
 }
 function unrollTrait(input, output = {}) {
   const keys = input.name.split(".");
-  if (!keys.length) return void 0;
   let current = output;
   keys.forEach((key, index) => {
     if (!key) return;
@@ -2534,8 +2576,10 @@ var NodeInput = ({
     //
     ...attrs
   } = attributes;
+  const isResendNode = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
+  const isScreenSelectionNode = "name" in node.attributes && node.attributes.name === "screen";
   const setFormValue = () => {
-    if (attrs.value) {
+    if (attrs.value && !(isResendNode || isScreenSelectionNode)) {
       setValue(attrs.name, attrs.value);
     }
   };
@@ -2560,8 +2604,6 @@ var NodeInput = ({
   };
   const isSocial = (attrs.name === "provider" || attrs.name === "link") && node.group === "oidc";
   const isPinCodeInput = attrs.name === "code" && node.group === "code" || attrs.name === "totp_code" && node.group === "totp";
-  const isResendNode = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
-  const isScreenSelectionNode = "name" in node.attributes && node.attributes.name === "screen";
   switch (attributes.type) {
     case UiNodeInputAttributesTypeEnum.Submit:
     case UiNodeInputAttributesTypeEnum.Button:
@@ -2633,6 +2675,51 @@ function OryFormGroups({ children, groups }) {
     return /* @__PURE__ */ jsx(Node, { node }, k);
   }) });
 }
+
+// src/components/form/form-resolver.ts
+function isCodeResendRequest(data) {
+  var _a;
+  return (_a = data.email) != null ? _a : data.resend;
+}
+function useOryFormResolver() {
+  const flowContainer = useOryFlow();
+  return (data) => {
+    if (flowContainer.formState.current === "method_active") {
+      if (data.method === "code" && !data.code && !isCodeResendRequest(data)) {
+        return {
+          values: data,
+          errors: {
+            code: {
+              id: 4000002,
+              context: {
+                property: "code"
+              },
+              type: "error",
+              text: "Property code is missing"
+            }
+          }
+        };
+      }
+    }
+    return {
+      values: data,
+      errors: {}
+    };
+  };
+}
+function OryFormProvider({
+  children,
+  nodes
+}) {
+  const flowContainer = useOryFlow();
+  const defaultNodes = nodes ? flowContainer.flow.ui.nodes.filter((node) => node.group === UiNodeGroupEnum.Default).concat(nodes) : flowContainer.flow.ui.nodes;
+  const methods = useForm({
+    // TODO: Generify this, so we have typesafety in the submit handler.
+    defaultValues: computeDefaultValues(defaultNodes),
+    resolver: useOryFormResolver()
+  });
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children });
+}
 function OryFormOidcButtons({
   children,
   hideDivider
@@ -2678,7 +2765,7 @@ function OryFormSocialButtonsForm() {
   if (filteredNodes.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsx(OryFormOidcButtons, {}) });
+  return /* @__PURE__ */ jsx(OryFormProvider, { children: /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsx(OryFormOidcButtons, {}) }) });
 }
 function OryForm({ children, onAfterSubmit }) {
   var _a;
@@ -2777,6 +2864,12 @@ function OryForm({ children, onAfterSubmit }) {
         break;
       }
     }
+    if ("password" in data) {
+      methods.setValue("password", "");
+    }
+    if ("code" in data) {
+      methods.setValue("code", "");
+    }
     onAfterSubmit == null ? void 0 : onAfterSubmit(data.method);
   };
   const hasMethods = flowContainer.flow.ui.nodes.filter((node) => {
@@ -2822,7 +2915,7 @@ function OryForm({ children, onAfterSubmit }) {
     }
   );
 }
-var messageIdsToHide = [1040009, 1060003, 1080003, 1010014, 1040005];
+var messageIdsToHide = [1040009, 1060003, 1080003, 1010014, 1040005, 1010016];
 function OryCardValidationMessages({ ...props }) {
   var _a;
   const { flow } = useOryFlow();
@@ -2835,18 +2928,6 @@ function OryCardValidationMessages({ ...props }) {
   }
   return /* @__PURE__ */ jsx(Message.Root, { ...props, children: messages == null ? void 0 : messages.map((message) => /* @__PURE__ */ jsx(Message.Content, { message }, message.id)) });
 }
-function OryFormProvider({
-  children,
-  nodes
-}) {
-  const flowContainer = useOryFlow();
-  const defaultNodes = nodes ? flowContainer.flow.ui.nodes.filter((node) => node.group === UiNodeGroupEnum.Default).concat(nodes) : flowContainer.flow.ui.nodes;
-  const methods = useForm({
-    // TODO: Generify this, so we have typesafety in the submit handler.
-    defaultValues: computeDefaultValues(defaultNodes)
-  });
-  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children });
-}
 function OryFormSection({ children, nodes }) {
   const { Card } = useComponents();
   return /* @__PURE__ */ jsx(OryFormProvider, { nodes, children: /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsx(Card.SettingsSection, { children }) }) });