Customizing Loginapp UI texts and changing translations with the Loginapp Design Kit

The Loginapp UI supports Internationalization (i18n) with language and locale codes with 2-letter language and 2-letter locale codes.

The following i18n property files contain all the default reference translations for all languages that are provided with Airlock IAM:

de.properties, en.properties, fr.properties, it.properties

It is recommended only to add (uncomment) keys that need customization.

Text and translation changes made via the Loginapp Design Kit apply only to UI texts.

Any non-UI-related text changes (such as email, SMS, or Cronto texts that are not part of the Loginapp UI) can instead only be changed in custom strings_*.properties files, as described in the section Customizing non-UI-related text elements in the Loginapp REST API.

Changing Loginapp UI texts

The Design Kit allows for easy changes to the default translations and/or adding new texts.

Language-specific texts, aka translations, are stored in:
$CUSTOM_DIRECTORY/src/assets/custom/i18n

For example, to change the English text of the Username label on the password page, add:

authentication.password.username = Your username

To identify the keys used for a particular use-case, you may enable the option Show Translation Keys in the Loginapp Design Kit settings. As a result, the relevant keys are displayed directly in the Design Kit development UI. Alternatively, download the templates below, including all built-in translation keys and their default values.

Adding a new language

New languages can be added by creating additional language property files.

  1. In $CUSTOM_DIRECTORY/src/sdk/config/custom.sdk.config.js uncomment config.languages and add the new language to the list of available languages.
  2. Create a corresponding language file in $CUSTOM_DIRECTORY/src/assets/custom/i18n (e.g. es.properties). The common way to add a new language is to copy and rename the en.properties for translation – see the linked properties files at the beginning of this article.

    3. Property files must be UTF-8 encoded.

  3. Add translations for all used text elements.
  4. The new language is now available in the Loginapp Design Kit, can be used in dev mode and will be included in the build artifact.

Internationalization may require the use of locale codes. For more information i.e. requirements to add locale codes, see Internationalization (i18n) with language and locale codes.

The IAM configuration must be adapted, too – it also defines the set of available languages.

  1. In the Config Editor, go to:
    Loginapp >> Language Settings
  2. Add the language to the Valid Languages list.

Depending on the used feature set, there may be other points in the configuration where the new language must be added, e.g., language choice in user registration self-service or user management in the Adminapp.