fix: add missing translations in all places (#224)

chore: format

.prettierignore

@@ -10,3 +10,7 @@ CONTRIBUTING.md
 docs
 .next
 .cache
+
+# Generated files
+CHANGELOG.md
+**/api-report/*

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

@@ -201,5 +201,23 @@
   "identities.messages.1050020": "",
   "identities.messages.4000037": "",
   "identities.messages.4010009": "",
-  "identities.messages.4010010": ""
+  "identities.messages.4010010": "",
+  "input.placeholder": "{placeholder} eingeben",
+  "card.header.parts.code": "einem Code per E-Mail",
+  "card.header.parts.identifier-first": "Ihr {identifierLabel}",
+  "card.header.parts.oidc": "ein sozialer Anbieter",
+  "card.header.parts.passkey": "ein Passkey",
+  "card.header.parts.password.login": "Ihrer {identifierLabel} und Ihrem Passwort",
+  "card.header.parts.password.registration": "Ihrer {identifierLabel} und einem Passwort",
+  "card.header.parts.webauthn": "ein Sicherheitsschlüssel",
+  "recovery.subtitle": "Geben Sie die mit Ihrem Konto verknüpfte E-Mail-Adresse ein, um einen einmaligen Zugangscode zu erhalten",
+  "settings.subtitle": "Aktualisieren Sie Ihre Kontoeinstellungen",
+  "verification.subtitle": "Geben Sie die mit Ihrem Konto verknüpfte E-Mail-Adresse ein, um es zu bestätigen",
+  "card.header.description.login": "Melden Sie sich mit {identifierLabel} an",
+  "card.header.description.registration": "Registrieren Sie sich mit {identifierLabel}",
+  "login.subtitle": "Melden Sie sich mit {parts} an",
+  "login.subtitle-refresh": "Bestätigen Sie ihre Identität mit {parts}",
+  "misc.or": "oder",
+  "registration.subtitle": "Registrieren Sie sich mit {parts}",
+  "forms.label.forgot-password": "Passwort vergessen?"
 }

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

@@ -158,18 +158,22 @@
   "login.registration-label": "Don't have an account?",
   "login.subtitle-oauth2": "To authenticate {clientName}",
   "login.title": "Sign in",
+  "login.subtitle": "Sign in with {parts}",
   "login.title-aal2": "Two-Factor Authentication",
-  "login.title-refresh": "Confirm it's you",
+  "login.title-refresh": "Reauthenticate",
+  "login.subtitle-refresh": "Confirm your identity with {parts}",
   "logout.accept-button": "Yes",
   "logout.reject-button": "No",
   "logout.title": "Do you wish to log out?",
   "recovery.login-button": "Sign in",
   "recovery.login-label": "Remember your credentials?",
   "recovery.title": "Recover your account",
+  "recovery.subtitle": "Enter the email address associated with your account to receive a one-time access code",
   "registration.login-button": "Sign in",
   "registration.login-label": "Already have an account?",
   "registration.subtitle-oauth2": "To authenticate {clientName}",
   "registration.title": "Register an account",
+  "registration.subtitle": "Sign up with {parts}",
   "settings.navigation-back-button": "Back",
   "settings.navigation-backup-codes": "2FA Backup Codes",
   "settings.navigation-logout": "Logout",
@@ -180,7 +184,8 @@
   "settings.navigation-webauthn": "Hardware Tokens",
   "settings.navigation-passkey": "Passkeys",
   "settings.subtitle-instructions": "Here you can manage settings related to your account. Keep in mind that certain actions require you to re-authenticate.",
-  "settings.title": "Account Settings",
+  "settings.title": "Update your account",
+  "settings.subtitle": "Update your account settings",
   "settings.title-lookup-secret": "Manage 2FA Backup Recovery Codes",
   "settings.title-navigation": "Account Settings",
   "settings.title-oidc": "Social Sign In",
@@ -192,6 +197,7 @@
   "verification.registration-button": "Sign up",
   "verification.registration-label": "Don't have an account?",
   "verification.title": "Verify your account",
+  "verification.subtitle": "Enter the email address associated with your account to verify it",
   "verification.back-button": "Back",
   "two-step.password.title": "Password",
   "two-step.password.description": "Enter your password associated with your account",
@@ -201,5 +207,17 @@
   "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",
-  "identities.messages.1010020": ""
+  "identities.messages.1010020": "",
+  "input.placeholder": "Enter your {placeholder}",
+  "card.header.parts.oidc": "a social provider",
+  "card.header.parts.password.registration": "your {identifierLabel} and a password",
+  "card.header.parts.password.login": "your {identifierLabel} and password",
+  "card.header.parts.code": "a code sent to your email",
+  "card.header.parts.passkey": "a Passkey",
+  "card.header.parts.webauthn": "a security key",
+  "card.header.parts.identifier-first": "your {identifierLabel}",
+  "card.header.description.login": "Sign in with {identifierLabel}",
+  "card.header.description.registration": "Sign up with {identifierLabel}",
+  "misc.or": "or",
+  "forms.label.forgot-password": "Forgot Password?"
 }

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

@@ -201,5 +201,23 @@
   "identities.messages.4010009": "",
   "identities.messages.4010010": "",
   "login.cancel-button": "",
-  "login.cancel-label": ""
+  "login.cancel-label": "",
+  "input.placeholder": "",
+  "card.header.description.login": "",
+  "card.header.description.registration": "",
+  "card.header.parts.code": "",
+  "card.header.parts.identifier-first": "",
+  "card.header.parts.oidc": "",
+  "card.header.parts.passkey": "",
+  "card.header.parts.password.login": "",
+  "card.header.parts.password.registration": "",
+  "card.header.parts.webauthn": "",
+  "forms.label.forgot-password": "",
+  "login.subtitle": "",
+  "login.subtitle-refresh": "",
+  "misc.or": "",
+  "recovery.subtitle": "",
+  "registration.subtitle": "",
+  "settings.subtitle": "",
+  "verification.subtitle": ""
 }

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

@@ -201,5 +201,23 @@
   "identities.messages.1070014": "",
   "identities.messages.4000037": "",
   "identities.messages.4010009": "",
-  "identities.messages.4010010": ""
+  "identities.messages.4010010": "",
+  "input.placeholder": "",
+  "card.header.description.login": "",
+  "card.header.description.registration": "",
+  "card.header.parts.code": "",
+  "card.header.parts.identifier-first": "",
+  "card.header.parts.oidc": "",
+  "card.header.parts.passkey": "",
+  "card.header.parts.password.login": "",
+  "card.header.parts.password.registration": "",
+  "card.header.parts.webauthn": "",
+  "forms.label.forgot-password": "",
+  "login.subtitle": "",
+  "login.subtitle-refresh": "",
+  "misc.or": "",
+  "recovery.subtitle": "",
+  "registration.subtitle": "",
+  "settings.subtitle": "",
+  "verification.subtitle": ""
 }

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

@@ -201,5 +201,23 @@
   "identities.messages.1050020": "",
   "identities.messages.4000037": "",
   "identities.messages.4010009": "",
-  "identities.messages.4010010": ""
+  "identities.messages.4010010": "",
+  "input.placeholder": "",
+  "card.header.description.login": "",
+  "card.header.description.registration": "",
+  "card.header.parts.code": "",
+  "card.header.parts.identifier-first": "",
+  "card.header.parts.oidc": "",
+  "card.header.parts.passkey": "",
+  "card.header.parts.password.login": "",
+  "card.header.parts.password.registration": "",
+  "card.header.parts.webauthn": "",
+  "forms.label.forgot-password": "",
+  "login.subtitle": "",
+  "login.subtitle-refresh": "",
+  "misc.or": "",
+  "recovery.subtitle": "",
+  "registration.subtitle": "",
+  "settings.subtitle": "",
+  "verification.subtitle": ""
 }

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

@@ -201,5 +201,23 @@
   "identities.messages.4010009": "",
   "identities.messages.4010010": "",
   "login.cancel-button": "",
-  "login.cancel-label": ""
+  "login.cancel-label": "",
+  "input.placeholder": "",
+  "card.header.description.login": "",
+  "card.header.description.registration": "",
+  "card.header.parts.code": "",
+  "card.header.parts.identifier-first": "",
+  "card.header.parts.oidc": "",
+  "card.header.parts.passkey": "",
+  "card.header.parts.password.login": "",
+  "card.header.parts.password.registration": "",
+  "card.header.parts.webauthn": "",
+  "forms.label.forgot-password": "",
+  "login.subtitle": "",
+  "login.subtitle-refresh": "",
+  "misc.or": "",
+  "recovery.subtitle": "",
+  "registration.subtitle": "",
+  "settings.subtitle": "",
+  "verification.subtitle": ""
 }

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

@@ -201,5 +201,23 @@
   "identities.messages.4010010": "",
   "login.cancel-button": "",
   "login.cancel-label": "",
-  "identities.messages.1070015": ""
+  "identities.messages.1070015": "",
+  "input.placeholder": "",
+  "card.header.description.login": "",
+  "card.header.description.registration": "",
+  "card.header.parts.code": "",
+  "card.header.parts.identifier-first": "",
+  "card.header.parts.oidc": "",
+  "card.header.parts.passkey": "",
+  "card.header.parts.password.login": "",
+  "card.header.parts.password.registration": "",
+  "card.header.parts.webauthn": "",
+  "forms.label.forgot-password": "",
+  "login.subtitle": "",
+  "login.subtitle-refresh": "",
+  "misc.or": "",
+  "recovery.subtitle": "",
+  "registration.subtitle": "",
+  "settings.subtitle": "",
+  "verification.subtitle": ""
 }

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

@@ -201,5 +201,23 @@
   "two-step.webauthn.title": "Säkerhetsnyckel",
   "identities.messages.4000037": "Detta konto finns inte eller har ingen inloggningsmetod konfigurerad.",
   "identities.messages.4000038": "Captcha-verifiering misslyckades, försök igen.",
-  "identities.messages.1010020": ""
+  "identities.messages.1010020": "",
+  "input.placeholder": "Ange ditt {placeholder}",
+  "card.header.description.login": "Logga in med {identifierLabel}",
+  "card.header.description.registration": "Registrera dig med {identifierLabel}",
+  "card.header.parts.code": "en kod skickad till din e-post",
+  "card.header.parts.identifier-first": "din {identifierLabel}",
+  "card.header.parts.oidc": "en social leverantör",
+  "card.header.parts.passkey": "en Passkey",
+  "card.header.parts.password.login": "din {identifierLabel} och lösenord",
+  "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?",
+  "login.subtitle": "Logga in med {parts}",
+  "login.subtitle-refresh": "Bekräfta din identitet med {parts}",
+  "misc.or": "eller",
+  "recovery.subtitle": "Ange e-postadressen kopplad till ditt konto för att få en engångskod för åtkomst",
+  "registration.subtitle": "Registrera dig med {parts}",
+  "settings.subtitle": "Uppdatera dina kontoinställningar",
+  "verification.subtitle": "Ange e-postadressen kopplad till ditt konto för att verifiera det"
 }

packages/elements-react/src/theme/default/components/card/header.tsx

@@ -1,5 +1,5 @@
 import { useComponents, useOryFlow } from "@ory/elements-react"
-import { constructCardHeaderText } from "../../utils/constructCardHeader"
+import { useCardHeaderText } from "../../utils/constructCardHeader"
 
 function InnerCardHeader({ title, text }: { title: string; text?: string }) {
   const { CardLogo } = useComponents()
@@ -18,7 +18,7 @@ function InnerCardHeader({ title, text }: { title: string; text?: string }) {
 
 export function DefaultCardHeader() {
   const context = useOryFlow()
-  const { title, description } = constructCardHeaderText(
+  const { title, description } = useCardHeaderText(
     context.flow.ui.nodes,
     context,
   )

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

@@ -1,7 +1,8 @@
 import { PropsWithChildren } from "react"
 import { cn } from "../../utils/cn"
-import { HeadlessFormProps } from "@ory/elements-react"
+import { formatMessage, HeadlessFormProps } from "@ory/elements-react"
 import { HeadlessMessageProps } from "@ory/elements-react"
+import { useIntl } from "react-intl"
 
 export function DefaultFormContainer({
   children,
@@ -31,6 +32,7 @@ export function DefaultMessageContainer({ children }: PropsWithChildren) {
 }
 
 export function DefaultMessage({ message }: HeadlessMessageProps) {
+  const intl = useIntl()
   return (
     <span
       className={cn("text-sm mt-1 leading-normal", {
@@ -39,7 +41,7 @@ export function DefaultMessage({ message }: HeadlessMessageProps) {
         "text-forms-fg-success": message.type === "success",
       })}
     >
-      {message.text}
+      {formatMessage(message, intl)}
     </span>
   )
 }

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

@@ -1,6 +1,7 @@
-import { useFormContext } from "react-hook-form"
-import { HeadlessInputProps } from "@ory/elements-react"
 import { getNodeLabel } from "@ory/client-fetch"
+import { formatMessage, HeadlessInputProps } from "@ory/elements-react"
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
 
 export const DefaultInput = ({
   node,
@@ -10,14 +11,27 @@ export const DefaultInput = ({
   const label = getNodeLabel(node)
   const { register } = useFormContext()
   const { value, autocomplete, name, maxlength, ...rest } = attributes
+  const intl = useIntl()
+
+  const formattedLabel = label
+    ? intl.formatMessage(
+        {
+          id: "input.placeholder",
+          defaultMessage: "Enter your {placeholder}",
+        },
+        {
+          placeholder: formatMessage(label, intl),
+        },
+      )
+    : ""
 
   return (
     <input
       {...rest}
       onClick={onClick}
       maxLength={maxlength}
       autoComplete={autocomplete}
-      placeholder={label?.text ? "Enter your " + label?.text : ""}
+      placeholder={formattedLabel}
       className="antialiased bg-forms-bg-default rounded-border-radius-forms border px-3 py-2.5 md:px-4 md:py-4 border-forms-border-default leading-tight hover:border-forms-border-hover transition-colors text-sm"
       {...register(name, { value })}
     />

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

@@ -1,10 +1,12 @@
 import {
+  formatMessage,
   HeadlessSocialButtonContainerProps,
   HeadlessSocialButtonProps,
   useOryFlow,
 } from "@ory/elements-react"
 import logos from "../../provider-logos"
 import { cn } from "../../utils/cn"
+import { useIntl } from "react-intl"
 
 function extractProvider(context: object | undefined): string | undefined {
   if (
@@ -32,6 +34,7 @@ export function DefaultButtonSocial({
   const {
     flow: { ui },
   } = useOryFlow()
+  const intl = useIntl()
 
   const oidcNodeCount =
     ui.nodes.filter((node) => node.group === "oidc").length ?? 0
@@ -69,7 +72,7 @@ export function DefaultButtonSocial({
       </span>
       {showLabel ? (
         <span className="text-sm text-left leading-none font-medium text-forms-fg-default flex-grow">
-          {node.meta.label?.text}
+          {formatMessage(node.meta.label, intl)}
         </span>
       ) : null}
     </button>