OpenChain-Project / Online-Self-Certification-Web-App

This is the source code for the OpenChain Project Conformance Online Self-Certification Web App
https://certification.openchainproject.org/
Apache License 2.0
12 stars 5 forks source link

Invalid username error message is not translated #221

Open goneall opened 2 years ago

goneall commented 2 years ago

When an invalid username is entered on the signup form, the message "Error!!!" is displayed rather than the error reported from the JavaScript.

This is likely an error in the translation.

This is the HTML for the displayed error:

<p class="translate" data-i18n="Length of address must be between 3 and 500">Error!!</p> error

goneall commented 2 years ago

The text is set in the updateTips method in navbar.js:

function updateTips( t ) {
    tips
      .html('<p class="translate" data-i18n="'+t+'">Error!!</p>')
      .addClass( "ui-state-highlight" );
    $('.translate').localize();
    setTimeout(function() {
      tips.removeClass( "ui-state-highlight", 1500 );
    }, 500 );
  }

It looks like the translate function is not rendering the text. Perhaps all of the error messages are not in the translations?

In the short term, we could just add the English error messages.

goneall commented 2 years ago

It looks like the translation data for the string displayed is there but is not being displayed. Maybe the lookup is failing due to the special characters in the translation key?

Below is the key from the Japanese translation file for the sign-up error when the username is not correct:

  "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter": "ユーザー名は、a-z、0-9、下線、スペースで構成され、必ず文字で始めてください。",
goneall commented 2 years ago

We could try replacing the key with something less complex.

Another possible solution would be to include the error text in the HTML, e.g.:

function updateTips( t ) {
    tips
      .html('<p class="translate" data-i18n="'+t+'">t</p>')
      .addClass( "ui-state-highlight" );
    $('.translate').localize();
    setTimeout(function() {
      tips.removeClass( "ui-state-highlight", 1500 );
    }, 500 );
  }
goneall commented 2 years ago

Partially resolved with PR #223 - the error will now display in English but will not translate to the local language