Uses titleKey to generate title string containing data-i18n attribute.

modules/UI/UI.js

@@ -76,12 +76,11 @@ JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[TrackErrors.NO_DATA_FROM_SOURCE]
 function promptDisplayName() {
     let labelKey = 'dialog.enterDisplayName';
     let labelStr = APP.translation.translateString(labelKey);
-    let titleStr
-        = APP.translation.translateString('dialog.displayNameRequired');
     let defaultNickMsg = APP.translation.translateString("defaultNickname");
     let message = (
         `<div class="input-control">
-            <label class="input-control__label">${labelStr}</label>
+            <label data-i18n="${labelKey}" 
+                class="input-control__label">${labelStr}</label>
             <input name="displayName" type="text"
                data-i18n="[placeholder]defaultNickname"
                class="input-control__input"
@@ -94,7 +93,7 @@ function promptDisplayName() {
     let buttons = {Ok:true};
 
     let dialog = messageHandler.openDialog(
-        titleStr,
+        'dialog.displayNameRequired',
         message,
         true,
         buttons,
@@ -769,7 +768,6 @@ UI.connectionIndicatorShowMore = function(id) {
 // FIXME check if someone user this
 UI.showLoginPopup = function(callback) {
     console.log('password is required');
-    let titleKey = "dialog.passwordRequired";
 
     let message = (
         `<input name="username" type="text"
@@ -788,7 +786,7 @@ UI.showLoginPopup = function(callback) {
     };
 
     messageHandler.openTwoButtonDialog({
-        titleKey,
+        titleKey : "dialog.passwordRequired",
         msgString: message,
         leftButtonKey: 'dialog.Ok',
         submitFunction,
@@ -1493,12 +1491,11 @@ UI.hideUserMediaPermissionsGuidanceOverlay = function () {
  */
 UI.toggleKeyboardShortcutsPanel = function() {
     if (!messageHandler.isDialogOpened()) {
-        let titleKey = 'keyboardShortcuts.keyboardShortcuts';
-        let title = APP.translation.translateString(titleKey);
         let msg = $('#keyboard-shortcuts').html();
         let buttons = { Close: true };
 
-        messageHandler.openDialog(title, msg, true, buttons);
+        messageHandler.openDialog(
+            'keyboardShortcuts.keyboardShortcuts', msg, true, buttons);
     } else {
         messageHandler.closeDialog();
     }

modules/UI/authentication/LoginDialog.js

@@ -99,13 +99,13 @@ function LoginDialog(successCallback, cancelCallback) {
             }
         },
         connecting: {
-            title: APP.translation.translateString('dialog.connecting'),
+            titleKey: 'dialog.connecting',
             html:   '<div id="connectionStatus"></div>',
             buttons: [],
             defaultButton: 0
         },
         finished: {
-            title: APP.translation.translateString('dialog.error'),
+            titleKey: 'dialog.error',
             html:   '<div id="errorMessage"></div>',
             buttons: finishedButtons,
             defaultButton: 0,

modules/UI/invite/InviteDialogView.js

@@ -15,8 +15,8 @@ const States = {
  */
 export default class InviteDialogView {
     constructor(model) {
-        let InviteAttributesKey = 'inviteUrlDefaultMsg';
-        let title = APP.translation.translateString(InviteAttributesKey);
+        let inviteAttributesKey = 'inviteUrlDefaultMsg';
+        let title = APP.translation.translateString(inviteAttributesKey);
 
         this.unlockHint = "unlockHint";
         this.lockHint = "lockHint";
@@ -24,7 +24,7 @@ export default class InviteDialogView {
 
         if (this.model.inviteUrl === null) {
             this.inviteAttributes = (
-                `data-i18n="[value]inviteUrlDefaultMsg" value="${title}"`
+                `data-i18n="[value]${inviteAttributesKey}" value="${title}"`
             );
         } else {
             let encodedInviteUrl = this.model.getEncodedInviteUrl();
@@ -43,11 +43,7 @@ export default class InviteDialogView {
         dialog.submitFunction = this.submitFunction.bind(this);
         dialog.loadedFunction = this.loadedFunction.bind(this);
 
-        let titleKey = "dialog.shareLink";
-        let titleString = APP.translation.generateTranslationHTML(titleKey);
-
-        dialog.titleKey = titleKey;
-        dialog.titleString = titleString;
+        dialog.titleKey = "dialog.shareLink";
         this.dialog = dialog;
 
         this.dialog.states = this.getStates();
@@ -101,7 +97,7 @@ export default class InviteDialogView {
      */
     getStates() {
         let {
-            titleString
+            titleKey
         } = this.dialog;
         let doneKey = 'dialog.done';
         let doneMsg = APP.translation.translateString(doneKey);
@@ -110,12 +106,12 @@ export default class InviteDialogView {
         buttons[`${doneMsg}`] = true;
 
         states[States.UNLOCKED] = {
-            title: titleString,
+            titleKey,
             html: this.getShareLinkBlock() + this.getAddPasswordBlock(),
             buttons
         };
         states[States.LOCKED] = {
-            title: titleString,
+            titleKey,
             html: this.getShareLinkBlock() + this.getPasswordBlock(),
             buttons
         };
@@ -135,10 +131,12 @@ export default class InviteDialogView {
         let roomUnlockKey = 'roomUnlocked';
         let roomUnlock = APP.translation.translateString(roomUnlockKey);
         let classes = 'button-control button-control_light copyInviteLink';
+        let title = APP.translation.translateString(this.dialog.titleKey);
         return (
             `<div class="input-control">
-                <label class="input-control__label" for="inviteLinkRef">
-                    ${this.dialog.titleString}
+                <label class="input-control__label" for="inviteLinkRef"
+                    data-i18n="${this.dialog.titleKey}">
+                        ${title}
                 </label>
                 <div class="input-control__container">
                     <input class="input-control__input inviteLink"

modules/UI/util/MessageHandler.js

@@ -41,13 +41,12 @@ var messageHandler = {
         if (!popupEnabled)
             return null;
 
-        let title = APP.translation.generateTranslationHTML(titleKey);
         if (!message) {
             message = APP.translation.generateTranslationHTML(messageKey);
         }
 
         return $.prompt(message, {
-            title: this._getFormattedTitleString(title),
+            title: this._getFormattedTitleString(titleKey),
             persistent: false,
             promptspeed: 0,
             classes: this._getDialogClasses(),
@@ -107,7 +106,6 @@ var messageHandler = {
         buttons.push({title: cancelButton, value: false});
 
         var message = msgString;
-        var title = APP.translation.generateTranslationHTML(titleKey);
         if (msgKey) {
             message = APP.translation.generateTranslationHTML(msgKey);
         }
@@ -117,7 +115,7 @@ var messageHandler = {
         }
 
         twoButtonDialog = $.prompt(message, {
-            title: this._getFormattedTitleString(title),
+            title: this._getFormattedTitleString(titleKey),
             persistent: false,
             buttons: buttons,
             defaultButton: defaultButton,
@@ -146,7 +144,7 @@ var messageHandler = {
      * Shows a message to the user with two buttons: first is given as a
      * parameter and the second is Cancel.
      *
-     * @param titleString the title of the message
+     * @param titleKey the key for the title of the message
      * @param msgString the text of the message
      * @param persistent boolean value which determines whether the message is
      *        persistent or not
@@ -158,13 +156,13 @@ var messageHandler = {
      *        loaded
      * @param closeFunction function to be called on dialog close
      */
-    openDialog: function (titleString, msgString, persistent, buttons,
+    openDialog: function (titleKey, msgString, persistent, buttons,
                               submitFunction, loadedFunction, closeFunction) {
         if (!popupEnabled)
             return;
 
         let args = {
-            title: this._getFormattedTitleString(titleString),
+            title: this._getFormattedTitleString(titleKey),
             persistent: persistent,
             buttons: buttons,
             defaultButton: 1,
@@ -187,13 +185,12 @@ var messageHandler = {
      *
      * @return the title string formatted as a div.
      */
-    _getFormattedTitleString(titleString) {
+    _getFormattedTitleString(titleKey) {
         let $titleString = $('<h2>');
         $titleString.addClass('aui-dialog2-header-main');
-        $titleString.append(titleString);
-        titleString = $('<div>').append($titleString).html();
-
-        return titleString;
+        $titleString.attr('data-i18n',titleKey);
+        $titleString.append(APP.translation.translateString(titleKey));
+        return $('<div>').append($titleString).html();
     },
 
     /**
@@ -238,9 +235,9 @@ var messageHandler = {
 
         for (let state in statesObject) {
             let currentState = statesObject[state];
-            if(currentState.title) {
-                let title = currentState.title;
-                currentState.title = this._getFormattedTitleString(title);
+            if(currentState.titleKey) {
+                currentState.title
+                    = this._getFormattedTitleString(currentState.titleKey);
             }
         }
         return new Impromptu(statesObject, options);