@ory/elements-react 1.0.0-next.6 → 1.0.0-next.8

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { useForm, FormProvider } from 'react-hook-form';
-import { IntlContext, IntlProvider as IntlProvider$1, useIntl } from 'react-intl';
-import { createContext, useContext, useState, useRef, useEffect } from 'react';
+import { createContext, useContext, useState, useMemo, useRef, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { frontendClient, handleFlowError, loginUrl, FlowType, handleContinueWith, settingsUrl, recoveryUrl, verificationUrl, registrationUrl, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, isUiNodeTextAttributes, UiNodeInputAttributesTypeEnum } from '@ory/client-fetch';
+import { IntlContext, IntlProvider as IntlProvider$1, useIntl } from 'react-intl';
+import { useFormContext, useForm, FormProvider } from 'react-hook-form';
+import { handleFlowError, loginUrl, FlowType, handleContinueWith, settingsUrl, recoveryUrl, verificationUrl, registrationUrl, isUiNodeInputAttributes, isUiNodeAnchorAttributes, isUiNodeImageAttributes, isUiNodeScriptAttributes, UiNodeGroupEnum, isUiNodeTextAttributes, Configuration, FrontendApi, UiNodeInputAttributesTypeEnum } from '@ory/client-fetch';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -30,8 +30,8 @@ function useNodeSorter() {
 }
 var defaultGroupOrder = [
   "oidc",
-  "default",
   "identifier_first",
+  "default",
   "profile",
   "password",
   "passkey",
@@ -280,7 +280,15 @@ var de_default = {
   "verification.registration-button": "Registrieren",
   "verification.registration-label": "Sie haben noch kein Konto?",
   "verification.title": "Verifizieren Sie ihr Konto",
-  "verification.back-button": "Zur\xFCck"
+  "verification.back-button": "Zur\xFCck",
+  "two-step.code.description": "Ein Best\xE4tigungscode wird an Ihre E-Mail gesendet.",
+  "two-step.code.title": "E-Mail-Code",
+  "two-step.passkey.description": "Verwenden Sie die Fingerabdruck- oder Gesichtserkennung Ihres Ger\xE4ts",
+  "two-step.passkey.title": "Passwort (empfohlen)",
+  "two-step.password.description": "Geben Sie Ihr Passwort ein, das mit Ihrem Konto verkn\xFCpft ist",
+  "two-step.password.title": "Passwort",
+  "two-step.webauthn.description": "Verwenden Sie Ihren Sicherheitsschl\xFCssel zur Authentifizierung",
+  "two-step.webauthn.title": "Sicherheitsschl\xFCssel"
 };
 
 // src/locales/en.json
@@ -458,7 +466,15 @@ var en_default = {
   "verification.registration-button": "Sign up",
   "verification.registration-label": "Don't have an account?",
   "verification.title": "Verify your account",
-  "verification.back-button": "Back"
+  "verification.back-button": "Back",
+  "two-step.password.title": "Password",
+  "two-step.password.description": "Enter your password associated with your account",
+  "two-step.code.title": "Email code",
+  "two-step.code.description": "A verification code will be sent to your email",
+  "two-step.webauthn.title": "Security Key",
+  "two-step.webauthn.description": "Use your security key to authenticate",
+  "two-step.passkey.title": "Passkey (recommended)",
+  "two-step.passkey.description": "Use your device's for fingerprint or face recognition"
 };
 
 // src/locales/es.json
@@ -636,7 +652,15 @@ var es_default = {
   "verification.registration-button": "Registrarse",
   "verification.registration-label": "\xBFNo tiene una cuenta?",
   "verification.title": "Verificar su cuenta",
-  "verification.back-button": "Regresar"
+  "verification.back-button": "Regresar",
+  "two-step.code.description": "Se enviar\xE1 un c\xF3digo de verificaci\xF3n a tu correo electr\xF3nico.",
+  "two-step.code.title": "C\xF3digo de correo electr\xF3nico",
+  "two-step.passkey.description": "Utiliza el reconocimiento de huellas dactilares o facial de tu dispositivo.",
+  "two-step.passkey.title": "Clave de acceso (recomendada)",
+  "two-step.password.description": "Ingrese la contrase\xF1a asociada con su cuenta",
+  "two-step.password.title": "Contrase\xF1a",
+  "two-step.webauthn.description": "Utiliza tu llave de seguridad para autenticarte",
+  "two-step.webauthn.title": "Clave de Seguridad"
 };
 
 // src/locales/fr.json
@@ -814,7 +838,15 @@ var fr_default = {
   "verification.registration-button": "S'inscrire",
   "verification.registration-label": "Vous n'avez pas de compte ?",
   "verification.title": "V\xE9rifiez votre compte",
-  "verification.back-button": "Revenir en arri\xE8re"
+  "verification.back-button": "Revenir en arri\xE8re",
+  "two-step.code.description": "Un code de v\xE9rification sera envoy\xE9 \xE0 votre email",
+  "two-step.code.title": "Code de courrier \xE9lectronique",
+  "two-step.passkey.description": "Utilisez l'appareil pour la reconnaissance d'empreintes digitales ou de visage",
+  "two-step.passkey.title": "Cl\xE9 de passe (recommand\xE9e)",
+  "two-step.password.description": "Entrez votre mot de passe associ\xE9 \xE0 votre compte",
+  "two-step.password.title": "Mot de passe",
+  "two-step.webauthn.description": "Utilisez votre cl\xE9 de s\xE9curit\xE9 pour vous authentifier",
+  "two-step.webauthn.title": "Cl\xE9 de S\xE9curit\xE9"
 };
 
 // src/locales/nl.json
@@ -992,7 +1024,15 @@ var nl_default = {
   "verification.registration-button": "Registreren",
   "verification.registration-label": "Heb je nog geen account?",
   "verification.title": "Verifieer je account",
-  "verification.back-button": "Ga terug"
+  "verification.back-button": "Ga terug",
+  "two-step.code.description": "Een verificatiecode wordt naar uw e-mail gestuurd",
+  "two-step.code.title": "E-mailcode",
+  "two-step.passkey.description": "Gebruik de vingerafdruk- of gezichtsherkenning van uw apparaat",
+  "two-step.passkey.title": "Toegangscode (aanbevolen)",
+  "two-step.password.description": "Voer uw wachtwoord in dat is gekoppeld aan uw account",
+  "two-step.password.title": "Wachtwoord",
+  "two-step.webauthn.description": "Gebruik uw beveiligingssleutel om te verifi\xEBren",
+  "two-step.webauthn.title": "Beveiligingssleutel"
 };
 
 // src/locales/pl.json
@@ -1170,7 +1210,15 @@ var pl_default = {
   "verification.registration-button": "Zarejestruj si\u0119",
   "verification.registration-label": "Nie posiadasz konta?",
   "verification.title": "Zweryfikuj konto",
-  "verification.back-button": "Cofnij"
+  "verification.back-button": "Cofnij",
+  "two-step.code.description": "Kod weryfikacyjny zostanie wys\u0142any na Tw\xF3j adres email.",
+  "two-step.code.title": "Kod email",
+  "two-step.passkey.description": "U\u017Cyj swojego urz\u0105dzenia lub funkcji rozpoznawania twarzy na swoim urz\u0105dzeniu.",
+  "two-step.passkey.title": "Klucz dost\u0119pu (zalecany)",
+  "two-step.password.description": "Wprowad\u017A has\u0142o powi\u0105zane z twoim kontem",
+  "two-step.password.title": "Has\u0142o",
+  "two-step.webauthn.description": "U\u017Cyj swojego klucza bezpiecze\u0144stwa do uwierzytelnienia",
+  "two-step.webauthn.title": "Klucz bezpiecze\u0144stwa"
 };
 
 // src/locales/pt.json
@@ -1348,7 +1396,15 @@ var pt_default = {
   "verification.registration-button": "Registar",
   "verification.registration-label": "N\xE3o tem uma conta?",
   "verification.title": "Verifique a sua conta",
-  "verification.back-button": "Voltar"
+  "verification.back-button": "Voltar",
+  "two-step.code.description": "Um c\xF3digo de verifica\xE7\xE3o ser\xE1 enviado para o seu email",
+  "two-step.code.title": "C\xF3digo de email",
+  "two-step.passkey.description": "Use o seu dispositivo para reconhecimento de impress\xE3o digital ou facial.",
+  "two-step.passkey.title": "Chave de acesso (recomendado)",
+  "two-step.password.description": "Insira a sua senha associada \xE0 sua conta",
+  "two-step.password.title": "Senha",
+  "two-step.webauthn.description": "Use sua chave de seguran\xE7a para autenticar",
+  "two-step.webauthn.title": "Chave de Seguran\xE7a"
 };
 
 // src/locales/sv.json
@@ -1382,8 +1438,8 @@ var sv_default = {
   "identities.messages.1010013": "Forts\xE4tt",
   "identities.messages.1010014": "Ett e-postmeddelande som inneh\xE5ller en kod har skickats till den e-postadress du angett. Om du inte har f\xE5tt ett mejl, kontrollera stavningen av adressen och f\xF6rs\xF6k logga in igen.",
   "identities.messages.1010015": "Logga in med kod",
-  "identities.messages.1040001": "Logga in",
-  "identities.messages.1040002": "Logga in med {provider}",
+  "identities.messages.1040001": "Skapa konto",
+  "identities.messages.1040002": "Registrera dig med {provider}",
   "identities.messages.1040003": "Forts\xE4tt",
   "identities.messages.1040004": "Registrera med s\xE4kerhetsnyckel",
   "identities.messages.1040005": "Ett e-postmeddelande som inneh\xE5ller en kod har skickats till den e-postadress du angett. Om du inte har f\xE5tt ett e-postmeddelande, kontrollera stavningen av adressen och f\xF6rs\xF6k igen med registreringen.",
@@ -1526,7 +1582,15 @@ var sv_default = {
   "verification.registration-button": "Skapa konto",
   "verification.registration-label": "Har du inget konto?",
   "verification.title": "Verifiera ditt konto",
-  "verification.back-button": "Tillbaka"
+  "verification.back-button": "Tillbaka",
+  "two-step.code.description": "En verifieringskod kommer att skickas till din e-post",
+  "two-step.code.title": "E-postkod",
+  "two-step.passkey.description": "Anv\xE4nd din enhets fingeravtryck eller ansiktsigenk\xE4nning",
+  "two-step.passkey.title": "Passerkod (rekommenderad)",
+  "two-step.password.description": "Ange ditt l\xF6senord kopplat till ditt konto",
+  "two-step.password.title": "L\xF6senord",
+  "two-step.webauthn.description": "Anv\xE4nd din s\xE4kerhetsnyckel f\xF6r att autentisera",
+  "two-step.webauthn.title": "S\xE4kerhetsnyckel"
 };
 var LanguageCodes = [
   "ab",
@@ -1711,8 +1775,6 @@ function OryProvider({
   const { locale, defaultLocale, ...oryFlowProps } = props;
   return /* @__PURE__ */ jsx(IntlProvider, { locale: locale != null ? locale : "en", defaultLocale: defaultLocale != null ? defaultLocale : "en", children: /* @__PURE__ */ jsx(OryFlowProvider, { ...oryFlowProps, children: /* @__PURE__ */ jsx(OryComponentProvider, { components: Components, children }) }) });
 }
-
-// src/util/ui/index.ts
 function triggerToWindowCall(trigger) {
   if (!trigger) {
     return;
@@ -1761,6 +1823,19 @@ function triggerToFunction(trigger) {
   }
   return triggerFn;
 }
+function useNodesGroups(nodes) {
+  const groups = useMemo(() => {
+    var _a;
+    const groups2 = {};
+    for (const node of nodes) {
+      const groupNodes = (_a = groups2[node.group]) != null ? _a : [];
+      groupNodes.push(node);
+      groups2[node.group] = groupNodes;
+    }
+    return groups2;
+  }, [nodes]);
+  return groups;
+}
 var NodeInput = ({
   node,
   attributes
@@ -1795,7 +1870,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 isCurrentIdentifier = attrs.name == "identifier" && node.group === "identifier_first" && attrs.type === "hidden";
   const isResend = attrs.name === "resend" && node.group === "code";
   switch (nodeType) {
     case UiNodeInputAttributesTypeEnum.Submit:
@@ -1826,23 +1900,14 @@ var NodeInput = ({
         }
       );
     case UiNodeInputAttributesTypeEnum.Hidden:
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        isCurrentIdentifier && /* @__PURE__ */ jsx(
-          Components.CurrentIdentifierButton,
-          {
-            attributes: attrs,
-            node
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Components.Input,
-          {
-            attributes: attrs,
-            node,
-            onClick: handleClick
-          }
-        )
-      ] });
+      return /* @__PURE__ */ jsx(
+        Components.Input,
+        {
+          attributes: attrs,
+          node,
+          onClick: handleClick
+        }
+      );
     default:
       if (isPinCodeInput) {
         return /* @__PURE__ */ jsx(Components.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsx(
@@ -1912,8 +1977,9 @@ function OryFormSocialButtons({
   const {
     flow: { ui }
   } = useOryFlow();
+  const { setValue } = useFormContext();
   const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
-  const { SocialButtonContainer, HorizontalDivider } = useComponents();
+  const { SocialButtonContainer, HorizontalDivider, SocialButton } = useComponents();
   if (filteredNodes.length === 0) {
     return null;
   }
@@ -1922,11 +1988,35 @@ function OryFormSocialButtons({
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(SocialButtonContainer, { nodes: filteredNodes, children: children != null ? children : filteredNodes.map((node, k) => {
-      return /* @__PURE__ */ jsx(Node, { node }, k);
+      return /* @__PURE__ */ jsx(
+        SocialButton,
+        {
+          node,
+          attributes: node.attributes,
+          onClick: () => {
+            setValue(
+              "provider",
+              node.attributes.value
+            );
+            setValue("method", "oidc");
+          }
+        },
+        k
+      );
     }) }),
     !hideDivider && filteredNodes.length > 0 && otherNodes.length > 0 && /* @__PURE__ */ jsx(HorizontalDivider, {})
   ] });
 }
+function OryFormSocialButtonsForm() {
+  const {
+    flow: { ui }
+  } = useOryFlow();
+  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
+  if (filteredNodes.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsx(OryFormSocialButtons, {}) });
+}
 
 // src/util/test-id.ts
 function messageTestId(message) {
@@ -1998,6 +2088,19 @@ var uiTextToFormattedMessage = ({ id, context = {}, text }, intl) => {
     contextInjectedMessage
   );
 };
+function frontendClient(sdkUrl, opts = {}) {
+  const config = new Configuration({
+    ...opts,
+    basePath: sdkUrl,
+    headers: {
+      Accept: "application/json",
+      ...opts.headers
+    }
+  });
+  return new FrontendApi(config);
+}
+
+// src/util/onSubmitLogin.ts
 async function onSubmitLogin({ config, flow }, {
   setFlowContainer,
   body,
@@ -2231,6 +2334,7 @@ function OryForm({ children }) {
         if (submitData.method === "code" && data.code) {
           submitData.resend = "";
         }
+        console.log(submitData);
         await onSubmitLogin(flowContainer, {
           onRedirect,
           setFlowContainer: handleSuccess,
@@ -2342,6 +2446,108 @@ function OryCardHeader() {
   const { CardHeader } = useComponents();
   return /* @__PURE__ */ jsx(CardHeader, {});
 }
+function isChoosingMethod(uiNodes) {
+  return uiNodes.some(
+    (node) => "value" in node.attributes && node.attributes.value === "profile:back"
+  ) || uiNodes.some(
+    (node) => node.group === UiNodeGroupEnum.IdentifierFirst && "name" in node.attributes && node.attributes.name === "identifier" && node.attributes.type === "hidden"
+  );
+}
+function filterZeroStepGroups(nodes) {
+  return nodes.filter((node) => node.group !== UiNodeGroupEnum.Oidc);
+}
+function getFinalNodes(uniqueGroups, selectedGroup) {
+  var _a, _b, _c;
+  const selectedNodes = selectedGroup ? (_a = uniqueGroups[selectedGroup]) != null ? _a : [] : [];
+  return [
+    ...(_b = uniqueGroups == null ? void 0 : uniqueGroups.identifier_first) != null ? _b : [],
+    ...(_c = uniqueGroups == null ? void 0 : uniqueGroups.default) != null ? _c : []
+  ].flat().filter(
+    (node) => "type" in node.attributes && node.attributes.type === "hidden"
+  ).concat(selectedNodes);
+}
+function OryTwoStepCard() {
+  var _a;
+  const {
+    flow: { ui },
+    config
+  } = useOryFlow();
+  const choosingMethod = isChoosingMethod(ui.nodes);
+  const [selectedGroup, setSelectedGroup] = useState();
+  const Components = useComponents();
+  const { FormGroup } = useComponents();
+  const { flowType } = useOryFlow();
+  const nodeSorter = useNodeSorter();
+  const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
+  const uniqueGroups = useNodesGroups(ui.nodes);
+  const options = Object.values(UiNodeGroupEnum).filter((group) => {
+    var _a2;
+    return (_a2 = uniqueGroups[group]) == null ? void 0 : _a2.length;
+  }).filter(
+    (group) => ![
+      UiNodeGroupEnum.Oidc,
+      UiNodeGroupEnum.Default,
+      UiNodeGroupEnum.IdentifierFirst,
+      UiNodeGroupEnum.Profile
+    ].includes(group)
+  );
+  const hasOIDC = Boolean((_a = uniqueGroups.oidc) == null ? void 0 : _a.length);
+  const zeroStepGroups = filterZeroStepGroups(ui.nodes);
+  const finalNodes = getFinalNodes(uniqueGroups, selectedGroup);
+  const step = selectedGroup ? 2 /* ExecuteAuthMethod */ : choosingMethod ? 1 /* ChooseAuthMethod */ : 0 /* ProvideIdentifier */;
+  return /* @__PURE__ */ jsxs(OryCard, { children: [
+    /* @__PURE__ */ jsx(OryCardHeader, {}),
+    /* @__PURE__ */ jsxs(OryCardContent, { children: [
+      /* @__PURE__ */ jsx(OryCardValidationMessages, {}),
+      step === 0 /* ProvideIdentifier */ && hasOIDC && /* @__PURE__ */ jsx(OryFormSocialButtonsForm, {}),
+      /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsxs(FormGroup, { children: [
+        step === 0 /* ProvideIdentifier */ && zeroStepGroups.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k)),
+        step === 1 /* ChooseAuthMethod */ && /* @__PURE__ */ jsxs(Fragment, { children: [
+          flowType === FlowType.Login && /* @__PURE__ */ jsx(BackButton, { href: config.project.login_ui_url }),
+          options.map((option) => /* @__PURE__ */ jsx(
+            Components.AuthMethodListItem,
+            {
+              group: option,
+              onClick: () => setSelectedGroup(option)
+            },
+            option
+          ))
+        ] }),
+        step === 2 /* ExecuteAuthMethod */ && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(BackButton, { onClick: () => setSelectedGroup(void 0) }),
+          finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsx(Node, { node }, k))
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(OryCardFooter, {})
+  ] });
+}
+var BackButton = ({ onClick, href }) => {
+  const {
+    flow: { ui }
+  } = useOryFlow();
+  const Components = useComponents();
+  const nodeBackButton = ui.nodes.find(
+    (node) => (
+      // ("value" in node.attributes &&
+      //   node.attributes.value === "profile:back") ||
+      "name" in node.attributes && node.attributes.name === "identifier" && node.group === "identifier_first"
+    )
+  );
+  if (!nodeBackButton) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Components.CurrentIdentifierButton,
+    {
+      node: nodeBackButton,
+      attributes: nodeBackButton.attributes,
+      onClick,
+      type: onClick ? "button" : void 0,
+      href
+    }
+  );
+};
 function OryCardContent({ children }) {
   const { CardContent } = useComponents();
   if (children) {
@@ -2349,24 +2555,21 @@ function OryCardContent({ children }) {
   }
   return /* @__PURE__ */ jsxs(CardContent, { children: [
     /* @__PURE__ */ jsx(OryCardValidationMessages, {}),
-    /* @__PURE__ */ jsxs(OryForm, { children: [
-      /* @__PURE__ */ jsx(OryFormSocialButtons, {}),
-      /* @__PURE__ */ jsx(
-        OryFormGroups,
-        {
-          groups: [
-            "default",
-            "password",
-            "passkey",
-            "code",
-            "webauthn",
-            "profile",
-            "totp",
-            "identifier_first"
-          ]
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx(OryForm, { children: /* @__PURE__ */ jsx(
+      OryFormGroups,
+      {
+        groups: [
+          "default",
+          "password",
+          "passkey",
+          "code",
+          "webauthn",
+          "profile",
+          "totp",
+          "identifier_first"
+        ]
+      }
+    ) })
   ] });
 }
 function OryCardFooter() {
@@ -2399,6 +2602,6 @@ function OryFormGroupDivider() {
   return null;
 }
 
-export { HeadlessMessage, IntlProvider, LanguageCodes, OryCard, OryCardContent, OryCardFooter, OryCardHeader, OryCardValidationMessages, OryComponentProvider, OryFlowProvider, OryForm, OryFormGroupDivider, OryFormGroups, OryFormSocialButtons, locales_exports as OryLocales, OryProvider, formElementId, formLabelId, formatMessage, isCustomTranslations, messageTestId, onSubmitLogin, onSubmitRecovery, onSubmitRegistration, onSubmitSettings, onSubmitVerification, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
+export { HeadlessMessage, IntlProvider, LanguageCodes, OryCard, OryCardContent, OryCardFooter, OryCardHeader, OryCardValidationMessages, OryComponentProvider, OryFlowProvider, OryForm, OryFormGroupDivider, OryFormGroups, OryFormSocialButtons, OryFormSocialButtonsForm, locales_exports as OryLocales, OryProvider, OryTwoStepCard, formElementId, formLabelId, formatMessage, isCustomTranslations, messageTestId, onSubmitLogin, onSubmitRecovery, onSubmitRegistration, onSubmitSettings, onSubmitVerification, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map