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,14 +29,10 @@ 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>
+          <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>

frontend/src/components/styled-title/index.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  title: PropTypes.string.isRequired,
-  className: PropTypes.string,
-};
-
-class StyledTitle extends React.Component {
-
-  static defaultProps = {
-    className: '',
-  }
-
-  render() {
-    const { title } = this.props;
-    const className = `op-target ellipsis ellipsis-op-target ${className}`
-    return (
-      <span className={className}>{title}{' '}</span>
-    );
-  }
-}
-
-StyledTitle.propTypes = propTypes;
-
-export default StyledTitle;

frontend/src/repo-folder-trash.js

@@ -10,7 +10,6 @@ import ModalPortal from './components/modal-portal';
 import toaster from './components/toast';
 import CommonToolbar from './components/toolbar/common-toolbar';
 import CleanTrash from './components/dialog/clean-trash';
-import StyledTitle from './components/styled-title';
 
 import './css/toolbar.css';
 import './css/search.css';
@@ -193,9 +192,7 @@ class RepoFolderTrash extends React.Component {
           <div className="flex-auto container-fluid pt-4 pb-6 o-auto">
             <div className="row">
               <div className="col-md-10 offset-md-1">
-                <h2>
-                  <StyledTitle title={repoFolderName} />{gettext('Trash')}
-                </h2>
+                <h2>{Utils.generateDialogTitle(gettext('{placeholder} Trash'), repoFolderName)}</h2>
                 <a href="#" className="go-back" title={gettext('Back')} onClick={this.goBack} role="button" role={gettext('Back')}>
                   <span className="fas fa-chevron-left"></span>
                 </a>

frontend/src/repo-history.js

@@ -11,7 +11,6 @@ import ModalPortal from './components/modal-portal';
 import CommonToolbar from './components/toolbar/common-toolbar';
 import CommitDetails from './components/dialog/commit-details';
 import UpdateRepoCommitLabels from './components/dialog/edit-repo-commit-labels';
-import StyledTitle from './components/styled-title';
 
 import './css/toolbar.css';
 import './css/search.css';
@@ -105,9 +104,7 @@ class RepoHistory extends React.Component {
           <div className="flex-auto container-fluid pt-4 pb-6 o-auto">
             <div className="row">
               <div className="col-md-10 offset-md-1">
-                <h2>
-                  <StyledTitle title={repoName} />{gettext('Modification History')}
-                </h2>
+                <h2>{Utils.generateDialogTitle(gettext('{placeholder} Modification History'), repoName)}</h2>
                 <a href="#" className="go-back" title={gettext('Back')} onClick={this.goBack} role="button" aria-label={gettext('Back')}>
                   <span className="fas fa-chevron-left"></span>
                 </a>

frontend/src/repo-snapshot.js

@@ -9,7 +9,6 @@ import ModalPortal from './components/modal-portal';
 import toaster from './components/toast';
 import CommonToolbar from './components/toolbar/common-toolbar';
 import ConfirmRestoreRepo from './components/dialog/confirm-restore-repo';
-import StyledTitle from './components/styled-title';
 
 import './css/toolbar.css';
 import './css/search.css';
@@ -141,8 +140,8 @@ class RepoSnapshot extends React.Component {
             <div className="row">
               <div className="col-md-10 offset-md-1">
                 <h2>
-                  <StyledTitle title={repoName} />{gettext('Snapshot')}{' '}
-                  <span class="heading-commit-time">(${commitTime})</span>
+                  <span>{Utils.generateDialogTitle(gettext('{placeholder} Snapshot'), repoName)}</span>
+                  <span className="heading-commit-time ml-1">({commitTime})</span>
                 </h2>
                 <a href="#" className="go-back" title={gettext('Back')} role="button" aria-label={gettext('Back')} onClick={this.goBack}>
                   <span className="fas fa-chevron-left"></span>

frontend/src/utils/utils.js

@@ -231,6 +231,18 @@ export const Utils = {
       .innerHTML;
   },
 
+  generateDialogTitle: function(title, operationTarget) {
+    /*
+     * @param title: gettext('...{placeholder}...')
+     */
+    /*
+    const targetStr = this.HTMLescape(operationTarget);
+    const str = `<span class="op-target ellipsis ellipsis-op-target" title=${targetStr}>${targetStr}</span>`;
+    return title.replace('{placeholder}', str);
+    */
+    return title.replace('{placeholder}', operationTarget);
+  },
+
   getFileName: function(filePath) {
     let lastIndex = filePath.lastIndexOf('/');
     return filePath.slice(lastIndex+1);