diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index 8a133b5b46..e952492cdd 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -50,6 +50,7 @@
     "no-irregular-whitespace": "warn",
     "no-console": "warn",
     "no-useless-escape": "warn",
+    "no-trailing-spaces": "warn",
     
     "react/jsx-indent": ["warn", 2],
     "react/prop-types": "warn",
diff --git a/frontend/src/app.js b/frontend/src/app.js
index a383815fba..37b51e0e60 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -93,7 +93,7 @@ class App extends Component {
     this.navigateClientUrlToLib();
 
     // e.g.  from http://127.0.0.1:8000/drafts/reviews/
-    // get reviews  
+    // get reviews
     // TODO: need refactor later
     let href = window.location.href.split('/');
     if (isDocs) {
@@ -106,16 +106,16 @@ class App extends Component {
     editUtilities.listDrafts().then(res => {
       this.setState({
         draftCounts: res.data.draft_counts,
-        draftList: res.data.data, 
+        draftList: res.data.data,
         isLoadingDraft: false,
-      }); 
+      });
     });
   }
 
   updateDraftsList = (draft_id) => {
     this.setState({
       draftCounts: this.state.draftCounts - 1,
-      draftList: this.state.draftList.filter(draft => draft.id != draft_id), 
+      draftList: this.state.draftList.filter(draft => draft.id != draft_id),
     });
   }
 
@@ -176,7 +176,7 @@ class App extends Component {
     if (!Utils.isDesktop() && !this.state.isSidePanelClosed) {
       this.setState({ isSidePanelClosed: true });
     }
-  } 
+  }
 
   generatorPrefix = (tabName, groupID) => {
     let pathPrefix = [];
diff --git a/frontend/src/components/common/notice-item.js b/frontend/src/components/common/notice-item.js
index 303df029d3..384ebd9ee8 100644
--- a/frontend/src/components/common/notice-item.js
+++ b/frontend/src/components/common/notice-item.js
@@ -32,7 +32,7 @@ class NoticeItem extends React.Component {
       let avatar_url = detail.group_staff_avatar_url;
 
       let groupStaff = detail.group_staff_name;
-      
+
       let userHref = siteRoot + 'profile/' + detail.group_staff_email + '/';
       let groupHref = siteRoot + 'group/' + detail.group_id + '/';
       let groupName = detail.group_name;
@@ -80,7 +80,7 @@ class NoticeItem extends React.Component {
       let repoUrl = siteRoot + 'library/' + detail.repo_id + '/' + repoName + '/';
 
       let groupUrl = siteRoot + 'group/' + detail.group_id + '/';
-      let groupName = detail.group_name; 
+      let groupName = detail.group_name;
 
       let path = detail.path;
       let notice = '';
@@ -150,7 +150,7 @@ class NoticeItem extends React.Component {
       notice = notice.replace('{author}', author);
       return {avatar_url, notice};
     }
-    
+
     if (noticeType === MSG_TYPE_DRAFT_COMMENT) {
 
       let avatar_url = detail.author_avatar_url;
@@ -166,7 +166,7 @@ class NoticeItem extends React.Component {
       notice = notice.replace('{author}', author);
       return {avatar_url, notice};
     }
-    
+
     if (noticeType === MSG_TYPE_DRAFT_REVIEWER) {
 
       let avatar_url = detail.request_user_avatat_url;
@@ -182,11 +182,11 @@ class NoticeItem extends React.Component {
       notice = notice.replace('{draft_link}', draftLink);
       return {avatar_url, notice};
     }
-    
+
     // if (noticeType === MSG_TYPE_GUEST_INVITATION_ACCEPTED) {
-      
+
     // }
-    
+
     return {avatar_url : null, notice : null};
   }
 
diff --git a/frontend/src/components/common/notification.js b/frontend/src/components/common/notification.js
index 67b1b86786..d6f28c3e55 100644
--- a/frontend/src/components/common/notification.js
+++ b/frontend/src/components/common/notification.js
@@ -42,7 +42,7 @@ class Notification extends React.Component {
     });
   }
 
-  onNoticeItemClick = (noticeItem) => {    
+  onNoticeItemClick = (noticeItem) => {
     let noticeList = this.state.noticeList.map(item => {
       if (item.id === noticeItem.id) {
         item.seen = true;
@@ -53,9 +53,9 @@ class Notification extends React.Component {
     let unseenCount = this.state.unseenCount === 0 ? 0 : this.state.unseenCount - 1;
     this.setState({
       noticeList: noticeList,
-      unseenCount: unseenCount, 
+      unseenCount: unseenCount,
     });
-    
+
   }
 
   render() {
diff --git a/frontend/src/components/context-menu/context-menu.js b/frontend/src/components/context-menu/context-menu.js
index c89e88a4da..f6df6d97f3 100644
--- a/frontend/src/components/context-menu/context-menu.js
+++ b/frontend/src/components/context-menu/context-menu.js
@@ -69,7 +69,7 @@ class ContextMenu extends React.Component {
     document.addEventListener('contextmenu', this.handleHide);
     document.addEventListener('keydown', this.handleKeyNavigation);
     window.addEventListener('resize', this.handleHide);
-  } 
+  }
 
   unregisterHandlers = () => {
     document.removeEventListener('mousedown', this.handleOutsideClick);
@@ -90,7 +90,7 @@ class ContextMenu extends React.Component {
     this.registerHandlers();
     callIfExists(this.props.onShowMenu, e);
   }
-  
+
   handleHide = (e) => {
     if (this.state.isVisible && (!e.detail || !e.detail.id || e.detail.id === this.props.id)) {
       this.unregisterHandlers();
@@ -155,7 +155,7 @@ class ContextMenu extends React.Component {
     }
 
     return menuStyles;
-  } 
+  }
 
   getRTLMenuPosition = (x = 0, y = 0) => {
     let menuStyles = {
@@ -211,9 +211,9 @@ class ContextMenu extends React.Component {
             return <div key={index} className="seafile-divider dropdown-divider"></div>;
           } else {
             return (
-              <button 
-                key={index} 
-                className="seafile-contextmenu-item dropdown-item" 
+              <button
+                key={index}
+                className="seafile-contextmenu-item dropdown-item"
                 data-operation={menuItem.key}
                 onClick={this.onMenuItemClick}
                 onContextMenu={this.onContextMenu}
diff --git a/frontend/src/components/context-menu/globalEventListener.js b/frontend/src/components/context-menu/globalEventListener.js
index 98359ba3e1..b6aeba6423 100644
--- a/frontend/src/components/context-menu/globalEventListener.js
+++ b/frontend/src/components/context-menu/globalEventListener.js
@@ -2,7 +2,7 @@ import { MENU_SHOW, MENU_HIDE } from './actions';
 import { uniqueId, hasOwnProp, canUseDOM } from './helpers';
 
 class GlobalEventListener {
-    
+
   constructor() {
     this.callbacks = {};
 
diff --git a/frontend/src/components/copy-to-clipboard.js b/frontend/src/components/copy-to-clipboard.js
index 072ce3be25..8a60a1424d 100644
--- a/frontend/src/components/copy-to-clipboard.js
+++ b/frontend/src/components/copy-to-clipboard.js
@@ -11,7 +11,7 @@ function copy(text) {
     // 'a' is for 'copy a link to seafile markdown editor'
     mark = document.createElement('a');
     mark.textContent = text;
-    
+
     document.body.appendChild(mark);
 
     range.selectNode(mark);
diff --git a/frontend/src/components/cur-dir-path/dir-path.js b/frontend/src/components/cur-dir-path/dir-path.js
index a0030e73a7..7f7897c757 100644
--- a/frontend/src/components/cur-dir-path/dir-path.js
+++ b/frontend/src/components/cur-dir-path/dir-path.js
@@ -25,14 +25,14 @@ class DirPath extends React.Component {
   }
 
   onTabNavClick = (e, tabName, id) => {
-    if (window.uploader && 
-      window.uploader.isUploadProgressDialogShow && 
+    if (window.uploader &&
+      window.uploader.isUploadProgressDialogShow &&
       window.uploader.totalProgress !== 100) {
-        if (!window.confirm(gettext('A file is being uploaded. Are you sure you want to leave this page?'))) {
-          e.preventDefault();
-          return false;
-        }
-        window.uploader.isUploadProgressDialogShow = false;
+      if (!window.confirm(gettext('A file is being uploaded. Are you sure you want to leave this page?'))) {
+        e.preventDefault();
+        return false;
+      }
+      window.uploader.isUploadProgressDialogShow = false;
     }
     this.props.onTabNavClick(tabName, id);
   }
@@ -103,13 +103,13 @@ class DirPath extends React.Component {
           <a className="path-link" data-path="/" onClick={this.onPathClick}>{repoName}</a>
         }
         {pathElem}
-        {this.props.isViewFile && 
-          <InternalLinkDialog 
+        {this.props.isViewFile &&
+          <InternalLinkDialog
             repoID={this.props.repoID}
             path={this.props.currentPath}
           />
         }
-        {(this.props.isViewFile && fileTags.length !== 0) && 
+        {(this.props.isViewFile && fileTags.length !== 0) &&
           <span id='column-mode-file-tags' className="tag-list tag-list-stacked align-middle ml-1">
             {fileTags.map((fileTag, index) => {
               return (<span className="file-tag" key={fileTag.id} style={{zIndex: index, backgroundColor: fileTag.color}}></span>);
diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js
index 0f2385297f..c6002ea559 100644
--- a/frontend/src/components/cur-dir-path/dir-tool.js
+++ b/frontend/src/components/cur-dir-path/dir-tool.js
@@ -103,7 +103,7 @@ class DirTool extends React.Component {
                 <li className="toolbar-item"><a className="op-link sf2-icon-recycle" href={trashUrl} title={gettext('Trash')} aria-label={gettext('Trash')}></a></li>
                 <li className="toolbar-item"><a className="op-link sf2-icon-history" href={historyUrl} title={gettext('History')} aria-label={gettext('History')}></a></li>
               </ul>
-    
+
               {this.state.isRepoTagDialogShow && (
                 <ModalPortal>
                   <Modal isOpen={true}>
diff --git a/frontend/src/components/cur-dir-path/index.js b/frontend/src/components/cur-dir-path/index.js
index d43cb8d958..76d550b22e 100644
--- a/frontend/src/components/cur-dir-path/index.js
+++ b/frontend/src/components/cur-dir-path/index.js
@@ -38,7 +38,7 @@ class CurDirPath extends React.Component {
     const isDesktop = Utils.isDesktop();
     return (
       <Fragment>
-        <DirPath 
+        <DirPath
           repoName={this.props.repoName}
           pathPrefix={this.props.pathPrefix}
           currentPath={this.props.currentPath}
@@ -49,11 +49,11 @@ class CurDirPath extends React.Component {
           fileTags={this.props.fileTags}
         />
         {isDesktop &&
-        <DirTool 
+        <DirTool
           repoID={this.props.repoID}
-          repoName={this.props.repoName} 
+          repoName={this.props.repoName}
           permission={this.props.permission}
-          currentPath={this.props.currentPath} 
+          currentPath={this.props.currentPath}
           updateUsedRepoTags={this.props.updateUsedRepoTags}
           onDeleteRepoTag={this.props.onDeleteRepoTag}
         />}
diff --git a/frontend/src/components/date-and-time-picker.js b/frontend/src/components/date-and-time-picker.js
index dc37e0b41d..bf0ec833ac 100644
--- a/frontend/src/components/date-and-time-picker.js
+++ b/frontend/src/components/date-and-time-picker.js
@@ -90,7 +90,7 @@ class Picker extends React.Component {
           ({value}) => {
             return (
               <div>
-                <input 
+                <input
                   placeholder={FORMAT}
                   style={{ width: props.inputWidth || 250 }}
                   tabIndex="-1"
diff --git a/frontend/src/components/dialog/change-repo-password-dialog.js b/frontend/src/components/dialog/change-repo-password-dialog.js
index 940b84946e..3a3fc9cc53 100644
--- a/frontend/src/components/dialog/change-repo-password-dialog.js
+++ b/frontend/src/components/dialog/change-repo-password-dialog.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap'; 
+import { Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import { gettext, repoPasswordMinLength } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -76,7 +76,7 @@ class ChangeRepoPasswordDialog extends React.Component {
     }
 
     this.setState({
-      submitBtnDisabled: true  
+      submitBtnDisabled: true
     });
     seafileAPI.changeEncryptedRepoPassword(this.props.repoID, oldPassword, newPassword)
       .then(() => {
@@ -87,7 +87,7 @@ class ChangeRepoPasswordDialog extends React.Component {
         this.setState({
           errorMsg: errorMsg,
           submitBtnDisabled: false
-        }); 
+        });
       });
   }
 
diff --git a/frontend/src/components/dialog/clean-trash.js b/frontend/src/components/dialog/clean-trash.js
index 5b871aaf86..9fd6276eac 100644
--- a/frontend/src/components/dialog/clean-trash.js
+++ b/frontend/src/components/dialog/clean-trash.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import Select from 'react-select/lib/Creatable';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -39,7 +39,7 @@ class CleanTrash extends React.Component {
     const { repoID } = this.props;
 
     this.setState({
-      submitBtnDisabled: true 
+      submitBtnDisabled: true
     });
 
     seafileAPI.deleteRepoTrash(repoID, inputValue.value).then((res) => {
@@ -51,7 +51,7 @@ class CleanTrash extends React.Component {
       this.setState({
         formErrorMsg: errorMsg,
         submitBtnDisabled: false
-      }); 
+      });
     });
   }
 
diff --git a/frontend/src/components/dialog/commit-details.js b/frontend/src/components/dialog/commit-details.js
index 58f6a5d995..f6e7b0d143 100644
--- a/frontend/src/components/dialog/commit-details.js
+++ b/frontend/src/components/dialog/commit-details.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap'; 
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import moment from 'moment';
 import { gettext, fileServerRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -32,13 +32,13 @@ class CommitDetails extends React.Component {
         isLoading: false,
         errorMsg: '',
         commitDetails: res.data
-      }); 
+      });
     }).catch((error) => {
       let errorMsg = Utils.getErrorMsg(error);
       this.setState({
         isLoading: false,
         errorMsg: errorMsg
-      }); 
+      });
     });
   }
 
diff --git a/frontend/src/components/dialog/confirm-restore-repo.js b/frontend/src/components/dialog/confirm-restore-repo.js
index e20fe08da7..21ca621611 100644
--- a/frontend/src/components/dialog/confirm-restore-repo.js
+++ b/frontend/src/components/dialog/confirm-restore-repo.js
@@ -19,7 +19,7 @@ class ConfirmRestoreRepo extends Component {
 
   action = () => {
     this.setState({
-      btnDisabled: true 
+      btnDisabled: true
     });
     this.props.restoreRepo();
   }
diff --git a/frontend/src/components/dialog/copy-dirent-dialog.js b/frontend/src/components/dialog/copy-dirent-dialog.js
index 58f7831f41..1fc8b6cf41 100644
--- a/frontend/src/components/dialog/copy-dirent-dialog.js
+++ b/frontend/src/components/dialog/copy-dirent-dialog.js
@@ -48,7 +48,7 @@ class CopyDirent extends React.Component {
     let { repoID } = this.props;
     let { repo, selectedPath } = this.state;
     let message = gettext('Invalid destination path');
-    
+
     if (!repo || selectedPath === '') {
       this.setState({errMessage: message});
       return;
@@ -60,7 +60,7 @@ class CopyDirent extends React.Component {
       let path = Utils.joinPath(this.props.path, dirent.name);
       direntPaths.push(path);
     });
-    
+
     // copy dirents to one of them. eg: A/B, A/C -> A/B
     if (direntPaths.some(direntPath => { return direntPath === selectedPath;})) {
       this.setState({errMessage: message});
@@ -84,13 +84,13 @@ class CopyDirent extends React.Component {
       this.setState({errMessage: message});
       return;
     }
-    
+
     this.props.onItemsCopy(repo, selectedPath);
     this.toggle();
   }
 
   copyItem = () => {
-    let { repo, repoID, selectedPath } = this.state; 
+    let { repo, repoID, selectedPath } = this.state;
     let direntPath = Utils.joinPath(this.props.path, this.props.dirent.name);
     let message = 'Invalid destination path';
 
@@ -104,13 +104,13 @@ class CopyDirent extends React.Component {
       this.setState({errMessage: message});
       return;
     }
-    
+
     // copy the dirent to current path
     if (selectedPath && this.props.path === selectedPath && repo.repo_id === repoID) {
       this.setState({errMessage: message});
       return;
     }
-    
+
     // copy the dirent to it's child. eg: A/B -> A/B/C
     if ( selectedPath && selectedPath.length > direntPath.length && selectedPath.indexOf(direntPath) > -1) {
       message = gettext('Can not copy directory %(src)s to its subdirectory %(des)s');
@@ -156,7 +156,7 @@ class CopyDirent extends React.Component {
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>
         <ModalBody>
-          <FileChooser 
+          <FileChooser
             repoID={this.props.repoID}
             onDirentItemClick={this.onDirentItemClick}
             onRepoItemClick={this.onRepoItemClick}
diff --git a/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js b/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
index 97c0b950db..e35199635b 100644
--- a/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
+++ b/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
@@ -27,12 +27,12 @@ class CopyMoveDirentProgressDialog extends React.Component {
         <ModalHeader toggle={this.props.toggleDialog}>{title}</ModalHeader>
         <ModalBody style={{minHeight: '80px'}}>
           <div className="progress" style={{height: '40px'}}>
-            <div 
-              className="progress-bar pl-2" 
-              role="progressbar" 
+            <div
+              className="progress-bar pl-2"
+              role="progressbar"
               style={progressStyle}
-              aria-valuenow={asyncOperationProgress} 
-              aria-valuemin="0" 
+              aria-valuenow={asyncOperationProgress}
+              aria-valuemin="0"
               aria-valuemax="100"
             >
               {asyncOperationProgress + '%'}
diff --git a/frontend/src/components/dialog/create-department-repo-dialog.js b/frontend/src/components/dialog/create-department-repo-dialog.js
index c569fb07aa..fa1c364e96 100644
--- a/frontend/src/components/dialog/create-department-repo-dialog.js
+++ b/frontend/src/components/dialog/create-department-repo-dialog.js
@@ -27,7 +27,7 @@ class CreateDepartmentRepoDialog extends React.Component {
     }
 
     this.setState({
-      repoName: e.target.value, 
+      repoName: e.target.value,
     });
   }
 
@@ -37,7 +37,7 @@ class CreateDepartmentRepoDialog extends React.Component {
       let repo = this.createRepo(this.state.repoName);
       this.props.onCreateRepo(repo, 'department');
     }
-  } 
+  }
 
   handleKeyPress = (e) => {
     if (e.key === 'Enter') {
@@ -84,11 +84,11 @@ class CreateDepartmentRepoDialog extends React.Component {
           <Form>
             <FormGroup>
               <Label for="repo-name">{gettext('Name')}</Label>
-              <Input 
-                id="repo-name" 
-                onKeyPress={this.handleKeyPress} 
-                innerRef={input => {this.newInput = input;}} 
-                value={this.state.repoName} 
+              <Input
+                id="repo-name"
+                onKeyPress={this.handleKeyPress}
+                innerRef={input => {this.newInput = input;}}
+                value={this.state.repoName}
                 onChange={this.handleChange}
                 maxLength={maxFileName}
               />
diff --git a/frontend/src/components/dialog/create-file-dialog.js b/frontend/src/components/dialog/create-file-dialog.js
index a1a9ac545b..83b073a0c5 100644
--- a/frontend/src/components/dialog/create-file-dialog.js
+++ b/frontend/src/components/dialog/create-file-dialog.js
@@ -44,7 +44,7 @@ class CreateFile extends React.Component {
     }
 
     this.setState({
-      childName: e.target.value, 
+      childName: e.target.value,
     }) ;
   }
 
@@ -55,7 +55,7 @@ class CreateFile extends React.Component {
 
     let isDuplicated = this.checkDuplicatedName();
     let newName = this.state.childName;
-    
+
     if (isDuplicated) {
       let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
       errMessage = errMessage.replace('{name}', Utils.HTMLescape(newName));
@@ -65,7 +65,7 @@ class CreateFile extends React.Component {
       let isDraft = this.state.isDraft;
       this.props.onAddFile(path, isDraft);
     }
-  } 
+  }
 
   handleKeyPress = (e) => {
     if (e.key === 'Enter') {
@@ -76,7 +76,7 @@ class CreateFile extends React.Component {
 
   handleCheck = () => {
     let pos = this.state.childName.lastIndexOf('.');
-    
+
     if (this.state.isDraft) {
       // from draft to not draft
       // case 1, normally, the file name is ended with `(draft)`, like `test(draft).md`
@@ -87,7 +87,7 @@ class CreateFile extends React.Component {
       if (p === '(draft)') {
         // remove `(draft)` from file name
         this.setState({
-          childName: fileName + fileType, 
+          childName: fileName + fileType,
           isDraft: !this.state.isDraft
         });
       } else {
@@ -97,7 +97,7 @@ class CreateFile extends React.Component {
         });
       }
     }
-    
+
     if (!this.state.isDraft) {
       // from not draft to draft
       // case 1, test.md  ===> test(draft).md
@@ -112,14 +112,14 @@ class CreateFile extends React.Component {
         });
       } else if (pos === 0 ) {
         this.setState({
-          childName: '(draft)' + this.state.childName, 
+          childName: '(draft)' + this.state.childName,
           isDraft: !this.state.isdraft
         });
       } else {
         this.setState({
           isDraft: !this.state.isdraft
         });
-      } 
+      }
     }
   }
 
@@ -140,11 +140,11 @@ class CreateFile extends React.Component {
           <Form>
             <FormGroup>
               <Label for="fileName">{gettext('Name')}</Label>
-              <Input 
-                id="fileName" 
-                onKeyPress={this.handleKeyPress} 
-                innerRef={input => {this.newInput = input;}} 
-                value={this.state.childName} 
+              <Input
+                id="fileName"
+                onKeyPress={this.handleKeyPress}
+                innerRef={input => {this.newInput = input;}}
+                value={this.state.childName}
                 onChange={this.handleChange}
               />
             </FormGroup>
diff --git a/frontend/src/components/dialog/create-folder-dialog.js b/frontend/src/components/dialog/create-folder-dialog.js
index 6716563768..751f3dcf4d 100644
--- a/frontend/src/components/dialog/create-folder-dialog.js
+++ b/frontend/src/components/dialog/create-folder-dialog.js
@@ -61,7 +61,7 @@ class CreateForder extends React.Component {
       let path = this.state.parentPath + newName;
       this.props.onAddFolder(path);
     }
-  } 
+  }
 
   handleKeyPress = (e) => {
     if (e.key === 'Enter') {
@@ -87,11 +87,11 @@ class CreateForder extends React.Component {
           <Form>
             <FormGroup>
               <Label for="folderName">{gettext('Name')}</Label>
-              <Input 
-                id="folderName" 
-                value={this.state.childName} 
-                innerRef={input => {this.newInput = input;}} 
-                onKeyPress={this.handleKeyPress} 
+              <Input
+                id="folderName"
+                value={this.state.childName}
+                innerRef={input => {this.newInput = input;}}
+                onKeyPress={this.handleKeyPress}
                 onChange={this.handleChange}
               />
             </FormGroup>
diff --git a/frontend/src/components/dialog/create-repo-dialog.js b/frontend/src/components/dialog/create-repo-dialog.js
index 485084a811..4951833640 100644
--- a/frontend/src/components/dialog/create-repo-dialog.js
+++ b/frontend/src/components/dialog/create-repo-dialog.js
@@ -55,7 +55,7 @@ class CreateRepoDialog extends React.Component {
       }
       this.props.onCreateRepo(repoData);
     }
-  } 
+  }
 
   handleKeyPress = (e) => {
     if (e.key === 'Enter') {
@@ -156,7 +156,7 @@ class CreateRepoDialog extends React.Component {
         passwd: password,
       };
     }
-  
+
     const storage_id = this.state.storage_id;
     if (storage_id) {
       repo.storage_id = storage_id;
@@ -173,11 +173,11 @@ class CreateRepoDialog extends React.Component {
           <Form>
             <FormGroup>
               <Label for="repoName">{gettext('Name')}</Label>
-              <Input 
+              <Input
                 id="repoName"
-                onKeyPress={this.handleKeyPress} 
-                innerRef={input => {this.newInput = input;}} 
-                value={this.state.repoName} 
+                onKeyPress={this.handleKeyPress}
+                innerRef={input => {this.newInput = input;}}
+                value={this.state.repoName}
                 onChange={this.handleRepoNameChange}
               />
             </FormGroup>
@@ -189,7 +189,7 @@ class CreateRepoDialog extends React.Component {
                   defaultValue={{value: storages[0].id, label: storages[0].name}}
                   options={storages.map((item, index) => { return {value: item.id, label: item.name}; })}
                   onChange={this.handleStorageInputChange}
-                /> 
+                />
               </FormGroup>
             )}
             {this.props.libraryType === 'group' && (
@@ -207,28 +207,28 @@ class CreateRepoDialog extends React.Component {
                   <Input type="checkbox" id="encrypt" onChange={this.onEncrypted} />
                   <Label for="encrypt">{gettext('Encrypt')}</Label>
                 </FormGroup>
-                {!this.state.disabled && 
+                {!this.state.disabled &&
                   <FormGroup>
                     {/* todo translate */}
                     <Label for="passwd1">{gettext('Password')}</Label><span className="tip">{' '}{gettext('(at least {placeholder} characters)').replace('{placeholder}', repoPasswordMinLength)}</span>
-                    <Input 
-                      id="passwd1" 
+                    <Input
+                      id="passwd1"
                       type="password"
                       disabled={this.state.disabled}
-                      value={this.state.password1} 
+                      value={this.state.password1}
                       onChange={this.handlePassword1Change}
                       autoComplete="new-password"
                     />
                   </FormGroup>
                 }
-                {!this.state.disabled && 
+                {!this.state.disabled &&
                   <FormGroup>
                     <Label for="passwd2">{gettext('Password again')}</Label>
-                    <Input 
+                    <Input
                       id="passwd2"
                       type="password"
                       disabled={this.state.disabled}
-                      value={this.state.password2} 
+                      value={this.state.password2}
                       onChange={this.handlePassword2Change}
                       autoComplete="new-password"
                     />
diff --git a/frontend/src/components/dialog/delete-dialog.js b/frontend/src/components/dialog/delete-dialog.js
index 1106331b25..5734d63902 100644
--- a/frontend/src/components/dialog/delete-dialog.js
+++ b/frontend/src/components/dialog/delete-dialog.js
@@ -14,7 +14,7 @@ class Delete extends React.Component {
   toggle = () => {
     this.props.toggleCancel();
   }
-  
+
   render() {
     let currentNode = this.props.currentNode;
     let name = currentNode.object.name;
diff --git a/frontend/src/components/dialog/edit-filetag-dialog.js b/frontend/src/components/dialog/edit-filetag-dialog.js
index ddcae799e3..73874c4c52 100644
--- a/frontend/src/components/dialog/edit-filetag-dialog.js
+++ b/frontend/src/components/dialog/edit-filetag-dialog.js
@@ -67,7 +67,7 @@ class TagItem extends React.Component {
           fileTag = fileTagList[i];
           break;
         }
-      } 
+      }
       seafileAPI.deleteFileTag(repoID, fileTag.id).then(() => {
         repoTagIdList = this.getRepoTagIdList();
         this.props.onFileTagChanged();
diff --git a/frontend/src/components/dialog/edit-repo-commit-labels.js b/frontend/src/components/dialog/edit-repo-commit-labels.js
index 08fdeea7de..72eebe56a5 100644
--- a/frontend/src/components/dialog/edit-repo-commit-labels.js
+++ b/frontend/src/components/dialog/edit-repo-commit-labels.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import CreatableSelect from 'react-select/lib/Creatable';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -20,7 +20,7 @@ class UpdateRepoCommitLabels extends React.Component {
     super(props);
     this.state = {
       inputValue: this.props.commitLabels.map((item, index) => {
-        return {label: item, value: item}; 
+        return {label: item, value: item};
       }),
       submitBtnDisabled: false
     };
@@ -38,7 +38,7 @@ class UpdateRepoCommitLabels extends React.Component {
     const {repoID, commitID} = this.props;
 
     this.setState({
-      submitBtnDisabled: true 
+      submitBtnDisabled: true
     });
 
     seafileAPI.updateRepoCommitLabels(repoID, commitID, labels).then((res) => {
@@ -50,7 +50,7 @@ class UpdateRepoCommitLabels extends React.Component {
       this.setState({
         formErrorMsg: errorMsg,
         submitBtnDisabled: false
-      }); 
+      });
     });
   }
 
diff --git a/frontend/src/components/dialog/file-participant-dialog.js b/frontend/src/components/dialog/file-participant-dialog.js
index 90e83102a6..07f4e7e57d 100644
--- a/frontend/src/components/dialog/file-participant-dialog.js
+++ b/frontend/src/components/dialog/file-participant-dialog.js
@@ -97,7 +97,7 @@ class FileParticipantDialog extends Component {
           .replace('{email_placeholder}', item.email)
           .replace('{error_msg_placeholder}', item.error_msg);
         toaster.danger(msg, {duration: 3});
-      }); 
+      });
     }).catch(error => {
       toaster.danger(Utils.getErrorMsg(error));
     });
diff --git a/frontend/src/components/dialog/generate-share-link.js b/frontend/src/components/dialog/generate-share-link.js
index 58b9fd1aba..15df216fd2 100644
--- a/frontend/src/components/dialog/generate-share-link.js
+++ b/frontend/src/components/dialog/generate-share-link.js
@@ -34,7 +34,7 @@ class GenerateShareLink extends React.Component {
       expirationLimitTip = gettext('{minDays_placeholder} - {maxDays_placeholder} days')
         .replace('{minDays_placeholder}', shareLinkExpireDaysMin)
         .replace('{maxDays_placeholder}', shareLinkExpireDaysMax);
-    } else if (shareLinkExpireDaysMin !== 0 && shareLinkExpireDaysMax === 0) { 
+    } else if (shareLinkExpireDaysMin !== 0 && shareLinkExpireDaysMax === 0) {
       expirationLimitTip = gettext('Greater than or equal to {minDays_placeholder} days')
         .replace('{minDays_placeholder}', shareLinkExpireDaysMin);
     } else if (shareLinkExpireDaysMin === 0 && shareLinkExpireDaysMax !== 0) {
@@ -133,7 +133,7 @@ class GenerateShareLink extends React.Component {
     const endDay = moment().add(shareLinkExpireDaysMax, 'days');
     if (shareLinkExpireDaysMin !== 0 && shareLinkExpireDaysMax !== 0) {
       return current.isBefore(startDay, 'day') || current.isAfter(endDay, 'day');
-    } else if (shareLinkExpireDaysMin !== 0 && shareLinkExpireDaysMax === 0) { 
+    } else if (shareLinkExpireDaysMin !== 0 && shareLinkExpireDaysMax === 0) {
       return current.isBefore(startDay, 'day');
     } else if (shareLinkExpireDaysMin === 0 && shareLinkExpireDaysMax !== 0) {
       return current.isBefore(moment(), 'day') || current.isAfter(endDay, 'day');
@@ -194,7 +194,7 @@ class GenerateShareLink extends React.Component {
         const permissionDetails = Utils.getShareLinkPermissionObject(this.state.currentPermission).permissionDetails;
         permissions = JSON.stringify(permissionDetails);
       }
-      let expirationTime = ''; 
+      let expirationTime = '';
       if (isExpireChecked) {
         if (setExp == 'by-days') {
           expirationTime = moment().add(parseInt(expireDays), 'days').format();
@@ -469,7 +469,7 @@ class GenerateShareLink extends React.Component {
             <Label check>
               {this.isExpireDaysNoLimit ? (
                 <Input type="checkbox" onChange={this.onExpireChecked} />
-              ) : ( 
+              ) : (
                 <Input type="checkbox" checked readOnly disabled />
               )}
               <span>{gettext('Add auto expiration')}</span>
diff --git a/frontend/src/components/dialog/generate-upload-link.js b/frontend/src/components/dialog/generate-upload-link.js
index 8bf0689b87..0a91826aa0 100644
--- a/frontend/src/components/dialog/generate-upload-link.js
+++ b/frontend/src/components/dialog/generate-upload-link.js
@@ -60,7 +60,7 @@ class GenerateUploadLink extends React.Component {
 
   getUploadLink = () => {
     let path = this.props.itemPath;
-    let repoID = this.props.repoID; 
+    let repoID = this.props.repoID;
     seafileAPI.getUploadLink(repoID, path).then((res) => {
       if (res.data.length !== 0) {
         let sharedUploadInfo = new UploadLink(res.data[0]);
@@ -129,7 +129,7 @@ class GenerateUploadLink extends React.Component {
 
       seafileAPI.createUploadLink(repoID, itemPath, password, expirationTime).then((res) => {
         let sharedUploadInfo = new UploadLink(res.data);
-        this.setState({sharedUploadInfo: sharedUploadInfo}); 
+        this.setState({sharedUploadInfo: sharedUploadInfo});
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
@@ -318,11 +318,11 @@ class GenerateUploadLink extends React.Component {
         </FormGroup>
         <FormGroup check>
           <Label check>
-              {this.isExpireDaysNoLimit ? (
-                <Input type="checkbox" onChange={this.onExpireChecked} />
-              ) : (
-                <Input type="checkbox" checked readOnly disabled />
-              )}
+            {this.isExpireDaysNoLimit ? (
+              <Input type="checkbox" onChange={this.onExpireChecked} />
+            ) : (
+              <Input type="checkbox" checked readOnly disabled />
+            )}
             <span>{gettext('Add auto expiration')}</span>
           </Label>
           {this.state.isExpireChecked &&
diff --git a/frontend/src/components/dialog/insert-repo-image-dialog.js b/frontend/src/components/dialog/insert-repo-image-dialog.js
index 7bc1f3619a..afe425cb7c 100644
--- a/frontend/src/components/dialog/insert-repo-image-dialog.js
+++ b/frontend/src/components/dialog/insert-repo-image-dialog.js
@@ -68,7 +68,7 @@ class InsertRepoImageDialog extends React.Component {
               />
             </div>
             <div className="insert-image-container col-6">
-              {imageUrl ? 
+              {imageUrl ?
                 <img src={imageUrl} className='d-inline-block mh-100 mw-100' alt=''/> :
                 <span>{gettext('No preview')}</span>
               }
diff --git a/frontend/src/components/dialog/invite-people-dialog.js b/frontend/src/components/dialog/invite-people-dialog.js
index da89ab9335..cd2ca724b1 100644
--- a/frontend/src/components/dialog/invite-people-dialog.js
+++ b/frontend/src/components/dialog/invite-people-dialog.js
@@ -52,7 +52,7 @@ class InvitePeopleDialog extends React.Component {
     }
 
     let emailsArray = [];
-    emails = emails.split(',');  
+    emails = emails.split(',');
     for (let i = 0, len = emails.length; i < len; i++) {
       let email = emails[i].trim();
       if (email) {
diff --git a/frontend/src/components/dialog/label-repo-state-dialog.js b/frontend/src/components/dialog/label-repo-state-dialog.js
index 746f95b266..bcc243b71e 100644
--- a/frontend/src/components/dialog/label-repo-state-dialog.js
+++ b/frontend/src/components/dialog/label-repo-state-dialog.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import CreatableSelect from 'react-select/lib/Creatable';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -29,15 +29,15 @@ class LabelRepoStateDialog extends React.Component {
     seafileAPI.getAllRepoSnapshotLabels().then((res) => {
       this.setState({
         isLoading: false,
-        existingLabels: res.data, 
+        existingLabels: res.data,
         errorMsg: ''
-      }); 
+      });
     }).catch((error) => {
       let errorMsg = Utils.getErrorMsg(error);
       this.setState({
         isLoading: false,
         errorMsg: errorMsg
-      }); 
+      });
     });
   }
 
@@ -58,7 +58,7 @@ class LabelRepoStateDialog extends React.Component {
     }
 
     this.setState({
-      submitBtnDisabled: true 
+      submitBtnDisabled: true
     });
 
     const {repoID, repoName} = this.props;
@@ -72,7 +72,7 @@ class LabelRepoStateDialog extends React.Component {
       this.setState({
         formErrorMsg: errorMsg,
         submitBtnDisabled: false
-      }); 
+      });
     });
   }
 
diff --git a/frontend/src/components/dialog/lib-decrypt-dialog.js b/frontend/src/components/dialog/lib-decrypt-dialog.js
index 156fbec29b..6013cc6028 100644
--- a/frontend/src/components/dialog/lib-decrypt-dialog.js
+++ b/frontend/src/components/dialog/lib-decrypt-dialog.js
@@ -33,7 +33,7 @@ class LibDecryptDialog extends React.Component {
     });
 
     e.preventDefault();
-  } 
+  }
 
   handleKeyPress = (e) => {
     if (e.key == 'Enter') {
@@ -56,7 +56,7 @@ class LibDecryptDialog extends React.Component {
     return (
       <Modal isOpen={true}>
         <ModalBody>
-          <button type="button" className="close" onClick={this.toggle}><span aria-hidden="true">×</span></button> 
+          <button type="button" className="close" onClick={this.toggle}><span aria-hidden="true">×</span></button>
           <Form className="lib-decrypt-form text-center">
             <img src={`${mediaUrl}img/lock.png`} alt="" aria-hidden="true" />
             <p className="intro">{gettext('This library is password protected')}</p>
diff --git a/frontend/src/components/dialog/lib-history-setting-dialog.js b/frontend/src/components/dialog/lib-history-setting-dialog.js
index 0d86405ca5..4f4223051d 100644
--- a/frontend/src/components/dialog/lib-history-setting-dialog.js
+++ b/frontend/src/components/dialog/lib-history-setting-dialog.js
@@ -35,7 +35,7 @@ class LibHistorySetting extends React.Component {
         noHistory: res.data.keep_days === 0 ? true : false,
         autoHistory: res.data.keep_days > 0 ? true : false,
         disabled: res.data.keep_days > 0 ? false : true,
-        expireDays: res.data.keep_days > 0 ? res.data.keep_days : 30, 
+        expireDays: res.data.keep_days > 0 ? res.data.keep_days : 30,
       });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -51,7 +51,7 @@ class LibHistorySetting extends React.Component {
     let repoID = this.props.repoID;
     let reg = /^-?\d+$/;
     let flag = reg.test(days);
-    if (flag) {  
+    if (flag) {
       let message = gettext('Successfully set library history.');
       seafileAPI.setRepoHistoryLimit(repoID, days).then(res => {
         toaster.success(message);
@@ -94,7 +94,7 @@ class LibHistorySetting extends React.Component {
       });
     } else {
       this.setState({
-        disabled: false 
+        disabled: false
       });
     }
 
@@ -131,11 +131,11 @@ class LibHistorySetting extends React.Component {
             <FormGroup check>
               <Input type="radio" name="radio1" checked={this.state.autoHistory} disabled={!enableRepoHistorySetting} onChange={() =>{this.setLimitDays('autoHistory');}}/>{' '}
               <Label>{gettext('Only keep a period of history:')}</Label>
-              <Input 
-                type="text" 
-                className="expire-input" 
+              <Input
+                type="text"
+                className="expire-input"
                 value={this.state.expireDays}
-                onChange={this.onChange} 
+                onChange={this.onChange}
                 disabled={this.state.disabled}
                 onKeyDown={this.handleKeyPress}
               />{' '}
diff --git a/frontend/src/components/dialog/lib-old-files-auto-del-dialog.js b/frontend/src/components/dialog/lib-old-files-auto-del-dialog.js
index 689e63d964..cb48eef6c4 100644
--- a/frontend/src/components/dialog/lib-old-files-auto-del-dialog.js
+++ b/frontend/src/components/dialog/lib-old-files-auto-del-dialog.js
@@ -103,11 +103,11 @@ class LibOldFilesAutoDelDialog extends React.Component {
             <FormGroup check>
               <Input type="radio" name="radio1" checked={this.state.isAutoDel} onChange={() =>{this.updateRadioCheck('autoDel');}}/>{' '}
               <Label>{gettext('Automatically delete files that are not modified within certain days:')}</Label>
-              <Input 
-                type="text" 
-                className="expire-input" 
+              <Input
+                type="text"
+                className="expire-input"
                 value={this.state.autoDelDays}
-                onChange={this.onChange} 
+                onChange={this.onChange}
                 onKeyDown={this.handleKeyPress}
               />{' '}
               <Label><span>{gettext('days')}</span></Label>
diff --git a/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
index 542d521893..2c5b33c2e3 100644
--- a/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap'; 
+import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import LibSubFolderSetUserPermissionDialog from './lib-sub-folder-set-user-permission-dialog';
@@ -8,7 +8,7 @@ import LibSubFolderSetGroupPermissionDialog from './lib-sub-folder-set-group-per
 import '../../css/share-link-dialog.css';
 import '../../css/sub-folder-permission.css';
 
-const propTypes = { 
+const propTypes = {
   repoID: PropTypes.string.isRequired,
   repoName: PropTypes.string,
   isDepartmentRepo: PropTypes.bool,
@@ -33,7 +33,7 @@ class LibSubFolderPermissionDialog extends React.Component {
 
   renderContent = () => {
     let activeTab = this.state.activeTab;
-    
+
     return (
       <Fragment>
         <div className="share-dialog-side">
@@ -66,7 +66,7 @@ class LibSubFolderPermissionDialog extends React.Component {
 
   render() {
     const { repoName, folderName } = this.props;
-  
+
     return (
       <div>
         <Modal isOpen={true} style={{maxWidth: '980px'}} className="share-dialog" toggle={this.props.toggleDialog}>
diff --git a/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
index 37302e2531..a061283d11 100644
--- a/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
@@ -17,7 +17,7 @@ class GroupItem extends React.Component {
       isOperationShow: false
     };
   }
-  
+
   onMouseEnter = () => {
     this.setState({isOperationShow: true});
   }
@@ -49,7 +49,7 @@ class GroupItem extends React.Component {
           </td>
         }
         <td>
-          <SharePermissionEditor 
+          <SharePermissionEditor
             isTextMode={true}
             isEditIconShow={this.state.isOperationShow}
             currentPermission={item.permission}
@@ -60,7 +60,7 @@ class GroupItem extends React.Component {
         <td>
           <span
             className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
-            onClick={this.deleteGroupPermissionItem} 
+            onClick={this.deleteGroupPermissionItem}
             title={gettext('Delete')}
           >
           </span>
@@ -166,20 +166,20 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
         folderPath: ''
       });
     }).catch((error) => {
-      let errorMsg = ''; 
+      let errorMsg = '';
       if (error.response) {
         if (error.response.data && error.response.data['error_msg']) {
           errorMsg = error.response.data['error_msg'];
         } else {
           errorMsg = gettext('Error');
-        }   
+        }
       } else {
         errorMsg = gettext('Please check the network.');
-      }   
+      }
       this.setState({
         errorMsg: [errorMsg]
-      }); 
-    }); 
+      });
+    });
   }
 
   deleteGroupPermissionItem = (item) => {
@@ -188,7 +188,7 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
       seafileAPI.deleteGroupFolderPerm(item.repo_id, item.permission, item.folder_path, item.group_id);
     request.then(() => {
       this.setState({
-        groupPermissionItems: this.state.groupPermissionItems.filter(deletedItem => { return deletedItem != item; }) 
+        groupPermissionItems: this.state.groupPermissionItems.filter(deletedItem => { return deletedItem != item; })
       });
     });
   }
@@ -201,7 +201,7 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
       this.updateGroupPermission(item, permission);
     });
   }
-  
+
   updateGroupPermission = (item, permission) => {
     let groupID = item.group_id;
     let groupPermissionItems = this.state.groupPermissionItems.map(sharedItem => {
@@ -216,7 +216,7 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
 
   onSetSubFolder = (e) => {
     this.setState({
-      folderPath: e.target.value 
+      folderPath: e.target.value
     });
   }
 
@@ -230,7 +230,7 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
   toggleSubFolder = (repo, path, item) => {
     this.setState({
       folderPath: path,
-    }); 
+    });
   }
 
   handleSubmit = () => {
@@ -241,7 +241,7 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
 
   onRepoItemClick = () => {
     this.setState({
-      folderPath: '/' 
+      folderPath: '/'
     });
   }
 
@@ -251,7 +251,7 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
     if (this.state.showFileChooser) {
       return (
         <div>
-          <FileChooser repoID={this.props.repoID} 
+          <FileChooser repoID={this.props.repoID}
             mode={'only_current_library'}
             onDirentItemClick={this.toggleSubFolder}
             onRepoItemClick={this.onRepoItemClick}
@@ -302,7 +302,7 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
                 </td>
               }
               <td>
-                <SharePermissionEditor 
+                <SharePermissionEditor
                   isTextMode={false}
                   isEditIconShow={false}
                   currentPermission={this.state.permission}
@@ -314,7 +314,7 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
                 <Button onClick={this.addGroupFolderPerm}>{gettext('Submit')}</Button>
               </td>
             </tr>
-            {this.state.errorMsg.length > 0 &&                  
+            {this.state.errorMsg.length > 0 &&
               this.state.errorMsg.map((item, index) => {
                 let errMessage = item.group_id + ': ' + item.error_msg;
                 return (
@@ -322,7 +322,7 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
                     <td colSpan={3}><p className="error">{errMessage}</p></td>
                   </tr>
                 );
-              })                                                
+              })
             }
           </tbody>
         </table>
@@ -332,9 +332,9 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
             <tbody>
               {this.state.groupPermissionItems.map((item, index) => {
                 return (
-                  <GroupItem 
-                    key={index} 
-                    item={item} 
+                  <GroupItem
+                    key={index}
+                    item={item}
                     permissions={this.permissions}
                     deleteGroupPermissionItem={this.deleteGroupPermissionItem}
                     onChangeGroupPermission={this.onChangeGroupPermission}
diff --git a/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
index 08a6aabf5f..e0212fefc5 100644
--- a/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
@@ -16,7 +16,7 @@ class UserItem extends React.Component {
       isOperationShow: false
     };
   }
-  
+
   onMouseEnter = () => {
     this.setState({isOperationShow: true});
   }
@@ -29,7 +29,7 @@ class UserItem extends React.Component {
     let item = this.props.item;
     this.props.deleteUserFolderPermission(item);
   }
-  
+
   onChangeUserFolderPerm = (permission) => {
     let item = this.props.item;
     this.props.onChangeUserFolderPerm(item.repo_id, permission, item.folder_path, item.user_email);
@@ -49,7 +49,7 @@ class UserItem extends React.Component {
           </td>
         }
         <td>
-          <SharePermissionEditor 
+          <SharePermissionEditor
             isTextMode={true}
             isEditIconShow={this.state.isOperationShow}
             currentPermission={currentPermission}
@@ -60,7 +60,7 @@ class UserItem extends React.Component {
         <td>
           <span
             className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
-            onClick={this.deleteUserFolderPermission} 
+            onClick={this.deleteUserFolderPermission}
             title={gettext('Delete')}
           >
           </span>
@@ -123,7 +123,7 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
       return false;
     }
 
-    const users = selectedUsers.map((item, index) => item.email); 
+    const users = selectedUsers.map((item, index) => item.email);
 
     const request = this.props.isDepartmentRepo ?
       seafileAPI.addDepartmentRepoUserFolderPerm(this.props.repoID, this.state.permission, folderPath, users) :
@@ -144,21 +144,21 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
       });
       this.refs.userSelect.clearSelect();
     }).catch((error) => {
-      let errorMsg = ''; 
+      let errorMsg = '';
       if (error.response) {
         if (error.response.data && error.response.data['error_msg']) {
           errorMsg = error.response.data['error_msg'];
         } else {
           errorMsg = gettext('Error');
-        }   
+        }
       } else {
         errorMsg = gettext('Please check the network.');
-      }   
+      }
       this.setState({
         errorMsg: [errorMsg]
       });
-    }); 
-  } 
+    });
+  }
 
   deleteUserFolderPermItem = (item) => {
     const request = this.props.isDepartmentRepo ?
@@ -168,7 +168,7 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
       this.setState({
         userFolderPermItems: this.state.userFolderPermItems.filter(deletedItem => {
           return deletedItem != item;
-        }) 
+        })
       });
     });
   }
@@ -190,7 +190,7 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
 
   onSetSubFolder = (e) => {
     this.setState({
-      folderPath: e.target.value 
+      folderPath: e.target.value
     });
   }
 
@@ -204,7 +204,7 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
   toggleSubFolder = (repo, path, item) => {
     this.setState({
       folderPath: path,
-    }); 
+    });
   }
 
   handleFileChooserSubmit = () => {
@@ -215,7 +215,7 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
 
   onRepoItemClick = () => {
     this.setState({
-      folderPath: '/' 
+      folderPath: '/'
     });
   }
 
@@ -226,7 +226,7 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
     if (this.state.showFileChooser) {
       return (
         <div>
-          <FileChooser repoID={this.props.repoID} 
+          <FileChooser repoID={this.props.repoID}
             mode={'only_current_library'}
             onDirentItemClick={this.toggleSubFolder}
             onRepoItemClick={this.onRepoItemClick}
@@ -276,7 +276,7 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
                 </td>
               }
               <td>
-                <SharePermissionEditor 
+                <SharePermissionEditor
                   isTextMode={false}
                   isEditIconShow={false}
                   currentPermission={this.state.permission}
@@ -311,9 +311,9 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
             <tbody>
               {userFolderPermItems.map((item, index) => {
                 return (
-                  <UserItem 
-                    key={index} 
-                    item={item} 
+                  <UserItem
+                    key={index}
+                    item={item}
                     permissions={this.permissions}
                     deleteUserFolderPermission={this.deleteUserFolderPermItem}
                     onChangeUserFolderPerm={this.onChangeUserFolderPerm}
diff --git a/frontend/src/components/dialog/list-created-files-dialog.js b/frontend/src/components/dialog/list-created-files-dialog.js
index 52eee2cdcd..09965bed37 100644
--- a/frontend/src/components/dialog/list-created-files-dialog.js
+++ b/frontend/src/components/dialog/list-created-files-dialog.js
@@ -33,13 +33,13 @@ class ListCreatedFileDialog extends React.Component {
               {
                 activity.createdFilesList.map((item, index) => {
                   let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
-                  if (item.name.endsWith('(draft).md')) {                 
+                  if (item.name.endsWith('(draft).md')) {
                     fileURL = serviceURL + '/drafts/' + item.draft_id + '/';
-                  } 
+                  }
                   let fileLink = <a href={fileURL} target='_blank'>{item.name}</a>;
                   if (item.name.endsWith('(draft).md') && !item.draft_id) {
                     fileLink = item.name;
-                  }  
+                  }
                   return (
                     <tr key={index}>
                       <td>{fileLink}</td>
diff --git a/frontend/src/components/dialog/list-related-file-dialog.js b/frontend/src/components/dialog/list-related-file-dialog.js
index 179b53ca94..233ad9388c 100644
--- a/frontend/src/components/dialog/list-related-file-dialog.js
+++ b/frontend/src/components/dialog/list-related-file-dialog.js
@@ -118,7 +118,7 @@ const RelatedFilePropTypes = {
 };
 
 class RelatedFile extends React.Component {
-  
+
   constructor(props) {
     super(props);
     this.state = ({
diff --git a/frontend/src/components/dialog/list-repo-drafts-dialog.js b/frontend/src/components/dialog/list-repo-drafts-dialog.js
index 436451a546..18010317a6 100644
--- a/frontend/src/components/dialog/list-repo-drafts-dialog.js
+++ b/frontend/src/components/dialog/list-repo-drafts-dialog.js
@@ -23,15 +23,15 @@ class ListRepoDraftsDialog extends React.Component {
     };
   }
 
-  componentDidMount() { 
+  componentDidMount() {
     seafileAPI.listRepoDrafts(this.props.repoID).then(res => {
       let drafts = res.data.drafts.map(item => {
         let draft = new Draft(item);
         return draft;
       });
       this.setState({
-        drafts: drafts 
-      }); 
+        drafts: drafts
+      });
     });
   }
 
diff --git a/frontend/src/components/dialog/manage-members-dialog.js b/frontend/src/components/dialog/manage-members-dialog.js
index c52baddb9e..6608a83868 100644
--- a/frontend/src/components/dialog/manage-members-dialog.js
+++ b/frontend/src/components/dialog/manage-members-dialog.js
@@ -208,7 +208,7 @@ class Member extends React.PureComponent {
   translateRole = (role) => {
     if (role === 'Admin') {
       return gettext('Admin');
-    }  
+    }
     else if (role === 'Member') {
       return gettext('Member');
     }
@@ -225,11 +225,11 @@ class Member extends React.PureComponent {
         <th scope="row"><img className="avatar" src={item.avatar_url} alt=""/></th>
         <td>{item.name}</td>
         <td>
-          {((isOwner === false) || (isOwner === true && item.role === 'Owner')) && 
+          {((isOwner === false) || (isOwner === true && item.role === 'Owner')) &&
             <span className="group-admin">{this.translateRole(item.role)}</span>
           }
           {(isOwner === true && item.role !== 'Owner') &&
-            <RoleEditor 
+            <RoleEditor
               isTextMode={true}
               isEditIconShow={this.state.highlight}
               currentRole={item.role}
diff --git a/frontend/src/components/dialog/move-dirent-dialog.js b/frontend/src/components/dialog/move-dirent-dialog.js
index 4c7f0392f2..c1477ff61f 100644
--- a/frontend/src/components/dialog/move-dirent-dialog.js
+++ b/frontend/src/components/dialog/move-dirent-dialog.js
@@ -48,7 +48,7 @@ class MoveDirent extends React.Component {
     let { repoID } = this.props;
     let { repo, selectedPath } = this.state;
     let message = gettext('Invalid destination path');
-    
+
     if (!repo || selectedPath === '') {
       this.setState({errMessage: message});
       return;
@@ -60,7 +60,7 @@ class MoveDirent extends React.Component {
       let path = Utils.joinPath(this.props.path, dirent.name);
       direntPaths.push(path);
     });
-    
+
     // move dirents to one of them. eg: A/B, A/C -> A/B
     if (direntPaths.some(direntPath => { return direntPath === selectedPath;})) {
       this.setState({errMessage: message});
@@ -97,7 +97,7 @@ class MoveDirent extends React.Component {
 
   moveItem = () => {
     let { repoID } = this.props;
-    let { repo, selectedPath } = this.state; 
+    let { repo, selectedPath } = this.state;
     let direntPath = Utils.joinPath(this.props.path, this.props.dirent.name);
     let message = gettext('Invalid destination path');
 
@@ -105,19 +105,19 @@ class MoveDirent extends React.Component {
       this.setState({errMessage: message});
       return;
     }
-    
+
     // copy the dirent to itself. eg: A/B -> A/B
     if (selectedPath && direntPath === selectedPath) {
       this.setState({errMessage: message});
       return;
     }
-    
+
     // copy the dirent to current path
     if (selectedPath && this.props.path === selectedPath && repo.repo_id === repoID) {
       this.setState({errMessage: message});
       return;
     }
-    
+
     // copy the dirent to it's child. eg: A/B -> A/B/C
     if ( selectedPath && selectedPath.length > direntPath.length && selectedPath.indexOf(direntPath) > -1) {
       message = gettext('Can not move directory %(src)s to its subdirectory %(des)s');
@@ -163,7 +163,7 @@ class MoveDirent extends React.Component {
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>
         <ModalBody>
-          <FileChooser 
+          <FileChooser
             repoID={this.props.repoID}
             onDirentItemClick={this.onDirentItemClick}
             onRepoItemClick={this.onRepoItemClick}
diff --git a/frontend/src/components/dialog/new-wiki-dialog.js b/frontend/src/components/dialog/new-wiki-dialog.js
index 34ba8c55a9..573054ec54 100644
--- a/frontend/src/components/dialog/new-wiki-dialog.js
+++ b/frontend/src/components/dialog/new-wiki-dialog.js
@@ -41,7 +41,7 @@ class NewWikiDialog extends React.Component {
   handleKeyPress = (e) => {
     if (e.key === 'Enter') {
       this.handleSubmit();
-    } 
+    }
   }
 
   handleSubmit = () => {
diff --git a/frontend/src/components/dialog/op-menu.js b/frontend/src/components/dialog/op-menu.js
index 884ba20917..f19cbe839f 100644
--- a/frontend/src/components/dialog/op-menu.js
+++ b/frontend/src/components/dialog/op-menu.js
@@ -47,11 +47,11 @@ class OpMenu extends React.Component {
     const { operations, translateOperations } = this.props;
     return (
       <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-        <DropdownToggle 
+        <DropdownToggle
           tag="i"
           className="d-flex w-5 h-5 align-items-center justify-content-center sf-dropdown-toggle fa fa-ellipsis-v"
           title={gettext('More Operations')}
-          data-toggle="dropdown" 
+          data-toggle="dropdown"
           aria-expanded={this.state.isItemMenuShow}
         />
         <DropdownMenu className="my-1 mr-2">
diff --git a/frontend/src/components/dialog/org-add-admin-dialog.js b/frontend/src/components/dialog/org-add-admin-dialog.js
index 44dfaad80c..b8befdc5ec 100644
--- a/frontend/src/components/dialog/org-add-admin-dialog.js
+++ b/frontend/src/components/dialog/org-add-admin-dialog.js
@@ -45,7 +45,7 @@ class AddOrgAdminDialog extends React.Component {
 
   toggle = () => {
     this.props.toggle();
-  } 
+  }
 
   render() {
     return (
diff --git a/frontend/src/components/dialog/org-add-department-dialog.js b/frontend/src/components/dialog/org-add-department-dialog.js
index 5e111b4b83..29849b2513 100644
--- a/frontend/src/components/dialog/org-add-department-dialog.js
+++ b/frontend/src/components/dialog/org-add-department-dialog.js
@@ -57,7 +57,7 @@ class AddDepartDialog extends React.Component {
 
   handleChange = (e) => {
     this.setState({
-      departName: e.target.value, 
+      departName: e.target.value,
     });
   }
 
@@ -77,10 +77,10 @@ class AddDepartDialog extends React.Component {
           <Form>
             <FormGroup>
               <Label for="departName">{gettext('Name')}</Label>
-              <Input 
-                id="departName" 
-                onKeyPress={this.handleKeyPress} 
-                value={this.state.departName} 
+              <Input
+                id="departName"
+                onKeyPress={this.handleKeyPress}
+                value={this.state.departName}
                 onChange={this.handleChange}
                 innerRef={input => {this.newInput = input;}}
               />
diff --git a/frontend/src/components/dialog/org-add-repo-dialog.js b/frontend/src/components/dialog/org-add-repo-dialog.js
index ee9d9838f0..38ed1b03ac 100644
--- a/frontend/src/components/dialog/org-add-repo-dialog.js
+++ b/frontend/src/components/dialog/org-add-repo-dialog.js
@@ -72,10 +72,10 @@ class AddRepoDialog extends React.Component {
           <Form>
             <FormGroup>
               <Label for="repoName">{gettext('Name')}</Label>
-              <Input 
-                id="repoName" 
-                onKeyPress={this.handleKeyPress} 
-                value={this.state.repoName} 
+              <Input
+                id="repoName"
+                onKeyPress={this.handleKeyPress}
+                value={this.state.repoName}
                 onChange={this.handleChange}
                 innerRef={input => {this.newInput = input;}}
               />
diff --git a/frontend/src/components/dialog/org-add-user-dialog.js b/frontend/src/components/dialog/org-add-user-dialog.js
index d1940b2b34..bbdce0351d 100644
--- a/frontend/src/components/dialog/org-add-user-dialog.js
+++ b/frontend/src/components/dialog/org-add-user-dialog.js
@@ -32,7 +32,7 @@ class AddOrgUserDialog extends React.Component {
       this.setState({isAddingUser: true});
       this.props.handleSubmit(email, name.trim(), password);
     }
-  } 
+  }
 
   handleKeyPress = (e) => {
     e.preventDefault();
diff --git a/frontend/src/components/dialog/org-logs-file-update-detail.js b/frontend/src/components/dialog/org-logs-file-update-detail.js
index a272150932..b465a90543 100644
--- a/frontend/src/components/dialog/org-logs-file-update-detail.js
+++ b/frontend/src/components/dialog/org-logs-file-update-detail.js
@@ -50,7 +50,7 @@ class FileUpdateDetailDialog extends React.Component {
     for (var i = 0, len = items.length; i < len; i++) {
       con += '<li class="list-group-item">' + items[i] + '</li>';
     }
-    con += '</ul>'; 
+    con += '</ul>';
     return {__html: con};
   }
 
diff --git a/frontend/src/components/dialog/org-set-group-quota-dialog.js b/frontend/src/components/dialog/org-set-group-quota-dialog.js
index f7ec5821b4..6732a22e63 100644
--- a/frontend/src/components/dialog/org-set-group-quota-dialog.js
+++ b/frontend/src/components/dialog/org-set-group-quota-dialog.js
@@ -44,7 +44,7 @@ class SetGroupQuotaDialog extends React.Component {
     } else {
       const err = gettext('Quota is invalid.');
       this.setState({ errMessage: err });
-    } 
+    }
   }
 
   handleChange = (e) => {
@@ -66,8 +66,8 @@ class SetGroupQuotaDialog extends React.Component {
         <ModalBody>
           <InputGroup>
             <Input
-              onKeyPress={this.handleKeyPress} 
-              value={this.state.quota} 
+              onKeyPress={this.handleKeyPress}
+              value={this.state.quota}
               onChange={this.handleChange}
               innerRef={input => {this.newInput = input;}}
             />
diff --git a/frontend/src/components/dialog/perm-select.js b/frontend/src/components/dialog/perm-select.js
index 814410f873..0bc9c8950a 100644
--- a/frontend/src/components/dialog/perm-select.js
+++ b/frontend/src/components/dialog/perm-select.js
@@ -16,7 +16,7 @@ class PermSelect extends React.Component {
     super(props);
 
     this.state = {
-      currentOption: this.props.currentPerm 
+      currentOption: this.props.currentPerm
     };
   }
 
@@ -27,7 +27,7 @@ class PermSelect extends React.Component {
 
     const currentOption = e.target.value;
     this.setState({
-      currentOption: currentOption 
+      currentOption: currentOption
     });
 
     this.props.changePerm(currentOption);
diff --git a/frontend/src/components/dialog/readme-dialog.js b/frontend/src/components/dialog/readme-dialog.js
index ae953d11fc..567482e949 100644
--- a/frontend/src/components/dialog/readme-dialog.js
+++ b/frontend/src/components/dialog/readme-dialog.js
@@ -32,7 +32,7 @@ class ReadmeDialog extends React.Component {
         this.setState({
           readmeContent: res.data,
           isLoading: false,
-        }); 
+        });
       });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -47,7 +47,7 @@ class ReadmeDialog extends React.Component {
           <a className="readme-dialog-edit" href={this.props.href} target='_blank'><i className="fa fa-pencil-alt"></i></a>
         </ModalHeader>
         <ModalBody>
-          {this.state.isLoading ? 
+          {this.state.isLoading ?
             <Loading />:
             <MarkdownViewer markdownContent={this.state.readmeContent} showTOC={false}/>
           }
diff --git a/frontend/src/components/dialog/related-file-dialogs.js b/frontend/src/components/dialog/related-file-dialogs.js
index 684f0ca7e2..e18c60584d 100644
--- a/frontend/src/components/dialog/related-file-dialogs.js
+++ b/frontend/src/components/dialog/related-file-dialogs.js
@@ -40,7 +40,7 @@ class RelatedFileDialogs extends React.Component {
     return (
       <ModalPortal>
         <Modal isOpen={true} toggle={this.props.toggleCancel} size='lg' style={{width:'650px'}}>
-          {this.state.showListRelatedFileDialog && 
+          {this.state.showListRelatedFileDialog &&
             <ListRelatedFileDialog
               filePath={this.props.filePath}
               relatedFiles={this.props.relatedFiles}
@@ -50,7 +50,7 @@ class RelatedFileDialogs extends React.Component {
               onRelatedFileChange={this.props.onRelatedFileChange}
             />
           }
-          {!this.state.showListRelatedFileDialog && 
+          {!this.state.showListRelatedFileDialog &&
             <AddRelatedFileDialog
               filePath={this.props.filePath}
               repoID={this.props.repoID}
diff --git a/frontend/src/components/dialog/rename-dialog.js b/frontend/src/components/dialog/rename-dialog.js
index 55d13596d0..e1679f6cfc 100644
--- a/frontend/src/components/dialog/rename-dialog.js
+++ b/frontend/src/components/dialog/rename-dialog.js
@@ -42,7 +42,7 @@ class Rename extends React.Component {
   componentWillReceiveProps(nextProps) {
     this.changeState(nextProps.currentNode);
   }
-  
+
   handleChange = (e) => {
     if (!e.target.value.trim()) {
       this.setState({isSubmitBtnActive: false});
@@ -50,7 +50,7 @@ class Rename extends React.Component {
       this.setState({isSubmitBtnActive: true});
     }
 
-    this.setState({newName: e.target.value}); 
+    this.setState({newName: e.target.value});
   }
 
   handleSubmit = () => {
@@ -72,7 +72,7 @@ class Rename extends React.Component {
   handleKeyPress = (e) => {
     if (e.key === 'Enter') {
       this.handleSubmit();
-    } 
+    }
   }
 
   toggle = () => {
diff --git a/frontend/src/components/dialog/rename-dirent.js b/frontend/src/components/dialog/rename-dirent.js
index fb4b11799e..8e773fc803 100644
--- a/frontend/src/components/dialog/rename-dirent.js
+++ b/frontend/src/components/dialog/rename-dirent.js
@@ -43,7 +43,7 @@ class Rename extends React.Component {
   componentWillReceiveProps(nextProps) {
     this.changeState(nextProps.dirent);
   }
-  
+
   handleChange = (e) => {
     if (!e.target.value.trim()) {
       this.setState({isSubmitBtnActive: false});
@@ -51,7 +51,7 @@ class Rename extends React.Component {
       this.setState({isSubmitBtnActive: true});
     }
 
-    this.setState({newName: e.target.value}); 
+    this.setState({newName: e.target.value});
   }
 
   handleSubmit = () => {
@@ -74,7 +74,7 @@ class Rename extends React.Component {
   handleKeyPress = (e) => {
     if (e.key === 'Enter') {
       this.handleSubmit();
-    } 
+    }
   }
 
   toggle = () => {
diff --git a/frontend/src/components/dialog/repo-share-upload-links-dialog.js b/frontend/src/components/dialog/repo-share-upload-links-dialog.js
index 10591b1bd8..08a3b4ae35 100644
--- a/frontend/src/components/dialog/repo-share-upload-links-dialog.js
+++ b/frontend/src/components/dialog/repo-share-upload-links-dialog.js
@@ -112,7 +112,7 @@ class RepoShareUploadLinksDialog extends React.Component {
       this.setState({
         isLoading: false,
         errorMsg: Utils.getErrorMsg(error, true)
-      }); 
+      });
     });
   }
 
diff --git a/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js b/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js
index 5728968433..d903b0f3ff 100644
--- a/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js
+++ b/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js
@@ -49,15 +49,15 @@ class ResetEncryptedRepoPasswordDialog extends React.Component {
           {gettext('Reset library password')}
         </ModalHeader>
         <ModalBody>
-        {this.state.showLoading && (
-          <span>{gettext('Sending new password...')}</span>
-        )}
-        {this.state.showSuccess && (
-          <div dangerouslySetInnerHTML={{__html:message}} />
-        )}
-        {this.state.showError && (
-          <span className="err-message">{this.state.errMessage}</span>
-        )}
+          {this.state.showLoading && (
+            <span>{gettext('Sending new password...')}</span>
+          )}
+          {this.state.showSuccess && (
+            <div dangerouslySetInnerHTML={{__html:message}} />
+          )}
+          {this.state.showError && (
+            <span className="err-message">{this.state.errMessage}</span>
+          )}
         </ModalBody>
       </Modal>
     );
diff --git a/frontend/src/components/dialog/set-org-user-contact-email.js b/frontend/src/components/dialog/set-org-user-contact-email.js
index c8d62d4a21..f701ec7d56 100644
--- a/frontend/src/components/dialog/set-org-user-contact-email.js
+++ b/frontend/src/components/dialog/set-org-user-contact-email.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
@@ -25,7 +25,7 @@ class SetOrgUserContactEmail extends React.Component {
 
   handleInputChange = (e) => {
     this.setState({
-      inputValue: e.target.value 
+      inputValue: e.target.value
     });
   }
 
@@ -34,7 +34,7 @@ class SetOrgUserContactEmail extends React.Component {
     const contactEmail = this.state.inputValue.trim();
 
     this.setState({
-      submitBtnDisabled: true 
+      submitBtnDisabled: true
     });
 
     seafileAPI.orgAdminSetOrgUserContactEmail(orgID, email, contactEmail).then((res) => {
@@ -46,7 +46,7 @@ class SetOrgUserContactEmail extends React.Component {
       this.setState({
         formErrorMsg: errorMsg,
         submitBtnDisabled: false
-      }); 
+      });
     });
   }
 
diff --git a/frontend/src/components/dialog/set-org-user-name.js b/frontend/src/components/dialog/set-org-user-name.js
index d895c9ad59..ee818144e6 100644
--- a/frontend/src/components/dialog/set-org-user-name.js
+++ b/frontend/src/components/dialog/set-org-user-name.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
@@ -25,7 +25,7 @@ class SetOrgUserName extends React.Component {
 
   handleInputChange = (e) => {
     this.setState({
-      inputValue: e.target.value 
+      inputValue: e.target.value
     });
   }
 
@@ -34,7 +34,7 @@ class SetOrgUserName extends React.Component {
     const name = this.state.inputValue.trim();
 
     this.setState({
-      submitBtnDisabled: true 
+      submitBtnDisabled: true
     });
 
     // when name is '', api returns the previous name
@@ -48,7 +48,7 @@ class SetOrgUserName extends React.Component {
       this.setState({
         formErrorMsg: errorMsg,
         submitBtnDisabled: false
-      }); 
+      });
     });
   }
 
diff --git a/frontend/src/components/dialog/set-org-user-quota.js b/frontend/src/components/dialog/set-org-user-quota.js
index a8249d54a7..812ca2b6ec 100644
--- a/frontend/src/components/dialog/set-org-user-quota.js
+++ b/frontend/src/components/dialog/set-org-user-quota.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap'; 
+import { Modal, ModalHeader, ModalBody, ModalFooter, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
@@ -27,7 +27,7 @@ class SetOrgUserQuota extends React.Component {
 
   handleInputChange = (e) => {
     this.setState({
-      inputValue: e.target.value 
+      inputValue: e.target.value
     });
   }
 
@@ -43,7 +43,7 @@ class SetOrgUserQuota extends React.Component {
     }
 
     this.setState({
-      submitBtnDisabled: true 
+      submitBtnDisabled: true
     });
 
     seafileAPI.orgAdminSetOrgUserQuota(orgID, email, quota).then((res) => {
@@ -54,7 +54,7 @@ class SetOrgUserQuota extends React.Component {
       this.setState({
         formErrorMsg: errorMsg,
         submitBtnDisabled: false
-      }); 
+      });
     });
   }
 
diff --git a/frontend/src/components/dialog/share-link-permission-select.js b/frontend/src/components/dialog/share-link-permission-select.js
index 3855ee7e1a..fd9ecf23b7 100644
--- a/frontend/src/components/dialog/share-link-permission-select.js
+++ b/frontend/src/components/dialog/share-link-permission-select.js
@@ -16,7 +16,7 @@ class ShareLinkPermissionSelect extends React.Component {
     super(props);
 
     this.state = {
-      currentOption: this.props.currentPerm 
+      currentOption: this.props.currentPerm
     };
   }
 
@@ -27,7 +27,7 @@ class ShareLinkPermissionSelect extends React.Component {
 
     const currentOption = e.target.value;
     this.setState({
-      currentOption: currentOption 
+      currentOption: currentOption
     });
 
     this.props.changePerm(currentOption);
diff --git a/frontend/src/components/dialog/share-repo-dialog.js b/frontend/src/components/dialog/share-repo-dialog.js
index 03426f5555..fef606f5bf 100644
--- a/frontend/src/components/dialog/share-repo-dialog.js
+++ b/frontend/src/components/dialog/share-repo-dialog.js
@@ -133,9 +133,9 @@ class ShareRepoDialog extends React.Component {
             <tbody>
               {this.state.repoList.map((repo, index) => {
                 return (
-                  <ShareRepoListItem 
-                    key={index} 
-                    repo={repo} 
+                  <ShareRepoListItem
+                    key={index}
+                    repo={repo}
                     onRepoSelect={this.onRepoSelect}
                     onPermissionChange={this.onPermissionChange}
                   />
diff --git a/frontend/src/components/dialog/share-to-group.js b/frontend/src/components/dialog/share-to-group.js
index b4ba9f7216..097ada7d4e 100644
--- a/frontend/src/components/dialog/share-to-group.js
+++ b/frontend/src/components/dialog/share-to-group.js
@@ -16,7 +16,7 @@ class GroupItem extends React.Component {
       isOperationShow: false
     };
   }
-  
+
   onMouseEnter = () => {
     this.setState({isOperationShow: true});
   }
@@ -42,7 +42,7 @@ class GroupItem extends React.Component {
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className='name'>{item.group_info.name}</td>
         <td>
-          <SharePermissionEditor 
+          <SharePermissionEditor
             isTextMode={true}
             isEditIconShow={this.state.isOperationShow}
             currentPermission={currentPermission}
@@ -53,7 +53,7 @@ class GroupItem extends React.Component {
         <td>
           <span
             className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
-            onClick={this.deleteShareItem} 
+            onClick={this.deleteShareItem}
             title={gettext('Delete')}
           >
           </span>
@@ -71,9 +71,9 @@ class GroupList extends React.Component {
       <tbody>
         {items.map((item, index) => {
           return (
-            <GroupItem 
-              key={index} 
-              item={item} 
+            <GroupItem
+              key={index}
+              item={item}
               permissions={this.props.permissions}
               deleteShareItem={this.props.deleteShareItem}
               onChangeUserPermission={this.props.onChangeUserPermission}
@@ -150,7 +150,7 @@ class ShareToGroup extends React.Component {
 
   listSharedGroups = () => {
     let path = this.props.itemPath;
-    let repoID = this.props.repoID; 
+    let repoID = this.props.repoID;
     seafileAPI.listSharedItems(repoID, path, 'group').then((res) => {
       if(res.data.length !== 0) {
         this.setState({
@@ -170,7 +170,7 @@ class ShareToGroup extends React.Component {
   shareToGroup = () => {
     let groups = [];
     let path = this.props.itemPath;
-    let repoID = this.props.repoID; 
+    let repoID = this.props.repoID;
     let isGroupOwnedRepo = this.props.isGroupOwnedRepo;
     if (this.state.selectedOption && this.state.selectedOption.length > 0 ) {
       for (let i = 0; i < this.state.selectedOption.length; i ++) {
@@ -195,7 +195,7 @@ class ShareToGroup extends React.Component {
           };
           return sharedItem;
         });
-  
+
         this.setState({
           errorMsg: errorMsg,
           sharedItems: this.state.sharedItems.concat(items),
@@ -214,7 +214,7 @@ class ShareToGroup extends React.Component {
             errorMsg[i] = res.data.failed[i];
           }
         }
-  
+
         this.setState({
           errorMsg: errorMsg,
           sharedItems: this.state.sharedItems.concat(res.data.success),
@@ -230,11 +230,11 @@ class ShareToGroup extends React.Component {
 
   deleteShareItem = (groupID) => {
     let path = this.props.itemPath;
-    let repoID = this.props.repoID; 
+    let repoID = this.props.repoID;
     if (this.props.isGroupOwnedRepo) {
       seafileAPI.deleteGroupOwnedRepoSharedGroupItem(repoID, groupID, path).then(() => {
         this.setState({
-          sharedItems: this.state.sharedItems.filter(item => { return item.group_info.id !== groupID; }) 
+          sharedItems: this.state.sharedItems.filter(item => { return item.group_info.id !== groupID; })
         });
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
@@ -243,7 +243,7 @@ class ShareToGroup extends React.Component {
     } else {
       seafileAPI.deleteShareToGroupItem(repoID, path, 'group', groupID).then(() => {
         this.setState({
-          sharedItems: this.state.sharedItems.filter(item => { return item.group_info.id !== groupID; }) 
+          sharedItems: this.state.sharedItems.filter(item => { return item.group_info.id !== groupID; })
         });
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
@@ -272,7 +272,7 @@ class ShareToGroup extends React.Component {
       });
     }
   }
-  
+
   updateSharedItems = (item, permission) => {
     let groupID = item.group_info.id;
     let sharedItems = this.state.sharedItems.map(sharedItem => {
@@ -315,7 +315,7 @@ class ShareToGroup extends React.Component {
                 />
               </td>
               <td>
-                <SharePermissionEditor 
+                <SharePermissionEditor
                   isTextMode={false}
                   isEditIconShow={false}
                   currentPermission={this.state.permission}
@@ -327,7 +327,7 @@ class ShareToGroup extends React.Component {
                 <Button onClick={this.shareToGroup}>{gettext('Submit')}</Button>
               </td>
             </tr>
-            {this.state.errorMsg.length > 0 &&                  
+            {this.state.errorMsg.length > 0 &&
               this.state.errorMsg.map((item, index) => {
                 let errMessage = item.group_name + ': ' + item.error_msg;
                 return (
@@ -335,17 +335,17 @@ class ShareToGroup extends React.Component {
                     <td colSpan={3}><p className="error">{errMessage}</p></td>
                   </tr>
                 );
-              })                                                
+              })
             }
           </tbody>
         </table>
         <div className="share-list-container">
           <table className="table-thead-hidden w-xs-200">
             {thead}
-            <GroupList 
+            <GroupList
               items={this.state.sharedItems}
               permissions={this.permissions}
-              deleteShareItem={this.deleteShareItem} 
+              deleteShareItem={this.deleteShareItem}
               onChangeUserPermission={this.onChangeUserPermission}
             />
           </table>
diff --git a/frontend/src/components/dialog/share-to-other-server.js b/frontend/src/components/dialog/share-to-other-server.js
index b82bb10e3d..9d3abe6301 100644
--- a/frontend/src/components/dialog/share-to-other-server.js
+++ b/frontend/src/components/dialog/share-to-other-server.js
@@ -16,7 +16,7 @@ class ShareItem extends React.Component {
       isOperationShow: false
     };
   }
-  
+
   onMouseEnter = () => {
     this.setState({isOperationShow: true});
   }
@@ -38,7 +38,7 @@ class ShareItem extends React.Component {
         <td className="name">{item.to_user}</td>
         <td>{Utils.sharePerms(item.permission)}</td>
         {/* <td>
-          <SharePermissionEditor 
+          <SharePermissionEditor
             isTextMode={true}
             isEditIconShow={this.state.isOperationShow}
             currentPermission={currentPermission}
@@ -222,7 +222,7 @@ class ShareToOtherServer extends React.Component {
         </table>
         <ShareList
           items={ocmShares}
-          deleteShareItem={this.deleteShareItem} 
+          deleteShareItem={this.deleteShareItem}
         />
       </Fragment>
     );
diff --git a/frontend/src/components/dialog/share-to-user.js b/frontend/src/components/dialog/share-to-user.js
index 53e392f8ea..0fafe4630b 100644
--- a/frontend/src/components/dialog/share-to-user.js
+++ b/frontend/src/components/dialog/share-to-user.js
@@ -20,7 +20,7 @@ class UserItem extends React.Component {
       isUserDetailsPopoverOpen: false
     };
   }
-  
+
   onMouseEnter = () => {
     this.setState({isOperationShow: true});
   }
@@ -78,7 +78,7 @@ class UserItem extends React.Component {
           </div>
         </td>
         <td>
-          <SharePermissionEditor 
+          <SharePermissionEditor
             isTextMode={true}
             isEditIconShow={this.state.isOperationShow}
             currentPermission={currentPermission}
@@ -89,7 +89,7 @@ class UserItem extends React.Component {
         <td>
           <span
             className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
-            onClick={this.deleteShareItem} 
+            onClick={this.deleteShareItem}
             title={gettext('Delete')}
           >
           </span>
@@ -107,9 +107,9 @@ class UserList extends React.Component {
       <tbody>
         {items.map((item, index) => {
           return (
-            <UserItem 
-              key={index} 
-              item={item} 
+            <UserItem
+              key={index}
+              item={item}
               permissions={this.props.permissions}
               deleteShareItem={this.props.deleteShareItem}
               onChangeUserPermission={this.props.onChangeUserPermission}
@@ -176,7 +176,7 @@ class ShareToUser extends React.Component {
 
   shareToUser = () => {
     let users = [];
-    let path = this.props.itemPath; 
+    let path = this.props.itemPath;
     let repoID = this.props.repoID;
     if (this.state.selectedOption && this.state.selectedOption.length > 0 ) {
       for (let i = 0; i < this.state.selectedOption.length; i ++) {
@@ -245,7 +245,7 @@ class ShareToUser extends React.Component {
         }
       });
     }
-  } 
+  }
 
   deleteShareItem = (username) => {
     let path = this.props.itemPath;
@@ -253,7 +253,7 @@ class ShareToUser extends React.Component {
     if (this.props.isGroupOwnedRepo) {
       seafileAPI.deleteGroupOwnedRepoSharedUserItem(repoID, username, path).then(res => {
         this.setState({
-          sharedItems: this.state.sharedItems.filter( item => { return item.user_info.name !== username; }) 
+          sharedItems: this.state.sharedItems.filter( item => { return item.user_info.name !== username; })
         });
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
@@ -262,7 +262,7 @@ class ShareToUser extends React.Component {
     } else {
       seafileAPI.deleteShareToUserItem(repoID, path, 'user', username).then(res => {
         this.setState({
-          sharedItems: this.state.sharedItems.filter( item => { return item.user_info.name !== username; }) 
+          sharedItems: this.state.sharedItems.filter( item => { return item.user_info.name !== username; })
         });
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
@@ -291,7 +291,7 @@ class ShareToUser extends React.Component {
       });
     }
   }
-  
+
   updateSharedItems = (item, permission) => {
     let username = item.user_info.name;
     let sharedItems = this.state.sharedItems.map(sharedItem => {
@@ -332,7 +332,7 @@ class ShareToUser extends React.Component {
                 />
               </td>
               <td>
-                <SharePermissionEditor 
+                <SharePermissionEditor
                   isTextMode={false}
                   isEditIconShow={false}
                   currentPermission={this.state.permission}
@@ -364,10 +364,10 @@ class ShareToUser extends React.Component {
         <div className="share-list-container">
           <table className="table-thead-hidden w-xs-200">
             {thead}
-            <UserList 
+            <UserList
               items={sharedItems}
               permissions={this.permissions}
-              deleteShareItem={this.deleteShareItem} 
+              deleteShareItem={this.deleteShareItem}
               onChangeUserPermission={this.onChangeUserPermission}
             />
           </table>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/set-quota.js b/frontend/src/components/dialog/sysadmin-dialog/set-quota.js
index f19da5e590..e36577114a 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/set-quota.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/set-quota.js
@@ -56,7 +56,7 @@ class SetQuotaDialog extends React.Component {
                   type="text"
                   className="form-control"
                   value={quota}
-                  onKeyPress={this.handleKeyPress} 
+                  onKeyPress={this.handleKeyPress}
                   onChange={this.handleQuotaChange}
                 />
                 <InputGroupAddon addonType="append">
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-department-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-department-dialog.js
index f65c6a8853..1983fea425 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-department-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-department-dialog.js
@@ -57,7 +57,7 @@ class AddDepartDialog extends React.Component {
 
   handleChange = (e) => {
     this.setState({
-      departName: e.target.value, 
+      departName: e.target.value,
     });
   }
 
@@ -77,10 +77,10 @@ class AddDepartDialog extends React.Component {
           <Form>
             <FormGroup>
               <Label for="departName">{gettext('Name')}</Label>
-              <Input 
-                id="departName" 
-                onKeyPress={this.handleKeyPress} 
-                value={this.state.departName} 
+              <Input
+                id="departName"
+                onKeyPress={this.handleKeyPress}
+                value={this.state.departName}
                 onChange={this.handleChange}
                 innerRef={input => {this.newInput = input;}}
               />
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-dialog.js
index 247841c353..e431ac6dfe 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-dialog.js
@@ -22,7 +22,7 @@ class SysAdminAddInstitutionDialog extends React.Component {
     const value = e.target.value;
     this.setState({
       value: value,
-      isSubmitBtnActive: value.trim() != '' 
+      isSubmitBtnActive: value.trim() != ''
     });
   }
 
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog.js
index f459d074a8..6987d7e15b 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog.js
@@ -25,7 +25,7 @@ class AddMemberDialog extends React.Component {
   handleSubmit = () => {
     if (!this.state.selectedOption) return;
     const emails = this.state.selectedOption.map(item => item.email);
-    this.props.addUser(emails)
+    this.props.addUser(emails);
   }
 
   render() {
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-or-update-term-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-or-update-term-dialog.js
index 5e9fe514a8..b883eee111 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-or-update-term-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-or-update-term-dialog.js
@@ -139,7 +139,7 @@ class AddOrUpdateTermDialog extends React.Component {
           </ModalFooter>
         </Modal>
         {this.state.isConditionsEditorDialogShow && (
-          <TermsEditorDialog 
+          <TermsEditorDialog
             content={this.state.text}
             onCommit={this.onUpdateContent}
             onCloseEditorDialog={this.onCloseEditorDialog}
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-org-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-org-dialog.js
index d52e6bf376..5bb17d9472 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-org-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-org-dialog.js
@@ -17,7 +17,7 @@ class SysAdminAddOrgDialog extends React.Component {
       password: '',
       passwordAgain: '',
       errorMsg: '',
-      isSubmitBtnActive: false 
+      isSubmitBtnActive: false
     };
   }
 
@@ -93,14 +93,14 @@ class SysAdminAddOrgDialog extends React.Component {
           <Form autoComplete="off">
             <FormGroup>
               <Label>{gettext('Name')}</Label>
-              <Input value={name} onChange={this.inputName} /> 
+              <Input value={name} onChange={this.inputName} />
             </FormGroup>
             <FormGroup>
               <Label>
                 {gettext('Owner')}
                 <span className="small text-secondary ml-1 fas fa-question-circle" title={gettext('Owner can use admin panel in an organization, must be a new account.')}></span>
               </Label>
-              <Input value={email} onChange={this.inputEmail} /> 
+              <Input value={email} onChange={this.inputEmail} />
             </FormGroup>
             <FormGroup>
               <Label>{gettext('Password')}</Label>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-repo-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-repo-dialog.js
index b04031799c..e7cfb80692 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-repo-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-repo-dialog.js
@@ -72,10 +72,10 @@ class AddRepoDialog extends React.Component {
           <Form>
             <FormGroup>
               <Label for="repoName">{gettext('Name')}</Label>
-              <Input 
-                id="repoName" 
-                onKeyPress={this.handleKeyPress} 
-                value={this.state.repoName} 
+              <Input
+                id="repoName"
+                onKeyPress={this.handleKeyPress}
+                value={this.state.repoName}
                 onChange={this.handleChange}
                 innerRef={input => {this.newInput = input;}}
               />
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js
index 7462d978f4..6f6c1f1bbe 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js
@@ -35,10 +35,10 @@ class SysAdminAddUserDialog extends React.Component {
       btnActive = true;
     } else {
       btnActive = false;
-    }   
+    }
     this.setState({
       isSubmitBtnActive: btnActive
-    }); 
+    });
   }
 
   toggle = () => {
@@ -90,8 +90,8 @@ class SysAdminAddUserDialog extends React.Component {
   updateRole = (role) => {
     this.setState({
       role: role
-    });         
-  }     
+    });
+  }
 
   handleSubmit = () => {
     const { email, password, passwordAgain, name, role } = this.state;
@@ -113,9 +113,9 @@ class SysAdminAddUserDialog extends React.Component {
 
   render() {
     const { dialogTitle, showRole } = this.props;
-    const { 
-      errorMsg, isPasswordVisible, 
-      email, name, role, password, passwordAgain, 
+    const {
+      errorMsg, isPasswordVisible,
+      email, name, role, password, passwordAgain,
       isSubmitBtnActive
     } = this.state;
     return (
@@ -125,13 +125,13 @@ class SysAdminAddUserDialog extends React.Component {
           <Form autoComplete="off">
             <FormGroup>
               <Label>{gettext('Email')}</Label>
-              <Input value={email} onChange={this.inputEmail} /> 
+              <Input value={email} onChange={this.inputEmail} />
             </FormGroup>
             <FormGroup>
               <Label>{gettext('Name(optional)')}</Label>
-              <Input type="text" value={name} onChange={this.inputName} /> 
+              <Input type="text" value={name} onChange={this.inputName} />
             </FormGroup>
-            {showRole && 
+            {showRole &&
             <FormGroup>
               <Label>
                 {gettext('Role')}
@@ -143,7 +143,7 @@ class SysAdminAddUserDialog extends React.Component {
                 currentRole={role}
                 roleOptions={this.props.availableRoles}
                 onRoleChanged={this.updateRole}
-              />  
+              />
             </FormGroup>
             }
             <FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-batch-add-admin-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-batch-add-admin-dialog.js
index 09ca99ac45..0013648ae2 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-batch-add-admin-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-batch-add-admin-dialog.js
@@ -51,7 +51,7 @@ class SysAdminBatchAddAdminDialog extends React.Component {
             className="reviewer-select"
             placeholder={gettext('Search users...')}
             onSelectChange={this.handleSelectChange}
-          />  
+          />
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js
index 294712be20..48165334e5 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js
@@ -68,11 +68,11 @@ class SysAdminCreateGroupDialog extends React.Component {
           <Form>
             <FormGroup>
               <Label for="groupName">{gettext('Name')}</Label>
-              <Input 
+              <Input
                 id="groupName"
-                onKeyPress={this.handleKeyPress} 
-                innerRef={input => {this.newInput = input;}} 
-                value={this.state.groupName} 
+                onKeyPress={this.handleKeyPress}
+                innerRef={input => {this.newInput = input;}}
+                value={this.state.groupName}
                 onChange={this.handleRepoNameChange}
               />
               <Label className="mt-2">
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-repo-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-repo-dialog.js
index 3f2d4ca090..16d8f0cf5c 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-repo-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-repo-dialog.js
@@ -66,11 +66,11 @@ class SysAdminCreateRepoDialog extends React.Component {
           <Form>
             <FormGroup>
               <Label for="repoName">{gettext('Name')}</Label>
-              <Input 
+              <Input
                 id="repoName"
-                onKeyPress={this.handleKeyPress} 
-                innerRef={input => {this.newInput = input;}} 
-                value={this.state.repoName} 
+                onKeyPress={this.handleKeyPress}
+                innerRef={input => {this.newInput = input;}}
+                value={this.state.repoName}
                 onChange={this.handleRepoNameChange}
               />
             </FormGroup>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js
index 87eaf499b3..65a7c17389 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js
@@ -30,7 +30,7 @@ class SysAdminGroupAddMemberDialog extends React.Component {
     let emails = this.state.selectedOptions.map(item => item.email);
     this.props.addMembers(emails);
     this.props.toggle();
-  } 
+  }
 
   render() {
     const { isSubmitBtnDisabled } = this.state;
@@ -44,7 +44,7 @@ class SysAdminGroupAddMemberDialog extends React.Component {
             className="reviewer-select"
             placeholder={gettext('Search users...')}
             onSelectChange={this.handleSelectChange}
-          /> 
+          />
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js
index 25dfc74fd5..25aa97936c 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js
@@ -24,7 +24,7 @@ class SysAdminTransferGroupDialog extends React.Component {
   handleSelectChange = (option) => {
     this.setState({
       selectedOption: option,
-      submitBtnDisabled: option == null 
+      submitBtnDisabled: option == null
     });
   }
 
@@ -32,7 +32,7 @@ class SysAdminTransferGroupDialog extends React.Component {
     const receiver = this.state.selectedOption.email;
     this.props.transferGroup(receiver);
     this.props.toggleDialog();
-  } 
+  }
 
   render() {
     const { submitBtnDisabled } = this.state;
@@ -50,7 +50,7 @@ class SysAdminTransferGroupDialog extends React.Component {
             className="reviewer-select"
             placeholder={gettext('Select a user')}
             onSelectChange={this.handleSelectChange}
-          /> 
+          />
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
index f5a9839196..5001e0aefc 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
@@ -35,7 +35,7 @@ class SysAdminLibHistorySettingDialog extends React.Component {
         noHistory: res.data.keep_days === 0 ? true : false,
         autoHistory: res.data.keep_days > 0 ? true : false,
         disabled: res.data.keep_days > 0 ? false : true,
-        expireDays: res.data.keep_days > 0 ? res.data.keep_days : 30, 
+        expireDays: res.data.keep_days > 0 ? res.data.keep_days : 30,
       });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -51,7 +51,7 @@ class SysAdminLibHistorySettingDialog extends React.Component {
     let repoID = this.props.repoID;
     let reg = /^-?\d+$/;
     let flag = reg.test(days);
-    if (flag) {  
+    if (flag) {
       let message = gettext('Successfully set library history.');
       seafileAPI.sysAdminUpdateRepoHistorySetting(repoID, days).then(res => {
         toaster.success(message);
@@ -94,7 +94,7 @@ class SysAdminLibHistorySettingDialog extends React.Component {
       });
     } else {
       this.setState({
-        disabled: false 
+        disabled: false
       });
     }
 
@@ -126,11 +126,11 @@ class SysAdminLibHistorySettingDialog extends React.Component {
             <FormGroup check>
               <Input type="radio" name="radio1" checked={this.state.autoHistory} onChange={() =>{this.setLimitDays('autoHistory');}}/>{' '}
               <Label>{gettext('Only keep a period of history:')}</Label>
-              <Input 
-                type="text" 
-                className="expire-input" 
+              <Input
+                type="text"
+                className="expire-input"
                 value={this.state.expireDays}
-                onChange={this.onChange} 
+                onChange={this.onChange}
                 disabled={this.state.disabled}
                 onKeyDown={this.handleKeyPress}
               />{' '}
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog.js
index 344b8f5e91..245fabfb0a 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog.js
@@ -71,7 +71,7 @@ class LogsExportExcelDialog extends React.Component {
 
   handleEndChange = (e) => {
     const endDateStr = e.target.value.trim();
-    this.setState({ 
+    this.setState({
       endDateStr: endDateStr,
       errMsg: '',
     });
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js
index b54bbee754..232462f76a 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js
@@ -26,7 +26,7 @@ class SysAdminRepoTransferDialog extends React.Component {
   submit = () => {
     let user = this.state.selectedOption;
     this.props.submit(user);
-  } 
+  }
 
   render() {
     const repoName = this.props.repoName;
@@ -45,7 +45,7 @@ class SysAdminRepoTransferDialog extends React.Component {
             className="reviewer-select"
             placeholder={gettext('Search users...')}
             onSelectChange={this.handleSelectChange}
-          /> 
+          />
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-group-quota-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-group-quota-dialog.js
index b5bdb4e755..822b7cd579 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-group-quota-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-group-quota-dialog.js
@@ -44,7 +44,7 @@ class SetGroupQuotaDialog extends React.Component {
     } else {
       const err = gettext('Quota is invalid.');
       this.setState({ errMessage: err });
-    } 
+    }
   }
 
   handleChange = (e) => {
@@ -66,8 +66,8 @@ class SetGroupQuotaDialog extends React.Component {
         <ModalBody>
           <InputGroup>
             <Input
-              onKeyPress={this.handleKeyPress} 
-              value={this.state.quota} 
+              onKeyPress={this.handleKeyPress}
+              value={this.state.quota}
               onChange={this.handleChange}
               innerRef={input => {this.newInput = input;}}
             />
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-max-user-number-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-max-user-number-dialog.js
index 8843d1f5d3..2b49c0ce88 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-max-user-number-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-max-user-number-dialog.js
@@ -51,13 +51,13 @@ class SysAdminSetOrgMaxUserNumberDialog extends React.Component {
         <ModalBody>
           <Form>
             <FormGroup>
-                <Input
-                  type="text"
-                  className="form-control"
-                  value={value}
-                  onKeyPress={this.handleKeyPress} 
-                  onChange={this.handleInputChange}
-                />
+              <Input
+                type="text"
+                className="form-control"
+                value={value}
+                onKeyPress={this.handleKeyPress}
+                onChange={this.handleInputChange}
+              />
             </FormGroup>
           </Form>
         </ModalBody>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-name-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-name-dialog.js
index 2e75922889..0693cdf520 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-name-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-name-dialog.js
@@ -51,12 +51,12 @@ class SysAdminSetOrgNameDialog extends React.Component {
         <ModalBody>
           <Form>
             <FormGroup>
-                <Input
-                  type="text"
-                  value={name}
-                  onKeyPress={this.handleKeyPress} 
-                  onChange={this.handleInputChange}
-                />
+              <Input
+                type="text"
+                value={name}
+                onKeyPress={this.handleKeyPress}
+                onChange={this.handleInputChange}
+              />
             </FormGroup>
           </Form>
         </ModalBody>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js
index 2ec9f42f2e..6d21576d87 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap'; 
+import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import SysAdminShareToUser from './sysadmin-share-to-user';
 import SysAdminShareToGroup from './sysadmin-share-to-group';
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js
index eae868be10..154f99dfdb 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js
@@ -17,7 +17,7 @@ class GroupItem extends React.Component {
       isOperationShow: false
     };
   }
-  
+
   onMouseEnter = () => {
     this.setState({isOperationShow: true});
   }
@@ -43,7 +43,7 @@ class GroupItem extends React.Component {
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className='name'>{item.group_name}</td>
         <td>
-          <SharePermissionEditor 
+          <SharePermissionEditor
             isTextMode={true}
             isEditIconShow={this.state.isOperationShow}
             currentPermission={currentPermission}
@@ -54,7 +54,7 @@ class GroupItem extends React.Component {
         <td>
           <span
             className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
-            onClick={this.deleteShareItem} 
+            onClick={this.deleteShareItem}
             title={gettext('Delete')}
           >
           </span>
@@ -72,9 +72,9 @@ class GroupList extends React.Component {
       <tbody>
         {items.map((item, index) => {
           return (
-            <GroupItem 
-              key={index} 
-              item={item} 
+            <GroupItem
+              key={index}
+              item={item}
               permissions={this.props.permissions}
               deleteShareItem={this.props.deleteShareItem}
               onChangeUserPermission={this.props.onChangeUserPermission}
@@ -143,7 +143,7 @@ class SysAdminShareToGroup extends React.Component {
   }
 
   listSharedGroups = () => {
-    let repoID = this.props.repoID; 
+    let repoID = this.props.repoID;
     seafileAPI.sysAdminListRepoSharedItems(repoID, 'group').then((res) => {
       if(res.data.length !== 0) {
         this.setState({
@@ -162,7 +162,7 @@ class SysAdminShareToGroup extends React.Component {
 
   shareToGroup = () => {
     let groups = [];
-    let repoID = this.props.repoID; 
+    let repoID = this.props.repoID;
     if (this.state.selectedOption && this.state.selectedOption.length > 0 ) {
       for (let i = 0; i < this.state.selectedOption.length; i ++) {
         groups[i] = this.state.selectedOption[i].id;
@@ -189,10 +189,10 @@ class SysAdminShareToGroup extends React.Component {
   }
 
   deleteShareItem = (groupID) => {
-    let repoID = this.props.repoID; 
+    let repoID = this.props.repoID;
     seafileAPI.sysAdminDeleteRepoSharedItem(repoID, 'group', groupID).then(() => {
       this.setState({
-        sharedItems: this.state.sharedItems.filter(item => { return item.group_id !== groupID; }) 
+        sharedItems: this.state.sharedItems.filter(item => { return item.group_id !== groupID; })
       });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -210,7 +210,7 @@ class SysAdminShareToGroup extends React.Component {
       toaster.danger(errMessage);
     });
   }
-  
+
   updateSharedItems = (item, permission) => {
     let groupID = item.group_id;
     let sharedItems = this.state.sharedItems.map(sharedItem => {
@@ -251,7 +251,7 @@ class SysAdminShareToGroup extends React.Component {
                 />
               </td>
               <td>
-                <SharePermissionEditor 
+                <SharePermissionEditor
                   isTextMode={false}
                   isEditIconShow={false}
                   currentPermission={this.state.permission}
@@ -263,7 +263,7 @@ class SysAdminShareToGroup extends React.Component {
                 <Button onClick={this.shareToGroup}>{gettext('Submit')}</Button>
               </td>
             </tr>
-            {this.state.errorMsg.length > 0 &&                  
+            {this.state.errorMsg.length > 0 &&
               this.state.errorMsg.map((item, index) => {
                 let errMessage = item.group_name + ': ' + item.error_msg;
                 return (
@@ -271,7 +271,7 @@ class SysAdminShareToGroup extends React.Component {
                     <td colSpan={3}><p className="error">{errMessage}</p></td>
                   </tr>
                 );
-              })                                                
+              })
             }
           </tbody>
         </table>
@@ -284,10 +284,10 @@ class SysAdminShareToGroup extends React.Component {
                 <th width="15%"></th>
               </tr>
             </thead>
-            <GroupList 
+            <GroupList
               items={this.state.sharedItems}
               permissions={this.permissions}
-              deleteShareItem={this.deleteShareItem} 
+              deleteShareItem={this.deleteShareItem}
               onChangeUserPermission={this.onChangeUserPermission}
             />
           </table>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js
index b4dda5ec52..d4083c12e3 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js
@@ -16,7 +16,7 @@ class UserItem extends React.Component {
       isOperationShow: false
     };
   }
-  
+
   onMouseEnter = () => {
     this.setState({isOperationShow: true});
   }
@@ -29,7 +29,7 @@ class UserItem extends React.Component {
     let item = this.props.item;
     this.props.deleteShareItem(item.user_email);
   }
-  
+
   onChangeUserPermission = (permission) => {
     let item = this.props.item;
     this.props.onChangeUserPermission(item, permission);
@@ -42,7 +42,7 @@ class UserItem extends React.Component {
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className="name">{item.user_name}</td>
         <td>
-          <SharePermissionEditor 
+          <SharePermissionEditor
             isTextMode={true}
             isEditIconShow={this.state.isOperationShow}
             currentPermission={currentPermission}
@@ -53,7 +53,7 @@ class UserItem extends React.Component {
         <td>
           <span
             className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
-            onClick={this.deleteShareItem} 
+            onClick={this.deleteShareItem}
             title={gettext('Delete')}
           >
           </span>
@@ -71,9 +71,9 @@ class UserList extends React.Component {
       <tbody>
         {items.map((item, index) => {
           return (
-            <UserItem 
-              key={index} 
-              item={item} 
+            <UserItem
+              key={index}
+              item={item}
               permissions={this.props.permissions}
               deleteShareItem={this.props.deleteShareItem}
               onChangeUserPermission={this.props.onChangeUserPermission}
@@ -164,13 +164,13 @@ class SysAdminShareToUser extends React.Component {
         });
       }
     });
-  } 
+  }
 
   deleteShareItem = (useremail) => {
     let repoID = this.props.repoID;
     seafileAPI.sysAdminDeleteRepoSharedItem(repoID, 'user', useremail).then(res => {
       this.setState({
-        sharedItems: this.state.sharedItems.filter( item => { return item.user_email !== useremail; }) 
+        sharedItems: this.state.sharedItems.filter( item => { return item.user_email !== useremail; })
       });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -188,7 +188,7 @@ class SysAdminShareToUser extends React.Component {
       toaster.danger(errMessage);
     });
   }
-  
+
   updateSharedItems = (item, permission) => {
     let username = item.user_name;
     let sharedItems = this.state.sharedItems.map(sharedItem => {
@@ -226,7 +226,7 @@ class SysAdminShareToUser extends React.Component {
                 />
               </td>
               <td>
-                <SharePermissionEditor 
+                <SharePermissionEditor
                   isTextMode={false}
                   isEditIconShow={false}
                   currentPermission={this.state.permission}
@@ -264,10 +264,10 @@ class SysAdminShareToUser extends React.Component {
                 <th width="15%"></th>
               </tr>
             </thead>
-            <UserList 
+            <UserList
               items={sharedItems}
               permissions={this.permissions}
-              deleteShareItem={this.deleteShareItem} 
+              deleteShareItem={this.deleteShareItem}
               onChangeUserPermission={this.onChangeUserPermission}
             />
           </table>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-unlink-device-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-unlink-device-dialog.js
index 79db8218a6..d95952a431 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-unlink-device-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-unlink-device-dialog.js
@@ -12,14 +12,14 @@ class SysAdminUnlinkDevice extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { 
+    this.state = {
       inputChecked: false
-    };  
+    };
   }
 
   handleInputChange = (e) => {
     this.setState({
-      inputChecked: e.target.checked 
+      inputChecked: e.target.checked
     });
   }
 
diff --git a/frontend/src/components/dialog/sysadmin-dialog/update-user.js b/frontend/src/components/dialog/sysadmin-dialog/update-user.js
index 0fc7d21bfe..6ccfb1d33b 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/update-user.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/update-user.js
@@ -47,12 +47,12 @@ class UpdateUser extends React.Component {
         <ModalBody>
           <Form>
             <FormGroup>
-                <Input
-                  type="text"
-                  value={this.state.value}
-                  onKeyPress={this.handleKeyPress} 
-                  onChange={this.handleInputChange}
-                />
+              <Input
+                type="text"
+                value={this.state.value}
+                onKeyPress={this.handleKeyPress}
+                onChange={this.handleInputChange}
+              />
             </FormGroup>
           </Form>
         </ModalBody>
diff --git a/frontend/src/components/dialog/terms-editor-dialog.js b/frontend/src/components/dialog/terms-editor-dialog.js
index 6bfa1da534..e2a753cf4c 100644
--- a/frontend/src/components/dialog/terms-editor-dialog.js
+++ b/frontend/src/components/dialog/terms-editor-dialog.js
@@ -45,9 +45,9 @@ class TermsEditorDialog extends React.Component {
   render() {
     let { content, title } = this.props;
     return (
-      <Modal 
-        isOpen={true} 
-        toggle={this.toggle} 
+      <Modal
+        isOpen={true}
+        toggle={this.toggle}
         onKeyDown={this.onKeyDown}
         wrapClassName={'conditions-editor-dialog-wrapper'}
         className={'conditions-editor-dialog'}
@@ -57,7 +57,7 @@ class TermsEditorDialog extends React.Component {
       >
         <ModalHeader className="conditions-editor-dialog-title" toggle={this.toggle}>{title}</ModalHeader>
         <ModalBody className={'conditions-editor-dialog-main'}>
-          <SimpleEditor 
+          <SimpleEditor
             onRef={this.setSimpleEditorRef.bind(this)}
             value={content || ''}
           />
diff --git a/frontend/src/components/dialog/transfer-dialog.js b/frontend/src/components/dialog/transfer-dialog.js
index bbad0cff38..0dfac21d48 100644
--- a/frontend/src/components/dialog/transfer-dialog.js
+++ b/frontend/src/components/dialog/transfer-dialog.js
@@ -34,7 +34,7 @@ class TransferDialog extends React.Component {
   submit = () => {
     let user = this.state.selectedOption;
     this.props.submit(user);
-  } 
+  }
 
   componentDidMount() {
     if (isPro) {
diff --git a/frontend/src/components/dialog/update-webdav-password.js b/frontend/src/components/dialog/update-webdav-password.js
index 392c0b536a..ca5ed1b067 100644
--- a/frontend/src/components/dialog/update-webdav-password.js
+++ b/frontend/src/components/dialog/update-webdav-password.js
@@ -13,7 +13,7 @@ class UpdateWebdavPassword extends Component {
 
   constructor(props) {
     super(props);
-    this.state = { 
+    this.state = {
       password: this.props.password,
       isPasswordVisible: false,
       btnDisabled: false
diff --git a/frontend/src/components/dialog/wiki-delete-dialog.js b/frontend/src/components/dialog/wiki-delete-dialog.js
index ec83ba5e7c..bea92a61eb 100644
--- a/frontend/src/components/dialog/wiki-delete-dialog.js
+++ b/frontend/src/components/dialog/wiki-delete-dialog.js
@@ -13,7 +13,7 @@ class WikiDeleteDialog extends React.Component {
   toggle = () => {
     this.props.toggleCancel();
   }
-  
+
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
diff --git a/frontend/src/components/dialog/wiki-select-dialog.js b/frontend/src/components/dialog/wiki-select-dialog.js
index 90a10b7c27..62091ad4e4 100644
--- a/frontend/src/components/dialog/wiki-select-dialog.js
+++ b/frontend/src/components/dialog/wiki-select-dialog.js
@@ -45,7 +45,7 @@ class WikiSelectDialog extends React.Component {
           return repo;
         });
       repoList = Utils.sortRepos(repoList, 'name', 'asc');
-      this.setState({repos: repoList}); 
+      this.setState({repos: repoList});
     });
   }
 
diff --git a/frontend/src/components/dialog/zip-download-dialog.js b/frontend/src/components/dialog/zip-download-dialog.js
index 380527145e..a4791d7377 100644
--- a/frontend/src/components/dialog/zip-download-dialog.js
+++ b/frontend/src/components/dialog/zip-download-dialog.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap'; 
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { gettext, fileServerRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
@@ -33,7 +33,7 @@ class ZipDownloadDialog extends React.Component {
     const { token, path, repoID, target } = this.props;
     let getZipTask;
     if (token) {
-      getZipTask = target.length ? 
+      getZipTask = target.length ?
         seafileAPI.getShareLinkDirentsZipTask(token, path, target) :
         seafileAPI.getShareLinkZipTask(token, path);
     } else {
@@ -44,8 +44,8 @@ class ZipDownloadDialog extends React.Component {
       this.setState({
         isLoading: false,
         errorMsg: '',
-        zipToken: zipToken 
-      }); 
+        zipToken: zipToken
+      });
       this.queryZipProgress();
       interval = setInterval(this.queryZipProgress, 1000);
     }).catch((error) => {
@@ -53,7 +53,7 @@ class ZipDownloadDialog extends React.Component {
       this.setState({
         isLoading: false,
         errorMsg: errorMsg
-      }); 
+      });
     });
   }
 
@@ -75,7 +75,7 @@ class ZipDownloadDialog extends React.Component {
       this.setState({
         isLoading: false,
         errorMsg: errorMsg
-      }); 
+      });
     });
   }
 
diff --git a/frontend/src/components/dir-view-mode/dir-column-file.js b/frontend/src/components/dir-view-mode/dir-column-file.js
index a8f2233710..1c4a5a962f 100644
--- a/frontend/src/components/dir-view-mode/dir-column-file.js
+++ b/frontend/src/components/dir-view-mode/dir-column-file.js
@@ -62,7 +62,7 @@ class DirColumnFile extends React.Component {
     e.preventDefault();
     this.props.goDraftPage();
   }
-  
+
   render() {
     if (this.props.isFileLoadedErr) {
       return (
diff --git a/frontend/src/components/dir-view-mode/dir-column-nav.js b/frontend/src/components/dir-view-mode/dir-column-nav.js
index 2430c01158..1067e2f571 100644
--- a/frontend/src/components/dir-view-mode/dir-column-nav.js
+++ b/frontend/src/components/dir-view-mode/dir-column-nav.js
@@ -113,7 +113,7 @@ class DirColumnNav extends React.Component {
       this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
     }
   }
-  
+
   onAddFolderToggle = (type) => {
     if (type === 'root') {
       let root = this.props.treeData.root;
@@ -165,7 +165,7 @@ class DirColumnNav extends React.Component {
 
   checkDuplicatedName = (newName) => {
     let node = this.state.opNode;
-    // root node to new node conditions: parentNode is null, 
+    // root node to new node conditions: parentNode is null,
     let parentNode = node.parentNode ? node.parentNode : node;
     let childrenObject = parentNode.children.map(item => {
       return item.object;
@@ -253,7 +253,7 @@ class DirColumnNav extends React.Component {
     return (
       <Fragment>
         <div className="dir-content-nav" role="navigation" style={{flex: (flex), userSelect: select}} onScroll={this.stopTreeScrollPropagation}>
-          {this.props.isTreeDataLoading ? 
+          {this.props.isTreeDataLoading ?
             (<Loading/>) :
             (<TreeView
               repoPermission={this.props.repoPermission}
diff --git a/frontend/src/components/dir-view-mode/dir-column-view.js b/frontend/src/components/dir-view-mode/dir-column-view.js
index 2c8df33f6d..4ea3fb154e 100644
--- a/frontend/src/components/dir-view-mode/dir-column-view.js
+++ b/frontend/src/components/dir-view-mode/dir-column-view.js
@@ -70,7 +70,7 @@ const propTypes = {
 };
 
 class DirColumnView extends React.Component {
-  
+
   constructor(props) {
     super(props);
     this.state = {
@@ -150,7 +150,7 @@ class DirColumnView extends React.Component {
     const mainFlex = '1 0 ' + (1 - this.state.navRate - 0.05) * 100 + '%';
     return (
       <div className="dir-colunm-view" onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="viewModeContainer">
-        <DirColumnNav 
+        <DirColumnNav
           currentPath={this.props.path}
           repoPermission={this.props.repoPermission}
           isTreeDataLoading={this.props.isTreeDataLoading}
@@ -175,7 +175,7 @@ class DirColumnView extends React.Component {
         <div className="dir-content-resize" onMouseDown={this.onResizeMouseDown}></div>
         <div className="dir-content-main" style={{userSelect: select, flex: mainFlex}}>
           {this.props.isViewFile ? (
-            <DirColumnFile 
+            <DirColumnFile
               path={this.props.path}
               repoID={this.props.repoID}
               hash={this.props.hash}
@@ -191,7 +191,7 @@ class DirColumnView extends React.Component {
               onLinkClick={this.props.onLinkClick}
             />
           ) : (
-            <DirListView 
+            <DirListView
               path={this.props.path}
               repoID={this.props.repoID}
               currentRepoInfo={this.props.currentRepoInfo}
diff --git a/frontend/src/components/dir-view-mode/dir-grid-view.js b/frontend/src/components/dir-view-mode/dir-grid-view.js
index 617da702a9..92607c5ff6 100644
--- a/frontend/src/components/dir-view-mode/dir-grid-view.js
+++ b/frontend/src/components/dir-view-mode/dir-grid-view.js
@@ -38,7 +38,7 @@ class DirGridView extends React.Component {
   render() {
     if (this.props.path === '/' && this.props.direntList.length === 0) {
       return (
-        <DirentNoneView 
+        <DirentNoneView
           path={this.props.path}
           isDirentListLoading={this.props.isDirentListLoading}
           onAddFile={this.props.onAddFile}
@@ -48,7 +48,7 @@ class DirGridView extends React.Component {
     return (
       <Fragment>
         {this.props.isRepoInfoBarShow && (
-          <RepoInfoBar 
+          <RepoInfoBar
             repoID={this.props.repoID}
             currentPath={this.props.path}
             readmeMarkdown={this.props.readmeMarkdown}
diff --git a/frontend/src/components/dir-view-mode/dir-list-view.js b/frontend/src/components/dir-view-mode/dir-list-view.js
index ac089197d2..7153506aef 100644
--- a/frontend/src/components/dir-view-mode/dir-list-view.js
+++ b/frontend/src/components/dir-view-mode/dir-list-view.js
@@ -42,12 +42,12 @@ const propTypes = {
 };
 
 class DirListView extends React.Component {
-  
+
   render() {
 
     if (this.props.path === '/' && this.props.direntList.length === 0) {
       return (
-        <DirentNoneView 
+        <DirentNoneView
           path={this.props.path}
           isDirentListLoading={this.props.isDirentListLoading}
           onAddFile={this.props.onAddFile}
@@ -58,7 +58,7 @@ class DirListView extends React.Component {
     return (
       <Fragment>
         {this.props.isRepoInfoBarShow && (
-          <RepoInfoBar 
+          <RepoInfoBar
             repoID={this.props.repoID}
             currentPath={this.props.path}
             readmeMarkdown={this.props.readmeMarkdown}
diff --git a/frontend/src/components/dirent-detail/detail-list-view.js b/frontend/src/components/dirent-detail/detail-list-view.js
index 7953ad5e5f..3840ffc470 100644
--- a/frontend/src/components/dirent-detail/detail-list-view.js
+++ b/frontend/src/components/dirent-detail/detail-list-view.js
@@ -80,7 +80,7 @@ class DetailListView extends React.Component {
       showRelatedFileDialog: false,
     });
   }
-  
+
   render() {
     let { direntType, direntDetail, fileTagList, relatedFiles, fileParticipantList } = this.props;
     let position = this.getDirentPostion();
diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-item.js b/frontend/src/components/dirent-grid-view/dirent-grid-item.js
index 6bc2820b42..996e42f963 100644
--- a/frontend/src/components/dirent-grid-view/dirent-grid-item.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-item.js
@@ -44,7 +44,7 @@ class DirentGridItem extends React.Component {
   onItemClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    
+
     const dirent = this.props.dirent;
     if (this.props.dirent === this.props.activeDirent) {
       this.setState({isGridSelected: false});
@@ -108,7 +108,7 @@ class DirentGridItem extends React.Component {
 
     if (dropItemData.type !== 'dir') {
       return;
-    } 
+    }
 
     let selectedPath = Utils.joinPath(this.props.path, this.props.dirent.name);
     this.onItemMove(this.props.currentRepoInfo, nodeDirent, selectedPath, nodeParentPath);
@@ -131,7 +131,7 @@ class DirentGridItem extends React.Component {
     let dirent = this.props.dirent;
     this.props.onGridItemContextMenu(event, dirent);
   }
-   
+
   render() {
     let { dirent, path } = this.props;
     let direntPath = Utils.joinPath(path, dirent.name);
@@ -150,7 +150,7 @@ class DirentGridItem extends React.Component {
       dirHref = siteRoot + 'library/' + this.props.repoID + '/' + this.props.currentRepoInfo.repo_name + Utils.encodePath(direntPath);
     }
     let fileHref = siteRoot + 'lib/' + this.props.repoID + '/file' + Utils.encodePath(direntPath);
-    
+
     let gridClass = 'grid-file-img-link cursor-pointer';
     gridClass += this.state.isGridSelected ? ' grid-selected-active' : ' ';
     gridClass += this.state.isGridDropTipShow ? ' grid-drop-show' : ' ';
@@ -161,14 +161,14 @@ class DirentGridItem extends React.Component {
     return(
       <Fragment>
         <li className="grid-item" onContextMenu={this.onGridItemContextMenu} onMouseDown={this.onGridItemMouseDown}>
-          <div 
+          <div
             className={gridClass}
-            draggable="true" 
+            draggable="true"
             onClick={this.onItemClick}
-            onDragStart={this.onGridItemDragStart} 
-            onDragEnter={this.onGridItemDragEnter} 
-            onDragOver={this.onGridItemDragOver} 
-            onDragLeave={this.onGridItemDragLeave} 
+            onDragStart={this.onGridItemDragStart}
+            onDragEnter={this.onGridItemDragEnter}
+            onDragOver={this.onGridItemDragOver}
+            onDragLeave={this.onGridItemDragLeave}
             onDrop={this.onGridItemDragDrop}
           >
             {dirent.encoded_thumbnail_src ?
diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
index a3bfba35aa..4b8e9fbf7b 100644
--- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
@@ -55,7 +55,7 @@ class DirentGridView extends React.Component{
       isImagePopupOpen: false,
       imageItems: [],
       imageIndex: 0,
-      // onmenuClick 
+      // onmenuClick
       isShareDialogShow: false,
       isMoveDialogShow: false,
       isCopyDialogShow: false,
@@ -119,13 +119,13 @@ class DirentGridView extends React.Component{
   onMenuItemClick = (operation, currentObject, event) => {
     hideMenu();
     switch(operation) {
-      case 'Download': 
+      case 'Download':
         this.onItemDownload(currentObject, event);
         break;
       case 'Share':
         this.onItemShare(event);
         break;
-      case 'Delete': 
+      case 'Delete':
         this.onItemDelete(currentObject, event);
         break;
       case 'Rename':
@@ -271,7 +271,7 @@ class DirentGridView extends React.Component{
     let url = URLDecorator.getUrl({type: 'file_revisions', repoID: repoID, filePath: filePath});
     location.href = url;
   }
-  
+
   onAccessLog = (currentObject) => {
     let filePath = this.getDirentPath(currentObject);
     let path = siteRoot + 'repo/file-access/' + this.props.repoID + '/?p=' + encodeURIComponent(filePath) ;
@@ -407,7 +407,7 @@ class DirentGridView extends React.Component{
     }
 
     hideMenu();
-    
+
     this.setState({activeDirent: currentObject});
 
     let showMenuConfig = {
@@ -439,7 +439,7 @@ class DirentGridView extends React.Component{
     if (this.props.isDirentListLoading) {
       return (<Loading />);
     }
-  
+
     return (
       <Fragment>
         <ul className="grid-view" onClick={this.gridContainerClick} onContextMenu={this.onGridContainerContextMenu} onMouseDown={this.onGridContainerMouseDown}>
@@ -464,11 +464,11 @@ class DirentGridView extends React.Component{
             })
           }
         </ul>
-        <ContextMenu 
+        <ContextMenu
           id={'grid-item-contextmenu'}
           onMenuItemClick={this.onMenuItemClick}
         />
-        <ContextMenu 
+        <ContextMenu
           id={'dirent-grid-container-menu'}
           onMenuItemClick={this.onMenuItemClick}
         />
@@ -481,7 +481,7 @@ class DirentGridView extends React.Component{
               addFolderCancel={this.onCreateFolderToggle}
             />
           </ModalPortal>
-        )} 
+        )}
         {this.state.isCreateFileDialogShow && (
           <ModalPortal>
             <CreateFile
@@ -492,8 +492,8 @@ class DirentGridView extends React.Component{
             />
           </ModalPortal>
         )}
-        {this.state.isMoveDialogShow && 
-          <MoveDirentDialog 
+        {this.state.isMoveDialogShow &&
+          <MoveDirentDialog
             path={this.props.path}
             repoID={this.props.repoID}
             repoEncrypted={this.props.currentRepoInfo.encrypted}
@@ -535,7 +535,7 @@ class DirentGridView extends React.Component{
         }
         {this.state.isShareDialogShow &&
           <ModalPortal>
-            <ShareDialog 
+            <ShareDialog
               itemType={dirent.type}
               itemName={dirent.name}
               itemPath={direntPath}
diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
index 3a8cc4f40f..eab1d7eaf5 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -201,13 +201,13 @@ class DirentListItem extends React.Component {
 
   onMenuItemClick = (operation, event) => {
     switch(operation) {
-      case 'Download': 
+      case 'Download':
         this.onItemDownload(event);
         break;
       case 'Share':
         this.onItemShare(event);
         break;
-      case 'Delete': 
+      case 'Delete':
         this.onItemDelete(event);
         break;
       case 'Rename':
@@ -303,7 +303,7 @@ class DirentListItem extends React.Component {
       toaster.danger(errMessage);
     });
   }
-  
+
   onUnlockItem = () => {
     let repoID = this.props.repoID;
     let filePath = this.getDirentPath(this.props.dirent);
@@ -323,7 +323,7 @@ class DirentListItem extends React.Component {
     let url = URLDecorator.getUrl({type: 'file_revisions', repoID: repoID, filePath: filePath});
     location.href = url;
   }
-  
+
   onAccessLog = () => {
     let filePath = this.getDirentPath(this.props.dirent);
     let path = siteRoot + 'repo/file-access/' + this.props.repoID + '/?p=' + encodeURIComponent(filePath) ;
@@ -411,7 +411,7 @@ class DirentListItem extends React.Component {
       this.setState({isDropTipshow: true});
     }
   }
-  
+
   onItemDragOver = (e) => {
     if (Utils.isIEBrower()) {
       return false;
@@ -459,7 +459,7 @@ class DirentListItem extends React.Component {
       if (direntPaths.some(direntPath => { return direntPath === selectedPath;})) { //eg; A/B, A/C --> A/B
         return;
       }
-      
+
       this.props.onItemsMove(this.props.currentRepoInfo, selectedPath);
       return ;
     }
@@ -501,7 +501,7 @@ class DirentListItem extends React.Component {
 
     return (
       <Fragment>
-        {selectedDirentList.length > 1 ? 
+        {selectedDirentList.length > 1 ?
           <Fragment>
             {this.state.isOperationShow && !dirent.isSelected &&
               <div className="operations">
@@ -535,9 +535,9 @@ class DirentListItem extends React.Component {
                 </ul>
               </div>
             }
-          </Fragment> : 
+          </Fragment> :
           <Fragment>
-            {this.state.isOperationShow && 
+            {this.state.isOperationShow &&
               <div className="operations">
                 <ul className="operation-group">
                   {(dirent.permission === 'rw' || dirent.permission === 'r') && (
@@ -602,17 +602,17 @@ class DirentListItem extends React.Component {
 
     const isDesktop = Utils.isDesktop();
     const desktopItem = (
-      <tr 
-        className={trClass} 
+      <tr
+        className={trClass}
         draggable="true"
-        onMouseEnter={this.onMouseEnter} 
-        onMouseOver={this.onMouseOver} 
-        onMouseLeave={this.onMouseLeave} 
-        onClick={this.onDirentClick} 
-        onDragStart={this.onItemDragStart} 
-        onDragEnter={this.onItemDragEnter} 
-        onDragOver={this.onItemDragOver} 
-        onDragLeave={this.onItemDragLeave} 
+        onMouseEnter={this.onMouseEnter}
+        onMouseOver={this.onMouseOver}
+        onMouseLeave={this.onMouseLeave}
+        onClick={this.onDirentClick}
+        onDragStart={this.onItemDragStart}
+        onDragEnter={this.onItemDragEnter}
+        onDragOver={this.onItemDragOver}
+        onDragLeave={this.onItemDragLeave}
         onDrop={this.onItemDragDrop}
         onMouseDown={this.onItemMouseDown}
         onContextMenu={this.onItemContextMenu}
@@ -655,13 +655,13 @@ class DirentListItem extends React.Component {
                 {tagTitle}
               </UncontrolledTooltip>
             </Fragment>
-          )} 
+          )}
         </td>
         <td className="operation">{this.renderItemOperation()}</td>
         <td className="file-size">{dirent.size && dirent.size}</td>
         <td className="last-update">{dirent.mtime_relative}</td>
       </tr>
-    ); 
+    );
     const mobileItem = (
       <tr>
         <td>
@@ -708,11 +708,11 @@ class DirentListItem extends React.Component {
           </Dropdown>
         </td>
       </tr>
-    ); 
+    );
 
     return (
       <Fragment>
-        {isDesktop ? desktopItem : mobileItem} 
+        {isDesktop ? desktopItem : mobileItem}
         {this.state.isMoveDialogShow &&
           <ModalPortal>
             <MoveDirentDialog
@@ -760,7 +760,7 @@ class DirentListItem extends React.Component {
         }
         {this.state.isShareDialogShow &&
           <ModalPortal>
-            <ShareDialog 
+            <ShareDialog
               itemType={dirent.type}
               itemName={dirent.name}
               itemPath={direntPath}
@@ -775,7 +775,7 @@ class DirentListItem extends React.Component {
         }
         {this.state.isPermissionDialogOpen &&
           <ModalPortal>
-            <LibSubFolderPermissionDialog 
+            <LibSubFolderPermissionDialog
               toggleDialog={this.onPermissionItem}
               repoID={this.props.repoID}
               folderPath={direntPath}
diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js
index 5738f32fe0..2d07945adc 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -251,7 +251,7 @@ class DirentListView extends React.Component {
       });
 
       this.setState({
-        isProgressDialogShow: true, 
+        isProgressDialogShow: true,
         downloadItems: selectedDirentNames
       });
     }
@@ -356,7 +356,7 @@ class DirentListView extends React.Component {
       case 'New File':
         this.onCreateFileToggle();
         break;
-      default: 
+      default:
         break;
     }
 
@@ -377,7 +377,7 @@ class DirentListView extends React.Component {
       case 'Delete':
         this.props.onItemsDelete();
         break;
-      default: 
+      default:
         break;
     }
 
@@ -437,7 +437,7 @@ class DirentListView extends React.Component {
         index = i;
         break;
       }
-    } 
+    }
     return index;
   }
 
@@ -446,7 +446,7 @@ class DirentListView extends React.Component {
     const currentRepoInfo = this.props.currentRepoInfo;
     return Utils.getDirentOperationList(isRepoOwner, currentRepoInfo, dirent, isContextmenu);
   }
-  
+
   onTableDragEnter = (e) => {
     if (Utils.isIEBrower()) {
       return false;
@@ -539,10 +539,10 @@ class DirentListView extends React.Component {
     const isDesktop = Utils.isDesktop();
 
     return (
-      <div 
+      <div
         className={`table-container ${this.state.isListDropTipShow ? 'table-drop-active' : ''}`}
-        onMouseDown={this.onContainerMouseDown} 
-        onContextMenu={this.onContainerContextMenu} 
+        onMouseDown={this.onContainerMouseDown}
+        onContextMenu={this.onContainerContextMenu}
         onClick={this.onContainerClick}
         onDragEnter={this.onTableDragEnter}
         onDragOver={this.onTableDragOver}
@@ -551,20 +551,20 @@ class DirentListView extends React.Component {
       >
         <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
           {isDesktop ? (
-          <thead onMouseDown={this.onThreadMouseDown} onContextMenu={this.onThreadContextMenu}>
-            <tr>
-              <th width="3%" className="pl10">
-                <input type="checkbox" className="vam" onChange={this.props.onAllItemSelected} checked={this.props.isAllItemSelected}/>
-              </th>
-              <th width="3%" className="pl10">{/*icon */}</th>
-              <th width="5%" className="pl10">{/*star */}</th>
-              <th width="39%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
-              <th width="6%">{/*tag */}</th>
-              <th width="18%">{/*operation */}</th>
-              <th width="11%"><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
-              <th width="15%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
-            </tr>
-          </thead>
+            <thead onMouseDown={this.onThreadMouseDown} onContextMenu={this.onThreadContextMenu}>
+              <tr>
+                <th width="3%" className="pl10">
+                  <input type="checkbox" className="vam" onChange={this.props.onAllItemSelected} checked={this.props.isAllItemSelected}/>
+                </th>
+                <th width="3%" className="pl10">{/*icon */}</th>
+                <th width="5%" className="pl10">{/*star */}</th>
+                <th width="39%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
+                <th width="6%">{/*tag */}</th>
+                <th width="18%">{/*operation */}</th>
+                <th width="11%"><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
+                <th width="15%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
+              </tr>
+            </thead>
           ) : (
             <thead>
               <tr>
@@ -617,11 +617,11 @@ class DirentListView extends React.Component {
           </tbody>
         </table>
         <Fragment>
-          <ContextMenu 
+          <ContextMenu
             id={'dirent-container-menu'}
             onMenuItemClick={this.onContainerMenuItemClick}
           />
-          <ContextMenu 
+          <ContextMenu
             id={'dirent-item-menu'}
             onMenuItemClick={this.onMenuItemClick}
             onShowMenu={this.onShowMenu}
@@ -631,9 +631,9 @@ class DirentListView extends React.Component {
             id={'dirents-menu'}
             onMenuItemClick={this.onDirentsMenuItemClick}
           />
-          {this.state.isShowDirentsDraggablePreview && 
+          {this.state.isShowDirentsDraggablePreview &&
             <ModalPortal>
-              <DirentsDraggedPreview 
+              <DirentsDraggedPreview
                 selectedDirentList={this.props.selectedDirentList}
                 onHideDirentsDraggablePreview={this.onHideDirentsDraggablePreview}
                 dragStartPosition={this.state.dragStartPosition}
@@ -660,7 +660,7 @@ class DirentListView extends React.Component {
                 addFolderCancel={this.onCreateFolderToggle}
               />
             </ModalPortal>
-          )} 
+          )}
           {this.state.isCreateFileDialogShow && (
             <ModalPortal>
               <CreateFile
@@ -672,8 +672,8 @@ class DirentListView extends React.Component {
               />
             </ModalPortal>
           )}
-          {this.state.isMoveDialogShow && 
-            <MoveDirentDialog 
+          {this.state.isMoveDialogShow &&
+            <MoveDirentDialog
               path={this.props.path}
               repoID={this.props.repoID}
               repoEncrypted={this.props.currentRepoInfo.encrypted}
@@ -695,11 +695,11 @@ class DirentListView extends React.Component {
             />
           }
           {this.state.isProgressDialogShow &&
-            <ZipDownloadDialog 
+            <ZipDownloadDialog
               repoID={this.props.repoID}
               path={this.props.path}
               target={this.state.downloadItems}
-              toggleDialog={this.onCloseZipDownloadDialog} 
+              toggleDialog={this.onCloseZipDownloadDialog}
             />
           }
         </Fragment>
diff --git a/frontend/src/components/dirent-list-view/dirent-none-view.js b/frontend/src/components/dirent-list-view/dirent-none-view.js
index 241e1485c6..f8343bcd19 100644
--- a/frontend/src/components/dirent-list-view/dirent-none-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-none-view.js
@@ -21,7 +21,7 @@ class DirentNodeView extends React.Component {
       fileType: '',
       isCreateFileDialogShow: false,
     };
-  } 
+  }
 
   onCreateNewFile = (type) => {
     this.setState({
diff --git a/frontend/src/components/draft-list-view/draft-list-item.js b/frontend/src/components/draft-list-view/draft-list-item.js
index a081a765aa..0f1373ee97 100644
--- a/frontend/src/components/draft-list-view/draft-list-item.js
+++ b/frontend/src/components/draft-list-view/draft-list-item.js
@@ -98,12 +98,12 @@ class DraftListItem extends React.Component {
         <td className="text-center">
           {this.state.isMenuIconShow && (
             <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-              <DropdownToggle 
-                tag="i" 
-                className="fas fa-ellipsis-v attr-action-icon" 
+              <DropdownToggle
+                tag="i"
+                className="fas fa-ellipsis-v attr-action-icon"
                 title={gettext('More Operations')}
                 onClick={this.onDropdownToggleClick}
-                data-toggle="dropdown" 
+                data-toggle="dropdown"
                 aria-expanded={this.state.isItemMenuShow}
               />
               <DropdownMenu>
diff --git a/frontend/src/components/draft-list-view/draft-list-view.js b/frontend/src/components/draft-list-view/draft-list-view.js
index f63fd6a1e9..7235ac9755 100644
--- a/frontend/src/components/draft-list-view/draft-list-view.js
+++ b/frontend/src/components/draft-list-view/draft-list-view.js
@@ -42,9 +42,9 @@ class DraftListView extends React.Component {
         <tbody>
           { drafts && drafts.map((draft) => {
             return (
-              <DraftListItem 
-                key={draft.id} 
-                draft={draft} 
+              <DraftListItem
+                key={draft.id}
+                draft={draft}
                 isItemFreezed={this.state.isItemFreezed}
                 onFreezedItem={this.onFreezedItem}
                 onUnfreezedItem={this.onUnfreezedItem}
diff --git a/frontend/src/components/draggable/dirents-dragged-preview.js b/frontend/src/components/draggable/dirents-dragged-preview.js
index d78366c349..19ec054bd1 100644
--- a/frontend/src/components/draggable/dirents-dragged-preview.js
+++ b/frontend/src/components/draggable/dirents-dragged-preview.js
@@ -45,11 +45,11 @@ class DirentsDraggedPreview extends React.Component {
 
   render() {
     let{ selectedDirentList } = this.props;
-    const inlineStyle = { 
-      position: 'absolute', 
-      opacity: 1, 
-      pointerEvents: 'none', 
-      display: 'block', 
+    const inlineStyle = {
+      position: 'absolute',
+      opacity: 1,
+      pointerEvents: 'none',
+      display: 'block',
       left: '-9999px',
       top: '-9999px',
       zIndex: 101,
diff --git a/frontend/src/components/dropdown-menu/item-dropdown-menu.js b/frontend/src/components/dropdown-menu/item-dropdown-menu.js
index f4ad32277f..62489630bb 100644
--- a/frontend/src/components/dropdown-menu/item-dropdown-menu.js
+++ b/frontend/src/components/dropdown-menu/item-dropdown-menu.js
@@ -105,12 +105,12 @@ class ItemDropdownMenu extends React.Component {
     if (tagName && tagName === 'button') {
       return (
         <ButtonDropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick} title={gettext('More Operations')}>
-          <DropdownToggle 
+          <DropdownToggle
             className={toggleClass}
-            data-toggle="dropdown" 
+            data-toggle="dropdown"
             title={gettext('More Operations')}
-            aria-expanded={this.state.isItemMenuShow} 
-            // onClick={this.onDropdownToggleClick} 
+            aria-expanded={this.state.isItemMenuShow}
+            // onClick={this.onDropdownToggleClick}
           >
           </DropdownToggle>
           <DropdownMenu>
@@ -134,7 +134,7 @@ class ItemDropdownMenu extends React.Component {
           tag={tagName || 'i'}
           className={toggleClass}
           title={gettext('More Operations')}
-          data-toggle="dropdown" 
+          data-toggle="dropdown"
           aria-expanded={this.state.isItemMenuShow}
           // onClick={this.onDropdownToggleClick}
         />
diff --git a/frontend/src/components/empty-tip.js b/frontend/src/components/empty-tip.js
index c94badfb85..a118289990 100644
--- a/frontend/src/components/empty-tip.js
+++ b/frontend/src/components/empty-tip.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { mediaUrl } from '../utils/constants';
 
-const propTypes = { 
+const propTypes = {
   forDialog: PropTypes.bool
 };
 
diff --git a/frontend/src/components/file-chooser/file-chooser.js b/frontend/src/components/file-chooser/file-chooser.js
index 02725e8100..71f7195019 100644
--- a/frontend/src/components/file-chooser/file-chooser.js
+++ b/frontend/src/components/file-chooser/file-chooser.js
@@ -288,8 +288,8 @@ class FileChooser extends React.Component {
 
     if (this.state.isResultGot && this.state.searchResults.length > 0) {
       return (
-        <SearchedListView 
-          searchResults={this.state.searchResults} 
+        <SearchedListView
+          searchResults={this.state.searchResults}
           onItemClick={this.onSearchedItemClick}
           onSearchedItemDoubleClick={this.onSearchedItemDoubleClick}
         />);
@@ -300,7 +300,7 @@ class FileChooser extends React.Component {
     if (item.type !== 'dir') {
       return;
     }
-    
+
     let selectedItemInfo = {
       repoID: item.repo_id,
       filePath: item.path,
@@ -383,12 +383,12 @@ class FileChooser extends React.Component {
               </div>
               {
                 this.state.isCurrentRepoShow && this.state.currentRepoInfo &&
-                <RepoListView 
+                <RepoListView
                   initToShowChildren={true}
                   currentRepoInfo={this.state.currentRepoInfo}
                   selectedRepo={this.state.selectedRepo}
                   selectedPath={this.state.selectedPath}
-                  onRepoItemClick={this.onRepoItemClick} 
+                  onRepoItemClick={this.onRepoItemClick}
                   onDirentItemClick={this.onDirentItemClick}
                   isShowFile={this.props.isShowFile}
                   fileSuffixes={this.props.fileSuffixes}
@@ -402,18 +402,18 @@ class FileChooser extends React.Component {
                 <span className="library">{gettext('Other Libraries')}</span>
               </div>
               {
-                this.state.isOtherRepoShow && 
-                <RepoListView 
+                this.state.isOtherRepoShow &&
+                <RepoListView
                   initToShowChildren={false}
                   repoList={this.state.repoList}
                   selectedRepo={this.state.selectedRepo}
                   selectedPath={this.state.selectedPath}
-                  onRepoItemClick={this.onRepoItemClick} 
+                  onRepoItemClick={this.onRepoItemClick}
                   onDirentItemClick={this.onDirentItemClick}
                   isShowFile={this.props.isShowFile}
                   fileSuffixes={this.props.fileSuffixes}
                   selectedItemInfo={this.state.selectedItemInfo}
-                /> 
+                />
               }
             </div>
           </Fragment>
@@ -426,12 +426,12 @@ class FileChooser extends React.Component {
             </div>
             {
               this.state.isCurrentRepoShow && this.state.currentRepoInfo &&
-              <RepoListView 
+              <RepoListView
                 initToShowChildren={true}
                 currentRepoInfo={this.state.currentRepoInfo}
                 selectedRepo={this.state.selectedRepo}
                 selectedPath={this.state.selectedPath}
-                onRepoItemClick={this.onRepoItemClick} 
+                onRepoItemClick={this.onRepoItemClick}
                 onDirentItemClick={this.onDirentItemClick}
                 isShowFile={this.props.isShowFile}
                 fileSuffixes={this.props.fileSuffixes}
@@ -447,17 +447,17 @@ class FileChooser extends React.Component {
                 <span className="item-toggle fa fa-caret-down"></span>
                 <span className="library">{gettext('Libraries')}</span>
               </div>
-              <RepoListView 
+              <RepoListView
                 initToShowChildren={false}
                 repoList={this.state.repoList}
                 selectedRepo={this.state.selectedRepo}
                 selectedPath={this.state.selectedPath}
-                onRepoItemClick={this.onRepoItemClick} 
+                onRepoItemClick={this.onRepoItemClick}
                 onDirentItemClick={this.onDirentItemClick}
                 isShowFile={this.props.isShowFile}
                 fileSuffixes={this.props.fileSuffixes}
                 selectedItemInfo={this.state.selectedItemInfo}
-              /> 
+              />
             </div>
           </div>
         )}
diff --git a/frontend/src/components/file-chooser/repo-list-item.js b/frontend/src/components/file-chooser/repo-list-item.js
index 92e12e2b5a..20d22783cd 100644
--- a/frontend/src/components/file-chooser/repo-list-item.js
+++ b/frontend/src/components/file-chooser/repo-list-item.js
@@ -101,7 +101,7 @@ class RepoListItem extends React.Component {
   loadNodeAndParentsByPath = (repoID, path) => {
 
     let tree = this.state.treeData.clone();
-   
+
     seafileAPI.listDir(repoID, path, {with_parents: true}).then(res => {
       let direntList = res.data.dirent_list;
       direntList = direntList.filter(item => item.type === 'dir');
@@ -169,13 +169,13 @@ class RepoListItem extends React.Component {
           <div className="item-left-icon">
             <span className={`item-toggle icon fa ${this.state.isShowChildren ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onToggleClick}></span>
             <i className="tree-node-icon">
-              <span className="icon far fa-folder tree-node-icon"></span> 
+              <span className="icon far fa-folder tree-node-icon"></span>
             </i>
           </div>
         </div>
         {this.state.isShowChildren && (
-          <TreeListView 
-            repo={this.props.repo} 
+          <TreeListView
+            repo={this.props.repo}
             onDirentItemClick={this.onDirentItemClick}
             selectedRepo={this.props.selectedRepo}
             selectedPath={this.props.selectedPath}
diff --git a/frontend/src/components/file-chooser/repo-list-view.js b/frontend/src/components/file-chooser/repo-list-view.js
index e7f4580bf9..4bb77683fa 100644
--- a/frontend/src/components/file-chooser/repo-list-view.js
+++ b/frontend/src/components/file-chooser/repo-list-view.js
@@ -28,13 +28,13 @@ class RepoListView extends React.Component {
       <ul className="list-view-content file-chooser-item">
         {repoList.length > 0 && repoList.map((repoItem, index) => {
           return (
-            <RepoListItem 
-              key={index} 
+            <RepoListItem
+              key={index}
               repo={repoItem}
               initToShowChildren={this.props.initToShowChildren}
               selectedRepo={this.props.selectedRepo}
               selectedPath={this.props.selectedPath}
-              onRepoItemClick={this.props.onRepoItemClick} 
+              onRepoItemClick={this.props.onRepoItemClick}
               onDirentItemClick={this.props.onDirentItemClick}
               isShowFile={this.props.isShowFile}
               fileSuffixes={this.props.fileSuffixes}
diff --git a/frontend/src/components/file-chooser/searched-list-item.js b/frontend/src/components/file-chooser/searched-list-item.js
index c6ad216777..2191315312 100644
--- a/frontend/src/components/file-chooser/searched-list-item.js
+++ b/frontend/src/components/file-chooser/searched-list-item.js
@@ -9,7 +9,7 @@ const propTypes = {
 };
 
 class SearchedListItem extends React.Component {
-  
+
   constructor(props) {
     super(props);
     this.state = {
@@ -32,7 +32,7 @@ class SearchedListItem extends React.Component {
 
   searchItemDoubleClick = (e) => {
     let item = this.props.item;
-   
+
     this.props.onSearchedItemDoubleClick(item);
   }
 
diff --git a/frontend/src/components/file-chooser/searched-list-view.js b/frontend/src/components/file-chooser/searched-list-view.js
index c0c960fd31..e7ef869bd0 100644
--- a/frontend/src/components/file-chooser/searched-list-view.js
+++ b/frontend/src/components/file-chooser/searched-list-view.js
@@ -34,10 +34,10 @@ class SearchedListView extends React.Component {
         <tbody>
           {this.props.searchResults.map((item, index) => {
             return (
-              <SearchedListItem 
-                key={index} 
-                item={item} 
-                currentItem={this.state.currentItem} 
+              <SearchedListItem
+                key={index}
+                item={item}
+                currentItem={this.state.currentItem}
                 onItemClick={this.onItemClick}
                 onSearchedItemDoubleClick={this.props.onSearchedItemDoubleClick}
               />);
diff --git a/frontend/src/components/file-chooser/tree-list-item.js b/frontend/src/components/file-chooser/tree-list-item.js
index 97714b4b5d..71f2c15906 100644
--- a/frontend/src/components/file-chooser/tree-list-item.js
+++ b/frontend/src/components/file-chooser/tree-list-item.js
@@ -40,7 +40,7 @@ class TreeViewItem extends React.Component {
     if (this.props.selectedRepo) {
       isCurrentRepo = this.props.selectedRepo.repo_id === this.props.repo.repo_id;
     }
-    
+
     if (isCurrentRepo) {
       if (this.props.selectedPath !== this.state.filePath) {
         this.props.onDirentItemClick(this.state.filePath, this.props.node.object);
@@ -68,7 +68,7 @@ class TreeViewItem extends React.Component {
               node={item}
               onNodeCollapse={this.props.onNodeCollapse}
               onNodeExpanded={this.props.onNodeExpanded}
-              repo={this.props.repo} 
+              repo={this.props.repo}
               onDirentItemClick={this.props.onDirentItemClick}
               selectedRepo={this.props.selectedRepo}
               selectedPath={this.props.selectedPath}
diff --git a/frontend/src/components/file-chooser/tree-list-view.js b/frontend/src/components/file-chooser/tree-list-view.js
index 8adc994339..181b069b60 100644
--- a/frontend/src/components/file-chooser/tree-list-view.js
+++ b/frontend/src/components/file-chooser/tree-list-view.js
@@ -14,7 +14,7 @@ const propTypes = {
 };
 
 class TreeListView extends React.Component {
-  
+
   render() {
     return(
       <div className="list-view-content" style={{'marginLeft': '-1.5rem'}}>
@@ -22,7 +22,7 @@ class TreeListView extends React.Component {
           node={this.props.treeData.root}
           onNodeCollapse={this.props.onNodeCollapse}
           onNodeExpanded={this.props.onNodeExpanded}
-          repo={this.props.repo} 
+          repo={this.props.repo}
           onDirentItemClick={this.props.onDirentItemClick}
           selectedRepo={this.props.selectedRepo}
           selectedPath={this.props.selectedPath}
diff --git a/frontend/src/components/file-content-view/image.js b/frontend/src/components/file-content-view/image.js
index ca88426297..2c68da75d7 100644
--- a/frontend/src/components/file-content-view/image.js
+++ b/frontend/src/components/file-content-view/image.js
@@ -12,7 +12,7 @@ const {
   xmindImageSrc // for xmind file
 } = window.app.pageOptions;
 
-let previousImageUrl, nextImageUrl; 
+let previousImageUrl, nextImageUrl;
 if (previousImage) {
   previousImageUrl = `${siteRoot}lib/${repoID}/file${Utils.encodePath(previousImage)}`;
 }
diff --git a/frontend/src/components/file-content-view/markdown.js b/frontend/src/components/file-content-view/markdown.js
index 4bcfa7fd3a..aa31af75cb 100644
--- a/frontend/src/components/file-content-view/markdown.js
+++ b/frontend/src/components/file-content-view/markdown.js
@@ -10,7 +10,7 @@ class FileContent extends React.Component {
     return (
       <div className="file-view-content flex-1 o-auto">
         <div className="md-content">
-          <MarkdownViewer 
+          <MarkdownViewer
             markdownContent={fileContent}
             showTOC={false}
           />
diff --git a/frontend/src/components/file-content-view/video.js b/frontend/src/components/file-content-view/video.js
index 7ee0238d24..c366469efc 100644
--- a/frontend/src/components/file-content-view/video.js
+++ b/frontend/src/components/file-content-view/video.js
@@ -9,19 +9,19 @@ const {
 
 class FileContent extends React.Component {
   render() {
-    const videoJsOptions = { 
+    const videoJsOptions = {
       autoplay: false,
       controls: true,
       preload: 'auto',
       sources: [{
         src: rawPath
-      }]  
-    };  
+      }]
+    };
     return (
       <div className="file-view-content flex-1 video-file-view">
         <VideoPlayer { ...videoJsOptions } />
       </div>
-    );  
+    );
   }
 }
 
diff --git a/frontend/src/components/file-uploader/file-uploader.js b/frontend/src/components/file-uploader/file-uploader.js
index a65afbf8c2..92a5c148f8 100644
--- a/frontend/src/components/file-uploader/file-uploader.js
+++ b/frontend/src/components/file-uploader/file-uploader.js
@@ -94,8 +94,8 @@ class FileUploader extends React.Component {
   }
 
   onbeforeunload = () => {
-    if (window.uploader && 
-        window.uploader.isUploadProgressDialogShow && 
+    if (window.uploader &&
+        window.uploader.isUploadProgressDialogShow &&
         window.uploader.totalProgress !== 100) {
       return '';
     }
@@ -157,7 +157,7 @@ class FileUploader extends React.Component {
     let allFilesUploaded = this.state.allFilesUploaded;
     if (allFilesUploaded === true) {
       this.setState({allFilesUploaded: false});
-    } 
+    }
 
     //get parent_dir relative_path
     let path = this.props.path === '/' ? '/' : this.props.path + '/';
@@ -208,7 +208,7 @@ class FileUploader extends React.Component {
           toaster.danger(errMessage);
         });
       }
-    } else { 
+    } else {
       this.setUploadFileList(this.resumable.files);
       if (!this.isUploadLinkLoaded) {
         this.isUploadLinkLoaded = true;
@@ -288,7 +288,7 @@ class FileUploader extends React.Component {
     if (this.timestamp) {
       let timeDiff = (now - this.timestamp);
       if (timeDiff < this.bitrateInterval) {
-        return this.state.uploadBitrate; 
+        return this.state.uploadBitrate;
       }
 
       // 1. Cancel will produce loaded greater than this.loaded
@@ -302,10 +302,10 @@ class FileUploader extends React.Component {
 
     this.timestamp = now;
     this.loaded = loaded;
-    
+
     return uploadBitrate;
   }
-  
+
   onProgress = () => {
     let progress = Math.round(this.resumable.progress() * 100);
     this.setState({totalProgress: progress});
@@ -395,7 +395,7 @@ class FileUploader extends React.Component {
     } else {
       // eg: '{"error": "Internal error" \n }'
       let errorMessage = message.replace(/\n/g, '');
-      errorMessage  = JSON.parse(errorMessage); 
+      errorMessage  = JSON.parse(errorMessage);
       error = errorMessage.error;
       if (error === 'File locked by others.') {
         error = gettext('File is locked by others.');
@@ -489,12 +489,12 @@ class FileUploader extends React.Component {
   onFileUpload = () => {
     this.uploadInput.current.removeAttribute('webkitdirectory');
 
-      this.uploadInput.current.click();
+    this.uploadInput.current.click();
   }
 
   onFolderUpload = () => {
     this.uploadInput.current.setAttribute('webkitdirectory', 'webkitdirectory');
-      this.uploadInput.current.click();
+    this.uploadInput.current.click();
   }
 
   onDragStart = () => {
@@ -534,7 +534,7 @@ class FileUploader extends React.Component {
   onCancelAllUploading = () => {
     let uploadFileList = this.state.uploadFileList.filter(item => {
       if (Math.round(item.progress() !== 1)) {
-        item.cancel(); 
+        item.cancel();
         return false;
       }
       return true;
@@ -555,7 +555,7 @@ class FileUploader extends React.Component {
 
     seafileAPI.getFileServerUploadLink(this.props.repoID, this.props.path).then(res => {
       this.resumable.opts.target = res.data + '?ret-json=1';
-      
+
       let retryFileList = this.state.retryFileList.filter(item => {
         return item.uniqueIdentifier !== resumableFile.uniqueIdentifier;
       });
@@ -566,7 +566,7 @@ class FileUploader extends React.Component {
         }
         return item;
       });
-  
+
       this.setState({
         retryFileList: retryFileList,
         uploadFileList: uploadFileList
@@ -585,7 +585,7 @@ class FileUploader extends React.Component {
         item.error = false;
         this.retryUploadFile(item);
       });
-      
+
       let uploadFileList = this.state.uploadFileList.slice(0);
       this.setState({
         retryFileList: [],
@@ -607,7 +607,7 @@ class FileUploader extends React.Component {
       let prefix = path === '/' ? (path + relative_path) : (path + '/' + relative_path);
       fileName = prefix + fileName;
     }
-    
+
     resumableFile.bootstrap();
     var firedRetry = false;
     resumableFile.resumableObj.on('chunkingComplete', () => {
@@ -617,9 +617,9 @@ class FileUploader extends React.Component {
           let blockSize = parseInt(resumableUploadFileBlockSize) * 1024 * 1024 || 1024 * 1024;
           let offset = Math.floor(uploadedBytes / blockSize);
           resumableFile.markChunksCompleted(offset);
-    
+
           resumableFile.resumableObj.upload();
-    
+
         }).catch(error => {
           let errMessage = Utils.getErrorMsg(error);
           toaster.danger(errMessage);
@@ -627,7 +627,7 @@ class FileUploader extends React.Component {
       }
       firedRetry = true;
     });
-    
+
   }
 
   replaceRepetitionFile = () => {
@@ -646,7 +646,7 @@ class FileUploader extends React.Component {
       toaster.danger(errMessage);
     });
   }
-  
+
   uploadFile = () => {
     let resumableFile = this.resumable.files[this.resumable.files.length - 1];
     let { repoID, path } = this.props;
diff --git a/frontend/src/components/file-uploader/upload-list-item.js b/frontend/src/components/file-uploader/upload-list-item.js
index df3a54ba97..1b8872eedf 100644
--- a/frontend/src/components/file-uploader/upload-list-item.js
+++ b/frontend/src/components/file-uploader/upload-list-item.js
@@ -33,7 +33,7 @@ class UploadListItem extends React.Component {
       if (resumableFile.remainingTime === 0 && !resumableFile.isSaved) {
         uploadState = UPLOAD_ISSAVING;
       }
-  
+
       if (resumableFile.isSaved) {
         uploadState = UPLOAD_UPLOADED;
       }
diff --git a/frontend/src/components/file-uploader/upload-progress-dialog.js b/frontend/src/components/file-uploader/upload-progress-dialog.js
index 7a94726e62..4d3194b5ed 100644
--- a/frontend/src/components/file-uploader/upload-progress-dialog.js
+++ b/frontend/src/components/file-uploader/upload-progress-dialog.js
@@ -44,7 +44,7 @@ class UploadProgressDialog extends React.Component {
 
   render() {
 
-    let uploadBitrate = Utils.formatBitRate(this.props.uploadBitrate)
+    let uploadBitrate = Utils.formatBitRate(this.props.uploadBitrate);
     let uploadedMessage = gettext('File Upload');
     let uploadingMessage = gettext('File Uploading...') + ' ' + this.props.totalProgress + '%' + ' (' + uploadBitrate + ')';
 
@@ -82,7 +82,7 @@ class UploadProgressDialog extends React.Component {
             <tbody>
               <tr>
                 <td className="text-right" colSpan={3}>
-                  {retryFileList.length > 0 ? 
+                  {retryFileList.length > 0 ?
                     <span className="cursor-pointer" onClick={this.props.onUploadRetryAll}>{gettext('Retry All')}</span>
                     :
                     <span className="cursor-pointer disabled-link">{gettext('Retry All')}</span>
@@ -104,9 +104,9 @@ class UploadProgressDialog extends React.Component {
               {
                 this.props.uploadFileList.map((resumableFile, index) => {
                   return (
-                    <UploadListItem 
-                      key={index} 
-                      resumableFile={resumableFile} 
+                    <UploadListItem
+                      key={index}
+                      resumableFile={resumableFile}
                       onUploadCancel={this.props.onUploadCancel}
                       onUploadRetry={this.props.onUploadRetry}
                     />
diff --git a/frontend/src/components/file-view/comment-panel.js b/frontend/src/components/file-view/comment-panel.js
index 76a523a7bc..a2d4bb3a4f 100644
--- a/frontend/src/components/file-view/comment-panel.js
+++ b/frontend/src/components/file-view/comment-panel.js
@@ -71,7 +71,7 @@ class CommentPanel extends React.Component {
       toaster.danger(Utils.getErrorMsg(err));
     });
     this.setState({ comment: '' });
-  } 
+  }
 
   onSubmit = () => {
     this.addParticipant(username);
diff --git a/frontend/src/components/file-view/file-info.js b/frontend/src/components/file-view/file-info.js
index 2ece013a04..7a75478134 100644
--- a/frontend/src/components/file-view/file-info.js
+++ b/frontend/src/components/file-view/file-info.js
@@ -4,7 +4,7 @@ import moment from 'moment';
 import { isPro, gettext, mediaUrl, siteRoot } from '../../utils/constants';
 import InternalLinkDialog from '../dialog/internal-link-dialog';
 
-const propTypes = { 
+const propTypes = {
   toggleStar: PropTypes.func.isRequired,
   isLocked: PropTypes.bool.isRequired,
   isStarred: PropTypes.bool.isRequired
diff --git a/frontend/src/components/file-view/file-toolbar.js b/frontend/src/components/file-view/file-toolbar.js
index 36799c44e6..07ce459d13 100644
--- a/frontend/src/components/file-view/file-toolbar.js
+++ b/frontend/src/components/file-view/file-toolbar.js
@@ -7,7 +7,7 @@ import { Utils } from '../../utils/utils';
 import ModalPortal from '../modal-portal';
 import ShareDialog from '../dialog/share-dialog';
 
-const propTypes = { 
+const propTypes = {
   isLocked: PropTypes.bool.isRequired,
   lockedByMe: PropTypes.bool.isRequired,
   onSave: PropTypes.func,
@@ -17,7 +17,7 @@ const propTypes = {
   toggleCommentPanel: PropTypes.func.isRequired
 };
 
-const { 
+const {
   canLockUnlockFile, canGenerateShareLink,
   repoID, repoName, repoEncrypted, parentDir, filePerm, filePath,
   fileName,
@@ -47,7 +47,7 @@ class FileToolbar extends React.Component {
   }
 
   render() {
-    const { isLocked, lockedByMe } = this.props; 
+    const { isLocked, lockedByMe } = this.props;
     let showLockUnlockBtn = false;
     let lockUnlockText, lockUnlockIcon;
     if (canLockUnlockFile) {
@@ -59,8 +59,8 @@ class FileToolbar extends React.Component {
         showLockUnlockBtn = true;
         lockUnlockText = gettext('Unlock');
         lockUnlockIcon = 'fa fa-unlock';
-      }   
-    }   
+      }
+    }
 
     let showShareBtn = false;
     if (repoEncrypted) {
@@ -104,8 +104,8 @@ class FileToolbar extends React.Component {
               href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}`}
             />
           )}
-          {(canEditFile && !err) && 
-            ( this.props.isSaving ? 
+          {(canEditFile && !err) &&
+            ( this.props.isSaving ?
               <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
                 <i className={'fa fa-spin fa-spinner'}/></button> :
               (
diff --git a/frontend/src/components/file-view/file-view-tip.js b/frontend/src/components/file-view/file-view-tip.js
index 2fdebc534e..8722cdd62c 100644
--- a/frontend/src/components/file-view/file-view-tip.js
+++ b/frontend/src/components/file-view/file-view-tip.js
@@ -25,7 +25,7 @@ class FileViewTip extends React.Component {
           <a href="?dl=1" className="btn btn-secondary">{gettext('Download')}</a>
         </div>
       </div>
-    );  
+    );
   }
 }
 FileViewTip.propTypes = propTypes;
diff --git a/frontend/src/components/file-view/file-view.js b/frontend/src/components/file-view/file-view.js
index 712b6b2fd5..1bd3c28f69 100644
--- a/frontend/src/components/file-view/file-view.js
+++ b/frontend/src/components/file-view/file-view.js
@@ -69,8 +69,8 @@ class FileView extends React.Component {
     if (this.state.isLocked) {
       seafileAPI.unlockfile(repoID, filePath).then((res) => {
         this.setState({
-          isLocked: false, 
-          lockedByMe: false 
+          isLocked: false,
+          lockedByMe: false
         });
       }).catch((error) => {
         const errorMsg = Utils.getErrorMsg(error);
@@ -86,7 +86,7 @@ class FileView extends React.Component {
         const errorMsg = Utils.getErrorMsg(error);
         toaster.danger(errorMsg);
       });
-    }    
+    }
   }
 
   render() {
@@ -98,7 +98,7 @@ class FileView extends React.Component {
             isLocked={this.state.isLocked}
             toggleStar={this.toggleStar}
           />
-          <FileToolbar 
+          <FileToolbar
             isLocked={this.state.isLocked}
             lockedByMe={this.state.lockedByMe}
             onSave={this.props.onSave}
diff --git a/frontend/src/components/history-list-view/history-list-item.js b/frontend/src/components/history-list-view/history-list-item.js
index 49b7415b0c..2fc09a7ca3 100644
--- a/frontend/src/components/history-list-view/history-list-item.js
+++ b/frontend/src/components/history-list-view/history-list-item.js
@@ -32,7 +32,7 @@ class HistoryListItem extends React.Component {
       this.setState({isShowOperationIcon: true});
     }
   }
-  
+
   onMouseLeave = () => {
     if (!this.props.isItemFreezed) {
       this.setState({isShowOperationIcon: false});
@@ -74,9 +74,9 @@ class HistoryListItem extends React.Component {
     let objID = this.props.currentItem.rev_file_id;
     let url = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: objID});
     return (
-      <li 
-        className={`history-list-item ${isHigtlightItem ? 'item-active' : ''}`} 
-        onMouseEnter={this.onMouseEnter} 
+      <li
+        className={`history-list-item ${isHigtlightItem ? 'item-active' : ''}`}
+        onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}
         onClick={this.onItemClick}
       >
@@ -89,11 +89,11 @@ class HistoryListItem extends React.Component {
         </div>
         <div className="history-operation">
           <Dropdown isOpen={this.state.isMenuShow} toggle={this.onToggleClick}>
-            <DropdownToggle 
-              tag='a' 
+            <DropdownToggle
+              tag='a'
               className={`fas fa-ellipsis-v ${(this.state.isShowOperationIcon || isHigtlightItem) ? '' : 'invisible'}`}
-              data-toggle="dropdown" 
-              aria-expanded={this.state.isMenuShow} 
+              data-toggle="dropdown"
+              aria-expanded={this.state.isMenuShow}
               alt={gettext('More Operations')}
             />
             <DropdownMenu>
diff --git a/frontend/src/components/history-list-view/history-list-view.js b/frontend/src/components/history-list-view/history-list-view.js
index 82a136d4ee..ed245aa13f 100644
--- a/frontend/src/components/history-list-view/history-list-view.js
+++ b/frontend/src/components/history-list-view/history-list-view.js
@@ -65,7 +65,7 @@ class HistoryListView extends React.Component {
         {this.props.historyList.map((item, index) => {
           return (
             <HisotyListItem
-              key={index} 
+              key={index}
               item={item}
               index={index}
               currentItem={this.state.currentItem}
diff --git a/frontend/src/components/history-trash-file-view/download.js b/frontend/src/components/history-trash-file-view/download.js
index e3259be571..1f2c9b44d3 100644
--- a/frontend/src/components/history-trash-file-view/download.js
+++ b/frontend/src/components/history-trash-file-view/download.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { gettext, siteRoot } from '../../utils/constants';
 
-const { 
+const {
   fileName, repoID, objID, path
 } = window.app.pageOptions;
 
diff --git a/frontend/src/components/history-trash-file-view/file-view-tip.js b/frontend/src/components/history-trash-file-view/file-view-tip.js
index 5a4a74c93d..966e3aa4b8 100644
--- a/frontend/src/components/history-trash-file-view/file-view-tip.js
+++ b/frontend/src/components/history-trash-file-view/file-view-tip.js
@@ -26,7 +26,7 @@ class FileViewTip extends React.Component {
           {canDownloadFile && <Download />}
         </div>
       </div>
-    );  
+    );
   }
 }
 FileViewTip.propTypes = propTypes;
diff --git a/frontend/src/components/icon-button.js b/frontend/src/components/icon-button.js
index 844d8b6cc4..8c192990f9 100644
--- a/frontend/src/components/icon-button.js
+++ b/frontend/src/components/icon-button.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Tooltip } from 'reactstrap';
 
-const propTypes = { 
+const propTypes = {
   id: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
   text: PropTypes.string.isRequired,
@@ -15,19 +15,19 @@ class IconButton extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { 
+    this.state = {
       tooltipOpen: false
-    };  
+    };
   }
 
   toggle = () => {
     this.setState({
       tooltipOpen: !this.state.tooltipOpen
-    }); 
+    });
   }
   render() {
     const className = 'btn-icon';
-    const btnContent = ( 
+    const btnContent = (
       <React.Fragment>
         <span className={this.props.icon}></span>
         <Tooltip
diff --git a/frontend/src/components/index-viewer.js b/frontend/src/components/index-viewer.js
index 8dba49a0b8..d3176da747 100644
--- a/frontend/src/components/index-viewer.js
+++ b/frontend/src/components/index-viewer.js
@@ -77,7 +77,7 @@ class IndexContentViewer extends React.Component {
   }
 
   onLinkClick = (event) => {
-    event.preventDefault(); 
+    event.preventDefault();
     const currentPath = event.target.getAttribute('data-path');
     if (currentPath === this.state.currentPath) {
       return;
@@ -106,7 +106,7 @@ class IndexContentViewer extends React.Component {
       if (item.type == 'image' && isPublicWiki) {
         url = item.data.src;
         const re = new RegExp(serviceURL + '/lib/' + repoID +'/file.*raw=1');
-        // different repo 
+        // different repo
         if (!re.test(url)) {
           return;
         }
@@ -116,7 +116,7 @@ class IndexContentViewer extends React.Component {
         const imagePath = url.substring(index + 5, index2);
         // replace url
         item.data.src = serviceURL + '/view-image-via-public-wiki/?slug=' + slug + '&path=' + imagePath;
-      } 
+      }
 
       else if (item.type == 'link') {
         url = item.data.href;
@@ -125,17 +125,17 @@ class IndexContentViewer extends React.Component {
         /* eslint-enable */
         let re = new RegExp(expression);
 
-        // Solving relative paths  
+        // Solving relative paths
         if (!re.test(url)) {
           item.data.href = serviceURL + '/published/' + slug + '/' + url;
         }
-        // change file url 
+        // change file url
         else if (Utils.isInternalMarkdownLink(url, repoID)) {
           let path = Utils.getPathFromInternalMarkdownLink(url, repoID);
           // replace url
           item.data.href = serviceURL + '/published/' + slug + path;
-        } 
-        // change dir url 
+        }
+        // change dir url
         else if (Utils.isInternalDirLink(url, repoID)) {
           let path = Utils.getPathFromInternalDirLink(url, repoID);
           // replace url
@@ -154,7 +154,7 @@ class IndexContentViewer extends React.Component {
       if (node.type === 'unordered_list' || node.type === 'ordered_list') {
         let treeRoot = this.transSlateToTree(node.children, this.treeRoot);
         this.setNodePath(treeRoot, '/');
-        this.treeRoot = treeRoot; 
+        this.treeRoot = treeRoot;
       }
     });
   }
@@ -163,7 +163,7 @@ class IndexContentViewer extends React.Component {
     let name = node.name;
     let path = parentNodePath === '/' ? parentNodePath + name : parentNodePath + '/' + name;
     node.path = path;
-    if (node.children.length > 0) {      
+    if (node.children.length > 0) {
       node.children.map(child => {
         this.setNodePath(child, path);
       });
diff --git a/frontend/src/components/logo.js b/frontend/src/components/logo.js
index e027732ef4..e98e497012 100644
--- a/frontend/src/components/logo.js
+++ b/frontend/src/components/logo.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from '../utils/constants'; 
+import { siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from '../utils/constants';
 
 const propTypes = {
   onCloseSidePanel: PropTypes.func,
@@ -12,7 +12,7 @@ class Logo extends React.Component {
   closeSide = () => {
     this.props.onCloseSidePanel();
   }
-  
+
   render() {
     return (
       <div className="top-logo">
@@ -20,11 +20,11 @@ class Logo extends React.Component {
           <img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" />
         </a>
         {this.props.showCloseSidePanelIcon &&
-          <a 
+          <a
             className="sf2-icon-x1 sf-popover-close side-panel-close action-icon d-md-none"
-            onClick={this.closeSide} 
-            title="Close" 
-            aria-label="Close" 
+            onClick={this.closeSide}
+            title="Close"
+            aria-label="Close"
           >
           </a>
         }
diff --git a/frontend/src/components/menu-control.js b/frontend/src/components/menu-control.js
index 0415ecce5c..07016f0501 100644
--- a/frontend/src/components/menu-control.js
+++ b/frontend/src/components/menu-control.js
@@ -7,7 +7,7 @@ const propTypes = {
 };
 
 class MenuControl extends React.Component {
- 
+
   render() {
     return (
       <i className={`fas fa-ellipsis-v ${this.props.isShow ? '' : 'invisible'}`} onClick={this.props.onClick}></i>
diff --git a/frontend/src/components/org-admin-group-nav.js b/frontend/src/components/org-admin-group-nav.js
index ae0d728b1a..3ebc772cc9 100644
--- a/frontend/src/components/org-admin-group-nav.js
+++ b/frontend/src/components/org-admin-group-nav.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@reach/router';
-import { siteRoot, gettext } from '../utils/constants'; 
+import { siteRoot, gettext } from '../utils/constants';
 
 const propTypes = {
   groupID: PropTypes.string.isRequired,
diff --git a/frontend/src/components/org-admin-user-nav.js b/frontend/src/components/org-admin-user-nav.js
index 3e15d5ab1d..2fdd2ceacc 100644
--- a/frontend/src/components/org-admin-user-nav.js
+++ b/frontend/src/components/org-admin-user-nav.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@reach/router';
-import { siteRoot, gettext } from '../utils/constants'; 
+import { siteRoot, gettext } from '../utils/constants';
 
 const propTypes = {
   email: PropTypes.string.isRequired,
diff --git a/frontend/src/components/paginator.js b/frontend/src/components/paginator.js
index 1335cbc6c6..610b33c0f1 100644
--- a/frontend/src/components/paginator.js
+++ b/frontend/src/components/paginator.js
@@ -26,13 +26,13 @@ class Paginator extends Component {
     const { currentPage, curPerPage } = this.props;
     this.updateURL(currentPage - 1, curPerPage);
     this.props.gotoPreviousPage();
-  } 
+  }
 
   goToNext = () => {
     const { currentPage, curPerPage } = this.props;
     this.updateURL(currentPage + 1, curPerPage);
     this.props.gotoNextPage();
-  } 
+  }
 
   updateURL = (page, perPage) => {
     let url = new URL(location.href);
diff --git a/frontend/src/components/permission-denied-tip.js b/frontend/src/components/permission-denied-tip.js
index 8097750d77..d3dd9fcbfc 100644
--- a/frontend/src/components/permission-denied-tip.js
+++ b/frontend/src/components/permission-denied-tip.js
@@ -4,11 +4,11 @@ import { gettext, loginUrl } from '../utils/constants';
 function PermissionDeniedTip() {
   let reloginUrl = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
   let errorTip = gettext('Permission denied. Please try {placeholder-left}login again.{placeholder-right}');
-  errorTip = errorTip.replace('{placeholder-left}', '<a class="action-link p-0" href='+ reloginUrl + '>')
+  errorTip = errorTip.replace('{placeholder-left}', '<a class="action-link p-0" href='+ reloginUrl + '>');
   errorTip = errorTip.replace('{placeholder-right}', '</a>');
   return(
     <span className="error" dangerouslySetInnerHTML={{__html: errorTip}}></span>
   );
-} 
+}
 
 export default PermissionDeniedTip;
\ No newline at end of file
diff --git a/frontend/src/components/rename.js b/frontend/src/components/rename.js
index 4f03795f81..23dba50365 100644
--- a/frontend/src/components/rename.js
+++ b/frontend/src/components/rename.js
@@ -86,12 +86,12 @@ class Rename extends React.Component {
   render() {
     return (
       <div className="rename-container">
-        <input 
-          ref="renameInput" 
-          value={this.state.name} 
-          onChange={this.onChange} 
-          onKeyPress={this.onKeyPress} 
-          onClick={this.onClick} 
+        <input
+          ref="renameInput"
+          value={this.state.name}
+          onChange={this.onChange}
+          onKeyPress={this.onKeyPress}
+          onClick={this.onClick}
         />
         <button className="btn btn-secondary sf2-icon-confirm confirm" onClick={this.onRenameConfirm}></button>
         <button className="btn btn-secondary sf2-icon-cancel cancel" onClick={this.onRenameCancel}></button>
diff --git a/frontend/src/components/repo-info-bar.js b/frontend/src/components/repo-info-bar.js
index ce9444a04c..7efe8c4ef1 100644
--- a/frontend/src/components/repo-info-bar.js
+++ b/frontend/src/components/repo-info-bar.js
@@ -46,7 +46,7 @@ class RepoInfoBar extends React.Component {
 
   toggleDrafts = () => {
     this.setState({
-      showRepoDrafts: !this.state.showRepoDrafts 
+      showRepoDrafts: !this.state.showRepoDrafts
     });
   }
 
@@ -78,13 +78,13 @@ class RepoInfoBar extends React.Component {
           </ul>
         )}
         <div className={(usedRepoTags.length > 0 && readmeMarkdown) ? 'file-info-list mt-1' : 'file-info-list'}>
-          {(readmeMarkdown !== null && parseInt(readmeMarkdown.size) > 1) && 
+          {(readmeMarkdown !== null && parseInt(readmeMarkdown.size) > 1) &&
             <span className="file-info" onClick={this.toggleReadme}>
               <span className="info-icon sf2-icon-readme"></span>
               <span className="used-tag-name">{readmeMarkdown.name}</span>
             </span>
           }
-          {(readmeMarkdown !== null && parseInt(readmeMarkdown.size) < 2) && 
+          {(readmeMarkdown !== null && parseInt(readmeMarkdown.size) < 2) &&
             <span className="file-info">
               <span className="info-icon sf2-icon-readme"></span>
               <a className="used-tag-name" href={href} target='_blank'>{readmeMarkdown.name}</a>
diff --git a/frontend/src/components/review-list-view/review-comment-dialog.js b/frontend/src/components/review-list-view/review-comment-dialog.js
index 586fe9b107..b9a509491f 100644
--- a/frontend/src/components/review-list-view/review-comment-dialog.js
+++ b/frontend/src/components/review-list-view/review-comment-dialog.js
@@ -32,7 +32,7 @@ class ReviewCommentDialog extends React.Component {
     this.setState({ comment: comment });
   }
 
-  submitComment = () => {    
+  submitComment = () => {
     const { quote, newIndex, oldIndex } = this.props;
     const comment = this.state.comment.trim();
     if (comment.length === 0) return;
diff --git a/frontend/src/components/review-list-view/review-comments.js b/frontend/src/components/review-list-view/review-comments.js
index bffced6536..c950a30edf 100644
--- a/frontend/src/components/review-list-view/review-comments.js
+++ b/frontend/src/components/review-list-view/review-comments.js
@@ -36,7 +36,7 @@ class ReviewComments extends React.Component {
   submitComment = () => {
     let comment = this.state.comment.trim();
     if (comment.length > 0) {
-      seafileAPI.postComment(draftRepoID, draftFilePath, comment).then(() => {        
+      seafileAPI.postComment(draftRepoID, draftFilePath, comment).then(() => {
         this.props.listComments();
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
@@ -101,7 +101,7 @@ class ReviewComments extends React.Component {
     }
     this.setState({ commentFooterHeight: rate });
   };
-  
+
   scrollToQuote = (newIndex, oldIndex, quote) => {
     this.props.scrollToQuote(newIndex, oldIndex, quote);
     this.setState({ comment: '' });
diff --git a/frontend/src/components/search/search.js b/frontend/src/components/search/search.js
index 3128a44ffb..4d450a42ae 100644
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -81,7 +81,7 @@ class Search extends Component {
   }
 
   getSearchResult(queryData) {
-    
+
     if(this.source){
       this.cancelRequest();
     }
@@ -129,7 +129,7 @@ class Search extends Component {
           _this.source = null;
           return;
         }
-  
+
         let items = _this.formatResultItems(res.data.results);
         _this.setState({
           resultItems: items,
@@ -267,9 +267,9 @@ class Search extends Component {
             <div className="search-container">
               <div className="input-icon">
                 <i className="search-icon-left input-icon-addon fas fa-search"></i>
-                <input 
-                  type="text" 
-                  className="form-control search-input" 
+                <input
+                  type="text"
+                  className="form-control search-input"
                   name="query"
                   placeholder={this.props.placeholder}
                   style={style}
@@ -294,15 +294,15 @@ class Search extends Component {
           <div className="search-icon-container">
             <i className="search-icon fas fa-search" onClick={this.onSearchToggle}></i>
           </div>
-          {this.state.isSearchInputShow && 
+          {this.state.isSearchInputShow &&
             <div className="search">
               <div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
               <div className="search-container">
                 <div className="input-icon">
                   <i className="search-icon-left input-icon-addon fas fa-search"></i>
-                  <input 
-                    type="text" 
-                    className="form-control search-input" 
+                  <input
+                    type="text"
+                    className="form-control search-input"
                     name="query"
                     placeholder={this.props.placeholder}
                     style={style}
diff --git a/frontend/src/components/search/wiki-search.js b/frontend/src/components/search/wiki-search.js
index 024d310c0e..9b153f2016 100644
--- a/frontend/src/components/search/wiki-search.js
+++ b/frontend/src/components/search/wiki-search.js
@@ -83,7 +83,7 @@ class Search extends Component {
   }
 
   getSearchResult(queryData) {
-    
+
     if(this.source){
       this.cancelRequest();
     }
@@ -245,9 +245,9 @@ class Search extends Component {
             <div className="search-container">
               <div className="input-icon">
                 <i className="search-icon-left input-icon-addon fas fa-search"></i>
-                <input 
-                  type="text" 
-                  className="form-control search-input" 
+                <input
+                  type="text"
+                  className="form-control search-input"
                   name="query"
                   placeholder={this.props.placeholder}
                   style={style}
@@ -268,15 +268,15 @@ class Search extends Component {
           <div className="search-icon-container">
             <i className="search-icon fas fa-search" onClick={this.onSearchToggle}></i>
           </div>
-          {this.state.isSearchInputShow && 
+          {this.state.isSearchInputShow &&
             <div className="search">
               <div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
               <div className="search-container">
                 <div className="input-icon">
                   <i className="search-icon-left input-icon-addon fas fa-search"></i>
-                  <input 
-                    type="text" 
-                    className="form-control search-input" 
+                  <input
+                    type="text"
+                    className="form-control search-input"
                     name="query"
                     placeholder={this.props.placeholder}
                     style={style}
diff --git a/frontend/src/components/select-editor/role-editor.js b/frontend/src/components/select-editor/role-editor.js
index d4c79a7c96..14d306343b 100644
--- a/frontend/src/components/select-editor/role-editor.js
+++ b/frontend/src/components/select-editor/role-editor.js
@@ -18,7 +18,7 @@ class RoleEditor extends React.Component {
     if (role === 'Admin') {
       return gettext('Admin');
     }
-    
+
     if (role === 'Member') {
       return gettext('Member');
     }
@@ -26,7 +26,7 @@ class RoleEditor extends React.Component {
 
   render() {
     return (
-      <SelectEditor 
+      <SelectEditor
         isTextMode={this.props.isTextMode}
         isEditIconShow={this.props.isEditIconShow}
         options={this.props.roles}
diff --git a/frontend/src/components/select-editor/select-editor.js b/frontend/src/components/select-editor/select-editor.js
index d14a592166..84674d34d2 100644
--- a/frontend/src/components/select-editor/select-editor.js
+++ b/frontend/src/components/select-editor/select-editor.js
@@ -103,9 +103,9 @@ class SelectEditor extends React.Component {
           <div>
             {this.props.translateOption(currentOption)}
             {this.props.isEditIconShow && (
-              <span 
-                title={gettext('Edit')} 
-                className="fa fa-pencil-alt attr-action-icon" 
+              <span
+                title={gettext('Edit')}
+                className="fa fa-pencil-alt attr-action-icon"
                 onClick={this.onEditPermission}>
               </span>
             )}
diff --git a/frontend/src/components/select-editor/share-link-permission-editor.js b/frontend/src/components/select-editor/share-link-permission-editor.js
index 6f97855214..fe4fdd129e 100644
--- a/frontend/src/components/select-editor/share-link-permission-editor.js
+++ b/frontend/src/components/select-editor/share-link-permission-editor.js
@@ -19,7 +19,7 @@ class ShareLinkPermissionEditor extends React.Component {
 
   render() {
     return (
-      <SelectEditor 
+      <SelectEditor
         isTextMode={this.props.isTextMode}
         isEditIconShow={this.props.isEditIconShow}
         options={this.props.permissionOptions}
diff --git a/frontend/src/components/select-editor/share-permission-editor.js b/frontend/src/components/select-editor/share-permission-editor.js
index 849b88e9d7..8e1646b0ac 100644
--- a/frontend/src/components/select-editor/share-permission-editor.js
+++ b/frontend/src/components/select-editor/share-permission-editor.js
@@ -23,7 +23,7 @@ class SharePermissionEditor extends React.Component {
 
   render() {
     return (
-      <SelectEditor 
+      <SelectEditor
         isTextMode={this.props.isTextMode}
         isEditIconShow={this.props.isEditIconShow}
         options={this.props.permissions}
diff --git a/frontend/src/components/select-editor/sysadmin-group-role-editor.js b/frontend/src/components/select-editor/sysadmin-group-role-editor.js
index 7b0073ac3b..c2ebf2fc3a 100644
--- a/frontend/src/components/select-editor/sysadmin-group-role-editor.js
+++ b/frontend/src/components/select-editor/sysadmin-group-role-editor.js
@@ -26,7 +26,7 @@ class SysAdminGroupRoleEditor extends React.Component {
 
   render() {
     return (
-      <SelectEditor 
+      <SelectEditor
         isTextMode={this.props.isTextMode}
         isEditIconShow={this.props.isEditIconShow}
         options={this.props.roleOptions}
diff --git a/frontend/src/components/select-editor/sysadmin-user-role-editor.js b/frontend/src/components/select-editor/sysadmin-user-role-editor.js
index 8b1cff839a..d9ab08bc37 100644
--- a/frontend/src/components/select-editor/sysadmin-user-role-editor.js
+++ b/frontend/src/components/select-editor/sysadmin-user-role-editor.js
@@ -26,7 +26,7 @@ class SysAdminUserRoleEditor extends React.Component {
 
   render() {
     return (
-      <SelectEditor 
+      <SelectEditor
         isTextMode={this.props.isTextMode}
         isEditIconShow={this.props.isEditIconShow}
         options={this.props.roleOptions}
diff --git a/frontend/src/components/select-editor/user-status-editor.js b/frontend/src/components/select-editor/user-status-editor.js
index 661eaeeee1..99215adacf 100644
--- a/frontend/src/components/select-editor/user-status-editor.js
+++ b/frontend/src/components/select-editor/user-status-editor.js
@@ -17,7 +17,7 @@ class UserStatusEditor extends React.Component {
     if (userStatus === 'active') {
       return gettext('Active');
     }
-    
+
     if (userStatus === 'inactive') {
       return gettext('Inactive');
     }
@@ -25,7 +25,7 @@ class UserStatusEditor extends React.Component {
 
   render() {
     return (
-      <SelectEditor 
+      <SelectEditor
         isTextMode={this.props.isTextMode}
         isEditIconShow={this.props.isEditIconShow}
         options={this.props.statusArray}
diff --git a/frontend/src/components/select-editor/wiki-permission-editor.js b/frontend/src/components/select-editor/wiki-permission-editor.js
index 42257cccb7..053c41253f 100644
--- a/frontend/src/components/select-editor/wiki-permission-editor.js
+++ b/frontend/src/components/select-editor/wiki-permission-editor.js
@@ -17,7 +17,7 @@ class WikiPermissionEditor extends React.Component {
     if (permission === 'private') {
       return gettext('Private');
     }
-    
+
     if (permission === 'public') {
       return gettext('Public');
     }
@@ -25,7 +25,7 @@ class WikiPermissionEditor extends React.Component {
 
   render() {
     return (
-      <SelectEditor 
+      <SelectEditor
         isTextMode={this.props.isTextMode}
         isEditIconShow={this.props.isEditIconShow}
         options={this.props.permissions}
diff --git a/frontend/src/components/send-link.js b/frontend/src/components/send-link.js
index 4ae938dd90..50c9f343ee 100644
--- a/frontend/src/components/send-link.js
+++ b/frontend/src/components/send-link.js
@@ -46,7 +46,7 @@ class SendLink extends React.Component {
       });
       return;
     }
- 
+
     this.setState({
       btnDisabled: true,
       sending: true
@@ -79,7 +79,7 @@ class SendLink extends React.Component {
         sending: false,
         errorMsg: errorMsg
       });
-    }); 
+    });
   }
 
   render() {
diff --git a/frontend/src/components/shared-link-file-uploader/file-uploader.js b/frontend/src/components/shared-link-file-uploader/file-uploader.js
index b3bcfa3bdb..852b1777d0 100644
--- a/frontend/src/components/shared-link-file-uploader/file-uploader.js
+++ b/frontend/src/components/shared-link-file-uploader/file-uploader.js
@@ -96,8 +96,8 @@ class FileUploader extends React.Component {
   }
 
   onbeforeunload = () => {
-    if (window.uploader && 
-        window.uploader.isUploadProgressDialogShow && 
+    if (window.uploader &&
+        window.uploader.isUploadProgressDialogShow &&
         window.uploader.totalProgress !== 100) {
       return '';
     }
@@ -159,7 +159,7 @@ class FileUploader extends React.Component {
     let allFilesUploaded = this.state.allFilesUploaded;
     if (allFilesUploaded === true) {
       this.setState({allFilesUploaded: false});
-    } 
+    }
 
     //get parent_dir relative_path
     let path = this.props.path === '/' ? '/' : this.props.path + '/';
@@ -212,7 +212,7 @@ class FileUploader extends React.Component {
           toaster.danger(errMessage);
         });
       }
-    } else { 
+    } else {
       this.setUploadFileList(this.resumable.files);
       if (!this.isUploadLinkLoaded) {
         this.isUploadLinkLoaded = true;
@@ -292,7 +292,7 @@ class FileUploader extends React.Component {
     if (this.timestamp) {
       let timeDiff = (now - this.timestamp);
       if (timeDiff < this.bitrateInterval) {
-        return this.state.uploadBitrate; 
+        return this.state.uploadBitrate;
       }
 
       // 1. Cancel will produce loaded greater than this.loaded
@@ -306,10 +306,10 @@ class FileUploader extends React.Component {
 
     this.timestamp = now;
     this.loaded = loaded;
-    
+
     return uploadBitrate;
   }
-  
+
   onProgress = () => {
     let progress = Math.round(this.resumable.progress() * 100);
     this.setState({totalProgress: progress});
@@ -405,7 +405,7 @@ class FileUploader extends React.Component {
     } else {
       // eg: '{"error": "Internal error" \n }'
       let errorMessage = message.replace(/\n/g, '');
-      errorMessage  = JSON.parse(errorMessage); 
+      errorMessage  = JSON.parse(errorMessage);
       error = errorMessage.error;
       if (error === 'File locked by others.') {
         error = gettext('File is locked by others.');
@@ -544,7 +544,7 @@ class FileUploader extends React.Component {
   onCancelAllUploading = () => {
     let uploadFileList = this.state.uploadFileList.filter(item => {
       if (Math.round(item.progress() !== 1)) {
-        item.cancel(); 
+        item.cancel();
         return false;
       }
       return true;
@@ -566,7 +566,7 @@ class FileUploader extends React.Component {
     let { token } = this.props;
     seafileAPI.sharedLinkGetFileUploadUrl(token).then(res => {
       this.resumable.opts.target = res.data.upload_link + '?ret-json=1';
-      
+
       let retryFileList = this.state.retryFileList.filter(item => {
         return item.uniqueIdentifier !== resumableFile.uniqueIdentifier;
       });
@@ -577,7 +577,7 @@ class FileUploader extends React.Component {
         }
         return item;
       });
-  
+
       this.setState({
         retryFileList: retryFileList,
         uploadFileList: uploadFileList
@@ -597,7 +597,7 @@ class FileUploader extends React.Component {
         item.error = false;
         this.retryUploadFile(item);
       });
-      
+
       let uploadFileList = this.state.uploadFileList.slice(0);
       this.setState({
         retryFileList: [],
@@ -619,7 +619,7 @@ class FileUploader extends React.Component {
       let prefix = path === '/' ? (path + relative_path) : (path + '/' + relative_path);
       fileName = prefix + fileName;
     }
-    
+
     resumableFile.bootstrap();
     var firedRetry = false;
     resumableFile.resumableObj.on('chunkingComplete', () => {
@@ -629,9 +629,9 @@ class FileUploader extends React.Component {
           let blockSize = parseInt(resumableUploadFileBlockSize) * 1024 * 1024 || 1024 * 1024;
           let offset = Math.floor(uploadedBytes / blockSize);
           resumableFile.markChunksCompleted(offset);
-    
+
           resumableFile.resumableObj.upload();
-    
+
         }).catch(error => {
           let errMessage = Utils.getErrorMsg(error);
           toaster.danger(errMessage);
diff --git a/frontend/src/components/shared-link-file-uploader/upload-list-item.js b/frontend/src/components/shared-link-file-uploader/upload-list-item.js
index df3a54ba97..1b8872eedf 100644
--- a/frontend/src/components/shared-link-file-uploader/upload-list-item.js
+++ b/frontend/src/components/shared-link-file-uploader/upload-list-item.js
@@ -33,7 +33,7 @@ class UploadListItem extends React.Component {
       if (resumableFile.remainingTime === 0 && !resumableFile.isSaved) {
         uploadState = UPLOAD_ISSAVING;
       }
-  
+
       if (resumableFile.isSaved) {
         uploadState = UPLOAD_UPLOADED;
       }
diff --git a/frontend/src/components/shared-link-file-uploader/upload-progress-dialog.js b/frontend/src/components/shared-link-file-uploader/upload-progress-dialog.js
index 8d4aafdb81..4d3194b5ed 100644
--- a/frontend/src/components/shared-link-file-uploader/upload-progress-dialog.js
+++ b/frontend/src/components/shared-link-file-uploader/upload-progress-dialog.js
@@ -82,7 +82,7 @@ class UploadProgressDialog extends React.Component {
             <tbody>
               <tr>
                 <td className="text-right" colSpan={3}>
-                  {retryFileList.length > 0 ? 
+                  {retryFileList.length > 0 ?
                     <span className="cursor-pointer" onClick={this.props.onUploadRetryAll}>{gettext('Retry All')}</span>
                     :
                     <span className="cursor-pointer disabled-link">{gettext('Retry All')}</span>
@@ -104,9 +104,9 @@ class UploadProgressDialog extends React.Component {
               {
                 this.props.uploadFileList.map((resumableFile, index) => {
                   return (
-                    <UploadListItem 
-                      key={index} 
-                      resumableFile={resumableFile} 
+                    <UploadListItem
+                      key={index}
+                      resumableFile={resumableFile}
                       onUploadCancel={this.props.onUploadCancel}
                       onUploadRetry={this.props.onUploadRetry}
                     />
diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
index 4b43cf1b63..ef58c04371 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -71,7 +71,7 @@ class SharedRepoListItem extends React.Component {
       });
     }
   }
-  
+
   onMouseLeave = () => {
     if (!this.props.isItemFreezed) {
       this.setState({
@@ -91,7 +91,7 @@ class SharedRepoListItem extends React.Component {
       this.setState({isItemMenuShow: !this.state.isItemMenuShow});
       return;
     }
-    
+
     this.setState(
       {isItemMenuShow: !this.state.isItemMenuShow},
       () => {
@@ -110,7 +110,7 @@ class SharedRepoListItem extends React.Component {
 
   getRepoComputeParams = () => {
     let repo = this.props.repo;
-    
+
     let iconUrl = Utils.getLibIconUrl(repo);
     let iconTitle = Utils.getLibIconTitle(repo);
     let libPath = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
@@ -168,7 +168,7 @@ class SharedRepoListItem extends React.Component {
     this.props.onItemRename(this.props.repo, name);
     this.onRenameCancel();
   }
-  
+
   onRenameCancel = () => {
     this.props.onUnfreezedItem();
     this.setState({isRenaming: !this.state.isRenaming});
@@ -207,12 +207,12 @@ class SharedRepoListItem extends React.Component {
     const groupID = currentGroup.id;
 
     seafileAPI.deleteGroupOwnedLibrary(groupID, repo.repo_id).then(() => {
-      
+
       this.setState({
         isRepoDeleted: true,
         isDeleteDialogShow: false,
       });
-      
+
       this.props.onItemDelete(repo);
       let name = repo.repo_name;
       var msg = gettext('Successfully deleted {name}.').replace('{name}', name);
@@ -307,10 +307,10 @@ class SharedRepoListItem extends React.Component {
             operations.push('Share Links Admin');
             if (repo.encrypted) {
               operations.push('Change Password');
-            }   
+            }
             if (repo.encrypted && enableResetEncryptedRepoPassword && isEmailConfigured) {
               operations.push('Reset Password');
-            }   
+            }
             operations.push('History Setting', 'API Token', 'Details');
           } else {
             operations.push('Unshare');
@@ -333,7 +333,7 @@ class SharedRepoListItem extends React.Component {
       }
     }
     return operations;
-  } 
+  }
 
   generatorMobileMenu = () => {
     let operations = [];
@@ -355,11 +355,11 @@ class SharedRepoListItem extends React.Component {
     }
     return (
       <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-        <DropdownToggle 
-          tag="i" 
+        <DropdownToggle
+          tag="i"
           className="sf-dropdown-toggle fa fa-ellipsis-v ml-0"
-          title={gettext('More Operations')} 
-          data-toggle="dropdown" 
+          title={gettext('More Operations')}
+          data-toggle="dropdown"
           aria-expanded={this.state.isItemMenuShow}
           onClick={this.clickOperationMenuToggle}
         />
@@ -392,18 +392,18 @@ class SharedRepoListItem extends React.Component {
     const shareOperation   = <a href="#" className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></a>;
     const unshareOperation = <a href="#" className="op-icon sf2-icon-x3" title={gettext('Unshare')} onClick={this.onItemUnshare}></a>;
     const deleteOperation  = <a href="#" className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDeleteToggle}></a>;
-    
+
     if (this.isDeparementOnwerGroupMember) {
       return (
         <Fragment>
           {shareOperation}
           {deleteOperation}
           <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-            <DropdownToggle 
-              tag="i" 
-              className="sf-dropdown-toggle sf2-icon-caret-down" 
+            <DropdownToggle
+              tag="i"
+              className="sf-dropdown-toggle sf2-icon-caret-down"
               title={gettext('More Operations')}
-              data-toggle="dropdown" 
+              data-toggle="dropdown"
               aria-expanded={this.state.isItemMenuShow}
               onClick={this.clickOperationMenuToggle}
             />
@@ -465,8 +465,8 @@ class SharedRepoListItem extends React.Component {
           </td>
           <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
           <td>
-            {this.state.isRenaming ? 
-              <Rename  name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> : 
+            {this.state.isRenaming ?
+              <Rename  name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
               <Link to={libPath}>{repo.repo_name}</Link>
             }
           </td>
@@ -478,7 +478,7 @@ class SharedRepoListItem extends React.Component {
       </Fragment>
     );
   }
-  
+
   renderMobileUI = () => {
     let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
     let { repo } = this.props;
@@ -487,9 +487,9 @@ class SharedRepoListItem extends React.Component {
         <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
           <td><img src={iconUrl} title={iconTitle} width="24" alt={iconTitle}/></td>
           <td>
-            {this.state.isRenaming ? 
+            {this.state.isRenaming ?
               <Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> :
-              <Link to={libPath}>{repo.repo_name}</Link>  
+              <Link to={libPath}>{repo.repo_name}</Link>
             }
             <br />
             <span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span>
@@ -510,7 +510,7 @@ class SharedRepoListItem extends React.Component {
         {Utils.isDesktop() ? this.renderPCUI() : this.renderMobileUI()}
         {this.state.isShowSharedDialog && (
           <ModalPortal>
-            <ShareDialog 
+            <ShareDialog
               itemType={'library'}
               itemName={repo.repo_name}
               itemPath={'/'}
@@ -534,7 +534,7 @@ class SharedRepoListItem extends React.Component {
             />
           </ModalPortal>
         )}
-        {this.state.isDeleteDialogShow && 
+        {this.state.isDeleteDialogShow &&
           <ModalPortal>
             <DeleteRepoDialog
               repo={this.props.repo}
diff --git a/frontend/src/components/system-notification.js b/frontend/src/components/system-notification.js
index d66f134771..71d6b1f755 100644
--- a/frontend/src/components/system-notification.js
+++ b/frontend/src/components/system-notification.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { curNoteMsg, curNoteID, siteRoot, gettext } from '../utils/constants'; 
+import { curNoteMsg, curNoteID, siteRoot, gettext } from '../utils/constants';
 
 import '../css/system-notification.css';
 
@@ -34,7 +34,7 @@ class SystemNotification extends React.Component {
       }
     }
   }
-  
+
   render() {
     if (!curNoteMsg || this.state.isClosed) {
       return null;
diff --git a/frontend/src/components/terms-preview-widget.js b/frontend/src/components/terms-preview-widget.js
index a969032ded..bf5193c2ba 100644
--- a/frontend/src/components/terms-preview-widget.js
+++ b/frontend/src/components/terms-preview-widget.js
@@ -15,7 +15,7 @@ class TermsPreviewWidget extends React.Component {
     this.state = {
       innerHtml: null,
       isFormatValue: true,
-    }
+    };
   }
 
   componentDidMount() {
diff --git a/frontend/src/components/toolbar/common-toolbar.js b/frontend/src/components/toolbar/common-toolbar.js
index 74f7b8a020..1536efcc5d 100644
--- a/frontend/src/components/toolbar/common-toolbar.js
+++ b/frontend/src/components/toolbar/common-toolbar.js
@@ -18,10 +18,10 @@ class  CommonToolbar extends React.Component {
     return (
       <div className="common-toolbar">
         {isPro && (
-          <Search 
+          <Search
             repoID={this.props.repoID}
             placeholder={searchPlaceholder}
-            onSearchedClick={this.props.onSearchedClick} 
+            onSearchedClick={this.props.onSearchedClick}
           />
         )}
         <Notification />
diff --git a/frontend/src/components/toolbar/dir-operation-toolbar.js b/frontend/src/components/toolbar/dir-operation-toolbar.js
index 16cfd2cae4..a39b467ac0 100644
--- a/frontend/src/components/toolbar/dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/dir-operation-toolbar.js
@@ -83,7 +83,7 @@ class DirOperationToolbar extends React.Component {
     this.setState({isUploadMenuShow: false});
     this.props.onUploadFile(e);
   }
-  
+
   onUploadFolder = (e) => {
     this.setState({isUploadMenuShow: false});
     this.props.onUploadFolder(e);
@@ -241,7 +241,7 @@ class DirOperationToolbar extends React.Component {
         )}
         {this.state.isShareDialogShow &&
           <ModalPortal>
-            <ShareDialog 
+            <ShareDialog
               itemType={itemType}
               itemName={itemName}
               itemPath={this.props.path}
diff --git a/frontend/src/components/toolbar/general-toolbar.js b/frontend/src/components/toolbar/general-toolbar.js
index d118b16091..ddd93c0457 100644
--- a/frontend/src/components/toolbar/general-toolbar.js
+++ b/frontend/src/components/toolbar/general-toolbar.js
@@ -16,15 +16,15 @@ class GeneralToolbar extends React.Component {
     return (
       <div className="main-panel-north">
         <div className="cur-view-toolbar">
-          <span 
-            className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" 
-            title="Side Nav Menu" 
+          <span
+            className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none"
+            title="Side Nav Menu"
             onClick={onShowSidePanel}>
           </span>
         </div>
-        <CommonToolbar 
+        <CommonToolbar
           searchPlaceholder={this.props.searchPlaceholder}
-          onSearchedClick={onSearchedClick} 
+          onSearchedClick={onSearchedClick}
         />
       </div>
     );
diff --git a/frontend/src/components/toolbar/markdown-viewer-toolbar.js b/frontend/src/components/toolbar/markdown-viewer-toolbar.js
index 91bd5c3d52..ad157d252c 100644
--- a/frontend/src/components/toolbar/markdown-viewer-toolbar.js
+++ b/frontend/src/components/toolbar/markdown-viewer-toolbar.js
@@ -156,7 +156,7 @@ class MarkdownViewerToolbar extends React.Component {
                 {(canLockUnlockFile && lockedByMe) &&
                   <IconButton id="lock-unlock-file" icon='fa fa-unlock' text={gettext('Unlock')} onMouseDown={this.props.toggleLockFile}/>
                 }
-                {canGenerateShareLink && 
+                {canGenerateShareLink &&
                   <IconButton id={'shareBtn'} text={gettext('Share')} icon={'fa fa-share-alt'}
                     onMouseDown={this.props.toggleShareLinkDialog}/>
                 }
@@ -168,7 +168,7 @@ class MarkdownViewerToolbar extends React.Component {
                   <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
                     <i className={'fa fa-spin fa-spinner'}/></button>
                   :
-                  <IconButton text={gettext('Save')} id={'saveButton'} icon={'fa fa-save'}  disabled={!contentChanged} 
+                  <IconButton text={gettext('Save')} id={'saveButton'} icon={'fa fa-save'}  disabled={!contentChanged}
                     onMouseDown={window.seafileEditor && window.seafileEditor.onRichEditorSave} isActive={contentChanged}/>
                 }
               </ButtonGroup>
@@ -194,7 +194,7 @@ class MarkdownViewerToolbar extends React.Component {
                   <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
                     <i className={'fa fa-spin fa-spinner'}/></button>
                   :
-                  <IconButton text={gettext('Save')} id={'saveButton'} icon={'fa fa-save'}  disabled={!contentChanged} 
+                  <IconButton text={gettext('Save')} id={'saveButton'} icon={'fa fa-save'}  disabled={!contentChanged}
                     onMouseDown={window.seafileEditor && window.seafileEditor.onRichEditorSave} isActive={contentChanged}/>
                 }
               </ButtonGroup>
diff --git a/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js b/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
index f147de1e7b..5f3c01bf76 100644
--- a/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
@@ -56,7 +56,7 @@ class MultipleDirOperationToolbar extends React.Component {
       fileTagList: [],
       multiFileTagList: [],
       showRelatedFileDialog: false,
-      viewMode: 'list_related_file',     
+      viewMode: 'list_related_file',
       isRenameDialogOpen: false,
       isPermissionDialogOpen: false
     };
@@ -170,7 +170,7 @@ class MultipleDirOperationToolbar extends React.Component {
       case 'History':
         this.onHistory(dirent);
         break;
-      case 'Access Log': 
+      case 'Access Log':
         this.onAccessLog(dirent);
         break;
       case 'Open via Client':
@@ -327,7 +327,7 @@ class MultipleDirOperationToolbar extends React.Component {
     const dirent = this.props.selectedDirentList[0];
 
     let direntPath = this.getDirentPath(dirent);
-    
+
     return (
       <Fragment>
         <div className="dir-operation">
@@ -356,8 +356,8 @@ class MultipleDirOperationToolbar extends React.Component {
           </div>
         </div>
         {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} />}
-        {this.state.isMoveDialogShow && 
-          <MoveDirentDialog 
+        {this.state.isMoveDialogShow &&
+          <MoveDirentDialog
             path={this.props.path}
             repoID={this.props.repoID}
             repoEncrypted={this.props.repoEncrypted}
diff --git a/frontend/src/components/toolbar/repo-view-toobar.js b/frontend/src/components/toolbar/repo-view-toobar.js
index 7b8c9bf890..90c975de59 100644
--- a/frontend/src/components/toolbar/repo-view-toobar.js
+++ b/frontend/src/components/toolbar/repo-view-toobar.js
@@ -14,7 +14,7 @@ const propTypes = {
 };
 
 class RepoViewToolbar extends React.Component {
-  
+
   constructor(props) {
     super(props);
     this.state = {
@@ -63,7 +63,7 @@ class RepoViewToolbar extends React.Component {
         </div>
         {this.state.isCreateRepoDialogShow && (
           <ModalPortal>
-            <CreateRepoDialog 
+            <CreateRepoDialog
               libraryType={this.props.libraryType}
               onCreateRepo={this.onCreateRepo}
               onCreateToggle={this.onCreateToggle}
diff --git a/frontend/src/components/toolbar/view-file-toolbar.js b/frontend/src/components/toolbar/view-file-toolbar.js
index 079f87ff6f..4d7a61eee5 100644
--- a/frontend/src/components/toolbar/view-file-toolbar.js
+++ b/frontend/src/components/toolbar/view-file-toolbar.js
@@ -118,7 +118,7 @@ class ViewFileToolbar extends React.Component {
                 {gettext('More')}
               </DropdownToggle>
               <DropdownMenu>
-                {this.props.showShareBtn && 
+                {this.props.showShareBtn &&
                   <DropdownItem onClick={this.onShareToggle}>{gettext('Share')}</DropdownItem>
                 }
                 <DropdownItem onClick={this.onEditFileTagToggle}>{gettext('Tags')}</DropdownItem>
@@ -130,7 +130,7 @@ class ViewFileToolbar extends React.Component {
         </div>
         {this.state.isShareDialogShow && (
           <ModalPotal>
-            <ShareDialog 
+            <ShareDialog
               itemType={'file'}
               itemName={Utils.getFileName(this.props.path)}
               itemPath={this.props.path}
diff --git a/frontend/src/components/tree-view/tree-helper.js b/frontend/src/components/tree-view/tree-helper.js
index 0ad75f2871..ca1aa5280f 100644
--- a/frontend/src/components/tree-view/tree-helper.js
+++ b/frontend/src/components/tree-view/tree-helper.js
@@ -93,7 +93,7 @@ class TreeHelper {
     let treeCopy = tree.clone();
     let destNode = treeCopy.getNodeByPath(destPath);
     if (destNode) {
-      nodePaths.forEach(nodePath => { 
+      nodePaths.forEach(nodePath => {
         let node = treeCopy.getNodeByPath(nodePath);
         treeCopy.moveNode(node, destNode);
       });
@@ -117,7 +117,7 @@ class TreeHelper {
     }
     return treeCopy;
   }
-  
+
   copyNodeListByPaths(tree, nodePaths, destPath) {
     let treeCopy = tree.clone();
     let destNode = treeCopy.getNodeByPath(destPath);
diff --git a/frontend/src/components/tree-view/tree-node-view.js b/frontend/src/components/tree-view/tree-node-view.js
index f55d352b8e..69804be597 100644
--- a/frontend/src/components/tree-view/tree-node-view.js
+++ b/frontend/src/components/tree-view/tree-node-view.js
@@ -44,7 +44,7 @@ class TreeNodeView extends React.Component {
       });
     }
   }
-  
+
   onMouseEnter = () => {
     if (!this.props.isItemFreezed) {
       this.setState({
@@ -154,7 +154,7 @@ class TreeNodeView extends React.Component {
         if (suffix === '.png' || suffix === '.jpg' || suffix === '.jpeg' || suffix === '.gif' || suffix === '.bmp') {
           icon = <i className="far fa-image"></i>;
           type = 'image';
-        } 
+        }
         else if (suffix === '.md' || suffix === '.markdown') {
           icon = <i className="far fa-file-alt"></i>;
           type = 'file';
@@ -174,7 +174,7 @@ class TreeNodeView extends React.Component {
     if (node.object.type === 'dir') {
       return [NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE];
     }
-    
+
     return [RENAME, DELETE, COPY, MOVE, OPEN_VIA_CLIENT];
   }
 
@@ -187,7 +187,7 @@ class TreeNodeView extends React.Component {
       <div className="children" style={{paddingLeft: paddingLeft}}>
         {node.children.map(item => {
           return (
-            <TreeNodeView 
+            <TreeNodeView
               key={item.path}
               node={item}
               paddingLeft={paddingLeft}
@@ -223,11 +223,11 @@ class TreeNodeView extends React.Component {
     }
     return (
       <div className="tree-node">
-        <div 
-          type={type} 
+        <div
+          type={type}
           className={`tree-node-inner text-nowrap ${hlClass} ${node.path === '/'? 'hide': ''} ${this.state.isNodeDropShow ? 'tree-node-drop' : ''}`}
           title={node.object.name}
-          onMouseEnter={this.onMouseEnter} 
+          onMouseEnter={this.onMouseEnter}
           onMouseOver={this.onMouseOver}
           onMouseLeave={this.onMouseLeave}
           onMouseDown={this.onItemMouseDown}
@@ -237,7 +237,7 @@ class TreeNodeView extends React.Component {
           <div className="tree-node-text" draggable="true" onDragStart={this.onNodeDragStart} onDragEnter={this.onNodeDragEnter} onDragLeave={this.onNodeDragLeave} onDragOver={this.onNodeDragMove} onDrop={this.onNodeDrop}>{node.object.name}</div>
           <div className="left-icon">
             {type === 'dir' && (!node.isLoaded ||  (node.isLoaded && node.hasChildren())) && (
-              <i 
+              <i
                 className={`folder-toggle-icon fa ${node.isExpanded ? 'fa-caret-down' : 'fa-caret-right'}`}
                 onMouseDown={e => e.stopPropagation()}
                 onClick={this.onLoadToggle}
@@ -248,7 +248,7 @@ class TreeNodeView extends React.Component {
           {isNodeMenuShow && (
             <div className="right-icon">
               {((this.props.repoPermission || permission) && this.state.isShowOperationMenu) && (
-                <ItemDropdownMenu 
+                <ItemDropdownMenu
                   item={this.props.node}
                   toggleClass={'fas fa-ellipsis-v'}
                   getMenuList={this.caculateMenuList}
diff --git a/frontend/src/components/tree-view/tree-node.js b/frontend/src/components/tree-view/tree-node.js
index da86841362..e6e90f11f4 100644
--- a/frontend/src/components/tree-view/tree-node.js
+++ b/frontend/src/components/tree-view/tree-node.js
@@ -76,7 +76,7 @@ class TreeNode {
 
   rename(newName) {
     this.object.name = newName;
-    this.path = this.generatePath(this.parentNode); 
+    this.path = this.generatePath(this.parentNode);
     if (this.isExpanded) {
       this.updateChildrenPath(this);
     } else {
diff --git a/frontend/src/components/tree-view/tree-view.js b/frontend/src/components/tree-view/tree-view.js
index e6193e9f42..eb1dd37a37 100644
--- a/frontend/src/components/tree-view/tree-view.js
+++ b/frontend/src/components/tree-view/tree-view.js
@@ -43,7 +43,7 @@ class TreeView extends React.Component {
     }
     let dragStartNodeData = {nodeDirent: node.object, nodeParentPath: node.parentNode.path, nodeRootPath: node.path};
     dragStartNodeData = JSON.stringify(dragStartNodeData);
-    
+
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('applicaiton/drag-item-info', dragStartNodeData);
   }
@@ -199,22 +199,22 @@ class TreeView extends React.Component {
 
   onContextMenu = (event) => {
     event.preventDefault();
-  
+
     let currentRepoInfo = this.props.currentRepoInfo;
     if (currentRepoInfo.permission !== 'admin' && currentRepoInfo.permission !== 'rw') {
       return '';
     }
     this.handleContextClick(event);
   }
-  
+
   handleContextClick = (event, node) => {
     event.preventDefault();
     event.stopPropagation();
-    
+
     if (!this.props.isNodeMenuShow) {
       return;
     }
-    
+
     let x = event.clientX || (event.touches && event.touches[0].pageX);
     let y = event.clientY || (event.touches && event.touches[0].pageY);
 
@@ -228,7 +228,7 @@ class TreeView extends React.Component {
     hideMenu();
 
     let menuList = this.getMenuList(node);
-    
+
     let showMenuConfig = {
       id: 'tree-node-contextmenu',
       position: { x, y },
@@ -236,7 +236,7 @@ class TreeView extends React.Component {
       currentObject: node,
       menuList: menuList,
     };
-    
+
     showMenu(showMenuConfig);
   }
 
@@ -253,7 +253,7 @@ class TreeView extends React.Component {
       menuList = [NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE];
     } else {
       menuList = [RENAME, DELETE, COPY, MOVE, OPEN_VIA_CLIENT];
-    } 
+    }
 
     return menuList;
   }
@@ -268,15 +268,15 @@ class TreeView extends React.Component {
 
   render() {
     return (
-      <div 
-        className={`tree-view tree ${this.state.isTreeViewDropTipShow ? 'tree-view-drop' : ''}`} 
-        onDrop={this.onNodeDrop} 
-        onDragEnter={this.onNodeDragEnter} 
+      <div
+        className={`tree-view tree ${this.state.isTreeViewDropTipShow ? 'tree-view-drop' : ''}`}
+        onDrop={this.onNodeDrop}
+        onDragEnter={this.onNodeDragEnter}
         onDragLeave={this.onNodeDragLeave}
         onMouseDown={this.onMouseDown}
         onContextMenu={this.onContextMenu}
       >
-        <TreeNodeView 
+        <TreeNodeView
           repoPermission={this.props.repoPermission}
           node={this.props.treeData.root}
           currentPath={this.props.currentPath}
@@ -296,7 +296,7 @@ class TreeView extends React.Component {
           onNodeDragLeave={this.onNodeDragLeave}
           handleContextClick={this.handleContextClick}
         />
-        <ContextMenu 
+        <ContextMenu
           id={'tree-node-contextmenu'}
           onMenuItemClick={this.onMenuItemClick}
           onHideMenu={this.onHideMenu}
diff --git a/frontend/src/components/tree-view/tree.js b/frontend/src/components/tree-view/tree.js
index dc1a148448..f6c1ddc8e8 100644
--- a/frontend/src/components/tree-view/tree.js
+++ b/frontend/src/components/tree-view/tree.js
@@ -18,7 +18,7 @@ class Tree {
     this.root = node;
   }
 
-  getNodeByPath(path) { 
+  getNodeByPath(path) {
     let findNode = null;
     function callback(currentNode) {
       if (currentNode.path === path) {
@@ -112,7 +112,7 @@ class Tree {
       node = node.parentNode;
     }
   }
-  
+
   collapseNode(node) {
     node.isExpanded = false;
   }
diff --git a/frontend/src/components/user-select.js b/frontend/src/components/user-select.js
index 21b8285b03..8b71a76dce 100644
--- a/frontend/src/components/user-select.js
+++ b/frontend/src/components/user-select.js
@@ -54,7 +54,7 @@ class UserSelect extends React.Component {
                     <span className="user-option-email">{item.contact_email}</span>
                   </div>
                 </div>
-              ) : ( 
+              ) : (
                 <React.Fragment>
                   <img src={item.avatar_url} className="select-module select-module-icon avatar" alt=""/>
                   <span className='select-module select-module-name'>{item.name}</span>
@@ -85,7 +85,7 @@ class UserSelect extends React.Component {
             return (
               <div {...props.innerProps} style={style}>{searchValue ? gettext('User not found') : gettext('Enter characters to start searching')}</div>
             );
-          } 
+          }
         }}
         isMulti={this.props.isMulti}
         loadOptions={this.loadOptions}
diff --git a/frontend/src/components/user-settings/delete-account.js b/frontend/src/components/user-settings/delete-account.js
index b3d19c9038..6feaeb1b1a 100644
--- a/frontend/src/components/user-settings/delete-account.js
+++ b/frontend/src/components/user-settings/delete-account.js
@@ -51,4 +51,4 @@ class DeleteAccount extends React.Component {
   }
 }
 
-export default DeleteAccount; 
+export default DeleteAccount;
diff --git a/frontend/src/components/user-settings/email-notice.js b/frontend/src/components/user-settings/email-notice.js
index eb5883dac4..408e4e14be 100644
--- a/frontend/src/components/user-settings/email-notice.js
+++ b/frontend/src/components/user-settings/email-notice.js
@@ -40,7 +40,7 @@ class EmailNotice extends React.Component {
     seafileAPI.updateEmailNotificationInterval(this.state.currentInterval).then((res) => {
       toaster.success(gettext('Success'));
     }).catch((error) => {
-      let errorMsg = Utils.getErrorMsg(error); 
+      let errorMsg = Utils.getErrorMsg(error);
       toaster.danger(errorMsg);
     });
   }
@@ -55,7 +55,7 @@ class EmailNotice extends React.Component {
           {this.intervalOptions.map((item, index) => {
             return (
               <React.Fragment key={index}>
-                <input type="radio" name="interval" value={item.interval} className="align-middle" id={`interval-option${index + 1}`} checked={currentInterval == item.interval} onChange={this.inputChange} /> 
+                <input type="radio" name="interval" value={item.interval} className="align-middle" id={`interval-option${index + 1}`} checked={currentInterval == item.interval} onChange={this.inputChange} />
                 <label className="align-middle m-0 ml-2" htmlFor={`interval-option${index + 1}`}>{item.text}</label>
                 <br />
               </React.Fragment>
@@ -68,4 +68,4 @@ class EmailNotice extends React.Component {
   }
 }
 
-export default EmailNotice; 
+export default EmailNotice;
diff --git a/frontend/src/components/user-settings/list-in-address-book.js b/frontend/src/components/user-settings/list-in-address-book.js
index b81ab43730..a02e58c28d 100644
--- a/frontend/src/components/user-settings/list-in-address-book.js
+++ b/frontend/src/components/user-settings/list-in-address-book.js
@@ -7,7 +7,7 @@ class ListInAddressBook extends React.Component {
     super(props);
     const { list_in_address_book } = this.props.userInfo;
     this.state = {
-      inputChecked: list_in_address_book 
+      inputChecked: list_in_address_book
     };
   }
 
@@ -36,4 +36,4 @@ class ListInAddressBook extends React.Component {
   }
 }
 
-export default ListInAddressBook; 
+export default ListInAddressBook;
diff --git a/frontend/src/components/user-settings/side-nav.js b/frontend/src/components/user-settings/side-nav.js
index 930c1ddcfb..fa42626ffa 100644
--- a/frontend/src/components/user-settings/side-nav.js
+++ b/frontend/src/components/user-settings/side-nav.js
@@ -18,4 +18,4 @@ class SideNav extends React.Component {
   }
 }
 
-export default SideNav; 
+export default SideNav;
diff --git a/frontend/src/components/user-settings/social-login.js b/frontend/src/components/user-settings/social-login.js
index 6aa86a1b9f..244d53413e 100644
--- a/frontend/src/components/user-settings/social-login.js
+++ b/frontend/src/components/user-settings/social-login.js
@@ -57,4 +57,4 @@ class SocialLogin extends React.Component {
   }
 }
 
-export default SocialLogin; 
+export default SocialLogin;
diff --git a/frontend/src/components/user-settings/two-factor-auth.js b/frontend/src/components/user-settings/two-factor-auth.js
index f7ba590030..25c70312ae 100644
--- a/frontend/src/components/user-settings/two-factor-auth.js
+++ b/frontend/src/components/user-settings/two-factor-auth.js
@@ -49,4 +49,4 @@ class TwoFactorAuthentication extends React.Component {
   }
 }
 
-export default TwoFactorAuthentication; 
+export default TwoFactorAuthentication;
diff --git a/frontend/src/components/user-settings/user-avatar-form.js b/frontend/src/components/user-settings/user-avatar-form.js
index 5395a4bf18..d3ad0a24c7 100644
--- a/frontend/src/components/user-settings/user-avatar-form.js
+++ b/frontend/src/components/user-settings/user-avatar-form.js
@@ -26,7 +26,7 @@ class UserAvatarForm extends React.Component {
     }
 
     const file = this.fileInput.current.files[0];
-    const fileName = file.name; 
+    const fileName = file.name;
 
     // no file extension
     if (fileName.lastIndexOf('.') == -1) {
diff --git a/frontend/src/components/user-settings/user-basic-info-form.js b/frontend/src/components/user-settings/user-basic-info-form.js
index 763bf159fc..761364e3ab 100644
--- a/frontend/src/components/user-settings/user-basic-info-form.js
+++ b/frontend/src/components/user-settings/user-basic-info-form.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { gettext } from '../../utils/constants';
 
-const { 
+const {
   nameLabel,
   enableUpdateUserInfo,
   enableUserSetContactEmail
diff --git a/frontend/src/components/user-settings/webdav-password.js b/frontend/src/components/user-settings/webdav-password.js
index ab58856ba7..f72fd7a9c0 100644
--- a/frontend/src/components/user-settings/webdav-password.js
+++ b/frontend/src/components/user-settings/webdav-password.js
@@ -36,7 +36,7 @@ class WebdavPassword extends React.Component {
       let errorMsg = Utils.getErrorMsg(error);
       this.toggleDialog();
       toaster.danger(errorMsg);
-    }); 
+    });
   }
 
   toggleDialog = () => {
diff --git a/frontend/src/components/wiki-list-view/wiki-list-item.js b/frontend/src/components/wiki-list-view/wiki-list-item.js
index 3ec037f8c4..24fa248e3e 100644
--- a/frontend/src/components/wiki-list-view/wiki-list-item.js
+++ b/frontend/src/components/wiki-list-view/wiki-list-item.js
@@ -103,14 +103,14 @@ class WikiListItem extends Component {
   //   this.props.onUnfreezedItem();
   //   this.setState({isRenameing: false});
   // }
-  
+
   onDeleteToggle = () => {
     this.props.onUnfreezedItem();
     this.setState({
       isShowDeleteDialog: !this.state.isShowDeleteDialog,
     });
   }
-  
+
   onDeleteCancel = () => {
     this.props.onUnfreezedItem();
     this.setState({
diff --git a/frontend/src/components/wiki-list-view/wiki-list-view.js b/frontend/src/components/wiki-list-view/wiki-list-view.js
index 537659feda..bd17b8752a 100644
--- a/frontend/src/components/wiki-list-view/wiki-list-view.js
+++ b/frontend/src/components/wiki-list-view/wiki-list-view.js
@@ -54,8 +54,8 @@ class WikiListView extends Component {
           <tbody>
             {wikis.map((wiki, index) => {
               return (
-                <WikiListItem 
-                  key={index} 
+                <WikiListItem
+                  key={index}
                   wiki={wiki}
                   renameWiki={this.props.renameWiki}
                   deleteWiki={this.props.deleteWiki}
diff --git a/frontend/src/components/wiki-markdown-viewer.js b/frontend/src/components/wiki-markdown-viewer.js
index 68bea514a4..286059eee9 100644
--- a/frontend/src/components/wiki-markdown-viewer.js
+++ b/frontend/src/components/wiki-markdown-viewer.js
@@ -92,7 +92,7 @@ class WikiMarkdownViewer extends React.Component {
   }
 
   onLinkClick = (event) => {
-    event.preventDefault(); 
+    event.preventDefault();
     event.stopPropagation();
     let link = '';
     if (event.target.tagName !== 'A') {
@@ -140,7 +140,7 @@ class WikiMarkdownViewer extends React.Component {
       if (item.type == 'image' && isPublicWiki) {
         url = item.data.src;
         const re = new RegExp(serviceURL + '/lib/' + repoID +'/file.*raw=1');
-        // different repo 
+        // different repo
         if (re.test(url)) {
           // get image path
           let index = url.indexOf('/file');
@@ -154,7 +154,7 @@ class WikiMarkdownViewer extends React.Component {
           return;
         }
         item.data.src = serviceURL + '/view-image-via-public-wiki/?slug=' + slug + '&path=' + imagePath;
-      } 
+      }
 
       else if (item.type == 'link') {
         url = item.data.href;
@@ -175,7 +175,7 @@ class WikiMarkdownViewer extends React.Component {
           let path = Utils.getPathFromInternalDirLink(url, repoID);
           // replace url
           item.data.href = serviceURL + '/published/' + slug + path;
-        } 
+        }
       }
     }
 
diff --git a/frontend/src/components/wiki-outline.js b/frontend/src/components/wiki-outline.js
index 097291d376..5fee3e44fe 100644
--- a/frontend/src/components/wiki-outline.js
+++ b/frontend/src/components/wiki-outline.js
@@ -13,7 +13,7 @@ class WikiOutlineItem extends React.Component {
     var activeId = this.props.item.id;
     this.props.handleNavItemClick(activeId);
   }
-  
+
   render() {
     let item = this.props.item;
     let activeIndex = parseInt(this.props.activeIndex);
@@ -59,13 +59,13 @@ class WikiOutline extends React.Component {
       let flag = false;
       let item = navItems[i];
       if (item.id === activeId && item.key !== _this.state.activeIndex) {
-        let scrollTop = 0; 
+        let scrollTop = 0;
         if (item.key > 20) {
           scrollTop = - (item.key - 20)*27 + 'px';
           if (parseInt(scrollTop) > 0) { // handle scroll quickly;
             scrollTop = 0;
-          }  
-        } 
+          }
+        }
         _this.setState({
           activeIndex : item.key,
           scrollTop: scrollTop
@@ -77,16 +77,16 @@ class WikiOutline extends React.Component {
       }
     }
   }
-  
+
   render() {
     let style = {top: this.state.scrollTop};
     return (
       <ul className="wiki-viewer-outline" ref="outlineContainer" style={style}>
         {this.props.navItems.map(item => {
           return (
-            <WikiOutlineItem 
-              key={item.key} 
-              item={item} 
+            <WikiOutlineItem
+              key={item.key}
+              item={item}
               activeIndex={this.state.activeIndex}
               handleNavItemClick={this.props.handleNavItemClick}
             />
diff --git a/frontend/src/draft.js b/frontend/src/draft.js
index f319bc3ee6..bf012d1297 100644
--- a/frontend/src/draft.js
+++ b/frontend/src/draft.js
@@ -15,7 +15,7 @@ import ReviewComments from './components/review-list-view/review-comments';
 import ReviewCommentDialog from './components/review-list-view/review-comment-dialog.js';
 import { Tooltip } from 'reactstrap';
 import AddReviewerDialog from './components/dialog/add-reviewer-dialog.js';
-import  { ReactEditor }  from '@seafile/slate-react'; 
+import  { ReactEditor }  from '@seafile/slate-react';
 import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
 import classnames from 'classnames';
 import HistoryList from './pages/review/history-list';
@@ -80,7 +80,7 @@ class Draft extends React.Component {
 
         if (!originFileExists) {
           seafileAPI.getFileDownloadLink(draftRepoID, draftFilePath)
-            .then(res => { 
+            .then(res => {
               seafileAPI.getFileContent(res.data)
                 .then(res => {
                   this.setState({
@@ -88,7 +88,7 @@ class Draft extends React.Component {
                     draftOriginContent: res.data,
                     isLoading: false,
                     isShowDiff: false
-                  }); 
+                  });
                 });
             });
           return;
@@ -104,7 +104,7 @@ class Draft extends React.Component {
             activeTab: 'history',
           });
           seafileAPI.listFileHistoryRecords(draftRepoID, draftFilePath, 1, 25).then((res) => {
-            const historyList = res.data.data;        
+            const historyList = res.data.data;
             this.setState({
               historyList: historyList,
               totalReversionCount: res.data.total_count
@@ -162,8 +162,8 @@ class Draft extends React.Component {
           return;
         }
 
-        let dl0 = siteRoot + 'repo/' + draftRepoID + '/' + draftPublishVersion + '/download?' + 'p=' + draftOriginFilePath; 
-        let dl = siteRoot + 'repo/' + draftRepoID + '/' + originFileVersion + '/download?' + 'p=' + draftOriginFilePath; 
+        let dl0 = siteRoot + 'repo/' + draftRepoID + '/' + draftPublishVersion + '/download?' + 'p=' + draftOriginFilePath;
+        let dl = siteRoot + 'repo/' + draftRepoID + '/' + originFileVersion + '/download?' + 'p=' + draftOriginFilePath;
         axios.all([
           seafileAPI.getFileContent(dl0),
           seafileAPI.getFileContent(dl)
@@ -172,7 +172,7 @@ class Draft extends React.Component {
             draftContent: draftContent.data,
             draftOriginContent: draftOriginContent.data,
             isLoading: false,
-          }); 
+          });
         }));
         break;
     }
@@ -313,7 +313,7 @@ class Draft extends React.Component {
     const nodes = this.refs.diffViewer.value;
     let commentNode = nodes.find((node) => {
       if (node.data['old_index'] == oldIndex && node.data['new_index'] == newIndex) {
-        return node
+        return node;
       }
     });
     if (commentNode) {
@@ -459,7 +459,7 @@ class Draft extends React.Component {
       if (tab !== 'history' && window.location.hash) {
         this.setURL('#');
       }
-      if (tab == 'reviewInfo') { 
+      if (tab == 'reviewInfo') {
         this.initialContent();
       } else if (tab == 'history') {
         this.initialDiffViewerContent();
@@ -508,7 +508,7 @@ class Draft extends React.Component {
           </NavItem>
         );
     }
-  } 
+  }
 
   getDomNodeByPath = (path) => {
     let node, parent = document.querySelector('.viewer-component');
@@ -660,7 +660,7 @@ class Draft extends React.Component {
   }
 
   render() {
-    const { draftInfo, reviewers, originRepoName, draftStatus } = this.state; 
+    const { draftInfo, reviewers, originRepoName, draftStatus } = this.state;
     const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
     const draftLink = siteRoot + 'lib/' + draftRepoID + '/file' + draftFilePath + '?mode=edit';
     const showPublishedButton = this.state.draftStatus == 'published';
@@ -711,8 +711,8 @@ class Draft extends React.Component {
             <div className='cur-view-content' ref="viewContent" style={{width:(100 - this.state.rightPartWidth) + '%'}}>
               {this.state.isLoading ?
                 <div className="markdown-viewer-render-content article">
-                  <Loading /> 
-                </div> 
+                  <Loading />
+                </div>
                 :
                 <div className="markdown-viewer-render-content article">
                   {this.renderContent()}
diff --git a/frontend/src/file-history-old.js b/frontend/src/file-history-old.js
index c90fbd2620..7aebfde8bc 100644
--- a/frontend/src/file-history-old.js
+++ b/frontend/src/file-history-old.js
@@ -253,7 +253,7 @@ class FileHistory extends React.Component {
                     {this.state.historyList.map((item, index) => {
                       return (
                         <HistoryItem
-                          key={index} 
+                          key={index}
                           item={item}
                           index={index}
                           canDownload={canDownload}
diff --git a/frontend/src/file-history.js b/frontend/src/file-history.js
index a76fc4da11..86fb9ace99 100644
--- a/frontend/src/file-history.js
+++ b/frontend/src/file-history.js
@@ -80,7 +80,7 @@ class FileHistory extends React.Component {
           </div>
         </div>
         <div id="main" className="history-content">
-          <MainPanel 
+          <MainPanel
             newMarkdownContent={this.state.newMarkdownContent}
             oldMarkdownContent={this.state.oldMarkdownContent}
             renderingContent={this.state.renderingContent}
diff --git a/frontend/src/file-view.js b/frontend/src/file-view.js
index 51690e675e..bc4a67970c 100644
--- a/frontend/src/file-view.js
+++ b/frontend/src/file-view.js
@@ -29,16 +29,16 @@ class InnerFileView extends React.Component {
       case 'XMind':
         content = <Image tip={<FileViewTip />} />;
         break;
-      case 'SVG': 
+      case 'SVG':
         content = <SVG />;
         break;
-      case 'PDF': 
+      case 'PDF':
         content = <PDF />;
         break;
-      case 'Video': 
+      case 'Video':
         content = <Video />;
         break;
-      case 'Audio': 
+      case 'Audio':
         content = <Audio />;
         break;
     }
diff --git a/frontend/src/history-trash-file-view.js b/frontend/src/history-trash-file-view.js
index 7b2ce91891..5c05b019e7 100644
--- a/frontend/src/history-trash-file-view.js
+++ b/frontend/src/history-trash-file-view.js
@@ -28,22 +28,22 @@ class HistoryTrashFileView extends React.Component {
       case 'Image':
         content = <Image tip={<FileViewTip />} />;
         break;
-      case 'SVG': 
+      case 'SVG':
         content = <SVG />;
         break;
-      case 'PDF': 
+      case 'PDF':
         content = <PDF />;
         break;
-      case 'Text': 
+      case 'Text':
         content = <Text />;
         break;
-      case 'Markdown': 
+      case 'Markdown':
         content = <Markdown />;
         break;
-      case 'Video': 
+      case 'Video':
         content = <Video />;
         break;
-      case 'Audio': 
+      case 'Audio':
         content = <Audio />;
         break;
       default:
diff --git a/frontend/src/markdown-editor.js b/frontend/src/markdown-editor.js
index 31b527964f..89888f0e81 100644
--- a/frontend/src/markdown-editor.js
+++ b/frontend/src/markdown-editor.js
@@ -724,7 +724,7 @@ class MarkdownEditor extends React.Component {
     if (mode === 'rich') {
       window.seafileEditor.switchToRichTextEditor();
     } else if (mode === 'plain') {
-      window.seafileEditor.switchToPlainTextEditor();  
+      window.seafileEditor.switchToPlainTextEditor();
     }
   }
 
diff --git a/frontend/src/models/repo-info.js b/frontend/src/models/repo-info.js
index 0e8d83fb45..a62570a1d0 100644
--- a/frontend/src/models/repo-info.js
+++ b/frontend/src/models/repo-info.js
@@ -10,8 +10,8 @@ class RepoInfo {
     this.owner_name = object.owner_name;
     this.owner_email = object.owner_email;
     this.owner_contact_email = object.owner_contact_email;
-    // is repo shared admin; 
-    // is repo shared admin && is one of current ordinary group's admins; 
+    // is repo shared admin;
+    // is repo shared admin && is one of current ordinary group's admins;
     // is one of current group owned group's admins;
     this.is_admin = object.is_admin;
     this.is_virtual = object.is_virtual;
diff --git a/frontend/src/models/review.js b/frontend/src/models/review.js
index a508966f6d..384023e467 100644
--- a/frontend/src/models/review.js
+++ b/frontend/src/models/review.js
@@ -6,8 +6,8 @@ class Review {
     this.created = item.created_at;
     this.createdStr = moment((new Date(item.created_at)).getTime()).format('YYYY-MM-DD HH:mm');
     this.id = item.id;
-    this.creatorName = item.creator_name; 
-    this.draftFilePath = item.draft_file_path; 
+    this.creatorName = item.creator_name;
+    this.draftFilePath = item.draft_file_path;
   }
 }
 
diff --git a/frontend/src/models/shared-repo-info.js b/frontend/src/models/shared-repo-info.js
index e83cb6a9f3..cbb6bcadb6 100644
--- a/frontend/src/models/shared-repo-info.js
+++ b/frontend/src/models/shared-repo-info.js
@@ -1,5 +1,5 @@
 class SharedRepoInfo {
-  
+
   constructor(object) {
     this.repo_id = object.repo_id;
     this.repo_name = object.repo_name;
diff --git a/frontend/src/models/upload-link.js b/frontend/src/models/upload-link.js
index adead88785..b7921d924f 100644
--- a/frontend/src/models/upload-link.js
+++ b/frontend/src/models/upload-link.js
@@ -1,5 +1,5 @@
 class UploadLink {
-   
+
   constructor(object) {
     this.repo_id = object.repo_id;
     this.repo_name = object.repo_name;
diff --git a/frontend/src/pages/dashboard/files-activities.js b/frontend/src/pages/dashboard/files-activities.js
index c4d09d8eee..a1ed3378c9 100644
--- a/frontend/src/pages/dashboard/files-activities.js
+++ b/frontend/src/pages/dashboard/files-activities.js
@@ -46,14 +46,14 @@ class FileActivitiesContent extends Component {
       </thead>
     );
 
-    return ( 
+    return (
       <Fragment>
         <table className="table-hover table-thead-hidden">
           {isDesktop ? desktopThead : mobileThead}
           <tbody>
             {items.map((item, index) => {
               return (
-                <ActivityItem 
+                <ActivityItem
                   key={index}
                   isDesktop={isDesktop}
                   item={item}
@@ -66,7 +66,7 @@ class FileActivitiesContent extends Component {
         </table>
         {isLoadingMore ? <span className="loading-icon loading-tip"></span> : ''}
       </Fragment>
-    ); 
+    );
   }
 }
 
@@ -406,7 +406,7 @@ class FilesActivities extends Component {
         isLoadingMore: false,
         items: [...this.state.items, ...events],
         currentPage: currentPage + 1,
-        hasMore: res.data.events.length === 0 ? false : true 
+        hasMore: res.data.events.length === 0 ? false : true
       });
       if (this.state.items.length < 25 && this.state.hasMore) {
         this.getMore();
@@ -442,10 +442,10 @@ class FilesActivities extends Component {
           </div>
           <div className="cur-view-content d-block" onScroll={this.handleScroll}>
             {this.state.isFirstLoading && <Loading />}
-            {(!this.state.isFirstLoading && this.state.errorMsg) && 
+            {(!this.state.isFirstLoading && this.state.errorMsg) &&
               <p className="error text-center">{this.state.errorMsg}</p>
             }
-            {!this.state.isFirstLoading && 
+            {!this.state.isFirstLoading &&
               <FileActivitiesContent items={this.state.items} isLoadingMore={this.state.isLoadingMore}/>
             }
           </div>
diff --git a/frontend/src/pages/drafts/draft-content.js b/frontend/src/pages/drafts/draft-content.js
index 694fce6da9..eec1524da3 100644
--- a/frontend/src/pages/drafts/draft-content.js
+++ b/frontend/src/pages/drafts/draft-content.js
@@ -50,7 +50,7 @@ class DraftContent extends React.Component {
       toaster.danger(msg_s);
     });
   }
-  
+
   render() {
     return (
       <div className="cur-view-content">
@@ -65,7 +65,7 @@ class DraftContent extends React.Component {
             )}
             {this.props.draftList.length !==0 && (
               <DraftListView
-                draftList={this.props.draftList} 
+                draftList={this.props.draftList}
                 onDeleteHandler={this.onDeleteHandler}
                 onPublishHandler={this.onPublishHandler}
               />
diff --git a/frontend/src/pages/file-history-old/history-item.js b/frontend/src/pages/file-history-old/history-item.js
index 975a5f148a..204fbd6a0f 100644
--- a/frontend/src/pages/file-history-old/history-item.js
+++ b/frontend/src/pages/file-history-old/history-item.js
@@ -113,7 +113,7 @@ class MoreMenu extends React.PureComponent {
           tag='i'
           className='fa fa-ellipsis-v'
           title={gettext('More Operations')}
-          data-toggle="dropdown" 
+          data-toggle="dropdown"
           aria-expanded={this.state.dropdownOpen}
         >
         </DropdownToggle>
diff --git a/frontend/src/pages/file-history/main-panel.js b/frontend/src/pages/file-history/main-panel.js
index 2f5f4482fb..74063d3695 100644
--- a/frontend/src/pages/file-history/main-panel.js
+++ b/frontend/src/pages/file-history/main-panel.js
@@ -29,12 +29,12 @@ class MainPanel extends React.Component {
       <div className="main-panel">
         <div className="main-panel-center content-viewer">
           <div className={contentClass}>
-            { 
-              this.props.renderingContent ? 
-                (<Loading />) : 
+            {
+              this.props.renderingContent ?
+                (<Loading />) :
                 (<div className="diff-view article">
-                  <DiffViewer 
-                    newMarkdownContent={this.props.newMarkdownContent} 
+                  <DiffViewer
+                    newMarkdownContent={this.props.newMarkdownContent}
                     oldMarkdownContent={this.props.oldMarkdownContent}
                   />
                 </div>)
diff --git a/frontend/src/pages/file-history/side-panel.js b/frontend/src/pages/file-history/side-panel.js
index 89b2c4f3c0..e86a340749 100644
--- a/frontend/src/pages/file-history/side-panel.js
+++ b/frontend/src/pages/file-history/side-panel.js
@@ -35,7 +35,7 @@ class SidePanel extends React.Component {
       this.initResultState(res.data);
     });
   }
-  
+
   refershFileList() {
     editUtilities.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
       this.initResultState(res.data);
@@ -106,7 +106,7 @@ class SidePanel extends React.Component {
           <div className="history-body">
             {this.state.isLoading && <Loading />}
             {this.state.historyInfo &&
-              <HistoryListView 
+              <HistoryListView
                 hasMore={this.state.hasMore}
                 isReloadingData={this.state.isReloadingData}
                 historyList={this.state.historyInfo}
diff --git a/frontend/src/pages/groups/group-view.js b/frontend/src/pages/groups/group-view.js
index c16c351c8d..5ab7020984 100644
--- a/frontend/src/pages/groups/group-view.js
+++ b/frontend/src/pages/groups/group-view.js
@@ -53,7 +53,7 @@ class GroupView extends React.Component {
       isSortOptionsDialogOpen: false,
       repoList: [],
       currentPage: 1,
-      perPage: 50, 
+      perPage: 50,
       hasNextPage: false,
       libraryType: 'group',
       isCreateRepoDialogShow: false,
@@ -104,7 +104,7 @@ class GroupView extends React.Component {
       this.setState({
         isLoading: false,
         errMessage: Utils.getErrorMsg(error, true) // true: show login tip if 403
-      }); 
+      });
     });
   }
 
@@ -135,7 +135,7 @@ class GroupView extends React.Component {
         isLoading: false,
         isLoadingMore: false,
         errMessage: Utils.getErrorMsg(error, true) // true: show login tip if 403
-      }); 
+      });
     });
   }
 
@@ -255,7 +255,7 @@ class GroupView extends React.Component {
   onTabNavClick = (tabName) => {
     this.props.onTabNavClick(tabName);
   }
-  
+
   toggleGroupDropdown = () => {
     this.setState({
       showGroupDropdown: !this.state.showGroupDropdown
@@ -351,7 +351,7 @@ class GroupView extends React.Component {
   translateRole = (role) => {
     if (role === 'Admin') {
       return gettext('Admin');
-    }  
+    }
     else if (role === 'Member') {
       return gettext('Member');
     }
@@ -377,20 +377,20 @@ class GroupView extends React.Component {
       if (isBottom) { // scroll to the bottom
         this.setState({isLoadingMore: true}, () => {
           this.loadRepos(currentPage + 1);
-        }); 
-      }   
-    }   
+        });
+      }
+    }
   }
 
   render() {
     let { errMessage, emptyTip, currentGroup, isDepartmentGroup, isStaff } = this.state;
     let isShowSettingIcon = false;
-    if (currentGroup) { // group message is loaded  
+    if (currentGroup) { // group message is loaded
       if (currentGroup.parent_group_id === 0) {
-        isShowSettingIcon = true; 
+        isShowSettingIcon = true;
       } else {
         if (currentGroup.admins.indexOf(username) > -1) {
-          isShowSettingIcon = true; 
+          isShowSettingIcon = true;
         }
       }
     }
@@ -406,9 +406,9 @@ class GroupView extends React.Component {
             <div className="operation">
               {((!isDepartmentGroup && canAddRepo) || (isDepartmentGroup && isStaff)) && (
                 Utils.isDesktop() ? (
-                <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateRepoToggle}>
-                  <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
-                </button>
+                  <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateRepoToggle}>
+                    <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
+                  </button>
                 ) : (
                   <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Library')} onClick={this.onCreateRepoToggle}></span>
                 )
@@ -532,10 +532,10 @@ class GroupView extends React.Component {
               {(!this.state.isLoading && errMessage) && <div className="error text-center mt-2">{errMessage}</div>}
               {(!this.state.isLoading && this.state.repoList.length === 0) && emptyTip}
               {(!this.state.isLoading && this.state.repoList.length > 0) &&
-                <SharedRepoListView 
-                  repoList={this.state.repoList} 
-                  hasNextPage={this.state.hasNextPage} 
-                  currentGroup={this.state.currentGroup} 
+                <SharedRepoListView
+                  repoList={this.state.repoList}
+                  hasNextPage={this.state.hasNextPage}
+                  currentGroup={this.state.currentGroup}
                   sortBy={this.state.sortBy}
                   sortOrder={this.state.sortOrder}
                   sortItems={this.sortItems}
@@ -555,7 +555,7 @@ class GroupView extends React.Component {
         </div>
         {this.state.isCreateRepoDialogShow && !this.state.isDepartmentGroup && (
           <ModalPortal>
-            <CreateRepoDialog 
+            <CreateRepoDialog
               libraryType={this.state.libraryType}
               onCreateToggle={this.onCreateRepoToggle}
               onCreateRepo={this.onCreateRepo}
@@ -563,7 +563,7 @@ class GroupView extends React.Component {
           </ModalPortal>
         )}
         {this.state.isCreateRepoDialogShow && this.state.isDepartmentGroup &&
-          <CreateRepoDialog 
+          <CreateRepoDialog
             isAdmin={this.state.isAdmin}
             onCreateToggle={this.onCreateRepoToggle}
             onCreateRepo={this.onCreateRepo}
diff --git a/frontend/src/pages/groups/groups-view.js b/frontend/src/pages/groups/groups-view.js
index 5fe367d673..2787f0880c 100644
--- a/frontend/src/pages/groups/groups-view.js
+++ b/frontend/src/pages/groups/groups-view.js
@@ -58,7 +58,7 @@ class RepoListViewPanel extends React.Component {
     });
     this.setState({repoList: repoList});
   }
-  
+
   onItemRename = (repo, newName) => {
     let group = this.props.group;
     seafileAPI.renameGroupOwnedLibrary(group.id, repo.repo_id, newName).then(res => {
@@ -83,12 +83,12 @@ class RepoListViewPanel extends React.Component {
         <h4 className="group-item-heading ellipsis">
           <a href={`${siteRoot}group/${group.id}/`} title={group.name}>{group.name}</a>
         </h4>
-        {this.state.repoList.length === 0 ? 
+        {this.state.repoList.length === 0 ?
           emptyTip :
-          <SharedRepoListView 
+          <SharedRepoListView
             isShowTableThread={false}
-            isShowRepoOwner={false} 
-            currentGroup={this.props.group} 
+            isShowRepoOwner={false}
+            currentGroup={this.props.group}
             repoList={this.state.repoList}
             onItemUnshare={this.onItemUnshare}
             onItemDelete={this.onItemDelete}
@@ -104,7 +104,7 @@ class RepoListViewPanel extends React.Component {
 RepoListViewPanel.propTypes = propTypes;
 
 class GroupsView extends React.Component {
-  
+
   constructor(props) {
     super(props);
     this.state = {
@@ -135,7 +135,7 @@ class GroupsView extends React.Component {
       this.setState({
         isLoading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
-      }); 
+      });
     });
   }
 
@@ -198,9 +198,9 @@ class GroupsView extends React.Component {
               {(!this.state.isLoading && !this.state.errorMsg && this.state.groupList.length == 0) && emptyTip}
               {!this.state.isLoading && this.state.groupList.map((group, index) => {
                 return (
-                  <RepoListViewPanel 
-                    key={index} 
-                    group={group} 
+                  <RepoListViewPanel
+                    key={index}
+                    group={group}
                     onItemDetails={this.onItemDetails}
                   />
                 );
diff --git a/frontend/src/pages/invitations/invitations-view.js b/frontend/src/pages/invitations/invitations-view.js
index 35020f2e43..882bf7b1e3 100644
--- a/frontend/src/pages/invitations/invitations-view.js
+++ b/frontend/src/pages/invitations/invitations-view.js
@@ -19,7 +19,7 @@ class Item extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isOpIconShown: false, 
+      isOpIconShown: false,
       isOpMenuOpen: false, // for mobile
       isRevokeDialogOpen: false
     };
@@ -39,14 +39,14 @@ class Item extends React.Component {
 
   onMouseLeave = () => {
     this.setState({
-      isOpIconShown: false  
+      isOpIconShown: false
     });
   }
 
   deleteItem = () => {
     // make the icon avoid being clicked repeatedly
     this.setState({
-      isOpIconShown: false  
+      isOpIconShown: false
     });
     const token = this.props.invitation.token;
     seafileAPI.deleteInvitation(token).then((res) => {
@@ -56,7 +56,7 @@ class Item extends React.Component {
       const errorMsg = Utils.getErrorMsg(error);
       toaster.danger(errorMsg);
       this.setState({
-        isOpIconShown: true 
+        isOpIconShown: true
       });
     });
   }
@@ -165,7 +165,7 @@ class Content extends Component {
 
   render() {
     const {
-      loading, errorMsg, invitationsList 
+      loading, errorMsg, invitationsList
     } = this.props.data;
 
     if (loading) {
@@ -177,7 +177,7 @@ class Content extends Component {
     }
 
     if (!invitationsList.length) {
-      return ( 
+      return (
         <EmptyTip>
           <h2>{gettext('No guest invitations')}</h2>
           <p>{gettext('You have not invited any guests yet. A guest can access shared libraries through the web interface allowing more efficient ways to collaborate than through links. You can invite a guest by clicking the "Invite Guest" button in the menu bar.')}</p>
@@ -243,7 +243,7 @@ class InvitationsView extends React.Component {
         loading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
       });
-    }); 
+    });
   }
 
   onInvitePeople = (invitationsArray) => {
diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js
index 0bdc28c55d..f0adfce1c8 100644
--- a/frontend/src/pages/lib-content-view/lib-content-container.js
+++ b/frontend/src/pages/lib-content-view/lib-content-container.js
@@ -179,12 +179,12 @@ class LibContentContainer extends React.Component {
             </div>
           }
           <div className="cur-view-path">
-            <CurDirPath 
+            <CurDirPath
               repoID={repoID}
               repoName={this.props.currentRepoInfo.repo_name}
               pathPrefix={this.props.pathPrefix}
-              currentPath={this.props.path} 
-              permission={this.props.repoPermission} 
+              currentPath={this.props.path}
+              permission={this.props.repoPermission}
               isViewFile={this.props.isViewFile}
               onTabNavClick={this.props.onTabNavClick}
               onPathClick={this.onPathClick}
@@ -202,7 +202,7 @@ class LibContentContainer extends React.Component {
             {this.props.pathExist && (
               <Fragment>
                 {this.props.currentMode === 'list' && (
-                  <DirListView 
+                  <DirListView
                     path={this.props.path}
                     repoID={repoID}
                     currentRepoInfo={this.props.currentRepoInfo}
@@ -240,7 +240,7 @@ class LibContentContainer extends React.Component {
                   />
                 )}
                 {this.props.currentMode === 'grid' && (
-                  <DirGridView 
+                  <DirGridView
                     path={this.props.path}
                     repoID={repoID}
                     currentRepoInfo={this.props.currentRepoInfo}
@@ -271,7 +271,7 @@ class LibContentContainer extends React.Component {
                   />
                 )}
                 {this.props.currentMode === 'column' && (
-                  <DirColumnView 
+                  <DirColumnView
                     path={this.props.path}
                     repoID={repoID}
                     currentRepoInfo={this.props.currentRepoInfo}
@@ -335,11 +335,11 @@ class LibContentContainer extends React.Component {
             )}
           </div>
         </div>
-        {this.props.isDirentDetailShow && 
+        {this.props.isDirentDetailShow &&
           <Fragment>
             <div className="cur-view-detail">
-              {(this.props.path === '/' && !this.state.currentDirent) ? 
-                <LibDetail 
+              {(this.props.path === '/' && !this.state.currentDirent) ?
+                <LibDetail
                   currentRepo={this.props.currentRepoInfo}
                   closeDetails={this.props.closeDirentDetail}
                 /> :
diff --git a/frontend/src/pages/lib-content-view/lib-content-toolbar.js b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
index 7f868f45a2..e847c53abf 100644
--- a/frontend/src/pages/lib-content-view/lib-content-toolbar.js
+++ b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
@@ -56,7 +56,7 @@ class LibContentToolbar extends React.Component {
   render() {
 
     if (!this.props.userPerm) {
-      return <div className="cur-view-toolbar"></div>
+      return <div className="cur-view-toolbar"></div>;
     }
 
     if (this.props.isViewFile) {
@@ -64,7 +64,7 @@ class LibContentToolbar extends React.Component {
         <Fragment>
           <div className="cur-view-toolbar">
             <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.props.onSideNavMenuClick}></span>
-            <ViewFileToolbar 
+            <ViewFileToolbar
               path={this.props.path}
               repoID={this.props.repoID}
               userPerm={this.props.userPerm}
@@ -93,7 +93,7 @@ class LibContentToolbar extends React.Component {
           <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.props.onSideNavMenuClick}></span>
           {this.props.isDirentSelected ?
             <MultipleDirOperationToolbar
-              repoID={this.props.repoID} 
+              repoID={this.props.repoID}
               path={this.props.path}
               userPerm={this.props.userPerm}
               repoEncrypted={this.props.repoEncrypted}
@@ -116,7 +116,7 @@ class LibContentToolbar extends React.Component {
               currentMode={this.props.currentMode}
               switchViewMode={this.props.switchViewMode}
             /> :
-            <DirOperationToolBar 
+            <DirOperationToolBar
               path={this.props.path}
               repoID={this.props.repoID}
               repoName={this.props.repoName}
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 9aef8750f2..8adfbae7e4 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -135,7 +135,7 @@ class LibContentView extends React.Component {
       this.setState({
         currentRepoInfo: repoInfo,
         repoName: repoInfo.repo_name,
-        libNeedDecrypt: repoInfo.lib_need_decrypt, 
+        libNeedDecrypt: repoInfo.lib_need_decrypt,
         repoEncrypted: repoInfo.encrypted,
         repoPermission: repoInfo.permission === 'rw',
         isGroupOwnedRepo: isGroupOwnedRepo,
@@ -159,7 +159,7 @@ class LibContentView extends React.Component {
             isDirentListLoading: false,
             errorMsg: gettext('Permission denied')
           });
-          
+
           let errorMsg = gettext('Permission denied');
           toaster.danger(errorMsg);
         } else {
@@ -333,7 +333,7 @@ class LibContentView extends React.Component {
         toaster.danger(errMessage);
       });
     }
-    
+
     if (Utils.isMarkdownFile(path)) {
       seafileAPI.getFileInfo(this.props.repoID, path).then(() => {
         if (this.state.currentMode !== 'column') {
@@ -417,7 +417,7 @@ class LibContentView extends React.Component {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
       });
-      
+
       seafileAPI.listRelatedFiles(repoID, filePath).then(res => {
         let relatedFiles = res.data.related_files.map((relatedFile) => {
           return relatedFile;
@@ -470,7 +470,7 @@ class LibContentView extends React.Component {
     let repoInfo = this.state.currentRepoInfo;
     let url = siteRoot + 'library/' + repoID + '/' + encodeURIComponent(repoInfo.repo_name) + Utils.encodePath(filePath);
     window.history.pushState({url: url, path: filePath}, filePath, url);
-  } 
+  }
 
   loadDirentList = (path) => {
     let repoID = this.props.repoID;
@@ -545,7 +545,7 @@ class LibContentView extends React.Component {
           getThumbnail(++i);
         } else {
           _this.setState({
-            direntList: direntList 
+            direntList: direntList
           });
         }
       });
@@ -593,7 +593,7 @@ class LibContentView extends React.Component {
         });
         return;
       }
-      
+
       if (data.successful) {
         if (asyncOperationType === 'move') {
           if (this.currentMoveItemName && this.currentMoveItemPath) {
@@ -630,7 +630,7 @@ class LibContentView extends React.Component {
       this.setState({
         asyncOperationProgress: 0,
         isCopyMoveProgressDialogShow: false,
-      }); 
+      });
     }
   }
 
@@ -653,7 +653,7 @@ class LibContentView extends React.Component {
     this.setState({
       asyncOperationProgress: 0,
       isCopyMoveProgressDialogShow: false,
-    })
+    });
   }
 
   // toolbar operations
@@ -668,7 +668,7 @@ class LibContentView extends React.Component {
         isCopyMoveProgressDialogShow: true
       }));
     }
-    
+
     let dirNames = this.getSelectedDirentNames();
     let direntPaths = this.getSelectedDirentPaths();
     seafileAPI.moveDir(repoID, destRepo.repo_id, destDirentPath, this.state.path, dirNames).then(res => {
@@ -685,7 +685,7 @@ class LibContentView extends React.Component {
         if (this.state.currentMode === 'column') {
           this.deleteTreeNodes(direntPaths);
         }
-        
+
         this.moveDirents(dirNames);
 
         // 2. tow columns mode need update left tree
@@ -714,7 +714,7 @@ class LibContentView extends React.Component {
   onCopyItems = (destRepo, destDirentPath) => {
     let repoID = this.props.repoID;
     let selectedDirentList = this.state.selectedDirentList;
-    
+
     if (repoID !== destRepo.repo_id) {
       this.setState({
         asyncOperatedFilesLength: selectedDirentList.length,
@@ -723,7 +723,7 @@ class LibContentView extends React.Component {
         isCopyMoveProgressDialogShow: true
       });
     }
-    
+
     let dirNames = this.getSelectedDirentNames();
     seafileAPI.copyDir(repoID, destRepo.repo_id, destDirentPath, this.state.path, dirNames).then(res => {
       if (repoID !== destRepo.repo_id) {
@@ -857,7 +857,7 @@ class LibContentView extends React.Component {
   }
 
   onSearchedClick = (item) => {
-    let path = item.is_dir ? item.path.slice(0, item.path.length - 1) : item.path; 
+    let path = item.is_dir ? item.path.slice(0, item.path.length - 1) : item.path;
     if (this.state.currentPath === path) {
       return;
     }
@@ -870,7 +870,7 @@ class LibContentView extends React.Component {
         if (!node) {
           index = i;
           break;
-        } 
+        }
       }
       if (index === -1) { // all the data has been loaded already.
         let node = this.state.treeData.getNodeByPath(path);
@@ -1064,7 +1064,7 @@ class LibContentView extends React.Component {
         this.deleteTreeNode(direntPath);
       }
 
-      // 1. move to current repo 
+      // 1. move to current repo
       // 2. tow columns mode need update left tree
       if (repoID === destRepo.repo_id && this.state.currentMode === 'column') {
         this.updateMoveCopyTreeNode(moveToDirentPath);
@@ -1106,7 +1106,7 @@ class LibContentView extends React.Component {
     }
 
     seafileAPI.copyDir(repoID, destRepo.repo_id, copyToDirentPath, nodeParentPath, dirName).then(res => {
-      
+
       if (repoID !== destRepo.repo_id) {
         this.setState({
           asyncCopyMoveTaskId: res.data.task_id,
@@ -1173,7 +1173,7 @@ class LibContentView extends React.Component {
         this.showColumnMarkdownFile(direntPath);
       } else {
         const url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(direntPath);
-        
+
         let isWeChat = Utils.isWeChat();
         if (!isWeChat) {
           let newWindow = window.open('about:blank');
@@ -1263,7 +1263,7 @@ class LibContentView extends React.Component {
   }
 
   onFileUploadSuccess = (direntObject) => {
-    let isExist = this.state.direntList.some(item => { 
+    let isExist = this.state.direntList.some(item => {
       return item.name === direntObject.name && item.type === direntObject.type;
     });
     if (isExist) {
@@ -1677,7 +1677,7 @@ class LibContentView extends React.Component {
         return item.name !== name;
       });
     }
-    this.setState({ 
+    this.setState({
       selectedDirentList: selectedDirentList,
       isDirentSelected: selectedDirentList.length > 0,
       isAllDirentSelected: selectedDirentList.length === newDirentList.length,
@@ -1688,7 +1688,7 @@ class LibContentView extends React.Component {
     this.setState({libNeedDecrypt: false});
     this.loadDirData(this.state.path);
   }
-  
+
   goDraftPage = () => {
     window.open(siteRoot + 'drafts/' + this.state.draftID + '/');
   }
@@ -1771,7 +1771,7 @@ class LibContentView extends React.Component {
     if (this.state.libNeedDecrypt) {
       return (
         <ModalPortal>
-          <LibDecryptDialog 
+          <LibDecryptDialog
             repoID={this.props.repoID}
             onLibDecryptDialog={this.onLibDecryptDialog}
           />
@@ -1843,7 +1843,7 @@ class LibContentView extends React.Component {
             />
           </div>
           <div className="main-panel-center flex-row">
-            <LibContentContainer 
+            <LibContentContainer
               pathPrefix={this.props.pathPrefix}
               currentMode={this.state.currentMode}
               path={this.state.path}
diff --git a/frontend/src/pages/linked-devices/linked-devices.js b/frontend/src/pages/linked-devices/linked-devices.js
index 70f3654809..7483c04744 100644
--- a/frontend/src/pages/linked-devices/linked-devices.js
+++ b/frontend/src/pages/linked-devices/linked-devices.js
@@ -92,7 +92,7 @@ class Item extends Component {
 
   toggleDialog = () => {
     this.setState({
-      isConfirmUnlinkDialogOpen: !this.state.isConfirmUnlinkDialogOpen 
+      isConfirmUnlinkDialogOpen: !this.state.isConfirmUnlinkDialogOpen
     });
   }
 
@@ -179,7 +179,7 @@ class Item extends Component {
         {this.state.isConfirmUnlinkDialogOpen &&
         <ConfirmUnlinkDeviceDialog
           executeOperation={this.unlinkDevice}
-          toggleDialog={this.toggleDialog} 
+          toggleDialog={this.toggleDialog}
         />
         }
       </React.Fragment>
diff --git a/frontend/src/pages/my-libs/my-libs-deleted.js b/frontend/src/pages/my-libs/my-libs-deleted.js
index a41abc8bb1..77866714c0 100644
--- a/frontend/src/pages/my-libs/my-libs-deleted.js
+++ b/frontend/src/pages/my-libs/my-libs-deleted.js
@@ -63,10 +63,10 @@ class MyLibsDeleted extends Component {
                 <p>{gettext('You have not deleted any libraries in the last {placeholder} days. A deleted library will be cleaned automatically after this period.').replace('{placeholder}', trashReposExpireDays)}</p>
               </EmptyTip>
               }
-              {this.state.deletedRepoList.length !== 0 && 
+              {this.state.deletedRepoList.length !== 0 &&
                 <div>
                   <p className="tip mt-2">{gettext('Tip: libraries deleted {placeholder} days ago will be cleaned automatically.').replace('{placeholder}', trashReposExpireDays)}</p>
-                  <DeletedRepoTable 
+                  <DeletedRepoTable
                     deletedRepoList={this.state.deletedRepoList}
                     refreshDeletedRepoList={this.refreshDeletedRepoList}
                   />
@@ -135,7 +135,7 @@ class DeletedRepoItem extends Component {
         highlight: false,
       });
     }
-  } 
+  }
 
   restoreDeletedRepo = () => {
     let repoID = this.props.repo.repo_id;
diff --git a/frontend/src/pages/my-libs/my-libs.js b/frontend/src/pages/my-libs/my-libs.js
index ab3f2adca5..0668d82e76 100644
--- a/frontend/src/pages/my-libs/my-libs.js
+++ b/frontend/src/pages/my-libs/my-libs.js
@@ -111,7 +111,7 @@ class MyLibraries extends Component {
     });
     this.setState({repoList: repoList});
   }
-  
+
   onDeleteRepo = (repo) => {
     let repoList = this.state.repoList.filter(item => {
       return item.repo_id !== repo.repo_id;
@@ -174,8 +174,8 @@ class MyLibraries extends Component {
               }
             </div>
           </div>
-          {!this.state.isLoading && !this.state.errorMsg && this.state.isGuideForNewDialogOpen && 
-            <GuideForNewDialog 
+          {!this.state.isLoading && !this.state.errorMsg && this.state.isGuideForNewDialogOpen &&
+            <GuideForNewDialog
               toggleDialog={this.toggleGuideForNewDialog}
             />
           }
@@ -189,7 +189,7 @@ class MyLibraries extends Component {
           }
           {this.state.isShowDetails && (
             <div className="cur-view-detail">
-              <LibDetail 
+              <LibDetail
                 currentRepo={this.state.currentRepo}
                 closeDetails={this.closeDetails}
               />
diff --git a/frontend/src/pages/my-libs/mylib-repo-list-item.js b/frontend/src/pages/my-libs/mylib-repo-list-item.js
index 32508af9fc..c3f2ff8719 100644
--- a/frontend/src/pages/my-libs/mylib-repo-list-item.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-item.js
@@ -242,12 +242,12 @@ class MylibRepoListItem extends React.Component {
 
   onDeleteRepo = (repo) => {
     seafileAPI.deleteRepo(repo.repo_id).then((res) => {
-      
+
       this.setState({
         isRepoDeleted: true,
         isDeleteDialogShow: false,
       });
-      
+
       this.props.onDeleteRepo(repo);
       let name = repo.repo_name;
       var msg = gettext('Successfully deleted {name}.').replace('{name}', name);
diff --git a/frontend/src/pages/my-libs/mylib-repo-menu.js b/frontend/src/pages/my-libs/mylib-repo-menu.js
index 1f8e07a796..4f1a495579 100644
--- a/frontend/src/pages/my-libs/mylib-repo-menu.js
+++ b/frontend/src/pages/my-libs/mylib-repo-menu.js
@@ -37,7 +37,7 @@ class MylibRepoMenu extends React.Component {
       this.setState({isItemMenuShow: !this.state.isItemMenuShow});
       return;
     }
-    
+
     this.setState(
       {isItemMenuShow: !this.state.isItemMenuShow},
       () => {
@@ -53,7 +53,7 @@ class MylibRepoMenu extends React.Component {
   generatorOperations = () => {
     let repo = this.props.repo;
     let showResetPasswordMenuItem = isPro && repo.encrypted && enableResetEncryptedRepoPassword && isEmailConfigured;
-    let operations = ['Rename', 'Transfer']; 
+    let operations = ['Rename', 'Transfer'];
     if (folderPermEnabled) {
       operations.push('Folder Permission');
     }
@@ -131,18 +131,18 @@ class MylibRepoMenu extends React.Component {
     if (this.props.isPC) {
       return (
         <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-          <DropdownToggle 
+          <DropdownToggle
             tag="i"
             className="sf-dropdown-toggle sf2-icon-caret-down"
             title={gettext('More Operations')}
             // onClick={this.clickOperationMenuToggle}
-            data-toggle="dropdown" 
+            data-toggle="dropdown"
             aria-expanded={this.state.isItemMenuShow}
           />
           <DropdownMenu>
             {operations.map((item, index)=> {
               if (item == 'Divider') {
-                return <DropdownItem key={index} divider />; 
+                return <DropdownItem key={index} divider />;
               } else {
                 return (<DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick}>{this.translateOperations(item)}</DropdownItem>);
               }
@@ -159,12 +159,12 @@ class MylibRepoMenu extends React.Component {
 
     return (
       <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-        <DropdownToggle 
+        <DropdownToggle
           tag="i"
           className="sf-dropdown-toggle fa fa-ellipsis-v ml-0"
           title={gettext('More Operations')}
           // onClick={this.clickOperationMenuToggle}
-          data-toggle="dropdown" 
+          data-toggle="dropdown"
           aria-expanded={this.state.isItemMenuShow}
         />
         <div className={`${this.state.isItemMenuShow ? '' : 'd-none'}`} onClick={this.toggleOperationMenu}>
diff --git a/frontend/src/pages/org-admin/index.js b/frontend/src/pages/org-admin/index.js
index a6b3fc5287..856ff8084b 100644
--- a/frontend/src/pages/org-admin/index.js
+++ b/frontend/src/pages/org-admin/index.js
@@ -59,14 +59,14 @@ class Org extends React.Component {
   }
 
   tabItemClick = (param) => {
-    this.setState({currentTab: param});          
+    this.setState({currentTab: param});
   }
 
   render() {
     let { isSidePanelClosed, currentTab } = this.state;
     return (
       <div id="main">
-        <SidePanel isSidePanelClosed={isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} tabItemClick={this.tabItemClick}/>       
+        <SidePanel isSidePanelClosed={isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} tabItemClick={this.tabItemClick}/>
         <div className="main-panel o-hidden">
           <Router className="reach-router">
             <OrgInfo path={siteRoot + 'org/orgmanage'}/>
diff --git a/frontend/src/pages/org-admin/org-admin-list.js b/frontend/src/pages/org-admin/org-admin-list.js
index 68f71ca85f..df5ab851f7 100644
--- a/frontend/src/pages/org-admin/org-admin-list.js
+++ b/frontend/src/pages/org-admin/org-admin-list.js
@@ -52,7 +52,7 @@ class OrgAdminList extends React.Component {
           <tbody>
             {orgAdminUsers.map(item => {
               return (
-                <UserItem 
+                <UserItem
                   key={item.index}
                   user={item}
                   currentTab="admins"
diff --git a/frontend/src/pages/org-admin/org-department-item.js b/frontend/src/pages/org-admin/org-department-item.js
index 367a0632a4..e76e3fc11e 100644
--- a/frontend/src/pages/org-admin/org-department-item.js
+++ b/frontend/src/pages/org-admin/org-department-item.js
@@ -136,7 +136,7 @@ class OrgDepartmentItem extends React.Component {
   }
 
   showDeleteDepartDialog = (subGroup) => {
-    this.setState({ 
+    this.setState({
       showDeleteDepartDialog: true,
       subGroupID: subGroup.id,
       subGroupName: subGroup.name
@@ -203,7 +203,7 @@ class OrgDepartmentItem extends React.Component {
             <div className="cur-view-path">
               <div className="fleft">
                 <h3 className="sf-heading">
-                  {groupID ? 
+                  {groupID ?
                     <Link to={siteRoot + 'org/departmentadmin/'}>{gettext('Departments')}</Link>
                     : <span>{gettext('Departments')}</span>
                   }
@@ -249,7 +249,7 @@ class OrgDepartmentItem extends React.Component {
                 }
               </div>
             </div>
-            
+
             <div className="cur-view-subcontainer org-members">
               <div className="cur-view-path">
                 <div className="fleft"><h3 className="sf-heading">{gettext('Members')}</h3></div>
@@ -413,7 +413,7 @@ class MemberItem extends React.Component {
         <td><img src={member.avatar_url} alt="member-header" width="24" className="avatar"/></td>
         <td><a href={memberLink}>{member.name}</a></td>
         <td>
-          <RoleEditor 
+          <RoleEditor
             isTextMode={true}
             isEditIconShow={highlight}
             currentRole={member.role}
diff --git a/frontend/src/pages/org-admin/org-departments-list.js b/frontend/src/pages/org-admin/org-departments-list.js
index 7cfc5d8bfb..1ff99a651a 100644
--- a/frontend/src/pages/org-admin/org-departments-list.js
+++ b/frontend/src/pages/org-admin/org-departments-list.js
@@ -27,7 +27,7 @@ class OrgDepartmentsList extends React.Component {
       isShowAddDepartDialog: false,
     };
   }
-  
+
   componentDidMount() {
     this.listDepartGroups();
   }
diff --git a/frontend/src/pages/org-admin/org-group-info.js b/frontend/src/pages/org-admin/org-group-info.js
index ad2350c68f..00be53043d 100644
--- a/frontend/src/pages/org-admin/org-group-info.js
+++ b/frontend/src/pages/org-admin/org-group-info.js
@@ -25,13 +25,13 @@ class OrgGroupInfo extends Component {
     seafileAPI.orgAdminGetGroup(orgID, this.props.groupID).then((res) => {
       this.setState(Object.assign({
         loading: false
-      }, res.data)); 
+      }, res.data));
     }).catch((error) => {
       this.setState({
         loading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
       });
-    }); 
+    });
   }
 
   render() {
@@ -42,7 +42,7 @@ class OrgGroupInfo extends Component {
           <div className="cur-view-container">
             <OrgAdminGroupNav groupID={this.props.groupID} currentItem='info' />
             <div className="cur-view-content">
-              <Content 
+              <Content
                 data={this.state}
               />
             </div>
@@ -84,7 +84,7 @@ class Content extends Component {
           <Link to={`${siteRoot}org/useradmin/info/${encodeURIComponent(creator_email)}/`}>{creator_name}</Link>
         </dd>
       </dl>
-    ); 
+    );
   }
 }
 
diff --git a/frontend/src/pages/org-admin/org-group-members.js b/frontend/src/pages/org-admin/org-group-members.js
index b59f86c996..a1042bfeb5 100644
--- a/frontend/src/pages/org-admin/org-group-members.js
+++ b/frontend/src/pages/org-admin/org-group-members.js
@@ -25,13 +25,13 @@ class OrgGroupMembers extends Component {
     seafileAPI.orgAdminListGroupMembers(orgID, this.props.groupID).then((res) => {
       this.setState(Object.assign({
         loading: false
-      }, res.data)); 
+      }, res.data));
     }).catch((error) => {
       this.setState({
         loading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
       });
-    }); 
+    });
   }
 
   render() {
@@ -42,7 +42,7 @@ class OrgGroupMembers extends Component {
           <div className="cur-view-container">
             <OrgAdminGroupNav groupID={this.props.groupID} currentItem='members' />
             <div className="cur-view-content">
-              <Content 
+              <Content
                 data={this.state}
               />
             </div>
@@ -61,7 +61,7 @@ class Content extends Component {
 
   render() {
     const {
-      loading, errorMsg, members 
+      loading, errorMsg, members
     } = this.props.data;
 
     if (loading) {
@@ -88,7 +88,7 @@ class Content extends Component {
           </tbody>
         </table>
       </Fragment>
-    ); 
+    );
   }
 }
 
@@ -110,7 +110,7 @@ class Item extends Component {
   }
 
   render() {
-    const item = this.props.data; 
+    const item = this.props.data;
     return (
       <Fragment>
         <tr>
diff --git a/frontend/src/pages/org-admin/org-group-repos.js b/frontend/src/pages/org-admin/org-group-repos.js
index 849363b768..20ead10283 100644
--- a/frontend/src/pages/org-admin/org-group-repos.js
+++ b/frontend/src/pages/org-admin/org-group-repos.js
@@ -27,13 +27,13 @@ class OrgGroupRepos extends Component {
     seafileAPI.orgAdminListGroupRepos(orgID, this.props.groupID).then((res) => {
       this.setState(Object.assign({
         loading: false
-      }, res.data)); 
+      }, res.data));
     }).catch((error) => {
       this.setState({
         loading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
       });
-    }); 
+    });
   }
 
   render() {
@@ -44,7 +44,7 @@ class OrgGroupRepos extends Component {
           <div className="cur-view-container">
             <OrgAdminGroupNav groupID={this.props.groupID} currentItem='repos' />
             <div className="cur-view-content">
-              <Content 
+              <Content
                 data={this.state}
               />
             </div>
@@ -63,7 +63,7 @@ class Content extends Component {
 
   render() {
     const {
-      loading, errorMsg, libraries 
+      loading, errorMsg, libraries
     } = this.props.data;
 
     if (loading) {
@@ -92,7 +92,7 @@ class Content extends Component {
           </tbody>
         </table>
       </Fragment>
-    ); 
+    );
   }
 }
 
@@ -111,7 +111,7 @@ class Item extends Component {
   handleMouseOver = () => {
     this.setState({
       isOpIconShown: true
-    }); 
+    });
   }
 
   handleMouseOut = () => {
@@ -150,7 +150,7 @@ class Item extends Component {
 
   render() {
     const { deleted, isOpIconShown, isDeleteRepoDialogOpen } = this.state;
-    const repo = this.props.data; 
+    const repo = this.props.data;
 
     if (deleted) {
       return null;
@@ -160,7 +160,7 @@ class Item extends Component {
       <Fragment>
         <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
           <td>
-            <img src={Utils.getLibIconUrl(repo, false)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" /> 
+            <img src={Utils.getLibIconUrl(repo, false)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" />
           </td>
           <td>{repo.name}</td>
           <td>{Utils.bytesToSize(repo.size)}</td>
diff --git a/frontend/src/pages/org-admin/org-groups.js b/frontend/src/pages/org-admin/org-groups.js
index 4dfb5ad86b..6a89f646eb 100644
--- a/frontend/src/pages/org-admin/org-groups.js
+++ b/frontend/src/pages/org-admin/org-groups.js
@@ -16,7 +16,7 @@ class OrgGroups extends Component {
       page: 1,
       pageNext: false,
       orgGroups: [],
-      isItemFreezed: false  
+      isItemFreezed: false
     };
   }
 
@@ -53,7 +53,7 @@ class OrgGroups extends Component {
       page = page - 1;
     }
     this.initData(page);
-  } 
+  }
 
   onFreezedItem = () => {
     this.setState({isItemFreezed: true});
@@ -67,7 +67,7 @@ class OrgGroups extends Component {
     seafileAPI.orgAdminDeleteOrgGroup(orgID, group.id).then(res => {
       this.setState({
         orgGroups: this.state.orgGroups.filter(item => item.id != group.id)
-      }); 
+      });
       let msg = gettext('Successfully deleted {name}');
       msg = msg.replace('{name}', group.groupName);
       toaster.success(msg);
@@ -104,7 +104,7 @@ class OrgGroups extends Component {
                         key={item.id}
                         group={item}
                         isItemFreezed={this.state.isItemFreezed}
-                        onFreezedItem={this.onFreezedItem} 
+                        onFreezedItem={this.onFreezedItem}
                         onUnfreezedItem={this.onUnfreezedItem}
                         deleteGroupItem={this.deleteGroupItem}
                       />
@@ -160,7 +160,7 @@ class GroupItem extends React.Component {
         highlight: false
       });
     }
-  } 
+  }
 
   onDropdownToggleClick = (e) => {
     e.preventDefault();
@@ -194,9 +194,9 @@ class GroupItem extends React.Component {
       groupInfoHref = siteRoot + 'org/departmentadmin/groups/' + group.id + '/';
     } else {
       groupInfoHref = siteRoot + 'org/groupadmin/' + group.id + '/';
-    } 
-                                                         
-    return groupInfoHref; 
+    }
+
+    return groupInfoHref;
   }
 
   renderGroupCreator = (group) => {
@@ -211,7 +211,7 @@ class GroupItem extends React.Component {
           <a href={userInfoHref} className="font-weight-normal">{group.creatorName}</a>
         </td>
       );
-    }     
+    }
   }
 
   render() {
diff --git a/frontend/src/pages/org-admin/org-libraries.js b/frontend/src/pages/org-admin/org-libraries.js
index fe856610b2..ca44c96c61 100644
--- a/frontend/src/pages/org-admin/org-libraries.js
+++ b/frontend/src/pages/org-admin/org-libraries.js
@@ -20,7 +20,7 @@ class OrgLibraries extends Component {
       pageNext: false,
       orgRepos: [],
       sortBy: '',
-      isItemFreezed: false  
+      isItemFreezed: false
     };
   }
 
@@ -65,7 +65,7 @@ class OrgLibraries extends Component {
       page = page - 1;
     }
     this.listRepos(page);
-  } 
+  }
 
   onFreezedItem = () => {
     this.setState({isItemFreezed: true});
@@ -161,7 +161,7 @@ class OrgLibraries extends Component {
                         key={item.repoID}
                         repo={item}
                         isItemFreezed={this.state.isItemFreezed}
-                        onFreezedItem={this.onFreezedItem} 
+                        onFreezedItem={this.onFreezedItem}
                         onUnfreezedItem={this.onUnfreezedItem}
                         deleteRepoItem={this.deleteRepoItem}
                         transferRepoItem={this.transferRepoItem}
@@ -220,7 +220,7 @@ class RepoItem extends React.Component {
         highlight: false
       });
     }
-  } 
+  }
 
   onDropdownToggleClick = (e) => {
     e.preventDefault();
@@ -257,11 +257,11 @@ class RepoItem extends React.Component {
     let iconTitle;
     if (repo.encrypted) {
       href = mediaUrl + 'img/lib/48/lib-encrypted.png';
-      iconTitle = gettext('Encrypted library'); 
+      iconTitle = gettext('Encrypted library');
     } else {
       href = mediaUrl + 'img/lib/48/lib.png';
       iconTitle = gettext('Read-Write library');
-    } 
+    }
     return <img src={href} title={iconTitle} alt={iconTitle} width="24" />;
   }
 
@@ -294,7 +294,7 @@ class RepoItem extends React.Component {
 
   render() {
     let { repo } = this.props;
-    
+
     let isOperationMenuShow = this.state.showMenu && !repo.isDepartmentRepo;
     return (
       <Fragment>
diff --git a/frontend/src/pages/org-admin/org-links.js b/frontend/src/pages/org-admin/org-links.js
index 30b51d3a27..664a9dc036 100644
--- a/frontend/src/pages/org-admin/org-links.js
+++ b/frontend/src/pages/org-admin/org-links.js
@@ -111,7 +111,7 @@ class OrgLinks extends React.Component {
                         <RepoItem
                           link={item}
                           isItemFreezed={this.state.isItemFreezed}
-                          onFreezedItem={this.onFreezedItem} 
+                          onFreezedItem={this.onFreezedItem}
                           onUnfreezedItem={this.onUnfreezedItem}
                           deleteOrgLink={this.deleteOrgLink}
                           openLinkDialog={this.openLinkDialog}
@@ -167,7 +167,7 @@ class RepoItem extends React.Component {
     if (!this.props.isItemFreezed) {
       this.setState({ showMenu: false, highlight: false });
     }
-  } 
+  }
 
   onDropdownToggleClick = (e) => {
     e.preventDefault();
diff --git a/frontend/src/pages/org-admin/org-logs-file-audit.js b/frontend/src/pages/org-admin/org-logs-file-audit.js
index 8103fef214..964f58fed0 100644
--- a/frontend/src/pages/org-admin/org-logs-file-audit.js
+++ b/frontend/src/pages/org-admin/org-logs-file-audit.js
@@ -21,7 +21,7 @@ class OrgLogsFileAudit extends React.Component {
       eventList: [],
       userSelected: '',
       repoSelected: '',
-      isItemFreezed: false  
+      isItemFreezed: false
     };
   }
 
@@ -175,7 +175,7 @@ class FileAuditItem extends React.Component {
   }
 
   renderUser = (fileEvent) => {
-    if (!fileEvent.user_email) { 
+    if (!fileEvent.user_email) {
       return gettext('Anonymous User');
     }
 
@@ -194,18 +194,18 @@ class FileAuditItem extends React.Component {
         </Dropdown>
       </span>
     );
-    
+
   }
 
   renderType = (type) => {
     if (type.indexOf('web') != -1) {
-      type = 'web'; 
+      type = 'web';
     }
     if (type.indexOf('api') != -1) {
-      type = 'api'; 
+      type = 'api';
     }
     if (type.indexOf('share-link') != -1) {
-      type = 'share link'; 
+      type = 'share link';
     }
     return type;
   }
@@ -217,7 +217,7 @@ class FileAuditItem extends React.Component {
   renderRepo = (fileEvent) => {
     let repoName = 'Deleted';
     if (fileEvent.repo_name) {
-      repoName = fileEvent.repo_name; 
+      repoName = fileEvent.repo_name;
     }
     return (
       <span>
diff --git a/frontend/src/pages/org-admin/org-logs-file-update.js b/frontend/src/pages/org-admin/org-logs-file-update.js
index 7f0a634432..62da56dc05 100644
--- a/frontend/src/pages/org-admin/org-logs-file-update.js
+++ b/frontend/src/pages/org-admin/org-logs-file-update.js
@@ -23,7 +23,7 @@ class OrgLogsFileUpdate extends Component {
       eventList: [],
       userSelected: '',
       repoSelected: '',
-      isItemFreezed: false, 
+      isItemFreezed: false,
       showDetails: false,
       repoID: '',
       commitID: ''
@@ -76,7 +76,7 @@ class OrgLogsFileUpdate extends Component {
   onDetails = (e, fileEvent) => {
     e.preventDefault();
     this.setState({
-      showDetails: !this.state.showDetails, 
+      showDetails: !this.state.showDetails,
       repoID: fileEvent.repo_id,
       commitID: fileEvent.repo_commit_id
     });
@@ -140,9 +140,9 @@ class OrgLogsFileUpdate extends Component {
           {(this.state.page != 1 && this.state.pageNext) && <span> | </span>}
           {this.state.pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext('Next')}</a>}
         </div>
-        {this.state.showDetails && 
+        {this.state.showDetails &&
           <ModalPortal>
-            <FileUpdateDetailDialog 
+            <FileUpdateDetailDialog
               repoID={this.state.repoID}
               commitID={this.state.commitID}
               toggleCancel={this.toggleCancelDetail}
@@ -200,7 +200,7 @@ class FileUpdateItem extends React.Component {
   }
 
   renderUser = (fileEvent) => {
-    if (!fileEvent.user_email) { 
+    if (!fileEvent.user_email) {
       return gettext('Anonymous User');
     }
 
@@ -227,8 +227,8 @@ class FileUpdateItem extends React.Component {
   renderRepo = (fileEvent) => {
     let repoName = 'Deleted';
     if (fileEvent.repo_name) {
-      repoName = fileEvent.repo_name; 
-    } 
+      repoName = fileEvent.repo_name;
+    }
     return (
       <span>
         <span>{repoName}</span>
diff --git a/frontend/src/pages/org-admin/org-logs-perm-audit.js b/frontend/src/pages/org-admin/org-logs-perm-audit.js
index 735c827d4a..785cdd22d7 100644
--- a/frontend/src/pages/org-admin/org-logs-perm-audit.js
+++ b/frontend/src/pages/org-admin/org-logs-perm-audit.js
@@ -21,7 +21,7 @@ class OrgLogsFileUpdate extends Component {
       eventList: [],
       userSelected: '',
       repoSelected: '',
-      isItemFreezed: false  
+      isItemFreezed: false
     };
   }
 
@@ -146,10 +146,10 @@ class PermAuditItem extends React.Component {
         highlight: false
       });
     }
-  } 
+  }
 
   renderFromUser = (permEvent) => {
-    if (!permEvent.from_user_email) { 
+    if (!permEvent.from_user_email) {
       return gettext('Anonymous User');
     }
     return (
@@ -182,42 +182,42 @@ class PermAuditItem extends React.Component {
       if (permEvent.to_group_name) {
         return <a href={siteRoot + 'org/groupadmin/' + permEvent.to_group_id + '/'}>{permEvent.to_group_name}</a>;
       }
-      return 'Deleted'; 
+      return 'Deleted';
     }
-    
+
     if (permEvent.type.indexOf('user') != -1) {
       return <a href={siteRoot + 'org/useradmin/info/' + permEvent.to_user_email + '/'}>{permEvent.to_user_name}</a>;
     }
 
-  } 
+  }
 
   renderType = (type) => {
     if (type.indexOf('add') != -1) {
-      type = 'Add'; 
+      type = 'Add';
     }
     if (type.indexOf('modify') != -1) {
-      type = 'Modify'; 
+      type = 'Modify';
     }
     if (type.indexOf('delete') != -1) {
-      type = 'Delete'; 
+      type = 'Delete';
     }
     return type;
-  } 
+  }
 
   renderRepo = (permEvent) => {
     let repoName = 'Deleted';
     if (permEvent.repo_name) {
-      repoName = permEvent.repo_name; 
-    } 
-    return repoName; 
+      repoName = permEvent.repo_name;
+    }
+    return repoName;
   }
 
   renderFolder = (name) => {
     let folderName = '/';
     if (name) {
-      folderName = name; 
+      folderName = name;
     }
-    return folderName; 
+    return folderName;
   }
 
   render() {
diff --git a/frontend/src/pages/org-admin/org-user-item.js b/frontend/src/pages/org-admin/org-user-item.js
index f4f43124bc..a0f526579b 100644
--- a/frontend/src/pages/org-admin/org-user-item.js
+++ b/frontend/src/pages/org-admin/org-user-item.js
@@ -47,13 +47,13 @@ class UserItem extends React.Component {
         highlight: false
       });
     }
-  } 
+  }
 
   toggleDelete = () => {
     const email = this.props.user.email;
     this.props.toggleDelete(email);
-  }        
-           
+  }
+
   toggleResetPW = () => {
     const { email, name } = this.props.user;
     toaster.success(gettext('Resetting user\'s password, please wait for a moment.'));
@@ -144,7 +144,7 @@ class UserItem extends React.Component {
           <a href={href}>{user.name}</a>
         </td>
         <td>
-          <UserStatusEditor 
+          <UserStatusEditor
             isTextMode={true}
             isEditIconShow={isEditIconShow}
             currentStatus={this.state.currentStatus}
diff --git a/frontend/src/pages/org-admin/org-user-profile.js b/frontend/src/pages/org-admin/org-user-profile.js
index 566ab7dd74..804ebd562a 100644
--- a/frontend/src/pages/org-admin/org-user-profile.js
+++ b/frontend/src/pages/org-admin/org-user-profile.js
@@ -27,30 +27,30 @@ class OrgUserProfile extends Component {
     seafileAPI.orgAdminGetOrgUserInfo(orgID, this.props.email).then((res) => {
       this.setState(Object.assign({
         loading: false
-      }, res.data)); 
+      }, res.data));
     }).catch((error) => {
       this.setState({
         loading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
       });
-    }); 
+    });
   }
 
   updateName = (name) => {
     this.setState({
-      name: name 
+      name: name
     });
   }
 
   updateContactEmail = (contactEmail) => {
     this.setState({
-      contact_email: contactEmail 
+      contact_email: contactEmail
     });
   }
 
   updateQuota = (quota) => {
     this.setState({
-      quota_total: quota 
+      quota_total: quota
     });
   }
 
@@ -62,7 +62,7 @@ class OrgUserProfile extends Component {
           <div className="cur-view-container">
             <OrgAdminUserNav email={this.props.email} currentItem='profile' />
             <div className="cur-view-content">
-              <Content 
+              <Content
                 data={this.state}
                 updateName={this.updateName}
                 updateContactEmail={this.updateContactEmail}
@@ -152,7 +152,7 @@ class Content extends Component {
             <span title={gettext('Edit')} className="attr-action-icon fa fa-pencil-alt" onClick={this.toggleSetQuotaDialog}></span>
           </dd>
         </dl>
-        {isSetNameDialogOpen && 
+        {isSetNameDialogOpen &&
         <SetOrgUserName
           orgID={orgID}
           email={email}
@@ -161,7 +161,7 @@ class Content extends Component {
           toggleDialog={this.toggleSetNameDialog}
         />
         }
-        {isSetContactEmailDialogOpen && 
+        {isSetContactEmailDialogOpen &&
         <SetOrgUserContactEmail
           orgID={orgID}
           email={email}
@@ -170,7 +170,7 @@ class Content extends Component {
           toggleDialog={this.toggleSetContactEmailDialog}
         />
         }
-        {isSetQuotaDialogOpen && 
+        {isSetQuotaDialogOpen &&
         <SetOrgUserQuota
           orgID={orgID}
           email={email}
@@ -180,7 +180,7 @@ class Content extends Component {
         />
         }
       </Fragment>
-    ); 
+    );
   }
 }
 
diff --git a/frontend/src/pages/org-admin/org-user-repos.js b/frontend/src/pages/org-admin/org-user-repos.js
index 2540dd9a3f..550b3e9eb9 100644
--- a/frontend/src/pages/org-admin/org-user-repos.js
+++ b/frontend/src/pages/org-admin/org-user-repos.js
@@ -27,13 +27,13 @@ class OrgUserOwnedRepos extends Component {
     seafileAPI.orgAdminGetOrgUserOwnedRepos(orgID, this.props.email).then((res) => {
       this.setState(Object.assign({
         loading: false
-      }, res.data)); 
+      }, res.data));
     }).catch((error) => {
       this.setState({
         loading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
       });
-    }); 
+    });
   }
 
   render() {
@@ -44,7 +44,7 @@ class OrgUserOwnedRepos extends Component {
           <div className="cur-view-container">
             <OrgAdminUserNav email={this.props.email} currentItem='owned-repos' />
             <div className="cur-view-content">
-              <Content 
+              <Content
                 data={this.state}
               />
             </div>
@@ -92,7 +92,7 @@ class Content extends Component {
           </tbody>
         </table>
       </Fragment>
-    ); 
+    );
   }
 }
 
@@ -111,7 +111,7 @@ class Item extends Component {
   handleMouseOver = () => {
     this.setState({
       isOpIconShown: true
-    }); 
+    });
   }
 
   handleMouseOut = () => {
@@ -150,7 +150,7 @@ class Item extends Component {
 
   render() {
     const { deleted, isOpIconShown, isDeleteRepoDialogOpen } = this.state;
-    const repo = this.props.data; 
+    const repo = this.props.data;
 
     if (deleted) {
       return null;
@@ -160,7 +160,7 @@ class Item extends Component {
       <Fragment>
         <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
           <td>
-            <img src={Utils.getLibIconUrl(repo, false)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" /> 
+            <img src={Utils.getLibIconUrl(repo, false)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" />
           </td>
           <td>{repo.repo_name}</td>
           <td>{Utils.bytesToSize(repo.size)}</td>
diff --git a/frontend/src/pages/org-admin/org-user-shared-repos.js b/frontend/src/pages/org-admin/org-user-shared-repos.js
index a907360ccd..8f60403224 100644
--- a/frontend/src/pages/org-admin/org-user-shared-repos.js
+++ b/frontend/src/pages/org-admin/org-user-shared-repos.js
@@ -25,13 +25,13 @@ class OrgUserSharedRepos extends Component {
     seafileAPI.orgAdminGetOrgUserBesharedRepos(orgID, this.props.email).then((res) => {
       this.setState(Object.assign({
         loading: false
-      }, res.data)); 
+      }, res.data));
     }).catch((error) => {
       this.setState({
         loading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
       });
-    }); 
+    });
   }
 
   render() {
@@ -42,7 +42,7 @@ class OrgUserSharedRepos extends Component {
           <div className="cur-view-container">
             <OrgAdminUserNav email={this.props.email} currentItem='shared-repos' />
             <div className="cur-view-content">
-              <Content 
+              <Content
                 data={this.state}
               />
             </div>
@@ -88,7 +88,7 @@ class Content extends Component {
           })}
         </tbody>
       </table>
-    ); 
+    );
   }
 }
 
@@ -99,11 +99,11 @@ class Item extends Component {
   }
 
   render() {
-    const repo = this.props.data; 
+    const repo = this.props.data;
     return (
       <tr>
         <td>
-          <img src={Utils.getLibIconUrl(repo, false)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" /> 
+          <img src={Utils.getLibIconUrl(repo, false)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" />
         </td>
         <td>{repo.repo_name}</td>
         <td>{repo.owner_name}</td>
diff --git a/frontend/src/pages/org-admin/org-users-admins.js b/frontend/src/pages/org-admin/org-users-admins.js
index 47417e85d7..ba90c40688 100644
--- a/frontend/src/pages/org-admin/org-users-admins.js
+++ b/frontend/src/pages/org-admin/org-users-admins.js
@@ -73,7 +73,7 @@ class OrgUsers extends Component {
     msg = msg.replace('%s', userInfo.email);
     toaster.success(msg);
     this.toggleAddOrgAdmin();
-  } 
+  }
 
   render() {
     const topBtn = 'btn btn-secondary operation-item';
diff --git a/frontend/src/pages/org-admin/org-users-list.js b/frontend/src/pages/org-admin/org-users-list.js
index a564242627..5c0994abb1 100644
--- a/frontend/src/pages/org-admin/org-users-list.js
+++ b/frontend/src/pages/org-admin/org-users-list.js
@@ -73,7 +73,7 @@ class OrgUsersList extends React.Component {
           <tbody>
             {orgUsers.map((item, index) => {
               return (
-                <UserItem 
+                <UserItem
                   key={index}
                   user={item}
                   currentTab="users"
diff --git a/frontend/src/pages/org-admin/org-users-users.js b/frontend/src/pages/org-admin/org-users-users.js
index 4ea4d543a0..d25bf229dc 100644
--- a/frontend/src/pages/org-admin/org-users-users.js
+++ b/frontend/src/pages/org-admin/org-users-users.js
@@ -4,7 +4,7 @@ import Nav from './org-users-nav';
 import OrgUsersList from './org-users-list';
 import MainPanelTopbar from './main-panel-topbar';
 import ModalPortal from '../../components/modal-portal';
-import AddOrgUserDialog from '../../components/dialog/org-add-user-dialog'; 
+import AddOrgUserDialog from '../../components/dialog/org-add-user-dialog';
 import InviteUserDialog from '../../components/dialog/org-admin-invite-user-dialog';
 import toaster from '../../components/toast';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -20,7 +20,7 @@ class OrgUsers extends Component {
       orgUsers: [],
       page: 1,
       pageNext: false,
-      sortBy: '', 
+      sortBy: '',
       sortOrder: 'asc',
       isShowAddOrgUserDialog: false,
       isInviteUserDialogOpen: false
@@ -58,7 +58,7 @@ class OrgUsers extends Component {
       url.search = searchParams.toString();
       navigate(url.toString());
       this.initOrgUsersData(page);
-    }); 
+    });
   }
 
   toggleAddOrgUser = () => {
@@ -91,7 +91,7 @@ class OrgUsers extends Component {
       let userInfo = new OrgUserInfo(res.data);
       this.state.orgUsers.unshift(userInfo);
       this.setState({
-        orgUsers: this.state.orgUsers 
+        orgUsers: this.state.orgUsers
       });
       this.toggleAddOrgUser();
       let msg = gettext('successfully added user %s.');
@@ -115,7 +115,7 @@ class OrgUsers extends Component {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
-  } 
+  }
 
   render() {
     const topBtn = 'btn btn-secondary operation-item';
diff --git a/frontend/src/pages/repo-wiki-mode/side-panel.js b/frontend/src/pages/repo-wiki-mode/side-panel.js
index 420a2179b9..99d423a98e 100644
--- a/frontend/src/pages/repo-wiki-mode/side-panel.js
+++ b/frontend/src/pages/repo-wiki-mode/side-panel.js
@@ -99,7 +99,7 @@ class SidePanel extends Component {
       this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
     }
   }
-  
+
   onAddFolderToggle = (type) => {
     if (type === 'root') {
       let root = this.props.treeData.root;
@@ -144,7 +144,7 @@ class SidePanel extends Component {
 
   checkDuplicatedName = (newName) => {
     let node = this.state.opNode;
-    // root node to new node conditions: parentNode is null, 
+    // root node to new node conditions: parentNode is null,
     let parentNode = node.parentNode ? node.parentNode : node;
     let childrenObject = parentNode.children.map(item => {
       return item.object;
@@ -167,11 +167,11 @@ class SidePanel extends Component {
             <div className="heading-icon">
               {(permission && this.state.isMenuIconShow) && (
                 <Dropdown isOpen={this.state.isHeaderMenuShow} toggle={this.toggleOperationMenu}>
-                  <DropdownToggle 
-                    tag="i" 
-                    className="fas fa-ellipsis-v" 
+                  <DropdownToggle
+                    tag="i"
+                    className="fas fa-ellipsis-v"
                     title={gettext('More Operations')}
-                    data-toggle="dropdown" 
+                    data-toggle="dropdown"
                     aria-expanded={this.state.isHeaderMenuShow}
                     onClick={this.onDropdownToggleClick}
                   />
@@ -184,7 +184,7 @@ class SidePanel extends Component {
             </div>
           </h3>
           <div className="wiki-pages-container">
-            {this.props.isTreeDataLoading ? 
+            {this.props.isTreeDataLoading ?
               (<Loading/>) :
               (<TreeView
                 isNodeMenuShow={this.isNodeMenuShow}
diff --git a/frontend/src/pages/search/advanced-search.js b/frontend/src/pages/search/advanced-search.js
index b40c6efa57..386b5d4349 100644
--- a/frontend/src/pages/search/advanced-search.js
+++ b/frontend/src/pages/search/advanced-search.js
@@ -203,7 +203,7 @@ class AdvancedSearch extends React.Component {
                     value={stateAndValues.time_from}
                     onChange={this.props.handleTimeFromInput}
                     showHourAndMinute={false}
-                  />  
+                  />
                   <span className="select-data-icon"><i className="fa fa-calendar-alt"></i></span>
                 </Col>
                 <div className="mt-2">-</div>
@@ -214,7 +214,7 @@ class AdvancedSearch extends React.Component {
                     value={stateAndValues.time_to}
                     onChange={this.props.handleTimeToInput}
                     showHourAndMinute={false}
-                  />  
+                  />
                   <span className="select-data-icon"><i className="fa fa-calendar-alt"></i></span>
                 </Col>
               </Row>
diff --git a/frontend/src/pages/search/main-panel.js b/frontend/src/pages/search/main-panel.js
index 9bafff2a16..85d2d655ff 100644
--- a/frontend/src/pages/search/main-panel.js
+++ b/frontend/src/pages/search/main-panel.js
@@ -26,7 +26,7 @@ class SearchViewPanel extends React.Component {
       isShowSearchFilter: false,
       // advanced search index
       q: q.trim(),
-      search_repo: search_repo, 
+      search_repo: search_repo,
       search_ftypes: search_ftypes,
       fileTypeItemsStatus: [false, false, false, false, false, false, false],
       input_fexts: '',
diff --git a/frontend/src/pages/share-admin/folders.js b/frontend/src/pages/share-admin/folders.js
index 50ac18040b..34fc71f725 100644
--- a/frontend/src/pages/share-admin/folders.js
+++ b/frontend/src/pages/share-admin/folders.js
@@ -67,7 +67,7 @@ class Content extends Component {
         </table>
       );
 
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -144,7 +144,7 @@ class Item extends Component {
   changePerm = (permission) => {
     const item = this.props.item;
     const postData = {
-      'permission': permission 
+      'permission': permission
     };
     let options = {
       'p': item.path
@@ -182,7 +182,7 @@ class Item extends Component {
     if (share_permission == 'r' || share_permission == 'preview') {
       is_readonly = true;
     }
-    let iconUrl = Utils.getFolderIconUrl(is_readonly); 
+    let iconUrl = Utils.getFolderIconUrl(is_readonly);
     let iconTitle = Utils.getFolderIconTitle({
       'permission': share_permission
     });
@@ -193,11 +193,11 @@ class Item extends Component {
         <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
         <td><Link to={folderUrl}>{item.folder_name}</Link></td>
         <td>
-          {item.share_type == 'personal' ? 
+          {item.share_type == 'personal' ?
             <span title={item.contact_email}>{item.user_name}</span> : item.group_name}
         </td>
         <td>
-          <SharePermissionEditor 
+          <SharePermissionEditor
             isTextMode={true}
             isEditIconShow={isOpIconShown}
             currentPermission={share_permission}
@@ -321,7 +321,7 @@ class ShareAdminFolders extends Component {
             <h3 className="sf-heading">{gettext('Folders')}</h3>
           </div>
           <div className="cur-view-content">
-            <Content 
+            <Content
               errorMsg={this.state.errorMsg}
               loading={this.state.loading}
               items={this.state.items}
diff --git a/frontend/src/pages/share-admin/libraries.js b/frontend/src/pages/share-admin/libraries.js
index 2ce654783a..9fa6856219 100644
--- a/frontend/src/pages/share-admin/libraries.js
+++ b/frontend/src/pages/share-admin/libraries.js
@@ -60,7 +60,7 @@ class Content extends Component {
           </thead>
           <tbody>
             {items.map((item, index) => {
-              return (<Item 
+              return (<Item
                 key={index}
                 isDesktop={isDesktop}
                 item={item}
@@ -70,7 +70,7 @@ class Content extends Component {
         </table>
       );
 
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -157,7 +157,7 @@ class Item extends Component {
       options.user = item.user_email;
     } else if (share_type == 'group') {
       options.group_id = item.group_id;
-    } 
+    }
 
     seafileAPI.unshareRepo(item.repo_id, options).then((res) => {
       this.setState({
@@ -183,7 +183,7 @@ class Item extends Component {
       is_admin: is_admin
     });
 
-    let iconUrl = Utils.getLibIconUrl(item); 
+    let iconUrl = Utils.getLibIconUrl(item);
     let iconTitle = Utils.getLibIconTitle(item);
     let repoUrl = `${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}/`;
 
@@ -210,7 +210,7 @@ class Item extends Component {
           {item.share_type == 'personal' ? <span title={item.contact_email}>{shareTo}</span> : shareTo}
         </td>
         <td>
-          <SharePermissionEditor 
+          <SharePermissionEditor
             isTextMode={true}
             isEditIconShow={this.state.isOpIconShown}
             currentPermission={share_permission}
@@ -267,7 +267,7 @@ class Item extends Component {
 }
 
 class ShareAdminLibraries extends Component {
-  
+
   constructor(props) {
     super(props);
     this.state = {
@@ -313,7 +313,7 @@ class ShareAdminLibraries extends Component {
             <h3 className="sf-heading">{gettext('Libraries')}</h3>
           </div>
           <div className="cur-view-content">
-            <Content 
+            <Content
               errorMsg={this.state.errorMsg}
               loading={this.state.loading}
               items={this.state.items}
diff --git a/frontend/src/pages/share-admin/share-links.js b/frontend/src/pages/share-admin/share-links.js
index 4e4c3c1db7..82de6ec677 100644
--- a/frontend/src/pages/share-admin/share-links.js
+++ b/frontend/src/pages/share-admin/share-links.js
@@ -65,13 +65,13 @@ class Content extends Component {
                 <th width={columnWidths[2]}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Expiration')} {sortByTime && sortIcon}</a></th>
                 <th width="10%">{/*Operations*/}</th>
               </tr>
-            ) : ( 
+            ) : (
               <tr>
                 <th width="12%"></th>
                 <th width="80%"></th>
                 <th width="8%"></th>
               </tr>
-            )}  
+            )}
           </thead>
           <tbody>
             {items.map((item, index) => {
@@ -81,7 +81,7 @@ class Content extends Component {
         </table>
       );
 
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -122,19 +122,19 @@ class Item extends Component {
   toggleOpMenu = () => {
     this.setState({
       isOpMenuOpen: !this.state.isOpMenuOpen
-    }); 
+    });
   }
 
   togglePermSelectDialog = () => {
     this.setState({
       isPermSelectDialogOpen: !this.state.isPermSelectDialogOpen
-    }); 
+    });
   }
 
   toggleLinkDialog = () => {
     this.setState({
       isLinkDialogOpen: !this.state.isLinkDialogOpen
-    }); 
+    });
   }
 
   handleMouseOver = () => {
@@ -149,7 +149,7 @@ class Item extends Component {
     e.preventDefault();
     this.toggleLinkDialog();
   }
-  
+
   removeLink = (e) => {
     e.preventDefault();
     this.props.onRemoveLink(this.props.item);
@@ -170,7 +170,7 @@ class Item extends Component {
     const permissionDetails = Utils.getShareLinkPermissionObject(permission).permissionDetails;
     seafileAPI.updateShareLink(item.token, JSON.stringify(permissionDetails)).then(() => {
       this.setState({
-        currentPermission: permission 
+        currentPermission: permission
       });
       let message = gettext('Successfully modified permission.');
       toaster.success(message);
@@ -190,7 +190,7 @@ class Item extends Component {
       iconUrl = Utils.getFolderIconUrl(false);
       objUrl = `${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}${Utils.encodePath(path)}`;
     } else {
-      iconUrl = Utils.getFileIconUrl(item.obj_name); 
+      iconUrl = Utils.getFileIconUrl(item.obj_name);
       objUrl = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
     }
 
@@ -206,7 +206,7 @@ class Item extends Component {
         <td><Link to={`${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}/`}>{item.repo_name}</Link></td>
         {isPro &&
         <td>
-          <ShareLinkPermissionEditor 
+          <ShareLinkPermissionEditor
             isTextMode={true}
             isEditIconShow={isOpIconShown && !item.is_expired}
             currentPermission={currentPermission}
@@ -216,7 +216,7 @@ class Item extends Component {
         </td>
         }
         <td>{item.view_cnt}</td>
-        <td>{this.renderExpiration()}</td> 
+        <td>{this.renderExpiration()}</td>
         <td>
           {!item.is_expired && <a href="#" className={`sf2-icon-link action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('View')} onClick={this.viewLink}></a>}
           <a href="#" className={`sf2-icon-delete action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('Remove')} onClick={this.removeLink}></a>
@@ -224,7 +224,7 @@ class Item extends Component {
       </tr>
     );
 
-    const mobileItem = ( 
+    const mobileItem = (
       <Fragment>
         <tr>
           <td><img src={iconUrl} alt="" width="24" /></td>
@@ -247,7 +247,7 @@ class Item extends Component {
                 title={gettext('More Operations')}
                 data-toggle="dropdown"
                 aria-expanded={this.state.isOpMenuOpen}
-              />  
+              />
               <div className={this.state.isOpMenuOpen ? '' : 'd-none'} onClick={this.toggleOpMenu}>
                 <div className="mobile-operation-menu-bg-layer"></div>
                 <div className="mobile-operation-menu">
diff --git a/frontend/src/pages/share-admin/upload-links.js b/frontend/src/pages/share-admin/upload-links.js
index 370d3cb0fc..e50c0c19a3 100644
--- a/frontend/src/pages/share-admin/upload-links.js
+++ b/frontend/src/pages/share-admin/upload-links.js
@@ -21,7 +21,7 @@ class Content extends Component {
     }
     if (errorMsg) {
       return <p className="error text-center">{errorMsg}</p>;
-    } 
+    }
 
     const emptyTip = (
       <EmptyTip>
@@ -43,13 +43,13 @@ class Content extends Component {
               <th width="16%">{gettext('Expiration')}</th>
               <th width="10%">{/*Operations*/}</th>
             </tr>
-          ) : ( 
+          ) : (
             <tr>
               <th width="12%"></th>
               <th width="80%"></th>
               <th width="8%"></th>
-            </tr> 
-          )}    
+            </tr>
+          )}
         </thead>
         <tbody>
           {items.map((item, index) => {
@@ -59,7 +59,7 @@ class Content extends Component {
       </table>
     );
 
-    return items.length ? table : emptyTip; 
+    return items.length ? table : emptyTip;
   }
 }
 
@@ -83,7 +83,7 @@ class Item extends Component {
   toggleLinkDialog = () => {
     this.setState({
       isLinkDialogOpen: !this.state.isLinkDialogOpen
-    });   
+    });
   }
 
   handleMouseOver = () => {
@@ -98,7 +98,7 @@ class Item extends Component {
     e.preventDefault();
     this.toggleLinkDialog();
   }
-  
+
   removeLink = (e) => {
     e.preventDefault();
     this.props.onRemoveLink(this.props.item);
@@ -108,7 +108,7 @@ class Item extends Component {
     const item = this.props.item;
     if (!item.expire_date) {
       return '--';
-    }   
+    }
     const expire_date = moment(item.expire_date).format('YYYY-MM-DD');
     const expire_time = moment(item.expire_date).format('YYYY-MM-DD HH:mm:ss');
     return (<span className={item.is_expired ? 'error' : ''} title={expire_time}>{expire_date}</span>);
@@ -140,7 +140,7 @@ class Item extends Component {
       <tr>
         <td><img src={iconUrl} alt="" width="24" /></td>
         <td>
-          <Link to={objUrl}>{item.obj_name}</Link> 
+          <Link to={objUrl}>{item.obj_name}</Link>
           <br />
           <span>{item.repo_name}</span><br />
           <span className="item-meta-info">{item.view_cnt}<span className="small text-secondary">({gettext('Visits')})</span></span>
diff --git a/frontend/src/pages/share-with-ocm/remote-dir-content.js b/frontend/src/pages/share-with-ocm/remote-dir-content.js
index 10c328f839..a640b378f1 100644
--- a/frontend/src/pages/share-with-ocm/remote-dir-content.js
+++ b/frontend/src/pages/share-with-ocm/remote-dir-content.js
@@ -52,7 +52,7 @@ class DirentItem extends React.Component {
             }
           </td>
           <td>
-            {isOpIconShown && dirent.is_file && 
+            {isOpIconShown && dirent.is_file &&
             <a href="#" className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.downloadDirent}></a>
             }
           </td>
diff --git a/frontend/src/pages/share-with-ocm/remote-dir-view.js b/frontend/src/pages/share-with-ocm/remote-dir-view.js
index 70a5fe59a5..559767b297 100644
--- a/frontend/src/pages/share-with-ocm/remote-dir-view.js
+++ b/frontend/src/pages/share-with-ocm/remote-dir-view.js
@@ -143,7 +143,7 @@ class DirView extends Component {
   }
 
   render() {
-    const { loading, errorMsg, 
+    const { loading, errorMsg,
       repoName, direntList, path, userPerm } = this.state;
     const { repoID } = this.props;
 
@@ -160,7 +160,7 @@ class DirView extends Component {
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path align-items-center">
-              <DirPathBar 
+              <DirPathBar
                 repoID={repoID}
                 repoName={repoName}
                 currentPath={path}
diff --git a/frontend/src/pages/shared-with-all/public-shared-view.js b/frontend/src/pages/shared-with-all/public-shared-view.js
index f8ff288c31..431bed9388 100644
--- a/frontend/src/pages/shared-with-all/public-shared-view.js
+++ b/frontend/src/pages/shared-with-all/public-shared-view.js
@@ -184,7 +184,7 @@ class PublicSharedView extends React.Component {
                     </DropdownToggle>
                   </MediaQuery>
                   <MediaQuery query="(max-width: 767.8px)">
-                    <DropdownToggle 
+                    <DropdownToggle
                       tag="span"
                       className="sf2-icon-plus mobile-toolbar-icon"
                       title={gettext('Add Library')}
@@ -211,7 +211,7 @@ class PublicSharedView extends React.Component {
               {(!this.state.isLoading && errMessage) && errMessage}
               {(!this.state.isLoading && this.state.repoList.length === 0) && emptyTip}
               {(!this.state.isLoading && this.state.repoList.length > 0) &&
-                <SharedRepoListView 
+                <SharedRepoListView
                   libraryType={this.state.libraryType}
                   repoList={this.state.repoList}
                   sortBy={this.state.sortBy}
@@ -234,7 +234,7 @@ class PublicSharedView extends React.Component {
         }
         {this.state.isCreateRepoDialogShow && (
           <ModalPortal>
-            <CreateRepoDialog 
+            <CreateRepoDialog
               libraryType={this.state.libraryType}
               onCreateToggle={this.onCreateRepoToggle}
               onCreateRepo={this.onCreateRepo}
@@ -243,7 +243,7 @@ class PublicSharedView extends React.Component {
         )}
         {this.state.isSelectRepoDialpgShow && (
           <ModalPortal>
-            <ShareRepoDialog 
+            <ShareRepoDialog
               onRepoSelectedHandler={this.onRepoSelectedHandler}
               onShareRepoDialogClose={this.onSelectRepoToggle}
             />
diff --git a/frontend/src/pages/sys-admin/admin-logs/login-logs.js b/frontend/src/pages/sys-admin/admin-logs/login-logs.js
index c0707c92c7..a1a2db08e8 100644
--- a/frontend/src/pages/sys-admin/admin-logs/login-logs.js
+++ b/frontend/src/pages/sys-admin/admin-logs/login-logs.js
@@ -69,7 +69,7 @@ class Content extends Component {
           />
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -116,7 +116,7 @@ class AdminLoginLogs extends Component {
       currentPage: parseInt(urlParams.get('page') || currentPage)
     }, () => {
       this.getLogsByPage(this.state.currentPage);
-    }); 
+    });
   }
 
   getLogsByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/admin-logs/operation-logs.js b/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
index 959ab4f5f0..c50b30d1ba 100644
--- a/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
+++ b/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
@@ -47,7 +47,7 @@ class Content extends Component {
                 <th width="15%">{gettext('Time')}</th>
               </tr>
             </thead>
-            {items && 
+            {items &&
               <tbody>
                 {items.map((item, index) => {
                   return (<Item
@@ -68,7 +68,7 @@ class Content extends Component {
           />
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -213,7 +213,7 @@ class AdminOperationLogs extends Component {
       currentPage: parseInt(urlParams.get('page') || currentPage)
     }, () => {
       this.getLogsByPage(this.state.currentPage);
-    }); 
+    });
   }
 
   getLogsByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/departments/department-detail.js b/frontend/src/pages/sys-admin/departments/department-detail.js
index 4d4dddccf4..3d4c128894 100644
--- a/frontend/src/pages/sys-admin/departments/department-detail.js
+++ b/frontend/src/pages/sys-admin/departments/department-detail.js
@@ -142,7 +142,7 @@ class DepartmentDetail extends React.Component {
   }
 
   showDeleteDepartDialog = (subGroup) => {
-    this.setState({ 
+    this.setState({
       showDeleteDepartDialog: true,
       subGroupID: subGroup.id,
       subGroupName: subGroup.name
@@ -207,7 +207,7 @@ class DepartmentDetail extends React.Component {
             <div className="cur-view-path">
               <div className="fleft">
                 <h3 className="sf-heading">
-                  {groupID ? 
+                  {groupID ?
                     <Link to={siteRoot + 'sys/departments/'}>{gettext('Departments')}</Link>
                     : <span>{gettext('Departments')}</span>
                   }
@@ -253,7 +253,7 @@ class DepartmentDetail extends React.Component {
                 }
               </div>
             </div>
-            
+
             <div className="cur-view-subcontainer org-members">
               <div className="cur-view-path">
                 <div className="fleft"><h3 className="sf-heading">{gettext('Members')}</h3></div>
diff --git a/frontend/src/pages/sys-admin/departments/departments-list.js b/frontend/src/pages/sys-admin/departments/departments-list.js
index 8e31100816..8a208b7460 100644
--- a/frontend/src/pages/sys-admin/departments/departments-list.js
+++ b/frontend/src/pages/sys-admin/departments/departments-list.js
@@ -26,7 +26,7 @@ class DepartmentsList extends React.Component {
       isShowAddDepartDialog: false,
     };
   }
-  
+
   componentDidMount() {
     this.listDepartGroups();
   }
diff --git a/frontend/src/pages/sys-admin/devices/desktop-devices.js b/frontend/src/pages/sys-admin/devices/desktop-devices.js
index 25c1f681d5..2f489410a6 100644
--- a/frontend/src/pages/sys-admin/devices/desktop-devices.js
+++ b/frontend/src/pages/sys-admin/devices/desktop-devices.js
@@ -16,7 +16,7 @@ class DesktopDevices extends Component {
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <DevicesNav currentItem="desktop" />
-            <DevicesByPlatform 
+            <DevicesByPlatform
               devicesPlatform={'desktop'}
             />
           </div>
diff --git a/frontend/src/pages/sys-admin/devices/devices-by-platform.js b/frontend/src/pages/sys-admin/devices/devices-by-platform.js
index 9d1ac5284d..25607c44ad 100644
--- a/frontend/src/pages/sys-admin/devices/devices-by-platform.js
+++ b/frontend/src/pages/sys-admin/devices/devices-by-platform.js
@@ -65,7 +65,7 @@ class Content extends Component {
         </Fragment>
       );
 
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -89,7 +89,7 @@ class Item extends Component {
     this.setState({isOpIconShown: false});
   }
 
-  handleUnlink = (e) => { 
+  handleUnlink = (e) => {
     e.preventDefault();
     if (this.props.item.is_desktop_client) {
       this.toggleUnlinkDeviceDialog();
@@ -170,7 +170,7 @@ class DevicesByPlatform extends Component {
       currentPage: parseInt(urlParams.get('page') || currentPage)
     }, () => {
       this.getDevicesListByPage(this.state.currentPage);
-    }); 
+    });
   }
 
   getDevicesListByPage = (page) => {
@@ -186,7 +186,7 @@ class DevicesByPlatform extends Component {
       this.setState({
         loading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
-      });    
+      });
     });
   }
 
diff --git a/frontend/src/pages/sys-admin/devices/devices-errors.js b/frontend/src/pages/sys-admin/devices/devices-errors.js
index 80d0ea1f55..f6ad3859b0 100644
--- a/frontend/src/pages/sys-admin/devices/devices-errors.js
+++ b/frontend/src/pages/sys-admin/devices/devices-errors.js
@@ -51,7 +51,7 @@ class Content extends Component {
           </table>
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -113,7 +113,7 @@ class DeviceErrors extends Component {
       this.setState({
         loading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
-      });    
+      });
     });
   }
 
diff --git a/frontend/src/pages/sys-admin/devices/devices-nav.js b/frontend/src/pages/sys-admin/devices/devices-nav.js
index 45021f1d0c..c390744ce2 100644
--- a/frontend/src/pages/sys-admin/devices/devices-nav.js
+++ b/frontend/src/pages/sys-admin/devices/devices-nav.js
@@ -12,7 +12,7 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'desktop', urlPart:'desktop-devices', text: gettext('Desktop')}, 
+      {name: 'desktop', urlPart:'desktop-devices', text: gettext('Desktop')},
       {name: 'mobile', urlPart:'mobile-devices', text: gettext('Mobile')}
     ];
     if (isPro) {
diff --git a/frontend/src/pages/sys-admin/devices/mobile-devices.js b/frontend/src/pages/sys-admin/devices/mobile-devices.js
index 1935455abc..41a9f4d2c6 100644
--- a/frontend/src/pages/sys-admin/devices/mobile-devices.js
+++ b/frontend/src/pages/sys-admin/devices/mobile-devices.js
@@ -16,7 +16,7 @@ class MobileDevices extends Component {
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <DevicesNav currentItem="mobile" />
-            <DevicesByPlatform 
+            <DevicesByPlatform
               devicesPlatform={'mobile'}
             />
           </div>
diff --git a/frontend/src/pages/sys-admin/file-scan-records.js b/frontend/src/pages/sys-admin/file-scan-records.js
index 9bf452140d..b25ec5c573 100644
--- a/frontend/src/pages/sys-admin/file-scan-records.js
+++ b/frontend/src/pages/sys-admin/file-scan-records.js
@@ -118,7 +118,7 @@ class FileScanRecords extends Component {
               <h3 className="sf-heading">{gettext('Content Scan Records')}</h3>
             </div>
             <div className="cur-view-content">
-              <Table 
+              <Table
                 loading={this.state.loading}
                 errorMsg={this.state.errorMsg}
                 records={this.state.records}
diff --git a/frontend/src/pages/sys-admin/groups/group-members.js b/frontend/src/pages/sys-admin/groups/group-members.js
index a82c2e43aa..bcdff7bea6 100644
--- a/frontend/src/pages/sys-admin/groups/group-members.js
+++ b/frontend/src/pages/sys-admin/groups/group-members.js
@@ -55,7 +55,7 @@ class Content extends Component {
           </table>
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -110,7 +110,7 @@ class Item extends Component {
           <td>
             {item.role == 'Owner' ?
               gettext('Owner') :
-              <SysAdminGroupRoleEditor 
+              <SysAdminGroupRoleEditor
                 isTextMode={true}
                 isEditIconShow={isOpIconShown}
                 roleOptions={['Member', 'Admin']}
@@ -126,7 +126,7 @@ class Item extends Component {
           </td>
         </tr>
         {isDeleteDialogOpen &&
-          <CommonOperationConfirmationDialog 
+          <CommonOperationConfirmationDialog
             title={gettext('Remove Member')}
             message={dialogMsg}
             executeOperation={this.removeMember}
@@ -238,7 +238,7 @@ class GroupMembers extends Component {
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
-            <GroupNav 
+            <GroupNav
               currentItem="members"
               groupID={this.props.groupID}
               groupName={this.state.groupName}
diff --git a/frontend/src/pages/sys-admin/groups/group-repos.js b/frontend/src/pages/sys-admin/groups/group-repos.js
index 3b2f1d9653..83af8654ed 100644
--- a/frontend/src/pages/sys-admin/groups/group-repos.js
+++ b/frontend/src/pages/sys-admin/groups/group-repos.js
@@ -54,7 +54,7 @@ class Content extends Component {
           </table>
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -99,10 +99,10 @@ class Item extends Component {
         return <a href={`${siteRoot}sys/libraries/${repo.id}/`}>{repo.name}</a>;
       } else {
         return repo.name;
-      }   
+      }
     } else {
       return '--';
-    }   
+    }
   }
 
   render() {
@@ -129,7 +129,7 @@ class Item extends Component {
           </td>
         </tr>
         {isUnshareRepoDialogOpen &&
-          <CommonOperationConfirmationDialog 
+          <CommonOperationConfirmationDialog
             title={gettext('Unshare Library')}
             message={dialogMsg}
             executeOperation={this.unshareRepo}
@@ -192,7 +192,7 @@ class GroupRepos extends Component {
         <MainPanelTopbar />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
-            <GroupNav 
+            <GroupNav
               groupID={this.props.groupID}
               groupName={this.state.groupName}
               currentItem="repos"
diff --git a/frontend/src/pages/sys-admin/groups/groups-content.js b/frontend/src/pages/sys-admin/groups/groups-content.js
index c10b823ebf..64f66b7693 100644
--- a/frontend/src/pages/sys-admin/groups/groups-content.js
+++ b/frontend/src/pages/sys-admin/groups/groups-content.js
@@ -15,9 +15,9 @@ class Content extends Component {
 
   constructor(props) {
     super(props);
-    this.state = { 
+    this.state = {
       isItemFreezed: false
-    };  
+    };
   }
 
   onFreezedItem = () => {
@@ -85,7 +85,7 @@ class Content extends Component {
           }
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -164,7 +164,7 @@ class Item extends Component {
   }
 
   translateOperations = (item) => {
-    let translateResult = ''; 
+    let translateResult = '';
     switch(item) {
       case 'Delete':
         translateResult = gettext('Delete');
@@ -172,7 +172,7 @@ class Item extends Component {
       case 'Transfer':
         translateResult = gettext('Transfer');
         break;
-    }   
+    }
 
     return translateResult;
   }
@@ -214,7 +214,7 @@ class Item extends Component {
           </td>
         </tr>
         {isDeleteDialogOpen &&
-          <CommonOperationConfirmationDialog 
+          <CommonOperationConfirmationDialog
             title={gettext('Delete Group')}
             message={deleteDialogMsg}
             executeOperation={this.deleteGroup}
diff --git a/frontend/src/pages/sys-admin/groups/groups.js b/frontend/src/pages/sys-admin/groups/groups.js
index bc8c7ab3d7..85f1f2f881 100644
--- a/frontend/src/pages/sys-admin/groups/groups.js
+++ b/frontend/src/pages/sys-admin/groups/groups.js
@@ -25,14 +25,14 @@ class Groups extends Component {
   }
 
   componentDidMount () {
-      let urlParams = (new URL(window.location)).searchParams;
-      const { currentPage = 1, perPage } = this.state;
-      this.setState({
-        perPage: parseInt(urlParams.get('per_page') || perPage),
-        currentPage: parseInt(urlParams.get('page') || currentPage)
-      }, () => {
-        this.getGroupListByPage(this.state.currentPage);
-      }); 
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage = 1, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getGroupListByPage(this.state.currentPage);
+    });
   }
 
   toggleCreateGroupDialog = () => {
@@ -59,7 +59,7 @@ class Groups extends Component {
       perPage: perPage
     }, () => {
       this.getGroupListByPage(1);
-    }); 
+    });
   }
 
   createGroup = (groupName, OnwerEmail) => {
@@ -113,7 +113,7 @@ class Groups extends Component {
     return <Search
       placeholder={gettext('Search groups by name')}
       submit={this.searchGroups}
-    />; 
+    />;
   }
 
   searchGroups = (name) => {
@@ -152,7 +152,7 @@ class Groups extends Component {
           </div>
         </div>
         {isCreateGroupDialogOpen &&
-          <SysAdminCreateGroupDialog 
+          <SysAdminCreateGroupDialog
             createGroup={this.createGroup}
             toggleDialog={this.toggleCreateGroupDialog}
           />
diff --git a/frontend/src/pages/sys-admin/groups/search-groups.js b/frontend/src/pages/sys-admin/groups/search-groups.js
index e49f686168..e7e792f95e 100644
--- a/frontend/src/pages/sys-admin/groups/search-groups.js
+++ b/frontend/src/pages/sys-admin/groups/search-groups.js
@@ -12,8 +12,8 @@ class SearchGroups extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      name: '', 
-      isSubmitBtnActive: false, 
+      name: '',
+      isSubmitBtnActive: false,
       loading: true,
       errorMsg: '',
       groupList: [],
diff --git a/frontend/src/pages/sys-admin/index.js b/frontend/src/pages/sys-admin/index.js
index b0634725c6..be386cf907 100644
--- a/frontend/src/pages/sys-admin/index.js
+++ b/frontend/src/pages/sys-admin/index.js
@@ -177,7 +177,7 @@ class SysAdmin extends React.Component {
 
   tabItemClick = (param) => {
     this.setState({currentTab: param});
-  }  
+  }
 
   render() {
     let { currentTab, isSidePanelClosed } = this.state;
@@ -234,7 +234,7 @@ class SysAdmin extends React.Component {
             <SharePermissionLogs path={siteRoot + 'sys/logs/share-permission'} />
             <AdminOperationLogs path={siteRoot + 'sys/admin-logs/operation'} />
             <AdminLoginLogs path={siteRoot + 'sys/admin-logs/login'} />
-            
+
             <Users path={siteRoot + 'sys/users'} />
             <AdminUsers path={siteRoot + 'sys/users/admins'} />
             <LDAPImportedUsers path={siteRoot + 'sys/users/ldap-imported'} />
@@ -254,7 +254,7 @@ class SysAdmin extends React.Component {
 
             <FileScanRecords
               path={siteRoot + 'sys/file-scan-records'}
-              currentTab={currentTab} 
+              currentTab={currentTab}
               tabItemClick={this.tabItemClick}
             />
 
diff --git a/frontend/src/pages/sys-admin/info.js b/frontend/src/pages/sys-admin/info.js
index facb010c47..227c7522ab 100644
--- a/frontend/src/pages/sys-admin/info.js
+++ b/frontend/src/pages/sys-admin/info.js
@@ -74,7 +74,7 @@ class Info extends Component {
 
   render() {
     let { license_mode, license_to, license_expiration, org_count,
-      repos_count, total_files_count, total_storage, total_devices_count, 
+      repos_count, total_files_count, total_storage, total_devices_count,
       current_connected_devices_count, license_maxusers, multi_tenancy_enabled,
       active_users_count, users_count, groups_count, with_license } = this.state.sysInfo;
     let { loading, errorMsg } = this.state;
diff --git a/frontend/src/pages/sys-admin/institutions/institution-admins.js b/frontend/src/pages/sys-admin/institutions/institution-admins.js
index 13d552ff9b..6db641e03d 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-admins.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-admins.js
@@ -69,7 +69,7 @@ class Content extends Component {
           </table>
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -90,8 +90,8 @@ class Item extends Component {
       this.setState({
         isOpIconShown: true,
         highlight: true
-      }); 
-    }   
+      });
+    }
   }
 
   handleMouseLeave = () => {
@@ -99,8 +99,8 @@ class Item extends Component {
       this.setState({
         isOpIconShown: false,
         highlight: false
-      }); 
-    }   
+      });
+    }
   }
 
   onUnfreezedItem = () => {
@@ -131,12 +131,12 @@ class Item extends Component {
   }
 
   translateOperations = (item) => {
-    let translateResult = ''; 
+    let translateResult = '';
     switch(item) {
       case 'Revoke Admin':
         translateResult = gettext('Revoke Admin');
         break;
-    }   
+    }
     return translateResult;
   }
 
@@ -217,7 +217,7 @@ class InstitutionAdmins extends Component {
       });
     });
   }
-  
+
   revokeAdmin = (item) => {
     const email = item.email;
     const name = item.name;
@@ -253,9 +253,9 @@ class InstitutionAdmins extends Component {
         <MainPanelTopbar />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
-            <InstitutionNav 
+            <InstitutionNav
               currentItem="admins"
-              institutionID={this.props.institutionID} 
+              institutionID={this.props.institutionID}
               institutionName={institutionName}
             />
             <div className="cur-view-content">
diff --git a/frontend/src/pages/sys-admin/institutions/institution-info.js b/frontend/src/pages/sys-admin/institutions/institution-info.js
index 8d4db023ad..9289f1c0fd 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-info.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-info.js
@@ -104,7 +104,7 @@ class InstitutionInfo extends Component {
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
-    }); 
+    });
   }
 
 
diff --git a/frontend/src/pages/sys-admin/institutions/institution-users.js b/frontend/src/pages/sys-admin/institutions/institution-users.js
index b8d4acb123..ecd96bd1dc 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-users.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-users.js
@@ -88,7 +88,7 @@ class Content extends Component {
           />
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -109,8 +109,8 @@ class Item extends Component {
       this.setState({
         isOpIconShown: true,
         highlight: true
-      }); 
-    }   
+      });
+    }
   }
 
   handleMouseLeave = () => {
@@ -118,8 +118,8 @@ class Item extends Component {
       this.setState({
         isOpIconShown: false,
         highlight: false
-      }); 
-    }   
+      });
+    }
   }
 
   onUnfreezedItem = () => {
@@ -162,7 +162,7 @@ class Item extends Component {
   }
 
   translateOperations = (item) => {
-    let translateResult = ''; 
+    let translateResult = '';
     switch(item) {
       case 'Delete':
         translateResult = gettext('Delete');
@@ -170,7 +170,7 @@ class Item extends Component {
       case 'Set Admin':
         translateResult = gettext('Set Admin');
         break;
-    }   
+    }
 
     return translateResult;
   }
@@ -252,7 +252,7 @@ class InstitutionUsers extends Component {
       currentPage: parseInt(urlParams.get('page') || currentPage)
     }, () => {
       this.getInstitutionUsersByPage(this.state.currentPage);
-    }); 
+    });
   }
 
   getInstitutionUsersByPage = (page) => {
@@ -309,7 +309,7 @@ class InstitutionUsers extends Component {
       }
       failedArray.map((item) => {
         toaster.danger(item.error_msg);
-      }); 
+      });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -340,7 +340,7 @@ class InstitutionUsers extends Component {
           <div className="cur-view-container">
             <InstitutionNav
               currentItem="members"
-              institutionID={this.props.institutionID} 
+              institutionID={this.props.institutionID}
               institutionName={institutionName}
             />
             <div className="cur-view-content">
diff --git a/frontend/src/pages/sys-admin/institutions/institutions.js b/frontend/src/pages/sys-admin/institutions/institutions.js
index 4d85475656..3e1d75d77d 100644
--- a/frontend/src/pages/sys-admin/institutions/institutions.js
+++ b/frontend/src/pages/sys-admin/institutions/institutions.js
@@ -69,7 +69,7 @@ class Content extends Component {
           />
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -157,7 +157,7 @@ class Institutions extends Component {
       currentPage: parseInt(urlParams.get('page') || currentPage)
     }, () => {
       this.getInstitutionsByPage(this.state.currentPage);
-    }); 
+    });
   }
 
   getInstitutionsByPage = (page) => {
@@ -222,7 +222,7 @@ class Institutions extends Component {
           <div className="cur-view-container">
             <div className="cur-view-path">
               <h3 className="sf-heading">{gettext('Institutions')}</h3>
-            </div> 
+            </div>
             <div className="cur-view-content">
               <Content
                 loading={this.state.loading}
diff --git a/frontend/src/pages/sys-admin/invitations/invitations.js b/frontend/src/pages/sys-admin/invitations/invitations.js
index 42f35534fd..3b10f62d5c 100644
--- a/frontend/src/pages/sys-admin/invitations/invitations.js
+++ b/frontend/src/pages/sys-admin/invitations/invitations.js
@@ -88,7 +88,7 @@ class Content extends Component {
         </Fragment>
       );
 
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -118,7 +118,7 @@ class Item extends Component {
         isOpIconShown: false,
         highlight: false
       });
-    } 
+    }
   }
 
   onUnfreezedItem = () => {
@@ -134,12 +134,12 @@ class Item extends Component {
   }
 
   translateOperations = (item) => {
-    let translateResult = ''; 
+    let translateResult = '';
     switch (item) {
       case 'Delete':
         translateResult = gettext('Delete');
         break;
-    }   
+    }
     return translateResult;
   }
 
@@ -154,7 +154,7 @@ class Item extends Component {
   }
 
   getInviteTypeText = () => {
-    let translateResult = ''; 
+    let translateResult = '';
     switch (this.props.item.invite_type) {
       case 'Guest':
         translateResult = gettext('Guest');
@@ -165,8 +165,8 @@ class Item extends Component {
 
   render() {
     const { item } = this.props;
-    const { 
-      isOpIconShown 
+    const {
+      isOpIconShown
     } = this.state;
 
     return (
@@ -186,13 +186,13 @@ class Item extends Component {
             <span title={moment(item.invite_time).format('llll')}>{moment(item.invite_time).fromNow()}</span>
           </td>
           <td>
-            {item.accept_time ? 
+            {item.accept_time ?
               <span title={moment(item.accept_time).format('llll')}>{moment(item.accept_time).fromNow()}</span> :
               '--'
             }
           </td>
           <td>
-            {item.is_expired ? 
+            {item.is_expired ?
               <span className="text-red">{moment(item.expire_time).format('YYYY-MM-DD HH:mm')}</span> :
               moment(item.expire_time).format('YYYY-MM-DD HH:mm')
             }
@@ -263,13 +263,13 @@ class Invitations extends Component {
     seafileAPI.sysAdminDeleteInvitation(token).then(res => {
       let items = this.state.items.filter(item => {
         return item.token != token;
-      }); 
+      });
       this.setState({items: items});
       toaster.success(gettext('Successfully deleted 1 item.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
-    }); 
+    });
   }
 
   deleteItemInBatch = () => {
@@ -278,7 +278,7 @@ class Invitations extends Component {
       const items = this.state.items.filter(item => !item.is_expired);
       if (items.length < prevItems.length) {
         this.setState({
-          items: items 
+          items: items
         });
         toaster.success(gettext('Operation succeeded.'));
       }
diff --git a/frontend/src/pages/sys-admin/links/share-links.js b/frontend/src/pages/sys-admin/links/share-links.js
index f546b5d17e..75362a5c8f 100644
--- a/frontend/src/pages/sys-admin/links/share-links.js
+++ b/frontend/src/pages/sys-admin/links/share-links.js
@@ -37,8 +37,8 @@ class Content extends Component {
   }
 
   render() {
-    const { 
-      loading, errorMsg, items, 
+    const {
+      loading, errorMsg, items,
       perPage, currentPage, hasNextPage,
       sortBy, sortOrder
     } = this.props;
@@ -166,7 +166,7 @@ class ShareLinks extends Component {
       perPage: 25,
       currentPage: 1,
       hasNextPage: false,
-      sortBy: '', 
+      sortBy: '',
       sortOrder: 'asc'
     };
     this.initPage = 1;
@@ -217,7 +217,7 @@ class ShareLinks extends Component {
       url.search = searchParams.toString();
       navigate(url.toString());
       this.getShareLinksByPage(currentPage);
-    }); 
+    });
   }
 
   deleteShareLink = (linkToken) => {
diff --git a/frontend/src/pages/sys-admin/links/upload-links.js b/frontend/src/pages/sys-admin/links/upload-links.js
index ca7b601faf..efcfcb23b2 100644
--- a/frontend/src/pages/sys-admin/links/upload-links.js
+++ b/frontend/src/pages/sys-admin/links/upload-links.js
@@ -52,7 +52,7 @@ class Content extends Component {
                 <th width="10%">{/*Operations*/}</th>
               </tr>
             </thead>
-            {items && 
+            {items &&
               <tbody>
                 {items.map((item, index) => {
                   return (<Item
@@ -74,7 +74,7 @@ class Content extends Component {
           />
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
diff --git a/frontend/src/pages/sys-admin/logs-page/file-access-logs.js b/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
index cabb2f0231..6005846897 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
@@ -53,7 +53,7 @@ class Content extends Component {
                 <th width="15%">{gettext('File')}{' / '}{gettext('Folder')}</th>
               </tr>
             </thead>
-            {items && 
+            {items &&
               <tbody>
                 {items.map((item, index) => {
                   return (<Item
@@ -74,7 +74,7 @@ class Content extends Component {
           />
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
diff --git a/frontend/src/pages/sys-admin/logs-page/file-update-logs.js b/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
index be5caa3f3c..7053695b42 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
@@ -51,7 +51,7 @@ class Content extends Component {
                 <th width="25%">{gettext('Action')}</th>
               </tr>
             </thead>
-            {items && 
+            {items &&
               <tbody>
                 {items.map((item, index) => {
                   return (<Item
@@ -72,7 +72,7 @@ class Content extends Component {
           />
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -171,7 +171,7 @@ class FileUpdateLogs extends Component {
       currentPage: parseInt(urlParams.get('page') || currentPage)
     }, () => {
       this.getLogsByPage(this.state.currentPage);
-    }); 
+    });
   }
 
   getLogsByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/logs-page/login-logs.js b/frontend/src/pages/sys-admin/logs-page/login-logs.js
index affccbf64f..dd7d458573 100644
--- a/frontend/src/pages/sys-admin/logs-page/login-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/login-logs.js
@@ -51,7 +51,7 @@ class Content extends Component {
                 <th width="25%">{gettext('Time')}</th>
               </tr>
             </thead>
-            {items && 
+            {items &&
               <tbody>
                 {items.map((item, index) => {
                   return (<Item
@@ -72,7 +72,7 @@ class Content extends Component {
           />
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -139,7 +139,7 @@ class LoginLogs extends Component {
       currentPage: parseInt(urlParams.get('page') || currentPage)
     }, () => {
       this.getLogsByPage(this.state.currentPage);
-    }); 
+    });
   }
 
   getLogsByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
index 4ca4831d78..61e2a3b03d 100644
--- a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
@@ -50,11 +50,11 @@ class Content extends Component {
                 <th width="10%">{gettext('Actions')}</th>
                 <th width="13%">{gettext('Permission')}</th>
                 <th width="20%">{gettext('Library')}</th>
-                <th width="12%">{gettext('Folder')}</th> 
+                <th width="12%">{gettext('Folder')}</th>
                 <th width="15%">{gettext('Date')}</th>
               </tr>
             </thead>
-            {items && 
+            {items &&
               <tbody>
                 {items.map((item, index) => {
                   return (<Item
@@ -75,7 +75,7 @@ class Content extends Component {
           />
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -118,13 +118,13 @@ class Item extends Component {
       case 'user':
         return <UserLink email={item.to_user_email} name={item.to_user_name} />;
       case 'group':
-        return <Link to={`${siteRoot}sys/groups/${item.to_group_id}/libraries/`}>{item.to_group_name}</Link>; 
+        return <Link to={`${siteRoot}sys/groups/${item.to_group_id}/libraries/`}>{item.to_group_name}</Link>;
       case 'department':
-        return <Link to={`${siteRoot}sys/departments/${item.to_group_id}/`}>{item.to_group_name}</Link>; 
-      case 'all':  
-        return <Link to={`${siteRoot}org/`}>{gettext('All')}</Link>; 
+        return <Link to={`${siteRoot}sys/departments/${item.to_group_id}/`}>{item.to_group_name}</Link>;
+      case 'all':
+        return <Link to={`${siteRoot}org/`}>{gettext('All')}</Link>;
       default:
-        return gettext('Deleted'); 
+        return gettext('Deleted');
     }
   }
 
@@ -172,7 +172,7 @@ class SharePermissionLogs extends Component {
       currentPage: parseInt(urlParams.get('page') || currentPage)
     }, () => {
       this.getLogsByPage(this.state.currentPage);
-    }); 
+    });
   }
 
   getLogsByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/notifications/notifications.js b/frontend/src/pages/sys-admin/notifications/notifications.js
index 2e2b89ca90..8e4a1791e9 100644
--- a/frontend/src/pages/sys-admin/notifications/notifications.js
+++ b/frontend/src/pages/sys-admin/notifications/notifications.js
@@ -63,7 +63,7 @@ class Content extends Component {
           </tbody>
         </table>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -143,9 +143,9 @@ class Item extends Component {
         break;
       default:
         break;
-    }   
+    }
     return translateResult;
-  } 
+  }
 
   getOperations = () => {
     const { item } = this.props;
diff --git a/frontend/src/pages/sys-admin/orgs/org-groups.js b/frontend/src/pages/sys-admin/orgs/org-groups.js
index 2128f3db60..6a1c31f64e 100644
--- a/frontend/src/pages/sys-admin/orgs/org-groups.js
+++ b/frontend/src/pages/sys-admin/orgs/org-groups.js
@@ -52,7 +52,7 @@ class Content extends Component {
           </table>
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -94,7 +94,7 @@ class Item extends Component {
     const itemName = '<span class="op-target">' + Utils.HTMLescape(item.group_name) + '</span>';
     const deleteDialogMsg = gettext('Are you sure you want to delete {placeholder} ?').replace('{placeholder}', itemName);
 
-    const groupUrl = item.parent_group_id == 0 ? 
+    const groupUrl = item.parent_group_id == 0 ?
       `${siteRoot}sys/groups/${item.group_id}/libraries/` :
       `${siteRoot}sysadmin/#address-book/groups/${item.group_id}/`;
 
diff --git a/frontend/src/pages/sys-admin/orgs/org-info.js b/frontend/src/pages/sys-admin/orgs/org-info.js
index 75ecca5a2a..e8f11ca262 100644
--- a/frontend/src/pages/sys-admin/orgs/org-info.js
+++ b/frontend/src/pages/sys-admin/orgs/org-info.js
@@ -145,7 +145,7 @@ class OrgInfo extends Component {
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
-    }); 
+    });
   }
 
   updateName = (orgName) => {
diff --git a/frontend/src/pages/sys-admin/orgs/org-repos.js b/frontend/src/pages/sys-admin/orgs/org-repos.js
index b13b0eb3e0..44df3d2777 100644
--- a/frontend/src/pages/sys-admin/orgs/org-repos.js
+++ b/frontend/src/pages/sys-admin/orgs/org-repos.js
@@ -52,7 +52,7 @@ class Content extends Component {
           </table>
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -142,7 +142,7 @@ class OrgRepos extends Component {
     seafileAPI.sysAdminGetOrg(this.props.orgID).then((res) => {
       this.setState({
         orgName: res.data.org_name
-      }); 
+      });
     });
     seafileAPI.sysAdminListOrgRepos(this.props.orgID).then((res) => {
       this.setState({
diff --git a/frontend/src/pages/sys-admin/orgs/org-users.js b/frontend/src/pages/sys-admin/orgs/org-users.js
index 9a74f9d9d8..af80de93cd 100644
--- a/frontend/src/pages/sys-admin/orgs/org-users.js
+++ b/frontend/src/pages/sys-admin/orgs/org-users.js
@@ -72,7 +72,7 @@ class Content extends Component {
           </table>
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -94,8 +94,8 @@ class Item extends Component {
       this.setState({
         isOpIconShown: true,
         highlight: true
-      }); 
-    }   
+      });
+    }
   }
 
   handleMouseLeave = () => {
@@ -103,8 +103,8 @@ class Item extends Component {
       this.setState({
         isOpIconShown: false,
         highlight: false
-      }); 
-    }   
+      });
+    }
   }
 
   onUnfreezedItem = () => {
@@ -157,11 +157,11 @@ class Item extends Component {
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
-    }); 
+    });
   }
 
   translateOperations = (item) => {
-    let translateResult = ''; 
+    let translateResult = '';
     switch(item) {
       case 'Delete':
         translateResult = gettext('Delete');
@@ -169,7 +169,7 @@ class Item extends Component {
       case 'Reset Password':
         translateResult = gettext('Reset Password');
         break;
-    }   
+    }
 
     return translateResult;
   }
@@ -320,9 +320,9 @@ class OrgUsers extends Component {
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
-            <OrgNav 
-              currentItem="users" 
-              orgID={this.props.orgID} 
+            <OrgNav
+              currentItem="users"
+              orgID={this.props.orgID}
               orgName={orgName}
             />
             <div className="cur-view-content">
diff --git a/frontend/src/pages/sys-admin/orgs/orgs-content.js b/frontend/src/pages/sys-admin/orgs/orgs-content.js
index 44ff41ff1c..de62cbb851 100644
--- a/frontend/src/pages/sys-admin/orgs/orgs-content.js
+++ b/frontend/src/pages/sys-admin/orgs/orgs-content.js
@@ -22,8 +22,8 @@ class Content extends Component {
 
   getPreviousPage = () => {
     this.props.getListByPage(this.props.currentPage - 1);
-  }       
-            
+  }
+
   getNextPage = () => {
     this.props.getListByPage(this.props.currentPage + 1);
   }
@@ -76,7 +76,7 @@ class Content extends Component {
           }
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -113,8 +113,8 @@ class Item extends Component {
           let deleteDialogMsg = gettext('Are you sure you want to delete {placeholder} ?')
             .replace('{placeholder}', orgName) + '<br/>' +
             gettext('{userCount} user(s) and {repoCount} libraries of this organization will also be deleted.')
-            .replace('{userCount}', userCount)
-            .replace('{repoCount}', repoCount);
+              .replace('{userCount}', userCount)
+              .replace('{repoCount}', repoCount);
           this.setState({deleteDialogMsg: deleteDialogMsg});
         }).catch(error => {
           let errorMsg = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/sys-admin/orgs/orgs.js b/frontend/src/pages/sys-admin/orgs/orgs.js
index d4dca3e48f..4cecb3f5ba 100644
--- a/frontend/src/pages/sys-admin/orgs/orgs.js
+++ b/frontend/src/pages/sys-admin/orgs/orgs.js
@@ -57,7 +57,7 @@ class Orgs extends Component {
   resetPerPage = (perPage) => {
     this.setState({
       perPage: perPage
-    }, () => {  
+    }, () => {
       this.getItemsByPage(1);
     });
   }
@@ -113,7 +113,7 @@ class Orgs extends Component {
     return <Search
       placeholder={gettext('Search organizations')}
       submit={this.searchItems}
-    />; 
+    />;
   }
 
   searchItems = (keyword) => {
@@ -131,7 +131,7 @@ class Orgs extends Component {
           <div className="cur-view-container">
             <div className="cur-view-path">
               <h3 className="sf-heading">{gettext('Organizations')}</h3>
-            </div> 
+            </div>
             <div className="cur-view-content">
               <Content
                 loading={this.state.loading}
@@ -139,7 +139,7 @@ class Orgs extends Component {
                 items={this.state.orgList}
                 currentPage={this.state.currentPage}
                 hasNextPage={this.state.hasNextPage}
-                curPerPage={this.state.perPage} 
+                curPerPage={this.state.perPage}
                 resetPerPage={this.resetPerPage}
                 getListByPage={this.getItemsByPage}
                 updateRole={this.updateRole}
diff --git a/frontend/src/pages/sys-admin/orgs/search-orgs.js b/frontend/src/pages/sys-admin/orgs/search-orgs.js
index 78281545ce..5d3a8e3777 100644
--- a/frontend/src/pages/sys-admin/orgs/search-orgs.js
+++ b/frontend/src/pages/sys-admin/orgs/search-orgs.js
@@ -74,7 +74,7 @@ class SearchOrgs extends Component {
   }
 
   handleInputChange = (e) => {
-    this.setState({ 
+    this.setState({
       query: e.target.value
     }, this.checkSubmitBtnActive);
   }
@@ -83,7 +83,7 @@ class SearchOrgs extends Component {
     const { query } = this.state;
     this.setState({
       isSubmitBtnActive: query.trim()
-    }); 
+    });
   }
 
   render() {
@@ -95,7 +95,7 @@ class SearchOrgs extends Component {
           <div className="cur-view-container">
             <div className="cur-view-path">
               <h3 className="sf-heading">{gettext('Organizations')}</h3>
-            </div> 
+            </div>
             <div className="cur-view-content">
               <div className="mt-4 mb-6">
                 <h4 className="border-bottom font-weight-normal mb-2 pb-1">{gettext('Search Organizations')}</h4>
diff --git a/frontend/src/pages/sys-admin/repos/all-repos.js b/frontend/src/pages/sys-admin/repos/all-repos.js
index b547e1b4bf..fc53826893 100644
--- a/frontend/src/pages/sys-admin/repos/all-repos.js
+++ b/frontend/src/pages/sys-admin/repos/all-repos.js
@@ -35,7 +35,7 @@ class AllRepos extends Component {
       currentPage: parseInt(urlParams.get('page') || currentPage)
     }, () => {
       this.getReposByPage(this.state.currentPage);
-    }); 
+    });
   }
 
   toggleCreateRepoDialog = () => {
@@ -61,7 +61,7 @@ class AllRepos extends Component {
   sortItems = (sortBy) => {
     this.setState({
       currentPage: 1,
-      sortBy: sortBy 
+      sortBy: sortBy
     }, () => {
       let url = new URL(location.href);
       let searchParams = new URLSearchParams(url.search);
@@ -130,7 +130,7 @@ class AllRepos extends Component {
         <MainPanelTopbar search={this.getSearch()}>
           <Button className="btn btn-secondary operation-item" onClick={this.toggleCreateRepoDialog}>
             <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
-          </Button>          
+          </Button>
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
diff --git a/frontend/src/pages/sys-admin/repos/dir-content.js b/frontend/src/pages/sys-admin/repos/dir-content.js
index 850e05b79c..81a8c094e9 100644
--- a/frontend/src/pages/sys-admin/repos/dir-content.js
+++ b/frontend/src/pages/sys-admin/repos/dir-content.js
@@ -60,7 +60,7 @@ class DirentItem extends React.Component {
             {isOpIconShown && fromSystemRepo &&
               <a href="#" className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.deleteDirent}></a>
             }
-            {isOpIconShown && dirent.is_file && 
+            {isOpIconShown && dirent.is_file &&
             <a href="#" className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.downloadDirent}></a>
             }
           </td>
diff --git a/frontend/src/pages/sys-admin/repos/dir-view.js b/frontend/src/pages/sys-admin/repos/dir-view.js
index f47e6e171b..11265f1e5d 100644
--- a/frontend/src/pages/sys-admin/repos/dir-view.js
+++ b/frontend/src/pages/sys-admin/repos/dir-view.js
@@ -74,8 +74,8 @@ class DirView extends Component {
       this.setState({
         loading: false,
         repoName: repoName,
-        isSystemRepo: isSystemRepo, 
-        direntList: direntList, 
+        isSystemRepo: isSystemRepo,
+        direntList: direntList,
         path: path,
       }, () => {
         let url = siteRoot + 'sys/libraries/' + repoID + '/' + encodeURIComponent(this.state.repoName) + Utils.encodePath(path);
@@ -160,8 +160,8 @@ class DirView extends Component {
   }
 
   render() {
-    const { loading, errorMsg, 
-      repoName, direntList, isSystemRepo, path, 
+    const { loading, errorMsg,
+      repoName, direntList, isSystemRepo, path,
       isNewFolderDialogOpen } = this.state;
     const { repoID } = this.props;
 
@@ -174,12 +174,12 @@ class DirView extends Component {
               <Button className="operation-item" onClick={this.openFileInput}>{gettext('Upload')}</Button>
               <Button className="operation-item" onClick={this.toggleNewFolderDialog}>{gettext('New Folder')}</Button>
             </Fragment>
-          </MainPanelTopbar> : <MainPanelTopbar /> 
+          </MainPanelTopbar> : <MainPanelTopbar />
         }
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path align-items-center">
-              <DirPathBar 
+              <DirPathBar
                 isSystemRepo={isSystemRepo}
                 repoID={repoID}
                 repoName={repoName}
@@ -205,7 +205,7 @@ class DirView extends Component {
             parentPath={path}
             checkDuplicatedName={this.checkDuplicatedName}
             onAddFolder={this.createNewFolder}
-            addFolderCancel={this.toggleNewFolderDialog} 
+            addFolderCancel={this.toggleNewFolderDialog}
           />
         }
       </Fragment>
diff --git a/frontend/src/pages/sys-admin/repos/repos-nav.js b/frontend/src/pages/sys-admin/repos/repos-nav.js
index 70f1cd7e87..8b1480676d 100644
--- a/frontend/src/pages/sys-admin/repos/repos-nav.js
+++ b/frontend/src/pages/sys-admin/repos/repos-nav.js
@@ -12,9 +12,9 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'all', urlPart: 'all-libraries', text: gettext('All')}, 
-      {name: 'system', urlPart: 'system-library', text: gettext('System')}, 
-      {name: 'trash', urlPart: 'trash-libraries', text: gettext('Trash')} 
+      {name: 'all', urlPart: 'all-libraries', text: gettext('All')},
+      {name: 'system', urlPart: 'system-library', text: gettext('System')},
+      {name: 'trash', urlPart: 'trash-libraries', text: gettext('Trash')}
     ];
   }
 
diff --git a/frontend/src/pages/sys-admin/repos/repos.js b/frontend/src/pages/sys-admin/repos/repos.js
index f0d6004e57..9cc48072d8 100644
--- a/frontend/src/pages/sys-admin/repos/repos.js
+++ b/frontend/src/pages/sys-admin/repos/repos.js
@@ -75,7 +75,7 @@ class Content extends Component {
                 <th width="5%">{/*icon*/}</th>
                 <th width="25%">{gettext('Name')}</th>
                 <th width="15%">
-                  {sortBy != undefined ? 
+                  {sortBy != undefined ?
                     <Fragment>
                       <a className="d-inline-block table-sort-op" href="#" onClick={this.sortByFileCount}>{gettext('Files')} {sortBy == 'file_count' ? sortIcon : initialSortIcon}</a>{' / '}
                       <a className="d-inline-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBy == 'size' ? sortIcon : initialSortIcon}</a>
@@ -102,7 +102,7 @@ class Content extends Component {
               })}
             </tbody>
           </table>
-          {pageInfo && 
+          {pageInfo &&
           <Paginator
             gotoPreviousPage={this.getPreviousPageList}
             gotoNextPage={this.getNextPageList}
@@ -115,7 +115,7 @@ class Content extends Component {
         </Fragment>
       );
 
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -239,7 +239,7 @@ class Item extends Component {
   }
 
   translateOperations = (item) => {
-    let translateResult = ''; 
+    let translateResult = '';
     switch(item) {
       case 'Share':
         translateResult = gettext('Share');
@@ -255,7 +255,7 @@ class Item extends Component {
         break;
       default:
         break;
-    }   
+    }
 
     return translateResult;
   }
@@ -272,10 +272,10 @@ class Item extends Component {
 
   render () {
     const { repo } = this.props;
-    const { 
+    const {
       isOpIconShown,
       isShareDialogOpen,
-      isDeleteDialogOpen, 
+      isDeleteDialogOpen,
       isTransferDialogOpen,
       isHistorySettingDialogOpen
     } = this.state;
diff --git a/frontend/src/pages/sys-admin/repos/search-repos.js b/frontend/src/pages/sys-admin/repos/search-repos.js
index c60566c08d..6b1a87fce6 100644
--- a/frontend/src/pages/sys-admin/repos/search-repos.js
+++ b/frontend/src/pages/sys-admin/repos/search-repos.js
@@ -13,7 +13,7 @@ class SearchRepos extends Component {
     super(props);
     this.state = {
       name: '',
-      isSubmitBtnActive: false, 
+      isSubmitBtnActive: false,
       loading: true,
       errorMsg: '',
       repos: []
@@ -49,10 +49,10 @@ class SearchRepos extends Component {
   onDeleteRepo = (targetRepo) => {
     let repos = this.state.repos.filter(repo => {
       return repo.id != targetRepo.id;
-    }); 
+    });
     this.setState({
       repos: repos
-    }); 
+    });
   }
 
   onTransferRepo = (targetRepo) => {
diff --git a/frontend/src/pages/sys-admin/repos/trash-repos.js b/frontend/src/pages/sys-admin/repos/trash-repos.js
index d29d24a921..35cf832821 100644
--- a/frontend/src/pages/sys-admin/repos/trash-repos.js
+++ b/frontend/src/pages/sys-admin/repos/trash-repos.js
@@ -95,7 +95,7 @@ class Content extends Component {
         </Fragment>
       );
 
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -231,7 +231,7 @@ class Item extends Component {
                 onMenuItemClick={this.onMenuItemClick}
                 onFreezedItem={this.props.onFreezedItem}
                 onUnfreezedItem={this.onUnfreezedItem}
-              />  
+              />
             )}
           </td>
         </tr>
@@ -277,14 +277,14 @@ class TrashRepos extends Component {
   }
 
   componentDidMount () {
-      let urlParams = (new URL(window.location)).searchParams;
-      const { currentPage = 1, perPage } = this.state;
-      this.setState({
-        perPage: parseInt(urlParams.get('per_page') || perPage),
-        currentPage: parseInt(urlParams.get('page') || currentPage)
-      }, () => {
-        this.getReposByPage(this.state.currentPage);
-      }); 
+    let urlParams = (new URL(window.location)).searchParams;
+    const { currentPage = 1, perPage } = this.state;
+    this.setState({
+      perPage: parseInt(urlParams.get('per_page') || perPage),
+      currentPage: parseInt(urlParams.get('page') || currentPage)
+    }, () => {
+      this.getReposByPage(this.state.currentPage);
+    });
   }
 
   toggleCleanTrashDialog = () => {
@@ -330,7 +330,7 @@ class TrashRepos extends Component {
     });
     this.setState({
       repos: repos
-    }); 
+    });
   }
 
   cleanTrash = () => {
@@ -402,7 +402,7 @@ class TrashRepos extends Component {
             message={gettext('Are you sure you want to clear trash?')}
             executeOperation={this.cleanTrash}
             confirmBtnText={gettext('Clear')}
-            toggleDialog={this.toggleCleanTrashDialog} 
+            toggleDialog={this.toggleCleanTrashDialog}
           />
         }
       </Fragment>
diff --git a/frontend/src/pages/sys-admin/search.js b/frontend/src/pages/sys-admin/search.js
index 66b45c645b..abeeb54ca8 100644
--- a/frontend/src/pages/sys-admin/search.js
+++ b/frontend/src/pages/sys-admin/search.js
@@ -25,7 +25,7 @@ class Search extends React.Component {
     if (e.key == 'Enter') {
       e.preventDefault();
       this.handleSubmit();
-    }   
+    }
   }
 
   handleSubmit = () => {
diff --git a/frontend/src/pages/sys-admin/side-panel.js b/frontend/src/pages/sys-admin/side-panel.js
index 64247a269f..b9b39f4be2 100644
--- a/frontend/src/pages/sys-admin/side-panel.js
+++ b/frontend/src/pages/sys-admin/side-panel.js
@@ -69,7 +69,7 @@ class SidePanel extends React.Component {
                 }
                 {constanceEnabled && canConfigSystem &&
                   <li className="nav-item">
-                    <Link 
+                    <Link
                       className={`nav-link ellipsis ${this.getActiveClass('web-settings')}`}
                       to={siteRoot + 'sys/web-settings/'}
                       onClick={() => this.props.tabItemClick('web-settings')}
@@ -105,7 +105,7 @@ class SidePanel extends React.Component {
                 }
                 {canManageGroup &&
                   <li className="nav-item">
-                    <Link 
+                    <Link
                       className={`nav-link ellipsis ${this.getActiveClass('groups')}`}
                       to={siteRoot + 'sys/groups/'}
                       onClick={() => this.props.tabItemClick('groups')}
@@ -117,7 +117,7 @@ class SidePanel extends React.Component {
                 }
                 {isPro && canManageGroup &&
                   <li className="nav-item">
-                    <Link 
+                    <Link
                       className={`nav-link ellipsis ${this.getActiveClass('departments')}`}
                       to={siteRoot + 'sys/departments/'}
                       onClick={() => this.props.tabItemClick('departments')}
diff --git a/frontend/src/pages/sys-admin/statistic/picker.js b/frontend/src/pages/sys-admin/statistic/picker.js
index 7dd6e0d21d..d1836b4913 100644
--- a/frontend/src/pages/sys-admin/statistic/picker.js
+++ b/frontend/src/pages/sys-admin/statistic/picker.js
@@ -45,7 +45,7 @@ class Picker extends React.Component {
           ({value}) => {
             return (
               <span>
-                <input 
+                <input
                   placeholder="yyyy-mm-dd"
                   tabIndex="-1"
                   readOnly
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-chart.js b/frontend/src/pages/sys-admin/statistic/statistic-chart.js
index b04c455e42..463e31da82 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-chart.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-chart.js
@@ -110,7 +110,7 @@ class StatisticChart extends React.Component {
 
     let { data, options } = this.state;
     return (
-      <Line 
+      <Line
         data={data}
         options={options}
       />
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-common-tool.js b/frontend/src/pages/sys-admin/statistic/statistic-common-tool.js
index 33ccd011ba..033acae1c8 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-common-tool.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-common-tool.js
@@ -38,13 +38,13 @@ class StatisticCommonTool extends React.Component {
     let endTime = today;
     let startTime;
     switch(statisticTypeName) {
-      case 'oneWeek' : 
+      case 'oneWeek' :
         startTime = moment().subtract(6,'d').format('YYYY-MM-DD 00:00:00');
         break;
-      case 'oneMonth' : 
+      case 'oneMonth' :
         startTime = moment().subtract(29,'d').format('YYYY-MM-DD 00:00:00');
         break;
-      case 'oneYear' : 
+      case 'oneYear' :
         startTime = moment().subtract(364,'d').format('YYYY-MM-DD 00:00:00');
         break;
     }
@@ -60,7 +60,7 @@ class StatisticCommonTool extends React.Component {
       return false;
     }
     let today = moment().format();
-    
+
     const endValue = this.state.endValue;
     if (!endValue) {
       let startTime = moment(startValue).format();
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-file.js b/frontend/src/pages/sys-admin/statistic/statistic-file.js
index 296450ce1c..4fb78863af 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-file.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-file.js
@@ -42,22 +42,22 @@ class StatisticFile extends React.Component {
         });
         let addedData = {
           label: gettext('Added'),
-          data: added, 
+          data: added,
           borderColor: '#57cd6b',
           backgroundColor: '#57cd6b'};
         let visitedData = {
           label: gettext('Visited'),
-          data: visited, 
+          data: visited,
           borderColor: '#fd913a',
           backgroundColor: '#fd913a'};
         let modifiedData = {
           label: gettext('Modified'),
-          data: modified, 
+          data: modified,
           borderColor: '#72c3fc',
           backgroundColor: '#72c3fc'};
         let deletedData = {
           label: gettext('Deleted'),
-          data: deleted, 
+          data: deleted,
           borderColor: '#f75356',
           backgroundColor: '#f75356'};
         filesData = [visitedData, addedData, modifiedData, deletedData];
@@ -85,7 +85,7 @@ class StatisticFile extends React.Component {
             <StatisticCommonTool getActiviesFiles={this.getActiviesFiles} />
             {isLoading && <Loading />}
             {!isLoading && labels.length > 0 &&
-              <StatisticChart 
+              <StatisticChart
                 labels={labels}
                 filesData={filesData}
                 suggestedMaxNumbers={10}
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-reports.js b/frontend/src/pages/sys-admin/statistic/statistic-reports.js
index 25881a3187..c6a66f0a14 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-reports.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-reports.js
@@ -43,7 +43,7 @@ class StatisticReports extends React.Component {
       }
     }
     switch(type) {
-      case 'month': 
+      case 'month':
         url += 'system-user-traffic/excel/?month=' + month;
         break;
       case 'storage':
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-storage.js b/frontend/src/pages/sys-admin/statistic/statistic-storage.js
index 20544b4042..ef2fb68b3f 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-storage.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-storage.js
@@ -34,7 +34,7 @@ class StatisticStorage extends React.Component {
         });
         let total_storage = {
           label: gettext('Total Storage'),
-          data: totalStorage, 
+          data: totalStorage,
           borderColor: '#fd913a',
           backgroundColor: '#fd913a'};
         filesData = [total_storage];
@@ -60,8 +60,8 @@ class StatisticStorage extends React.Component {
           <div className="cur-view-content">
             <StatisticCommonTool getActiviesFiles={this.getActiviesFiles} />
             {isLoading && <Loading />}
-            {!isLoading && labels.length > 0 && 
-              <StatisticChart 
+            {!isLoading && labels.length > 0 &&
+              <StatisticChart
                 labels={labels}
                 filesData={filesData}
                 suggestedMaxNumbers={10*1000*1000}
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-traffic-orgs.js b/frontend/src/pages/sys-admin/statistic/statistic-traffic-orgs.js
index b155d96e82..7bf10544f3 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-traffic-orgs.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-traffic-orgs.js
@@ -37,7 +37,7 @@ class OrgsTraffic extends React.Component {
       currentPage: parseInt(urlParams.get('page') || currentPage)
     }, () => {
       this.getTrafficList(this.initMonth, this.state.currentPage);
-    }); 
+    });
   }
 
   getPreviousPage = () => {
@@ -117,8 +117,8 @@ class OrgsTraffic extends React.Component {
       <Fragment>
         <div className="d-flex align-items-center mt-4">
           <span className="statistic-reports-tip">{gettext('Month:')}</span>
-          <Input 
-            className="statistic-reports-input" 
+          <Input
+            className="statistic-reports-input"
             defaultValue={moment().format('YYYYMM')}
             onChange={this.handleChange}
             onKeyPress={this.handleKeyPress}
@@ -126,11 +126,11 @@ class OrgsTraffic extends React.Component {
           {errorMessage && <div className="error">{errorMessage}</div>}
         </div>
         {isLoading && <Loading />}
-        {!isLoading && 
+        {!isLoading &&
           <TrafficTable type={'org'} sortItems={this.sortItems} sortBy={sortBy} sortOrder={sortOrder}>
             {orgTrafficList.length > 0 && orgTrafficList.map((item, index) => {
               return(
-                <TrafficTableBody 
+                <TrafficTableBody
                   key={index}
                   userTrafficItem={item}
                   type={'org'}
@@ -139,7 +139,7 @@ class OrgsTraffic extends React.Component {
             })}
           </TrafficTable>
         }
-        <Paginator 
+        <Paginator
           gotoPreviousPage={this.getPreviousPage}
           gotoNextPage={this.getNextPage}
           currentPage={currentPage}
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-traffic-users.js b/frontend/src/pages/sys-admin/statistic/statistic-traffic-users.js
index 8e8ad2cb5c..413a727469 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-traffic-users.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-traffic-users.js
@@ -100,7 +100,7 @@ class UsersTraffic extends React.Component {
       sortOrder: this.state.sortOrder == 'asc' ? 'desc' : 'asc'
     }, () => {
       const { month, currentPage } = this.state;
-      this.getTrafficList(month, currentPage); 
+      this.getTrafficList(month, currentPage);
     });
   }
 
@@ -111,29 +111,29 @@ class UsersTraffic extends React.Component {
   }
 
   render() {
-    const { 
+    const {
       isLoading, errorMessage, userTrafficList,
-      currentPage, hasNextPage, perPage, 
+      currentPage, hasNextPage, perPage,
       sortBy, sortOrder
     } = this.state;
     return (
       <Fragment>
         <div className="d-flex align-items-center mt-4">
           <span className="statistic-reports-tip">{gettext('Month:')}</span>
-          <Input 
-            className="statistic-reports-input" 
-            defaultValue={moment().format('YYYYMM')} 
-            onChange={this.handleChange} 
-            onKeyPress={this.handleKeyPress}   
+          <Input
+            className="statistic-reports-input"
+            defaultValue={moment().format('YYYYMM')}
+            onChange={this.handleChange}
+            onKeyPress={this.handleKeyPress}
           />
           {errorMessage && <div className="error">{errorMessage}</div>}
         </div>
         {isLoading && <Loading />}
-        {!isLoading && 
+        {!isLoading &&
           <TrafficTable type={'user'} sortItems={this.sortItems} sortBy={sortBy} sortOrder={sortOrder}>
             {userTrafficList.length > 0 && userTrafficList.map((item, index) => {
               return(
-                <TrafficTableBody 
+                <TrafficTableBody
                   key={index}
                   userTrafficItem={item}
                   type={'user'}
@@ -142,7 +142,7 @@ class UsersTraffic extends React.Component {
             })}
           </TrafficTable>
         }
-        <Paginator 
+        <Paginator
           gotoPreviousPage={this.getPreviousPage}
           gotoNextPage={this.getNextPage}
           currentPage={currentPage}
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-traffic.js b/frontend/src/pages/sys-admin/statistic/statistic-traffic.js
index 873e98acf1..41e2fbd03f 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-traffic.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-traffic.js
@@ -57,42 +57,42 @@ class StatisticTraffic extends React.Component {
         });
         let linkUpload = {
           label: gettext('Upload'),
-          data: link_upload, 
+          data: link_upload,
           borderColor: '#fd913a',
           backgroundColor: '#fd913a'};
         let linkDownload = {
           label: gettext('Download'),
-          data: link_download, 
+          data: link_download,
           borderColor: '#57cd6b',
           backgroundColor: '#57cd6b'};
         let syncUpload = {
           label: gettext('Upload'),
-          data: sync_upload, 
+          data: sync_upload,
           borderColor: '#fd913a',
           backgroundColor: '#fd913a'};
         let syncDownload = {
           label: gettext('Download'),
-          data: sync_download, 
+          data: sync_download,
           borderColor: '#57cd6b',
           backgroundColor: '#57cd6b'};
         let webUpload = {
           label: gettext('Upload'),
-          data: web_upload, 
+          data: web_upload,
           borderColor: '#fd913a',
           backgroundColor: '#fd913a'};
         let webDownload = {
           label: gettext('Download'),
-          data: web_download, 
+          data: web_download,
           borderColor: '#57cd6b',
           backgroundColor: '#57cd6b'};
         let totalUpload = {
           label: gettext('Upload'),
-          data: total_upload, 
+          data: total_upload,
           borderColor: '#fd913a',
           backgroundColor: '#fd913a'};
         let totalDownload = {
           label: gettext('Download'),
-          data: total_download, 
+          data: total_download,
           borderColor: '#57cd6b',
           backgroundColor: '#57cd6b'};
         let linkData = [linkUpload, linkDownload];
@@ -141,17 +141,17 @@ class StatisticTraffic extends React.Component {
 
     return (
       <Fragment>
-        <MainPanelTopbar /> 
+        <MainPanelTopbar />
         <div className="cur-view-container">
           <StatisticNav currentItem="trafficStatistic" />
           <div className="cur-view-content">
             {this.renderCommonTool()}
             {isLoading && <Loading />}
-            {!isLoading && tabActive === 'system' && 
+            {!isLoading && tabActive === 'system' &&
               <div className="statistic-traffic-chart-container">
                 <div className="mb-4">
-                  {labels.length > 0 && 
-                    <StatisticChart 
+                  {labels.length > 0 &&
+                    <StatisticChart
                       labels={labels}
                       filesData={filesData}
                       chartTitle={gettext('Total Traffic')}
@@ -163,8 +163,8 @@ class StatisticTraffic extends React.Component {
                   }
                 </div>
                 <div className="mb-4">
-                  {labels.length > 0 && 
-                    <StatisticChart 
+                  {labels.length > 0 &&
+                    <StatisticChart
                       labels={labels}
                       filesData={webData}
                       chartTitle={gettext('Web Traffic')}
@@ -176,8 +176,8 @@ class StatisticTraffic extends React.Component {
                   }
                 </div>
                 <div className="mb-4">
-                  {labels.length > 0 && 
-                    <StatisticChart 
+                  {labels.length > 0 &&
+                    <StatisticChart
                       labels={labels}
                       filesData={linkData}
                       chartTitle={gettext('Share Link Traffic')}
@@ -189,8 +189,8 @@ class StatisticTraffic extends React.Component {
                   }
                 </div>
                 <div className="mb-4">
-                  {labels.length > 0 && 
-                    <StatisticChart 
+                  {labels.length > 0 &&
+                    <StatisticChart
                       labels={labels}
                       filesData={syncData}
                       chartTitle={gettext('Sync Traffic')}
@@ -203,10 +203,10 @@ class StatisticTraffic extends React.Component {
                 </div>
               </div>
             }
-            {!isLoading && tabActive === 'user' && 
+            {!isLoading && tabActive === 'user' &&
               <UsersTraffic />
             }
-            {!isLoading && tabActive === 'organizations' && 
+            {!isLoading && tabActive === 'organizations' &&
               <OrgsTraffic />
             }
           </div>
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-users.js b/frontend/src/pages/sys-admin/statistic/statistic-users.js
index 53fa82401d..de18b42d04 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-users.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-users.js
@@ -34,7 +34,7 @@ class StatisticUsers extends React.Component {
         });
         let userCount = {
           label: gettext('Active Users'),
-          data: count, 
+          data: count,
           borderColor: '#fd913a',
           backgroundColor: '#fd913a'};
         filesData = [userCount];
@@ -60,8 +60,8 @@ class StatisticUsers extends React.Component {
           <div className="cur-view-content">
             <StatisticCommonTool getActiviesFiles={this.getActiviesFiles} />
             {isLoading && <Loading />}
-            {!isLoading && labels.length > 0 && 
-              <StatisticChart 
+            {!isLoading && labels.length > 0 &&
+              <StatisticChart
                 labels={labels}
                 filesData={filesData}
                 suggestedMaxNumbers={10}
diff --git a/frontend/src/pages/sys-admin/statistic/traffic-table-body.js b/frontend/src/pages/sys-admin/statistic/traffic-table-body.js
index 66cfe2ef22..67dd62155d 100644
--- a/frontend/src/pages/sys-admin/statistic/traffic-table-body.js
+++ b/frontend/src/pages/sys-admin/statistic/traffic-table-body.js
@@ -13,7 +13,7 @@ class TrafficTableBody extends React.Component {
   trafficName = () => {
     let { userTrafficItem, type } = this.props;
     switch(type) {
-      case 'user': 
+      case 'user':
         if (userTrafficItem.name) {
           return (
             <a href={siteRoot + 'useradmin/info/' + userTrafficItem.email + '/'}>{userTrafficItem.name}</a>
@@ -22,12 +22,12 @@ class TrafficTableBody extends React.Component {
         return(<span>{'--'}</span>);
       case 'org':
         return(<span>{userTrafficItem.org_name}</span>);
-    } 
+    }
   }
 
   render() {
     let { userTrafficItem } = this.props;
-    
+
     let syncUploadSize = Utils.bytesToSize(userTrafficItem.sync_file_upload);
     let syncDownloadSize = Utils.bytesToSize(userTrafficItem.sync_file_download);
     let webUploadSize = Utils.bytesToSize(userTrafficItem.web_file_upload);
diff --git a/frontend/src/pages/sys-admin/terms-and-conditions/content.js b/frontend/src/pages/sys-admin/terms-and-conditions/content.js
index 1eb63d1a4c..1e7a8fb6d9 100644
--- a/frontend/src/pages/sys-admin/terms-and-conditions/content.js
+++ b/frontend/src/pages/sys-admin/terms-and-conditions/content.js
@@ -73,7 +73,7 @@ class Content extends Component {
           </table>
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
diff --git a/frontend/src/pages/sys-admin/terms-and-conditions/item.js b/frontend/src/pages/sys-admin/terms-and-conditions/item.js
index da35a238da..da4a96c8a7 100644
--- a/frontend/src/pages/sys-admin/terms-and-conditions/item.js
+++ b/frontend/src/pages/sys-admin/terms-and-conditions/item.js
@@ -111,7 +111,7 @@ class Item extends Component {
   }
 
   translateOperations = (item) => {
-    let translateResult = ''; 
+    let translateResult = '';
     switch(item) {
       case 'Update':
         translateResult = gettext('Update');
@@ -121,7 +121,7 @@ class Item extends Component {
         break;
       default:
         break;
-    }   
+    }
 
     return translateResult;
   }
diff --git a/frontend/src/pages/sys-admin/terms-and-conditions/terms-and-conditions.js b/frontend/src/pages/sys-admin/terms-and-conditions/terms-and-conditions.js
index 34d87e0e35..e0d5c8ae93 100644
--- a/frontend/src/pages/sys-admin/terms-and-conditions/terms-and-conditions.js
+++ b/frontend/src/pages/sys-admin/terms-and-conditions/terms-and-conditions.js
@@ -35,7 +35,7 @@ class TermsAndConditions extends Component {
       this.setState({
         loading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
-      }); 
+      });
     });
   }
 
diff --git a/frontend/src/pages/sys-admin/users/admin-users.js b/frontend/src/pages/sys-admin/users/admin-users.js
index 8ad1699859..57fb00343b 100644
--- a/frontend/src/pages/sys-admin/users/admin-users.js
+++ b/frontend/src/pages/sys-admin/users/admin-users.js
@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import Users from './users';
 
 class AdminUsers extends Component {
-  
+
   render() {
     return <Users isAdmin={true} />;
   }
diff --git a/frontend/src/pages/sys-admin/users/ldap-imported-users.js b/frontend/src/pages/sys-admin/users/ldap-imported-users.js
index db6731b915..48f6d7b06a 100644
--- a/frontend/src/pages/sys-admin/users/ldap-imported-users.js
+++ b/frontend/src/pages/sys-admin/users/ldap-imported-users.js
@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import Users from './users';
 
 class LDAPImportedUsers extends Component {
-  
+
   render() {
     return <Users isLDAPImported={true} />;
   }
diff --git a/frontend/src/pages/sys-admin/users/ldap-users.js b/frontend/src/pages/sys-admin/users/ldap-users.js
index 2b138fa4ff..64b8662bdc 100644
--- a/frontend/src/pages/sys-admin/users/ldap-users.js
+++ b/frontend/src/pages/sys-admin/users/ldap-users.js
@@ -66,7 +66,7 @@ class Content extends Component {
         </Fragment>
       );
 
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -118,7 +118,7 @@ class Users extends Component {
       currentPage: parseInt(urlParams.get('page') || currentPage)
     }, () => {
       this.getUsersListByPage(this.state.currentPage);
-    }); 
+    });
   }
 
   getUsersListByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/users/search-users.js b/frontend/src/pages/sys-admin/users/search-users.js
index 8bad554bc3..7b5cd34950 100644
--- a/frontend/src/pages/sys-admin/users/search-users.js
+++ b/frontend/src/pages/sys-admin/users/search-users.js
@@ -190,7 +190,7 @@ class SearchUsers extends Component {
         return item;
       });
       this.setState({userList: newUserList});
-      const msg = (key == 'is_active' && value) ? 
+      const msg = (key == 'is_active' && value) ?
         res.data.update_status_tip : gettext('Edit succeeded');
       toaster.success(msg);
     }).catch((error) => {
@@ -219,7 +219,7 @@ class SearchUsers extends Component {
     seafileAPI.sysAdminUpdateUser(email, 'is_staff', false).then(res => {
       let userList = this.state.userList.filter(item => {
         return item.email != email;
-      }); 
+      });
       this.setState({
         userList: userList
       });
@@ -231,10 +231,10 @@ class SearchUsers extends Component {
   }
 
   handleInputChange = (e) => {
-    this.setState({ 
+    this.setState({
       query: e.target.value
     }, this.checkSubmitBtnActive);
-  }                 
+  }
 
   checkSubmitBtnActive = () => {
     const { query } = this.state;
@@ -246,8 +246,8 @@ class SearchUsers extends Component {
   render() {
     const { query, isSubmitBtnActive } = this.state;
     const {
-      hasUserSelected, 
-      isBatchDeleteUserDialogOpen, 
+      hasUserSelected,
+      isBatchDeleteUserDialogOpen,
       isBatchSetQuotaDialogOpen
     } = this.state;
     return (
diff --git a/frontend/src/pages/sys-admin/users/user-groups.js b/frontend/src/pages/sys-admin/users/user-groups.js
index 35714bbc21..c776c0aefc 100644
--- a/frontend/src/pages/sys-admin/users/user-groups.js
+++ b/frontend/src/pages/sys-admin/users/user-groups.js
@@ -67,7 +67,7 @@ class Content extends Component {
           </table>
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -118,7 +118,7 @@ class Item extends Component {
   }
 
   translateOperations = (item) => {
-    let translateResult = ''; 
+    let translateResult = '';
     switch (item) {
       case 'Delete':
         translateResult = gettext('Delete');
@@ -160,7 +160,7 @@ class Item extends Component {
     const itemName = '<span class="op-target">' + Utils.HTMLescape(item.name) + '</span>';
     const deleteDialogMsg = gettext('Are you sure you want to delete {placeholder} ?').replace('{placeholder}', itemName);
 
-    const url = item.parent_group_id == 0 ? 
+    const url = item.parent_group_id == 0 ?
       `${siteRoot}sys/groups/${item.id}/libraries/` :
       `${siteRoot}sys/departments/${item.id}/`;
 
@@ -179,7 +179,7 @@ class Item extends Component {
               onFreezedItem={this.props.onFreezedItem}
               onUnfreezedItem={this.onUnfreezedItem}
             />
-            }   
+            }
           </td>
         </tr>
         {isDeleteDialogOpen &&
@@ -212,7 +212,7 @@ class Groups extends Component {
     seafileAPI.sysAdminGetUser(this.props.email).then((res) => {
       this.setState({
         userInfo: res.data
-      }); 
+      });
     });
     seafileAPI.sysAdminListGroupsJoinedByUser(this.props.email).then(res => {
       this.setState({
@@ -223,7 +223,7 @@ class Groups extends Component {
       this.setState({
         loading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
-      }); 
+      });
     });
   }
 
diff --git a/frontend/src/pages/sys-admin/users/user-info.js b/frontend/src/pages/sys-admin/users/user-info.js
index 67ffeefc9f..2941d30c9c 100644
--- a/frontend/src/pages/sys-admin/users/user-info.js
+++ b/frontend/src/pages/sys-admin/users/user-info.js
@@ -82,7 +82,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const user = this.props.userInfo;
-      const { 
+      const {
         currentKey, dialogTitle,
         isSetQuotaDialogOpen, isUpdateUserDialogOpen
       } = this.state;
@@ -133,7 +133,7 @@ class Content extends Component {
               {`${Utils.bytesToSize(user.quota_usage)} / ${user.quota_total > 0 ? Utils.bytesToSize(user.quota_total) : '--'}`}
               {this.showEditIcon(this.toggleSetQuotaDialog)}
             </dd>
-    
+
             {twoFactorAuthEnabled &&
               <Fragment>
                 <dt className="info-item-heading">{gettext('Two-Factor Authentication')}</dt>
@@ -209,13 +209,13 @@ class User extends Component {
       let userInfo = this.state.userInfo;
       userInfo[key]= res.data[key];
       this.setState({
-        userInfo: userInfo 
+        userInfo: userInfo
       });
       toaster.success(gettext('Edit succeeded'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
-    }); 
+    });
   }
 
   disable2FA = () => {
@@ -224,7 +224,7 @@ class User extends Component {
       let userInfo = this.state.userInfo;
       userInfo.has_default_device = false;
       this.setState({
-        userInfo: userInfo 
+        userInfo: userInfo
       });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -239,7 +239,7 @@ class User extends Component {
       let userInfo = this.state.userInfo;
       userInfo.is_force_2fa = checked;
       this.setState({
-        userInfo: userInfo 
+        userInfo: userInfo
       });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/sys-admin/users/user-links.js b/frontend/src/pages/sys-admin/users/user-links.js
index 25b8111ba6..14b29fdcf7 100644
--- a/frontend/src/pages/sys-admin/users/user-links.js
+++ b/frontend/src/pages/sys-admin/users/user-links.js
@@ -67,7 +67,7 @@ class Content extends Component {
           </table>
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -118,7 +118,7 @@ class Item extends Component {
   }
 
   translateOperations = (item) => {
-    let translateResult = ''; 
+    let translateResult = '';
     switch (item) {
       case 'View':
         translateResult = gettext('View');
@@ -168,7 +168,7 @@ class Item extends Component {
       if (item.is_dir) {
         url = Utils.getFolderIconUrl();
       } else {
-        url = Utils.getFileIconUrl(item.obj_name); 
+        url = Utils.getFileIconUrl(item.obj_name);
       }
     }
     return url;
@@ -203,7 +203,7 @@ class Item extends Component {
               onFreezedItem={this.props.onFreezedItem}
               onUnfreezedItem={this.onUnfreezedItem}
             />
-            }   
+            }
           </td>
         </tr>
         {isLinkDialogOpen &&
@@ -234,27 +234,27 @@ class Links extends Component {
     seafileAPI.sysAdminGetUser(this.props.email).then((res) => {
       this.setState({
         userInfo: res.data
-      }); 
+      });
     });
 
     seafileAPI.sysAdminListShareLinksByUser(this.props.email).then(res => {
       const items = res.data.share_link_list.map(item => {
         item.type = 'download';
         return item;
-      }); 
+      });
       items.sort((a, b) => {
         return a.is_dir ? -1 : 1;
       });
       this.setState({
         loading: false,
         shareLinkItems: items
-      }); 
+      });
     });
     seafileAPI.sysAdminListUploadLinksByUser(this.props.email).then(res => {
       const items = res.data.upload_link_list.map(item => {
         item.type = 'upload';
         return item;
-      }); 
+      });
       this.setState({
         loading: false,
         uploadLinkItems: items
@@ -274,15 +274,15 @@ class Links extends Component {
       seafileAPI.sysAdminDeleteShareLink(token).then(res => {
         let items = this.state.shareLinkItems.filter(item=> {
           return item.token != token;
-        }); 
+        });
         this.setState({
-          shareLinkItems: items 
-        }); 
+          shareLinkItems: items
+        });
         toaster.success(gettext('Successfully deleted 1 item.'));
       }).catch((error) => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
-      }); 
+      });
     } else {
       seafileAPI.sysAdminDeleteUploadLink(token).then(res => {
         let items = this.state.uploadLinkItems.filter(item=> {
diff --git a/frontend/src/pages/sys-admin/users/user-repos.js b/frontend/src/pages/sys-admin/users/user-repos.js
index d4ee2be364..332e12d6e7 100644
--- a/frontend/src/pages/sys-admin/users/user-repos.js
+++ b/frontend/src/pages/sys-admin/users/user-repos.js
@@ -72,7 +72,7 @@ class Content extends Component {
           </table>
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -140,7 +140,7 @@ class Item extends Component {
         return <Link to={`${siteRoot}sys/libraries/${repo.id}/`}>{repo.name}</Link>;
       } else {
         return repo.name;
-      }   
+      }
     } else {
       return gettext('Broken ({repo_id_placeholder})')
         .replace('{repo_id_placeholder}', repo.id);
@@ -148,7 +148,7 @@ class Item extends Component {
   }
 
   translateOperations = (item) => {
-    let translateResult = ''; 
+    let translateResult = '';
     switch (item) {
       case 'Delete':
         translateResult = gettext('Delete');
@@ -197,8 +197,8 @@ class Item extends Component {
               onMenuItemClick={this.onMenuItemClick}
               onFreezedItem={this.props.onFreezedItem}
               onUnfreezedItem={this.onUnfreezedItem}
-            />  
-            }   
+            />
+            }
           </td>
         </tr>
         {isDeleteDialogOpen &&
@@ -217,7 +217,7 @@ class Item extends Component {
           canTransferToDept={false}
           toggleDialog={this.toggleTransferDialog}
         />
-        } 
+        }
       </Fragment>
     );
   }
@@ -239,7 +239,7 @@ class Repos extends Component {
     seafileAPI.sysAdminGetUser(this.props.email).then((res) => {
       this.setState({
         userInfo: res.data
-      }); 
+      });
     });
     seafileAPI.sysAdminListReposByOwner(this.props.email).then(res => {
       this.setState({
diff --git a/frontend/src/pages/sys-admin/users/user-shared-repos.js b/frontend/src/pages/sys-admin/users/user-shared-repos.js
index ba266638dd..23385b0307 100644
--- a/frontend/src/pages/sys-admin/users/user-shared-repos.js
+++ b/frontend/src/pages/sys-admin/users/user-shared-repos.js
@@ -53,7 +53,7 @@ class Content extends Component {
           </table>
         </Fragment>
       );
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -72,13 +72,13 @@ class Item extends Component {
         return <Link to={`${siteRoot}sys/libraries/${repo.id}/`}>{repo.name}</Link>;
       } else {
         return repo.name;
-      }   
+      }
     } else {
       return gettext('Broken ({repo_id_placeholder})')
         .replace('{repo_id_placeholder}', repo.id);
     }
   }
-  
+
   getOwnerLink = () => {
     let link;
     const { item } = this.props;
@@ -126,7 +126,7 @@ class Repos extends Component {
     seafileAPI.sysAdminGetUser(this.props.email).then((res) => {
       this.setState({
         userInfo: res.data
-      }); 
+      });
     });
     seafileAPI.sysAdminListShareInRepos(this.props.email).then(res => {
       this.setState({
@@ -137,7 +137,7 @@ class Repos extends Component {
       this.setState({
         loading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
-      }); 
+      });
     });
   }
 
diff --git a/frontend/src/pages/sys-admin/users/users-content.js b/frontend/src/pages/sys-admin/users/users-content.js
index 5e33581d3c..796f238af4 100644
--- a/frontend/src/pages/sys-admin/users/users-content.js
+++ b/frontend/src/pages/sys-admin/users/users-content.js
@@ -79,7 +79,7 @@ class Content extends Component {
       const spaceEl =
         sortBy != undefined ? // only offer 'sort' for 'DB' & 'LDAPImported' users
         <a className="d-inline-block table-sort-op" href="#" onClick={this.sortByQuotaUsage}>{spaceText} {sortIcon}</a> :
-        spaceText;
+          spaceText;
       const colSpaceText = <Fragment>{spaceEl}{` / ${gettext('Quota')}`}</Fragment>;
 
       const colNameText = `${gettext('Name')} / ${gettext('Contact Email')}`;
@@ -156,7 +156,7 @@ class Content extends Component {
         </Fragment>
       );
 
-      return items.length ? table : emptyTip; 
+      return items.length ? table : emptyTip;
     }
   }
 }
@@ -190,7 +190,7 @@ class Item extends Component {
         isOpIconShown: false,
         highlight: false
       });
-    } 
+    }
   }
 
   onUnfreezedItem = () => {
@@ -249,7 +249,7 @@ class Item extends Component {
         return gettext('Audit Admin');
       default:
         return role;
-    }   
+    }
   }
 
   updateInstitution = (value) => {
@@ -276,7 +276,7 @@ class Item extends Component {
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
-    }); 
+    });
   }
 
   revokeAdmin = () => {
@@ -285,7 +285,7 @@ class Item extends Component {
   }
 
   getMenuOperations = () => {
-    const { 
+    const {
       isAdmin, isLDAPImported,
       isSearchResult, item
     } = this.props;
@@ -301,7 +301,7 @@ class Item extends Component {
   }
 
   translateOperations = (item) => {
-    let translateResult = ''; 
+    let translateResult = '';
     switch (item) {
       case 'Delete':
         translateResult = gettext('Delete');
@@ -312,7 +312,7 @@ class Item extends Component {
       case 'Revoke Admin':
         translateResult = gettext('Revoke Admin');
         break;
-    }   
+    }
 
     return translateResult;
   }
@@ -335,8 +335,8 @@ class Item extends Component {
 
   render() {
     const { item, isAdmin } = this.props;
-    const { 
-      isOpIconShown, 
+    const {
+      isOpIconShown,
       isSetQuotaDialogOpen,
       isDeleteUserDialogOpen,
       isResetUserPasswordDialogOpen,
@@ -356,12 +356,12 @@ class Item extends Component {
           </td>
           <td>
             <UserLink email={item.email} name={item.name} />
-            {item.contact_email && 
+            {item.contact_email &&
               <Fragment>
                 <br />
                 {item.contact_email}
               </Fragment>}
-            {item.org_id && 
+            {item.org_id &&
               <Fragment>
                 <br />
                 <Link to={`${siteRoot}sys/organizations/${item.org_id}/info/`}>({item.org_name})</Link>
@@ -369,7 +369,7 @@ class Item extends Component {
             }
           </td>
           <td>
-            <SysAdminUserStatusEditor 
+            <SysAdminUserStatusEditor
               isTextMode={true}
               isEditIconShow={isOpIconShown}
               currentStatus={item.is_active ? 'active' : 'inactive'}
@@ -377,7 +377,7 @@ class Item extends Component {
               onStatusChanged={this.updateStatus}
             />
           </td>
-          {isPro && 
+          {isPro &&
           <td>
             {isAdmin ?
               <SelectEditor
@@ -457,7 +457,7 @@ class Item extends Component {
             executeOperation={this.resetPassword}
             confirmBtnText={gettext('Reset')}
             toggleDialog={this.toggleResetUserPasswordDialog}
-          /> 
+          />
         }
         {isRevokeAdminDialogOpen &&
           <CommonOperationConfirmationDialog
@@ -466,7 +466,7 @@ class Item extends Component {
             executeOperation={this.revokeAdmin}
             confirmBtnText={gettext('Revoke')}
             toggleDialog={this.toggleRevokeAdminDialog}
-          /> 
+          />
         }
       </Fragment>
     );
diff --git a/frontend/src/pages/sys-admin/users/users-nav.js b/frontend/src/pages/sys-admin/users/users-nav.js
index 76020f725c..ba0728965f 100644
--- a/frontend/src/pages/sys-admin/users/users-nav.js
+++ b/frontend/src/pages/sys-admin/users/users-nav.js
@@ -12,7 +12,7 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'database', urlPart: 'users', text: gettext('Database')} 
+      {name: 'database', urlPart: 'users', text: gettext('Database')}
     ];
     if (haveLDAP) {
       this.navItems.push(
diff --git a/frontend/src/pages/sys-admin/users/users.js b/frontend/src/pages/sys-admin/users/users.js
index 09967ba578..6da652d339 100644
--- a/frontend/src/pages/sys-admin/users/users.js
+++ b/frontend/src/pages/sys-admin/users/users.js
@@ -20,7 +20,7 @@ import Content from './users-content';
 
 const { availableRoles } = window.sysadmin.pageOptions;
 
-const propTypes = { 
+const propTypes = {
   isAdmin: PropTypes.bool,
   isLDAPImported: PropTypes.bool
 };
@@ -274,7 +274,7 @@ class Users extends Component {
           return new SysAdminUser(item);
         });
         this.setState({
-          userList: users.concat(this.state.userList) 
+          userList: users.concat(this.state.userList)
         });
       }
       res.data.failed.map(item => {
@@ -320,7 +320,7 @@ class Users extends Component {
         return item;
       });
       this.setState({userList: newUserList});
-      const msg = (key == 'is_active' && value) ? 
+      const msg = (key == 'is_active' && value) ?
         res.data.update_status_tip : gettext('Edit succeeded');
       toaster.success(msg);
     }).catch((error) => {
@@ -349,7 +349,7 @@ class Users extends Component {
     seafileAPI.sysAdminUpdateUser(email, 'is_staff', false).then(res => {
       let userList = this.state.userList.filter(item => {
         return item.email != email;
-      }); 
+      });
       this.setState({
         userList: userList
       });
@@ -394,7 +394,7 @@ class Users extends Component {
 
   toggleBatchAddAdminDialog = () => {
     this.setState({isBatchAddAdminDialogOpen: !this.state.isBatchAddAdminDialogOpen});
-  }  
+  }
 
   addAdminInBatch = (emails) => {
     seafileAPI.sysAdminAddAdminInBatch(emails).then(res => {
@@ -402,7 +402,7 @@ class Users extends Component {
         return new SysAdminAdminUser(user);
       });
       this.setState({
-        userList: users.concat(this.state.userList) 
+        userList: users.concat(this.state.userList)
       });
       res.data.failed.map(item => {
         const msg = `${item.email}: ${item.error_msg}`;
@@ -432,10 +432,10 @@ class Users extends Component {
   render() {
     const { isAdmin, isLDAPImported } = this.props;
     const {
-      hasUserSelected, 
+      hasUserSelected,
       isImportUserDialogOpen,
-      isAddUserDialogOpen, 
-      isBatchDeleteUserDialogOpen, 
+      isAddUserDialogOpen,
+      isBatchDeleteUserDialogOpen,
       isBatchSetQuotaDialogOpen,
       isBatchAddAdminDialogOpen
     } = this.state;
diff --git a/frontend/src/pages/sys-admin/virus-scan/all-virus-files.js b/frontend/src/pages/sys-admin/virus-scan/all-virus-files.js
index b8fabceb0c..7d463b4fb7 100644
--- a/frontend/src/pages/sys-admin/virus-scan/all-virus-files.js
+++ b/frontend/src/pages/sys-admin/virus-scan/all-virus-files.js
@@ -58,7 +58,7 @@ class VirusFileItem extends Component {
   }
 
   translateOperations = (item) => {
-    let translateResult = ''; 
+    let translateResult = '';
     switch(item) {
       case 'delete':
         translateResult = gettext('Delete');
@@ -94,7 +94,7 @@ class VirusFileItem extends Component {
         <td>{virusFile.file_path}</td>
         <td>{fileStatus}</td>
         <td>
-          {fileOpList.length > 0 && this.state.isOpIconShown && 
+          {fileOpList.length > 0 && this.state.isOpIconShown &&
             <OpMenu
               operations={fileOpList}
               translateOperations={this.translateOperations}
@@ -122,9 +122,9 @@ class Content extends Component {
 
   constructor(props) {
     super(props);
-    this.state = { 
+    this.state = {
       isItemFreezed: false
-    };  
+    };
   }
 
   onFreezedItem = () => {
@@ -136,11 +136,11 @@ class Content extends Component {
   }
 
   getPreviousPage = () => {
-    this.props.getListByPage(this.props.currentPage - 1); 
+    this.props.getListByPage(this.props.currentPage - 1);
   }
 
   getNextPage = () => {
-    this.props.getListByPage(this.props.currentPage + 1); 
+    this.props.getListByPage(this.props.currentPage + 1);
   }
 
   render() {
@@ -251,7 +251,7 @@ class AllVirusFiles extends Component {
       this.getListByPage(1);
     });
   }
-  
+
   handleFile = (virusID, op) => {
     let request;
     switch(op) {
@@ -289,9 +289,9 @@ class AllVirusFiles extends Component {
         <MainPanelTopbar />
         <div className="main-panel-center">
           <div className="cur-view-container">
-            <Nav currentItem="all" /> 
+            <Nav currentItem="all" />
             <div className="cur-view-content">
-              <Content 
+              <Content
                 loading={this.state.loading}
                 errorMsg={this.state.errorMsg}
                 virusFiles={this.state.virusFiles}
diff --git a/frontend/src/pages/sys-admin/virus-scan/nav.js b/frontend/src/pages/sys-admin/virus-scan/nav.js
index 183aab2d1a..2484fd38a1 100644
--- a/frontend/src/pages/sys-admin/virus-scan/nav.js
+++ b/frontend/src/pages/sys-admin/virus-scan/nav.js
@@ -12,8 +12,8 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'all', urlPart: 'all', text: gettext('All')}, 
-      {name: 'unhandled', urlPart: 'unhandled', text: gettext('Unhandled')} 
+      {name: 'all', urlPart: 'all', text: gettext('All')},
+      {name: 'unhandled', urlPart: 'unhandled', text: gettext('Unhandled')}
     ];
   }
 
diff --git a/frontend/src/pages/sys-admin/virus-scan/unhandled-virus-files.js b/frontend/src/pages/sys-admin/virus-scan/unhandled-virus-files.js
index 3c79ef2703..c4e4eca503 100644
--- a/frontend/src/pages/sys-admin/virus-scan/unhandled-virus-files.js
+++ b/frontend/src/pages/sys-admin/virus-scan/unhandled-virus-files.js
@@ -59,7 +59,7 @@ class VirusFileItem extends Component {
   }
 
   translateOperations = (item) => {
-    let translateResult = ''; 
+    let translateResult = '';
     switch(item) {
       case 'delete':
         translateResult = gettext('Delete');
@@ -102,7 +102,7 @@ class VirusFileItem extends Component {
         <td>{virusFile.file_path}</td>
         <td>{fileStatus}</td>
         <td>
-          {fileOpList.length > 0 && this.state.isOpIconShown && 
+          {fileOpList.length > 0 && this.state.isOpIconShown &&
             <OpMenu
               operations={fileOpList}
               translateOperations={this.translateOperations}
@@ -130,9 +130,9 @@ class Content extends Component {
 
   constructor(props) {
     super(props);
-    this.state = { 
+    this.state = {
       isItemFreezed: false
-    };  
+    };
   }
 
   onFreezedItem = () => {
@@ -144,11 +144,11 @@ class Content extends Component {
   }
 
   getPreviousPage = () => {
-    this.props.getListByPage(this.props.currentPage - 1); 
+    this.props.getListByPage(this.props.currentPage - 1);
   }
 
   getNextPage = () => {
-    this.props.getListByPage(this.props.currentPage + 1); 
+    this.props.getListByPage(this.props.currentPage + 1);
   }
 
   render() {
@@ -273,7 +273,7 @@ class UnhandledVirusFiles extends Component {
       this.getListByPage(1);
     });
   }
-  
+
   handleFile = (virusID, op) => {
     let request;
     switch(op) {
@@ -295,7 +295,7 @@ class UnhandledVirusFiles extends Component {
               item.has_deleted = true;
             } else {
               item = res.data.virus_file;
-            }   
+            }
           }
           return item;
         })
@@ -394,9 +394,9 @@ class UnhandledVirusFiles extends Component {
         }
         <div className="main-panel-center">
           <div className="cur-view-container">
-            <Nav currentItem="unhandled" /> 
+            <Nav currentItem="unhandled" />
             <div className="cur-view-content">
-              <Content 
+              <Content
                 loading={this.state.loading}
                 errorMsg={this.state.errorMsg}
                 virusFiles={this.state.virusFiles}
diff --git a/frontend/src/pages/sys-admin/web-settings/checkbox-item.js b/frontend/src/pages/sys-admin/web-settings/checkbox-item.js
index 43378d2212..c2cb4627a8 100644
--- a/frontend/src/pages/sys-admin/web-settings/checkbox-item.js
+++ b/frontend/src/pages/sys-admin/web-settings/checkbox-item.js
@@ -26,7 +26,7 @@ class WebSettingCheckbox extends Component {
     this.setState({
       inputChecked: checked
     });
-    this.props.saveSetting(this.props.keyText, valueToNum);  
+    this.props.saveSetting(this.props.keyText, valueToNum);
   }
 
   render() {
@@ -40,8 +40,8 @@ class WebSettingCheckbox extends Component {
             <Input className="ml-0" checked={inputChecked} type='checkbox' onChange={this.onInputChange} />
             <p className="ml-4">{helpTip}</p>
           </Fragment>
-        }   
-      />  
+        }
+      />
     );
   }
 }
diff --git a/frontend/src/pages/sys-admin/web-settings/file-item.js b/frontend/src/pages/sys-admin/web-settings/file-item.js
index ff2baafceb..6b3b022889 100644
--- a/frontend/src/pages/sys-admin/web-settings/file-item.js
+++ b/frontend/src/pages/sys-admin/web-settings/file-item.js
@@ -47,7 +47,7 @@ class WebSettingFile extends Component {
             <Button color="secondary" onClick={this.openFileInput}>{gettext('Change')}</Button>
             <input className="d-none" type="file" onChange={this.uploadFile} ref={this.fileInput} />
           </Fragment>
-        } 
+        }
       />
     );
   }
diff --git a/frontend/src/pages/sys-admin/web-settings/web-settings.js b/frontend/src/pages/sys-admin/web-settings/web-settings.js
index c3e386c532..09e2bc1c9d 100644
--- a/frontend/src/pages/sys-admin/web-settings/web-settings.js
+++ b/frontend/src/pages/sys-admin/web-settings/web-settings.js
@@ -79,7 +79,7 @@ class WebSettings extends Component {
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
-    }); 
+    });
   }
 
   render() {
@@ -95,7 +95,7 @@ class WebSettings extends Component {
             <div className="cur-view-content container mw-100">
               {loading && <Loading />}
               {errorMsg && <p className="error text-center mt-4">{errorMsg}</p>}
-              {(!loading && !errorMsg) && config_dict && 
+              {(!loading && !errorMsg) && config_dict &&
               <Fragment>
                 <p className="small text-secondary my-4">{gettext('Note: Settings via web interface are saved in database table (seahub-db/constance_config). They have a higher priority over the settings in config files.')}</p>
 
diff --git a/frontend/src/pages/upload-link/file-uploader.js b/frontend/src/pages/upload-link/file-uploader.js
index 4f9ebb3bcb..fe167b362b 100644
--- a/frontend/src/pages/upload-link/file-uploader.js
+++ b/frontend/src/pages/upload-link/file-uploader.js
@@ -1,4 +1,4 @@
-// This file is copied from frontend/src/components/file-uploader/file-uploader.js,   
+// This file is copied from frontend/src/components/file-uploader/file-uploader.js,
 // and modified according to the requirements of this page.
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
@@ -95,8 +95,8 @@ class FileUploader extends React.Component {
   }
 
   onbeforeunload = () => {
-    if (window.uploader && 
-        window.uploader.isUploadProgressDialogShow && 
+    if (window.uploader &&
+        window.uploader.isUploadProgressDialogShow &&
         window.uploader.totalProgress !== 100) {
       return '';
     }
@@ -153,7 +153,7 @@ class FileUploader extends React.Component {
     let allFilesUploaded = this.state.allFilesUploaded;
     if (allFilesUploaded === true) {
       this.setState({allFilesUploaded: false});
-    } 
+    }
 
     let path = this.props.path;
     let fileName = resumableFile.fileName;
@@ -184,14 +184,14 @@ class FileUploader extends React.Component {
         if (direntList[i].type === 'file' && direntList[i].name === resumableFile.fileName) {
           hasRepetition = true;
           break;
-        }   
-      }   
+        }
+      }
       */
       if (hasRepetition) {
         this.setState({
           isUploadRemindDialogShow: true,
           currentResumableFile: resumableFile,
-        }); 
+        });
       } else {
         this.setUploadFileList(this.resumable.files);
         seafileAPI.sharedUploadLinkGetFileUploadUrl(this.props.token).then(res => {
@@ -202,7 +202,7 @@ class FileUploader extends React.Component {
           toaster.danger(errMessage);
         });
       }
-    } else { 
+    } else {
       this.setUploadFileList(this.resumable.files);
       if (!this.isUploadLinkLoaded) {
         this.isUploadLinkLoaded = true;
@@ -281,7 +281,7 @@ class FileUploader extends React.Component {
     if (this.timestamp) {
       let timeDiff = (now - this.timestamp);
       if (timeDiff < this.bitrateInterval) {
-        return this.state.uploadBitrate; 
+        return this.state.uploadBitrate;
       }
 
       // 1. Cancel will produce loaded greater than this.loaded
@@ -295,10 +295,10 @@ class FileUploader extends React.Component {
 
     this.timestamp = now;
     this.loaded = loaded;
-    
+
     return uploadBitrate;
   }
-  
+
   onProgress = () => {
     let progress = Math.round(this.resumable.progress() * 100);
     this.setState({totalProgress: progress});
@@ -388,7 +388,7 @@ class FileUploader extends React.Component {
     } else {
       // eg: '{"error": "Internal error" \n }'
       let errorMessage = message.replace(/\n/g, '');
-      errorMessage  = JSON.parse(errorMessage); 
+      errorMessage  = JSON.parse(errorMessage);
       error = errorMessage.error;
       if (error === 'File locked by others.') {
         error = gettext('File is locked by others.');
@@ -510,7 +510,7 @@ class FileUploader extends React.Component {
   onCancelAllUploading = () => {
     let uploadFileList = this.state.uploadFileList.filter(item => {
       if (Math.round(item.progress() !== 1)) {
-        item.cancel(); 
+        item.cancel();
         return false;
       }
       return true;
@@ -540,7 +540,7 @@ class FileUploader extends React.Component {
         }
         return item;
       });
-  
+
       this.setState({
         retryFileList: retryFileList,
         uploadFileList: uploadFileList
@@ -560,7 +560,7 @@ class FileUploader extends React.Component {
       let prefix = path === '/' ? (path + relative_path) : (path + '/' + relative_path);
       fileName = prefix + fileName;
     }
-    
+
     resumableFile.bootstrap();
     var firedRetry = false;
     resumableFile.resumableObj.on('chunkingComplete', () => {
@@ -570,9 +570,9 @@ class FileUploader extends React.Component {
           let blockSize = parseInt(resumableUploadFileBlockSize) * 1024 * 1024 || 1024 * 1024;
           let offset = Math.floor(uploadedBytes / blockSize);
           resumableFile.markChunksCompleted(offset);
-    
+
           resumableFile.resumableObj.upload();
-    
+
         }).catch(error => {
           let errMessage = Utils.getErrorMsg(error);
           toaster.danger(errMessage);
@@ -580,7 +580,7 @@ class FileUploader extends React.Component {
       }
       firedRetry = true;
     });
-    
+
   }
 
   replaceRepetitionFile = () => {
@@ -598,7 +598,7 @@ class FileUploader extends React.Component {
       toaster.danger(errMessage);
     });
   }
-  
+
   cancelFileUpload = () => {
     this.resumable.files.pop(); //delete latest file；
   }
diff --git a/frontend/src/pages/upload-link/upload-list-item.js b/frontend/src/pages/upload-link/upload-list-item.js
index df3a54ba97..1b8872eedf 100644
--- a/frontend/src/pages/upload-link/upload-list-item.js
+++ b/frontend/src/pages/upload-link/upload-list-item.js
@@ -33,7 +33,7 @@ class UploadListItem extends React.Component {
       if (resumableFile.remainingTime === 0 && !resumableFile.isSaved) {
         uploadState = UPLOAD_ISSAVING;
       }
-  
+
       if (resumableFile.isSaved) {
         uploadState = UPLOAD_UPLOADED;
       }
diff --git a/frontend/src/pages/upload-link/upload-progress-dialog.js b/frontend/src/pages/upload-link/upload-progress-dialog.js
index b95f9e4c04..19c4add62d 100644
--- a/frontend/src/pages/upload-link/upload-progress-dialog.js
+++ b/frontend/src/pages/upload-link/upload-progress-dialog.js
@@ -27,8 +27,8 @@ class UploadProgressDialog extends React.Component {
 
   toggleDropdown = () => {
     this.setState({
-      dropdownOpen: !this.state.dropdownOpen 
-    }); 
+      dropdownOpen: !this.state.dropdownOpen
+    });
   }
 
   render() {
@@ -65,9 +65,9 @@ class UploadProgressDialog extends React.Component {
               })}
               {this.props.uploadFileList.map((resumableFile, index) => {
                 return (
-                  <UploadListItem 
-                    key={index} 
-                    resumableFile={resumableFile} 
+                  <UploadListItem
+                    key={index}
+                    resumableFile={resumableFile}
                     onUploadCancel={this.props.onUploadCancel}
                     onUploadRetry={this.props.onUploadRetry}
                   />
diff --git a/frontend/src/pages/wiki/main-panel.js b/frontend/src/pages/wiki/main-panel.js
index e19a5a8468..feee738f6f 100644
--- a/frontend/src/pages/wiki/main-panel.js
+++ b/frontend/src/pages/wiki/main-panel.js
@@ -49,7 +49,7 @@ class MainPanel extends Component {
     let pathElem = paths.map((item, index) => {
       if (item === '') {
         return;
-      } 
+      }
       if (index === (paths.length - 1)) {
         return (
           <Fragment key={index}>
@@ -62,9 +62,9 @@ class MainPanel extends Component {
         return (
           <Fragment key={index} >
             <span className="path-split">/</span>
-            <a 
-              className="path-link" 
-              data-path={nodePath} 
+            <a
+              className="path-link"
+              data-path={nodePath}
               onClick={this.onMainNavBarClick}>
               {item}
             </a>
@@ -142,7 +142,7 @@ class MainPanel extends Component {
               <WikiDirListView
                 path={this.props.path}
                 direntList={this.props.direntList}
-                onDirentClick={this.props.onDirentClick} 
+                onDirentClick={this.props.onDirentClick}
               />
             )}
           </div>
diff --git a/frontend/src/pages/wikis/wikis.js b/frontend/src/pages/wikis/wikis.js
index 57ede5e55b..265724ea56 100644
--- a/frontend/src/pages/wikis/wikis.js
+++ b/frontend/src/pages/wikis/wikis.js
@@ -121,7 +121,7 @@ class Wikis extends Component {
                   <Button className="btn btn-secondary operation-item" onClick={this.onSelectToggle}>{gettext('Publish a Library')}</Button>
                 </MediaQuery>
                 <MediaQuery query="(max-width: 767.8px)">
-                <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('Publish a Library')} onClick={this.onSelectToggle}></span>
+                  <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('Publish a Library')} onClick={this.onSelectToggle}></span>
                 </MediaQuery>
               </Fragment>
             </div>
diff --git a/frontend/src/repo-folder-trash.js b/frontend/src/repo-folder-trash.js
index dcc5fd91df..17b11b5e3e 100644
--- a/frontend/src/repo-folder-trash.js
+++ b/frontend/src/repo-folder-trash.js
@@ -16,7 +16,7 @@ import './css/search.css';
 
 import './css/repo-folder-trash.css';
 
-const { 
+const {
   repoID,
   repoFolderName,
   path,
@@ -92,7 +92,7 @@ class RepoFolderTrash extends React.Component {
   toggleCleanTrashDialog = () => {
     this.setState({
       isCleanTrashDialogOpen: !this.state.isCleanTrashDialogOpen
-    }); 
+    });
   }
 
   refreshTrash = () => {
@@ -128,19 +128,19 @@ class RepoFolderTrash extends React.Component {
           this.setState({
             isLoading: false,
             errorMsg: gettext('Permission denied')
-          }); 
+          });
         } else {
           this.setState({
             isLoading: false,
             errorMsg: gettext('Error')
-          }); 
+          });
         }
       } else {
         this.setState({
           isLoading: false,
           errorMsg: gettext('Please check the network.')
-        }); 
-      }   
+        });
+      }
     });
   }
 
@@ -168,11 +168,11 @@ class RepoFolderTrash extends React.Component {
                 <a href="#" onClick={this.clickFolderPath.bind(this, pathList.slice(0, index+1).join('/'))}>{pathList[index]}</a>
                 <span> / </span>
               </React.Fragment>
-            );  
-          }   
-        }   
-        )}  
-        {pathList[pathList.length - 1]} 
+            );
+          }
+        }
+        )}
+        {pathList[pathList.length - 1]}
       </React.Fragment>
     );
   }
@@ -202,7 +202,7 @@ class RepoFolderTrash extends React.Component {
                   <button className="btn btn-secondary clean" onClick={this.cleanTrash}>{gettext('Clean')}</button>
                   }
                 </div>
-                <Content 
+                <Content
                   data={this.state}
                   getMore={this.getMore}
                   renderFolder={this.renderFolder}
@@ -236,7 +236,7 @@ class Content extends React.Component {
       {width: '15%', text: gettext('Size')},
       {width: '15%', text: ''}
     ];
-  } 
+  }
 
   render() {
     const { isLoading, errorMsg, items, more, showFolder, commitID, baseDir, folderPath, folderItems } = this.props.data;
@@ -254,9 +254,9 @@ class Content extends React.Component {
           <tbody>
             {showFolder ?
               folderItems.map((item, index) => {
-                return <FolderItem 
+                return <FolderItem
                   key={index}
-                  item={item} 
+                  item={item}
                   commitID={commitID}
                   baseDir={baseDir}
                   folderPath={folderPath}
@@ -264,9 +264,9 @@ class Content extends React.Component {
                 />;
               }) :
               items.map((item, index) => {
-                return <Item 
+                return <Item
                   key={index}
-                  item={item} 
+                  item={item}
                   renderFolder={this.props.renderFolder}
                 />;
               })}
@@ -315,14 +315,14 @@ class Item extends React.Component {
       });
       toaster.success(gettext('Successfully restored 1 item.'));
     }).catch((error) => {
-      let errorMsg = ''; 
+      let errorMsg = '';
       if (error.response) {
         errorMsg = error.response.data.error_msg || gettext('Error');
       } else {
         errorMsg = gettext('Please check the network.');
-      }   
+      }
       toaster.danger(errorMsg);
-    }); 
+    });
   }
 
   renderFolder = (e) => {
diff --git a/frontend/src/repo-history.js b/frontend/src/repo-history.js
index 5cf927f891..7702581ac6 100644
--- a/frontend/src/repo-history.js
+++ b/frontend/src/repo-history.js
@@ -17,7 +17,7 @@ import './css/search.css';
 
 import './css/repo-history.css';
 
-const { 
+const {
   repoID,
   repoName,
   userPerm,
@@ -48,7 +48,7 @@ class RepoHistory extends React.Component {
       currentPage: parseInt(urlParams.get('page') || currentPage)
     }, () => {
       this.getItems(this.state.currentPage);
-    }); 
+    });
   }
 
   getItems = (page) => {
@@ -63,7 +63,7 @@ class RepoHistory extends React.Component {
       this.setState({
         isLoading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
-      }); 
+      });
     });
   }
 
@@ -72,7 +72,7 @@ class RepoHistory extends React.Component {
       perPage: perPage
     }, () => {
       this.getItems(1);
-    }); 
+    });
   }
 
   onSearchedClick = (selectedItem) => {
@@ -109,7 +109,7 @@ class RepoHistory extends React.Component {
                   <span className="fas fa-chevron-left"></span>
                 </a>
                 {userPerm == 'rw' && <p className="tip">{gettext('Tip: a snapshot will be generated after modification, which records the library state after the modification.')}</p>}
-                <Content 
+                <Content
                   isLoading={this.state.isLoading}
                   errorMsg={this.state.errorMsg}
                   items={this.state.items}
@@ -146,7 +146,7 @@ class Content extends React.Component {
       {width: '15%', text: `${gettext('Device')} / ${gettext('Version')}`},
       {width: '12%', text: ''}
     ];
-  } 
+  }
 
   getPreviousPage = () => {
     this.props.getListByPage(this.props.currentPage - 1);
@@ -159,7 +159,7 @@ class Content extends React.Component {
   render() {
     const {
       isLoading, errorMsg, items,
-      curPerPage, currentPage, hasNextPage 
+      curPerPage, currentPage, hasNextPage
     } = this.props;
 
     if (isLoading) {
@@ -195,7 +195,7 @@ class Content extends React.Component {
           hasNextPage={hasNextPage}
           curPerPage={curPerPage}
           resetPerPage={this.props.resetPerPage}
-        />  
+        />
       </React.Fragment>
     );
   }
@@ -206,7 +206,7 @@ class Item extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      labels: this.props.item.tags, 
+      labels: this.props.item.tags,
       isIconShown: false,
       isCommitLabelUpdateDialogOpen: false,
       isCommitDetailsDialogOpen: false
@@ -281,7 +281,7 @@ class Item extends React.Component {
           <td>
             {item.client_version ? `${item.device_name} / ${item.client_version}` : 'API / --'}
           </td>
-          {showLabel && 
+          {showLabel &&
           <td>
             {labels.map((item, index) => {
               return <span key={index} className="commit-label">{item}</span>;
diff --git a/frontend/src/repo-snapshot.js b/frontend/src/repo-snapshot.js
index abc77860e1..0a949a951e 100644
--- a/frontend/src/repo-snapshot.js
+++ b/frontend/src/repo-snapshot.js
@@ -15,7 +15,7 @@ import './css/search.css';
 
 import './css/repo-snapshot.css';
 
-const { 
+const {
   repoID, repoName, canRestoreRepo,
   commitID, commitTime, commitDesc, commitRelativeTime,
   showAuthor, authorAvatarURL, authorName, authorNickName
@@ -76,7 +76,7 @@ class RepoSnapshot extends React.Component {
       this.setState({
         isLoading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
-      }); 
+      });
     });
   }
 
@@ -104,11 +104,11 @@ class RepoSnapshot extends React.Component {
                 <a href="#" onClick={this.clickFolderPath.bind(this, pathList.slice(0, index+1).join('/'))}>{pathList[index]}</a>
                 <span> / </span>
               </React.Fragment>
-            );  
+            );
           }
         }
-        )}  
-        {pathList[pathList.length - 1]} 
+        )}
+        {pathList[pathList.length - 1]}
       </React.Fragment>
     );
   }
@@ -121,7 +121,7 @@ class RepoSnapshot extends React.Component {
       let errorMsg = Utils.getErrorMsg(error);
       this.toggleDialog();
       toaster.danger(errorMsg);
-    }); 
+    });
   }
 
   render() {
@@ -163,7 +163,7 @@ class RepoSnapshot extends React.Component {
                   <button className="btn btn-secondary op-bar-btn" onClick={this.toggleDialog}>{gettext('Restore')}</button>
                   }
                 </div>
-                <Content 
+                <Content
                   data={this.state}
                   renderFolder={this.renderFolder}
                 />
@@ -194,7 +194,7 @@ class Content extends React.Component {
       {width: '20%', text: gettext('Size')},
       {width: '20%', text: ''}
     ];
-  } 
+  }
 
   render() {
     const { isLoading, errorMsg, folderPath, folderItems } = this.props.data;
@@ -218,9 +218,9 @@ class Content extends React.Component {
         </thead>
         <tbody>
           {folderItems.map((item, index) => {
-            return <FolderItem 
+            return <FolderItem
               key={index}
-              item={item} 
+              item={item}
               folderPath={folderPath}
               renderFolder={this.props.renderFolder}
             />;
@@ -255,14 +255,14 @@ class FolderItem extends React.Component {
     const item = this.props.item;
     const path = Utils.joinPath(this.props.folderPath, item.name);
     const request = item.type == 'dir' ?
-      seafileAPI.revertFolder(repoID, path, commitID): 
+      seafileAPI.revertFolder(repoID, path, commitID):
       seafileAPI.revertFile(repoID, path, commitID);
     request.then((res) => {
       toaster.success(gettext('Successfully restored 1 item.'));
     }).catch((error) => {
       let errorMsg = Utils.getErrorMsg(error);
       toaster.danger(errorMsg);
-    }); 
+    });
   }
 
   renderFolder = (e) => {
diff --git a/frontend/src/shared-dir-view.js b/frontend/src/shared-dir-view.js
index 44ed759b4a..c3aca42854 100644
--- a/frontend/src/shared-dir-view.js
+++ b/frontend/src/shared-dir-view.js
@@ -85,7 +85,7 @@ class SharedDirView extends React.Component {
       sortBy: sortBy,
       sortOrder: sortOrder,
       items: Utils.sortDirentsInSharedDir(this.state.items, sortBy, sortOrder)
-    }); 
+    });
   }
 
   getThumbnails = () => {
@@ -147,7 +147,7 @@ class SharedDirView extends React.Component {
   zipDownloadSelectedItems = () => {
     this.setState({
       isZipDialogOpen: true,
-      zipFolderPath: path, 
+      zipFolderPath: path,
       selectedItems: this.state.items.filter(item => item.isSelected)
         .map(item => item.file_name || item.folder_name)
     });
@@ -242,7 +242,7 @@ class SharedDirView extends React.Component {
     });
   }
 
-  onUploadFile = (e) => { 
+  onUploadFile = (e) => {
     e.nativeEvent.stopImmediatePropagation();
     this.uploader.onFileUpload();
   }
@@ -296,7 +296,7 @@ class SharedDirView extends React.Component {
                   )}
                   {showDownloadIcon &&
                   <Fragment>
-                    {this.state.items.some(item => item.isSelected) ? 
+                    {this.state.items.some(item => item.isSelected) ?
                       <Button color="success" onClick={this.zipDownloadSelectedItems} className="ml-2 shared-dir-op-btn">{gettext('ZIP Selected Items')}</Button> :
                       <Button color="success" onClick={this.zipDownloadFolder.bind(this, path)} className="ml-2 shared-dir-op-btn">{gettext('ZIP')}</Button>
                     }
@@ -333,7 +333,7 @@ class SharedDirView extends React.Component {
         </div>
         {this.state.isZipDialogOpen &&
         <ModalPortal>
-          <ZipDownloadDialog 
+          <ZipDownloadDialog
             token={token}
             path={this.state.zipFolderPath}
             target={this.state.selectedItems}
@@ -362,7 +362,7 @@ class Content extends React.Component {
   constructor(props) {
     super(props);
   }
-  
+
   sortByName = (e) => {
     e.preventDefault();
     const sortBy = 'name';
@@ -385,13 +385,13 @@ class Content extends React.Component {
   }
 
   render() {
-    const { 
-      isDesktop, 
+    const {
+      isDesktop,
       isLoading, errorMsg, items,
       sortBy, sortOrder,
       isAllItemsSelected
     } = this.props;
-    
+
     if (isLoading) {
       return <Loading />;
     }
@@ -403,7 +403,7 @@ class Content extends React.Component {
     const tbody = (
       <tbody>
         {items.map((item, index) => {
-          return <Item 
+          return <Item
             key={index}
             isDesktop={isDesktop}
             item={item}
@@ -468,7 +468,7 @@ class Item extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { 
+    this.state = {
       isIconShown: false,
       isOpMenuOpen: false
     };
@@ -547,7 +547,7 @@ class Item extends React.Component {
                 title={gettext('More Operations')}
                 data-toggle="dropdown"
                 aria-expanded={this.state.isOpMenuOpen}
-              />  
+              />
               <div className={this.state.isOpMenuOpen ? '' : 'd-none'} onClick={this.toggleOpMenu}>
                 <div className="mobile-operation-menu-bg-layer"></div>
                 <div className="mobile-operation-menu">
@@ -609,7 +609,7 @@ class Item extends React.Component {
                 title={gettext('More Operations')}
                 data-toggle="dropdown"
                 aria-expanded={this.state.isOpMenuOpen}
-              />  
+              />
               <div className={this.state.isOpMenuOpen ? '' : 'd-none'} onClick={this.toggleOpMenu}>
                 <div className="mobile-operation-menu-bg-layer"></div>
                 <div className="mobile-operation-menu">
diff --git a/frontend/src/tc-accept.js b/frontend/src/tc-accept.js
index f95cfd1ecd..5c344f62d5 100644
--- a/frontend/src/tc-accept.js
+++ b/frontend/src/tc-accept.js
@@ -9,7 +9,7 @@ import TermsPreviewWidget from './components/terms-preview-widget';
 import './css/tc-accept.css';
 
 const { csrfToken } = window.app.pageOptions;
-const { 
+const {
   termsName,
   formAction,
   formTerms,
diff --git a/frontend/src/tc-view.js b/frontend/src/tc-view.js
index 166682ab07..a32afe1fa4 100644
--- a/frontend/src/tc-view.js
+++ b/frontend/src/tc-view.js
@@ -6,7 +6,7 @@ import TermsPreviewWidget from './components/terms-preview-widget';
 
 import './css/tc-accept.css';
 
-const { 
+const {
   termsName,
   termsText
 } = window.tc;
diff --git a/frontend/src/user-notifications.js b/frontend/src/user-notifications.js
index 4248cd2b9c..1082b7c570 100644
--- a/frontend/src/user-notifications.js
+++ b/frontend/src/user-notifications.js
@@ -38,7 +38,7 @@ class UserNotifications extends React.Component {
       currentPage: parseInt(urlParams.get('page') || currentPage)
     }, () => {
       this.getItems(this.state.currentPage);
-    }); 
+    });
   }
 
   getItems = (page) => {
@@ -54,7 +54,7 @@ class UserNotifications extends React.Component {
       this.setState({
         isLoading: false,
         errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
-      }); 
+      });
     });
   }
 
@@ -63,7 +63,7 @@ class UserNotifications extends React.Component {
       perPage: perPage
     }, () => {
       this.getItems(1);
-    }); 
+    });
   }
 
   onSearchedClick = (selectedItem) => {
@@ -126,7 +126,7 @@ class UserNotifications extends React.Component {
                     <button className="btn btn-secondary op-bar-btn ml-2" onClick={this.clearAll}>{gettext('Clear')}</button>
                   </div>
                 </div>
-                <Content 
+                <Content
                   isLoading={this.state.isLoading}
                   errorMsg={this.state.errorMsg}
                   items={this.state.items}
@@ -149,7 +149,7 @@ class Content extends React.Component {
 
   constructor(props) {
     super(props);
-  } 
+  }
 
   getPreviousPage = () => {
     this.props.getListByPage(this.props.currentPage - 1);
@@ -162,7 +162,7 @@ class Content extends React.Component {
   render() {
     const {
       isLoading, errorMsg, items,
-      curPerPage, currentPage, hasNextPage 
+      curPerPage, currentPage, hasNextPage
     } = this.props;
 
     if (isLoading) {
@@ -200,7 +200,7 @@ class Content extends React.Component {
             })}
           </tbody>
         </table>
-      {items.length > 0 &&
+        {items.length > 0 &&
         <Paginator
           gotoPreviousPage={this.getPreviousPage}
           gotoNextPage={this.getNextPage}
@@ -209,7 +209,7 @@ class Content extends React.Component {
           curPerPage={curPerPage}
           resetPerPage={this.props.resetPerPage}
         />
-      }
+        }
       </React.Fragment>
     );
   }
diff --git a/frontend/src/utils/editor-utilities.js b/frontend/src/utils/editor-utilities.js
index b9a87e18ef..ad2ed937d7 100644
--- a/frontend/src/utils/editor-utilities.js
+++ b/frontend/src/utils/editor-utilities.js
@@ -2,7 +2,7 @@ import { slug, repoID, historyRepoID } from './constants';
 import { seafileAPI } from './seafile-api';
 
 class EditorUtilities {
-  
+
   getFiles() {
     return seafileAPI.listWikiDir(slug, '/').then(items => {
       const files = items.data.dir_file_list.map(item => {
@@ -90,7 +90,7 @@ class EditorUtilities {
   listFileHistoryRecords(filePath, page, per_page) {
     return seafileAPI.listFileHistoryRecords(historyRepoID, filePath, page, per_page);
   }
-  
+
   revertFile(filePath, commitID) {
     return seafileAPI.revertFile(historyRepoID, filePath, commitID);
   }
diff --git a/frontend/src/utils/pinyin-by-unicode.js b/frontend/src/utils/pinyin-by-unicode.js
index a7fbb93de5..bccd5f6b7c 100644
--- a/frontend/src/utils/pinyin-by-unicode.js
+++ b/frontend/src/utils/pinyin-by-unicode.js
@@ -1 +1 @@
-export const strChineseFirstPY = "YDYQSXMWZSSXJBYMGCCZQPSSQBYCDSCDQLDYLYBSSJGYZZJJFKCCLZDHWDWZJLJPFYYNWJJTMYHZWZHFLZPPQHGSCYYYNJQYXXGJHHSDSJNKKTMOMLCRXYPSNQSECCQZGGLLYJLMYZZSECYKYYHQWJSSGGYXYZYJWWKDJHYCHMYXJTLXJYQBYXZLDWRDJRWYSRLDZJPCBZJJBRCFTLECZSTZFXXZHTRQHYBDLYCZSSYMMRFMYQZPWWJJYFCRWFDFZQPYDDWYXKYJAWJFFXYPSFTZYHHYZYSWCJYXSCLCXXWZZXNBGNNXBXLZSZSBSGPYSYZDHMDZBQBZCWDZZYYTZHBTSYYBZGNTNXQYWQSKBPHHLXGYBFMJEBJHHGQTJCYSXSTKZHLYCKGLYSMZXYALMELDCCXGZYRJXSDLTYZCQKCNNJWHJTZZCQLJSTSTBNXBTYXCEQXGKWJYFLZQLYHYXSPSFXLMPBYSXXXYDJCZYLLLSJXFHJXPJBTFFYABYXBHZZBJYZLWLCZGGBTSSMDTJZXPTHYQTGLJSCQFZKJZJQNLZWLSLHDZBWJNCJZYZSQQYCQYRZCJJWYBRTWPYFTWEXCSKDZCTBZHYZZYYJXZCFFZZMJYXXSDZZOTTBZLQWFCKSZSXFYRLNYJMBDTHJXSQQCCSBXYYTSYFBXDZTGBCNSLCYZZPSAZYZZSCJCSHZQYDXLBPJLLMQXTYDZXSQJTZPXLCGLQTZWJBHCTSYJSFXYEJJTLBGXSXJMYJQQPFZASYJNTYDJXKJCDJSZCBARTDCLYJQMWNQNCLLLKBYBZZSYHQQLTWLCCXTXLLZNTYLNEWYZYXCZXXGRKRMTCNDNJTSYYSSDQDGHSDBJGHRWRQLYBGLXHLGTGXBQJDZPYJSJYJCTMRNYMGRZJCZGJMZMGXMPRYXKJNYMSGMZJYMKMFXMLDTGFBHCJHKYLPFMDXLQJJSMTQGZSJLQDLDGJYCALCMZCSDJLLNXDJFFFFJCZFMZFFPFKHKGDPSXKTACJDHHZDDCRRCFQYJKQCCWJDXHWJLYLLZGCFCQDSMLZPBJJPLSBCJGGDCKKDEZSQCCKJGCGKDJTJDLZYCXKLQSCGJCLTFPCQCZGWPJDQYZJJBYJHSJDZWGFSJGZKQCCZLLPSPKJGQJHZZLJPLGJGJJTHJJYJZCZMLZLYQBGJWMLJKXZDZNJQSYZMLJLLJKYWXMKJLHSKJGBMCLYYMKXJQLBMLLKMDXXKWYXYSLMLPSJQQJQXYXFJTJDXMXXLLCXQBSYJBGWYMBGGBCYXPJYGPEPFGDJGBHBNSQJYZJKJKHXQFGQZKFHYGKHDKLLSDJQXPQYKYBNQSXQNSZSWHBSXWHXWBZZXDMNSJBSBKBBZKLYLXGWXDRWYQZMYWSJQLCJXXJXKJEQXSCYETLZHLYYYSDZPAQYZCMTLSHTZCFYZYXYLJSDCJQAGYSLCQLYYYSHMRQQKLDXZSCSSSYDYCJYSFSJBFRSSZQSBXXPXJYSDRCKGJLGDKZJZBDKTCSYQPYHSTCLDJDHMXMCGXYZHJDDTMHLTXZXYLYMOHYJCLTYFBQQXPFBDFHHTKSQHZYYWCNXXCRWHOWGYJLEGWDQCWGFJYCSNTMYTOLBYGWQWESJPWNMLRYDZSZTXYQPZGCWXHNGPYXSHMYQJXZTDPPBFYHZHTJYFDZWKGKZBLDNTSXHQEEGZZYLZMMZYJZGXZXKHKSTXNXXWYLYAPSTHXDWHZYMPXAGKYDXBHNHXKDPJNMYHYLPMGOCSLNZHKXXLPZZLBMLSFBHHGYGYYGGBHSCYAQTYWLXTZQCEZYDQDQMMHTKLLSZHLSJZWFYHQSWSCWLQAZYNYTLSXTHAZNKZZSZZLAXXZWWCTGQQTDDYZTCCHYQZFLXPSLZYGPZSZNGLNDQTBDLXGTCTAJDKYWNSYZLJHHZZCWNYYZYWMHYCHHYXHJKZWSXHZYXLYSKQYSPSLYZWMYPPKBYGLKZHTYXAXQSYSHXASMCHKDSCRSWJPWXSGZJLWWSCHSJHSQNHCSEGNDAQTBAALZZMSSTDQJCJKTSCJAXPLGGXHHGXXZCXPDMMHLDGTYBYSJMXHMRCPXXJZCKZXSHMLQXXTTHXWZFKHCCZDYTCJYXQHLXDHYPJQXYLSYYDZOZJNYXQEZYSQYAYXWYPDGXDDXSPPYZNDLTWRHXYDXZZJHTCXMCZLHPYYYYMHZLLHNXMYLLLMDCPPXHMXDKYCYRDLTXJCHHZZXZLCCLYLNZSHZJZZLNNRLWHYQSNJHXYNTTTKYJPYCHHYEGKCTTWLGQRLGGTGTYGYHPYHYLQYQGCWYQKPYYYTTTTLHYHLLTYTTSPLKYZXGZWGPYDSSZZDQXSKCQNMJJZZBXYQMJRTFFBTKHZKBXLJJKDXJTLBWFZPPTKQTZTGPDGNTPJYFALQMKGXBDCLZFHZCLLLLADPMXDJHLCCLGYHDZFGYDDGCYYFGYDXKSSEBDHYKDKDKHNAXXYBPBYYHXZQGAFFQYJXDMLJCSQZLLPCHBSXGJYNDYBYQSPZWJLZKSDDTACTBXZDYZYPJZQSJNKKTKNJDJGYYPGTLFYQKASDNTCYHBLWDZHBBYDWJRYGKZYHEYYFJMSDTYFZJJHGCXPLXHLDWXXJKYTCYKSSSMTWCTTQZLPBSZDZWZXGZAGYKTYWXLHLSPBCLLOQMMZSSLCMBJCSZZKYDCZJGQQDSMCYTZQQLWZQZXSSFPTTFQMDDZDSHDTDWFHTDYZJYQJQKYPBDJYYXTLJHDRQXXXHAYDHRJLKLYTWHLLRLLRCXYLBWSRSZZSYMKZZHHKYHXKSMDSYDYCJPBZBSQLFCXXXNXKXWYWSDZYQOGGQMMYHCDZTTFJYYBGSTTTYBYKJDHKYXBELHTYPJQNFXFDYKZHQKZBYJTZBXHFDXKDASWTAWAJLDYJSFHBLDNNTNQJTJNCHXFJSRFWHZFMDRYJYJWZPDJKZYJYMPCYZNYNXFBYTFYFWYGDBNZZZDNYTXZEMMQBSQEHXFZMBMFLZZSRXYMJGSXWZJSPRYDJSJGXHJJGLJJYNZZJXHGXKYMLPYYYCXYTWQZSWHWLYRJLPXSLSXMFSWWKLCTNXNYNPSJSZHDZEPTXMYYWXYYSYWLXJQZQXZDCLEEELMCPJPCLWBXSQHFWWTFFJTNQJHJQDXHWLBYZNFJLALKYYJLDXHHYCSTYYWNRJYXYWTRMDRQHWQCMFJDYZMHMYYXJWMYZQZXTLMRSPWWCHAQBXYGZYPXYYRRCLMPYMGKSJSZYSRMYJSNXTPLNBAPPYPYLXYYZKYNLDZYJZCZNNLMZHHARQMPGWQTZMXXMLLHGDZXYHXKYXYCJMFFYYHJFSBSSQLXXNDYCANNMTCJCYPRRNYTYQNYYMBMSXNDLYLYSLJRLXYSXQMLLYZLZJJJKYZZCSFBZXXMSTBJGNXYZHLXNMCWSCYZYFZLXBRNNNYLBNRTGZQYSATSWRYHYJZMZDHZGZDWYBSSCSKXSYHYTXXGCQGXZZSHYXJSCRHMKKBXCZJYJYMKQHZJFNBHMQHYSNJNZYBKNQMCLGQHWLZNZSWXKHLJHYYBQLBFCDSXDLDSPFZPSKJYZWZXZDDXJSMMEGJSCSSMGCLXXKYYYLNYPWWWGYDKZJGGGZGGSYCKNJWNJPCXBJJTQTJWDSSPJXZXNZXUMELPXFSXTLLXCLJXJJLJZXCTPSWXLYDHLYQRWHSYCSQYYBYAYWJJJQFWQCQQCJQGXALDBZZYJGKGXPLTZYFXJLTPADKYQHPMATLCPDCKBMTXYBHKLENXDLEEGQDYMSAWHZMLJTWYGXLYQZLJEEYYBQQFFNLYXRDSCTGJGXYYNKLLYQKCCTLHJLQMKKZGCYYGLLLJDZGYDHZWXPYSJBZKDZGYZZHYWYFQYTYZSZYEZZLYMHJJHTSMQWYZLKYYWZCSRKQYTLTDXWCTYJKLWSQZWBDCQYNCJSRSZJLKCDCDTLZZZACQQZZDDXYPLXZBQJYLZLLLQDDZQJYJYJZYXNYYYNYJXKXDAZWYRDLJYYYRJLXLLDYXJCYWYWNQCCLDDNYYYNYCKCZHXXCCLGZQJGKWPPCQQJYSBZZXYJSQPXJPZBSBDSFNSFPZXHDWZTDWPPTFLZZBZDMYYPQJRSDZSQZSQXBDGCPZSWDWCSQZGMDHZXMWWFYBPDGPHTMJTHZSMMBGZMBZJCFZWFZBBZMQCFMBDMCJXLGPNJBBXGYHYYJGPTZGZMQBQTCGYXJXLWZKYDPDYMGCFTPFXYZTZXDZXTGKMTYBBCLBJASKYTSSQYYMSZXFJEWLXLLSZBQJJJAKLYLXLYCCTSXMCWFKKKBSXLLLLJYXTYLTJYYTDPJHNHNNKBYQNFQYYZBYYESSESSGDYHFHWTCJBSDZZTFDMXHCNJZYMQWSRYJDZJQPDQBBSTJGGFBKJBXTGQHNGWJXJGDLLTHZHHYYYYYYSXWTYYYCCBDBPYPZYCCZYJPZYWCBDLFWZCWJDXXHYHLHWZZXJTCZLCDPXUJCZZZLYXJJTXPHFXWPYWXZPTDZZBDZCYHJHMLXBQXSBYLRDTGJRRCTTTHYTCZWMXFYTWWZCWJWXJYWCSKYBZSCCTZQNHXNWXXKHKFHTSWOCCJYBCMPZZYKBNNZPBZHHZDLSYDDYTYFJPXYNGFXBYQXCBHXCPSXTYZDMKYSNXSXLHKMZXLYHDHKWHXXSSKQYHHCJYXGLHZXCSNHEKDTGZXQYPKDHEXTYKCNYMYYYPKQYYYKXZLTHJQTBYQHXBMYHSQCKWWYLLHCYYLNNEQXQWMCFBDCCMLJGGXDQKTLXKGNQCDGZJWYJJLYHHQTTTNWCHMXCXWHWSZJYDJCCDBQCDGDNYXZTHCQRXCBHZTQCBXWGQWYYBXHMBYMYQTYEXMQKYAQYRGYZSLFYKKQHYSSQYSHJGJCNXKZYCXSBXYXHYYLSTYCXQTHYSMGSCPMMGCCCCCMTZTASMGQZJHKLOSQYLSWTMXSYQKDZLJQQYPLSYCZTCQQPBBQJZCLPKHQZYYXXDTDDTSJCXFFLLCHQXMJLWCJCXTSPYCXNDTJSHJWXDQQJSKXYAMYLSJHMLALYKXCYYDMNMDQMXMCZNNCYBZKKYFLMCHCMLHXRCJJHSYLNMTJZGZGYWJXSRXCWJGJQHQZDQJDCJJZKJKGDZQGJJYJYLXZXXCDQHHHEYTMHLFSBDJSYYSHFYSTCZQLPBDRFRZTZYKYWHSZYQKWDQZRKMSYNBCRXQBJYFAZPZZEDZCJYWBCJWHYJBQSZYWRYSZPTDKZPFPBNZTKLQYHBBZPNPPTYZZYBQNYDCPJMMCYCQMCYFZZDCMNLFPBPLNGQJTBTTNJZPZBBZNJKLJQYLNBZQHKSJZNGGQSZZKYXSHPZSNBCGZKDDZQANZHJKDRTLZLSWJLJZLYWTJNDJZJHXYAYNCBGTZCSSQMNJPJYTYSWXZFKWJQTKHTZPLBHSNJZSYZBWZZZZLSYLSBJHDWWQPSLMMFBJDWAQYZTCJTBNNWZXQXCDSLQGDSDPDZHJTQQPSWLYYJZLGYXYZLCTCBJTKTYCZJTQKBSJLGMGZDMCSGPYNJZYQYYKNXRPWSZXMTNCSZZYXYBYHYZAXYWQCJTLLCKJJTJHGDXDXYQYZZBYWDLWQCGLZGJGQRQZCZSSBCRPCSKYDZNXJSQGXSSJMYDNSTZTPBDLTKZWXQWQTZEXNQCZGWEZKSSBYBRTSSSLCCGBPSZQSZLCCGLLLZXHZQTHCZMQGYZQZNMCOCSZJMMZSQPJYGQLJYJPPLDXRGZYXCCSXHSHGTZNLZWZKJCXTCFCJXLBMQBCZZWPQDNHXLJCTHYZLGYLNLSZZPCXDSCQQHJQKSXZPBAJYEMSMJTZDXLCJYRYYNWJBNGZZTMJXLTBSLYRZPYLSSCNXPHLLHYLLQQZQLXYMRSYCXZLMMCZLTZSDWTJJLLNZGGQXPFSKYGYGHBFZPDKMWGHCXMSGDXJMCJZDYCABXJDLNBCDQYGSKYDQTXDJJYXMSZQAZDZFSLQXYJSJZYLBTXXWXQQZBJZUFBBLYLWDSLJHXJYZJWTDJCZFQZQZZDZSXZZQLZCDZFJHYSPYMPQZMLPPLFFXJJNZZYLSJEYQZFPFZKSYWJJJHRDJZZXTXXGLGHYDXCSKYSWMMZCWYBAZBJKSHFHJCXMHFQHYXXYZFTSJYZFXYXPZLCHMZMBXHZZSXYFYMNCWDABAZLXKTCSHHXKXJJZJSTHYGXSXYYHHHJWXKZXSSBZZWHHHCWTZZZPJXSNXQQJGZYZYWLLCWXZFXXYXYHXMKYYSWSQMNLNAYCYSPMJKHWCQHYLAJJMZXHMMCNZHBHXCLXTJPLTXYJHDYYLTTXFSZHYXXSJBJYAYRSMXYPLCKDUYHLXRLNLLSTYZYYQYGYHHSCCSMZCTZQXKYQFPYYRPFFLKQUNTSZLLZMWWTCQQYZWTLLMLMPWMBZSSTZRBPDDTLQJJBXZCSRZQQYGWCSXFWZLXCCRSZDZMCYGGDZQSGTJSWLJMYMMZYHFBJDGYXCCPSHXNZCSBSJYJGJMPPWAFFYFNXHYZXZYLREMZGZCYZSSZDLLJCSQFNXZKPTXZGXJJGFMYYYSNBTYLBNLHPFZDCYFBMGQRRSSSZXYSGTZRNYDZZCDGPJAFJFZKNZBLCZSZPSGCYCJSZLMLRSZBZZLDLSLLYSXSQZQLYXZLSKKBRXBRBZCYCXZZZEEYFGKLZLYYHGZSGZLFJHGTGWKRAAJYZKZQTSSHJJXDCYZUYJLZYRZDQQHGJZXSSZBYKJPBFRTJXLLFQWJHYLQTYMBLPZDXTZYGBDHZZRBGXHWNJTJXLKSCFSMWLSDQYSJTXKZSCFWJLBXFTZLLJZLLQBLSQMQQCGCZFPBPHZCZJLPYYGGDTGWDCFCZQYYYQYSSCLXZSKLZZZGFFCQNWGLHQYZJJCZLQZZYJPJZZBPDCCMHJGXDQDGDLZQMFGPSYTSDYFWWDJZJYSXYYCZCYHZWPBYKXRYLYBHKJKSFXTZJMMCKHLLTNYYMSYXYZPYJQYCSYCWMTJJKQYRHLLQXPSGTLYYCLJSCPXJYZFNMLRGJJTYZBXYZMSJYJHHFZQMSYXRSZCWTLRTQZSSTKXGQKGSPTGCZNJSJCQCXHMXGGZTQYDJKZDLBZSXJLHYQGGGTHQSZPYHJHHGYYGKGGCWJZZYLCZLXQSFTGZSLLLMLJSKCTBLLZZSZMMNYTPZSXQHJCJYQXYZXZQZCPSHKZZYSXCDFGMWQRLLQXRFZTLYSTCTMJCXJJXHJNXTNRZTZFQYHQGLLGCXSZSJDJLJCYDSJTLNYXHSZXCGJZYQPYLFHDJSBPCCZHJJJQZJQDYBSSLLCMYTTMQTBHJQNNYGKYRQYQMZGCJKPDCGMYZHQLLSLLCLMHOLZGDYYFZSLJCQZLYLZQJESHNYLLJXGJXLYSYYYXNBZLJSSZCQQCJYLLZLTJYLLZLLBNYLGQCHXYYXOXCXQKYJXXXYKLXSXXYQXCYKQXQCSGYXXYQXYGYTQOHXHXPYXXXULCYEYCHZZCBWQBBWJQZSCSZSSLZYLKDESJZWMYMCYTSDSXXSCJPQQSQYLYYZYCMDJDZYWCBTJSYDJKCYDDJLBDJJSODZYSYXQQYXDHHGQQYQHDYXWGMMMAJDYBBBPPBCMUUPLJZSMTXERXJMHQNUTPJDCBSSMSSSTKJTSSMMTRCPLZSZMLQDSDMJMQPNQDXCFYNBFSDQXYXHYAYKQYDDLQYYYSSZBYDSLNTFQTZQPZMCHDHCZCWFDXTMYQSPHQYYXSRGJCWTJTZZQMGWJJTJHTQJBBHWZPXXHYQFXXQYWYYHYSCDYDHHQMNMTMWCPBSZPPZZGLMZFOLLCFWHMMSJZTTDHZZYFFYTZZGZYSKYJXQYJZQBHMBZZLYGHGFMSHPZFZSNCLPBQSNJXZSLXXFPMTYJYGBXLLDLXPZJYZJYHHZCYWHJYLSJEXFSZZYWXKZJLUYDTMLYMQJPWXYHXSKTQJEZRPXXZHHMHWQPWQLYJJQJJZSZCPHJLCHHNXJLQWZJHBMZYXBDHHYPZLHLHLGFWLCHYYTLHJXCJMSCPXSTKPNHQXSRTYXXTESYJCTLSSLSTDLLLWWYHDHRJZSFGXTSYCZYNYHTDHWJSLHTZDQDJZXXQHGYLTZPHCSQFCLNJTCLZPFSTPDYNYLGMJLLYCQHYSSHCHYLHQYQTMZYPBYWRFQYKQSYSLZDQJMPXYYSSRHZJNYWTQDFZBWWTWWRXCWHGYHXMKMYYYQMSMZHNGCEPMLQQMTCWCTMMPXJPJJHFXYYZSXZHTYBMSTSYJTTQQQYYLHYNPYQZLCYZHZWSMYLKFJXLWGXYPJYTYSYXYMZCKTTWLKSMZSYLMPWLZWXWQZSSAQSYXYRHSSNTSRAPXCPWCMGDXHXZDZYFJHGZTTSBJHGYZSZYSMYCLLLXBTYXHBBZJKSSDMALXHYCFYGMQYPJYCQXJLLLJGSLZGQLYCJCCZOTYXMTMTTLLWTGPXYMZMKLPSZZZXHKQYSXCTYJZYHXSHYXZKXLZWPSQPYHJWPJPWXQQYLXSDHMRSLZZYZWTTCYXYSZZSHBSCCSTPLWSSCJCHNLCGCHSSPHYLHFHHXJSXYLLNYLSZDHZXYLSXLWZYKCLDYAXZCMDDYSPJTQJZLNWQPSSSWCTSTSZLBLNXSMNYYMJQBQHRZWTYYDCHQLXKPZWBGQYBKFCMZWPZLLYYLSZYDWHXPSBCMLJBSCGBHXLQHYRLJXYSWXWXZSLDFHLSLYNJLZYFLYJYCDRJLFSYZFSLLCQYQFGJYHYXZLYLMSTDJCYHBZLLNWLXXYGYYHSMGDHXXHHLZZJZXCZZZCYQZFNGWPYLCPKPYYPMCLQKDGXZGGWQBDXZZKZFBXXLZXJTPJPTTBYTSZZDWSLCHZHSLTYXHQLHYXXXYYZYSWTXZKHLXZXZPYHGCHKCFSYHUTJRLXFJXPTZTWHPLYXFCRHXSHXKYXXYHZQDXQWULHYHMJTBFLKHTXCWHJFWJCFPQRYQXCYYYQYGRPYWSGSUNGWCHKZDXYFLXXHJJBYZWTSXXNCYJJYMSWZJQRMHXZWFQSYLZJZGBHYNSLBGTTCSYBYXXWXYHXYYXNSQYXMQYWRGYQLXBBZLJSYLPSYTJZYHYZAWLRORJMKSCZJXXXYXCHDYXRYXXJDTSQFXLYLTSFFYXLMTYJMJUYYYXLTZCSXQZQHZXLYYXZHDNBRXXXJCTYHLBRLMBRLLAXKYLLLJLYXXLYCRYLCJTGJCMTLZLLCYZZPZPCYAWHJJFYBDYYZSMPCKZDQYQPBPCJPDCYZMDPBCYYDYCNNPLMTMLRMFMMGWYZBSJGYGSMZQQQZTXMKQWGXLLPJGZBQCDJJJFPKJKCXBLJMSWMDTQJXLDLPPBXCWRCQFBFQJCZAHZGMYKPHYYHZYKNDKZMBPJYXPXYHLFPNYYGXJDBKXNXHJMZJXSTRSTLDXSKZYSYBZXJLXYSLBZYSLHXJPFXPQNBYLLJQKYGZMCYZZYMCCSLCLHZFWFWYXZMWSXTYNXJHPYYMCYSPMHYSMYDYSHQYZCHMJJMZCAAGCFJBBHPLYZYLXXSDJGXDHKXXTXXNBHRMLYJSLTXMRHNLXQJXYZLLYSWQGDLBJHDCGJYQYCMHWFMJYBMBYJYJWYMDPWHXQLDYGPDFXXBCGJSPCKRSSYZJMSLBZZJFLJJJLGXZGYXYXLSZQYXBEXYXHGCXBPLDYHWETTWWCJMBTXCHXYQXLLXFLYXLLJLSSFWDPZSMYJCLMWYTCZPCHQEKCQBWLCQYDPLQPPQZQFJQDJHYMMCXTXDRMJWRHXCJZYLQXDYYNHYYHRSLSRSYWWZJYMTLTLLGTQCJZYABTCKZCJYCCQLJZQXALMZYHYWLWDXZXQDLLQSHGPJFJLJHJABCQZDJGTKHSSTCYJLPSWZLXZXRWGLDLZRLZXTGSLLLLZLYXXWGDZYGBDPHZPBRLWSXQBPFDWOFMWHLYPCBJCCLDMBZPBZZLCYQXLDOMZBLZWPDWYYGDSTTHCSQSCCRSSSYSLFYBFNTYJSZDFNDPDHDZZMBBLSLCMYFFGTJJQWFTMTPJWFNLBZCMMJTGBDZLQLPYFHYYMJYLSDCHDZJWJCCTLJCLDTLJJCPDDSQDSSZYBNDBJLGGJZXSXNLYCYBJXQYCBYLZCFZPPGKCXZDZFZTJJFJSJXZBNZYJQTTYJYHTYCZHYMDJXTTMPXSPLZCDWSLSHXYPZGTFMLCJTYCBPMGDKWYCYZCDSZZYHFLYCTYGWHKJYYLSJCXGYWJCBLLCSNDDBTZBSCLYZCZZSSQDLLMQYYHFSLQLLXFTYHABXGWNYWYYPLLSDLDLLBJCYXJZMLHLJDXYYQYTDLLLBUGBFDFBBQJZZMDPJHGCLGMJJPGAEHHBWCQXAXHHHZCHXYPHJAXHLPHJPGPZJQCQZGJJZZUZDMQYYBZZPHYHYBWHAZYJHYKFGDPFQSDLZMLJXKXGALXZDAGLMDGXMWZQYXXDXXPFDMMSSYMPFMDMMKXKSYZYSHDZKXSYSMMZZZMSYDNZZCZXFPLSTMZDNMXCKJMZTYYMZMZZMSXHHDCZJEMXXKLJSTLWLSQLYJZLLZJSSDPPMHNLZJCZYHMXXHGZCJMDHXTKGRMXFWMCGMWKDTKSXQMMMFZZYDKMSCLCMPCGMHSPXQPZDSSLCXKYXTWLWJYAHZJGZQMCSNXYYMMPMLKJXMHLMLQMXCTKZMJQYSZJSYSZHSYJZJCDAJZYBSDQJZGWZQQXFKDMSDJLFWEHKZQKJPEYPZYSZCDWYJFFMZZYLTTDZZEFMZLBNPPLPLPEPSZALLTYLKCKQZKGENQLWAGYXYDPXLHSXQQWQCQXQCLHYXXMLYCCWLYMQYSKGCHLCJNSZKPYZKCQZQLJPDMDZHLASXLBYDWQLWDNBQCRYDDZTJYBKBWSZDXDTNPJDTCTQDFXQQMGNXECLTTBKPWSLCTYQLPWYZZKLPYGZCQQPLLKCCYLPQMZCZQCLJSLQZDJXLDDHPZQDLJJXZQDXYZQKZLJCYQDYJPPYPQYKJYRMPCBYMCXKLLZLLFQPYLLLMBSGLCYSSLRSYSQTMXYXZQZFDZUYSYZTFFMZZSMZQHZSSCCMLYXWTPZGXZJGZGSJSGKDDHTQGGZLLBJDZLCBCHYXYZHZFYWXYZYMSDBZZYJGTSMTFXQYXQSTDGSLNXDLRYZZLRYYLXQHTXSRTZNGZXBNQQZFMYKMZJBZYMKBPNLYZPBLMCNQYZZZSJZHJCTZKHYZZJRDYZHNPXGLFZTLKGJTCTSSYLLGZRZBBQZZKLPKLCZYSSUYXBJFPNJZZXCDWXZYJXZZDJJKGGRSRJKMSMZJLSJYWQSKYHQJSXPJZZZLSNSHRNYPZTWCHKLPSRZLZXYJQXQKYSJYCZTLQZYBBYBWZPQDWWYZCYTJCJXCKCWDKKZXSGKDZXWWYYJQYYTCYTDLLXWKCZKKLCCLZCQQDZLQLCSFQCHQHSFSMQZZLNBJJZBSJHTSZDYSJQJPDLZCDCWJKJZZLPYCGMZWDJJBSJQZSYZYHHXJPBJYDSSXDZNCGLQMBTSFSBPDZDLZNFGFJGFSMPXJQLMBLGQCYYXBQKDJJQYRFKZTJDHCZKLBSDZCFJTPLLJGXHYXZCSSZZXSTJYGKGCKGYOQXJPLZPBPGTGYJZGHZQZZLBJLSQFZGKQQJZGYCZBZQTLDXRJXBSXXPZXHYZYCLWDXJJHXMFDZPFZHQHQMQGKSLYHTYCGFRZGNQXCLPDLBZCSCZQLLJBLHBZCYPZZPPDYMZZSGYHCKCPZJGSLJLNSCDSLDLXBMSTLDDFJMKDJDHZLZXLSZQPQPGJLLYBDSZGQLBZLSLKYYHZTTNTJYQTZZPSZQZTLLJTYYLLQLLQYZQLBDZLSLYYZYMDFSZSNHLXZNCZQZPBWSKRFBSYZMTHBLGJPMCZZLSTLXSHTCSYZLZBLFEQHLXFLCJLYLJQCBZLZJHHSSTBRMHXZHJZCLXFNBGXGTQJCZTMSFZKJMSSNXLJKBHSJXNTNLZDNTLMSJXGZJYJCZXYJYJWRWWQNZTNFJSZPZSHZJFYRDJSFSZJZBJFZQZZHZLXFYSBZQLZSGYFTZDCSZXZJBQMSZKJRHYJZCKMJKHCHGTXKXQGLXPXFXTRTYLXJXHDTSJXHJZJXZWZLCQSBTXWXGXTXXHXFTSDKFJHZYJFJXRZSDLLLTQSQQZQWZXSYQTWGWBZCGZLLYZBCLMQQTZHZXZXLJFRMYZFLXYSQXXJKXRMQDZDMMYYBSQBHGZMWFWXGMXLZPYYTGZYCCDXYZXYWGSYJYZNBHPZJSQSYXSXRTFYZGRHZTXSZZTHCBFCLSYXZLZQMZLMPLMXZJXSFLBYZMYQHXJSXRXSQZZZSSLYFRCZJRCRXHHZXQYDYHXSJJHZCXZBTYNSYSXJBQLPXZQPYMLXZKYXLXCJLCYSXXZZLXDLLLJJYHZXGYJWKJRWYHCPSGNRZLFZWFZZNSXGXFLZSXZZZBFCSYJDBRJKRDHHGXJLJJTGXJXXSTJTJXLYXQFCSGSWMSBCTLQZZWLZZKXJMLTMJYHSDDBXGZHDLBMYJFRZFSGCLYJBPMLYSMSXLSZJQQHJZFXGFQFQBPXZGYYQXGZTCQWYLTLGWSGWHRLFSFGZJMGMGBGTJFSYZZGZYZAFLSSPMLPFLCWBJZCLJJMZLPJJLYMQDMYYYFBGYGYZMLYZDXQYXRQQQHSYYYQXYLJTYXFSFSLLGNQCYHYCWFHCCCFXPYLYPLLZYXXXXXKQHHXSHJZCFZSCZJXCPZWHHHHHAPYLQALPQAFYHXDYLUKMZQGGGDDESRNNZLTZGCHYPPYSQJJHCLLJTOLNJPZLJLHYMHEYDYDSQYCDDHGZUNDZCLZYZLLZNTNYZGSLHSLPJJBDGWXPCDUTJCKLKCLWKLLCASSTKZZDNQNTTLYYZSSYSSZZRYLJQKCQDHHCRXRZYDGRGCWCGZQFFFPPJFZYNAKRGYWYQPQXXFKJTSZZXSWZDDFBBXTBGTZKZNPZZPZXZPJSZBMQHKCYXYLDKLJNYPKYGHGDZJXXEAHPNZKZTZCMXCXMMJXNKSZQNMNLWBWWXJKYHCPSTMCSQTZJYXTPCTPDTNNPGLLLZSJLSPBLPLQHDTNJNLYYRSZFFJFQWDPHZDWMRZCCLODAXNSSNYZRESTYJWJYJDBCFXNMWTTBYLWSTSZGYBLJPXGLBOCLHPCBJLTMXZLJYLZXCLTPNCLCKXTPZJSWCYXSFYSZDKNTLBYJCYJLLSTGQCBXRYZXBXKLYLHZLQZLNZCXWJZLJZJNCJHXMNZZGJZZXTZJXYCYYCXXJYYXJJXSSSJSTSSTTPPGQTCSXWZDCSYFPTFBFHFBBLZJCLZZDBXGCXLQPXKFZFLSYLTUWBMQJHSZBMDDBCYSCCLDXYCDDQLYJJWMQLLCSGLJJSYFPYYCCYLTJANTJJPWYCMMGQYYSXDXQMZHSZXPFTWWZQSWQRFKJLZJQQYFBRXJHHFWJJZYQAZMYFRHCYYBYQWLPEXCCZSTYRLTTDMQLYKMBBGMYYJPRKZNPBSXYXBHYZDJDNGHPMFSGMWFZMFQMMBCMZZCJJLCNUXYQLMLRYGQZCYXZLWJGCJCGGMCJNFYZZJHYCPRRCMTZQZXHFQGTJXCCJEAQCRJYHPLQLSZDJRBCQHQDYRHYLYXJSYMHZYDWLDFRYHBPYDTSSCNWBXGLPZMLZZTQSSCPJMXXYCSJYTYCGHYCJWYRXXLFEMWJNMKLLSWTXHYYYNCMMCWJDQDJZGLLJWJRKHPZGGFLCCSCZMCBLTBHBQJXQDSPDJZZGKGLFQYWBZYZJLTSTDHQHCTCBCHFLQMPWDSHYYTQWCNZZJTLBYMBPDYYYXSQKXWYYFLXXNCWCXYPMAELYKKJMZZZBRXYYQJFLJPFHHHYTZZXSGQQMHSPGDZQWBWPJHZJDYSCQWZKTXXSQLZYYMYSDZGRXCKKUJLWPYSYSCSYZLRMLQSYLJXBCXTLWDQZPCYCYKPPPNSXFYZJJRCEMHSZMSXLXGLRWGCSTLRSXBZGBZGZTCPLUJLSLYLYMTXMTZPALZXPXJTJWTCYYZLBLXBZLQMYLXPGHDSLSSDMXMBDZZSXWHAMLCZCPJMCNHJYSNSYGCHSKQMZZQDLLKABLWJXSFMOCDXJRRLYQZKJMYBYQLYHETFJZFRFKSRYXFJTWDSXXSYSQJYSLYXWJHSNLXYYXHBHAWHHJZXWMYLJCSSLKYDZTXBZSYFDXGXZJKHSXXYBSSXDPYNZWRPTQZCZENYGCXQFJYKJBZMLJCMQQXUOXSLYXXLYLLJDZBTYMHPFSTTQQWLHOKYBLZZALZXQLHZWRRQHLSTMYPYXJJXMQSJFNBXYXYJXXYQYLTHYLQYFMLKLJTMLLHSZWKZHLJMLHLJKLJSTLQXYLMBHHLNLZXQJHXCFXXLHYHJJGBYZZKBXSCQDJQDSUJZYYHZHHMGSXCSYMXFEBCQWWRBPYYJQTYZCYQYQQZYHMWFFHGZFRJFCDPXNTQYZPDYKHJLFRZXPPXZDBBGZQSTLGDGYLCQMLCHHMFYWLZYXKJLYPQHSYWMQQGQZMLZJNSQXJQSYJYCBEHSXFSZPXZWFLLBCYYJDYTDTHWZSFJMQQYJLMQXXLLDTTKHHYBFPWTYYSQQWNQWLGWDEBZWCMYGCULKJXTMXMYJSXHYBRWFYMWFRXYQMXYSZTZZTFYKMLDHQDXWYYNLCRYJBLPSXCXYWLSPRRJWXHQYPHTYDNXHHMMYWYTZCSQMTSSCCDALWZTCPQPYJLLQZYJSWXMZZMMYLMXCLMXCZMXMZSQTZPPQQBLPGXQZHFLJJHYTJSRXWZXSCCDLXTYJDCQJXSLQYCLZXLZZXMXQRJMHRHZJBHMFLJLMLCLQNLDXZLLLPYPSYJYSXCQQDCMQJZZXHNPNXZMEKMXHYKYQLXSXTXJYYHWDCWDZHQYYBGYBCYSCFGPSJNZDYZZJZXRZRQJJYMCANYRJTLDPPYZBSTJKXXZYPFDWFGZZRPYMTNGXZQBYXNBUFNQKRJQZMJEGRZGYCLKXZDSKKNSXKCLJSPJYYZLQQJYBZSSQLLLKJXTBKTYLCCDDBLSPPFYLGYDTZJYQGGKQTTFZXBDKTYYHYBBFYTYYBCLPDYTGDHRYRNJSPTCSNYJQHKLLLZSLYDXXWBCJQSPXBPJZJCJDZFFXXBRMLAZHCSNDLBJDSZBLPRZTSWSBXBCLLXXLZDJZSJPYLYXXYFTFFFBHJJXGBYXJPMMMPSSJZJMTLYZJXSWXTYLEDQPJMYGQZJGDJLQJWJQLLSJGJGYGMSCLJJXDTYGJQJQJCJZCJGDZZSXQGSJGGCXHQXSNQLZZBXHSGZXCXYLJXYXYYDFQQJHJFXDHCTXJYRXYSQTJXYEFYYSSYYJXNCYZXFXMSYSZXYYSCHSHXZZZGZZZGFJDLTYLNPZGYJYZYYQZPBXQBDZTZCZYXXYHHSQXSHDHGQHJHGYWSZTMZMLHYXGEBTYLZKQWYTJZRCLEKYSTDBCYKQQSAYXCJXWWGSBHJYZYDHCSJKQCXSWXFLTYNYZPZCCZJQTZWJQDZZZQZLJJXLSBHPYXXPSXSHHEZTXFPTLQYZZXHYTXNCFZYYHXGNXMYWXTZSJPTHHGYMXMXQZXTSBCZYJYXXTYYZYPCQLMMSZMJZZLLZXGXZAAJZYXJMZXWDXZSXZDZXLEYJJZQBHZWZZZQTZPSXZTDSXJJJZNYAZPHXYYSRNQDTHZHYYKYJHDZXZLSWCLYBZYECWCYCRYLCXNHZYDZYDYJDFRJJHTRSQTXYXJRJHOJYNXELXSFSFJZGHPZSXZSZDZCQZBYYKLSGSJHCZSHDGQGXYZGXCHXZJWYQWGYHKSSEQZZNDZFKWYSSTCLZSTSYMCDHJXXYWEYXCZAYDMPXMDSXYBSQMJMZJMTZQLPJYQZCGQHXJHHLXXHLHDLDJQCLDWBSXFZZYYSCHTYTYYBHECXHYKGJPXHHYZJFXHWHBDZFYZBCAPNPGNYDMSXHMMMMAMYNBYJTMPXYYMCTHJBZYFCGTYHWPHFTWZZEZSBZEGPFMTSKFTYCMHFLLHGPZJXZJGZJYXZSBBQSCZZLZCCSTPGXMJSFTCCZJZDJXCYBZLFCJSYZFGSZLYBCWZZBYZDZYPSWYJZXZBDSYUXLZZBZFYGCZXBZHZFTPBGZGEJBSTGKDMFHYZZJHZLLZZGJQZLSFDJSSCBZGPDLFZFZSZYZYZSYGCXSNXXCHCZXTZZLJFZGQSQYXZJQDCCZTQCDXZJYQJQCHXZTDLGSCXZSYQJQTZWLQDQZTQCHQQJZYEZZZPBWKDJFCJPZTYPQYQTTYNLMBDKTJZPQZQZZFPZSBNJLGYJDXJDZZKZGQKXDLPZJTCJDQBXDJQJSTCKNXBXZMSLYJCQMTJQWWCJQNJNLLLHJCWQTBZQYDZCZPZZDZYDDCYZZZCCJTTJFZDPRRTZTJDCQTQZDTJNPLZBCLLCTZSXKJZQZPZLBZRBTJDCXFCZDBCCJJLTQQPLDCGZDBBZJCQDCJWYNLLZYZCCDWLLXWZLXRXNTQQCZXKQLSGDFQTDDGLRLAJJTKUYMKQLLTZYTDYYCZGJWYXDXFRSKSTQTENQMRKQZHHQKDLDAZFKYPBGGPZREBZZYKZZSPEGJXGYKQZZZSLYSYYYZWFQZYLZZLZHWCHKYPQGNPGBLPLRRJYXCCSYYHSFZFYBZYYTGZXYLXCZWXXZJZBLFFLGSKHYJZEYJHLPLLLLCZGXDRZELRHGKLZZYHZLYQSZZJZQLJZFLNBHGWLCZCFJYSPYXZLZLXGCCPZBLLCYBBBBUBBCBPCRNNZCZYRBFSRLDCGQYYQXYGMQZWTZYTYJXYFWTEHZZJYWLCCNTZYJJZDEDPZDZTSYQJHDYMBJNYJZLXTSSTPHNDJXXBYXQTZQDDTJTDYYTGWSCSZQFLSHLGLBCZPHDLYZJYCKWTYTYLBNYTSDSYCCTYSZYYEBHEXHQDTWNYGYCLXTSZYSTQMYGZAZCCSZZDSLZCLZRQXYYELJSBYMXSXZTEMBBLLYYLLYTDQYSHYMRQWKFKBFXNXSBYCHXBWJYHTQBPBSBWDZYLKGZSKYHXQZJXHXJXGNLJKZLYYCDXLFYFGHLJGJYBXQLYBXQPQGZTZPLNCYPXDJYQYDYMRBESJYYHKXXSTMXRCZZYWXYQYBMCLLYZHQYZWQXDBXBZWZMSLPDMYSKFMZKLZCYQYCZLQXFZZYDQZPZYGYJYZMZXDZFYFYTTQTZHGSPCZMLCCYTZXJCYTJMKSLPZHYSNZLLYTPZCTZZCKTXDHXXTQCYFKSMQCCYYAZHTJPCYLZLYJBJXTPNYLJYYNRXSYLMMNXJSMYBCSYSYLZYLXJJQYLDZLPQBFZZBLFNDXQKCZFYWHGQMRDSXYCYTXNQQJZYYPFZXDYZFPRXEJDGYQBXRCNFYYQPGHYJDYZXGRHTKYLNWDZNTSMPKLBTHBPYSZBZTJZSZZJTYYXZPHSSZZBZCZPTQFZMYFLYPYBBJQXZMXXDJMTSYSKKBJZXHJCKLPSMKYJZCXTMLJYXRZZQSLXXQPYZXMKYXXXJCLJPRMYYGADYSKQLSNDHYZKQXZYZTCGHZTLMLWZYBWSYCTBHJHJFCWZTXWYTKZLXQSHLYJZJXTMPLPYCGLTBZZTLZJCYJGDTCLKLPLLQPJMZPAPXYZLKKTKDZCZZBNZDYDYQZJYJGMCTXLTGXSZLMLHBGLKFWNWZHDXUHLFMKYSLGXDTWWFRJEJZTZHYDXYKSHWFZCQSHKTMQQHTZHYMJDJSKHXZJZBZZXYMPAGQMSTPXLSKLZYNWRTSQLSZBPSPSGZWYHTLKSSSWHZZLYYTNXJGMJSZSUFWNLSOZTXGXLSAMMLBWLDSZYLAKQCQCTMYCFJBSLXCLZZCLXXKSBZQCLHJPSQPLSXXCKSLNHPSFQQYTXYJZLQLDXZQJZDYYDJNZPTUZDSKJFSLJHYLZSQZLBTXYDGTQFDBYAZXDZHZJNHHQBYKNXJJQCZMLLJZKSPLDYCLBBLXKLELXJLBQYCXJXGCNLCQPLZLZYJTZLJGYZDZPLTQCSXFDMNYCXGBTJDCZNBGBQYQJWGKFHTNPYQZQGBKPBBYZMTJDYTBLSQMPSXTBNPDXKLEMYYCJYNZCTLDYKZZXDDXHQSHDGMZSJYCCTAYRZLPYLTLKXSLZCGGEXCLFXLKJRTLQJAQZNCMBYDKKCXGLCZJZXJHPTDJJMZQYKQSECQZDSHHADMLZFMMZBGNTJNNLGBYJBRBTMLBYJDZXLCJLPLDLPCQDHLXZLYCBLCXZZJADJLNZMMSSSMYBHBSQKBHRSXXJMXSDZNZPXLGBRHWGGFCXGMSKLLTSJYYCQLTSKYWYYHYWXBXQYWPYWYKQLSQPTNTKHQCWDQKTWPXXHCPTHTWUMSSYHBWCRWXHJMKMZNGWTMLKFGHKJYLSYYCXWHYECLQHKQHTTQKHFZLDXQWYZYYDESBPKYRZPJFYYZJCEQDZZDLATZBBFJLLCXDLMJSSXEGYGSJQXCWBXSSZPDYZCXDNYXPPZYDLYJCZPLTXLSXYZYRXCYYYDYLWWNZSAHJSYQYHGYWWAXTJZDAXYSRLTDPSSYYFNEJDXYZHLXLLLZQZSJNYQYQQXYJGHZGZCYJCHZLYCDSHWSHJZYJXCLLNXZJJYYXNFXMWFPYLCYLLABWDDHWDXJMCXZTZPMLQZHSFHZYNZTLLDYWLSLXHYMMYLMBWWKYXYADTXYLLDJPYBPWUXJMWMLLSAFDLLYFLBHHHBQQLTZJCQJLDJTFFKMMMBYTHYGDCQRDDWRQJXNBYSNWZDBYYTBJHPYBYTTJXAAHGQDQTMYSTQXKBTZPKJLZRBEQQSSMJJBDJOTGTBXPGBKTLHQXJJJCTHXQDWJLWRFWQGWSHCKRYSWGFTGYGBXSDWDWRFHWYTJJXXXJYZYSLPYYYPAYXHYDQKXSHXYXGSKQHYWFDDDPPLCJLQQEEWXKSYYKDYPLTJTHKJLTCYYHHJTTPLTZZCDLTHQKZXQYSTEEYWYYZYXXYYSTTJKLLPZMCYHQGXYHSRMBXPLLNQYDQHXSXXWGDQBSHYLLPJJJTHYJKYPPTHYYKTYEZYENMDSHLCRPQFDGFXZPSFTLJXXJBSWYYSKSFLXLPPLBBBLBSFXFYZBSJSSYLPBBFFFFSSCJDSTZSXZRYYSYFFSYZYZBJTBCTSBSDHRTJJBYTCXYJEYLXCBNEBJDSYXYKGSJZBXBYTFZWGENYHHTHZHHXFWGCSTBGXKLSXYWMTMBYXJSTZSCDYQRCYTWXZFHMYMCXLZNSDJTTTXRYCFYJSBSDYERXJLJXBBDEYNJGHXGCKGSCYMBLXJMSZNSKGXFBNBPTHFJAAFXYXFPXMYPQDTZCXZZPXRSYWZDLYBBKTYQPQJPZYPZJZNJPZJLZZFYSBTTSLMPTZRTDXQSJEHBZYLZDHLJSQMLHTXTJECXSLZZSPKTLZKQQYFSYGYWPCPQFHQHYTQXZKRSGTTSQCZLPTXCDYYZXSQZSLXLZMYCPCQBZYXHBSXLZDLTCDXTYLZJYYZPZYZLTXJSJXHLPMYTXCQRBLZSSFJZZTNJYTXMYJHLHPPLCYXQJQQKZZSCPZKSWALQSBLCCZJSXGWWWYGYKTJBBZTDKHXHKGTGPBKQYSLPXPJCKBMLLXDZSTBKLGGQKQLSBKKTFXRMDKBFTPZFRTBBRFERQGXYJPZSSTLBZTPSZQZSJDHLJQLZBPMSMMSXLQQNHKNBLRDDNXXDHDDJCYYGYLXGZLXSYGMQQGKHBPMXYXLYTQWLWGCPBMQXCYZYDRJBHTDJYHQSHTMJSBYPLWHLZFFNYPMHXXHPLTBQPFBJWQDBYGPNZTPFZJGSDDTQSHZEAWZZYLLTYYBWJKXXGHLFKXDJTMSZSQYNZGGSWQSPHTLSSKMCLZXYSZQZXNCJDQGZDLFNYKLJCJLLZLMZZNHYDSSHTHZZLZZBBHQZWWYCRZHLYQQJBEYFXXXWHSRXWQHWPSLMSSKZTTYGYQQWRSLALHMJTQJSMXQBJJZJXZYZKXBYQXBJXSHZTSFJLXMXZXFGHKZSZGGYLCLSARJYHSLLLMZXELGLXYDJYTLFBHBPNLYZFBBHPTGJKWETZHKJJXZXXGLLJLSTGSHJJYQLQZFKCGNNDJSSZFDBCTWWSEQFHQJBSAQTGYPQLBXBMMYWXGSLZHGLZGQYFLZBYFZJFRYSFMBYZHQGFWZSYFYJJPHZBYYZFFWODGRLMFTWLBZGYCQXCDJYGZYYYYTYTYDWEGAZYHXJLZYYHLRMGRXXZCLHNELJJTJTPWJYBJJBXJJTJTEEKHWSLJPLPSFYZPQQBDLQJJTYYQLYZKDKSQJYYQZLDQTGJQYZJSUCMRYQTHTEJMFCTYHYPKMHYZWJDQFHYYXWSHCTXRLJHQXHCCYYYJLTKTTYTMXGTCJTZAYYOCZLYLBSZYWJYTSJYHBYSHFJLYGJXXTMZYYLTXXYPZLXYJZYZYYPNHMYMDYYLBLHLSYYQQLLNJJYMSOYQBZGDLYXYLCQYXTSZEGXHZGLHWBLJHEYXTWQMAKBPQCGYSHHEGQCMWYYWLJYJHYYZLLJJYLHZYHMGSLJLJXCJJYCLYCJPCPZJZJMMYLCQLNQLJQJSXYJMLSZLJQLYCMMHCFMMFPQQMFYLQMCFFQMMMMHMZNFHHJGTTHHKHSLNCHHYQDXTMMQDCYZYXYQMYQYLTDCYYYZAZZCYMZYDLZFFFMMYCQZWZZMABTBYZTDMNZZGGDFTYPCGQYTTSSFFWFDTZQSSYSTWXJHXYTSXXYLBYQHWWKXHZXWZNNZZJZJJQJCCCHYYXBZXZCYZTLLCQXYNJYCYYCYNZZQYYYEWYCZDCJYCCHYJLBTZYYCQWMPWPYMLGKDLDLGKQQBGYCHJXY";
+export const strChineseFirstPY = 'YDYQSXMWZSSXJBYMGCCZQPSSQBYCDSCDQLDYLYBSSJGYZZJJFKCCLZDHWDWZJLJPFYYNWJJTMYHZWZHFLZPPQHGSCYYYNJQYXXGJHHSDSJNKKTMOMLCRXYPSNQSECCQZGGLLYJLMYZZSECYKYYHQWJSSGGYXYZYJWWKDJHYCHMYXJTLXJYQBYXZLDWRDJRWYSRLDZJPCBZJJBRCFTLECZSTZFXXZHTRQHYBDLYCZSSYMMRFMYQZPWWJJYFCRWFDFZQPYDDWYXKYJAWJFFXYPSFTZYHHYZYSWCJYXSCLCXXWZZXNBGNNXBXLZSZSBSGPYSYZDHMDZBQBZCWDZZYYTZHBTSYYBZGNTNXQYWQSKBPHHLXGYBFMJEBJHHGQTJCYSXSTKZHLYCKGLYSMZXYALMELDCCXGZYRJXSDLTYZCQKCNNJWHJTZZCQLJSTSTBNXBTYXCEQXGKWJYFLZQLYHYXSPSFXLMPBYSXXXYDJCZYLLLSJXFHJXPJBTFFYABYXBHZZBJYZLWLCZGGBTSSMDTJZXPTHYQTGLJSCQFZKJZJQNLZWLSLHDZBWJNCJZYZSQQYCQYRZCJJWYBRTWPYFTWEXCSKDZCTBZHYZZYYJXZCFFZZMJYXXSDZZOTTBZLQWFCKSZSXFYRLNYJMBDTHJXSQQCCSBXYYTSYFBXDZTGBCNSLCYZZPSAZYZZSCJCSHZQYDXLBPJLLMQXTYDZXSQJTZPXLCGLQTZWJBHCTSYJSFXYEJJTLBGXSXJMYJQQPFZASYJNTYDJXKJCDJSZCBARTDCLYJQMWNQNCLLLKBYBZZSYHQQLTWLCCXTXLLZNTYLNEWYZYXCZXXGRKRMTCNDNJTSYYSSDQDGHSDBJGHRWRQLYBGLXHLGTGXBQJDZPYJSJYJCTMRNYMGRZJCZGJMZMGXMPRYXKJNYMSGMZJYMKMFXMLDTGFBHCJHKYLPFMDXLQJJSMTQGZSJLQDLDGJYCALCMZCSDJLLNXDJFFFFJCZFMZFFPFKHKGDPSXKTACJDHHZDDCRRCFQYJKQCCWJDXHWJLYLLZGCFCQDSMLZPBJJPLSBCJGGDCKKDEZSQCCKJGCGKDJTJDLZYCXKLQSCGJCLTFPCQCZGWPJDQYZJJBYJHSJDZWGFSJGZKQCCZLLPSPKJGQJHZZLJPLGJGJJTHJJYJZCZMLZLYQBGJWMLJKXZDZNJQSYZMLJLLJKYWXMKJLHSKJGBMCLYYMKXJQLBMLLKMDXXKWYXYSLMLPSJQQJQXYXFJTJDXMXXLLCXQBSYJBGWYMBGGBCYXPJYGPEPFGDJGBHBNSQJYZJKJKHXQFGQZKFHYGKHDKLLSDJQXPQYKYBNQSXQNSZSWHBSXWHXWBZZXDMNSJBSBKBBZKLYLXGWXDRWYQZMYWSJQLCJXXJXKJEQXSCYETLZHLYYYSDZPAQYZCMTLSHTZCFYZYXYLJSDCJQAGYSLCQLYYYSHMRQQKLDXZSCSSSYDYCJYSFSJBFRSSZQSBXXPXJYSDRCKGJLGDKZJZBDKTCSYQPYHSTCLDJDHMXMCGXYZHJDDTMHLTXZXYLYMOHYJCLTYFBQQXPFBDFHHTKSQHZYYWCNXXCRWHOWGYJLEGWDQCWGFJYCSNTMYTOLBYGWQWESJPWNMLRYDZSZTXYQPZGCWXHNGPYXSHMYQJXZTDPPBFYHZHTJYFDZWKGKZBLDNTSXHQEEGZZYLZMMZYJZGXZXKHKSTXNXXWYLYAPSTHXDWHZYMPXAGKYDXBHNHXKDPJNMYHYLPMGOCSLNZHKXXLPZZLBMLSFBHHGYGYYGGBHSCYAQTYWLXTZQCEZYDQDQMMHTKLLSZHLSJZWFYHQSWSCWLQAZYNYTLSXTHAZNKZZSZZLAXXZWWCTGQQTDDYZTCCHYQZFLXPSLZYGPZSZNGLNDQTBDLXGTCTAJDKYWNSYZLJHHZZCWNYYZYWMHYCHHYXHJKZWSXHZYXLYSKQYSPSLYZWMYPPKBYGLKZHTYXAXQSYSHXASMCHKDSCRSWJPWXSGZJLWWSCHSJHSQNHCSEGNDAQTBAALZZMSSTDQJCJKTSCJAXPLGGXHHGXXZCXPDMMHLDGTYBYSJMXHMRCPXXJZCKZXSHMLQXXTTHXWZFKHCCZDYTCJYXQHLXDHYPJQXYLSYYDZOZJNYXQEZYSQYAYXWYPDGXDDXSPPYZNDLTWRHXYDXZZJHTCXMCZLHPYYYYMHZLLHNXMYLLLMDCPPXHMXDKYCYRDLTXJCHHZZXZLCCLYLNZSHZJZZLNNRLWHYQSNJHXYNTTTKYJPYCHHYEGKCTTWLGQRLGGTGTYGYHPYHYLQYQGCWYQKPYYYTTTTLHYHLLTYTTSPLKYZXGZWGPYDSSZZDQXSKCQNMJJZZBXYQMJRTFFBTKHZKBXLJJKDXJTLBWFZPPTKQTZTGPDGNTPJYFALQMKGXBDCLZFHZCLLLLADPMXDJHLCCLGYHDZFGYDDGCYYFGYDXKSSEBDHYKDKDKHNAXXYBPBYYHXZQGAFFQYJXDMLJCSQZLLPCHBSXGJYNDYBYQSPZWJLZKSDDTACTBXZDYZYPJZQSJNKKTKNJDJGYYPGTLFYQKASDNTCYHBLWDZHBBYDWJRYGKZYHEYYFJMSDTYFZJJHGCXPLXHLDWXXJKYTCYKSSSMTWCTTQZLPBSZDZWZXGZAGYKTYWXLHLSPBCLLOQMMZSSLCMBJCSZZKYDCZJGQQDSMCYTZQQLWZQZXSSFPTTFQMDDZDSHDTDWFHTDYZJYQJQKYPBDJYYXTLJHDRQXXXHAYDHRJLKLYTWHLLRLLRCXYLBWSRSZZSYMKZZHHKYHXKSMDSYDYCJPBZBSQLFCXXXNXKXWYWSDZYQOGGQMMYHCDZTTFJYYBGSTTTYBYKJDHKYXBELHTYPJQNFXFDYKZHQKZBYJTZBXHFDXKDASWTAWAJLDYJSFHBLDNNTNQJTJNCHXFJSRFWHZFMDRYJYJWZPDJKZYJYMPCYZNYNXFBYTFYFWYGDBNZZZDNYTXZEMMQBSQEHXFZMBMFLZZSRXYMJGSXWZJSPRYDJSJGXHJJGLJJYNZZJXHGXKYMLPYYYCXYTWQZSWHWLYRJLPXSLSXMFSWWKLCTNXNYNPSJSZHDZEPTXMYYWXYYSYWLXJQZQXZDCLEEELMCPJPCLWBXSQHFWWTFFJTNQJHJQDXHWLBYZNFJLALKYYJLDXHHYCSTYYWNRJYXYWTRMDRQHWQCMFJDYZMHMYYXJWMYZQZXTLMRSPWWCHAQBXYGZYPXYYRRCLMPYMGKSJSZYSRMYJSNXTPLNBAPPYPYLXYYZKYNLDZYJZCZNNLMZHHARQMPGWQTZMXXMLLHGDZXYHXKYXYCJMFFYYHJFSBSSQLXXNDYCANNMTCJCYPRRNYTYQNYYMBMSXNDLYLYSLJRLXYSXQMLLYZLZJJJKYZZCSFBZXXMSTBJGNXYZHLXNMCWSCYZYFZLXBRNNNYLBNRTGZQYSATSWRYHYJZMZDHZGZDWYBSSCSKXSYHYTXXGCQGXZZSHYXJSCRHMKKBXCZJYJYMKQHZJFNBHMQHYSNJNZYBKNQMCLGQHWLZNZSWXKHLJHYYBQLBFCDSXDLDSPFZPSKJYZWZXZDDXJSMMEGJSCSSMGCLXXKYYYLNYPWWWGYDKZJGGGZGGSYCKNJWNJPCXBJJTQTJWDSSPJXZXNZXUMELPXFSXTLLXCLJXJJLJZXCTPSWXLYDHLYQRWHSYCSQYYBYAYWJJJQFWQCQQCJQGXALDBZZYJGKGXPLTZYFXJLTPADKYQHPMATLCPDCKBMTXYBHKLENXDLEEGQDYMSAWHZMLJTWYGXLYQZLJEEYYBQQFFNLYXRDSCTGJGXYYNKLLYQKCCTLHJLQMKKZGCYYGLLLJDZGYDHZWXPYSJBZKDZGYZZHYWYFQYTYZSZYEZZLYMHJJHTSMQWYZLKYYWZCSRKQYTLTDXWCTYJKLWSQZWBDCQYNCJSRSZJLKCDCDTLZZZACQQZZDDXYPLXZBQJYLZLLLQDDZQJYJYJZYXNYYYNYJXKXDAZWYRDLJYYYRJLXLLDYXJCYWYWNQCCLDDNYYYNYCKCZHXXCCLGZQJGKWPPCQQJYSBZZXYJSQPXJPZBSBDSFNSFPZXHDWZTDWPPTFLZZBZDMYYPQJRSDZSQZSQXBDGCPZSWDWCSQZGMDHZXMWWFYBPDGPHTMJTHZSMMBGZMBZJCFZWFZBBZMQCFMBDMCJXLGPNJBBXGYHYYJGPTZGZMQBQTCGYXJXLWZKYDPDYMGCFTPFXYZTZXDZXTGKMTYBBCLBJASKYTSSQYYMSZXFJEWLXLLSZBQJJJAKLYLXLYCCTSXMCWFKKKBSXLLLLJYXTYLTJYYTDPJHNHNNKBYQNFQYYZBYYESSESSGDYHFHWTCJBSDZZTFDMXHCNJZYMQWSRYJDZJQPDQBBSTJGGFBKJBXTGQHNGWJXJGDLLTHZHHYYYYYYSXWTYYYCCBDBPYPZYCCZYJPZYWCBDLFWZCWJDXXHYHLHWZZXJTCZLCDPXUJCZZZLYXJJTXPHFXWPYWXZPTDZZBDZCYHJHMLXBQXSBYLRDTGJRRCTTTHYTCZWMXFYTWWZCWJWXJYWCSKYBZSCCTZQNHXNWXXKHKFHTSWOCCJYBCMPZZYKBNNZPBZHHZDLSYDDYTYFJPXYNGFXBYQXCBHXCPSXTYZDMKYSNXSXLHKMZXLYHDHKWHXXSSKQYHHCJYXGLHZXCSNHEKDTGZXQYPKDHEXTYKCNYMYYYPKQYYYKXZLTHJQTBYQHXBMYHSQCKWWYLLHCYYLNNEQXQWMCFBDCCMLJGGXDQKTLXKGNQCDGZJWYJJLYHHQTTTNWCHMXCXWHWSZJYDJCCDBQCDGDNYXZTHCQRXCBHZTQCBXWGQWYYBXHMBYMYQTYEXMQKYAQYRGYZSLFYKKQHYSSQYSHJGJCNXKZYCXSBXYXHYYLSTYCXQTHYSMGSCPMMGCCCCCMTZTASMGQZJHKLOSQYLSWTMXSYQKDZLJQQYPLSYCZTCQQPBBQJZCLPKHQZYYXXDTDDTSJCXFFLLCHQXMJLWCJCXTSPYCXNDTJSHJWXDQQJSKXYAMYLSJHMLALYKXCYYDMNMDQMXMCZNNCYBZKKYFLMCHCMLHXRCJJHSYLNMTJZGZGYWJXSRXCWJGJQHQZDQJDCJJZKJKGDZQGJJYJYLXZXXCDQHHHEYTMHLFSBDJSYYSHFYSTCZQLPBDRFRZTZYKYWHSZYQKWDQZRKMSYNBCRXQBJYFAZPZZEDZCJYWBCJWHYJBQSZYWRYSZPTDKZPFPBNZTKLQYHBBZPNPPTYZZYBQNYDCPJMMCYCQMCYFZZDCMNLFPBPLNGQJTBTTNJZPZBBZNJKLJQYLNBZQHKSJZNGGQSZZKYXSHPZSNBCGZKDDZQANZHJKDRTLZLSWJLJZLYWTJNDJZJHXYAYNCBGTZCSSQMNJPJYTYSWXZFKWJQTKHTZPLBHSNJZSYZBWZZZZLSYLSBJHDWWQPSLMMFBJDWAQYZTCJTBNNWZXQXCDSLQGDSDPDZHJTQQPSWLYYJZLGYXYZLCTCBJTKTYCZJTQKBSJLGMGZDMCSGPYNJZYQYYKNXRPWSZXMTNCSZZYXYBYHYZAXYWQCJTLLCKJJTJHGDXDXYQYZZBYWDLWQCGLZGJGQRQZCZSSBCRPCSKYDZNXJSQGXSSJMYDNSTZTPBDLTKZWXQWQTZEXNQCZGWEZKSSBYBRTSSSLCCGBPSZQSZLCCGLLLZXHZQTHCZMQGYZQZNMCOCSZJMMZSQPJYGQLJYJPPLDXRGZYXCCSXHSHGTZNLZWZKJCXTCFCJXLBMQBCZZWPQDNHXLJCTHYZLGYLNLSZZPCXDSCQQHJQKSXZPBAJYEMSMJTZDXLCJYRYYNWJBNGZZTMJXLTBSLYRZPYLSSCNXPHLLHYLLQQZQLXYMRSYCXZLMMCZLTZSDWTJJLLNZGGQXPFSKYGYGHBFZPDKMWGHCXMSGDXJMCJZDYCABXJDLNBCDQYGSKYDQTXDJJYXMSZQAZDZFSLQXYJSJZYLBTXXWXQQZBJZUFBBLYLWDSLJHXJYZJWTDJCZFQZQZZDZSXZZQLZCDZFJHYSPYMPQZMLPPLFFXJJNZZYLSJEYQZFPFZKSYWJJJHRDJZZXTXXGLGHYDXCSKYSWMMZCWYBAZBJKSHFHJCXMHFQHYXXYZFTSJYZFXYXPZLCHMZMBXHZZSXYFYMNCWDABAZLXKTCSHHXKXJJZJSTHYGXSXYYHHHJWXKZXSSBZZWHHHCWTZZZPJXSNXQQJGZYZYWLLCWXZFXXYXYHXMKYYSWSQMNLNAYCYSPMJKHWCQHYLAJJMZXHMMCNZHBHXCLXTJPLTXYJHDYYLTTXFSZHYXXSJBJYAYRSMXYPLCKDUYHLXRLNLLSTYZYYQYGYHHSCCSMZCTZQXKYQFPYYRPFFLKQUNTSZLLZMWWTCQQYZWTLLMLMPWMBZSSTZRBPDDTLQJJBXZCSRZQQYGWCSXFWZLXCCRSZDZMCYGGDZQSGTJSWLJMYMMZYHFBJDGYXCCPSHXNZCSBSJYJGJMPPWAFFYFNXHYZXZYLREMZGZCYZSSZDLLJCSQFNXZKPTXZGXJJGFMYYYSNBTYLBNLHPFZDCYFBMGQRRSSSZXYSGTZRNYDZZCDGPJAFJFZKNZBLCZSZPSGCYCJSZLMLRSZBZZLDLSLLYSXSQZQLYXZLSKKBRXBRBZCYCXZZZEEYFGKLZLYYHGZSGZLFJHGTGWKRAAJYZKZQTSSHJJXDCYZUYJLZYRZDQQHGJZXSSZBYKJPBFRTJXLLFQWJHYLQTYMBLPZDXTZYGBDHZZRBGXHWNJTJXLKSCFSMWLSDQYSJTXKZSCFWJLBXFTZLLJZLLQBLSQMQQCGCZFPBPHZCZJLPYYGGDTGWDCFCZQYYYQYSSCLXZSKLZZZGFFCQNWGLHQYZJJCZLQZZYJPJZZBPDCCMHJGXDQDGDLZQMFGPSYTSDYFWWDJZJYSXYYCZCYHZWPBYKXRYLYBHKJKSFXTZJMMCKHLLTNYYMSYXYZPYJQYCSYCWMTJJKQYRHLLQXPSGTLYYCLJSCPXJYZFNMLRGJJTYZBXYZMSJYJHHFZQMSYXRSZCWTLRTQZSSTKXGQKGSPTGCZNJSJCQCXHMXGGZTQYDJKZDLBZSXJLHYQGGGTHQSZPYHJHHGYYGKGGCWJZZYLCZLXQSFTGZSLLLMLJSKCTBLLZZSZMMNYTPZSXQHJCJYQXYZXZQZCPSHKZZYSXCDFGMWQRLLQXRFZTLYSTCTMJCXJJXHJNXTNRZTZFQYHQGLLGCXSZSJDJLJCYDSJTLNYXHSZXCGJZYQPYLFHDJSBPCCZHJJJQZJQDYBSSLLCMYTTMQTBHJQNNYGKYRQYQMZGCJKPDCGMYZHQLLSLLCLMHOLZGDYYFZSLJCQZLYLZQJESHNYLLJXGJXLYSYYYXNBZLJSSZCQQCJYLLZLTJYLLZLLBNYLGQCHXYYXOXCXQKYJXXXYKLXSXXYQXCYKQXQCSGYXXYQXYGYTQOHXHXPYXXXULCYEYCHZZCBWQBBWJQZSCSZSSLZYLKDESJZWMYMCYTSDSXXSCJPQQSQYLYYZYCMDJDZYWCBTJSYDJKCYDDJLBDJJSODZYSYXQQYXDHHGQQYQHDYXWGMMMAJDYBBBPPBCMUUPLJZSMTXERXJMHQNUTPJDCBSSMSSSTKJTSSMMTRCPLZSZMLQDSDMJMQPNQDXCFYNBFSDQXYXHYAYKQYDDLQYYYSSZBYDSLNTFQTZQPZMCHDHCZCWFDXTMYQSPHQYYXSRGJCWTJTZZQMGWJJTJHTQJBBHWZPXXHYQFXXQYWYYHYSCDYDHHQMNMTMWCPBSZPPZZGLMZFOLLCFWHMMSJZTTDHZZYFFYTZZGZYSKYJXQYJZQBHMBZZLYGHGFMSHPZFZSNCLPBQSNJXZSLXXFPMTYJYGBXLLDLXPZJYZJYHHZCYWHJYLSJEXFSZZYWXKZJLUYDTMLYMQJPWXYHXSKTQJEZRPXXZHHMHWQPWQLYJJQJJZSZCPHJLCHHNXJLQWZJHBMZYXBDHHYPZLHLHLGFWLCHYYTLHJXCJMSCPXSTKPNHQXSRTYXXTESYJCTLSSLSTDLLLWWYHDHRJZSFGXTSYCZYNYHTDHWJSLHTZDQDJZXXQHGYLTZPHCSQFCLNJTCLZPFSTPDYNYLGMJLLYCQHYSSHCHYLHQYQTMZYPBYWRFQYKQSYSLZDQJMPXYYSSRHZJNYWTQDFZBWWTWWRXCWHGYHXMKMYYYQMSMZHNGCEPMLQQMTCWCTMMPXJPJJHFXYYZSXZHTYBMSTSYJTTQQQYYLHYNPYQZLCYZHZWSMYLKFJXLWGXYPJYTYSYXYMZCKTTWLKSMZSYLMPWLZWXWQZSSAQSYXYRHSSNTSRAPXCPWCMGDXHXZDZYFJHGZTTSBJHGYZSZYSMYCLLLXBTYXHBBZJKSSDMALXHYCFYGMQYPJYCQXJLLLJGSLZGQLYCJCCZOTYXMTMTTLLWTGPXYMZMKLPSZZZXHKQYSXCTYJZYHXSHYXZKXLZWPSQPYHJWPJPWXQQYLXSDHMRSLZZYZWTTCYXYSZZSHBSCCSTPLWSSCJCHNLCGCHSSPHYLHFHHXJSXYLLNYLSZDHZXYLSXLWZYKCLDYAXZCMDDYSPJTQJZLNWQPSSSWCTSTSZLBLNXSMNYYMJQBQHRZWTYYDCHQLXKPZWBGQYBKFCMZWPZLLYYLSZYDWHXPSBCMLJBSCGBHXLQHYRLJXYSWXWXZSLDFHLSLYNJLZYFLYJYCDRJLFSYZFSLLCQYQFGJYHYXZLYLMSTDJCYHBZLLNWLXXYGYYHSMGDHXXHHLZZJZXCZZZCYQZFNGWPYLCPKPYYPMCLQKDGXZGGWQBDXZZKZFBXXLZXJTPJPTTBYTSZZDWSLCHZHSLTYXHQLHYXXXYYZYSWTXZKHLXZXZPYHGCHKCFSYHUTJRLXFJXPTZTWHPLYXFCRHXSHXKYXXYHZQDXQWULHYHMJTBFLKHTXCWHJFWJCFPQRYQXCYYYQYGRPYWSGSUNGWCHKZDXYFLXXHJJBYZWTSXXNCYJJYMSWZJQRMHXZWFQSYLZJZGBHYNSLBGTTCSYBYXXWXYHXYYXNSQYXMQYWRGYQLXBBZLJSYLPSYTJZYHYZAWLRORJMKSCZJXXXYXCHDYXRYXXJDTSQFXLYLTSFFYXLMTYJMJUYYYXLTZCSXQZQHZXLYYXZHDNBRXXXJCTYHLBRLMBRLLAXKYLLLJLYXXLYCRYLCJTGJCMTLZLLCYZZPZPCYAWHJJFYBDYYZSMPCKZDQYQPBPCJPDCYZMDPBCYYDYCNNPLMTMLRMFMMGWYZBSJGYGSMZQQQZTXMKQWGXLLPJGZBQCDJJJFPKJKCXBLJMSWMDTQJXLDLPPBXCWRCQFBFQJCZAHZGMYKPHYYHZYKNDKZMBPJYXPXYHLFPNYYGXJDBKXNXHJMZJXSTRSTLDXSKZYSYBZXJLXYSLBZYSLHXJPFXPQNBYLLJQKYGZMCYZZYMCCSLCLHZFWFWYXZMWSXTYNXJHPYYMCYSPMHYSMYDYSHQYZCHMJJMZCAAGCFJBBHPLYZYLXXSDJGXDHKXXTXXNBHRMLYJSLTXMRHNLXQJXYZLLYSWQGDLBJHDCGJYQYCMHWFMJYBMBYJYJWYMDPWHXQLDYGPDFXXBCGJSPCKRSSYZJMSLBZZJFLJJJLGXZGYXYXLSZQYXBEXYXHGCXBPLDYHWETTWWCJMBTXCHXYQXLLXFLYXLLJLSSFWDPZSMYJCLMWYTCZPCHQEKCQBWLCQYDPLQPPQZQFJQDJHYMMCXTXDRMJWRHXCJZYLQXDYYNHYYHRSLSRSYWWZJYMTLTLLGTQCJZYABTCKZCJYCCQLJZQXALMZYHYWLWDXZXQDLLQSHGPJFJLJHJABCQZDJGTKHSSTCYJLPSWZLXZXRWGLDLZRLZXTGSLLLLZLYXXWGDZYGBDPHZPBRLWSXQBPFDWOFMWHLYPCBJCCLDMBZPBZZLCYQXLDOMZBLZWPDWYYGDSTTHCSQSCCRSSSYSLFYBFNTYJSZDFNDPDHDZZMBBLSLCMYFFGTJJQWFTMTPJWFNLBZCMMJTGBDZLQLPYFHYYMJYLSDCHDZJWJCCTLJCLDTLJJCPDDSQDSSZYBNDBJLGGJZXSXNLYCYBJXQYCBYLZCFZPPGKCXZDZFZTJJFJSJXZBNZYJQTTYJYHTYCZHYMDJXTTMPXSPLZCDWSLSHXYPZGTFMLCJTYCBPMGDKWYCYZCDSZZYHFLYCTYGWHKJYYLSJCXGYWJCBLLCSNDDBTZBSCLYZCZZSSQDLLMQYYHFSLQLLXFTYHABXGWNYWYYPLLSDLDLLBJCYXJZMLHLJDXYYQYTDLLLBUGBFDFBBQJZZMDPJHGCLGMJJPGAEHHBWCQXAXHHHZCHXYPHJAXHLPHJPGPZJQCQZGJJZZUZDMQYYBZZPHYHYBWHAZYJHYKFGDPFQSDLZMLJXKXGALXZDAGLMDGXMWZQYXXDXXPFDMMSSYMPFMDMMKXKSYZYSHDZKXSYSMMZZZMSYDNZZCZXFPLSTMZDNMXCKJMZTYYMZMZZMSXHHDCZJEMXXKLJSTLWLSQLYJZLLZJSSDPPMHNLZJCZYHMXXHGZCJMDHXTKGRMXFWMCGMWKDTKSXQMMMFZZYDKMSCLCMPCGMHSPXQPZDSSLCXKYXTWLWJYAHZJGZQMCSNXYYMMPMLKJXMHLMLQMXCTKZMJQYSZJSYSZHSYJZJCDAJZYBSDQJZGWZQQXFKDMSDJLFWEHKZQKJPEYPZYSZCDWYJFFMZZYLTTDZZEFMZLBNPPLPLPEPSZALLTYLKCKQZKGENQLWAGYXYDPXLHSXQQWQCQXQCLHYXXMLYCCWLYMQYSKGCHLCJNSZKPYZKCQZQLJPDMDZHLASXLBYDWQLWDNBQCRYDDZTJYBKBWSZDXDTNPJDTCTQDFXQQMGNXECLTTBKPWSLCTYQLPWYZZKLPYGZCQQPLLKCCYLPQMZCZQCLJSLQZDJXLDDHPZQDLJJXZQDXYZQKZLJCYQDYJPPYPQYKJYRMPCBYMCXKLLZLLFQPYLLLMBSGLCYSSLRSYSQTMXYXZQZFDZUYSYZTFFMZZSMZQHZSSCCMLYXWTPZGXZJGZGSJSGKDDHTQGGZLLBJDZLCBCHYXYZHZFYWXYZYMSDBZZYJGTSMTFXQYXQSTDGSLNXDLRYZZLRYYLXQHTXSRTZNGZXBNQQZFMYKMZJBZYMKBPNLYZPBLMCNQYZZZSJZHJCTZKHYZZJRDYZHNPXGLFZTLKGJTCTSSYLLGZRZBBQZZKLPKLCZYSSUYXBJFPNJZZXCDWXZYJXZZDJJKGGRSRJKMSMZJLSJYWQSKYHQJSXPJZZZLSNSHRNYPZTWCHKLPSRZLZXYJQXQKYSJYCZTLQZYBBYBWZPQDWWYZCYTJCJXCKCWDKKZXSGKDZXWWYYJQYYTCYTDLLXWKCZKKLCCLZCQQDZLQLCSFQCHQHSFSMQZZLNBJJZBSJHTSZDYSJQJPDLZCDCWJKJZZLPYCGMZWDJJBSJQZSYZYHHXJPBJYDSSXDZNCGLQMBTSFSBPDZDLZNFGFJGFSMPXJQLMBLGQCYYXBQKDJJQYRFKZTJDHCZKLBSDZCFJTPLLJGXHYXZCSSZZXSTJYGKGCKGYOQXJPLZPBPGTGYJZGHZQZZLBJLSQFZGKQQJZGYCZBZQTLDXRJXBSXXPZXHYZYCLWDXJJHXMFDZPFZHQHQMQGKSLYHTYCGFRZGNQXCLPDLBZCSCZQLLJBLHBZCYPZZPPDYMZZSGYHCKCPZJGSLJLNSCDSLDLXBMSTLDDFJMKDJDHZLZXLSZQPQPGJLLYBDSZGQLBZLSLKYYHZTTNTJYQTZZPSZQZTLLJTYYLLQLLQYZQLBDZLSLYYZYMDFSZSNHLXZNCZQZPBWSKRFBSYZMTHBLGJPMCZZLSTLXSHTCSYZLZBLFEQHLXFLCJLYLJQCBZLZJHHSSTBRMHXZHJZCLXFNBGXGTQJCZTMSFZKJMSSNXLJKBHSJXNTNLZDNTLMSJXGZJYJCZXYJYJWRWWQNZTNFJSZPZSHZJFYRDJSFSZJZBJFZQZZHZLXFYSBZQLZSGYFTZDCSZXZJBQMSZKJRHYJZCKMJKHCHGTXKXQGLXPXFXTRTYLXJXHDTSJXHJZJXZWZLCQSBTXWXGXTXXHXFTSDKFJHZYJFJXRZSDLLLTQSQQZQWZXSYQTWGWBZCGZLLYZBCLMQQTZHZXZXLJFRMYZFLXYSQXXJKXRMQDZDMMYYBSQBHGZMWFWXGMXLZPYYTGZYCCDXYZXYWGSYJYZNBHPZJSQSYXSXRTFYZGRHZTXSZZTHCBFCLSYXZLZQMZLMPLMXZJXSFLBYZMYQHXJSXRXSQZZZSSLYFRCZJRCRXHHZXQYDYHXSJJHZCXZBTYNSYSXJBQLPXZQPYMLXZKYXLXCJLCYSXXZZLXDLLLJJYHZXGYJWKJRWYHCPSGNRZLFZWFZZNSXGXFLZSXZZZBFCSYJDBRJKRDHHGXJLJJTGXJXXSTJTJXLYXQFCSGSWMSBCTLQZZWLZZKXJMLTMJYHSDDBXGZHDLBMYJFRZFSGCLYJBPMLYSMSXLSZJQQHJZFXGFQFQBPXZGYYQXGZTCQWYLTLGWSGWHRLFSFGZJMGMGBGTJFSYZZGZYZAFLSSPMLPFLCWBJZCLJJMZLPJJLYMQDMYYYFBGYGYZMLYZDXQYXRQQQHSYYYQXYLJTYXFSFSLLGNQCYHYCWFHCCCFXPYLYPLLZYXXXXXKQHHXSHJZCFZSCZJXCPZWHHHHHAPYLQALPQAFYHXDYLUKMZQGGGDDESRNNZLTZGCHYPPYSQJJHCLLJTOLNJPZLJLHYMHEYDYDSQYCDDHGZUNDZCLZYZLLZNTNYZGSLHSLPJJBDGWXPCDUTJCKLKCLWKLLCASSTKZZDNQNTTLYYZSSYSSZZRYLJQKCQDHHCRXRZYDGRGCWCGZQFFFPPJFZYNAKRGYWYQPQXXFKJTSZZXSWZDDFBBXTBGTZKZNPZZPZXZPJSZBMQHKCYXYLDKLJNYPKYGHGDZJXXEAHPNZKZTZCMXCXMMJXNKSZQNMNLWBWWXJKYHCPSTMCSQTZJYXTPCTPDTNNPGLLLZSJLSPBLPLQHDTNJNLYYRSZFFJFQWDPHZDWMRZCCLODAXNSSNYZRESTYJWJYJDBCFXNMWTTBYLWSTSZGYBLJPXGLBOCLHPCBJLTMXZLJYLZXCLTPNCLCKXTPZJSWCYXSFYSZDKNTLBYJCYJLLSTGQCBXRYZXBXKLYLHZLQZLNZCXWJZLJZJNCJHXMNZZGJZZXTZJXYCYYCXXJYYXJJXSSSJSTSSTTPPGQTCSXWZDCSYFPTFBFHFBBLZJCLZZDBXGCXLQPXKFZFLSYLTUWBMQJHSZBMDDBCYSCCLDXYCDDQLYJJWMQLLCSGLJJSYFPYYCCYLTJANTJJPWYCMMGQYYSXDXQMZHSZXPFTWWZQSWQRFKJLZJQQYFBRXJHHFWJJZYQAZMYFRHCYYBYQWLPEXCCZSTYRLTTDMQLYKMBBGMYYJPRKZNPBSXYXBHYZDJDNGHPMFSGMWFZMFQMMBCMZZCJJLCNUXYQLMLRYGQZCYXZLWJGCJCGGMCJNFYZZJHYCPRRCMTZQZXHFQGTJXCCJEAQCRJYHPLQLSZDJRBCQHQDYRHYLYXJSYMHZYDWLDFRYHBPYDTSSCNWBXGLPZMLZZTQSSCPJMXXYCSJYTYCGHYCJWYRXXLFEMWJNMKLLSWTXHYYYNCMMCWJDQDJZGLLJWJRKHPZGGFLCCSCZMCBLTBHBQJXQDSPDJZZGKGLFQYWBZYZJLTSTDHQHCTCBCHFLQMPWDSHYYTQWCNZZJTLBYMBPDYYYXSQKXWYYFLXXNCWCXYPMAELYKKJMZZZBRXYYQJFLJPFHHHYTZZXSGQQMHSPGDZQWBWPJHZJDYSCQWZKTXXSQLZYYMYSDZGRXCKKUJLWPYSYSCSYZLRMLQSYLJXBCXTLWDQZPCYCYKPPPNSXFYZJJRCEMHSZMSXLXGLRWGCSTLRSXBZGBZGZTCPLUJLSLYLYMTXMTZPALZXPXJTJWTCYYZLBLXBZLQMYLXPGHDSLSSDMXMBDZZSXWHAMLCZCPJMCNHJYSNSYGCHSKQMZZQDLLKABLWJXSFMOCDXJRRLYQZKJMYBYQLYHETFJZFRFKSRYXFJTWDSXXSYSQJYSLYXWJHSNLXYYXHBHAWHHJZXWMYLJCSSLKYDZTXBZSYFDXGXZJKHSXXYBSSXDPYNZWRPTQZCZENYGCXQFJYKJBZMLJCMQQXUOXSLYXXLYLLJDZBTYMHPFSTTQQWLHOKYBLZZALZXQLHZWRRQHLSTMYPYXJJXMQSJFNBXYXYJXXYQYLTHYLQYFMLKLJTMLLHSZWKZHLJMLHLJKLJSTLQXYLMBHHLNLZXQJHXCFXXLHYHJJGBYZZKBXSCQDJQDSUJZYYHZHHMGSXCSYMXFEBCQWWRBPYYJQTYZCYQYQQZYHMWFFHGZFRJFCDPXNTQYZPDYKHJLFRZXPPXZDBBGZQSTLGDGYLCQMLCHHMFYWLZYXKJLYPQHSYWMQQGQZMLZJNSQXJQSYJYCBEHSXFSZPXZWFLLBCYYJDYTDTHWZSFJMQQYJLMQXXLLDTTKHHYBFPWTYYSQQWNQWLGWDEBZWCMYGCULKJXTMXMYJSXHYBRWFYMWFRXYQMXYSZTZZTFYKMLDHQDXWYYNLCRYJBLPSXCXYWLSPRRJWXHQYPHTYDNXHHMMYWYTZCSQMTSSCCDALWZTCPQPYJLLQZYJSWXMZZMMYLMXCLMXCZMXMZSQTZPPQQBLPGXQZHFLJJHYTJSRXWZXSCCDLXTYJDCQJXSLQYCLZXLZZXMXQRJMHRHZJBHMFLJLMLCLQNLDXZLLLPYPSYJYSXCQQDCMQJZZXHNPNXZMEKMXHYKYQLXSXTXJYYHWDCWDZHQYYBGYBCYSCFGPSJNZDYZZJZXRZRQJJYMCANYRJTLDPPYZBSTJKXXZYPFDWFGZZRPYMTNGXZQBYXNBUFNQKRJQZMJEGRZGYCLKXZDSKKNSXKCLJSPJYYZLQQJYBZSSQLLLKJXTBKTYLCCDDBLSPPFYLGYDTZJYQGGKQTTFZXBDKTYYHYBBFYTYYBCLPDYTGDHRYRNJSPTCSNYJQHKLLLZSLYDXXWBCJQSPXBPJZJCJDZFFXXBRMLAZHCSNDLBJDSZBLPRZTSWSBXBCLLXXLZDJZSJPYLYXXYFTFFFBHJJXGBYXJPMMMPSSJZJMTLYZJXSWXTYLEDQPJMYGQZJGDJLQJWJQLLSJGJGYGMSCLJJXDTYGJQJQJCJZCJGDZZSXQGSJGGCXHQXSNQLZZBXHSGZXCXYLJXYXYYDFQQJHJFXDHCTXJYRXYSQTJXYEFYYSSYYJXNCYZXFXMSYSZXYYSCHSHXZZZGZZZGFJDLTYLNPZGYJYZYYQZPBXQBDZTZCZYXXYHHSQXSHDHGQHJHGYWSZTMZMLHYXGEBTYLZKQWYTJZRCLEKYSTDBCYKQQSAYXCJXWWGSBHJYZYDHCSJKQCXSWXFLTYNYZPZCCZJQTZWJQDZZZQZLJJXLSBHPYXXPSXSHHEZTXFPTLQYZZXHYTXNCFZYYHXGNXMYWXTZSJPTHHGYMXMXQZXTSBCZYJYXXTYYZYPCQLMMSZMJZZLLZXGXZAAJZYXJMZXWDXZSXZDZXLEYJJZQBHZWZZZQTZPSXZTDSXJJJZNYAZPHXYYSRNQDTHZHYYKYJHDZXZLSWCLYBZYECWCYCRYLCXNHZYDZYDYJDFRJJHTRSQTXYXJRJHOJYNXELXSFSFJZGHPZSXZSZDZCQZBYYKLSGSJHCZSHDGQGXYZGXCHXZJWYQWGYHKSSEQZZNDZFKWYSSTCLZSTSYMCDHJXXYWEYXCZAYDMPXMDSXYBSQMJMZJMTZQLPJYQZCGQHXJHHLXXHLHDLDJQCLDWBSXFZZYYSCHTYTYYBHECXHYKGJPXHHYZJFXHWHBDZFYZBCAPNPGNYDMSXHMMMMAMYNBYJTMPXYYMCTHJBZYFCGTYHWPHFTWZZEZSBZEGPFMTSKFTYCMHFLLHGPZJXZJGZJYXZSBBQSCZZLZCCSTPGXMJSFTCCZJZDJXCYBZLFCJSYZFGSZLYBCWZZBYZDZYPSWYJZXZBDSYUXLZZBZFYGCZXBZHZFTPBGZGEJBSTGKDMFHYZZJHZLLZZGJQZLSFDJSSCBZGPDLFZFZSZYZYZSYGCXSNXXCHCZXTZZLJFZGQSQYXZJQDCCZTQCDXZJYQJQCHXZTDLGSCXZSYQJQTZWLQDQZTQCHQQJZYEZZZPBWKDJFCJPZTYPQYQTTYNLMBDKTJZPQZQZZFPZSBNJLGYJDXJDZZKZGQKXDLPZJTCJDQBXDJQJSTCKNXBXZMSLYJCQMTJQWWCJQNJNLLLHJCWQTBZQYDZCZPZZDZYDDCYZZZCCJTTJFZDPRRTZTJDCQTQZDTJNPLZBCLLCTZSXKJZQZPZLBZRBTJDCXFCZDBCCJJLTQQPLDCGZDBBZJCQDCJWYNLLZYZCCDWLLXWZLXRXNTQQCZXKQLSGDFQTDDGLRLAJJTKUYMKQLLTZYTDYYCZGJWYXDXFRSKSTQTENQMRKQZHHQKDLDAZFKYPBGGPZREBZZYKZZSPEGJXGYKQZZZSLYSYYYZWFQZYLZZLZHWCHKYPQGNPGBLPLRRJYXCCSYYHSFZFYBZYYTGZXYLXCZWXXZJZBLFFLGSKHYJZEYJHLPLLLLCZGXDRZELRHGKLZZYHZLYQSZZJZQLJZFLNBHGWLCZCFJYSPYXZLZLXGCCPZBLLCYBBBBUBBCBPCRNNZCZYRBFSRLDCGQYYQXYGMQZWTZYTYJXYFWTEHZZJYWLCCNTZYJJZDEDPZDZTSYQJHDYMBJNYJZLXTSSTPHNDJXXBYXQTZQDDTJTDYYTGWSCSZQFLSHLGLBCZPHDLYZJYCKWTYTYLBNYTSDSYCCTYSZYYEBHEXHQDTWNYGYCLXTSZYSTQMYGZAZCCSZZDSLZCLZRQXYYELJSBYMXSXZTEMBBLLYYLLYTDQYSHYMRQWKFKBFXNXSBYCHXBWJYHTQBPBSBWDZYLKGZSKYHXQZJXHXJXGNLJKZLYYCDXLFYFGHLJGJYBXQLYBXQPQGZTZPLNCYPXDJYQYDYMRBESJYYHKXXSTMXRCZZYWXYQYBMCLLYZHQYZWQXDBXBZWZMSLPDMYSKFMZKLZCYQYCZLQXFZZYDQZPZYGYJYZMZXDZFYFYTTQTZHGSPCZMLCCYTZXJCYTJMKSLPZHYSNZLLYTPZCTZZCKTXDHXXTQCYFKSMQCCYYAZHTJPCYLZLYJBJXTPNYLJYYNRXSYLMMNXJSMYBCSYSYLZYLXJJQYLDZLPQBFZZBLFNDXQKCZFYWHGQMRDSXYCYTXNQQJZYYPFZXDYZFPRXEJDGYQBXRCNFYYQPGHYJDYZXGRHTKYLNWDZNTSMPKLBTHBPYSZBZTJZSZZJTYYXZPHSSZZBZCZPTQFZMYFLYPYBBJQXZMXXDJMTSYSKKBJZXHJCKLPSMKYJZCXTMLJYXRZZQSLXXQPYZXMKYXXXJCLJPRMYYGADYSKQLSNDHYZKQXZYZTCGHZTLMLWZYBWSYCTBHJHJFCWZTXWYTKZLXQSHLYJZJXTMPLPYCGLTBZZTLZJCYJGDTCLKLPLLQPJMZPAPXYZLKKTKDZCZZBNZDYDYQZJYJGMCTXLTGXSZLMLHBGLKFWNWZHDXUHLFMKYSLGXDTWWFRJEJZTZHYDXYKSHWFZCQSHKTMQQHTZHYMJDJSKHXZJZBZZXYMPAGQMSTPXLSKLZYNWRTSQLSZBPSPSGZWYHTLKSSSWHZZLYYTNXJGMJSZSUFWNLSOZTXGXLSAMMLBWLDSZYLAKQCQCTMYCFJBSLXCLZZCLXXKSBZQCLHJPSQPLSXXCKSLNHPSFQQYTXYJZLQLDXZQJZDYYDJNZPTUZDSKJFSLJHYLZSQZLBTXYDGTQFDBYAZXDZHZJNHHQBYKNXJJQCZMLLJZKSPLDYCLBBLXKLELXJLBQYCXJXGCNLCQPLZLZYJTZLJGYZDZPLTQCSXFDMNYCXGBTJDCZNBGBQYQJWGKFHTNPYQZQGBKPBBYZMTJDYTBLSQMPSXTBNPDXKLEMYYCJYNZCTLDYKZZXDDXHQSHDGMZSJYCCTAYRZLPYLTLKXSLZCGGEXCLFXLKJRTLQJAQZNCMBYDKKCXGLCZJZXJHPTDJJMZQYKQSECQZDSHHADMLZFMMZBGNTJNNLGBYJBRBTMLBYJDZXLCJLPLDLPCQDHLXZLYCBLCXZZJADJLNZMMSSSMYBHBSQKBHRSXXJMXSDZNZPXLGBRHWGGFCXGMSKLLTSJYYCQLTSKYWYYHYWXBXQYWPYWYKQLSQPTNTKHQCWDQKTWPXXHCPTHTWUMSSYHBWCRWXHJMKMZNGWTMLKFGHKJYLSYYCXWHYECLQHKQHTTQKHFZLDXQWYZYYDESBPKYRZPJFYYZJCEQDZZDLATZBBFJLLCXDLMJSSXEGYGSJQXCWBXSSZPDYZCXDNYXPPZYDLYJCZPLTXLSXYZYRXCYYYDYLWWNZSAHJSYQYHGYWWAXTJZDAXYSRLTDPSSYYFNEJDXYZHLXLLLZQZSJNYQYQQXYJGHZGZCYJCHZLYCDSHWSHJZYJXCLLNXZJJYYXNFXMWFPYLCYLLABWDDHWDXJMCXZTZPMLQZHSFHZYNZTLLDYWLSLXHYMMYLMBWWKYXYADTXYLLDJPYBPWUXJMWMLLSAFDLLYFLBHHHBQQLTZJCQJLDJTFFKMMMBYTHYGDCQRDDWRQJXNBYSNWZDBYYTBJHPYBYTTJXAAHGQDQTMYSTQXKBTZPKJLZRBEQQSSMJJBDJOTGTBXPGBKTLHQXJJJCTHXQDWJLWRFWQGWSHCKRYSWGFTGYGBXSDWDWRFHWYTJJXXXJYZYSLPYYYPAYXHYDQKXSHXYXGSKQHYWFDDDPPLCJLQQEEWXKSYYKDYPLTJTHKJLTCYYHHJTTPLTZZCDLTHQKZXQYSTEEYWYYZYXXYYSTTJKLLPZMCYHQGXYHSRMBXPLLNQYDQHXSXXWGDQBSHYLLPJJJTHYJKYPPTHYYKTYEZYENMDSHLCRPQFDGFXZPSFTLJXXJBSWYYSKSFLXLPPLBBBLBSFXFYZBSJSSYLPBBFFFFSSCJDSTZSXZRYYSYFFSYZYZBJTBCTSBSDHRTJJBYTCXYJEYLXCBNEBJDSYXYKGSJZBXBYTFZWGENYHHTHZHHXFWGCSTBGXKLSXYWMTMBYXJSTZSCDYQRCYTWXZFHMYMCXLZNSDJTTTXRYCFYJSBSDYERXJLJXBBDEYNJGHXGCKGSCYMBLXJMSZNSKGXFBNBPTHFJAAFXYXFPXMYPQDTZCXZZPXRSYWZDLYBBKTYQPQJPZYPZJZNJPZJLZZFYSBTTSLMPTZRTDXQSJEHBZYLZDHLJSQMLHTXTJECXSLZZSPKTLZKQQYFSYGYWPCPQFHQHYTQXZKRSGTTSQCZLPTXCDYYZXSQZSLXLZMYCPCQBZYXHBSXLZDLTCDXTYLZJYYZPZYZLTXJSJXHLPMYTXCQRBLZSSFJZZTNJYTXMYJHLHPPLCYXQJQQKZZSCPZKSWALQSBLCCZJSXGWWWYGYKTJBBZTDKHXHKGTGPBKQYSLPXPJCKBMLLXDZSTBKLGGQKQLSBKKTFXRMDKBFTPZFRTBBRFERQGXYJPZSSTLBZTPSZQZSJDHLJQLZBPMSMMSXLQQNHKNBLRDDNXXDHDDJCYYGYLXGZLXSYGMQQGKHBPMXYXLYTQWLWGCPBMQXCYZYDRJBHTDJYHQSHTMJSBYPLWHLZFFNYPMHXXHPLTBQPFBJWQDBYGPNZTPFZJGSDDTQSHZEAWZZYLLTYYBWJKXXGHLFKXDJTMSZSQYNZGGSWQSPHTLSSKMCLZXYSZQZXNCJDQGZDLFNYKLJCJLLZLMZZNHYDSSHTHZZLZZBBHQZWWYCRZHLYQQJBEYFXXXWHSRXWQHWPSLMSSKZTTYGYQQWRSLALHMJTQJSMXQBJJZJXZYZKXBYQXBJXSHZTSFJLXMXZXFGHKZSZGGYLCLSARJYHSLLLMZXELGLXYDJYTLFBHBPNLYZFBBHPTGJKWETZHKJJXZXXGLLJLSTGSHJJYQLQZFKCGNNDJSSZFDBCTWWSEQFHQJBSAQTGYPQLBXBMMYWXGSLZHGLZGQYFLZBYFZJFRYSFMBYZHQGFWZSYFYJJPHZBYYZFFWODGRLMFTWLBZGYCQXCDJYGZYYYYTYTYDWEGAZYHXJLZYYHLRMGRXXZCLHNELJJTJTPWJYBJJBXJJTJTEEKHWSLJPLPSFYZPQQBDLQJJTYYQLYZKDKSQJYYQZLDQTGJQYZJSUCMRYQTHTEJMFCTYHYPKMHYZWJDQFHYYXWSHCTXRLJHQXHCCYYYJLTKTTYTMXGTCJTZAYYOCZLYLBSZYWJYTSJYHBYSHFJLYGJXXTMZYYLTXXYPZLXYJZYZYYPNHMYMDYYLBLHLSYYQQLLNJJYMSOYQBZGDLYXYLCQYXTSZEGXHZGLHWBLJHEYXTWQMAKBPQCGYSHHEGQCMWYYWLJYJHYYZLLJJYLHZYHMGSLJLJXCJJYCLYCJPCPZJZJMMYLCQLNQLJQJSXYJMLSZLJQLYCMMHCFMMFPQQMFYLQMCFFQMMMMHMZNFHHJGTTHHKHSLNCHHYQDXTMMQDCYZYXYQMYQYLTDCYYYZAZZCYMZYDLZFFFMMYCQZWZZMABTBYZTDMNZZGGDFTYPCGQYTTSSFFWFDTZQSSYSTWXJHXYTSXXYLBYQHWWKXHZXWZNNZZJZJJQJCCCHYYXBZXZCYZTLLCQXYNJYCYYCYNZZQYYYEWYCZDCJYCCHYJLBTZYYCQWMPWPYMLGKDLDLGKQQBGYCHJXY';
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index 9a9c3b60ef..92acc676f5 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -253,7 +253,7 @@ export const Utils = {
   },
 
   /**
-   * input: 
+   * input:
    *  eg: /
    *      ../abc/abc/
    *      ../abc/bc
@@ -306,7 +306,7 @@ export const Utils = {
 
   isSupportUploadFolder: function() {
     return navigator.userAgent.indexOf('Firefox')!=-1 ||
-      navigator.userAgent.indexOf('Chrome') > -1 || 
+      navigator.userAgent.indexOf('Chrome') > -1 ||
       navigator.userAgent.indexOf('Safari') > -1;
   },
 
@@ -486,7 +486,7 @@ export const Utils = {
 
   getFileOperationList: function(currentRepoInfo, dirent, isContextmenu) {
     let list = [];
-    const { SHARE, DOWNLOAD, DELETE, RENAME, MOVE, COPY, TAGS, UNLOCK, LOCK, 
+    const { SHARE, DOWNLOAD, DELETE, RENAME, MOVE, COPY, TAGS, UNLOCK, LOCK,
       COMMENT, HISTORY, ACCESS_LOG, OPEN_VIA_CLIENT } = TextTranslation;
     const permission = dirent.permission;
 
@@ -507,7 +507,7 @@ export const Utils = {
 
       list.push('Divider');
     }
- 
+
     if (permission == 'rw') {
       if (!dirent.is_locked || (dirent.is_locked && dirent.locked_by_me)) {
         list.push(RENAME, MOVE);
@@ -518,7 +518,7 @@ export const Utils = {
         if (dirent.is_locked) {
           if (dirent.locked_by_me || dirent.lock_owner == 'OnlineOffice') {
             list.push(UNLOCK);
-          }   
+          }
         } else {
           list.push(LOCK);
         }
@@ -527,11 +527,11 @@ export const Utils = {
       list.push('Divider');
       if (enableFileComment) {
         list.push(COMMENT);
-      }   
+      }
       list.push(HISTORY);
       if (isPro && fileAuditEnabled) {
         list.push(ACCESS_LOG);
-      }   
+      }
       list.push('Divider', OPEN_VIA_CLIENT);
     }
 
@@ -541,7 +541,7 @@ export const Utils = {
       }
       if (enableFileComment) {
         list.push(COMMENT);
-      }   
+      }
       list.push(HISTORY);
     }
 
@@ -602,8 +602,8 @@ export const Utils = {
     switch (permission) {
       case 'preview_download':
         return {
-          value: permission, 
-          text: gettext('Preview and download'), 
+          value: permission,
+          text: gettext('Preview and download'),
           permissionDetails: {
             'can_edit': false,
             'can_download': true,
@@ -612,8 +612,8 @@ export const Utils = {
         };
       case 'preview_only':
         return {
-          value: permission, 
-          text: gettext('Preview only'), 
+          value: permission,
+          text: gettext('Preview only'),
           permissionDetails: {
             'can_edit': false,
             'can_download': false,
@@ -622,18 +622,18 @@ export const Utils = {
         };
       case 'download_upload':
         return {
-          value: permission, 
-          text: gettext('Download and upload'), 
+          value: permission,
+          text: gettext('Download and upload'),
           permissionDetails: {
             'can_edit': false,
             'can_download': true,
-            'can_upload': true 
+            'can_upload': true
           }
         };
       case 'edit_download':
         return {
           value: permission,
-          text: gettext('Edit on cloud and download'), 
+          text: gettext('Edit on cloud and download'),
           permissionDetails: {
             'can_edit': true,
             'can_download': true,
@@ -741,7 +741,7 @@ export const Utils = {
     var path = decodeURIComponent(array[1]);
     return path;
   },
-  
+
   getPathFromInternalDirLink: function(url, repoID) {
     var re = new RegExp(serviceURL + '/library/' + repoID + '(/.*)');
     var array = re.exec(url);
@@ -776,7 +776,7 @@ export const Utils = {
     }
     return path;
   },
-  
+
   getPathFromWikiInternalDirLink: function(url, slug) {
     slug = encodeURIComponent(slug);
     var re = new RegExp(serviceURL + '/published/' + slug + '(/.*)');
@@ -951,7 +951,7 @@ export const Utils = {
         comparator = function(a, b) {
           if (a.type == 'dir' && b.type == 'dir') {
             return 0;
-          } 
+          }
           return a.size_original < b.size_original ? -1 : 1;
         };
         break;
@@ -959,7 +959,7 @@ export const Utils = {
         comparator = function(a, b) {
           if (a.type == 'dir' && b.type == 'dir') {
             return 0;
-          } 
+          }
           return a.size_original < b.size_original ? 1 : -1;
         };
         break;
@@ -1075,9 +1075,9 @@ export const Utils = {
 
   changeMarkdownNodes: function(nodes, fn) {
     nodes.map((item) => {
-      fn(item); 
+      fn(item);
       if (item.children && item.children.length > 0){
-        Utils.changeMarkdownNodes(item.children, fn); 
+        Utils.changeMarkdownNodes(item.children, fn);
       }
     });
 
@@ -1253,22 +1253,22 @@ export const Utils = {
       return event.target.dataset[data];
     }
     return event.target.getAttribute('data-' + data);
-    
+
   },
 
   /**
-   * Check whether user has permission to share a dirent. 
+   * Check whether user has permission to share a dirent.
    * If dirent is none, then check whether the user can share the repo
    * scene 1: root path or folder path, control the share button in the toolbar
    * scene 2: selected a dirent, control the share button in the toolbar dropdown-menu
    * scene 3: dirent list(grid list), control the share button in the dirent-item or righe-menu
-   * 
-   * @param {*} repoInfo 
-   * @param {*} userDirPermission 
-   * @param {*} dirent 
+   *
+   * @param {*} repoInfo
+   * @param {*} userDirPermission
+   * @param {*} dirent
    */
   isHasPermissionToShare: function(repoInfo, userDirPermission, dirent) {
-    
+
     let { is_admin: isAdmin, is_virtual: isVirtual, encrypted: repoEncrypted, owner_email: ownerEmail } = repoInfo;
     let isRepoOwner = ownerEmail === username;
 
diff --git a/frontend/src/view-file-text.js b/frontend/src/view-file-text.js
index 27ceafafdb..e015b581c2 100644
--- a/frontend/src/view-file-text.js
+++ b/frontend/src/view-file-text.js
@@ -119,7 +119,7 @@ class ViewFileText extends React.Component {
 
   render() {
     return (
-      <FileView 
+      <FileView
         content={
           <FileContent
             content={this.state.content}
diff --git a/frontend/src/wiki.js b/frontend/src/wiki.js
index abd9b7a516..94cf0c5893 100644
--- a/frontend/src/wiki.js
+++ b/frontend/src/wiki.js
@@ -58,7 +58,7 @@ class Wiki extends Component {
     this.loadWikiData(initialPath);
   }
 
-  loadWikiData = (initialPath) => {  
+  loadWikiData = (initialPath) => {
     this.loadSidePanel(initialPath);
 
     if (isDir === 'None') {
@@ -69,7 +69,7 @@ class Wiki extends Component {
         let fileUrl = siteRoot + 'published/' + slug + Utils.encodePath(initialPath);
         window.history.pushState({url: fileUrl, path: initialPath}, initialPath, fileUrl);
       }
-    } else if (isDir === 'True') {  
+    } else if (isDir === 'True') {
       this.showDir(initialPath);
     } else if (isDir === 'False') {
       this.showFile(initialPath);
@@ -88,7 +88,7 @@ class Wiki extends Component {
         this.loadNodeAndParentsByPath(initialPath);
       }
     }
-    
+
   }
 
   loadIndexNode = () => {
@@ -121,7 +121,7 @@ class Wiki extends Component {
     this.setState({
       isDataLoading: true,
       isViewFile: true,
-      path: filePath, 
+      path: filePath,
     });
 
     seafileAPI.getWikiFileContent(slug, filePath).then(res => {
@@ -255,9 +255,9 @@ class Wiki extends Component {
       }
     }
   }
-  
+
   onSearchedClick = (item) => {
-    let path = item.is_dir ? item.path.slice(0, item.path.length - 1) : item.path; 
+    let path = item.is_dir ? item.path.slice(0, item.path.length - 1) : item.path;
     if (this.state.currentPath === path) {
       return;
     }
@@ -270,7 +270,7 @@ class Wiki extends Component {
       if (!node) {
         index = i;
         break;
-      } 
+      }
     }
     if (index === -1) { // all the data has been loaded already.
       let tree = this.state.treeData.clone();