Merge branch '7.0'

2025-09-18 08:16:07 +00:00 · 2019-08-07 21:07:49 +08:00
parent 24316e1255 6f1ac70b82
commit 28d5c266b3
50 changed files with 1990 additions and 309 deletions
--- 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",
--- 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",
--- 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>
        )}
--- 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
      });
--- a/frontend/src/components/dialog/invitation-revoke-dialog.js
+++ 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;
--- 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;
+export default InvitePeopleDialog;
--- 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);
--- 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 });
--- 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 => {
--- 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();
--- 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();
--- a/frontend/src/components/dialog/set-org-user-contact-email.js
+++ 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;
--- a/frontend/src/components/dialog/set-org-user-name.js
+++ 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;
--- a/frontend/src/components/dialog/set-org-user-quota.js
+++ 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;
--- 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">
--- 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(
--- 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 = () => {
--- 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;
    }
--- 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>
--- a/frontend/src/components/org-admin-group-nav.js
+++ 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;
--- a/frontend/src/components/org-admin-user-nav.js
+++ 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;
--- 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;
+}
--- a/frontend/src/css/org-admin-user.css
+++ b/frontend/src/css/org-admin-user.css
@@ -0,0 +1,3 @@
+.cur-view-path.org-admin-user-nav {
+  padding: 0 16px 1px;
+}
--- 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>
--- 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>
--- 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);
--- a/frontend/src/pages/org-admin/org-group-info.js
+++ 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;
--- a/frontend/src/pages/org-admin/org-group-members.js
+++ 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;
--- a/frontend/src/pages/org-admin/org-group-repos.js
+++ 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;
--- 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);
--- a/frontend/src/pages/org-admin/org-user-profile.js
+++ 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;
--- a/frontend/src/pages/org-admin/org-user-repos.js
+++ 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;
--- a/frontend/src/pages/org-admin/org-user-shared-repos.js
+++ 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;
--- 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;
  }

 };