Merge branch '8.0'

Conflicts:
	frontend/package.json
	frontend/src/components/dialog/manage-members-dialog.js
	frontend/src/css/manage-members-dialog.css
	frontend/src/utils/utils.js

frontend/package.json

@@ -8,7 +8,6 @@
     "@seafile/resumablejs": "1.1.16",
     "@seafile/seafile-calendar": "0.0.12",
     "@seafile/seafile-editor": "^0.3.74",
-    "MD5": "^1.3.0",
     "chart.js": "2.9.4",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.0.8",
@@ -16,11 +15,13 @@
     "i18next": "^17.0.13",
     "i18next-browser-languagedetector": "^3.0.3",
     "i18next-xhr-backend": "^3.1.2",
+    "MD5": "^1.3.0",
     "merge": "^1.2.1",
     "moment": "^2.22.2",
     "object-assign": "4.1.1",
     "prismjs": "1.23.0",
     "prop-types": "^15.6.2",
+    "qrcode.react": "^1.0.1",
     "raf": "3.4.0",
     "react": "^16.8.6",
     "react-app-polyfill": "^2.0.0",
@@ -35,7 +36,7 @@
     "react-responsive": "^6.1.2",
     "react-select": "^2.4.1",
     "reactstrap": "^6.4.0",
-    "seafile-js": "0.2.177",
+    "seafile-js": "0.2.178",
     "socket.io-client": "^2.2.0",
     "unified": "^7.0.0",
     "url-parse": "^1.4.3",

frontend/src/components/btn-qr-code.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import QRCode from 'react-qr-code';
+import QRCode from 'qrcode.react';
 import { Button, Popover, PopoverBody } from 'reactstrap';
 import { gettext } from '../utils/constants';
 

frontend/src/components/dialog/manage-members-dialog.js

@@ -1,22 +1,21 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from 'reactstrap';
-import { Utils } from '../../utils/utils';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
-import RoleEditor from '../select-editor/role-editor';
-import UserSelect from '../user-select';
-import toaster from '../toast';
-import Loading from '../loading';
-import OpIcon from '../op-icon';
+import ListAndAddGroupMembers from '../list-and-add-group-members';
+import SearchGroupMembers from '../search-group-members';
 
 import '../../css/manage-members-dialog.css';
 
 const propTypes = {
   groupID: PropTypes.string.isRequired,
-  toggleManageMembersDialog: PropTypes.func.isRequired,
-  onGroupChanged: PropTypes.func.isRequired,
   isOwner: PropTypes.bool.isRequired,
+  toggleManageMembersDialog: PropTypes.func.isRequired
+};
+
+const MANAGEMENT_MODE= {
+  LIST_AND_ADD: 'list_and_add',
+  SEARCH: 'search'
 };
 
 class ManageMembersDialog extends React.Component {
@@ -24,187 +23,44 @@ class ManageMembersDialog extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isLoading: true, // first loading
-      isLoadingMore: false,
-      groupMembers: [],
-      page: 1,
-      perPage: 100,
-      hasNextPage: false,
-      selectedOption: null,
-      errMessage: [],
-      isItemFreezed: false
+      currentMode: MANAGEMENT_MODE.LIST_AND_ADD
     };
   }
 
