Get i18n error messages on @aws-amplify/ui-react

[xavierraffin]

Is your feature request related to a problem? Please describe.

Error message are not translated when i18n lang changes when using UI from @aws-amplify/ui-react.
Plus there is no reliable list to know what possible message has to be translated.

There is an old list in packages/aws-amplify-react/src/AmplifyI18n.tsx but it was for the legacy aws-amplify-react package.
The list is incomplete (Eric said):

The problem is that those languages have ~41 translated strings, while the new UI components have ~65, many new & others being different from what existed before.

Additionally errors from Cognito should have a way to be translated.
Example:
1 validation error detected: Value at 'password' failed to satisfy constraint: Member must have length greater than or equal to 6

This type of message is complicated to translate.

Describe the solution you'd like

I like to have the full list of Translation string somewhere. (like amplify-ui-compomnents/src/common/Translation.tsx).

Having translation ready (like it was the case on aws-amplify-react on AmplifyI18n.tsx) will be ideal.
And documenting the supported languages will be great.

Having error messages from Cognito reliably translated. Not directly displayed to user. Why not asking Cognito to return an error code and use that fro English and non English translation with string controlled on Amplify side

Describe alternatives you've considered

Painfully looking in the code and testing. Then adding translations.
So far I added:

export const strings = {
    fr: {
        "1 validation error detected: Value at 'password' failed to satisfy constraint: Member must have length greater than or equal to 6": "Le mot de passe doit faire au moins 6 caractères.",
        "Username cannot be empty": "Le nom d'utilisateur doit être renseigné",
        "User does not exist." : "L'utilisateur n'existe pas.",
        "An account with the given email already exists.": "Un compte avec cette adresse couriel existe déjà.",
        "User is disabled.": "L'utilisateur est désectivé.",
        "Access Token has been revoked": "Le jeton d'accès a été révoqué"
    }
}

[xavierraffin]

In aws-amplify/amplify-js#4979 Eric explained why he did not do translation at that time in his PR. Maybe now is time to finish the job?

[harrysolovay]

Is this the list of possible translations which you would like better-documented?

[xavierraffin]

I am not sure for that one.
The initial ask was about the i18n translation provided off the shelf by Amplify before new components: https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react/src/AmplifyI18n.tsx

And the second ask is a translation of the error from Cognito.
For that I understand that having an error code from Cognito is something that will help. I already talk about that to ouli@ (AWS login) and they have plan to do that in the future

[Immutible]

I'm facing similar issues with translations. A complete list wouldn't be enough for covering all the cases because the error messages can also include input values. E.g.

2 validation errors detected: Value 'test test' at 'userName' failed to satisfy constraint: Member must satisfy regular expression pattern: [\p{L}\p{M}\p{S}\p{N}\p{P}]+; Value 'test test' at 'userAlias' failed to satisfy constraint: Member must satisfy regular expression pattern: [\p{L}\p{M}\p{S}\p{N}\p{P}]+

In above case email is used as a userName value.

[eddiekeller]

This remains an issue, even in the new version of the authenticator. Cognito error messages do not get translated. Since user input is often included in the message, I'm guessing what we would have to hook in to is the error type. Off the top of my head, I'm not sure if Cognito reuses error types, though. If they do, then that would not be a reliable solution.

[ericclemmons]

This is also a short-coming of I18n being little more than a map.

Previous implementations relied on pattern-matching to translate errors:

https://github.com/aws-amplify/amplify-js/blob/853adc7554f0a61922e3348d3626c73a5166266d/packages/aws-amplify-react/src/AmplifyMessageMap.tsx