fixup for i18n; avoid XSS

- fixup for PR#5256

frontend/src/components/dialog/change-repo-password-dialog.js

@@ -5,7 +5,6 @@ import { gettext, repoPasswordMinLength } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
-import StyledTitle from '../styled-title';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -100,7 +99,7 @@ class ChangeRepoPasswordDialog extends React.Component {
       <Modal isOpen={true} centered={true} style={{height: 'auto'}}>
         <ModalHeader toggle={toggleDialog}>
           <span>
-            {gettext("Change Password of Library")}{' '}<StyledTitle title={repoName} />
+            {Utils.generateDialogTitle(gettext('Change Password of Library {placeholder}'), repoName)}
           </span>
         </ModalHeader>
         <ModalBody>

frontend/src/components/dialog/lib-sub-folder-permission-dialog.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
-import StyledTitle from '../styled-title';
 import LibSubFolderSetUserPermissionDialog from './lib-sub-folder-set-user-permission-dialog';
 import LibSubFolderSetGroupPermissionDialog from './lib-sub-folder-set-group-permission-dialog';
 import '../../css/share-link-dialog.css';
@@ -65,28 +64,13 @@ class LibSubFolderPermissionDialog extends React.Component {
     );
   }
 
-  renderHeader = () => {
-    const { repoName, folderName } = this.props;
-    if (repoName) {
-      return (
-        <Fragment>
-          <StyledTitle title={repoName} />{gettext('Folder Permission')}
-        </Fragment>
-      );
-    }
-    return (
-      <Fragment>
-        {gettext('Set')}{' '}<StyledTitle title={folderName} />{gettext('permission')}
-      </Fragment>
-    );
-  }
-
   render() {
+    const { repoName, folderName } = this.props;
     return (
       <div>
         <Modal isOpen={true} style={{maxWidth: '980px'}} className="share-dialog" toggle={this.props.toggleDialog}>
           <ModalHeader toggle={this.props.toggleDialog}>
-            {this.renderHeader()}
+            <span>{repoName ? Utils.generateDialogTitle(gettext('{placeholder} Folder Permission'), repoName) : Utils.generateDialogTitle(gettext('Set {placeholder}\'s permission'), folderName)}</span>
           </ModalHeader>
           <ModalBody className="dialog-list-container share-dialog-content" role="tablist">
             {this.renderContent()}

frontend/src/components/dialog/transfer-dialog.js

@@ -8,7 +8,6 @@ import { gettext, isPro } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import UserSelect from '../user-select';
-import StyledTitle from '../styled-title/index.js';
 
 const propTypes = {
   itemName: PropTypes.string.isRequired,
@@ -69,7 +68,7 @@ class TransferDialog extends React.Component {
     return (
       <Modal isOpen={true}>
         <ModalHeader toggle={this.props.toggleDialog}>
-          {gettext('Transfer Library')}{' '}<StyledTitle title={itemName} />
+          <span>{gettext('Transfer Library {library_name}').replace('{library_name}', itemName)}</span>
         </ModalHeader>
         <ModalBody>
           {this.state.transferToUser ?

frontend/src/components/dialog/upload-remind-dialog.js

@@ -29,15 +29,11 @@ class UploadRemindDialog extends React.Component {
 
   render() {
     const { fileName } = this.props.currentResumableFile;
-    const titlePrefix = gettext('Replace file');
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle} >
-          <div>
-            <span>{titlePrefix}{' '}</span>
-            <span class="a-simulate">{fileName}?</span>
-          </div>
-          </ModalHeader>
+        <ModalHeader toggle={this.toggle}>
+          <span>{gettext('Replace file {filename}?').replace('{filename}', fileName)}</span>
+        </ModalHeader>
         <ModalBody>
           <p>{gettext('A file with the same name already exists in this folder.')}</p>
           <p>{gettext('Replacing it will overwrite its content.')}</p>