diff --git a/frontend/src/app.js b/frontend/src/app.js
index f9591a7ac1..7646004e85 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -85,7 +85,7 @@ class App extends Component {
       let splitUrlArray = window.location.hash.split('/');
       let repoID = splitUrlArray[splitUrlArray.length - 2];
       let url = siteRoot + 'library/' + repoID + '/';
-      navigate(url, { repalce: true });
+      navigate(url, { replace: true });
     }
   };
 
@@ -144,7 +144,7 @@ class App extends Component {
     if (selectedItem.is_dir === true) {
       this.setState({ currentTab: '', pathPrefix: [] });
       let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
-      navigate(url, { repalce: true });
+      navigate(url, { replace: true });
     } else {
       let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
       let isWeChat = Utils.isWeChat();
diff --git a/frontend/src/components/dialog/org-add-user-dialog.js b/frontend/src/components/dialog/org-add-user-dialog.js
index c04efab606..1bc2610353 100644
--- a/frontend/src/components/dialog/org-add-user-dialog.js
+++ b/frontend/src/components/dialog/org-add-user-dialog.js
@@ -17,7 +17,7 @@ class AddOrgUserDialog extends React.Component {
       email: '',
       name: '',
       password: '',
-      passwdnew: '',
+      newPassword: '',
       errMessage: '',
       isAddingUser: false,
     };
@@ -50,7 +50,7 @@ class AddOrgUserDialog extends React.Component {
     let val = Math.random().toString(36).substr(5);
     this.setState({
       password: val,
-      passwdnew: val,
+      newPassword: val,
       isPasswordVisible: false
     }, () => {
       this.passwdInput.type = 'text';
@@ -80,7 +80,7 @@ class AddOrgUserDialog extends React.Component {
 
   inputPasswordNew = (e) => {
     let passwd = e.target.value.trim();
-    this.setState({ passwdnew: passwd }, () => {
+    this.setState({ newPassword: passwd }, () => {
       if (this.state.isPasswordVisible) {
         this.passwdInput.type = 'password';
         this.passwdNewInput.type = 'password';
@@ -108,7 +108,7 @@ class AddOrgUserDialog extends React.Component {
     }
 
     let password1 = this.state.password;
-    let password2 = this.state.passwdnew;
+    let password2 = this.state.newPassword;
     if (!password1.length) {
       errMessage = gettext('Please enter password');
       this.setState({ errMessage: errMessage });
@@ -157,7 +157,7 @@ class AddOrgUserDialog extends React.Component {
             </FormGroup>
             <FormGroup>
               <Label for="userPwdNew">{gettext('Confirm Password')}</Label>
-              <Input id="userPwdNew" innerRef={input => {this.passwdNewInput = input;}} className="passwd" value={this.state.passwdnew || ''} onChange={this.inputPasswordNew} />
+              <Input id="userPwdNew" innerRef={input => {this.passwdNewInput = input;}} className="passwd" value={this.state.newPassword || ''} onChange={this.inputPasswordNew} />
             </FormGroup>
           </Form>
           {this.state.errMessage && <Label className="err-message">{this.state.errMessage}</Label>}
diff --git a/frontend/src/components/dialog/trash-dialog.js b/frontend/src/components/dialog/trash-dialog.js
index 48203c30f6..4bc9d6bc20 100644
--- a/frontend/src/components/dialog/trash-dialog.js
+++ b/frontend/src/components/dialog/trash-dialog.js
@@ -67,7 +67,7 @@ class TrashDialog extends React.Component {
   onSearchedClick = (selectedItem) => {
     if (selectedItem.is_dir === true) {
       let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
-      navigate(url, { repalce: true });
+      navigate(url, { replace: true });
     } else {
       let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
       let newWindow = window.open('about:blank');
diff --git a/frontend/src/components/search/search.js b/frontend/src/components/search/search.js
index dcf410d341..7c5e087c42 100644
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -47,7 +47,7 @@ class Search extends Component {
       hasMore: false,
       isMaskShow: false,
       showRecent: true,
-      isResultGetted: false,
+      isResultGotten: false,
       isCloseShow: false,
       isSearchInputShow: false, // for mobile
       searchPageUrl: this.baseSearchPageURL,
@@ -134,7 +134,7 @@ class Search extends Component {
   onUp = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    const { highlightIndex, resultItems, isResultGetted } = this.state;
+    const { highlightIndex, resultItems, isResultGotten } = this.state;
 
     // 01 init search, display and highlight recent search results
     if (this.state.showRecent) {
@@ -152,7 +152,7 @@ class Search extends Component {
     }
 
     // 02 global search, display and highlight searched repos
-    if (!this.props.repoID && resultItems.length > 0 && !isResultGetted) {
+    if (!this.props.repoID && resultItems.length > 0 && !isResultGotten) {
       let highlightSearchTypesIndex = this.state.highlightSearchTypesIndex - 1;
       if (highlightSearchTypesIndex < 0) {
         highlightSearchTypesIndex = resultItems.length;
@@ -169,7 +169,7 @@ class Search extends Component {
     }
 
     // 03 Internal repo search, highlight search types
-    if (!isResultGetted) {
+    if (!isResultGotten) {
       let highlightSearchTypesIndex = this.state.highlightSearchTypesIndex - 1;
       if (highlightSearchTypesIndex < 0) {
         highlightSearchTypesIndex = this.state.searchTypesMax;
@@ -178,7 +178,7 @@ class Search extends Component {
       return;
     }
 
-    // 04 When there are search results, highlighte searched items
+    // 04 When there are search results, highlight searched items
     if (highlightIndex > 0) {
       this.setState({ highlightIndex: highlightIndex - 1 }, () => {
         if (this.highlightRef) {
@@ -194,7 +194,7 @@ class Search extends Component {
   onDown = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    const { highlightIndex, resultItems, isResultGetted } = this.state;
+    const { highlightIndex, resultItems, isResultGotten } = this.state;
 
     // 01 init search, display and highlight recent search results
     if (this.state.showRecent) {
@@ -215,7 +215,7 @@ class Search extends Component {
     }
 
     // 02 global search, display and highlight searched repos
-    if (!this.props.repoID && resultItems.length > 0 && !isResultGetted) {
+    if (!this.props.repoID && resultItems.length > 0 && !isResultGotten) {
       let highlightSearchTypesIndex = this.state.highlightSearchTypesIndex + 1;
       if (highlightSearchTypesIndex > resultItems.length) {
         highlightSearchTypesIndex = 0;
@@ -234,7 +234,7 @@ class Search extends Component {
     }
 
     // 03 Internal repo search, highlight search types
-    if (!this.state.isResultGetted) {
+    if (!this.state.isResultGotten) {
       let highlightSearchTypesIndex = this.state.highlightSearchTypesIndex + 1;
       if (highlightSearchTypesIndex > this.state.searchTypesMax) {
         highlightSearchTypesIndex = 0;
@@ -243,7 +243,7 @@ class Search extends Component {
       return;
     }
 
-    // 04 When there are search results, highlighte searched items
+    // 04 When there are search results, highlight searched items
     if (highlightIndex < resultItems.length - 1) {
       this.setState({ highlightIndex: highlightIndex + 1 }, () => {
         if (this.highlightRef) {
@@ -272,8 +272,8 @@ class Search extends Component {
       return;
     }
     // global searching, searched repos needs to support enter
-    const { highlightSearchTypesIndex, resultItems, isResultGetted } = this.state;
-    if (!this.props.repoID && resultItems.length > 0 && !isResultGetted) {
+    const { highlightSearchTypesIndex, resultItems, isResultGotten } = this.state;
+    if (!this.props.repoID && resultItems.length > 0 && !isResultGotten) {
       if (highlightSearchTypesIndex === 0) {
         this.searchAllRepos();
       } else {
@@ -286,7 +286,7 @@ class Search extends Component {
         }
       }
     }
-    if (!this.state.isResultGetted) {
+    if (!this.state.isResultGotten) {
       let highlightDom = document.querySelector('.search-types-highlight');
       if (highlightDom) {
         if (highlightDom.classList.contains('search-types-folder')) {
@@ -368,7 +368,7 @@ class Search extends Component {
           isLoading: false,
           highlightIndex: 0,
           // resultItems: [],
-          isResultGetted: false,
+          isResultGotten: false,
         }, () => {
           if (!isInRepo && trimmedValue !== '') {
             this.getRepoSearchResult(newValue);
@@ -407,7 +407,7 @@ class Search extends Component {
     }
     this.setState({
       isLoading: true,
-      isResultGetted: false,
+      isResultGotten: false,
       resultItems: [],
       highlightIndex: 0,
     });
@@ -425,7 +425,7 @@ class Search extends Component {
         if (res.data.total > 0) {
           this.setState({
             resultItems: [...this.state.resultItems, ...this.formatResultItems(res.data.results)],
-            isResultGetted: true,
+            isResultGotten: true,
             page: page + 1,
             isLoading: false,
             hasMore: res.data.has_more,
@@ -435,7 +435,7 @@ class Search extends Component {
             highlightIndex: 0,
             resultItems: [],
             isLoading: false,
-            isResultGetted: true,
+            isResultGotten: true,
             hasMore: res.data.has_more,
           });
         }
@@ -458,7 +458,7 @@ class Search extends Component {
       if (res.data.total > 0) {
         this.setState({
           resultItems: [...this.state.resultItems, ...this.formatResultItems(res.data.results)],
-          isResultGetted: true,
+          isResultGotten: true,
           isLoading: false,
           page: page + 1,
           hasMore: res.data.has_more,
@@ -469,7 +469,7 @@ class Search extends Component {
         highlightIndex: 0,
         resultItems: [],
         isLoading: false,
-        isResultGetted: true,
+        isResultGotten: true,
         hasMore: res.data.has_more,
       });
     }).catch(error => {
@@ -512,7 +512,7 @@ class Search extends Component {
       inputValue: '',
       isMaskShow: false,
       isCloseShow: false,
-      isResultGetted: false,
+      isResultGotten: false,
       resultItems: [],
       highlightIndex: 0,
       isSearchInputShow: false,
@@ -521,7 +521,7 @@ class Search extends Component {
   }
 
   renderSearchResult() {
-    const { resultItems, width, showRecent, isResultGetted, isLoading } = this.state;
+    const { resultItems, width, showRecent, isResultGotten, isLoading } = this.state;
     if (!width || width === 'default') return null;
 
     if (showRecent) {
@@ -537,7 +537,7 @@ class Search extends Component {
     else if (this.state.inputValue.trim().length === 0) {
       return <div className="search-result-none">{gettext('Type characters to start search')}</div>;
     }
-    else if (!isResultGetted) {
+    else if (!isResultGotten) {
       return this.renderSearchTypes(this.state.inputValue.trim());
     }
     else if (resultItems.length > 0) {
diff --git a/frontend/src/components/search/wiki-search.js b/frontend/src/components/search/wiki-search.js
index fbda011ccb..7ce621896e 100644
--- a/frontend/src/components/search/wiki-search.js
+++ b/frontend/src/components/search/wiki-search.js
@@ -29,7 +29,7 @@ class Search extends Component {
       total: 0,
       isMaskShow: false,
       isResultShow: false,
-      isResultGetted: false,
+      isResultGotten: false,
       isCloseShow: false,
       isSearchInputShow: false, // for mobile
     };
@@ -66,7 +66,7 @@ class Search extends Component {
     if (this.inputValue === '' || getValueLength(this.inputValue) < 3) {
       this.setState({
         isResultShow: false,
-        isResultGetted: false
+        isResultGotten: false
       });
       return false;
     }
@@ -91,7 +91,7 @@ class Search extends Component {
     }
     this.setState({
       isResultShow: true,
-      isResultGetted: false
+      isResultGotten: false
     });
 
     this.source = seafileAPI.getSource();
@@ -104,7 +104,7 @@ class Search extends Component {
       if (!res.data.total) {
         _this.setState({
           resultItems: [],
-          isResultGetted: true
+          isResultGotten: true
         });
         _this.source = null;
         return;
@@ -114,7 +114,7 @@ class Search extends Component {
       _this.setState({
         total: res.data.total,
         resultItems: page == 1 ? items : this.state.resultItems.concat(items),
-        isResultGetted: true
+        isResultGotten: true
       });
       _this.source = null;
     }).catch(error => {
@@ -161,7 +161,7 @@ class Search extends Component {
       isMaskShow: false,
       isCloseShow: false,
       isResultShow: false,
-      isResultGetted: false,
+      isResultGotten: false,
       resultItems: [],
       isSearchInputShow: false,
     });
@@ -184,7 +184,7 @@ class Search extends Component {
     if (!this.state.isResultShow) {
       return;
     }
-    if (!this.state.isResultGetted || getValueLength(this.inputValue) < 3) {
+    if (!this.state.isResultGotten || getValueLength(this.inputValue) < 3) {
       return (
         <span className="loading-icon loading-tip"></span>
       );
diff --git a/frontend/src/components/search/wiki2-search.js b/frontend/src/components/search/wiki2-search.js
index 357129bd5a..0b4dee66c3 100644
--- a/frontend/src/components/search/wiki2-search.js
+++ b/frontend/src/components/search/wiki2-search.js
@@ -22,7 +22,7 @@ function Wiki2Search({ setCurrentPage, config, getCurrentPageId, wikiId }) {
   const [results, setResults] = useState([]);
   const [highlightIndex, setHighlightIndex] = useState(-1);
   const [isLoading, setIsLoading] = useState(false);
-  const [isResultGetted, setIsResultGetted] = useState(false);
+  const [isResultGotten, setIsResultGotten] = useState(false);
   let searchResultListContainerRef = useRef(null);
   let highlightRef = useRef(null);
 
@@ -47,7 +47,7 @@ function Wiki2Search({ setCurrentPage, config, getCurrentPageId, wikiId }) {
     setValue('');
     setHighlightIndex(0);
     setResults([]);
-    setIsResultGetted(false);
+    setIsResultGotten(false);
     setIsModalOpen(false);
   }, []);
 
@@ -56,11 +56,11 @@ function Wiki2Search({ setCurrentPage, config, getCurrentPageId, wikiId }) {
       resetToDefault();
       return;
     }
-    if (isResultGetted) {
+    if (isResultGotten) {
       if (isEnter(e)) {
-        const hightlightResult = results[highlightIndex];
-        if (hightlightResult && hightlightResult.page.id !== getCurrentPageId()) {
-          setCurrentPage(hightlightResult.page.id);
+        const highlightResult = results[highlightIndex];
+        if (highlightResult && highlightResult.page.id !== getCurrentPageId()) {
+          setCurrentPage(highlightResult.page.id);
           resetToDefault();
         }
       } else if (isUp(e)) {
@@ -74,7 +74,7 @@ function Wiki2Search({ setCurrentPage, config, getCurrentPageId, wikiId }) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isResultGetted, value, results, highlightIndex]);
+  }, [isResultGotten, value, results, highlightIndex]);
 
   const onUp = useCallback((e, highlightIndex) => {
     e.preventDefault();
@@ -114,7 +114,7 @@ function Wiki2Search({ setCurrentPage, config, getCurrentPageId, wikiId }) {
     if (!searchValue.trim()) return;
     setIsLoading(true);
     setHighlightIndex(-1);
-    setIsResultGetted(false);
+    setIsResultGotten(false);
     setResults([]);
     searchAPI.searchWiki(searchValue.trim(), wikiId).then(res => {
       if (res.data.results) {
@@ -129,12 +129,12 @@ function Wiki2Search({ setCurrentPage, config, getCurrentPageId, wikiId }) {
         setResults(newResults);
         setHighlightIndex(0);
         setIsLoading(false);
-        setIsResultGetted(true);
+        setIsResultGotten(true);
       } else {
         setResults([]);
         setHighlightIndex(-1);
         setIsLoading(false);
-        setIsResultGetted(true);
+        setIsResultGotten(true);
       }
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -161,7 +161,7 @@ function Wiki2Search({ setCurrentPage, config, getCurrentPageId, wikiId }) {
                 placeholder={gettext('Search')}
                 autoComplete="off"
                 value={value}
-                onChange={(e) => { setValue(e.target.value); setIsResultGetted(false); }}
+                onChange={(e) => { setValue(e.target.value); setIsResultGotten(false); }}
                 onKeyDown={onKeyDown}
                 autoFocus={true}
               />
@@ -169,9 +169,9 @@ function Wiki2Search({ setCurrentPage, config, getCurrentPageId, wikiId }) {
             </div>
             <div className="wiki2-search-result-container" style={{ maxHeight: (window.innerHeight - 200) + 'px' }} ref={searchResultListContainerRef}>
               {isLoading && <Loading />}
-              {(value === '' && !isResultGetted) &&
+              {(value === '' && !isResultGotten) &&
                 <p className='sf-tip-default d-flex justify-content-center'>{gettext('Type characters to start search')}</p>}
-              {(value !== '' && isResultGetted && results.length === 0) &&
+              {(value !== '' && isResultGotten && results.length === 0) &&
                 <p className='sf-tip-default d-flex justify-content-center'>{gettext('No result')}</p>}
               {results.map((result, index) => {
                 return (
diff --git a/frontend/src/components/share-link-panel/link-creation.js b/frontend/src/components/share-link-panel/link-creation.js
index b48177d52a..73bdc80650 100644
--- a/frontend/src/components/share-link-panel/link-creation.js
+++ b/frontend/src/components/share-link-panel/link-creation.js
@@ -42,7 +42,7 @@ class LinkCreation extends React.Component {
       expireDays: this.defaultExpireDays,
       expDate: null,
       password: '',
-      passwdnew: '',
+      newPassword: '',
       errorInfo: '',
       currentPermission: props.currentPermission,
 
@@ -68,7 +68,7 @@ class LinkCreation extends React.Component {
     this.setState({
       isShowPasswordInput: !this.state.isShowPasswordInput,
       password: '',
-      passwdnew: '',
+      newPassword: '',
       errorInfo: ''
     });
   };
@@ -83,7 +83,7 @@ class LinkCreation extends React.Component {
     let val = Utils.generatePassword(shareLinkPasswordMinLength);
     this.setState({
       password: val,
-      passwdnew: val
+      newPassword: val
     });
   };
 
@@ -94,7 +94,7 @@ class LinkCreation extends React.Component {
 
   inputPasswordNew = (e) => {
     let passwd = e.target.value.trim();
-    this.setState({ passwdnew: passwd });
+    this.setState({ newPassword: passwd });
   };
 
   setPermission = (e) => {
@@ -169,7 +169,7 @@ class LinkCreation extends React.Component {
 
   validateParamsInput = () => {
     const { type } = this.props;
-    let { linkAmount, isShowPasswordInput, password, passwdnew, isExpireChecked, expType, expireDays, expDate } = this.state;
+    let { linkAmount, isShowPasswordInput, password, newPassword, isExpireChecked, expType, expireDays, expDate } = this.state;
 
     if (type === 'batch') {
       if (!Number.isInteger(parseInt(linkAmount)) || parseInt(linkAmount) <= 1) {
@@ -191,7 +191,7 @@ class LinkCreation extends React.Component {
         this.setState({ errorInfo: gettext('The password is too short.') });
         return false;
       }
-      if (password !== passwdnew) {
+      if (password !== newPassword) {
         this.setState({ errorInfo: gettext('Passwords don\'t match') });
         return false;
       }
@@ -326,7 +326,7 @@ class LinkCreation extends React.Component {
                 </FormGroup>
                 <FormGroup>
                   <Label for="passwd-again">{gettext('Password again')}</Label>
-                  <Input id="passwd-again" style={{ width: inputWidth }} type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.passwdnew || ''} onChange={this.inputPasswordNew} />
+                  <Input id="passwd-again" style={{ width: inputWidth }} type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.newPassword || ''} onChange={this.inputPasswordNew} />
                 </FormGroup>
               </div>
             }
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 f9c68353fc..67c2f9ee51 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
@@ -61,7 +61,7 @@ class SharedRepoListItem extends React.Component {
       isChangePasswordDialogShow: false,
       isResetPasswordDialogShow: false,
     };
-    this.isDeparementOnwerGroupMember = false;
+    this.isDepartmentOwnerGroupMember = false;
   }
 
   onMouseEnter = () => {
@@ -146,8 +146,8 @@ class SharedRepoListItem extends React.Component {
   getRepoComputeParams = () => {
     const { repo, currentViewMode } = this.props;
 
-    const useBigLibaryIcon = currentViewMode == GRID_MODE;
-    const iconUrl = Utils.getLibIconUrl(repo, useBigLibaryIcon);
+    const useBigLibraryIcon = currentViewMode == GRID_MODE;
+    const iconUrl = Utils.getLibIconUrl(repo, useBigLibraryIcon);
     let iconTitle = Utils.getLibIconTitle(repo);
     let libPath = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
 
@@ -383,7 +383,7 @@ class SharedRepoListItem extends React.Component {
   generatorOperations = () => {
     let { repo, currentGroup } = this.props;
     // todo this have a bug; use current api is not return admins param;
-    let isStaff = currentGroup && currentGroup.admins && currentGroup.admins.indexOf(username) > -1; // for group repolist;
+    let isStaff = currentGroup && currentGroup.admins && currentGroup.admins.indexOf(username) > -1; // for group repo list;
     let isRepoOwner = repo.owner_email === username;
     let isAdmin = repo.is_admin;
     let operations = [];
@@ -392,7 +392,7 @@ class SharedRepoListItem extends React.Component {
         // is group admin
         if (isStaff) {
           if (repo.owner_email == currentGroup.id + '@seafile_group') {
-            this.isDeparementOnwerGroupMember = true;
+            this.isDepartmentOwnerGroupMember = true;
             operations = ['Rename', 'Transfer'];
             if (folderPermEnabled) {
               operations.push('Folder Permission');
@@ -448,7 +448,7 @@ class SharedRepoListItem extends React.Component {
       }
     } else {
       operations = this.generatorOperations().filter(item => item != 'Divider');
-      if (this.isDeparementOnwerGroupMember) {
+      if (this.isDepartmentOwnerGroupMember) {
         operations.unshift('Unshare');
         operations.unshift('Share');
       }
@@ -496,7 +496,7 @@ class SharedRepoListItem extends React.Component {
     const unshareOperation = <i className="op-icon sf2-icon-x3" title={gettext('Unshare')} role="button" aria-label={gettext('Unshare')} onClick={this.onItemUnshare}></i>;
     const deleteOperation = <i className="op-icon sf3-font-delete1 sf3-font" title={gettext('Delete')} role="button" aria-label={gettext('Delete')} onClick={this.onItemDeleteToggle}></i>;
 
-    if (this.isDeparementOnwerGroupMember) {
+    if (this.isDepartmentOwnerGroupMember) {
       const advancedOperations = this.getAdvancedOperations();
       return (
         <Fragment>
diff --git a/frontend/src/components/toolbar/view-file-toolbar.js b/frontend/src/components/toolbar/view-file-toolbar.js
index a28028d925..6806cf9c0f 100644
--- a/frontend/src/components/toolbar/view-file-toolbar.js
+++ b/frontend/src/components/toolbar/view-file-toolbar.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem } from 'reactstrap';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
-import ModalPotal from '../modal-portal';
+import ModalPortal from '../modal-portal';
 import ShareDialog from '../dialog/share-dialog';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 
@@ -205,7 +205,7 @@ class ViewFileToolbar extends React.Component {
         </Dropdown>
         }
         {this.state.isShareDialogShow && (
-          <ModalPotal>
+          <ModalPortal>
             <ShareDialog
               itemType={'file'}
               itemName={Utils.getFileName(this.props.path)}
@@ -217,10 +217,10 @@ class ViewFileToolbar extends React.Component {
               isGroupOwnedRepo={this.props.isGroupOwnedRepo}
               toggleDialog={this.onShareToggle}
             />
-          </ModalPotal>
+          </ModalPortal>
         )}
         {this.state.isEditTagDialogShow && (
-          <ModalPotal>
+          <ModalPortal>
             <EditFileTagDialog
               filePath={this.props.path}
               repoID={this.props.repoID}
@@ -229,7 +229,7 @@ class ViewFileToolbar extends React.Component {
               toggleCancel={this.onEditFileTagToggle}
               onFileTagChanged={this.props.onFileTagChanged}
             />
-          </ModalPotal>
+          </ModalPortal>
         )}
       </Fragment>
     );
diff --git a/frontend/src/components/wiki-card-view/wiki-card-group.js b/frontend/src/components/wiki-card-view/wiki-card-group.js
index fa886966df..87919556f9 100644
--- a/frontend/src/components/wiki-card-view/wiki-card-group.js
+++ b/frontend/src/components/wiki-card-view/wiki-card-group.js
@@ -15,7 +15,7 @@ const propTypes = {
   isShowAvatar: PropTypes.bool.isRequired,
   renameWiki: PropTypes.func.isRequired,
   convertWiki: PropTypes.func,
-  toggelAddWikiDialog: PropTypes.func,
+  toggleAddWikiDialog: PropTypes.func,
   sidePanelRate: PropTypes.number,
   isSidePanelFolded: PropTypes.bool,
 };
@@ -51,7 +51,7 @@ class WikiCardGroup extends Component {
   };
 
   render() {
-    const { wikis, title, isDepartment, toggelAddWikiDialog, group } = this.props;
+    const { wikis, title, isDepartment, toggleAddWikiDialog, group } = this.props;
     const containerWidth = this.getContainerWidth();
     const numberOfWiki = Math.floor(containerWidth / 180);
     const grids = (Math.floor((containerWidth - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki);
@@ -94,8 +94,8 @@ class WikiCardGroup extends Component {
               />
             );
           })}
-          {toggelAddWikiDialog &&
-            <WikiCardItemAdd toggelAddWikiDialog={toggelAddWikiDialog}/>
+          {toggleAddWikiDialog &&
+            <WikiCardItemAdd toggleAddWikiDialog={toggleAddWikiDialog}/>
           }
         </div>
       </div>
diff --git a/frontend/src/components/wiki-card-view/wiki-card-item-add.js b/frontend/src/components/wiki-card-view/wiki-card-item-add.js
index e72c1ecc3a..22b3512e19 100644
--- a/frontend/src/components/wiki-card-view/wiki-card-item-add.js
+++ b/frontend/src/components/wiki-card-view/wiki-card-item-add.js
@@ -6,7 +6,7 @@ function WikiCardItemAdd(props) {
   return (
     <div
       className={'wiki-card-item wiki-card-item-add d-flex flex-column align-items-center justify-content-center'}
-      onClick={props.toggelAddWikiDialog}
+      onClick={props.toggleAddWikiDialog}
     >
       <span>+</span>
       <span>{gettext('Add Wiki')}</span>
@@ -15,7 +15,7 @@ function WikiCardItemAdd(props) {
 }
 
 WikiCardItemAdd.propTypes = {
-  toggelAddWikiDialog: PropTypes.func.isRequired,
+  toggleAddWikiDialog: PropTypes.func.isRequired,
 };
 
 export default WikiCardItemAdd;
diff --git a/frontend/src/components/wiki-card-view/wiki-card-view.js b/frontend/src/components/wiki-card-view/wiki-card-view.js
index c18f919383..cda4e99466 100644
--- a/frontend/src/components/wiki-card-view/wiki-card-view.js
+++ b/frontend/src/components/wiki-card-view/wiki-card-view.js
@@ -15,7 +15,7 @@ const propTypes = {
   leaveSharedWiki: PropTypes.func.isRequired,
   unshareGroupWiki: PropTypes.func.isRequired,
   convertWiki: PropTypes.func.isRequired,
-  toggelAddWikiDialog: PropTypes.func,
+  toggleAddWikiDialog: PropTypes.func,
   sidePanelRate: PropTypes.number,
   isSidePanelFolded: PropTypes.bool,
 };
@@ -66,7 +66,7 @@ class WikiCardView extends Component {
 
   render() {
     let { loading, errorMsg, wikis, groupWikis } = this.props.data;
-    const { toggelAddWikiDialog, sidePanelRate, isSidePanelFolded } = this.props;
+    const { toggleAddWikiDialog, sidePanelRate, isSidePanelFolded } = this.props;
 
     if (loading) {
       return <span className="loading-icon loading-tip"></span>;
@@ -88,7 +88,7 @@ class WikiCardView extends Component {
         title={gettext('My Wikis')}
         isDepartment={false}
         isShowAvatar={false}
-        toggelAddWikiDialog={canPublishRepo ? toggelAddWikiDialog.bind(this, null) : null}
+        toggleAddWikiDialog={canPublishRepo ? toggleAddWikiDialog.bind(this, null) : null}
       />
     );
     wikiCardGroups.push(
@@ -103,7 +103,7 @@ class WikiCardView extends Component {
         isShowAvatar={false}
         sidePanelRate={sidePanelRate}
         isSidePanelFolded={isSidePanelFolded}
-        toggelAddWikiDialog={null}
+        toggleAddWikiDialog={null}
       />
     );
     for (let i = 0; i < groupWikis.length; i++) {
@@ -122,7 +122,7 @@ class WikiCardView extends Component {
             title={groupWiki.group_name}
             isDepartment={true}
             isShowAvatar={false}
-            toggelAddWikiDialog={(canPublishRepo && this.state.departmentMap[groupWiki.group_id]) ? toggelAddWikiDialog.bind(this, groupWiki.group_id) : null}
+            toggleAddWikiDialog={(canPublishRepo && this.state.departmentMap[groupWiki.group_id]) ? toggleAddWikiDialog.bind(this, groupWiki.group_id) : null}
           />
         );
       }
diff --git a/frontend/src/css/wiki-trash-dialog.css b/frontend/src/css/wiki-trash-dialog.css
index e77ea046df..3c4565c280 100644
--- a/frontend/src/css/wiki-trash-dialog.css
+++ b/frontend/src/css/wiki-trash-dialog.css
@@ -7,7 +7,7 @@
   display: flex;
 }
 
-.trash-dialog .modal-header .but-contral {
+.trash-dialog .modal-header .button-control {
   margin-left: auto;
 }
 
diff --git a/frontend/src/file-history-old.js b/frontend/src/file-history-old.js
index f625ffe23a..f5d9b3e73b 100644
--- a/frontend/src/file-history-old.js
+++ b/frontend/src/file-history-old.js
@@ -195,12 +195,12 @@ class FileHistory extends React.Component {
     editUtilities.revertFile(filePath, commitId).then(res => {
       if (res.data.success) {
         this.setState({ isLoading: true });
-        this.refershFileList();
+        this.refreshFileList();
       }
     });
   };
 
-  refershFileList() {
+  refreshFileList() {
     if (useNewAPI) {
       editUtilities.listFileHistoryRecords(filePath, 1, PER_PAGE).then((res) => {
         this.initNewRecords(res.data);
diff --git a/frontend/src/metadata/hooks/metadata.js b/frontend/src/metadata/hooks/metadata.js
index 8d6c10276f..4bc8ec5238 100644
--- a/frontend/src/metadata/hooks/metadata.js
+++ b/frontend/src/metadata/hooks/metadata.js
@@ -86,7 +86,7 @@ export const MetadataProvider = ({ repoID, currentRepoInfo, hideMetadataView, se
         }
         viewsMap.current[FACE_RECOGNITION_VIEW_ID] = {
           _id: FACE_RECOGNITION_VIEW_ID,
-          name: gettext('Photos - classfied by people'),
+          name: gettext('Photos - classified by people'),
           type: VIEW_TYPE.FACE_RECOGNITION,
         };
         setNavigation(navigation);
diff --git a/frontend/src/pages/dashboard/activity-item.js b/frontend/src/pages/dashboard/activity-item.js
index 2d28481e40..8de5ef0179 100644
--- a/frontend/src/pages/dashboard/activity-item.js
+++ b/frontend/src/pages/dashboard/activity-item.js
@@ -19,6 +19,8 @@ const activityPropTypes = {
   isDesktop: PropTypes.bool.isRequired,
 };
 
+const RIGHT_ARROW = '=>';
+
 class ActivityItem extends Component {
 
   constructor(props) {
@@ -66,7 +68,7 @@ class ActivityItem extends Component {
           break;
         case 'rename':
           op = gettext('Renamed library');
-          details = <span>{item.old_repo_name} => {libLink}</span>;
+          details = <span>{item.old_repo_name} {RIGHT_ARROW} {libLink}</span>;
           break;
         case 'delete':
           op = gettext('Deleted library');
@@ -127,14 +129,14 @@ class ActivityItem extends Component {
           break;
         case 'rename':
           op = gettext('Renamed file');
-          details = <span>{item.old_name} => {fileLink}</span>;
+          details = <span>{item.old_name} {RIGHT_ARROW} {fileLink}</span>;
           moreDetails = true;
           break;
         case 'move':
           // eslint-disable-next-line
           const filePathLink = <a href={fileURL}>{item.path}</a>;
           op = gettext('Moved file');
-          details = <span>{item.old_path} => {filePathLink}</span>;
+          details = <span>{item.old_path} {RIGHT_ARROW} {filePathLink}</span>;
           moreDetails = true;
           break;
         case 'edit': // update
@@ -164,14 +166,14 @@ class ActivityItem extends Component {
           break;
         case 'rename':
           op = gettext('Renamed folder');
-          details = <span>{item.old_name} => {dirLink}</span>;
+          details = <span>{item.old_name} {RIGHT_ARROW} {dirLink}</span>;
           moreDetails = true;
           break;
         case 'move':
           // eslint-disable-next-line
           const dirPathLink = <a href={dirURL}>{item.path}</a>;
           op = gettext('Moved folder');
-          details = <span>{item.old_path} => {dirPathLink}</span>;
+          details = <span>{item.old_path} {RIGHT_ARROW} {dirPathLink}</span>;
           moreDetails = true;
           break;
       }
diff --git a/frontend/src/pages/file-history/side-panel.js b/frontend/src/pages/file-history/side-panel.js
index ce35e33fcd..7ff4e7e410 100644
--- a/frontend/src/pages/file-history/side-panel.js
+++ b/frontend/src/pages/file-history/side-panel.js
@@ -36,7 +36,7 @@ class SidePanel extends React.Component {
     });
   }
 
-  refershFileList() {
+  refreshFileList() {
     editUtilities.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
       this.initResultState(res.data);
     });
@@ -87,7 +87,7 @@ class SidePanel extends React.Component {
     editUtilities.revertFile(filePath, commitId).then(res => {
       if (res.data.success) {
         this.setState({ isLoading: true });
-        this.refershFileList();
+        this.refreshFileList();
       }
       let message = gettext('Successfully restored.');
       toaster.success(message);
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 7477deb75e..0f7c32e939 100644
--- a/frontend/src/pages/my-libs/mylib-repo-list-item.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-item.js
@@ -297,8 +297,8 @@ class MylibRepoListItem extends React.Component {
   renderPCUI = () => {
     const { isStarred } = this.state;
     const { repo, currentViewMode = LIST_MODE } = this.props;
-    let useBigLibaryIcon = currentViewMode == GRID_MODE;
-    let iconUrl = Utils.getLibIconUrl(repo, useBigLibaryIcon);
+    let useBigLibraryIcon = currentViewMode == GRID_MODE;
+    let iconUrl = Utils.getLibIconUrl(repo, useBigLibraryIcon);
     let iconTitle = Utils.getLibIconTitle(repo);
     let repoURL = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
     return currentViewMode == LIST_MODE ? (
diff --git a/frontend/src/pages/shared-libs/shared-libraries.js b/frontend/src/pages/shared-libs/shared-libraries.js
index 56db86fccc..c56c71199a 100644
--- a/frontend/src/pages/shared-libs/shared-libraries.js
+++ b/frontend/src/pages/shared-libs/shared-libraries.js
@@ -14,7 +14,7 @@ import Repo from '../../models/repo';
 import Loading from '../../components/loading';
 import EmptyTip from '../../components/empty-tip';
 import LibsMobileThead from '../../components/libs-mobile-thead';
-import ModalPotal from '../../components/modal-portal';
+import ModalPortal from '../../components/modal-portal';
 import ShareDialog from '../../components/dialog/share-dialog';
 import SortOptionsDialog from '../../components/dialog/sort-options';
 import RepoMonitoredIcon from '../../components/repo-monitored-icon';
@@ -338,8 +338,8 @@ class Item extends Component {
 
     const { isStarred } = this.state;
     const { data, currentViewMode = LIST_MODE } = this.props;
-    const useBigLibaryIcon = currentViewMode == GRID_MODE;
-    data.icon_url = Utils.getLibIconUrl(data, useBigLibaryIcon);
+    const useBigLibraryIcon = currentViewMode == GRID_MODE;
+    data.icon_url = Utils.getLibIconUrl(data, useBigLibraryIcon);
     data.icon_title = Utils.getLibIconTitle(data);
 
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
@@ -449,7 +449,7 @@ class Item extends Component {
             </div>
           )}
           {this.state.isShowSharedDialog && (
-            <ModalPotal>
+            <ModalPortal>
               <ShareDialog
                 itemType={'library'}
                 itemName={data.repo_name}
@@ -461,7 +461,7 @@ class Item extends Component {
                 isAdmin={true}
                 toggleDialog={this.toggleShareDialog}
               />
-            </ModalPotal>
+            </ModalPortal>
           )}
         </Fragment>
       );
@@ -500,7 +500,7 @@ class Item extends Component {
             </td>
           </tr>
           {this.state.isShowSharedDialog && (
-            <ModalPotal>
+            <ModalPortal>
               <ShareDialog
                 itemType={'library'}
                 itemName={data.repo_name}
@@ -512,7 +512,7 @@ class Item extends Component {
                 isAdmin={true}
                 toggleDialog={this.toggleShareDialog}
               />
-            </ModalPotal>
+            </ModalPortal>
           )}
         </Fragment>
       );
diff --git a/frontend/src/pages/sys-admin/groups/group-members.js b/frontend/src/pages/sys-admin/groups/group-members.js
index a7fc03f74b..936dae22ed 100644
--- a/frontend/src/pages/sys-admin/groups/group-members.js
+++ b/frontend/src/pages/sys-admin/groups/group-members.js
@@ -253,7 +253,7 @@ class GroupMembers extends Component {
     });
   };
 
-  toggleAddMemgerDialog = () => {
+  toggleAddMemberDialog = () => {
     this.setState({ isAddMemberDialogOpen: !this.state.isAddMemberDialogOpen });
   };
 
@@ -320,7 +320,7 @@ class GroupMembers extends Component {
     return (
       <Fragment>
         <MainPanelTopbar {...this.props}>
-          <Button className="btn btn-secondary operation-item" onClick={this.toggleAddMemgerDialog}>{gettext('Add Member')}</Button>
+          <Button className="btn btn-secondary operation-item" onClick={this.toggleAddMemberDialog}>{gettext('Add Member')}</Button>
         </MainPanelTopbar>
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
@@ -347,7 +347,7 @@ class GroupMembers extends Component {
         {isAddMemberDialogOpen &&
           <SysAdminGroupAddMemberDialog
             addMembers={this.addMembers}
-            toggle={this.toggleAddMemgerDialog}
+            toggle={this.toggleAddMemberDialog}
           />
         }
       </Fragment>
diff --git a/frontend/src/pages/sys-admin/groups/groups.js b/frontend/src/pages/sys-admin/groups/groups.js
index 61be163def..61fb5dcba8 100644
--- a/frontend/src/pages/sys-admin/groups/groups.js
+++ b/frontend/src/pages/sys-admin/groups/groups.js
@@ -62,8 +62,8 @@ class Groups extends Component {
     });
   };
 
-  createGroup = (groupName, OnwerEmail) => {
-    systemAdminAPI.sysAdminCreateNewGroup(groupName, OnwerEmail).then(res => {
+  createGroup = (groupName, ownerEmail) => {
+    systemAdminAPI.sysAdminCreateNewGroup(groupName, ownerEmail).then(res => {
       let newGroupList = this.state.groupList;
       newGroupList.unshift(res.data);
       this.setState({
diff --git a/frontend/src/pages/sys-admin/index.js b/frontend/src/pages/sys-admin/index.js
index 9522038352..dff28cb6bf 100644
--- a/frontend/src/pages/sys-admin/index.js
+++ b/frontend/src/pages/sys-admin/index.js
@@ -174,7 +174,7 @@ class SysAdmin extends React.Component {
     for (let i = 0, len = pageList.length; i < len; i++) {
       urlPartList = pageList[i].urlPartList;
       tab = pageList[i].tab;
-      for (let j = 0, jlen = urlPartList.length; j < jlen; j++) {
+      for (let j = 0, len = urlPartList.length; j < len; j++) {
         if (location.href.indexOf(`${urlBase}${urlPartList[j]}`) != -1) {
           return tab;
         }
diff --git a/frontend/src/pages/sys-admin/users/user-info.js b/frontend/src/pages/sys-admin/users/user-info.js
index d9b682daa8..5bef503f79 100644
--- a/frontend/src/pages/sys-admin/users/user-info.js
+++ b/frontend/src/pages/sys-admin/users/user-info.js
@@ -71,7 +71,7 @@ class Content extends Component {
     this.toggleDialog('login_id', gettext('Set Login ID'));
   };
 
-  toggleSetUserComtactEmailDialog = () => {
+  toggleSetUserContactEmailDialog = () => {
     this.toggleDialog('contact_email', gettext('Set Contact Email'));
   };
 
@@ -140,7 +140,7 @@ class Content extends Component {
             <dt className="info-item-heading">{gettext('Contact Email')}</dt>
             <dd className="info-item-content">
               {user.contact_email || '--'}
-              {this.showEditIcon(this.toggleSetUserComtactEmailDialog)}
+              {this.showEditIcon(this.toggleSetUserContactEmailDialog)}
             </dd>
 
             <dt className="info-item-heading">{gettext('Role')}</dt>
diff --git a/frontend/src/pages/sys-admin/users/users.js b/frontend/src/pages/sys-admin/users/users.js
index dfb26a5abc..0560ef5ac9 100644
--- a/frontend/src/pages/sys-admin/users/users.js
+++ b/frontend/src/pages/sys-admin/users/users.js
@@ -104,8 +104,8 @@ class Users extends Component {
         hasUserSelected = true;
         selectedUserList.push(user);
       } else {
-        selectedUserList = selectedUserList.filter(thisuser => {
-          return thisuser.email != user.email;
+        selectedUserList = selectedUserList.filter(thisUser => {
+          return thisUser.email != user.email;
         });
       }
       return user;
diff --git a/frontend/src/pages/wiki2/side-panel.js b/frontend/src/pages/wiki2/side-panel.js
index 533b395a6c..d95e13713f 100644
--- a/frontend/src/pages/wiki2/side-panel.js
+++ b/frontend/src/pages/wiki2/side-panel.js
@@ -105,7 +105,7 @@ class SidePanel extends PureComponent {
     this.props.updateWikiConfig(config);
   };
 
-  toggelTrashDialog = () => {
+  toggleTrashDialog = () => {
     this.setState({ isShowTrashDialog: !this.state.isShowTrashDialog });
   };
 
@@ -128,7 +128,7 @@ class SidePanel extends PureComponent {
             duplicatePage={this.duplicatePage}
             getCurrentPageId={this.props.getCurrentPageId}
             addPageInside={this.addPageInside}
-            toggelTrashDialog={this.toggelTrashDialog}
+            toggleTrashDialog={this.toggleTrashDialog}
           />
         }
       </div>
@@ -193,7 +193,7 @@ class SidePanel extends PureComponent {
         {this.state.isShowTrashDialog && (
           <WikiTrashDialog
             showTrashDialog={this.state.isShowTrashDialog}
-            toggleTrashDialog={this.toggelTrashDialog}
+            toggleTrashDialog={this.toggleTrashDialog}
             getWikiConfig={this.props.getWikiConfig}
           />
         )}
diff --git a/frontend/src/pages/wiki2/wiki-nav/wiki-nav.js b/frontend/src/pages/wiki2/wiki-nav/wiki-nav.js
index 2cdb7dc5e9..42ed4b143f 100644
--- a/frontend/src/pages/wiki2/wiki-nav/wiki-nav.js
+++ b/frontend/src/pages/wiki2/wiki-nav/wiki-nav.js
@@ -22,7 +22,7 @@ class WikiNav extends Component {
     getCurrentPageId: PropTypes.func,
     addPageInside: PropTypes.func,
     updateWikiConfig: PropTypes.func.isRequired,
-    toggelTrashDialog: PropTypes.func.isRequired,
+    toggleTrashDialog: PropTypes.func.isRequired,
   };
 
   constructor(props) {
@@ -108,7 +108,7 @@ class WikiNav extends Component {
           return this.renderPage(item, index, pages.length, isOnlyOnePage, id_page_map, layerDragProps);
         })}
         {wikiPermission !== 'public' &&
-          <div className={classNames('wiki2-trash', { 'mt-0': !pagesLen })} onClick={this.props.toggelTrashDialog}>
+          <div className={classNames('wiki2-trash', { 'mt-0': !pagesLen })} onClick={this.props.toggleTrashDialog}>
             <span className="sf3-font-trash sf3-font mr-2"></span>
             <span>{gettext('Trash')}</span>
           </div>
diff --git a/frontend/src/pages/wiki2/wiki-trash-dialog.js b/frontend/src/pages/wiki2/wiki-trash-dialog.js
index 0bcbcb26a2..a5cdc6f402 100644
--- a/frontend/src/pages/wiki2/wiki-trash-dialog.js
+++ b/frontend/src/pages/wiki2/wiki-trash-dialog.js
@@ -92,7 +92,7 @@ class WikiTrashDialog extends React.Component {
         <ModalHeader
           close={
             <>
-              <div className="but-contral">
+              <div className="button-control">
                 {(isAdmin && enableUserCleanTrash) &&
                   <button className="btn btn-secondary clean flex-shrink-0 ml-4" onClick={this.cleanTrash}>{gettext('Clean')}</button>
                 }
diff --git a/frontend/src/pages/wikis/wikis.js b/frontend/src/pages/wikis/wikis.js
index a063366078..6b8bdc9904 100644
--- a/frontend/src/pages/wikis/wikis.js
+++ b/frontend/src/pages/wikis/wikis.js
@@ -87,7 +87,7 @@ class Wikis extends Component {
     this.setState({ isShowAddWikiMenu: !this.state.isShowAddWikiMenu });
   };
 
-  toggelAddWikiDialog = (currentDeptID) => {
+  toggleAddWikiDialog = (currentDeptID) => {
     if (this.state.isShowAddDialog) {
       this.setState({
         isShowAddDialog: false,
@@ -326,7 +326,7 @@ class Wikis extends Component {
         {this.state.isShowAddDialog &&
           <ModalPortal>
             <AddWikiDialog
-              toggleCancel={this.toggelAddWikiDialog}
+              toggleCancel={this.toggleAddWikiDialog}
               addWiki={this.addWiki}
               currentDeptID={this.state.currentDeptID}
             />
@@ -349,7 +349,7 @@ class Wikis extends Component {
                       <span className="sf3-font sf3-font-down" aria-hidden="true"></span>
                     </DropdownToggle>
                     <DropdownMenu positionFixed={true}>
-                      <DropdownItem onClick={() => {this.toggelAddWikiDialog();}}>{gettext('Add Wiki')}</DropdownItem>
+                      <DropdownItem onClick={() => {this.toggleAddWikiDialog();}}>{gettext('Add Wiki')}</DropdownItem>
                     </DropdownMenu>
                   </Dropdown>
                 }
@@ -364,7 +364,7 @@ class Wikis extends Component {
                   unshareGroupWiki={this.unshareGroupWiki}
                   renameWiki={this.renameWiki}
                   convertWiki={this.convertWiki}
-                  toggelAddWikiDialog={this.toggelAddWikiDialog}
+                  toggleAddWikiDialog={this.toggleAddWikiDialog}
                   sidePanelRate={this.props.sidePanelRate}
                   isSidePanelFolded={this.props.isSidePanelFolded}
                 />
diff --git a/frontend/src/repo-folder-trash.js b/frontend/src/repo-folder-trash.js
index 2d068fd058..4f8b2515ed 100644
--- a/frontend/src/repo-folder-trash.js
+++ b/frontend/src/repo-folder-trash.js
@@ -74,7 +74,7 @@ class RepoFolderTrash extends React.Component {
   onSearchedClick = (selectedItem) => {
     if (selectedItem.is_dir === true) {
       let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
-      navigate(url, { repalce: true });
+      navigate(url, { replace: true });
     } else {
       let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
       let newWindow = window.open('about:blank');
diff --git a/frontend/src/repo-history.js b/frontend/src/repo-history.js
index 3d0a690837..43f0fe149f 100644
--- a/frontend/src/repo-history.js
+++ b/frontend/src/repo-history.js
@@ -79,7 +79,7 @@ class RepoHistory extends React.Component {
   onSearchedClick = (selectedItem) => {
     if (selectedItem.is_dir === true) {
       let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
-      navigate(url, { repalce: true });
+      navigate(url, { replace: true });
     } else {
       let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
       let newWindow = window.open('about:blank');
diff --git a/frontend/src/repo-snapshot.js b/frontend/src/repo-snapshot.js
index 5fe1374e21..76cfe4f7d2 100644
--- a/frontend/src/repo-snapshot.js
+++ b/frontend/src/repo-snapshot.js
@@ -48,7 +48,7 @@ class RepoSnapshot extends React.Component {
   onSearchedClick = (selectedItem) => {
     if (selectedItem.is_dir === true) {
       let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
-      navigate(url, { repalce: true });
+      navigate(url, { replace: true });
     } else {
       let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
       let newWindow = window.open('about:blank');
diff --git a/seahub/help/templates/help/drive_client_2.0_for_windows_10.html b/seahub/help/templates/help/drive_client_2.0_for_windows_10.html
index 4d2e5a2f71..a905109f9f 100644
--- a/seahub/help/templates/help/drive_client_2.0_for_windows_10.html
+++ b/seahub/help/templates/help/drive_client_2.0_for_windows_10.html
@@ -49,7 +49,7 @@
 
 <p><b>{% trans "How to remove left-over SeaDrive shortcuts in Windows Explorer?" %}</b></p>
 <p>{% blocktrans %}The "SeaDrive" shortcut in Windows Explorer won't disappear after you exit SeaDrive program or switch Seafile accounts in SeaDrive. This is an intended behavior. You don't need to remove them if you still need to access the account later.{% endblocktrans %}</p>
-<p>{% blocktrans %}In some corner cases, the "SeaDrvie" shortcut will be left-over in Windows Explorer and you want to remove it.{% endblocktrans %}</p>
+<p>{% blocktrans %}In some corner cases, the "SeaDrive" shortcut will be left-over in Windows Explorer and you want to remove it.{% endblocktrans %}</p>
 <p>{% blocktrans %}You can usually remove those shortcuts by uninstalling SeaDrive program and choose "Remove account information" in the prompt dialog.{% endblocktrans %}</p>
 <p>{% blocktrans %}If uninstallation doesn't remove the shortcuts successfully, you can remove the SeaDrive shortcut in Windows Explorer by editing the registry. Open the path "HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\Desktop\NameSpace\" in registry editor. Remove the sub-keys correspond to the shortcut you want to remove.{% endblocktrans %}</p>
 
diff --git a/seahub/help/templates/help/library_history_and_snapshots.html b/seahub/help/templates/help/library_history_and_snapshots.html
index 6aa98a8fab..1d07fef28c 100644
--- a/seahub/help/templates/help/library_history_and_snapshots.html
+++ b/seahub/help/templates/help/library_history_and_snapshots.html
@@ -10,7 +10,7 @@
 <ul>
   <li>{% blocktrans %}In Seafile Web App, navigate into the root folder of a library. Click the "History" icon in the library navigation top bar. All the change record of the library will be displayed in a list.{% endblocktrans %}</li>
   <li>{% blocktrans %}Click the "view snapshot" link on any modification record. You'll see the library state at the point of time.{% endblocktrans %}</li>
-  <li>{% trans "In the snapshot view, you can download or restore any file or folder. If you're the library's owner, you can restore the enitre library to this point of time." %}</li>
+  <li>{% trans "In the snapshot view, you can download or restore any file or folder. If you're the library's owner, you can restore the entire library to this point of time." %}</li>
 </ul>
 <p>{% blocktrans %}You can configure the retention period of library history: <a href="{{ SITE_ROOT }}help/setting_library_history/">setting history retention period</a>.{% endblocktrans %}</p>
 
diff --git a/seahub/help/templates/help/read-only_syncing.html b/seahub/help/templates/help/read-only_syncing.html
index f7c13e9b44..0d34aba44f 100644
--- a/seahub/help/templates/help/read-only_syncing.html
+++ b/seahub/help/templates/help/read-only_syncing.html
@@ -3,6 +3,6 @@
 
 {% block help_con %}
 <h3 class="hd">{% trans "Read-only syncing" %}</h3>
-<p>{% blocktrans %}For ready-only libraries or folders, Seafile will show a forbidden icon (<img src="{{ MEDIA_URL }}img/help/read_only.png" alt="" width="24" />) to indicate they are read-only. However, users can still modify the synced local copies. When a local copy is modified, Seafile will ignore the modified one. When the copy at the server is also modified, the client will popup a notification, saying that the local modified copy conflicts with the copy at the server side. To prevent data loss, the local copy is renamed to a conflict file.{% endblocktrans %}</p>
+<p>{% blocktrans %}For read-only libraries or folders, Seafile will show a forbidden icon (<img src="{{ MEDIA_URL }}img/help/read_only.png" alt="" width="24" />) to indicate they are read-only. However, users can still modify the synced local copies. When a local copy is modified, Seafile will ignore the modified one. When the copy at the server is also modified, the client will popup a notification, saying that the local modified copy conflicts with the copy at the server side. To prevent data loss, the local copy is renamed to a conflict file.{% endblocktrans %}</p>
 <p>{% trans "If you want the be-shared users not be able to modify local copies, you can consider using the Seafile Drive client." %}</p>
 {% endblock %}
diff --git a/seahub/help/templates/help/sharing_files_and_folders.html b/seahub/help/templates/help/sharing_files_and_folders.html
index c4975bbf8c..a2bf2b71d8 100644
--- a/seahub/help/templates/help/sharing_files_and_folders.html
+++ b/seahub/help/templates/help/sharing_files_and_folders.html
@@ -18,7 +18,7 @@
 <p>{% trans "Share links are public links to files or folders. They can be accessed by anyone, including those who don't have a Seafile account. You can also use password and expiration time to protect your links." %}</p>
 <p>{% trans "You can also set access permission to share links. There are three types of permissions:" %}</p>
 <ul>
-  <li>{% trans "Preview and Download: the file or files in the folder can be downloaded. If the type of files can be previewd in web browser, they can also be viewed online (e.g. Office files)." %}</li>
+  <li>{% trans "Preview and Download: the file or files in the folder can be downloaded. If the type of files can be previewed in web browser, they can also be viewed online (e.g. Office files)." %}</li>
   <li>{% trans "Preview only: the file or files in the folder can only be viewed in web browser, but cannot be downloaded. This is useful for sharing confidential data." %}</li>
   <li>{% blocktrans %}Edit on cloud and download: Similar to "Preview and Download", but if the file can be edited in web browser (e.g. an Office file), any user who has access to the link is allowed to edit it.{% endblocktrans %}</li>
 </ul>
diff --git a/seahub/utils/__init__.py b/seahub/utils/__init__.py
index 6bbdca2e3f..8df51ef19e 100644
--- a/seahub/utils/__init__.py
+++ b/seahub/utils/__init__.py
@@ -418,7 +418,7 @@ def get_conf_text_ext():
 
 def get_file_type_and_ext(filename):
     """
-    Return file type and extension if the file can be previewd online,
+    Return file type and extension if the file can be previewed online,
     otherwise, return unknown type.
     """
     fileExt = os.path.splitext(filename)[1][1:].lower()