How to change language on buttons/fields

[pedrodgoes]

Hi. I'd like to know how to change the labels on the fields (password, first name, save, sign in, profile settings...), I'd like to be able to put them in Portuguese.

I'm using ory in Custom UI with Ory Elements mode (https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-ory-elements), with react-spa.

[Benehiko]

I have sent this in Slack, but will also paste it here for others to see.

We have built in translations with the Ory Account Experience and Ory Elements. They should already work out of the box by setting the preferred language you would like in the <IntlProvider> component.

Like so

<IntlProvider locale="pt" />

To customize the labels, however, you would need to provide your own translation file
In your case you can see the ID label can be changed by providing a value for this key https://github.com/ory/elements/blob/main/src/locales/en.json#L61

See below for a screenshot of the translation in Portuguese of the sign in page.

We also already provide Portuguese out of the box here https://github.com/ory/elements/blob/main/src/locales/pt.json.

You can copy this file into your own react project and use it with your own react-intl provider. Just make sure you are on the latest version of Ory Elements.

Then inside your project, you will need to use the react-intl provider directly instead of the IntlProvider from Ory Elements.

// other imports above 
import { IntlProvider } from "react-intl";
import { pt } from "./locales";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      {/* We add the Ory themes here */}
      <ThemeProvider themeOverrides={{}}>
        <IntlProvider
          locale="pt"
          defaultLocale="en"
          messages={pt}
          defaultRichTextElements={{
            del: (chunks) => <del>{chunks}</del>,
          }}
        >
             // children are here like routes etc
       </IntlProvider>
     <ThemeProvider>
   </BrowserRouter>
  </React.StrictMode>
);

[Benehiko]

Just to also keep this up to date, I have opened a PR to address this feature here #158

I hope to get it merged in the coming days :)