-  componentDidMount() {
-    this.listGroupMembers(this.state.page);
-  }
-
-  listGroupMembers = (page) => {
-    const { groupID } = this.props;
-    const { perPage, groupMembers } = this.state;
-    seafileAPI.listGroupMembers(groupID, page, perPage).then((res) => {
-      const members = res.data;
+  changeMode = () => {
     this.setState({
-        isLoading: false,
-        isLoadingMore: false,
-        page: page,
-        hasNextPage: members.length < perPage ? false : true,
-        groupMembers: groupMembers.concat(members)
-      });
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-      this.setState({
-        isLoading: false,
-        isLoadingMore: false,
-        hasNextPage: false
-      });
-    });
-  }
-
-  onSelectChange = (option) => {
-    this.setState({
-      selectedOption: option,
-      errMessage: [],
-    });
-  }
-
-  addGroupMember = () => {
-    let emails = [];
-    for (let i = 0; i < this.state.selectedOption.length; i++) {
-      emails.push(this.state.selectedOption[i].email);
-    }
-    seafileAPI.addGroupMembers(this.props.groupID, emails).then((res) => {
-      const newMembers = res.data.success;
-      this.setState({
-        groupMembers: [].concat(newMembers, this.state.groupMembers),
-        selectedOption: null,
-      });
-      this.refs.userSelect.clearSelect();
-      if (res.data.failed.length > 0) {
-        this.setState({
-          errMessage: res.data.failed
-        });
-      }
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  }
-
-  toggleItemFreezed = (isFreezed) => {
-    this.setState({
-      isItemFreezed: isFreezed
-    });
-  }
-
-  toggle = () => {
-    this.props.toggleManageMembersDialog();
-  }
-
-  handleScroll = (event) => {
-    // isLoadingMore: to avoid repeated request
-    const { page, hasNextPage, isLoadingMore } = this.state;
-    if (hasNextPage && !isLoadingMore) {
-      const clientHeight = event.target.clientHeight;
-      const scrollHeight = event.target.scrollHeight;
-      const scrollTop    = event.target.scrollTop;
-      const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
-      if (isBottom) { // scroll to the bottom
-        this.setState({isLoadingMore: true}, () => {
-          this.listGroupMembers(page + 1);
-        });
-      }
-    }
-  }
-
-  changeMember = (targetMember) => {
-    this.setState({
-      groupMembers: this.state.groupMembers.map((item) => {
-        if (item.email == targetMember.email) {
-          item = targetMember;
-        }
-        return item;
-      })
-    });
-  }
-
-  deleteMember = (targetMember) => {
-    const groupMembers = this.state.groupMembers;
-    groupMembers.splice(groupMembers.indexOf(targetMember), 1);
-    this.setState({
-      groupMembers: groupMembers
+      currentMode: this.state.currentMode == MANAGEMENT_MODE.LIST_AND_ADD ?
+        MANAGEMENT_MODE.SEARCH : MANAGEMENT_MODE.LIST_AND_ADD
     });
   }
 
   render() {
-    const { isLoading, hasNextPage } = this.state;
+    const { currentMode } = this.state;
+    const { groupID, isOwner, toggleManageMembersDialog: toggle } = this.props;
     return (
-      <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Manage group members')}</ModalHeader>
-        <ModalBody>
-          <p>{gettext('Add group member')}</p>
-          <div className='add-members'>
-            <UserSelect
-              placeholder={gettext('Search users...')}
-              onSelectChange={this.onSelectChange}
-              ref="userSelect"
-              isMulti={true}
-              className="add-members-select"
-            />
-            {this.state.selectedOption ?
-              <Button color="secondary" onClick={this.addGroupMember}>{gettext('Submit')}</Button> :
-              <Button color="secondary" disabled>{gettext('Submit')}</Button>
-            }
-          </div>
-          {
-            this.state.errMessage.length > 0 &&
-            this.state.errMessage.map((item, index = 0) => {
-              return (
-                <div className="group-error error" key={index}>{item.error_msg}</div>
-              );
-            })
-          }
-          <div className="manage-members" onScroll={this.handleScroll}>
-            {isLoading ? <Loading /> : (
+      <Modal isOpen={true} toggle={toggle} className="group-manage-members-dialog">
+        <ModalHeader toggle={toggle}>
+          {currentMode == MANAGEMENT_MODE.LIST_AND_ADD ?
+            gettext('Manage group members') : (
               <Fragment>
-                <Table size="sm" className="manage-members-table">
-                  <thead>
-                    <tr>
-                      <th width="15%"></th>
-                      <th width="45%">{gettext('Name')}</th>
-                      <th width="30%">{gettext('Role')}</th>
-                      <th width="10%"></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {
-                      this.state.groupMembers.length > 0 &&
-                  this.state.groupMembers.map((item, index) => {
-                    return (
-                      <Member
-                        key={index}
-                        item={item}
-                        changeMember={this.changeMember}
-                        deleteMember={this.deleteMember}
-                        groupID={this.props.groupID}
-                        isOwner={this.props.isOwner}
-                        isItemFreezed={this.state.isItemFreezed}
-                        toggleItemFreezed={this.toggleItemFreezed}
-                      />
-                    );
-                  })
-                    }
-                  </tbody>
-                </Table>
-                {hasNextPage && <Loading />}
+                <button className="fa fa-arrow-left back-icon border-0 bg-transparent mr-2 p-0" onClick={this.changeMode} title={gettext('Back')} aria-label={gettext('Back')}></button>
+                <span>{gettext('Search group members')}</span>
               </Fragment>
-            )}
-          </div>
+            )
+          }
+        </ModalHeader>
+        <ModalBody>
+          {currentMode == MANAGEMENT_MODE.LIST_AND_ADD ?
+            <ListAndAddGroupMembers
+              groupID={groupID}
+              isOwner={isOwner}
+              changeMode={this.changeMode}
+            /> :
+            <SearchGroupMembers groupID={groupID} isOwner={isOwner} />
+          }
         </ModalBody>
         <ModalFooter>
-          <Button color="secondary" onClick={this.toggle}>{gettext('Close')}</Button>
+          <Button color="secondary" onClick={toggle}>{gettext('Close')}</Button>
         </ModalFooter>
       </Modal>
     );
@@ -213,108 +69,4 @@ class ManageMembersDialog extends React.Component {
 
 ManageMembersDialog.propTypes = propTypes;
 
-const MemberPropTypes = {
-  item: PropTypes.object.isRequired,
-  changeMember: PropTypes.func.isRequired,
-  deleteMember: PropTypes.func.isRequired,
-  groupID: PropTypes.string.isRequired,
-  isOwner: PropTypes.bool.isRequired,
-};
-
-class Member extends React.PureComponent {
-
-  constructor(props) {
-    super(props);
-    this.roles = ['Admin', 'Member'];
-    this.state = ({
-      highlight: false,
-    });
-  }
-
-  onChangeUserRole = (role) => {
-    let isAdmin = role === 'Admin' ? 'True' : 'False';
-    seafileAPI.setGroupAdmin(this.props.groupID, this.props.item.email, isAdmin).then((res) => {
-      this.props.changeMember(res.data);
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  }
-
-  deleteMember = () => {
-    const { item } = this.props;
-    seafileAPI.deleteGroupMember(this.props.groupID, item.email).then((res) => {
-      this.props.deleteMember(item);
-      toaster.success(gettext('Successfully deleted {name}.').replace('{name}', item.name));
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  }
-
-  handleMouseOver = () => {
-    if (this.props.isItemFreezed) return;
-    this.setState({
-      highlight: true,
-    });
-  }
-
-  handleMouseLeave = () => {
-    if (this.props.isItemFreezed) return;
-    this.setState({
-      highlight: false,
-    });
-  }
-
-  translateRole = (role) => {
-    if (role === 'Admin') {
-      return gettext('Admin');
-    }
-    else if (role === 'Member') {
-      return gettext('Member');
-    }
-    else if (role === 'Owner') {
-      return gettext('Owner');
-    }
-  }
-
-  render() {
-    const { item, isOwner } = this.props;
-    const deleteAuthority = (item.role !== 'Owner' && isOwner === true) || (item.role === 'Member' && isOwner === false);
-    return(
-      <tr onMouseOver={this.handleMouseOver} onMouseLeave={this.handleMouseLeave} className={this.state.highlight ? 'tr-highlight' : ''} tabIndex="0" onFocus={this.handleMouseOver}>
-        <th scope="row"><img className="avatar" src={item.avatar_url} alt="" /></th>
-        <td>{item.name}</td>
-        <td>
-          {((isOwner === false) || (isOwner === true && item.role === 'Owner')) &&
-            <span className="group-admin">{this.translateRole(item.role)}</span>
-          }
-          {(isOwner === true && item.role !== 'Owner') &&
-            <RoleEditor
-              isTextMode={true}
-              isEditIconShow={this.state.highlight}
-              currentRole={item.role}
-              roles={this.roles}
-              onRoleChanged={this.onChangeUserRole}
-              toggleItemFreezed={this.props.toggleItemFreezed}
-            />
-          }
-        </td>
-        <td>
-          {(deleteAuthority && this.state.highlight) &&
-            <OpIcon
-              className="action-icon sf2-icon-x3"
-              title={gettext('Delete')}
-              op={this.deleteMember}
-            />
-          }
-        </td>
-      </tr>
-    );
-  }
-}
-
-Member.propTypes = MemberPropTypes;
-
-
 export default ManageMembersDialog;

frontend/src/components/group-members.js

@@ -0,0 +1,165 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Table } from 'reactstrap';
+import { Utils } from '../utils/utils';
+import { gettext } from '../utils/constants';
+import { seafileAPI } from '../utils/seafile-api';
+import RoleEditor from './select-editor/role-editor';
+import toaster from './toast';
+import OpIcon from './op-icon';
+
+const propTypes = {
+  groupMembers: PropTypes.array.isRequired,
+  groupID: PropTypes.string.isRequired,
+  isOwner: PropTypes.bool.isRequired,
+  isItemFreezed: PropTypes.bool.isRequired,
+  toggleItemFreezed: PropTypes.func.isRequired,
+  changeMember: PropTypes.func.isRequired,
+  deleteMember: PropTypes.func.isRequired
+};
+
+class GroupMembers extends React.Component {
+
+  render() {
+    const { groupMembers, changeMember, deleteMember, groupID, isOwner, isItemFreezed, toggleItemFreezed } = this.props;
+    return (
+      <Table size="sm" className="manage-members-table">
+        <thead>
+          <tr>
+            <th width="15%"></th>
+            <th width="45%">{gettext('Name')}</th>
+            <th width="30%">{gettext('Role')}</th>
+            <th width="10%"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {groupMembers.map((item, index) => {
+            return (
+              <Member
+                key={index}
+                item={item}
+                changeMember={changeMember}
+                deleteMember={deleteMember}
+                groupID={groupID}
+                isOwner={isOwner}
+                isItemFreezed={isItemFreezed}
+                toggleItemFreezed={toggleItemFreezed}
+              />
+            );
+          })
+          }
+        </tbody>
+      </Table>
+    );
+  }
+}
+
+GroupMembers.propTypes = propTypes;
+
+const MemberPropTypes = {
+  item: PropTypes.object.isRequired,
+  changeMember: PropTypes.func.isRequired,
+  deleteMember: PropTypes.func.isRequired,
+  toggleItemFreezed: PropTypes.func.isRequired,
+  groupID: PropTypes.string.isRequired,
+  isOwner: PropTypes.bool.isRequired,
+  isItemFreezed: PropTypes.bool.isRequired
+};
+
+class Member extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.roles = ['Admin', 'Member'];
+    this.state = ({
+      highlight: false,
+    });
+  }
+
+  onChangeUserRole = (role) => {
+    let isAdmin = role === 'Admin' ? 'True' : 'False';
+    seafileAPI.setGroupAdmin(this.props.groupID, this.props.item.email, isAdmin).then((res) => {
+      this.props.changeMember(res.data);
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  deleteMember = () => {
+    const { item } = this.props;
+    seafileAPI.deleteGroupMember(this.props.groupID, item.email).then((res) => {
+      this.props.deleteMember(item);
+      toaster.success(gettext('Successfully deleted {name}.').replace('{name}', item.name));
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  handleMouseOver = () => {
+    if (this.props.isItemFreezed) return;
+    this.setState({
+      highlight: true,
+    });
+  }
+
+  handleMouseLeave = () => {
+    if (this.props.isItemFreezed) return;
+    this.setState({
+      highlight: false,
+    });
+  }
+
+  translateRole = (role) => {
+    if (role === 'Admin') {
+      return gettext('Admin');
+    }
+    else if (role === 'Member') {
+      return gettext('Member');
+    }
+    else if (role === 'Owner') {
+      return gettext('Owner');
+    }
+  }
+
+  render() {
+    const { item, isOwner } = this.props;
+    const deleteAuthority = (item.role !== 'Owner' && isOwner === true) || (item.role === 'Member' && isOwner === false);
+    return(
+      <tr onMouseOver={this.handleMouseOver} onMouseLeave={this.handleMouseLeave} className={this.state.highlight ? 'tr-highlight' : ''} tabIndex="0" onFocus={this.handleMouseOver}>
+        <th scope="row"><img className="avatar" src={item.avatar_url} alt=""/></th>
+        <td>{item.name}</td>
+        <td>
+          {((isOwner === false) || (isOwner === true && item.role === 'Owner')) &&
+            <span className="group-admin">{this.translateRole(item.role)}</span>
+          }
+          {(isOwner === true && item.role !== 'Owner') &&
+            <RoleEditor
+              isTextMode={true}
+              isEditIconShow={this.state.highlight}
+              currentRole={item.role}
+              roles={this.roles}
+              onRoleChanged={this.onChangeUserRole}
+              toggleItemFreezed={this.props.toggleItemFreezed}
+            />
+          }
+        </td>
+        <td>
+          {(deleteAuthority && this.state.highlight) &&
+          <OpIcon
+            className="action-icon sf2-icon-x3"
+            title={gettext('Delete')}
+            op={this.deleteMember}
+          />
+          }
+        </td>
+      </tr>
+    );
+  }
+}
+
+Member.propTypes = MemberPropTypes;
+
+
+export default GroupMembers;

frontend/src/components/list-and-add-group-members.js

@@ -0,0 +1,188 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'reactstrap';
+import { Utils } from '../utils/utils';
+import { gettext } from '../utils/constants';
+import { seafileAPI } from '../utils/seafile-api';
+import UserSelect from './user-select';
+import toaster from './toast';
+import Loading from './loading';
+import GroupMembers from './group-members';
+
+const propTypes = {
+  groupID: PropTypes.string.isRequired,
+  isOwner: PropTypes.bool.isRequired,
+  changeMode: PropTypes.func.isRequired
+};
+
+class ManageMembersDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true, // first loading
+      isLoadingMore: false,
+      groupMembers: [],
+      page: 1,
+      perPage: 100,
+      hasNextPage: false,
+      selectedOption: null,
+      errMessage: [],
+      isItemFreezed: false
+    };
+  }
+
+  componentDidMount() {
+    this.listGroupMembers(this.state.page);
+  }
+
+  listGroupMembers = (page) => {
+    const { groupID } = this.props;
+    const { perPage, groupMembers } = this.state;
+    seafileAPI.listGroupMembers(groupID, page, perPage).then((res) => {
+      const members = res.data;
+      this.setState({
+        isLoading: false,
+        isLoadingMore: false,
+        page: page,
+        hasNextPage: members.length < perPage ? false : true,
+        groupMembers: groupMembers.concat(members)
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+      this.setState({
+        isLoading: false,
+        isLoadingMore: false,
+        hasNextPage: false
+      });
+    });
+  }
+
+  onSelectChange = (option) => {
+    this.setState({
+      selectedOption: option,
+      errMessage: [],
+    });
+  }
+
+  addGroupMember = () => {
+    let emails = [];
+    for (let i = 0; i < this.state.selectedOption.length; i++) {
+      emails.push(this.state.selectedOption[i].email);
+    }
+    seafileAPI.addGroupMembers(this.props.groupID, emails).then((res) => {
+      const newMembers = res.data.success;
+      this.setState({
+        groupMembers: [].concat(newMembers, this.state.groupMembers),
+        selectedOption: null,
+      });
+      this.refs.userSelect.clearSelect();
+      if (res.data.failed.length > 0) {
+        this.setState({
+          errMessage: res.data.failed
+        });
+      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  toggleItemFreezed = (isFreezed) => {
+    this.setState({
+      isItemFreezed: isFreezed
+    });
+  }
+
+  handleScroll = (event) => {
+    // isLoadingMore: to avoid repeated request
+    const { page, hasNextPage, isLoadingMore } = this.state;
+    if (hasNextPage && !isLoadingMore) {
+      const clientHeight = event.target.clientHeight;
+      const scrollHeight = event.target.scrollHeight;
+      const scrollTop    = event.target.scrollTop;
+      const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
+      if (isBottom) { // scroll to the bottom
+        this.setState({isLoadingMore: true}, () => {
+          this.listGroupMembers(page + 1);
+        });
+      }
+    }
+  }
+
+  changeMember = (targetMember) => {
+    this.setState({
+      groupMembers: this.state.groupMembers.map((item) => {
+        if (item.email == targetMember.email) {
+          item = targetMember;
+        }
+        return item;
+      })
+    });
+  }
+
+  deleteMember = (targetMember) => {
+    const groupMembers = this.state.groupMembers;
+    groupMembers.splice(groupMembers.indexOf(targetMember), 1);
+    this.setState({
+      groupMembers: groupMembers
+    });
+  }
+
+  render() {
+    const { isLoading, hasNextPage, groupMembers } = this.state;
+    return (
+      <Fragment>
+        <p className="mb-2">{gettext('Add group member')}</p>
+        <div className='add-members'>
+          <UserSelect
+            placeholder={gettext('Search users...')}
+            onSelectChange={this.onSelectChange}
+            ref="userSelect"
+            isMulti={true}
+            className="add-members-select"
+          />
+          {this.state.selectedOption ?
+            <Button color="secondary" onClick={this.addGroupMember}>{gettext('Submit')}</Button> :
+            <Button color="secondary" disabled>{gettext('Submit')}</Button>
+          }
+        </div>
+        {
+          this.state.errMessage.length > 0 &&
+            this.state.errMessage.map((item, index = 0) => {
+              return (
+                <div className="group-error error" key={index}>{item.error_msg}</div>
+              );
+            })
+        }
+        {groupMembers.length > 10 &&
+          <button className="btn btn-secondary btn-block search-group-members-btn text-left border-0" onClick={this.props.changeMode}>
+            <i className="fas fa-search mr-1" aria-hidden={true}></i>
+            {gettext('Search group members')}
+          </button>
+        }
+        <div className="manage-members" onScroll={this.handleScroll}>
+          {isLoading ? <Loading /> : (
+            <Fragment>
+              <GroupMembers
+                groupMembers={groupMembers}
+                changeMember={this.changeMember}
+                deleteMember={this.deleteMember}
+                groupID={this.props.groupID}
+                isOwner={this.props.isOwner}
+                isItemFreezed={this.state.isItemFreezed}
+                toggleItemFreezed={this.toggleItemFreezed}
+              />
+              {hasNextPage && <Loading />}
+            </Fragment>
+          )}
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+ManageMembersDialog.propTypes = propTypes;
+
+export default ManageMembersDialog;

frontend/src/components/search-group-members.js

@@ -0,0 +1,130 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Input, Button } from 'reactstrap';
+import { Utils } from '../utils/utils';
+import { gettext } from '../utils/constants';
+import { seafileAPI } from '../utils/seafile-api';
+import Loading from './loading';
+import GroupMembers from './group-members';
+
+const propTypes = {
+  groupID: PropTypes.string.isRequired,
+  isOwner: PropTypes.bool.isRequired
+};
+
+class SearchGroupMembers extends React.Component {
+
+  // pagination is not needed
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: false,
+      q: '', // query
+      groupMembers: [],
+      errMessage: [],
+      isItemFreezed: false
+    };
+  }
+
+  toggleItemFreezed = (isFreezed) => {
+    this.setState({
+      isItemFreezed: isFreezed
+    });
+  }
+
+  changeMember = (targetMember) => {
+    this.setState({
+      groupMembers: this.state.groupMembers.map((item) => {
+        if (item.email == targetMember.email) {
+          item = targetMember;
+        }
+        return item;
+      })
+    });
+  }
+
+  deleteMember = (targetMember) => {
+    const groupMembers = this.state.groupMembers;
+    groupMembers.splice(groupMembers.indexOf(targetMember), 1);
+    this.setState({
+      groupMembers: groupMembers
+    });
+  }
+
+  submit = () => {
+    let { q } = this.state;
+    q = q.trim();
+    if (!q) {
+      return;
+    }
+    this.setState({
+      isLoading: true
+    });
+    seafileAPI.searchGroupMember(this.props.groupID, q).then((res) => {
+      this.setState({
+        isLoading: false,
+        groupMembers: res.data,
+        errorMsg: ''
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      this.setState({
+        isLoading: false,
+        errorMsg: errMessage
+      });
+    });
+  }
+
+  onInputChange = (e) => {
+    this.setState({
+      q: e.target.value
+    });
+  }
+
+  onInputKeyDown = (e) => {
+    if (e.key == 'Enter') {
+      this.submit();
+    }
+  }
+
+  render() {
+    const { isLoading, q, errorMsg, groupMembers } = this.state;
+    return (
+      <Fragment>
+        <div className="d-flex justifiy-content-between">
+          <Input
+            type="text"
+            id="search-member"
+            className="form-control search-members-input mr-2"
+            value={q}
+            onChange={this.onInputChange}
+            onKeyDown={this.onInputKeyDown}
+          />
+          <Button type="button" color="secondary" className="flex-shrink-0" onClick={this.submit} disabled={!q.trim()}>{gettext('Submit')}</Button>
+        </div>
+        {errorMsg && <p className="error">{errorMsg}</p>}
+        <div className="manage-members">
+          {isLoading ? <Loading /> : (
+            <Fragment>
+              {groupMembers.length > 0 && (
+                <GroupMembers
+                  groupMembers={groupMembers}
+                  changeMember={this.changeMember}
+                  deleteMember={this.deleteMember}
+                  groupID={this.props.groupID}
+                  isOwner={this.props.isOwner}
+                  isItemFreezed={this.state.isItemFreezed}
+                  toggleItemFreezed={this.toggleItemFreezed}
+                />
+              )}
+            </Fragment>
+          )}
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+SearchGroupMembers.propTypes = propTypes;
+
+export default SearchGroupMembers;

frontend/src/css/manage-members-dialog.css

@@ -1,7 +1,7 @@
 .manage-members {
   max-height: 300px;
   overflow-y: scroll;
-  margin: 1rem 0 2rem;
+  margin: 10px 0 2rem;
 }
 .manage-members-table th,
 .manage-members-table td {
@@ -27,3 +27,19 @@
 .group-error {
   margin-top: 10px;
 }
+
+.group-manage-members-dialog .back-icon {
+  color: #999; 
+  cursor: pointer;
+}
+
+.group-manage-members-dialog .search-group-members-btn {
+  font-size: 14px;
+  font-weight: normal;
+  background: #f1f1f1;
+  margin: 12px 0 0;
+}
+
+.group-manage-members-dialog .search-group-members-btn:hover {
+  background: #dbdbdb;
+}

seahub/api2/endpoints/admin/generate_user_auth_token.py

@@ -0,0 +1,54 @@
+# Copyright (c) 2012-2016 Seafile Ltd.
+import logging
+
+from rest_framework.authentication import SessionAuthentication
+from rest_framework.permissions import IsAdminUser
+from rest_framework.response import Response
+from rest_framework.views import APIView
+from rest_framework import status
+
+
+from seahub.api2.authentication import TokenAuthentication
+from seahub.api2.throttling import UserRateThrottle
+from seahub.api2.utils import api_error, get_token_v1
+
+from seahub.base.accounts import User
+
+logger = logging.getLogger(__name__)
+
+
+class AdminGenerateUserAuthToken(APIView):
+
+    authentication_classes = (TokenAuthentication, SessionAuthentication)
+    throttle_classes = (UserRateThrottle,)
+    permission_classes = (IsAdminUser,)
+
+    def post(self, request):
+
+        email = request.data.get('email')
+        if not email:
+            error_msg = 'email invalid.'
+            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+
+        try:
+            user = User.objects.get(email=email)
+        except User.DoesNotExist:
+            error_msg = 'User %s not found.' % email
+            return api_error(status.HTTP_404_NOT_FOUND, error_msg)
+
+        if not user.is_active:
+            error_msg = 'User %s is not active.' % email
+            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+
+        try:
+            token = get_token_v1(email)
+        except Exception as e:
+            logger.error(e)
+            error_msg = 'Internal Server Error'
+            return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
+
+        result = {
+            'token': token.key
+        }
+
+        return Response(result)

seahub/api2/endpoints/group_members.py

@@ -133,6 +133,38 @@ class GroupMembers(APIView):
         return Response(member_info, status=status.HTTP_201_CREATED)
 
 
+class GroupSearchMember(APIView):
+
+    authentication_classes = (TokenAuthentication, SessionAuthentication)
+    permission_classes = (IsAuthenticated,)
+    throttle_classes = (UserRateThrottle,)
+
+    @api_check_group
+    def get(self, request, group_id, format=None):
+        """
+        Search group member by email.
+        """
+
+        q = request.GET.get('q', '')
+        if not q:
+            error_msg = 'q invalid.'
+            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+
+        if not is_group_member(group_id, request.user.username):
+            error_msg = 'Permission denied.'
+            return api_error(status.HTTP_403_FORBIDDEN, error_msg)
+
+        group_members = []
+        members = ccnet_api.search_group_members(group_id, q)
+        for member in members:
+
+            member_info = get_group_member_info(request, group_id, member.user_name)
+
+            group_members.append(member_info)
+
+        return Response(group_members)
+
+
 class GroupMember(APIView):
     authentication_classes = (TokenAuthentication, SessionAuthentication)
     permission_classes = (IsAuthenticated,)

seahub/auth/views.py

@@ -234,7 +234,7 @@ def login_simple_check(request):
         # Ensure the user-originating redirection url is safe.
         if REDIRECT_FIELD_NAME in request.GET:
             next_page = request.GET[REDIRECT_FIELD_NAME]
-            if not is_safe_url(url=next_page, host=request.get_host()):
+            if not is_safe_url(url=next_page, allowed_hosts=request.get_host()):
                 next_page = settings.LOGIN_REDIRECT_URL
         else:
             next_page = settings.SITE_ROOT

seahub/settings.py

@@ -320,9 +320,12 @@ LOGOUT_REDIRECT_URL = None
 
 ACCOUNT_ACTIVATION_DAYS = 7
 
-# allow seafile amdin view user's repo
+# allow seafile admin view user's repo
 ENABLE_SYS_ADMIN_VIEW_REPO = False
 
+# allow seafile admin generate user auth token
+ENABLE_SYS_ADMIN_GENERATE_USER_AUTH_TOKEN = False
+
 # allow search from LDAP directly during auto-completion (not only search imported users)
 ENABLE_SEARCH_FROM_LDAP_DIRECTLY = False
 

seahub/templates/wiki/wiki.html

@@ -4,7 +4,7 @@
 {% render_bundle 'wiki' 'css' %}
 {% endblock %}
 
-{% block sub_title %} {{filename|escapejs}} - {% endblock %}
+{% block sub_title %} {{filename}} - {% endblock %}
 
 {% block extra_script %}
 <script type="text/javascript">

seahub/urls.py

@@ -34,7 +34,7 @@ from seahub.api2.endpoints.group_owned_libraries import GroupOwnedLibraries, \
 from seahub.api2.endpoints.address_book.groups import AddressBookGroupsSubGroups
 from seahub.api2.endpoints.address_book.members import AddressBookGroupsSearchMember
 
-from seahub.api2.endpoints.group_members import GroupMembers, GroupMember, \
+from seahub.api2.endpoints.group_members import GroupMembers, GroupSearchMember, GroupMember, \
         GroupMembersBulk, GroupMembersImport, GroupMembersImportExample
 from seahub.api2.endpoints.search_group import SearchGroup
 from seahub.api2.endpoints.share_links import ShareLinks, ShareLink, \
@@ -119,6 +119,7 @@ from seahub.api2.endpoints.admin.file_audit import FileAudit
 from seahub.api2.endpoints.admin.file_update import FileUpdate
 from seahub.api2.endpoints.admin.perm_audit import PermAudit
 from seahub.api2.endpoints.admin.sysinfo import SysInfo
+from seahub.api2.endpoints.admin.generate_user_auth_token import AdminGenerateUserAuthToken
 from seahub.api2.endpoints.admin.web_settings import AdminWebSettings
 from seahub.api2.endpoints.admin.statistics import (
     FileOperationsView, TotalStorageView, ActiveUsersView, SystemTrafficView, \
@@ -193,6 +194,7 @@ urlpatterns = [
     url(r'^accounts/', include('seahub.base.registration_urls')),
 
     url(r'^sso/$', sso, name='sso'),
+    url(r'^jwt-sso/$', jwt_sso, name='jwt_sso'),
     url(r'^shib-login/', shib_login, name="shib_login"),
     url(r'^oauth/', include('seahub.oauth.urls')),
     url(r'^thirdparty-editor/', include('seahub.thirdparty_editor.urls')),
@@ -308,6 +310,7 @@ urlpatterns = [
     url(r'^api/v2.1/groups/(?P<group_id>\d+)/group-owned-libraries/$', GroupOwnedLibraries.as_view(), name='api-v2.1-group-owned-libraries'),
     url(r'^api/v2.1/groups/(?P<group_id>\d+)/group-owned-libraries/(?P<repo_id>[-0-9a-f]{36})/$', GroupOwnedLibrary.as_view(), name='api-v2.1-owned-group-library'),
     url(r'^api/v2.1/groups/(?P<group_id>\d+)/members/$', GroupMembers.as_view(), name='api-v2.1-group-members'),
+    url(r'^api/v2.1/groups/(?P<group_id>\d+)/search-member/$', GroupSearchMember.as_view(), name='api-v2.1-group-search-member'),
     url(r'^api/v2.1/groups/(?P<group_id>\d+)/members/bulk/$', GroupMembersBulk.as_view(), name='api-v2.1-group-members-bulk'),
     url(r'^api/v2.1/groups/(?P<group_id>\d+)/members/import/$', GroupMembersImport.as_view(), name='api-v2.1-group-members-import'),
     url(r'^api/v2.1/group-members-import-example/$', GroupMembersImportExample.as_view(), name='api-v2.1-group-members-import-example'),
@@ -504,6 +507,9 @@ urlpatterns = [
     url(r'^api/v2.1/admin/abuse-reports/(?P<pk>\d+)/$', AdminAbuseReportView.as_view(), name='api-v2.1-admin-abuse-report'),
 
 
+    ## admin::generate user auth token
+    url(r'^api/v2.1/admin/generate-user-auth-token/$', AdminGenerateUserAuthToken.as_view(), name='api-v2.1-admin-generate-user-auth-token'),
+
     ## admin::sysinfo
     url(r'^api/v2.1/admin/sysinfo/$', SysInfo.as_view(), name='api-v2.1-sysinfo'),
 

seahub/views/sso.py

@@ -1,10 +1,18 @@
 # Copyright (c) 2012-2016 Seafile Ltd.
+import jwt
+import time
+
 from django.conf import settings
 from django.urls import reverse
 from django.http import HttpResponseRedirect
 from django.utils.http import is_safe_url, urlquote
+from django.utils.translation import ugettext as _
+
+from seahub.base.templatetags.seahub_tags import email2nickname
 
 from seahub.auth import REDIRECT_FIELD_NAME
+from seahub.utils import render_error
+
 
 def sso(request):
     # Ensure the user-originating redirection url is safe.
@@ -43,6 +51,40 @@ def sso(request):
 
     return HttpResponseRedirect(next_page)
 
+
+def jwt_sso(request):
+
+    ENABLE_JWT_SSO = getattr(settings, 'ENABLE_JWT_SSO', False)
+    JWT_SSO_SECRET_KEY = getattr(settings, 'JWT_SSO_SECRET_KEY', '')
+    JWT_SSO_EXPIRATION = getattr(settings, 'JWT_SSO_EXPIRATION', 60 * 60)
+    JWT_SSO_ALGORITHM = getattr(settings, 'JWT_SSO_ALGORITHM', 'HS256')
+
+    if not ENABLE_JWT_SSO:
+        error_msg = _("jwt sso feature is not enabled.")
+        return render_error(request, error_msg)
+
+    if not JWT_SSO_SECRET_KEY:
+        error_msg = _("jwt sso secret key is not set.")
+        return render_error(request, error_msg)
+
+    page_url = request.GET.get('page', '')
+    if not page_url:
+        error_msg = _("page parameter is not passed.")
+        return render_error(request, error_msg)
+
+    username = request.user.username
+
+    data = {
+        'exp': time.time() + JWT_SSO_EXPIRATION,
+        'email': username,
+        'name': email2nickname(username)
+    }
+
+    jwt_token = jwt.encode(data, JWT_SSO_SECRET_KEY, JWT_SSO_ALGORITHM)
+    redirect_to = "{}?jwt-token={}".format(page_url, jwt_token)
+    return HttpResponseRedirect(redirect_to)
+
+
 def shib_login(request):
     # client platform args used to create api v2 token
     next_page = request.GET.get(REDIRECT_FIELD_NAME, '')