diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2928b5d2a0..396d706ec2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16300,9 +16300,9 @@
       }
     },
     "seafile-js": {
-      "version": "0.2.109",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.109.tgz",
-      "integrity": "sha512-qcFKdC8hA1G3Mbe4PpJ/ircBD9Miaduur2qIPkjyYIzJ8MvownGxku+r13UsNh6fLp3oCs2GqzuY4UDO5y1gcw==",
+      "version": "0.2.111",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.111.tgz",
+      "integrity": "sha512-PsaU3VUledLrs8guKRm0nJ99s0g3bgQmpvIb00b1ESjdsgRIcyvQsgCrG3fTJQYn+fMdGJaSP1tiDbuOZLoqrA==",
       "requires": {
         "axios": "^0.18.0",
         "form-data": "^2.3.2",
diff --git a/frontend/package.json b/frontend/package.json
index 2f8a4d6ca6..0758afb411 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,7 +38,7 @@
     "react-responsive": "^6.1.2",
     "react-select": "^2.4.1",
     "reactstrap": "^6.4.0",
-    "seafile-js": "^0.2.109",
+    "seafile-js": "^0.2.111",
     "socket.io-client": "^2.2.0",
     "sw-precache-webpack-plugin": "0.11.4",
     "unified": "^7.0.0",
diff --git a/frontend/src/components/cur-dir-path/dir-path.js b/frontend/src/components/cur-dir-path/dir-path.js
index fbb7648c5f..a0030e73a7 100644
--- a/frontend/src/components/cur-dir-path/dir-path.js
+++ b/frontend/src/components/cur-dir-path/dir-path.js
@@ -24,7 +24,16 @@ class DirPath extends React.Component {
     this.props.onPathClick(path);
   }
 
-  onTabNavClick = (tabName, id) => {
+  onTabNavClick = (e, tabName, id) => {
+    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;
+    }
     this.props.onTabNavClick(tabName, id);
   }
 
@@ -72,20 +81,20 @@ class DirPath extends React.Component {
         {this.props.pathPrefix && this.props.pathPrefix.map((item, index) => {
           return (
             <Fragment key={index}>
-              <Link to={item.url} className="normal" onClick={() => this.onTabNavClick(item.name, item.id)}>{gettext(item.showName)}</Link>
+              <Link to={item.url} className="normal" onClick={(e) => this.onTabNavClick(e, item.name, item.id)}>{gettext(item.showName)}</Link>
               <span className="path-split">/</span>
             </Fragment>
           );
         })}
         {this.props.pathPrefix && this.props.pathPrefix.length === 0 && (
           <Fragment>
-            <Link to={siteRoot + 'my-libs/'} className="normal" onClick={() => this.onTabNavClick('my-libs')}>{gettext('Libraries')}</Link>
+            <Link to={siteRoot + 'my-libs/'} className="normal" onClick={(e) => this.onTabNavClick(e, 'my-libs')}>{gettext('Libraries')}</Link>
             <span className="path-split">/</span>
           </Fragment>
         )}
         {!this.props.pathPrefix && (
           <Fragment>
-            <Link href={siteRoot + 'my-libs/'} className="normal" onClick={() => this.onTabNavClick('my-libs')}>{gettext('Libraries')}</Link>
+            <Link href={siteRoot + 'my-libs/'} className="normal" onClick={(e) => this.onTabNavClick(e, 'my-libs')}>{gettext('Libraries')}</Link>
             <span className="path-split">/</span>
           </Fragment>
         )}
diff --git a/frontend/src/components/dialog/internal-link.js b/frontend/src/components/dialog/internal-link.js
index b6e1f675a9..075ae4b1f2 100644
--- a/frontend/src/components/dialog/internal-link.js
+++ b/frontend/src/components/dialog/internal-link.js
@@ -10,6 +10,7 @@ import { Utils } from '../../utils/utils';
 const propTypes = {
   path: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
+  direntType: PropTypes.string
 };
 
 class InternalLink extends React.Component {
@@ -21,9 +22,8 @@ class InternalLink extends React.Component {
   }
 
   componentDidMount() {
-    let repoID = this.props.repoID;
-    let path = this.props.path;
-    seafileAPI.getInternalLink(repoID, path).then(res => {
+    let { repoID, path, direntType } = this.props;
+    seafileAPI.getInternalLink(repoID, path, direntType).then(res => {
       this.setState({
         smartLink: res.data.smart_link
       });
diff --git a/frontend/src/components/dialog/invitation-revoke-dialog.js b/frontend/src/components/dialog/invitation-revoke-dialog.js
new file mode 100644
index 0000000000..c703c154b1
--- /dev/null
+++ b/frontend/src/components/dialog/invitation-revoke-dialog.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import Loading from '../loading';
+import toaster from '../toast';
+
+const propTypes = {
+  accepter: PropTypes.string.isRequired,
+  token: PropTypes.string.isRequired,
+  revokeInvitation: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class InvitationRevokeDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isSubmitting: false
+    };
+  }
+
+  onRevokeInvitation = () => {
+    this.setState({
+      isSubmitting: true,
+    });
+
+    seafileAPI.revokeInvitation(this.props.token).then((res) => {
+      this.props.revokeInvitation();
+      this.props.toggleDialog();
+      const msg = gettext('Successfully revoked access of user {placeholder}.').replace('{placeholder}', this.props.accepter);
+      toaster.success(msg);
+    }).catch((error) => {
+      const errorMsg = Utils.getErrorMsg(error);
+      toaster.danger(errorMsg);
+      this.props.toggleDialog();
+    });
+  };
+
+  render() {
+    const { accepter, toggleDialog } = this.props;
+    const { isSubmitting } = this.state;
+    const email = '<span class="op-target">' + Utils.HTMLescape(this.props.accepter) + '</span>';
+    const content = gettext('Are you sure to revoke access of user {placeholder} ?').replace('{placeholder}', email);
+
+    return (
+      <Modal isOpen={true} toggle={toggleDialog}>
+        <ModalHeader toggle={toggleDialog}>{gettext('Revoke Access')}</ModalHeader>
+        <ModalBody>
+          <p dangerouslySetInnerHTML={{__html: content}}></p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={toggleDialog}>{gettext('Cancel')}</Button>
+          <Button className="submit-btn" color="primary" onClick={this.onRevokeInvitation} disabled={isSubmitting}>{isSubmitting ? <Loading /> : gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+InvitationRevokeDialog.propTypes = propTypes;
+
+export default InvitationRevokeDialog;
diff --git a/frontend/src/components/dialog/invite-people-dialog.js b/frontend/src/components/dialog/invite-people-dialog.js
index d8e54fa4e9..0c6deb4bcc 100644
--- a/frontend/src/components/dialog/invite-people-dialog.js
+++ b/frontend/src/components/dialog/invite-people-dialog.js
@@ -1,9 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {gettext} from '../../utils/constants';
-import {seafileAPI} from '../../utils/seafile-api';
-import {Modal, ModalHeader, ModalBody, ModalFooter, Input, Button} from 'reactstrap';
+import { Utils } from '../../utils/utils';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Input, Button } from 'reactstrap';
 import toaster from '../toast';
+import Loading from '../loading';
+
+const InvitePeopleDialogPropTypes = {
+  onInvitePeople: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired,
+};
 
 class InvitePeopleDialog extends React.Component {
 
@@ -12,11 +19,12 @@ class InvitePeopleDialog extends React.Component {
     this.state = {
       emails: '',
       errorMsg: '',
+      isSubmitting: false
     };
   }
 
-  handleEmailsChange = (event) => {
-    let emails = event.target.value;
+  handleInputChange = (e) => {
+    let emails = e.target.value;
     this.setState({
       emails: emails
     });
@@ -36,91 +44,88 @@ class InvitePeopleDialog extends React.Component {
 
   handleSubmitInvite = () => {
     let emails = this.state.emails.trim();
+    if (!emails) {
+      this.setState({
+        errorMsg: gettext('It is required.')
+      });
+      return false;
+    }
+
     let emailsArray = [];
-    emails = emails.split(',');
-    for (let i = 0; i < emails.length; i++) {
+    emails = emails.split(',');  
+    for (let i = 0, len = emails.length; i < len; i++) {
       let email = emails[i].trim();
       if (email) {
         emailsArray.push(email);
       }
     }
-    if (emailsArray.length) {
-      seafileAPI.invitePeople(emailsArray).then((res) => {
-        this.setState({
-          emails: '',
-        });
-        this.props.toggleInvitePeopleDialog();
-        // success messages
-        let successMsg = '';
-        if (res.data.success.length === 1) {
-          successMsg = gettext('Successfully invited %(email).')
-            .replace('%(email)', res.data.success[0].accepter);
-        } else if(res.data.success.length > 1) {
-          successMsg = gettext('Successfully invited %(email) and %(num) other people.')
-            .replace('%(email)', res.data.success[0].accepter)
-            .replace('%(num)', res.data.success.length - 1);
-        }
-        if (successMsg) {
-          toaster.success(successMsg, {duration: 2});
-          this.props.onInvitePeople(res.data.success);
-        }
-        // failed messages
-        if (res.data.failed.length) {
-          for (let i = 0; i< res.data.failed.length; i++){
-            let failedMsg = res.data.failed[i].email + ': ' + res.data.failed[i].error_msg;
-            toaster.danger(failedMsg, {duration: 3});}
-        }
-      }).catch((error) => {
-        this.props.toggleInvitePeopleDialog();
-        if (error.response){
-          toaster.danger(error.response.data.detail || gettext('Error'), {duration: 3});
-        } else {
-          toaster.danger(gettext('Please check the network.'), {duration: 3});
-        }
+
+    if (!emailsArray.length) {
+      this.setState({
+        errorMsg: gettext('Email is invalid.')
       });
-    } else {
-      if (this.state.emails){
-        this.setState({
-          errorMsg: gettext('Email is invalid.')
-        });
-      } else {
-        this.setState({
-          errorMsg: gettext('It is required.')
-        });
-      }
+      return false;
     }
+
+    this.setState({
+      isSubmitting: true
+    });
+    seafileAPI.invitePeople(emailsArray).then((res) => {
+      this.props.toggleDialog();
+      const success = res.data.success;
+      if (success.length) {
+        let successMsg = '';
+        if (success.length == 1) {
+          successMsg = gettext('Successfully invited %(email).')
+            .replace('%(email)', success[0].accepter);
+        } else {
+          successMsg = gettext('Successfully invited %(email) and %(num) other people.')
+            .replace('%(email)', success[0].accepter)
+            .replace('%(num)', success.length - 1);
+        }
+        toaster.success(successMsg);
+        this.props.onInvitePeople(success);
+      }
+      const failed = res.data.failed;
+      if (failed.length) {
+        for (let i = 0, len = failed.length; i < len; i++) {
+          let failedMsg = failed[i].email + ': ' + failed[i].error_msg;
+          toaster.danger(failedMsg);
+        }
+      }
+    }).catch((error) => {
+      const errorMsg = Utils.getErrorMsg(error);
+      toaster.danger(errorMsg);
+      this.props.toggleDialog();
+    });
   }
 
   render() {
+    const { isSubmitting } = this.state;
     return (
-      <Modal isOpen={this.props.isInvitePeopleDialogOpen} toggle={this.props.toggleInvitePeopleDialog}>
-        <ModalHeader toggle={this.props.toggleInvitePeopleDialog}>{gettext('Invite People')}</ModalHeader>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Invite People')}</ModalHeader>
         <ModalBody>
           <label htmlFor="emails">{gettext('Emails')}</label>
           <Input
-            type="text" id="emails"
+            type="text"
+            id="emails"
             placeholder={gettext('Emails, separated by \',\'')}
             value={this.state.emails}
-            onChange={this.handleEmailsChange}
+            onChange={this.handleInputChange}
             onKeyDown={this.handleKeyDown}
           />
-          <span className="error">{this.state.errorMsg}</span>
+          <p className="error mt-2">{this.state.errorMsg}</p>
         </ModalBody>
         <ModalFooter>
-          <Button color="secondary" onClick={this.props.toggleInvitePeopleDialog}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.handleSubmitInvite}>{gettext('Submit')}</Button>
+          <Button color="secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</Button>
+          <Button className="submit-btn" color="primary" onClick={this.handleSubmitInvite} disabled={isSubmitting}>{isSubmitting ? <Loading /> : gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
     );
   }
 }
 
-const InvitePeopleDialogPropTypes = {
-  toggleInvitePeopleDialog: PropTypes.func.isRequired,
-  isInvitePeopleDialogOpen: PropTypes.bool.isRequired,
-  onInvitePeople: PropTypes.func.isRequired,
-};
-
 InvitePeopleDialog.propTypes = InvitePeopleDialogPropTypes;
 
-export default InvitePeopleDialog;
\ No newline at end of file
+export default InvitePeopleDialog;
diff --git a/frontend/src/components/dialog/list-taggedfiles-dialog.js b/frontend/src/components/dialog/list-taggedfiles-dialog.js
index 4866900866..4f2fac1438 100644
--- a/frontend/src/components/dialog/list-taggedfiles-dialog.js
+++ b/frontend/src/components/dialog/list-taggedfiles-dialog.js
@@ -38,7 +38,7 @@ class ListTaggedFilesDialog extends React.Component {
     seafileAPI.deleteFileTag(repoID, fileTagID).then(res => {
       this.getTaggedFiles();
       this.props.updateUsedRepoTags();
-      if (this.props.onFileTagChanged) this.onFileTagChanged(taggedFile);
+      if ((this.props.onFileTagChanged) && !taggedFile.file_deleted) this.onFileTagChanged(taggedFile);
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
diff --git a/frontend/src/components/dialog/org-add-member-dialog.js b/frontend/src/components/dialog/org-add-member-dialog.js
index 4ffcdbc9cc..133a730b64 100644
--- a/frontend/src/components/dialog/org-add-member-dialog.js
+++ b/frontend/src/components/dialog/org-add-member-dialog.js
@@ -34,7 +34,7 @@ class AddMemberDialog extends React.Component {
     const email = this.state.selectedOption.email;
     this.refs.orgSelect.clearSelect();
     this.setState({ errMessage: [] });
-    seafileAPI.orgAdminAddDepartGroupUser(orgID, this.props.groupID, email).then((res) => {
+    seafileAPI.orgAdminAddGroupMember(orgID, this.props.groupID, email).then((res) => {
       this.setState({ selectedOption: null });
       if (res.data.failed.length > 0) {
         this.setState({ errMessage: res.data.failed[0].error_msg });
diff --git a/frontend/src/components/dialog/org-add-repo-dialog.js b/frontend/src/components/dialog/org-add-repo-dialog.js
index 3f393dec01..ee9d9838f0 100644
--- a/frontend/src/components/dialog/org-add-repo-dialog.js
+++ b/frontend/src/components/dialog/org-add-repo-dialog.js
@@ -30,7 +30,7 @@ class AddRepoDialog extends React.Component {
   handleSubmit = () => {
     let isValid = this.validateName();
     if (isValid) {
-      seafileAPI.orgAdminAddDepartGroupRepo(orgID, this.props.groupID, this.state.repoName.trim()).then((res) => {
+      seafileAPI.orgAdminAddDepartmentRepo(orgID, this.props.groupID, this.state.repoName.trim()).then((res) => {
         this.props.toggle();
         this.props.onRepoChanged();
       }).catch(error => {
diff --git a/frontend/src/components/dialog/org-delete-member-dialog.js b/frontend/src/components/dialog/org-delete-member-dialog.js
index 9e3cabc715..78c853bea6 100644
--- a/frontend/src/components/dialog/org-delete-member-dialog.js
+++ b/frontend/src/components/dialog/org-delete-member-dialog.js
@@ -21,7 +21,7 @@ class DeleteMemberDialog extends React.Component {
 
   deleteMember = () => {
     const userEmail = this.props.member.email;
-    seafileAPI.orgAdminDeleteDepartGroupUser(orgID, this.props.groupID, userEmail).then((res) => {
+    seafileAPI.orgAdminDeleteGroupMember(orgID, this.props.groupID, userEmail).then((res) => {
       if (res.data.success) {
         this.props.onMemberChanged();
         this.props.toggle();
diff --git a/frontend/src/components/dialog/org-delete-repo-dialog.js b/frontend/src/components/dialog/org-delete-repo-dialog.js
index 2d8fd93b78..5c958a3f85 100644
--- a/frontend/src/components/dialog/org-delete-repo-dialog.js
+++ b/frontend/src/components/dialog/org-delete-repo-dialog.js
@@ -13,7 +13,7 @@ class DeleteRepoDialog extends React.Component {
   }
 
   deleteRepo = () => {
-    seafileAPI.orgAdminDeleteDepartGroupRepo(orgID, this.props.groupID, this.props.repo.repo_id).then((res) => {
+    seafileAPI.orgAdminDeleteDepartmentRepo(orgID, this.props.groupID, this.props.repo.repo_id).then((res) => {
       if (res.data.success) {
         this.props.onRepoChanged();
         this.props.toggle();
diff --git a/frontend/src/components/dialog/set-org-user-contact-email.js b/frontend/src/components/dialog/set-org-user-contact-email.js
new file mode 100644
index 0000000000..c2ae23fbdd
--- /dev/null
+++ b/frontend/src/components/dialog/set-org-user-contact-email.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+  orgID: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  contactEmail: PropTypes.string.isRequired,
+  updateContactEmail: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class SetOrgUserContactEmail extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputValue: this.props.contactEmail,
+      submitBtnDisabled: false
+    };
+  }
+
+  handleInputChange = (e) => {
+    this.setState({
+      inputValue: e.target.value 
+    });
+  }
+
+  formSubmit = () => {
+    const { orgID, email } = this.props;
+    const contactEmail = this.state.inputValue.trim();
+
+    this.setState({
+      submitBtnDisabled: true 
+    });
+
+    seafileAPI.setOrgUserContactEmail(orgID, email, contactEmail).then((res) => {
+      const newContactEmail = contactEmail ? res.data.contact_email : '';
+      this.props.updateContactEmail(newContactEmail);
+      this.props.toggleDialog();
+    }).catch((error) => {
+      let errorMsg = Utils.getErrorMsg(error);
+      this.setState({
+        formErrorMsg: errorMsg,
+        submitBtnDisabled: false
+      }); 
+    });
+  }
+
+  render() {
+    const { inputValue, formErrorMsg, submitBtnDisabled } = this.state;
+    return (
+      <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Set user contact email')}</ModalHeader>
+        <ModalBody>
+          <React.Fragment>
+            <input type="text" className="form-control" value={inputValue} onChange={this.handleInputChange} />
+            {formErrorMsg && <p className="error m-0 mt-2">{formErrorMsg}</p>}
+          </React.Fragment>
+        </ModalBody>
+        <ModalFooter>
+          <button className="btn btn-secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</button>
+          <button className="btn btn-primary" disabled={submitBtnDisabled} onClick={this.formSubmit}>{gettext('Submit')}</button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SetOrgUserContactEmail.propTypes = propTypes;
+
+export default SetOrgUserContactEmail;
diff --git a/frontend/src/components/dialog/set-org-user-name.js b/frontend/src/components/dialog/set-org-user-name.js
new file mode 100644
index 0000000000..cb58081414
--- /dev/null
+++ b/frontend/src/components/dialog/set-org-user-name.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+  orgID: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  updateName: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class SetOrgUserName extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputValue: this.props.name,
+      submitBtnDisabled: false
+    };
+  }
+
+  handleInputChange = (e) => {
+    this.setState({
+      inputValue: e.target.value 
+    });
+  }
+
+  formSubmit = () => {
+    const { orgID, email } = this.props;
+    const name = this.state.inputValue.trim();
+
+    this.setState({
+      submitBtnDisabled: true 
+    });
+
+    // when name is '', api returns the previous name
+    // but newName needs to be ''
+    seafileAPI.setOrgUserName(orgID, email, name).then((res) => {
+      const newName = name ? res.data.name : '';
+      this.props.updateName(newName);
+      this.props.toggleDialog();
+    }).catch((error) => {
+      let errorMsg = Utils.getErrorMsg(error);
+      this.setState({
+        formErrorMsg: errorMsg,
+        submitBtnDisabled: false
+      }); 
+    });
+  }
+
+  render() {
+    const { inputValue, formErrorMsg, submitBtnDisabled } = this.state;
+    return (
+      <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Set user name')}</ModalHeader>
+        <ModalBody>
+          <React.Fragment>
+            <input type="text" className="form-control" value={inputValue} onChange={this.handleInputChange} />
+            {formErrorMsg && <p className="error m-0 mt-2">{formErrorMsg}</p>}
+          </React.Fragment>
+        </ModalBody>
+        <ModalFooter>
+          <button className="btn btn-secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</button>
+          <button className="btn btn-primary" disabled={submitBtnDisabled} onClick={this.formSubmit}>{gettext('Submit')}</button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SetOrgUserName.propTypes = propTypes;
+
+export default SetOrgUserName;
diff --git a/frontend/src/components/dialog/set-org-user-quota.js b/frontend/src/components/dialog/set-org-user-quota.js
new file mode 100644
index 0000000000..6d34cc6948
--- /dev/null
+++ b/frontend/src/components/dialog/set-org-user-quota.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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';
+
+const propTypes = {
+  orgID: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  quotaTotal: PropTypes.string.isRequired,
+  updateQuota: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class SetOrgUserQuota extends React.Component {
+
+  constructor(props) {
+    super(props);
+    const initialQuota = this.props.quotaTotal < 0 ? '' :
+      this.props.quotaTotal / (1000 * 1000);
+    this.state = {
+      inputValue: initialQuota,
+      submitBtnDisabled: false
+    };
+  }
+
+  handleInputChange = (e) => {
+    this.setState({
+      inputValue: e.target.value 
+    });
+  }
+
+  formSubmit = () => {
+    const { orgID, email } = this.props;
+    const quota = this.state.inputValue.trim();
+
+    if (!quota) {
+      this.setState({
+        formErrorMsg: gettext('It is required.')
+      });
+      return false;
+    }
+
+    this.setState({
+      submitBtnDisabled: true 
+    });
+
+    seafileAPI.setOrgUserQuota(orgID, email, quota).then((res) => {
+      this.props.updateQuota(res.data.quota_total);
+      this.props.toggleDialog();
+    }).catch((error) => {
+      let errorMsg = Utils.getErrorMsg(error);
+      this.setState({
+        formErrorMsg: errorMsg,
+        submitBtnDisabled: false
+      }); 
+    });
+  }
+
+  render() {
+    const { inputValue, formErrorMsg, submitBtnDisabled } = this.state;
+    return (
+      <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Set user quota')}</ModalHeader>
+        <ModalBody>
+          <React.Fragment>
+            <InputGroup>
+              <input type="text" className="form-control" value={inputValue} onChange={this.handleInputChange} />
+              <InputGroupAddon addonType="append">
+                <InputGroupText>MB</InputGroupText>
+              </InputGroupAddon>
+            </InputGroup>
+            <p className="small text-secondary mt-2 mb-2">{gettext('Tip: 0 means default limit')}</p>
+            {formErrorMsg && <p className="error m-0 mt-2">{formErrorMsg}</p>}
+          </React.Fragment>
+        </ModalBody>
+        <ModalFooter>
+          <button className="btn btn-secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</button>
+          <button className="btn btn-primary" disabled={submitBtnDisabled} onClick={this.formSubmit}>{gettext('Submit')}</button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SetOrgUserQuota.propTypes = propTypes;
+
+export default SetOrgUserQuota;
diff --git a/frontend/src/components/dialog/share-dialog.js b/frontend/src/components/dialog/share-dialog.js
index 35c6195949..7dc8a423a4 100644
--- a/frontend/src/components/dialog/share-dialog.js
+++ b/frontend/src/components/dialog/share-dialog.js
@@ -76,7 +76,7 @@ class ShareDialog extends React.Component {
     }
 
     let activeTab = this.state.activeTab;
-    const {repoEncrypted, userPerm, enableDirPrivateShare} = this.props;
+    const {repoEncrypted, userPerm, enableDirPrivateShare, itemType} = this.props;
     const enableShareLink = !repoEncrypted && canGenerateShareLink;
     const enableUploadLink = !repoEncrypted && canGenerateUploadLink && userPerm == 'rw';
 
@@ -98,6 +98,11 @@ class ShareDialog extends React.Component {
                 </NavLink>
               </NavItem>
             }
+            <NavItem>
+              <NavLink className={activeTab === 'internalLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'internalLink')}>
+                {gettext('Internal Link')}
+              </NavLink>
+            </NavItem>
             {enableDirPrivateShare &&
               <Fragment>
                 <NavItem>
@@ -134,6 +139,13 @@ class ShareDialog extends React.Component {
                 />
               </TabPane>
             }
+            <TabPane tabId="internalLink">
+              <InternalLink 
+                path={this.props.itemPath} 
+                repoID={this.props.repoID} 
+                direntType={itemType}
+              />
+            </TabPane>
             {enableDirPrivateShare &&
               <Fragment>
                 <TabPane tabId="shareToUser">
diff --git a/frontend/src/components/file-chooser/tree-list-item.js b/frontend/src/components/file-chooser/tree-list-item.js
index b3e201c53d..97714b4b5d 100644
--- a/frontend/src/components/file-chooser/tree-list-item.js
+++ b/frontend/src/components/file-chooser/tree-list-item.js
@@ -88,9 +88,13 @@ class TreeViewItem extends React.Component {
     let isCurrentPath = this.props.selectedPath === this.state.filePath;
 
     const fileName = node.object.name;
-    if (this.props.fileSuffixes && fileName && fileName.indexOf('.') !== -1) {
-      const suffix = fileName.slice(fileName.lastIndexOf('.') + 1).toLowerCase();
-      if (!this.props.fileSuffixes.includes(suffix)) return null;
+    if (this.props.fileSuffixes && fileName && node.object.type === 'file') {
+      if ( fileName.indexOf('.') !== -1) {
+        const suffix = fileName.slice(fileName.lastIndexOf('.') + 1).toLowerCase();
+        if (!this.props.fileSuffixes.includes(suffix)) return null;
+      } else {
+        if (node.object.type === 'file') return null;
+      }
     }
 
     return(
diff --git a/frontend/src/components/file-uploader/file-uploader.js b/frontend/src/components/file-uploader/file-uploader.js
index 3d1d83b743..372547bb39 100644
--- a/frontend/src/components/file-uploader/file-uploader.js
+++ b/frontend/src/components/file-uploader/file-uploader.js
@@ -53,6 +53,7 @@ class FileUploader extends React.Component {
     this.timestamp = null;
     this.loaded = 0;
     this.bitrateInterval = 500; // Interval in milliseconds to calculate the bitrate
+    window.onbeforeunload = this.onbeforeunload;
   }
 
   componentDidMount() {
@@ -86,11 +87,20 @@ class FileUploader extends React.Component {
   }
 
   componentWillUnmount = () => {
+    window.onbeforeunload = null;
     if (this.props.dragAndDrop === true) {
       this.resumable.disableDropOnDocument();
     }
   }
 
+  onbeforeunload = () => {
+    if (window.uploader && 
+        window.uploader.isUploadProgressDialogShow && 
+        window.uploader.totalProgress !== 100) {
+      return '';
+    }
+  }
+
   bindCallbackHandler = () => {
     let {maxFilesErrorCallback, minFileSizeErrorCallback, maxFileSizeErrorCallback, fileTypeErrorCallback } = this.props;
 
@@ -207,6 +217,7 @@ class FileUploader extends React.Component {
       isUploadProgressDialogShow: true,
       uploadFileList: uploadFileList,
     });
+    Utils.registerGlobalVariable('uploader', 'isUploadProgressDialogShow', true);
   }
 
   buildCustomFileObj = (resumableFile) => {
@@ -261,6 +272,7 @@ class FileUploader extends React.Component {
       totalProgress: progress,
       uploadBitrate: uploadBitrate
     });
+    Utils.registerGlobalVariable('uploader', 'totalProgress', progress);
   }
 
   onFileUploadSuccess = (resumableFile, message) => {
@@ -466,6 +478,7 @@ class FileUploader extends React.Component {
   onCloseUploadDialog = () => {
     this.resumable.files = [];
     this.setState({isUploadProgressDialogShow: false, uploadFileList: []});
+    Utils.registerGlobalVariable('uploader', 'isUploadProgressDialogShow', false);
   }
 
   onUploadCancel = (uploadingItem) => {
@@ -529,6 +542,7 @@ class FileUploader extends React.Component {
     }, () => {
       this.resumable.upload();
     });
+    Utils.registerGlobalVariable('uploader', 'isUploadProgressDialogShow', true);
   }
 
   cancelFileUpload = () => {
diff --git a/frontend/src/components/index-viewer.js b/frontend/src/components/index-viewer.js
index 22f66226c3..7549326bd3 100644
--- a/frontend/src/components/index-viewer.js
+++ b/frontend/src/components/index-viewer.js
@@ -249,16 +249,12 @@ class FolderItem extends React.Component {
     });
   }
 
-  expandChildNodes = () => {
-    this.setState({ expanded: true });
-  }
-
   renderLink = (node) => {
     const className = node.path === this.props.currentPath ? 'wiki-nav-content wiki-nav-content-highlight' : 'wiki-nav-content';
     if (node.href && node.name) {
-      return <div className={className}><a href={node.href} data-path={node.path} onClick={this.expandChildNodes}>{node.name}</a></div>;
+      return <div className={className}><a href={node.href} data-path={node.path} onClick={this.toggleExpanded}>{node.name}</a></div>;
     } else if (node.name) {
-      return <div className="wiki-nav-content"><span onClick={this.expandChildNodes}>{node.name}</span></div>;
+      return <div className="wiki-nav-content"><span onClick={this.toggleExpanded}>{node.name}</span></div>;
     } else {
       return null;
     }
diff --git a/frontend/src/components/main-side-nav.js b/frontend/src/components/main-side-nav.js
index 8b0aa4a9c7..e8210b22fe 100644
--- a/frontend/src/components/main-side-nav.js
+++ b/frontend/src/components/main-side-nav.js
@@ -62,7 +62,16 @@ class MainSideNav extends React.Component {
     });
   }
 
-  tabItemClick = (param, id) => {
+  tabItemClick = (e, param, id) => {
+    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;
+    }
     this.props.tabItemClick(param, id);
   }
 
@@ -78,7 +87,7 @@ class MainSideNav extends React.Component {
     return (
       <ul className={`nav sub-nav nav-pills flex-column grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}>
         <li className="nav-item"> 
-          <Link to={siteRoot + 'groups/'}  className={`nav-link ellipsis ${this.getActiveClass('groups')}`} onClick={() => this.tabItemClick('groups')}>
+          <Link to={siteRoot + 'groups/'}  className={`nav-link ellipsis ${this.getActiveClass('groups')}`} onClick={(e) => this.tabItemClick(e, 'groups')}>
             <span className="sharp" aria-hidden="true">#</span>
             <span className="nav-text">{gettext('All Groups')}</span>
           </Link>
@@ -86,7 +95,7 @@ class MainSideNav extends React.Component {
         {this.state.groupItems.map(item => {
           return (
             <li key={item.id} className="nav-item"> 
-              <Link to={siteRoot + 'group/' + item.id + '/'} className={`nav-link ellipsis ${this.getActiveClass(item.name)}`} onClick={() => this.tabItemClick(item.name, item.id)}>
+              <Link to={siteRoot + 'group/' + item.id + '/'} className={`nav-link ellipsis ${this.getActiveClass(item.name)}`} onClick={(e) => this.tabItemClick(e, item.name, item.id)}>
                 <span className="sharp" aria-hidden="true">#</span>
                 <span className="nav-text">{item.name}</span>
               </Link>
@@ -111,7 +120,7 @@ class MainSideNav extends React.Component {
     if (canGenerateShareLink) {
       linksNavItem = (
         <li className="nav-item">
-          <Link to={siteRoot + 'share-admin-share-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-share-links')}`} title={gettext('Links')} onClick={() => this.tabItemClick('share-admin-share-links')}>
+          <Link to={siteRoot + 'share-admin-share-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-share-links')}`} title={gettext('Links')} onClick={(e) => this.tabItemClick(e, 'share-admin-share-links')}>
             <span aria-hidden="true" className="sharp">#</span>
             <span className="nav-text">{gettext('Links')}</span>
           </Link>
@@ -120,7 +129,7 @@ class MainSideNav extends React.Component {
     } else if (canGenerateUploadLink) {
       linksNavItem = (
         <li className="nav-item">
-          <Link to={siteRoot + 'share-admin-upload-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-upload-links')}`} title={gettext('Links')} onClick={() => this.tabItemClick('share-admin-upload-links')}>
+          <Link to={siteRoot + 'share-admin-upload-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-upload-links')}`} title={gettext('Links')} onClick={(e) => this.tabItemClick(e, 'share-admin-upload-links')}>
             <span aria-hidden="true" className="sharp">#</span>
             <span className="nav-text">{gettext('Links')}</span>
           </Link>
@@ -131,14 +140,14 @@ class MainSideNav extends React.Component {
       <ul className={`nav sub-nav nav-pills flex-column ${this.state.sharedExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style} >
         {canAddRepo && (
           <li className="nav-item">
-            <Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={() => this.tabItemClick('share-admin-libs')}>
+            <Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={(e) => this.tabItemClick(e, 'share-admin-libs')}>
               <span aria-hidden="true" className="sharp">#</span>
               <span className="nav-text">{gettext('Libraries')}</span>
             </Link>
           </li>
         )}
         <li className="nav-item">
-          <Link to={siteRoot + 'share-admin-folders/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-folders')}`} title={gettext('Folders')} onClick={() => this.tabItemClick('share-admin-folders')}>
+          <Link to={siteRoot + 'share-admin-folders/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-folders')}`} title={gettext('Folders')} onClick={(e) => this.tabItemClick(e, 'share-admin-folders')}>
             <span aria-hidden="true" className="sharp">#</span>
             <span className="nav-text">{gettext('Folders')}</span>
           </Link>
@@ -157,20 +166,20 @@ class MainSideNav extends React.Component {
           <ul className="nav nav-pills flex-column nav-container">
             {canAddRepo && (
               <li className="nav-item">
-                <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}>
+                <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={(e) => this.tabItemClick(e, 'my-libs')}>
                   <span className="sf2-icon-user" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('My Libraries')}</span>
                 </Link>
               </li>
             )}
             <li className="nav-item">
-              <Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={() => this.tabItemClick('shared-libs')}>
+              <Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={(e) => this.tabItemClick(e, 'shared-libs')}>
                 <span className="sf2-icon-share" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Shared with me')}</span>
               </Link>
             </li>
             { canViewOrg &&
-              <li className="nav-item" onClick={() => this.tabItemClick('org')}>
+              <li className="nav-item" onClick={(e) => this.tabItemClick(e, 'org')}>
                 <Link to={ siteRoot + 'org/' } className={`nav-link ellipsis ${this.getActiveClass('org')}`} title={gettext('Shared with all')}>
                   <span className="sf2-icon-organization" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Shared with all')}</span>
@@ -200,14 +209,14 @@ class MainSideNav extends React.Component {
           <h3 className="sf-heading">{gettext('Tools')}</h3>
           <ul className="nav nav-pills flex-column nav-container">
             <li className="nav-item">
-              <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={() => this.tabItemClick('starred')}>
+              <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={(e) => this.tabItemClick(e, 'starred')}>
                 <span className="sf2-icon-star" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Favorites')}</span>
               </Link>
             </li>
             {showActivity &&
               <li className="nav-item">
-                <Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} title={gettext('Activities')} onClick={() => this.tabItemClick('dashboard')}>
+                <Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} title={gettext('Activities')} onClick={(e) => this.tabItemClick(e, 'dashboard')}>
                   <span className="sf2-icon-clock" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Activities')}</span>
                 </Link>
@@ -215,14 +224,14 @@ class MainSideNav extends React.Component {
             }
             {enableWiki &&
               <li className="nav-item">
-                <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} title={gettext('Published Libraries')} onClick={() => this.tabItemClick('published')}>
+                <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} title={gettext('Published Libraries')} onClick={(e) => this.tabItemClick(e, 'published')}>
                   <span className="sf2-icon-wiki-view" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Published Libraries')}</span>
                 </Link>
               </li>
             }
             {isDocs &&
-              <li className="nav-item" onClick={() => this.tabItemClick('drafts')}>
+              <li className="nav-item" onClick={(e) => this.tabItemClick(e, 'drafts')}>
                 <Link className={`nav-link ellipsis ${this.getActiveClass('drafts')}`} to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
                   <span className="sf2-icon-edit" aria-hidden="true"></span>
                   <span className="draft-info nav-text">
@@ -233,14 +242,14 @@ class MainSideNav extends React.Component {
               </li>
             }
             <li className="nav-item">
-              <Link className={`nav-link ellipsis ${this.getActiveClass('linked-devices')}`} to={siteRoot + 'linked-devices/'} title={gettext('Linked Devices')} onClick={() => this.tabItemClick('linked-devices')}>
+              <Link className={`nav-link ellipsis ${this.getActiveClass('linked-devices')}`} to={siteRoot + 'linked-devices/'} title={gettext('Linked Devices')} onClick={(e) => this.tabItemClick(e, 'linked-devices')}>
                 <span className="sf2-icon-monitor" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Linked Devices')}</span>
               </Link>
             </li>
             {canInvitePeople &&
               <li className="nav-item">
-                <Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} title={gettext('Invite People')} onClick={() => this.tabItemClick('invitations')}>
+                <Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} title={gettext('Invite People')} onClick={(e) => this.tabItemClick(e, 'invitations')}>
                   <span className="sf2-icon-invite" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Invite People')}</span>
                 </Link>
diff --git a/frontend/src/components/org-admin-group-nav.js b/frontend/src/components/org-admin-group-nav.js
new file mode 100644
index 0000000000..ae0d728b1a
--- /dev/null
+++ b/frontend/src/components/org-admin-group-nav.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+import { siteRoot, gettext } from '../utils/constants'; 
+
+const propTypes = {
+  groupID: PropTypes.string.isRequired,
+  currentItem: PropTypes.string.isRequired
+};
+
+class OrgAdminGroupNav extends React.Component {
+
+  render() {
+    const { groupID, currentItem } = this.props;
+    const urlBase = `${siteRoot}org/groupadmin/${groupID}/`;
+    return (
+      <div className="cur-view-path org-admin-user-nav">
+        <ul className="nav">
+          <li className="nav-item">
+            <Link to={urlBase} className={`nav-link${currentItem == 'info' ? ' active' : ''}`}>{gettext('Group Info')}</Link>
+          </li>
+          <li className="nav-item">
+            <Link to={`${urlBase}repos/`} className={`nav-link${currentItem == 'repos' ? ' active' : ''}`}>{gettext('Libraries')}</Link>
+          </li>
+          <li className="nav-item">
+            <Link to={`${urlBase}members/`} className={`nav-link${currentItem == 'members' ? ' active' : ''}`}>{gettext('Members')}</Link>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+}
+
+OrgAdminGroupNav.propTypes = propTypes;
+
+export default OrgAdminGroupNav;
diff --git a/frontend/src/components/org-admin-user-nav.js b/frontend/src/components/org-admin-user-nav.js
new file mode 100644
index 0000000000..3e15d5ab1d
--- /dev/null
+++ b/frontend/src/components/org-admin-user-nav.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+import { siteRoot, gettext } from '../utils/constants'; 
+
+const propTypes = {
+  email: PropTypes.string.isRequired,
+  currentItem: PropTypes.string.isRequired
+};
+
+class OrgAdminUserNav extends React.Component {
+
+  render() {
+    const { email, currentItem } = this.props;
+    const urlBase = `${siteRoot}org/useradmin/info/${encodeURIComponent(email)}/`;
+    return (
+      <div className="cur-view-path org-admin-user-nav">
+        <ul className="nav">
+          <li className="nav-item">
+            <Link to={urlBase} className={`nav-link${currentItem == 'profile' ? ' active' : ''}`}>{gettext('Profile')}</Link>
+          </li>
+          <li className="nav-item">
+            <Link to={`${urlBase}repos/`} className={`nav-link${currentItem == 'owned-repos' ? ' active' : ''}`}>{gettext('Owned Libraries')}</Link>
+          </li>
+          <li className="nav-item">
+            <Link to={`${urlBase}shared-repos/`} className={`nav-link${currentItem == 'shared-repos' ? ' active' : ''}`}>{gettext('Shared Libraries')}</Link>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+}
+
+OrgAdminUserNav.propTypes = propTypes;
+
+export default OrgAdminUserNav;
diff --git a/frontend/src/css/invitations.css b/frontend/src/css/invitations.css
index c79a33abe8..34d67ad870 100644
--- a/frontend/src/css/invitations.css
+++ b/frontend/src/css/invitations.css
@@ -21,3 +21,9 @@
     cursor: pointer;
     vertical-align: middle;
 }
+
+.submit-btn .loading-icon {
+    margin: 1px auto;
+    width: 21px;
+    height: 21px;
+}
diff --git a/frontend/src/css/org-admin-user.css b/frontend/src/css/org-admin-user.css
new file mode 100644
index 0000000000..9ebdeb8ced
--- /dev/null
+++ b/frontend/src/css/org-admin-user.css
@@ -0,0 +1,3 @@
+.cur-view-path.org-admin-user-nav {
+  padding: 0 16px 1px;
+}
diff --git a/frontend/src/pages/invitations/invitations-view.js b/frontend/src/pages/invitations/invitations-view.js
index bc453082e0..fa225472ac 100644
--- a/frontend/src/pages/invitations/invitations-view.js
+++ b/frontend/src/pages/invitations/invitations-view.js
@@ -1,103 +1,149 @@
-import React, {Fragment} from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import {gettext, siteRoot} from '../../utils/constants';
+import moment from 'moment';
+import { gettext, siteRoot, loginUrl, canInvitePeople } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import { seafileAPI } from '../../utils/seafile-api';
 import InvitationsToolbar from '../../components/toolbar/invitations-toolbar';
 import InvitePeopleDialog from '../../components/dialog/invite-people-dialog';
-import {seafileAPI} from '../../utils/seafile-api';
-import {Table} from 'reactstrap';
+import InvitationRevokeDialog from '../../components/dialog/invitation-revoke-dialog';
 import Loading from '../../components/loading';
-import moment from 'moment';
 import toaster from '../../components/toast';
 import EmptyTip from '../../components/empty-tip';
 
 import '../../css/invitations.css';
 
-class InvitationsListItem extends React.Component {
+if (!canInvitePeople) {
+  location.href = siteRoot;
+}
+
+class Item extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      isOperationShow: false,
+      isOpIconShown: false, 
+      isRevokeDialogOpen: false
     };
   }
 
-  onMouseEnter = (event) => {
-    event.preventDefault();
+  onMouseEnter = () => {
     this.setState({
-      isOperationShow: true,
-    });
-  }
-
-  onMouseOver = () => {
-    this.setState({
-      isOperationShow: true,
+      isOpIconShown: true
     });
   }
 
   onMouseLeave = () => {
     this.setState({
-      isOperationShow: false,
+      isOpIconShown: false  
+    });
+  }
+
+  deleteItem = () => {
+    // make the icon avoid being clicked repeatedly
+    this.setState({
+      isOpIconShown: false  
+    });
+    const token = this.props.invitation.token;
+    seafileAPI.deleteInvitation(token).then((res) => {
+      this.setState({deleted: true});
+      toaster.success(gettext('Successfully deleted 1 item.'));
+    }).catch((error) => {
+      const errorMsg = Utils.getErrorMsg(error);
+      toaster.danger(errorMsg);
+      this.setState({
+        isOpIconShown: true 
+      });
+    });
+  }
+
+  revokeItem = () => {
+    this.setState({deleted: true});
+  }
+
+  toggleRevokeDialog = () => {
+    this.setState({
+      isRevokeDialogOpen: !this.state.isRevokeDialogOpen
     });
   }
 
   render() {
+    const { isOpIconShown, deleted, isRevokeDialogOpen } = this.state;
+
+    if (deleted) {
+      return null;
+    }
+
     const invitationItem = this.props.invitation;
-    const acceptIcon = <i className="sf2-icon-tick invite-accept-icon"></i>;
-    const deleteOperation = <i className="action-icon sf2-icon-x3"
-      title={gettext('Delete')}
-      style={!this.state.isOperationShow ? {opacity: 0} : {}}
-      onClick={this.props.onItemDelete.bind(this, invitationItem.token, this.props.index)}></i>;
+    const operation = invitationItem.accept_time ?
+      <i
+        className="action-icon sf3-font sf3-font-cancel-invitation"
+        title={gettext('Revoke Access')}
+        onClick={this.toggleRevokeDialog}>
+      </i> :
+      <i
+        className="action-icon sf2-icon-x3"
+        title={gettext('Delete')}
+        onClick={this.deleteItem}>
+      </i>;
+
     return (
-      <tr onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
-        <td>{invitationItem.accepter}</td>
-        <td>{moment(invitationItem.invite_time).format('YYYY-MM-DD')}</td>
-        <td>{moment(invitationItem.expire_time).format('YYYY-MM-DD')}</td>
-        <td>{invitationItem.accept_time && acceptIcon}</td>
-        <td>{!invitationItem.accept_time && deleteOperation}</td>
-      </tr>
+      <Fragment>
+        <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+          <td>{invitationItem.accepter}</td>
+          <td>{moment(invitationItem.invite_time).format('YYYY-MM-DD')}</td>
+          <td>{moment(invitationItem.expire_time).format('YYYY-MM-DD')}</td>
+          <td>{invitationItem.accept_time && <i className="sf2-icon-tick invite-accept-icon"></i>}</td>
+          <td>{isOpIconShown && operation}</td>
+        </tr>
+        {isRevokeDialogOpen &&
+        <InvitationRevokeDialog
+          accepter={invitationItem.accepter}
+          token={invitationItem.token}
+          revokeInvitation={this.revokeItem}
+          toggleDialog={this.toggleRevokeDialog}
+        />
+        }
+      </Fragment>
     );
   }
 }
 
-const InvitationsListItemPropTypes = {
+const ItemPropTypes = {
   invitation: PropTypes.object.isRequired,
-  onItemDelete: PropTypes.func.isRequired,
 };
 
-InvitationsListItem.propTypes = InvitationsListItemPropTypes;
+Item.propTypes = ItemPropTypes;
 
-class InvitationsListView extends React.Component {
+class Content extends Component {
 
   constructor(props) {
     super(props);
   }
 
-  onItemDelete = (token, index) => {
-    seafileAPI.deleteInvitation(token).then((res) => {
-      this.props.onDeleteInvitation(index);
-      toaster.success(gettext('Successfully deleted 1 item.'), {duration: 1});
-    }).catch((error) => {
-      if (error.response){
-        toaster.danger(error.response.data.detail || gettext('Error'), {duration: 3});
-      } else {
-        toaster.danger(gettext('Please check the network.'), {duration: 3});
-      }
-    });
-  }
-
   render() {
-    const invitationsListItems = this.props.invitationsList.map((invitation, index) => {
-      return (
-        <InvitationsListItem
-          key={index}
-          onItemDelete={this.onItemDelete}
-          invitation={invitation}
-          index={index}
-        />);
-    });
+    const {
+      loading, errorMsg, invitationsList 
+    } = this.props.data;
+
+    if (loading) {
+      return <Loading />;
+    }
+
+    if (errorMsg) {
+      return <p className="error text-center mt-2">{errorMsg}</p>;
+    }
+
+    if (!invitationsList.length) {
+      return ( 
+        <EmptyTip>
+          <h2>{gettext('You have not invited any people.')}</h2>
+        </EmptyTip>
+      );
+    }
 
     return (
-      <Table hover>
+      <table className="table-hover">
         <thead>
           <tr>
             <th width="25%">{gettext('Email')}</th>
@@ -108,100 +154,74 @@ class InvitationsListView extends React.Component {
           </tr>
         </thead>
         <tbody>
-          {invitationsListItems}
+          {invitationsList.map((invitation, index) => {
+            return (
+              <Item
+              key={index}
+              invitation={invitation}
+              />
+            );
+          })}
         </tbody>
-      </Table>
+      </table>
     );
   }
 }
 
-const InvitationsListViewPropTypes = {
-  invitationsList: PropTypes.array.isRequired,
-  onDeleteInvitation: PropTypes.func.isRequired,
-};
-
-InvitationsListView.propTypes = InvitationsListViewPropTypes;
-
 class InvitationsView extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      isInvitePeopleDialogOpen: false,
+      loading: true,
+      errorMsg: '',
       invitationsList: [],
-      isLoading: true,
-      permissionDeniedMsg: '',
-      showEmptyTip: false,
+      isInvitePeopleDialogOpen: false
     };
   }
 
-  listInvitations = () => {
+  componentDidMount() {
     seafileAPI.listInvitations().then((res) => {
       this.setState({
         invitationsList: res.data,
-        showEmptyTip: true,
-        isLoading: false,
+        loading: false
       });
     }).catch((error) => {
-      this.setState({
-        isLoading: false,
-      });
-      if (error.response){
-        if (error.response.status === 403){
-          let permissionDeniedMsg = gettext('Permission error');
+      if (error.response) {
+        if (error.response.status == 403) {
           this.setState({
-            permissionDeniedMsg: permissionDeniedMsg,
-          });
-        } else{
-          toaster.danger(error.response.data.detail || gettext('Error'), {duration: 3});
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
         }
       } else {
-        toaster.danger(gettext('Please check the network.'), {duration: 3});
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        });
       }
-    });
+    }); 
   }
 
   onInvitePeople = (invitationsArray) => {
-    invitationsArray.push.apply(invitationsArray,this.state.invitationsList);
+    invitationsArray.push.apply(invitationsArray, this.state.invitationsList);
     this.setState({
       invitationsList: invitationsArray,
     });
   }
 
-  onDeleteInvitation = (index) => {
-    this.state.invitationsList.splice(index, 1);
-    this.setState({
-      invitationsList: this.state.invitationsList,
-    });
-  }
-
-  componentDidMount() {
-    this.listInvitations();
-  }
-
   toggleInvitePeopleDialog = () => {
     this.setState({
       isInvitePeopleDialogOpen: !this.state.isInvitePeopleDialogOpen
     });
   }
 
-  emptyTip = () => {
-    return (
-      <EmptyTip>
-        <h2>{gettext('You have not invited any people.')}</h2>
-      </EmptyTip>
-    );
-  }
-
-  handlePermissionDenied = () => {
-    window.location = siteRoot;
-    return(
-      <div className="error mt-6 text-center">
-        <span>{this.state.permissionDeniedMsg}</span>
-      </div>
-    );
-  }
-
   render() {
     return (
       <Fragment>
@@ -216,22 +236,14 @@ class InvitationsView extends React.Component {
               <h3 className="sf-heading">{gettext('Invite People')}</h3>
             </div>
             <div className="cur-view-content">
-              {this.state.isLoading && <Loading/>}
-              {(!this.state.isLoading && this.state.permissionDeniedMsg !== '') && this.handlePermissionDenied() }
-              {(!this.state.isLoading && this.state.showEmptyTip && this.state.invitationsList.length === 0) && this.emptyTip()}
-              {(!this.state.isLoading && this.state.invitationsList.length !== 0) &&
-              < InvitationsListView
-                invitationsList={this.state.invitationsList}
-                onDeleteInvitation={this.onDeleteInvitation}
-              />}
+              <Content data={this.state} />
             </div>
           </div>
         </div>
         {this.state.isInvitePeopleDialogOpen &&
         <InvitePeopleDialog
-          toggleInvitePeopleDialog={this.toggleInvitePeopleDialog}
-          isInvitePeopleDialogOpen={this.state.isInvitePeopleDialogOpen}
           onInvitePeople={this.onInvitePeople}
+          toggleDialog={this.toggleInvitePeopleDialog}
         />
         }
       </Fragment>
diff --git a/frontend/src/pages/org-admin/index.js b/frontend/src/pages/org-admin/index.js
index ae71320bc5..a62a2ebad4 100644
--- a/frontend/src/pages/org-admin/index.js
+++ b/frontend/src/pages/org-admin/index.js
@@ -5,7 +5,13 @@ import { Router } from '@reach/router';
 import { siteRoot } from '../../utils/constants';
 import SidePanel from './side-panel';
 import OrgUsers from './org-users';
+import OrgUserProfile from './org-user-profile';
+import OrgUserRepos from './org-user-repos';
+import OrgUserSharedRepos from './org-user-shared-repos';
 import OrgGroups from './org-groups';
+import OrgGroupInfo from './org-group-info';
+import OrgGroupRepos from './org-group-repos';
+import OrgGroupMembers from './org-group-members';
 import OrgLibraries from './org-libraries';
 import OrgInfo from './org-info';
 import OrgLinks from './org-links';
@@ -35,10 +41,14 @@ class Org extends React.Component {
   componentDidMount() {
     let href = window.location.href.split('/');
     let currentTab = href[href.length - 2];
-    if (currentTab == 'useradmin') {
+
+    if (location.href.indexOf(`${siteRoot}org/useradmin`) != -1) {
       currentTab = 'users';
     }
-    if (currentTab > 0) {
+    if (location.href.indexOf(`${siteRoot}org/groupadmin`) != -1) {
+      currentTab = 'groupadmin';
+    }
+    if (location.href.indexOf(`${siteRoot}org/departmentadmin`) != -1) {
       currentTab = 'departmentadmin';
     }
     this.setState({currentTab: currentTab});
@@ -61,7 +71,13 @@ class Org extends React.Component {
           <Router className="reach-router">
             <OrgInfo path={siteRoot + 'org/orgmanage'}/>
             <OrgUsers path={siteRoot + 'org/useradmin'} currentTab={currentTab} tabItemClick={this.tabItemClick}/>
-            <OrgGroups path={siteRoot + 'org/groupadmin'}/>
+            <OrgUserProfile path={siteRoot + 'org/useradmin/info/:email/'} />
+            <OrgUserRepos path={siteRoot + 'org/useradmin/info/:email/repos/'} />
+            <OrgUserSharedRepos path={siteRoot + 'org/useradmin/info/:email/shared-repos/'} />
+            <OrgGroups path={siteRoot + 'org/groupadmin'} />
+            <OrgGroupInfo path={siteRoot + 'org/groupadmin/:groupID/'} />
+            <OrgGroupRepos path={siteRoot + 'org/groupadmin/:groupID/repos/'} />
+            <OrgGroupMembers path={siteRoot + 'org/groupadmin/:groupID/members/'} />
             <OrgLibraries path={siteRoot + 'org/repoadmin'}/>
             <OrgLinks path={siteRoot + 'org/publinkadmin'}/>
             <OrgDepartments path={siteRoot + 'org/departmentadmin'}>
@@ -69,9 +85,9 @@ class Org extends React.Component {
               <OrgDepartmentItem path='groups/:groupID'/>
             </OrgDepartments>
             <OrgLogs path={siteRoot + 'org/logadmin'} currentTab={currentTab} tabItemClick={this.tabItemClick}>
-              <OrgLogsFileAudit path='/'/>
-              <OrgLogsFileUpdate path={siteRoot + 'file-update'}/>
-              <OrgLogsPermAudit path={siteRoot + 'perm-audit'}/>
+              <OrgLogsFileAudit path='/' />
+              <OrgLogsFileUpdate path='file-update' />
+              <OrgLogsPermAudit path='perm-audit' />
             </OrgLogs>
           </Router>
         </div>
diff --git a/frontend/src/pages/org-admin/org-department-item.js b/frontend/src/pages/org-admin/org-department-item.js
index 09766b82b8..9f81356140 100644
--- a/frontend/src/pages/org-admin/org-department-item.js
+++ b/frontend/src/pages/org-admin/org-department-item.js
@@ -59,7 +59,7 @@ class OrgDepartmentItem extends React.Component {
   }
 
   listOrgGroupRepo = (groupID) => {
-    seafileAPI.orgAdminListDepartGroupRepos(orgID, groupID).then(res => {
+    seafileAPI.orgAdminListGroupRepos(orgID, groupID).then(res => {
       this.setState({ repos: res.data.libraries });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -392,7 +392,7 @@ class MemberItem extends React.Component {
 
   onChangeUserRole = (role) => {
     let isAdmin = role === 'Admin' ? true : false;
-    seafileAPI.orgAdminSetDepartGroupUserRole(orgID, this.props.groupID, this.props.member.email, isAdmin).then((res) => {
+    seafileAPI.orgAdminSetGroupMemberRole(orgID, this.props.groupID, this.props.member.email, isAdmin).then((res) => {
       this.props.onMemberChanged();
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/org-admin/org-group-info.js b/frontend/src/pages/org-admin/org-group-info.js
new file mode 100644
index 0000000000..57209c43f1
--- /dev/null
+++ b/frontend/src/pages/org-admin/org-group-info.js
@@ -0,0 +1,105 @@
+import React, { Component, Fragment } from 'react';
+import { Link } from '@reach/router';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, loginUrl, siteRoot } from '../../utils/constants';
+import Loading from '../../components/loading';
+import OrgAdminGroupNav from '../../components/org-admin-group-nav';
+import MainPanelTopbar from './main-panel-topbar';
+
+import '../../css/org-admin-user.css';
+
+const { orgID } = window.org.pageOptions;
+
+class OrgGroupInfo extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: ''
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.orgAdminGetGroup(orgID, this.props.groupID).then((res) => {
+      this.setState(Object.assign({
+        loading: false
+      }, res.data)); 
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        }); 
+      }   
+    }); 
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <MainPanelTopbar/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <OrgAdminGroupNav groupID={this.props.groupID} currentItem='info' />
+            <div className="cur-view-content">
+              <Content 
+                data={this.state}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  render() {
+    const {
+      loading, errorMsg,
+      group_name, creator_email, creator_name
+    } = this.props.data;
+
+    if (loading) {
+      return <Loading />;
+    }
+    if (errorMsg) {
+      return <p className="error text-center mt-2">{errorMsg}</p>;
+    }
+
+    return (
+      <dl>
+        <dt>{gettext('Name')}</dt>
+        <dd>{group_name}</dd>
+
+        <dt>{gettext('Creator')}</dt>
+        <dd>
+          <Link to={`${siteRoot}org/useradmin/info/${encodeURIComponent(creator_email)}/`}>{creator_name}</Link>
+        </dd>
+      </dl>
+    ); 
+  }
+}
+
+export default OrgGroupInfo;
diff --git a/frontend/src/pages/org-admin/org-group-members.js b/frontend/src/pages/org-admin/org-group-members.js
new file mode 100644
index 0000000000..342feb390b
--- /dev/null
+++ b/frontend/src/pages/org-admin/org-group-members.js
@@ -0,0 +1,146 @@
+import React, { Component, Fragment } from 'react';
+import { Link } from '@reach/router';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, loginUrl, siteRoot } from '../../utils/constants';
+import Loading from '../../components/loading';
+import OrgAdminGroupNav from '../../components/org-admin-group-nav';
+import MainPanelTopbar from './main-panel-topbar';
+
+import '../../css/org-admin-user.css';
+
+const { orgID } = window.org.pageOptions;
+
+class OrgGroupMembers extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: ''
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.orgAdminListGroupMembers(orgID, this.props.groupID).then((res) => {
+      this.setState(Object.assign({
+        loading: false
+      }, res.data)); 
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        }); 
+      }   
+    }); 
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <MainPanelTopbar/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <OrgAdminGroupNav groupID={this.props.groupID} currentItem='members' />
+            <div className="cur-view-content">
+              <Content 
+                data={this.state}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      loading, errorMsg, members 
+    } = this.props.data;
+
+    if (loading) {
+      return <Loading />;
+    }
+    if (errorMsg) {
+      return <p className="error text-center mt-2">{errorMsg}</p>;
+    }
+
+    return (
+      <Fragment>
+        <table className="table-hover">
+          <thead>
+            <tr>
+              <th width="10%"></th>
+              <th width="50%">{gettext('Name')}</th>
+              <th width="40%">{gettext('Role')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {members.map((item, index) => {
+              return <Item key={index} data={item} />;
+            })}
+          </tbody>
+        </table>
+      </Fragment>
+    ); 
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  getRoleText() {
+    switch (this.props.data.role) {
+      case 'Owner':
+        return gettext('Owner');
+      case 'Admin':
+        return gettext('Admin');
+      case 'Member':
+        return gettext('Member');
+    }
+  }
+
+  render() {
+    const item = this.props.data; 
+    return (
+      <Fragment>
+        <tr>
+          <td className="text-center">
+            <img src={item.avatar_url} alt="" className="avatar" width="32" />
+          </td>
+          <td>
+            <Link to={`${siteRoot}org/useradmin/info/${encodeURIComponent(item.email)}/`}>{item.name}</Link>
+          </td>
+          <td>
+            {this.getRoleText()}
+          </td>
+        </tr>
+      </Fragment>
+    );
+  }
+}
+
+export default OrgGroupMembers;
diff --git a/frontend/src/pages/org-admin/org-group-repos.js b/frontend/src/pages/org-admin/org-group-repos.js
new file mode 100644
index 0000000000..90f8d25132
--- /dev/null
+++ b/frontend/src/pages/org-admin/org-group-repos.js
@@ -0,0 +1,195 @@
+import React, { Component, Fragment } from 'react';
+import { Link } from '@reach/router';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, loginUrl, siteRoot } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import Loading from '../../components/loading';
+import toaster from '../../components/toast';
+import OrgAdminGroupNav from '../../components/org-admin-group-nav';
+import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
+import MainPanelTopbar from './main-panel-topbar';
+
+import '../../css/org-admin-user.css';
+
+const { orgID } = window.org.pageOptions;
+
+class OrgGroupRepos extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: ''
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.orgAdminListGroupRepos(orgID, this.props.groupID).then((res) => {
+      this.setState(Object.assign({
+        loading: false
+      }, res.data)); 
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        }); 
+      }   
+    }); 
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <MainPanelTopbar/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <OrgAdminGroupNav groupID={this.props.groupID} currentItem='repos' />
+            <div className="cur-view-content">
+              <Content 
+                data={this.state}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      loading, errorMsg, libraries 
+    } = this.props.data;
+
+    if (loading) {
+      return <Loading />;
+    }
+    if (errorMsg) {
+      return <p className="error text-center mt-2">{errorMsg}</p>;
+    }
+
+    return (
+      <Fragment>
+        <table className="table-hover">
+          <thead>
+            <tr>
+              <th width="4%">{/*icon*/}</th>
+              <th width="35%">{gettext('Name')}</th>
+              <th width="20%">{gettext('Size')}</th>
+              <th width="26%">{gettext('Shared By')}</th>
+              <th width="15%"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {libraries.map((item, index) => {
+              return <Item key={index} data={item} />;
+            })}
+          </tbody>
+        </table>
+      </Fragment>
+    ); 
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpIconShown: false,
+      deleted: false,
+      isDeleteRepoDialogOpen: false
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({
+      isOpIconShown: true
+    }); 
+  }
+
+  handleMouseOut = () => {
+    this.setState({
+      isOpIconShown: false
+    });
+  }
+
+  handleDeleteIconClick = (e) => {
+    e.preventDefault();
+    this.toggleDeleteRepoDialog();
+  }
+
+  toggleDeleteRepoDialog = () => {
+    this.setState({
+      isDeleteRepoDialogOpen: !this.state.isDeleteRepoDialogOpen
+    });
+  }
+
+  deleteRepo = () => {
+    const repo = this.props.data;
+    seafileAPI.deleteOrgRepo(orgID, repo.repo_id).then((res) => {
+      this.setState({
+        deleted: true
+      });
+      const msg = gettext('Successfully deleted {name}.').replace('{name}', repo.name);
+      toaster.success(msg);
+    }).catch((error) => {
+      const errorMsg = Utils.getErrorMsg(error);
+      toaster.danger(errorMsg);
+    });
+  }
+
+  render() {
+    const { deleted, isOpIconShown, isDeleteRepoDialogOpen } = this.state;
+    const repo = this.props.data; 
+
+    if (deleted) {
+      return null;
+    }
+
+    return (
+      <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" /> 
+          </td>
+          <td>{repo.name}</td>
+          <td>{Utils.bytesToSize(repo.size)}</td>
+          <td><Link to={`${siteRoot}org/useradmin/info/${encodeURIComponent(repo.shared_by)}/`}>{repo.shared_by_name}</Link></td>
+          <td>
+            <a href="#" className={`action-icon sf2-icon-delete${isOpIconShown ? '' : ' invisible'}`} title={gettext('Delete')} onClick={this.handleDeleteIconClick}></a>
+          </td>
+        </tr>
+        {isDeleteRepoDialogOpen && 
+        <DeleteRepoDialog
+          repo={repo}
+          onDeleteRepo={this.deleteRepo}
+          toggle={this.toggleDeleteRepoDialog}
+        />
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default OrgGroupRepos;
diff --git a/frontend/src/pages/org-admin/org-user-item.js b/frontend/src/pages/org-admin/org-user-item.js
index 039c3dda56..305fa12030 100644
--- a/frontend/src/pages/org-admin/org-user-item.js
+++ b/frontend/src/pages/org-admin/org-user-item.js
@@ -56,12 +56,15 @@ class UserItem extends React.Component {
            
   toggleResetPW = () => {
     const email = this.props.user.email;
+    toaster.success(gettext('Resetting user\'s password, please wait for a moment.'));
     seafileAPI.resetOrgUserPassword(orgID, email).then(res => {
       let msg;
       msg = gettext('Successfully reset password to %(passwd)s for user %(user)s.');
       msg = msg.replace('%(passwd)s', res.data.new_password);
       msg = msg.replace('%(user)s', email);
-      toaster.success(msg);
+      toaster.success(msg, {
+        duration: 15
+      });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
diff --git a/frontend/src/pages/org-admin/org-user-profile.js b/frontend/src/pages/org-admin/org-user-profile.js
new file mode 100644
index 0000000000..99c2e43a50
--- /dev/null
+++ b/frontend/src/pages/org-admin/org-user-profile.js
@@ -0,0 +1,202 @@
+import React, { Component, Fragment } from 'react';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, loginUrl } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import Loading from '../../components/loading';
+import OrgAdminUserNav from '../../components/org-admin-user-nav';
+import SetOrgUserName from '../../components/dialog/set-org-user-name';
+import SetOrgUserContactEmail from '../../components/dialog/set-org-user-contact-email';
+import SetOrgUserQuota from '../../components/dialog/set-org-user-quota';
+import MainPanelTopbar from './main-panel-topbar';
+
+import '../../css/org-admin-user.css';
+
+const { orgID, orgName } = window.org.pageOptions;
+
+class OrgUserProfile extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: ''
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.getOrgUserInfo(orgID, this.props.email).then((res) => {
+      this.setState(Object.assign({
+        loading: false
+      }, res.data)); 
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        }); 
+      }   
+    }); 
+  }
+
+  updateName = (name) => {
+    this.setState({
+      name: name 
+    });
+  }
+
+  updateContactEmail = (contactEmail) => {
+    this.setState({
+      contact_email: contactEmail 
+    });
+  }
+
+  updateQuota = (quota) => {
+    this.setState({
+      quota_total: quota 
+    });
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <MainPanelTopbar/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <OrgAdminUserNav email={this.props.email} currentItem='profile' />
+            <div className="cur-view-content">
+              <Content 
+                data={this.state}
+                updateName={this.updateName}
+                updateContactEmail={this.updateContactEmail}
+                updateQuota={this.updateQuota}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isSetNameDialogOpen: false,
+      isSetContactEmailDialogOpen: false,
+      isSetQuotaDialogOpen: false
+    };
+  }
+
+  toggleSetNameDialog = () => {
+    this.setState({
+      isSetNameDialogOpen: !this.state.isSetNameDialogOpen
+    });
+  }
+
+  toggleSetContactEmailDialog = () => {
+    this.setState({
+      isSetContactEmailDialogOpen: !this.state.isSetContactEmailDialogOpen
+    });
+  }
+
+  toggleSetQuotaDialog = () => {
+    this.setState({
+      isSetQuotaDialogOpen: !this.state.isSetQuotaDialogOpen
+    });
+  }
+
+  render() {
+    const {
+      loading, errorMsg,
+      avatar_url, email, contact_email,
+      name, quota_total, quota_usage
+    } = this.props.data;
+    const { isSetNameDialogOpen, isSetContactEmailDialogOpen, isSetQuotaDialogOpen } = this.state;
+
+    if (loading) {
+      return <Loading />;
+    }
+    if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    }
+
+    return (
+      <Fragment>
+        <dl>
+          <dt>{gettext('Avatar')}</dt>
+          <dd>
+            <img src={avatar_url} width="48" height="48" className="rounded" alt="" />
+          </dd>
+
+          <dt>ID</dt>
+          <dd>{email}</dd>
+
+          <dt>{gettext('Name')}</dt>
+          <dd>
+            {name || '--'}
+            <span title={gettext('Edit')} className="attr-action-icon fa fa-pencil-alt" onClick={this.toggleSetNameDialog}></span>
+          </dd>
+
+          <dt>{gettext('Contact Email')}</dt>
+          <dd>
+            {contact_email || '--'}
+            <span title={gettext('Edit')} className="attr-action-icon fa fa-pencil-alt" onClick={this.toggleSetContactEmailDialog}></span>
+          </dd>
+
+          <dt>{gettext('Organization')}</dt>
+          <dd>{orgName}</dd>
+
+          <dt>{gettext('Space Used / Quota')}</dt>
+          <dd>
+            {`${Utils.bytesToSize(quota_usage)}${quota_total > 0 ? ' / ' + Utils.bytesToSize(quota_total) : ''}`}
+            <span title={gettext('Edit')} className="attr-action-icon fa fa-pencil-alt" onClick={this.toggleSetQuotaDialog}></span>
+          </dd>
+        </dl>
+        {isSetNameDialogOpen && 
+        <SetOrgUserName
+          orgID={orgID}
+          email={email}
+          name={name}
+          updateName={this.props.updateName}
+          toggleDialog={this.toggleSetNameDialog}
+        />
+        }
+        {isSetContactEmailDialogOpen && 
+        <SetOrgUserContactEmail
+          orgID={orgID}
+          email={email}
+          contactEmail={contact_email}
+          updateContactEmail={this.props.updateContactEmail}
+          toggleDialog={this.toggleSetContactEmailDialog}
+        />
+        }
+        {isSetQuotaDialogOpen && 
+        <SetOrgUserQuota
+          orgID={orgID}
+          email={email}
+          quotaTotal={quota_total}
+          updateQuota={this.props.updateQuota}
+          toggleDialog={this.toggleSetQuotaDialog}
+        />
+        }
+      </Fragment>
+    ); 
+  }
+}
+
+export default OrgUserProfile;
diff --git a/frontend/src/pages/org-admin/org-user-repos.js b/frontend/src/pages/org-admin/org-user-repos.js
new file mode 100644
index 0000000000..fb8f4ba87b
--- /dev/null
+++ b/frontend/src/pages/org-admin/org-user-repos.js
@@ -0,0 +1,195 @@
+import React, { Component, Fragment } from 'react';
+import moment from 'moment';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, loginUrl } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import Loading from '../../components/loading';
+import toaster from '../../components/toast';
+import OrgAdminUserNav from '../../components/org-admin-user-nav';
+import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
+import MainPanelTopbar from './main-panel-topbar';
+
+import '../../css/org-admin-user.css';
+
+const { orgID } = window.org.pageOptions;
+
+class OrgUserOwnedRepos extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: ''
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.getOrgUserOwnedRepos(orgID, this.props.email).then((res) => {
+      this.setState(Object.assign({
+        loading: false
+      }, res.data)); 
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        }); 
+      }   
+    }); 
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <MainPanelTopbar/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <OrgAdminUserNav email={this.props.email} currentItem='owned-repos' />
+            <div className="cur-view-content">
+              <Content 
+                data={this.state}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      loading, errorMsg, repo_list
+    } = this.props.data;
+
+    if (loading) {
+      return <Loading />;
+    }
+    if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    }
+
+    return (
+      <Fragment>
+        <table className="table-hover">
+          <thead>
+            <tr>
+              <th width="4%">{/*icon*/}</th>
+              <th width="35%">{gettext('Name')}</th>
+              <th width="16%">{gettext('Size')}</th>
+              <th width="25%">{gettext('Last Update')}</th>
+              <th width="20%"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {repo_list.map((item, index) => {
+              return <Item key={index} data={item} />;
+            })}
+          </tbody>
+        </table>
+      </Fragment>
+    ); 
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpIconShown: false,
+      deleted: false,
+      isDeleteRepoDialogOpen: false
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({
+      isOpIconShown: true
+    }); 
+  }
+
+  handleMouseOut = () => {
+    this.setState({
+      isOpIconShown: false
+    });
+  }
+
+  handleDeleteIconClick = (e) => {
+    e.preventDefault();
+    this.toggleDeleteRepoDialog();
+  }
+
+  toggleDeleteRepoDialog = () => {
+    this.setState({
+      isDeleteRepoDialogOpen: !this.state.isDeleteRepoDialogOpen
+    });
+  }
+
+  deleteRepo = () => {
+    const repo = this.props.data;
+    seafileAPI.deleteOrgRepo(orgID, repo.repo_id).then((res) => {
+      this.setState({
+        deleted: true
+      });
+      const msg = gettext('Successfully deleted {name}.').replace('{name}', repo.repo_name);
+      toaster.success(msg);
+    }).catch((error) => {
+      const errorMsg = Utils.getErrorMsg(error);
+      toaster.danger(errorMsg);
+    });
+  }
+
+  render() {
+    const { deleted, isOpIconShown, isDeleteRepoDialogOpen } = this.state;
+    const repo = this.props.data; 
+
+    if (deleted) {
+      return null;
+    }
+
+    return (
+      <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" /> 
+          </td>
+          <td>{repo.repo_name}</td>
+          <td>{Utils.bytesToSize(repo.size)}</td>
+          <td title={moment(repo.last_modified).format('LLLL')}>{moment(repo.last_modified).format('YYYY-MM-DD')}</td>
+          <td>
+            <a href="#" className={`action-icon sf2-icon-delete${isOpIconShown ? '' : ' invisible'}`} title={gettext('Delete')} onClick={this.handleDeleteIconClick}></a>
+          </td>
+        </tr>
+        {isDeleteRepoDialogOpen && 
+        <DeleteRepoDialog
+          repo={repo}
+          onDeleteRepo={this.deleteRepo}
+          toggle={this.toggleDeleteRepoDialog}
+        />
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default OrgUserOwnedRepos;
diff --git a/frontend/src/pages/org-admin/org-user-shared-repos.js b/frontend/src/pages/org-admin/org-user-shared-repos.js
new file mode 100644
index 0000000000..2c698d705b
--- /dev/null
+++ b/frontend/src/pages/org-admin/org-user-shared-repos.js
@@ -0,0 +1,132 @@
+import React, { Component, Fragment } from 'react';
+import moment from 'moment';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, loginUrl } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import Loading from '../../components/loading';
+import OrgAdminUserNav from '../../components/org-admin-user-nav';
+import MainPanelTopbar from './main-panel-topbar';
+
+import '../../css/org-admin-user.css';
+
+const { orgID } = window.org.pageOptions;
+
+class OrgUserSharedRepos extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: ''
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.getOrgUserBesharedRepos(orgID, this.props.email).then((res) => {
+      this.setState(Object.assign({
+        loading: false
+      }, res.data)); 
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        }); 
+      }   
+    }); 
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <MainPanelTopbar/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <OrgAdminUserNav email={this.props.email} currentItem='shared-repos' />
+            <div className="cur-view-content">
+              <Content 
+                data={this.state}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      loading, errorMsg, repo_list
+    } = this.props.data;
+
+    if (loading) {
+      return <Loading />;
+    }
+    if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    }
+
+    return (
+      <table className="table-hover">
+        <thead>
+          <tr>
+            <th width="4%">{/*icon*/}</th>
+            <th width="30%">{gettext('Name')}</th>
+            <th width="26%">{gettext('Owner')}</th>
+            <th width="15%">{gettext('Size')}</th>
+            <th width="25%">{gettext('Last Update')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {repo_list.map((item, index) => {
+            return <Item key={index} data={item} />;
+          })}
+        </tbody>
+      </table>
+    ); 
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const repo = this.props.data; 
+    return (
+      <tr>
+        <td>
+          <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>
+        <td>{Utils.bytesToSize(repo.size)}</td>
+        <td title={moment(repo.last_modified).format('LLLL')}>{moment(repo.last_modified).format('YYYY-MM-DD')}</td>
+      </tr>
+    );
+  }
+}
+
+export default OrgUserSharedRepos;
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index a44aa3389a..c60602255d 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -983,6 +983,13 @@ export const Utils = {
     }
 
     return false;
+  },
+
+  registerGlobalVariable(namespace, key, value) {
+    if (!window[namespace]) {
+      window[namespace] = {};
+    }
+    window[namespace][key] = value;
   }
 
 };
diff --git a/media/css/sf_font3/iconfont.css b/media/css/sf_font3/iconfont.css
index f858ebce99..fe3e68aaa4 100644
--- a/media/css/sf_font3/iconfont.css
+++ b/media/css/sf_font3/iconfont.css
@@ -1,10 +1,10 @@
 @font-face {font-family: "sf3-font";
-  src: url('iconfont.eot?t=1562919437059'); /* IE9 */
-  src: url('iconfont.eot?t=1562919437059#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAXIAAsAAAAADBgAAAV6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDOAqLFIhzATYCJAMYCw4ABCAFhG0HXRseChGVpDuR/UzI5P6wvAd1auyv0yQR3c8g2tLZEzh2sRf8VS5JyxMxh5jo0Tq0jkfErQbAfftlu6bW3SBMhNnuztJ89b+87Pb8yYY2HqdRCiFBOBoggIDsH8de/nVe5/nuvn+wQs8IzbKmD7gbWERblPBmBUxTnIlt9giyeQWz4DN5lcuBAKBIgQxSo1YDNyQIkNsRAKRf756dIVX0EHqwBJJKxRwqgPwDERL3O3cYwN/J55NHcBIJ4CDykFdq0qNmN1S5S+625JVvCtrxCpTLWQH4RwE8ABmAAJB+rL0H+EwqJ3LKZQsoB0BSa3HAXe6u+27Lb9+IQO42F75KXAKFFv/yOPAQIAJEBSnXQtmAEiJwlxgZEgUHGaBoDi14KNzQQoCiJcogAgBUF9wkGSC3Ac4MqZRpGw1E8JAgGJGRkGgytdJBIkCiVh5qTNXh93Rk/gWAMp9S30JCvItaV9nRMWo7DO2rOffdBgZMbMEKW3TDumX22MKcuQcLQi0D1sjyvMACi2XRodx5y6ZuzPIFWkQUU5DNOZAfXGQ2L1xpj7W8fyDg3l5j9mJbMGha4HeEyaRVhWFzyNfj9Okmm+XTZzzRLfluBOeY/GHGclvO2cPOtZy70LH6dCk6NycUSKRu/U4hYrE4HOGYeWPxnWeLlpXfdq72upJ7zlQMLrFFZwDz1phM084WX1rp5NkWe3sSBgYKStTDsh6GNSeShcnHXfq1J1PEaac8szdbheiWbMO8bQ4xtjVnKAVrCUa6EYqXjS4ihPaoS7nyFykL2EjiXUj1vvlA20s8d3/fQrvoDsymc7favZMsLcPzmD/fE528eHVBCyE6f4yyhen827xbc7SzF7fWzcu8mxHdsqVd5l1Ktb7FKy+Z9m2uAQYzll5bGybJrT14pF8v9lfAtP8iUb757KQRNY90614lyM2mTveZpk9IvRkZ0YxIpqveSU+PQz1a0LXTQ8/lr9fiZ9szIxm/O6vNkYfX8vy0Ia3N8tOeHj3M/bpBvv45od70ot9+J7TpxXrqH8tznoGZ9emM4jV2/fmdtp2OlVjOd+H5w578D2dSG6CBpXSj+LaNJTfdtb/z82uhZn4G/51YVm7W3Val25RN89jEgybDb32d51bNutfb2evZD0PW7XVordUPZVh1jfmBngylUh31b7gwJ1A3HNacdKtA2cnb/6mh2a6p8Y+7Rd1K04uoQoumK8KDgc+uyzvXvXZ9w3Xu8a7ruwqiBqKftWFo/ubrm3W7Ns/SE8P+Uv9H0gXcov9N4qXeER+rWp+ypl2G+EqzQXFqref3Lff2tmJW57Z7uwwvOjsOd5ed8t2QB/YEa0Vrgit+UMV/Xpb9a+yg+JI5ly7lsHEJpbYNuum6Zd1meWW3vcQ4yDV5hQfw7bF7vCXRbKc6qyC5lX8p0y5tBrFdxUcdDRXeSGz1WrrQqKvO8X3bCjDjBRZCcBDYnMD2wOrSgzSoxjkhlAgNfxRFZQHNNhyAogA7kwbi/V1KaRoth/1RmgoOnGrJAJ4kCyFgZBAxLlCRVAaq0P3RTAJ1RKYBUOBLAGH0DRy9bcAz+kEImF8Qmf2DirEjUC26OiWT05BdK5whkv+kIcjKOseyjds8LX1A9zo7LYsS4gt0G0JUF1U9dY8Veok9treuMWNilYXuxNUwz0JJZUSwojdLl7Jk7g5FkGWXqU6BYyAi3mdEPwjEincymaFYK298/APovJo52lPzYH+BEfIBqye1QgXEvXwdVfNROMh+02kYRRlhv1gsyB1ZYVZxQRK/0QgCU+hnRJOL0unFY+XFSyqXf1kKNCDvpIojPBGISFREDXZzfkY+SydnvM37adJhQ/6O0Ds7uhhPLLqcNlHb7QAAAA==') format('woff2'),
-  url('iconfont.woff?t=1562919437059') format('woff'),
-  url('iconfont.ttf?t=1562919437059') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1562919437059#sf3-font') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1564546243284'); /* IE9 */
+  src: url('iconfont.eot?t=1564546243284#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAakAAsAAAAADUAAAAZVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDTgqNDIpEATYCJAMcCxAABCAFhG0HcRsdC1GUTlKX7EeCbdtghVejLpYjGdqh2RIKfanCHUG19m/PHv69D+wAyLMlRYlNRREID2RsjIrREYaNeFdLtwmtC8WN/+8uitZUquTb3uXyZX82mzYepzECjZAgHJLhvzN7k9kUb6JFvKLqoEJ2CmfbHjRpndw5rrKigzvX+Dr//bHSzfG1xXwbVmCFXvH/38i6aMuwpgM+OoxoixQsOz8wOsDTkM5mYsGHbwAuJ5BNc3TOH96GsK/E7YFOT6xJYT/lVdawQuuoSw4txTdkbXqfZoGv7vvjP+zHPklV4LteP74v4OoX8itFiR5hp6Ewri+M3lEU2ARK4l1p9IWtYNt0KJftsu0cyFpJ+iV6Dh+JH+37v8d6HYPYckTlrN9guyUhKdp/eJWaqHHUD+ZdreZXR9k53IUd8ABuBfAQbiXwBG4VcArsrNKbnoOYA2kP5BOYh9U+leLuC5TDXNrWjsncesI4t7I2IpWHL7+Fit+FwqY47sEUVQAQlRDKqxFEVrMtrQlV2Y6pwLp+l323k0omVtXE1XV1NPD01Z7l075qsZKjbfRWVrHZNTNeFQ23ut3lSpGWYKqwsikfVQ2LVd3M0xe8v1IpGEwvreWqVMwqBV+DXG/x07DUctxo3NjrbzQJdX0+AqAqYyo0GOYlLhvDLOLyan6rMRKWe6qVdlAg30mNsNl8vkbP6g4cNoc1xA1YsjoixkwJqjqurgiAijYm87Y5sD5x2SwaP4hgAAMQQETcE4bT25YcrG4shtPalx3Jt1eEpb0cK12fB71igE/W93sWQoCJUUYkCARHW65BEIhnbaTkDxFV2AeIrBrS5JUA7FjHcx+XV/PIAmUpLO/nya6zxZoKTOEj1N2obfUVWekqPyb6MKpiQNbvSSmt3UatCOleoOsbijfI6iFFXnuWuk+MRoHJJLRYxGbzziCZGsJMGOiqlltTgwSqzY4llgKzWVSnI6xiNO7QyFhqO4FIlZUEUyjQKRVbLISuaGWRwnL7/3I6oGNGNEpmKvad/htP639r+y+A299rdeiWUvtzGXOSgmQVqRSGCkybXiK5Ra46V61beO6yEJ/BRbDdoH7j/98fNqU8N63rtdDUMv+zmcKLXc7bG41CHGcdkwD/O/+M5RrCrl5D4Kafc1dfiCMJT7rlwaLA9JGvgik7qVhQI7ofRWeFPn+anPJBPjtqvc2ODWsEcGRy35szqwwfVzSYHOO/uYCbLLnZU4F9Mc2kXz0aamkpeXw49NDr89KOcT6FkzbjyqFuQE8KXYnE7NVXwU9lyhyNRmr9VsqYG4Pfpq8dXJv+bWeLnERDGCRgmIFgKXDy9R1+55w/7nTdIb0YuTPiq6MjtJKuQp/eO73Ukd4SGkKfjPzB2KrKFvuBSV7XO4K/UjivsE37pfIo7JT1aorwWt/j8a0YJ3Tg8Qj97Z3QPWcFMTeDpU95tpwEjm24zamEb9/FfP3JKZuISNe+DZ9Lso0cOHUv/D5ngP2ex30H7Ev2SpBLlxCJYF+6KCF5Ll6M7+viJfcDf+c/KIMfkgwG0ociVGtTDV9S/va0y6SlMjasTRKSTkuRLWAXSreQkBS3PSXlUg4yJK9+z8nfkP/7K5xRkJOXk4NbS17+lpOfnW90FVrbbm1KGvgc8DVRAgUA/P8CfYyynWsQFaOTwe1H36FudQNqRPd+fTeTx8OLg23vZ/H/bfeRXvLTRHy10j1DCWgIvoMY2fhlzZUIH9FxcF9TlsWV4XorA5Hf+G7tBxKyjK9pctTv+sgEGfk/IBMxJI0pKLQWqSVzEyqdQ6i1jiDb8Hh0ZwzbEmUf1n0wCMM+IRn0AwrDvqkl8wcqk/6gNhxbkN2E7Sk7y2EP0xhTwUJlG2VzarRsJYeFOnZ95z6aRZVy0uw4Y+S5LagwMDjbeMQGeR17zJcmEtFKM9XqgV0Nq4pUyzTDXLypSNvzg/CyPb2cajh0hqGUGMmCktkoWjnS0DuJQ69pMTf39X3IWKikuKbfSXQMCchi+UrIE4D6iBpSv/uiRcslIyLtsKZUmZE6kIflwqgSVaK05RvNoJzwTJcot3r81niairyjJPXtbINB8Ds2kaKIMqqoo4lW90jSrEK3IkMXeDofkFu2c3RXmE9T2dpXFNs4cb1dSCwXedrkWLm2WVpJ5fJ5AAAAAAA=') format('woff2'),
+  url('iconfont.woff?t=1564546243284') format('woff'),
+  url('iconfont.ttf?t=1564546243284') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1564546243284#sf3-font') format('svg'); /* iOS 4.1- */
 }
 
 .sf3-font {
@@ -35,3 +35,7 @@
   content: "\e657";
 }
 
+.sf3-font-cancel-invitation:before {
+  content: "\e661";
+}
+
diff --git a/media/css/sf_font3/iconfont.eot b/media/css/sf_font3/iconfont.eot
index 3748273478..7563a84236 100644
Binary files a/media/css/sf_font3/iconfont.eot and b/media/css/sf_font3/iconfont.eot differ
diff --git a/media/css/sf_font3/iconfont.js b/media/css/sf_font3/iconfont.js
index 76f5196568..018147f11f 100644
--- a/media/css/sf_font3/iconfont.js
+++ b/media/css/sf_font3/iconfont.js
@@ -1 +1 @@
-!function(h){var c,e='<svg><symbol id="sf3-font-dtable-logo" viewBox="0 0 1024 1024"><path d="M160 128h166.4c19.2 0 32 12.8 32 32v166.4c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V160c0-19.2 12.8-32 32-32z m0 268.8h166.4c19.2 0 32 12.8 32 32v166.4c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32v-166.4c0-19.2 12.8-32 32-32z m0 268.8h166.4c19.2 0 32 12.8 32 32V864c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32v-166.4c0-19.2 12.8-32 32-32z m268.8 0h166.4c19.2 0 32 12.8 32 32V864c0 19.2-12.8 32-32 32h-166.4c-19.2 0-32-12.8-32-32v-166.4c0-19.2 12.8-32 32-32z m268.8 0H864c19.2 0 32 12.8 32 32V864c0 19.2-12.8 32-32 32h-166.4c-19.2 0-32-12.8-32-32v-166.4c0-19.2 12.8-32 32-32z m0-268.8H864c19.2 0 32 12.8 32 32v166.4c0 19.2-12.8 32-32 32h-166.4c-19.2 0-32-12.8-32-32v-166.4c0-19.2 12.8-32 32-32z m-268.8 0h166.4c19.2 0 32 12.8 32 32v166.4c0 19.2-12.8 32-32 32h-166.4c-19.2 0-32-12.8-32-32v-166.4c0-19.2 12.8-32 32-32z m0-268.8h166.4c19.2 0 32 12.8 32 32v166.4c0 19.2-12.8 32-32 32h-166.4c-19.2 0-32-12.8-32-32V160c0-19.2 12.8-32 32-32z m268.8 0H864c19.2 0 32 12.8 32 32v166.4c0 19.2-12.8 32-32 32h-166.4c-19.2 0-32-12.8-32-32V160c0-19.2 12.8-32 32-32z" fill="#999999" ></path></symbol><symbol id="sf3-font-enterprise-wechat" viewBox="0 0 1025 1024"><path d="M672 748.8c-6.4 6.4-6.4 12.8 0 19.2h3.2c28.8 25.6 48 64 51.2 102.4 9.6 28.8 38.4 48 67.2 38.4 28.8-9.6 48-38.4 38.4-67.2-6.4-22.4-25.6-38.4-48-41.6-35.2-6.4-70.4-25.6-96-51.2-3.2-3.2-9.6-3.2-16 0zM896 662.4c-9.6 9.6-16 19.2-16 32-6.4 35.2-25.6 70.4-51.2 96-6.4 6.4-6.4 12.8 0 19.2 6.4 6.4 12.8 6.4 19.2 0l3.2-3.2c25.6-28.8 64-48 102.4-51.2 28.8-6.4 48-38.4 38.4-67.2-6.4-28.8-38.4-48-67.2-38.4-12.8 0-19.2 6.4-28.8 12.8zM742.4 505.6c-22.4 22.4-22.4 57.6 0 76.8 9.6 9.6 19.2 16 32 16 35.2 6.4 70.4 25.6 96 51.2 6.4 6.4 12.8 6.4 19.2 0 6.4-6.4 6.4-12.8 0-19.2l-3.2-3.2c-28.8-25.6-48-64-51.2-102.4-9.6-28.8-38.4-48-67.2-38.4-12.8 6.4-19.2 12.8-25.6 19.2zM713.6 592c-28.8 32-64 51.2-105.6 54.4-28.8 6.4-48 38.4-38.4 67.2 3.2 9.6 6.4 19.2 16 25.6 22.4 22.4 57.6 22.4 76.8 0 9.6-9.6 16-19.2 16-32 6.4-35.2 25.6-70.4 51.2-96 6.4-6.4 6.4-12.8 0-19.2 0-3.2-9.6-3.2-16 0z" fill="#949494" ></path><path d="M380.8 115.2c-99.2 9.6-192 51.2-256 118.4C99.2 259.2 80 288 64 320c-48 99.2-41.6 217.6 22.4 307.2 16 25.6 48 60.8 73.6 83.2l-12.8 92.8v12.8c0 16 16 28.8 32 28.8 3.2 0 9.6-3.2 12.8-3.2h3.2l28.8-12.8 86.4-41.6c41.6 12.8 83.2 16 124.8 16 51.2 0 102.4-9.6 153.6-25.6-25.6-9.6-41.6-32-38.4-57.6-51.2 16-105.6 22.4-156.8 16H384c-19.2-3.2-38.4-6.4-57.6-12.8-9.6-3.2-22.4-3.2-28.8 3.2h-3.2L224 768l-3.2 3.2h-3.2c-3.2 0-3.2-3.2-3.2-6.4l3.2-9.6 3.2-12.8 6.4-19.2 6.4-22.4c3.2-12.8 0-25.6-9.6-32-28.8-19.2-51.2-44.8-70.4-73.6-57.6-73.6-64-166.4-25.6-243.2 12.8-25.6 28.8-48 51.2-70.4 54.4-54.4 128-89.6 211.2-99.2 28.8-3.2 57.6-3.2 86.4 0 83.2 9.6 156.8 44.8 208 99.2 19.2 22.4 38.4 44.8 48 70.4 16 32 25.6 70.4 25.6 105.6v12.8c22.4-12.8 51.2-9.6 67.2 6.4l3.2 3.2c3.2-54.4-6.4-108.8-28.8-156.8-16-32-35.2-60.8-60.8-86.4-67.2-67.2-156.8-112-252.8-121.6-38.4-6.4-73.6-6.4-105.6 0z" fill="#949494" ></path></symbol><symbol id="sf3-font-add" viewBox="0 0 1024 1024"><path d="M473.6 473.6v-147.2h73.6v150.4h150.4v73.6h-150.4v150.4h-73.6v-150.4h-147.2v-73.6h147.2zM160 64h704c54.4 0 96 41.6 96 96v704c0 54.4-41.6 96-96 96H160c-54.4 0-96-41.6-96-96V160c0-54.4 41.6-96 96-96z m32 64c-35.2 0-64 28.8-64 64v640c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64V192c0-35.2-28.8-64-64-64H192z" fill="#929292" ></path></symbol><symbol id="sf3-font-form" viewBox="0 0 1024 1024"><path d="M624 400h-224v224h224v-224z m73.6 0v224h185.6v-224h-185.6z m-73.6 492.8v-195.2h-224v195.2h224z m73.6 0h153.6c19.2 0 32-12.8 32-32v-163.2h-185.6v195.2zM326.4 400H137.6v224h188.8v-224z m0 492.8v-195.2H137.6v163.2c0 19.2 12.8 32 32 32h156.8z m556.8-566.4V179.2c0-19.2-12.8-32-32-32H169.6c-19.2 0-32 12.8-32 32v147.2h745.6zM160 64h704c54.4 0 96 41.6 96 96v704c0 54.4-41.6 96-96 96H160c-54.4 0-96-41.6-96-96V160c0-54.4 41.6-96 96-96z" fill="#949494" ></path></symbol><symbol id="sf3-font-sort" viewBox="0 0 1024 1024"><path d="M763.345455 961.939394c-31.030303 0-55.854545-21.721212-55.854546-58.957576V310.30303l-99.29697 114.812122c-12.412121 15.515152-24.824242 18.618182-40.339394 18.618181-31.030303 0-58.957576-27.927273-58.957575-58.957575 0-15.515152 3.10303-31.030303 15.515151-43.442425l189.284849-232.727272c18.618182-9.309091 31.030303-15.515152 46.545454-15.515152s31.030303 6.206061 43.442424 18.618182l192.387879 232.727273c9.309091 12.412121 12.412121 27.927273 12.412121 43.442424 0 31.030303-24.824242 58.957576-55.854545 58.957576-15.515152 0-31.030303-6.206061-43.442424-18.618182L812.993939 310.30303v595.781818c6.206061 34.133333-12.412121 55.854545-49.648484 55.854546zM15.515152 217.212121c0 34.133333 27.927273 62.060606 58.957575 62.060606h316.509091c31.030303 0 58.957576-27.927273 58.957576-62.060606s-27.927273-62.060606-58.957576-62.060606H74.472727C40.339394 155.151515 15.515152 183.078788 15.515152 217.212121z m58.957575 372.363637h378.569697c31.030303 0 58.957576-27.927273 58.957576-62.060606s-27.927273-62.060606-58.957576-62.060607H74.472727c-31.030303 0-58.957576 27.927273-58.957575 62.060607 3.10303 34.133333 27.927273 62.060606 58.957575 62.060606z m-3.10303 310.30303h446.836364c31.030303 0 55.854545-27.927273 55.854545-62.060606s-24.824242-62.060606-55.854545-62.060606H71.369697c-31.030303 0-55.854545 27.927273-55.854545 62.060606 3.10303 34.133333 27.927273 62.060606 55.854545 62.060606z" fill="#969696" ></path></symbol></svg>',t=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss");if(t&&!h.__iconfont__svg__cssinject__){h.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}!function(c){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(c,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),c()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(n=c,o=h.document,l=!1,(i=function(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(i,50)}e()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,e())});function e(){l||(l=!0,n())}var n,o,l,i}(function(){var c,t;(c=document.createElement("div")).innerHTML=e,e=null,(t=c.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",function(c,t){t.firstChild?function(c,t){t.parentNode.insertBefore(c,t)}(c,t.firstChild):t.appendChild(c)}(t,document.body))})}(window);
\ No newline at end of file
+!function(h){var c,e='<svg><symbol id="sf3-font-dtable-logo" viewBox="0 0 1024 1024"><path d="M160 128h166.4c19.2 0 32 12.8 32 32v166.4c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V160c0-19.2 12.8-32 32-32z m0 268.8h166.4c19.2 0 32 12.8 32 32v166.4c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32v-166.4c0-19.2 12.8-32 32-32z m0 268.8h166.4c19.2 0 32 12.8 32 32V864c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32v-166.4c0-19.2 12.8-32 32-32z m268.8 0h166.4c19.2 0 32 12.8 32 32V864c0 19.2-12.8 32-32 32h-166.4c-19.2 0-32-12.8-32-32v-166.4c0-19.2 12.8-32 32-32z m268.8 0H864c19.2 0 32 12.8 32 32V864c0 19.2-12.8 32-32 32h-166.4c-19.2 0-32-12.8-32-32v-166.4c0-19.2 12.8-32 32-32z m0-268.8H864c19.2 0 32 12.8 32 32v166.4c0 19.2-12.8 32-32 32h-166.4c-19.2 0-32-12.8-32-32v-166.4c0-19.2 12.8-32 32-32z m-268.8 0h166.4c19.2 0 32 12.8 32 32v166.4c0 19.2-12.8 32-32 32h-166.4c-19.2 0-32-12.8-32-32v-166.4c0-19.2 12.8-32 32-32z m0-268.8h166.4c19.2 0 32 12.8 32 32v166.4c0 19.2-12.8 32-32 32h-166.4c-19.2 0-32-12.8-32-32V160c0-19.2 12.8-32 32-32z m268.8 0H864c19.2 0 32 12.8 32 32v166.4c0 19.2-12.8 32-32 32h-166.4c-19.2 0-32-12.8-32-32V160c0-19.2 12.8-32 32-32z" fill="#999999" ></path></symbol><symbol id="sf3-font-enterprise-wechat" viewBox="0 0 1025 1024"><path d="M672 748.8c-6.4 6.4-6.4 12.8 0 19.2h3.2c28.8 25.6 48 64 51.2 102.4 9.6 28.8 38.4 48 67.2 38.4 28.8-9.6 48-38.4 38.4-67.2-6.4-22.4-25.6-38.4-48-41.6-35.2-6.4-70.4-25.6-96-51.2-3.2-3.2-9.6-3.2-16 0zM896 662.4c-9.6 9.6-16 19.2-16 32-6.4 35.2-25.6 70.4-51.2 96-6.4 6.4-6.4 12.8 0 19.2 6.4 6.4 12.8 6.4 19.2 0l3.2-3.2c25.6-28.8 64-48 102.4-51.2 28.8-6.4 48-38.4 38.4-67.2-6.4-28.8-38.4-48-67.2-38.4-12.8 0-19.2 6.4-28.8 12.8zM742.4 505.6c-22.4 22.4-22.4 57.6 0 76.8 9.6 9.6 19.2 16 32 16 35.2 6.4 70.4 25.6 96 51.2 6.4 6.4 12.8 6.4 19.2 0 6.4-6.4 6.4-12.8 0-19.2l-3.2-3.2c-28.8-25.6-48-64-51.2-102.4-9.6-28.8-38.4-48-67.2-38.4-12.8 6.4-19.2 12.8-25.6 19.2zM713.6 592c-28.8 32-64 51.2-105.6 54.4-28.8 6.4-48 38.4-38.4 67.2 3.2 9.6 6.4 19.2 16 25.6 22.4 22.4 57.6 22.4 76.8 0 9.6-9.6 16-19.2 16-32 6.4-35.2 25.6-70.4 51.2-96 6.4-6.4 6.4-12.8 0-19.2 0-3.2-9.6-3.2-16 0z" fill="#949494" ></path><path d="M380.8 115.2c-99.2 9.6-192 51.2-256 118.4C99.2 259.2 80 288 64 320c-48 99.2-41.6 217.6 22.4 307.2 16 25.6 48 60.8 73.6 83.2l-12.8 92.8v12.8c0 16 16 28.8 32 28.8 3.2 0 9.6-3.2 12.8-3.2h3.2l28.8-12.8 86.4-41.6c41.6 12.8 83.2 16 124.8 16 51.2 0 102.4-9.6 153.6-25.6-25.6-9.6-41.6-32-38.4-57.6-51.2 16-105.6 22.4-156.8 16H384c-19.2-3.2-38.4-6.4-57.6-12.8-9.6-3.2-22.4-3.2-28.8 3.2h-3.2L224 768l-3.2 3.2h-3.2c-3.2 0-3.2-3.2-3.2-6.4l3.2-9.6 3.2-12.8 6.4-19.2 6.4-22.4c3.2-12.8 0-25.6-9.6-32-28.8-19.2-51.2-44.8-70.4-73.6-57.6-73.6-64-166.4-25.6-243.2 12.8-25.6 28.8-48 51.2-70.4 54.4-54.4 128-89.6 211.2-99.2 28.8-3.2 57.6-3.2 86.4 0 83.2 9.6 156.8 44.8 208 99.2 19.2 22.4 38.4 44.8 48 70.4 16 32 25.6 70.4 25.6 105.6v12.8c22.4-12.8 51.2-9.6 67.2 6.4l3.2 3.2c3.2-54.4-6.4-108.8-28.8-156.8-16-32-35.2-60.8-60.8-86.4-67.2-67.2-156.8-112-252.8-121.6-38.4-6.4-73.6-6.4-105.6 0z" fill="#949494" ></path></symbol><symbol id="sf3-font-add" viewBox="0 0 1024 1024"><path d="M473.6 473.6v-147.2h73.6v150.4h150.4v73.6h-150.4v150.4h-73.6v-150.4h-147.2v-73.6h147.2zM160 64h704c54.4 0 96 41.6 96 96v704c0 54.4-41.6 96-96 96H160c-54.4 0-96-41.6-96-96V160c0-54.4 41.6-96 96-96z m32 64c-35.2 0-64 28.8-64 64v640c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64V192c0-35.2-28.8-64-64-64H192z" fill="#929292" ></path></symbol><symbol id="sf3-font-form" viewBox="0 0 1024 1024"><path d="M624 400h-224v224h224v-224z m73.6 0v224h185.6v-224h-185.6z m-73.6 492.8v-195.2h-224v195.2h224z m73.6 0h153.6c19.2 0 32-12.8 32-32v-163.2h-185.6v195.2zM326.4 400H137.6v224h188.8v-224z m0 492.8v-195.2H137.6v163.2c0 19.2 12.8 32 32 32h156.8z m556.8-566.4V179.2c0-19.2-12.8-32-32-32H169.6c-19.2 0-32 12.8-32 32v147.2h745.6zM160 64h704c54.4 0 96 41.6 96 96v704c0 54.4-41.6 96-96 96H160c-54.4 0-96-41.6-96-96V160c0-54.4 41.6-96 96-96z" fill="#949494" ></path></symbol><symbol id="sf3-font-sort" viewBox="0 0 1024 1024"><path d="M763.345455 961.939394c-31.030303 0-55.854545-21.721212-55.854546-58.957576V310.30303l-99.29697 114.812122c-12.412121 15.515152-24.824242 18.618182-40.339394 18.618181-31.030303 0-58.957576-27.927273-58.957575-58.957575 0-15.515152 3.10303-31.030303 15.515151-43.442425l189.284849-232.727272c18.618182-9.309091 31.030303-15.515152 46.545454-15.515152s31.030303 6.206061 43.442424 18.618182l192.387879 232.727273c9.309091 12.412121 12.412121 27.927273 12.412121 43.442424 0 31.030303-24.824242 58.957576-55.854545 58.957576-15.515152 0-31.030303-6.206061-43.442424-18.618182L812.993939 310.30303v595.781818c6.206061 34.133333-12.412121 55.854545-49.648484 55.854546zM15.515152 217.212121c0 34.133333 27.927273 62.060606 58.957575 62.060606h316.509091c31.030303 0 58.957576-27.927273 58.957576-62.060606s-27.927273-62.060606-58.957576-62.060606H74.472727C40.339394 155.151515 15.515152 183.078788 15.515152 217.212121z m58.957575 372.363637h378.569697c31.030303 0 58.957576-27.927273 58.957576-62.060606s-27.927273-62.060606-58.957576-62.060607H74.472727c-31.030303 0-58.957576 27.927273-58.957575 62.060607 3.10303 34.133333 27.927273 62.060606 58.957575 62.060606z m-3.10303 310.30303h446.836364c31.030303 0 55.854545-27.927273 55.854545-62.060606s-24.824242-62.060606-55.854545-62.060606H71.369697c-31.030303 0-55.854545 27.927273-55.854545 62.060606 3.10303 34.133333 27.927273 62.060606 55.854545 62.060606z" fill="#969696" ></path></symbol><symbol id="sf3-font-cancel-invitation" viewBox="0 0 1024 1024"><path d="M457.6 32c-131.2 0-236.8 105.6-236.8 236.8s105.6 236.8 236.8 236.8 236.8-105.6 236.8-236.8S588.8 32 457.6 32z m64 614.4l32-44.8c0-12.8-9.6-25.6-25.6-25.6h-192c-156.8 0-284.8 128-284.8 284.8v86.4c0 25.6 22.4 44.8 44.8 44.8h425.6c12.8 0 25.6-9.6 25.6-25.6l-32-44.8c-3.2-6.4-25.6-64-25.6-124.8 6.4-67.2 19.2-124.8 32-150.4z m256 339.2c-112 0-201.6-92.8-201.6-201.6s92.8-201.6 201.6-201.6 201.6 92.8 201.6 201.6-89.6 201.6-201.6 201.6z m112-272c9.6-9.6 9.6-22.4 0-28.8-9.6-9.6-19.2-9.6-28.8 0l-73.6 76.8-80-76.8c-9.6-9.6-19.2-9.6-28.8 0-9.6 9.6-9.6 22.4 0 28.8l73.6 76.8-73.6 73.6c-9.6 9.6-9.6 22.4 0 28.8 9.6 9.6 19.2 9.6 28.8 0l73.6-76.8 73.6 76.8c9.6 9.6 19.2 9.6 28.8 0 9.6-9.6 9.6-22.4 0-28.8l-73.6-76.8c6.4 6.4 80-73.6 80-73.6z" fill="#949494" ></path></symbol></svg>',t=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss");if(t&&!h.__iconfont__svg__cssinject__){h.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}!function(c){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(c,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),c()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(n=c,o=h.document,l=!1,(i=function(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(i,50)}e()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,e())});function e(){l||(l=!0,n())}var n,o,l,i}(function(){var c,t;(c=document.createElement("div")).innerHTML=e,e=null,(t=c.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",function(c,t){t.firstChild?function(c,t){t.parentNode.insertBefore(c,t)}(c,t.firstChild):t.appendChild(c)}(t,document.body))})}(window);
\ No newline at end of file
diff --git a/media/css/sf_font3/iconfont.svg b/media/css/sf_font3/iconfont.svg
index 05920c8701..112d096f78 100644
--- a/media/css/sf_font3/iconfont.svg
+++ b/media/css/sf_font3/iconfont.svg
@@ -35,6 +35,9 @@ Created by iconfont
     <glyph glyph-name="sort" unicode="&#58967;" d="M763.345455-65.939394c-31.030303 0-55.854545 21.721212-55.854546 58.957576V585.69697l-99.29697-114.812122c-12.412121-15.515152-24.824242-18.618182-40.339394-18.618181-31.030303 0-58.957576 27.927273-58.957575 58.957575 0 15.515152 3.10303 31.030303 15.515151 43.442425l189.284849 232.727272c18.618182 9.309091 31.030303 15.515152 46.545454 15.515152s31.030303-6.206061 43.442424-18.618182l192.387879-232.727273c9.309091-12.412121 12.412121-27.927273 12.412121-43.442424 0-31.030303-24.824242-58.957576-55.854545-58.957576-15.515152 0-31.030303 6.206061-43.442424 18.618182L812.993939 585.69697v-595.781818c6.206061-34.133333-12.412121-55.854545-49.648484-55.854546zM15.515152 678.787879c0-34.133333 27.927273-62.060606 58.957575-62.060606h316.509091c31.030303 0 58.957576 27.927273 58.957576 62.060606s-27.927273 62.060606-58.957576 62.060606H74.472727C40.339394 740.848485 15.515152 712.921212 15.515152 678.787879z m58.957575-372.363637h378.569697c31.030303 0 58.957576 27.927273 58.957576 62.060606s-27.927273 62.060606-58.957576 62.060607H74.472727c-31.030303 0-58.957576-27.927273-58.957575-62.060607 3.10303-34.133333 27.927273-62.060606 58.957575-62.060606z m-3.10303-310.30303h446.836364c31.030303 0 55.854545 27.927273 55.854545 62.060606s-24.824242 62.060606-55.854545 62.060606H71.369697c-31.030303 0-55.854545-27.927273-55.854545-62.060606 3.10303-34.133333 27.927273-62.060606 55.854545-62.060606z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="cancel-invitation" unicode="&#58977;" d="M457.6 864c-131.2 0-236.8-105.6-236.8-236.8s105.6-236.8 236.8-236.8 236.8 105.6 236.8 236.8S588.8 864 457.6 864z m64-614.4l32 44.8c0 12.8-9.6 25.6-25.6 25.6h-192c-156.8 0-284.8-128-284.8-284.8v-86.4c0-25.6 22.4-44.8 44.8-44.8h425.6c12.8 0 25.6 9.6 25.6 25.6l-32 44.8c-3.2 6.4-25.6 64-25.6 124.8 6.4 67.2 19.2 124.8 32 150.4z m256-339.2c-112 0-201.6 92.8-201.6 201.6s92.8 201.6 201.6 201.6 201.6-92.8 201.6-201.6-89.6-201.6-201.6-201.6z m112 272c9.6 9.6 9.6 22.4 0 28.8-9.6 9.6-19.2 9.6-28.8 0l-73.6-76.8-80 76.8c-9.6 9.6-19.2 9.6-28.8 0-9.6-9.6-9.6-22.4 0-28.8l73.6-76.8-73.6-73.6c-9.6-9.6-9.6-22.4 0-28.8 9.6-9.6 19.2-9.6 28.8 0l73.6 76.8 73.6-76.8c9.6-9.6 19.2-9.6 28.8 0 9.6 9.6 9.6 22.4 0 28.8l-73.6 76.8c6.4-6.4 80 73.6 80 73.6z"  horiz-adv-x="1024" />
+
+    
 
 
   </font>
diff --git a/media/css/sf_font3/iconfont.ttf b/media/css/sf_font3/iconfont.ttf
index 05c8fb3953..916f7ac43d 100644
Binary files a/media/css/sf_font3/iconfont.ttf and b/media/css/sf_font3/iconfont.ttf differ
diff --git a/media/css/sf_font3/iconfont.woff b/media/css/sf_font3/iconfont.woff
index e8aa715e1d..14c28f5dd2 100644
Binary files a/media/css/sf_font3/iconfont.woff and b/media/css/sf_font3/iconfont.woff differ
diff --git a/media/css/sf_font3/iconfont.woff2 b/media/css/sf_font3/iconfont.woff2
index f15e9bf543..a563978679 100644
Binary files a/media/css/sf_font3/iconfont.woff2 and b/media/css/sf_font3/iconfont.woff2 differ
diff --git a/seahub/api2/endpoints/invitation.py b/seahub/api2/endpoints/invitation.py
index 21b945294a..676cc28d93 100644
--- a/seahub/api2/endpoints/invitation.py
+++ b/seahub/api2/endpoints/invitation.py
@@ -1,17 +1,25 @@
 # Copyright (c) 2012-2016 Seafile Ltd.
+import logging
+
 from django.shortcuts import get_object_or_404
 from rest_framework import status
 from rest_framework.authentication import SessionAuthentication
 from rest_framework.permissions import IsAuthenticated
 from rest_framework.response import Response
 from rest_framework.views import APIView
+from django.utils.translation import ugettext as _
 
 from seahub.api2.authentication import TokenAuthentication
 from seahub.api2.permissions import CanInviteGuest
 from seahub.api2.throttling import UserRateThrottle
 from seahub.api2.utils import api_error
 from seahub.invitations.models import Invitation
+from seahub.base.accounts import User
+from post_office.models import STATUS
+from seahub.utils.mail import send_html_email_with_dj_template, MAIL_PRIORITY
+from seahub.utils import get_site_name
 
+logger = logging.getLogger(__name__)
 json_content_type = 'application/json; charset=utf-8'
 
 def invitation_owner_check(func):
@@ -50,3 +58,63 @@ class InvitationView(APIView):
 
         return Response({
         }, status=204)
+
+
+class InvitationRevokeView(APIView):
+    authentication_classes = (TokenAuthentication, SessionAuthentication)
+    permission_classes = (IsAuthenticated, CanInviteGuest)
+    throttle_classes = (UserRateThrottle, )
+
+    def post(self, request, token, format=None):
+        """Revoke invitation when the accepter successfully creates an account.
+        And set the account to inactive.
+        """
+        # recourse check
+        invitation = Invitation.objects.get_by_token(token)
+        if not invitation:
+            error_msg = "Invitation not found."
+            return api_error(status.HTTP_404_NOT_FOUND, error_msg)
+
+        # permission check
+        if request.user.username != invitation.inviter:
+            error_msg = "Permission denied."
+            return api_error(status.HTTP_403_FORBIDDEN, error_msg)
+
+        if invitation.accept_time is None:
+            error_msg = "The email address didn't accept the invitation."
+            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+
+        email = invitation.accepter
+        inviter = invitation.inviter
+
+        try:
+            user = User.objects.get(email)
+        except User.DoesNotExist:
+            error_msg = 'User %s not found.' % email
+            return api_error(status.HTTP_404_NOT_FOUND, error_msg)
+
+        # set the account to inactive.
+        user.freeze_user()
+
+        # delete the invitation.
+        invitation.delete()
+
+        # send email
+        site_name = get_site_name()
+        subject = _('%(user)s revoke your access to %(site_name)s.') % {
+            'user': inviter, 'site_name': site_name}
+        context = {
+            'inviter': inviter,
+            'site_name': site_name,
+        }
+
+        m = send_html_email_with_dj_template(
+            email, dj_template='invitations/invitation_revoke_email.html',
+            subject=subject,
+            context=context,
+            priority=MAIL_PRIORITY.now
+        )
+        if m.status != STATUS.sent:
+            logger.warning('send revoke access email to %s failed')
+
+        return Response({'success': True})
diff --git a/seahub/api2/endpoints/invitations.py b/seahub/api2/endpoints/invitations.py
index cc885907ca..a3422bd62b 100644
--- a/seahub/api2/endpoints/invitations.py
+++ b/seahub/api2/endpoints/invitations.py
@@ -59,14 +59,13 @@ class InvitationsView(APIView):
                              _('%s is already invited.') % accepter)
 
         try:
-            User.objects.get(accepter)
-            user_exists = True
+            user = User.objects.get(accepter)
+            # user is active return exist
+            if user.is_active is True:
+                return api_error(status.HTTP_400_BAD_REQUEST,
+                                 _('User %s already exists.') % accepter)
         except User.DoesNotExist:
-            user_exists = False
-
-        if user_exists:
-            return api_error(status.HTTP_400_BAD_REQUEST,
-                             _('User %s already exists.') % accepter)
+            pass
 
         i = Invitation.objects.add(inviter=request.user.username,
                                    accepter=accepter)
@@ -127,22 +126,26 @@ class InvitationsBatchView(APIView):
                 continue
 
             try:
-                User.objects.get(accepter)
-                result['failed'].append({
-                    'email': accepter,
-                    'error_msg': _('User %s already exists.') % accepter
-                    })
-                continue
-            except User.DoesNotExist:
-                i = Invitation.objects.add(inviter=request.user.username,
-                        accepter=accepter)
-                m = i.send_to(email=accepter)
-                if m.status == STATUS.sent:
-                    result['success'].append(i.to_dict())
-                else:
+                user = User.objects.get(accepter)
+                # user is active return exist
+                if user.is_active is True:
                     result['failed'].append({
                         'email': accepter,
-                        'error_msg': _('Internal Server Error'),
-                    })
+                        'error_msg': _('User %s already exists.') % accepter
+                        })
+                    continue
+            except User.DoesNotExist:
+                pass
+
+            i = Invitation.objects.add(inviter=request.user.username,
+                    accepter=accepter)
+            m = i.send_to(email=accepter)
+            if m.status == STATUS.sent:
+                result['success'].append(i.to_dict())
+            else:
+                result['failed'].append({
+                    'email': accepter,
+                    'error_msg': _('Internal Server Error'),
+                })
 
         return Response(result)
diff --git a/seahub/api2/views.py b/seahub/api2/views.py
index e136bc3da5..7d5ab86e79 100644
--- a/seahub/api2/views.py
+++ b/seahub/api2/views.py
@@ -999,7 +999,7 @@ class Repos(APIView):
                     storage_id = request.data.get("storage_id", None)
                     if storage_id and storage_id not in [s['storage_id'] for s in storages]:
                         error_msg = 'storage_id invalid.'
-                        return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+                        return None, api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
                     repo_id = seafile_api.create_repo(repo_name,
                             repo_desc, username, passwd,
@@ -1043,7 +1043,7 @@ class Repos(APIView):
             salt = request.data.get('salt', '')
             if not salt:
                 error_msg = 'salt invalid.'
-                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+                return None, api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         if len(magic) != 64 or len(random_key) != 96 or enc_version < 0:
             return None, api_error(status.HTTP_400_BAD_REQUEST,
diff --git a/seahub/invitations/models.py b/seahub/invitations/models.py
index 8bb34d94ba..6e6d0b364d 100644
--- a/seahub/invitations/models.py
+++ b/seahub/invitations/models.py
@@ -31,6 +31,13 @@ class InvitationManager(models.Manager):
     def delete_all_expire_invitation(self):
         super(InvitationManager, self).filter(expire_time__lte=timezone.now()).delete()
 
+    def get_by_token(self, token):
+        qs = self.filter(token=token)
+        if qs.count() > 0:
+            return qs[0]
+        return None
+
+
 class Invitation(models.Model):
     INVITE_TYPE_CHOICES = (
         (GUEST, _('Guest')),
diff --git a/seahub/invitations/templates/invitations/invitation_revoke_email.html b/seahub/invitations/templates/invitations/invitation_revoke_email.html
new file mode 100644
index 0000000000..6a9c2fb04e
--- /dev/null
+++ b/seahub/invitations/templates/invitations/invitation_revoke_email.html
@@ -0,0 +1,18 @@
+{% extends 'email_base.html' %}
+
+{% load i18n %}
+
+{% block email_con %}
+
+{% autoescape off %}
+
+<p style="color:#121214;font-size:14px;">{% trans "Hi," %}</p>
+
+<p style="font-size:14px;color:#434144;">
+{% blocktrans %}{{ inviter }} revoke your access to {{ site_name }}.{% endblocktrans %}
+</p>
+
+
+{% endautoescape %}
+
+{% endblock %}
\ No newline at end of file
diff --git a/seahub/invitations/views.py b/seahub/invitations/views.py
index 273d13e941..8283ed526b 100644
--- a/seahub/invitations/views.py
+++ b/seahub/invitations/views.py
@@ -5,7 +5,7 @@ from django.shortcuts import get_object_or_404, render
 
 from django.utils.translation import ugettext as _
 
-from seahub.auth import login as auth_login
+from seahub.auth import login as auth_login, authenticate
 from seahub.auth import get_backends
 from seahub.base.accounts import User
 from seahub.constants import GUEST_USER
@@ -21,36 +21,55 @@ def token_view(request, token):
     if i.is_expired():
         raise Http404
 
+    if request.method == 'GET':
+        try:
+            user = User.objects.get(email=i.accepter)
+            if user.is_active is True:
+                # user is active return exist
+                messages.error(request, _('A user with this email already exists.'))
+        except User.DoesNotExist:
+            pass
+
+        return render(request, 'invitations/token_view.html', {'iv': i, })
+
     if request.method == 'POST':
         passwd = request.POST.get('password', '')
         if not passwd:
             return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
 
         try:
-            User.objects.get(email=i.accepter)
-            messages.error(request, _('A user with this email already exists.'))
+            user = User.objects.get(email=i.accepter)
+            if user.is_active is True:
+                # user is active return exist
+                messages.error(request, _('A user with this email already exists.'))
+                return render(request, 'invitations/token_view.html', {'iv': i, })
+            else:
+                # user is inactive then set active and new password
+                user.set_password(passwd)
+                user.is_active = True
+                user.save()
+                user = authenticate(username=user.username, password=passwd)
+
         except User.DoesNotExist:
-            # Create user, set that user as guest, and log user in.
-            u = User.objects.create_user(email=i.accepter, password=passwd,
-                                         is_active=True)
-            User.objects.update_role(u.username, GUEST_USER)
-
-            i.accept()          # Update invitaion accept time.
-
+            # Create user, set that user as guest.
+            user = User.objects.create_user(
+                email=i.accepter, password=passwd, is_active=True)
+            User.objects.update_role(user.username, GUEST_USER)
             for backend in get_backends():
-                u.backend = "%s.%s" % (backend.__module__, backend.__class__.__name__)
-            auth_login(request, u)
+                user.backend = "%s.%s" % (backend.__module__, backend.__class__.__name__)
 
-            # send signal to notify inviter
-            accept_guest_invitation_successful.send(
-                sender=None, invitation_obj=i)
+        # Update invitation accept time.
+        i.accept()
 
-            # send email to notify admin
-            if NOTIFY_ADMIN_AFTER_REGISTRATION:
-                notify_admins_on_register_complete(u.email)
+        # login
+        auth_login(request, user)
 
-            return HttpResponseRedirect(SITE_ROOT)
+        # send signal to notify inviter
+        accept_guest_invitation_successful.send(
+            sender=None, invitation_obj=i)
 
-    return render(request, 'invitations/token_view.html', {
-        'iv': i,
-    })
+        # send email to notify admin
+        if NOTIFY_ADMIN_AFTER_REGISTRATION:
+            notify_admins_on_register_complete(user.email)
+
+        return HttpResponseRedirect(SITE_ROOT)
diff --git a/seahub/share/utils.py b/seahub/share/utils.py
index 68ad86f110..a88eecbafd 100644
--- a/seahub/share/utils.py
+++ b/seahub/share/utils.py
@@ -12,30 +12,40 @@ logger = logging.getLogger(__name__)
 
 def is_repo_admin(username, repo_id):
 
-    repo_owner = seafile_api.get_repo_owner(repo_id)
-
+    # repo is shared to user with admin permission
     try:
-        if '@seafile_group' in repo_owner:
-            # is group owned repo
-            group_id = int(repo_owner.split('@')[0])
+        user_share_permission = ExtraSharePermission.objects. \
+            get_user_permission(repo_id, username)
+        if user_share_permission == PERMISSION_ADMIN:
+            return True
+
+        # get all groups that repo is shared to with admin permission
+        group_ids = ExtraGroupsSharePermission.objects.get_admin_groups_by_repo(repo_id)
+        for group_id in group_ids:
             if is_group_admin(group_id, username):
                 return True
-        else:
-            user_share_permission = ExtraSharePermission.objects.\
-                    get_user_permission(repo_id, username)
-            if user_share_permission == PERMISSION_ADMIN:
-                return True
-
-            # get all groups that repo is shared to with admin permission
-            group_ids = ExtraGroupsSharePermission.objects.get_admin_groups_by_repo(repo_id)
-            for group_id in group_ids:
-                if is_group_admin(group_id, username):
-                    return True
-        return False
     except Exception as e:
         logger.error(e)
         return False
 
+    repo_owner = seafile_api.get_repo_owner(repo_id) or seafile_api.get_org_repo_owner(repo_id)
+    if not repo_owner:
+        logger.error('repo %s owner is None' % repo_id)
+        return False
+
+    # repo owner
+    if username == repo_owner:
+        return True
+
+    # user is department admin
+    if '@seafile_group' in repo_owner:
+        # is group owned repo
+        group_id = int(repo_owner.split('@')[0])
+        if is_group_admin(group_id, username):
+            return True
+
+    return False
+
 def share_dir_to_user(repo, path, owner, share_from, share_to, permission, org_id=None):
     # Share  repo or subdir to user with permission(r, rw, admin).
     extra_share_permission = ''
diff --git a/seahub/urls.py b/seahub/urls.py
index 7cc7a9f8f0..311d52c9cb 100644
--- a/seahub/urls.py
+++ b/seahub/urls.py
@@ -69,7 +69,7 @@ from seahub.api2.endpoints.copy_move_task import CopyMoveTaskView
 from seahub.api2.endpoints.query_copy_move_progress import QueryCopyMoveProgressView
 from seahub.api2.endpoints.move_folder_merge import MoveFolderMergeView
 from seahub.api2.endpoints.invitations import InvitationsView, InvitationsBatchView
-from seahub.api2.endpoints.invitation import InvitationView
+from seahub.api2.endpoints.invitation import InvitationView, InvitationRevokeView
 from seahub.api2.endpoints.notifications import NotificationsView, NotificationView
 from seahub.api2.endpoints.user_enabled_modules import UserEnabledModulesView
 from seahub.api2.endpoints.repo_file_uploaded_bytes import RepoFileUploadedBytesView
@@ -407,6 +407,7 @@ urlpatterns = [
     url(r'^api/v2.1/invitations/$', InvitationsView.as_view()),
     url(r'^api/v2.1/invitations/batch/$', InvitationsBatchView.as_view()),
     url(r'^api/v2.1/invitations/(?P<token>[a-f0-9]{32})/$', InvitationView.as_view()),
+    url(r'^api/v2.1/invitations/(?P<token>[a-f0-9]{32})/revoke/$', InvitationRevokeView.as_view()),
 
     ## user::avatar
     url(r'^api/v2.1/user-avatar/$', UserAvatarView.as_view(), name='api-v2.1-user-avatar'),
diff --git a/tests/api/endpoints/test_invitation.py b/tests/api/endpoints/test_invitation.py
index f748e3f6be..a448c63b97 100644
--- a/tests/api/endpoints/test_invitation.py
+++ b/tests/api/endpoints/test_invitation.py
@@ -5,6 +5,9 @@ from seahub.base.accounts import UserPermissions
 from seahub.invitations.models import Invitation
 from seahub.test_utils import BaseTestCase
 from seahub.api2.permissions import CanInviteGuest
+from tests.common.utils import randstring
+from seahub.base.accounts import User
+from django.core.urlresolvers import reverse
 
 
 class InvitationsTest(BaseTestCase):
@@ -69,3 +72,98 @@ class InvitationsTest(BaseTestCase):
         self.assertEqual(204, resp.status_code)
 
         assert len(Invitation.objects.all()) == 0
+
+
+class InvitationRevokeTest(BaseTestCase):
+    def setUp(self):
+        self.login_as(self.user)
+        self.username = self.user.username
+        self.tmp_username = 'user_%s@test.com' % randstring(4)
+
+        # add invitation
+        self.i = Invitation.objects.add(inviter=self.username, accepter=self.tmp_username)
+        self.endpoint = '/api/v2.1/invitations/' + self.i.token + '/revoke/'
+        assert len(Invitation.objects.all()) == 1
+
+        # accept invitation
+        self.i.accept()
+        self.tmp_user = self.create_user(self.tmp_username, is_staff=False)
+        assert self.tmp_user.is_active is True
+
+    def tearDown(self):
+        self.remove_user(self.tmp_username)
+
+    @patch.object(CanInviteGuest, 'has_permission')
+    @patch.object(UserPermissions, 'can_invite_guest')
+    def test_can_post(self, mock_can_invite_guest, mock_has_permission):
+
+        mock_can_invite_guest.return_val = True
+        mock_has_permission.return_val = True
+
+        resp = self.client.post(self.endpoint)
+        self.assertEqual(200, resp.status_code)
+        tmp_user = User.objects.get(self.tmp_username)
+
+        assert len(Invitation.objects.all()) == 0
+        assert tmp_user.is_active is False
+
+    @patch.object(CanInviteGuest, 'has_permission')
+    @patch.object(UserPermissions, 'can_invite_guest')
+    def test_can_invite_again_after_revoke(self, mock_can_invite_guest, mock_has_permission):
+        mock_can_invite_guest.return_val = True
+        mock_has_permission.return_val = True
+
+        # revoke
+        resp = self.client.post(self.endpoint)
+        self.assertEqual(200, resp.status_code)
+        tmp_user = User.objects.get(self.tmp_username)
+
+        assert len(Invitation.objects.all()) == 0
+        assert tmp_user.is_active is False
+
+        # invite again
+        invite_endpoint = '/api/v2.1/invitations/'
+        resp = self.client.post(invite_endpoint, {
+            'type': 'guest',
+            'accepter': self.tmp_username,
+        })
+        self.assertEqual(201, resp.status_code)
+        assert len(Invitation.objects.all()) == 1
+
+    @patch.object(CanInviteGuest, 'has_permission')
+    @patch.object(UserPermissions, 'can_invite_guest')
+    def test_can_invite_batch_again_and_accept_again_after_revoke(self, mock_can_invite_guest, mock_has_permission):
+
+        mock_can_invite_guest.return_val = True
+        mock_has_permission.return_val = True
+
+        # revoke
+        resp = self.client.post(self.endpoint)
+        self.assertEqual(200, resp.status_code)
+        tmp_user = User.objects.get(self.tmp_username)
+
+        assert len(Invitation.objects.all()) == 0
+        assert tmp_user.is_active is False
+
+        # invite again
+        invite_batch_endpoint = '/api/v2.1/invitations/batch/'
+        resp = self.client.post(invite_batch_endpoint, {
+            'type': 'guest',
+            'accepter': [self.tmp_username, ],
+        })
+        self.assertEqual(200, resp.status_code)
+        assert len(Invitation.objects.all()) == 1
+
+        # accept again
+        self.logout()
+
+        iv = Invitation.objects.all()[0]
+        token_endpoint = reverse('invitations:token_view', args=[iv.token])
+        assert iv.accept_time is None
+        resp = self.client.post(token_endpoint, {
+            'password': 'passwd'
+        })
+        self.assertEqual(302, resp.status_code)
+        assert Invitation.objects.get(pk=iv.pk).accept_time is not None
+        tmp_user_accept = User.objects.get(self.tmp_username)
+        assert tmp_user_accept.is_active is True