Not able to retrieve Messages from messages_en.properties file in Keycloak using JavaScript

Question

I did custom Keycloak Theme. I am retrieving text from msg_en.properties file and showing text using ftl file and Keycloak Properties. Text added in ftl file using ${msg(key)} is working fine, only not able to retrieve text added dynamically from java script.

here is login-update-password.ftl file

    <div id="password-error-message" class="keyclaok-err-msg"></div> here adding custom text
        <#if message?has_content>
            <div class="update-password-alert-div" id="keycloak-error-message">
                <#if message.type == "error" ||  message.type == "warning" >
                    <span class="kc-feedback-text keyclaok-err-msg">${kcSanitize(message.summary)?no_esc}</span>**//this works**
                </#if>
            </div>
        </#if>

here login.js file to add custom functionalties

  $('#password-new').focusout(function(e) {
    var newPassword = this.value;
    var passwordValidation = [
      {  message: '${msg("passwordcharErrMsg")}', validation: /^.{8,}$/},
      {  message: '${msg("passwordNumErrMsg")}', validation: /[0-9]/ },
      {  message: '${msg("passwordSpCharErrMsg")}', validation: /[ !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/},
      {  message: '${msg("passwordCapLetErrMsg")}', validation: /[A-Z]/}
   ];
    var passwordErrorMessage = [];

    for(let index = 0;index < passwordValidation.length;index++){
      if(!passwordValidation[index].validation.test(newPassword)){
        passwordErrorMessage.push(passwordValidation[index].message);
      }else{
        passwordErrorMessage.splice(index,1);
      }
    }
   if(this.value.length < 256){
    validPassword = true;
    removeError(e, this);
   showError("#password-error-message","");
   if(passwordErrorMessage.length) {
    var last = passwordErrorMessage.pop();
    var message = '${msg("passwordMainErrText")} ';
    if(passwordErrorMessage.length){
       message += passwordErrorMessage.join(", ");
       message += " and "+last + ".";
    }else{
      message += last + ".";
    }
    validPassword = false;
    applyError(e, this);
    showError("#password-error-message",message);
  }else{
    validPassword = true;
    removeError(e, this);
    showError("#password-error-message","");
  }
 }else{
  validPassword = false;
  applyError(e, this);
  showError("#password-error-message",'${msg("passwordMaxLenErrText")}');
 }

    $('#password-confirm').trigger('focusout');
    checkValidity();
  });
 
 
function showError(id,errorMessage){
    var message = String(errorMessage);
    $(id).html(message);
  }

Final output-

Answer 1

FTL is not like Angular. The page is generated server-side and you get plain html with whatever js you wrote in that login.js . Dynamic message injection won't work because it's done on client side, thus your messages are not parsed and are inserted as is.

You'd rather have 4 spans (one for each validation message) and display/hide them depending on which validation is failing.