feat: add "Recover Account" to identifier label

GitOrigin-RevId: 1bd4c27bc2e0a09df7539e16f2385be8b7d298e7

Author: jonas-jonas

packages/elements-react/src/locales/de.json

@@ -215,6 +215,7 @@
   "misc.or": "oder",
   "registration.subtitle": "Registrieren Sie sich mit {parts}.",
   "forms.label.forgot-password": "Passwort vergessen?",
+  "forms.label.recover-account": "Konto wiederherstellen",
   "settings.title": "Kontoeinstellungen",
   "settings.navigation.title": "Kontoeinstellungen",
   "settings.subtitle": "Aktualisieren Sie Ihre Kontoeinstellungen",

packages/elements-react/src/locales/en.json

@@ -244,6 +244,7 @@
   "card.header.description.registration": "Sign up with {identifierLabel}",
   "misc.or": "or",
   "forms.label.forgot-password": "Forgot Password?",
+  "forms.label.recover-account": "Recover Account",
   "settings.totp.title": "Authenticator App",
   "settings.totp.description": "Add a TOTP Authenticator App to your account to improve your account security. Popular Authenticator Apps are LastPass and Google Authenticator",
   "settings.totp.info.not-linked": "To enable scan the QR code with your authenticator and enter the code.",

packages/elements-react/src/locales/es.json

@@ -266,6 +266,7 @@
   "card.header.description.registration": "Registrarse con {identifierLabel}",
   "misc.or": "o",
   "forms.label.forgot-password": "¿Olvidaste tu contraseña?",
+  "forms.label.recover-account": "Recuperar cuenta",
   "settings.oidc.info": "Las cuentas conectadas de estos proveedores se pueden utilizar para iniciar sesión en tu cuenta",
   "settings.webauthn.info": "Los tokens de hardware se utilizan para la autenticación de segundo factor o como primer factor con las claves de acceso",
   "settings.passkey.info": "Administra la configuración de tus claves de acceso",

packages/elements-react/src/locales/fr.json

@@ -261,6 +261,7 @@
   "card.header.description.registration": "S'inscrire avec {identifierLabel}",
   "misc.or": "ou",
   "forms.label.forgot-password": "Mot de passe oublié?",
+  "forms.label.recover-account": "Récupérer le compte",
   "settings.lookup_secret.title": "Codes de récupération de sauvegarde (second facteur)",
   "settings.lookup_secret.description": "Les codes de récupération sont une sauvegarde sécurisée pour l'authentification à deux facteurs (2FA), vous permettant de retrouver l'accès à votre compte si vous perdez votre appareil 2FA.",
   "settings.oidc.title": "Comptes connectés",

packages/elements-react/src/locales/nl.json

@@ -220,6 +220,7 @@
   "card.header.parts.password.registration": "",
   "card.header.parts.webauthn": "",
   "forms.label.forgot-password": "",
+  "forms.label.recover-account": "",
   "login.subtitle": "",
   "login.subtitle-refresh": "",
   "misc.or": "",

packages/elements-react/src/locales/pl.json

@@ -220,6 +220,7 @@
   "card.header.parts.totp": "Twoja aplikacja uwierzytelniająca",
   "card.header.parts.lookup_secret": "kod odzyskiwania kopii zapasowej",
   "forms.label.forgot-password": "",
+  "forms.label.recover-account": "",
   "login.subtitle": "",
   "login.subtitle-refresh": "",
   "misc.or": "",

packages/elements-react/src/locales/pt.json

@@ -220,6 +220,7 @@
   "card.header.parts.password.registration": "",
   "card.header.parts.webauthn": "",
   "forms.label.forgot-password": "",
+  "forms.label.recover-account": "",
   "login.subtitle": "",
   "login.subtitle-refresh": "",
   "misc.or": "",

packages/elements-react/src/locales/sv.json

@@ -220,6 +220,7 @@
   "card.header.parts.password.registration": "din {identifierLabel} och ett lösenord",
   "card.header.parts.webauthn": "en säkerhetsnyckel",
   "forms.label.forgot-password": "Glömt Lösenord?",
+  "forms.label.recover-account": "Återställ Konto",
   "login.subtitle": "Logga in med {parts}",
   "login.subtitle-refresh": "Bekräfta din identitet med {parts}",
   "misc.or": "eller",

packages/elements-react/src/theme/default/components/form/label.tsx

@@ -6,6 +6,7 @@ import {
   getNodeLabel,
   instanceOfUiText,
   UiNode,
+  UiNodeInputAttributes,
 } from "@ory/client-fetch"
 import {
   messageTestId,
@@ -18,6 +19,7 @@ import {
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { initFlowUrl } from "../../utils/url"
+import { useMemo } from "react"
 
 function findResendNode(nodes: UiNode[]) {
   return nodes.find(
@@ -37,12 +39,9 @@ export function DefaultLabel({
   const intl = useIntl()
   const label = getNodeLabel(node)
   const { Message } = useComponents()
-  const { flowType, flow } = useOryFlow()
-  const config = useOryConfiguration()
+  const { flow } = useOryFlow()
   const { setValue, formState } = useFormContext()
 
-  const isPassword = attributes.type === "password"
-
   const resendNode = findResendNode(flow.ui.nodes)
 
   const handleResend = () => {
@@ -65,20 +64,7 @@ export function DefaultLabel({
           >
             {uiTextToFormattedMessage(label, intl)}
           </label>
-          {isPassword &&
-            config.project.recovery_enabled &&
-            flowType === FlowType.Login && (
-              // TODO: make it possible to override with a custom component
-              <a
-                href={initFlowUrl(config.sdk.url, "recovery", flow)}
-                className="text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline"
-              >
-                {intl.formatMessage({
-                  id: "forms.label.forgot-password",
-                  defaultMessage: "Forgot password?",
-                })}
-              </a>
-            )}
+          <LabelAction attributes={attributes} />
           {resendNode?.attributes.node_type === "input" && (
             <button
               type="submit"
@@ -102,3 +88,54 @@ export function DefaultLabel({
     </div>
   )
 }
+
+type LabelActionProps = {
+  attributes: UiNodeInputAttributes
+}
+
+function LabelAction({ attributes }: LabelActionProps) {
+  const intl = useIntl()
+  const { flowType, flow, formState } = useOryFlow()
+  const config = useOryConfiguration()
+
+  const action = useMemo(() => {
+    if (flowType === FlowType.Login && config.project.recovery_enabled) {
+      if (formState.current === "provide_identifier" && !flow.refresh) {
+        if (attributes.name === "identifier") {
+          return {
+            message: intl.formatMessage({
+              id: "forms.label.recover-account",
+              defaultMessage: "Recover Account",
+            }),
+            href: initFlowUrl(config.sdk.url, "recovery", flow),
+          }
+        }
+      } else if (attributes.type === "password") {
+        return {
+          message: intl.formatMessage({
+            id: "forms.label.forgot-password",
+            defaultMessage: "Forgot password?",
+          }),
+          href: initFlowUrl(config.sdk.url, "recovery", flow),
+        }
+      }
+    }
+  }, [
+    attributes,
+    config.project.recovery_enabled,
+    flow,
+    flowType,
+    intl,
+    config.sdk.url,
+    formState,
+  ])
+
+  return action ? (
+    <a
+      href={action.href}
+      className="text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline"
+    >
+      {action.message}
+    </a>
+  ) : null
+}