init invite people

frontend/src/app.js

@@ -23,6 +23,7 @@ import PublicSharedView from './pages/shared-with-all/public-shared-view';
 import LibContentView from './pages/lib-content-view/lib-content-view';
 import Group from './pages/groups/group-view';
 import Groups from './pages/groups/groups-view';
+import InvitationsView from './pages/invitations/invitations-view';
 import Wikis from './pages/wikis/wikis';
 import MainContentWrapper from './components/main-content-wrapper';
 
@@ -232,6 +233,7 @@ class App extends Component {
               />
               <Wikis path={siteRoot + 'published'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
               <PublicSharedView path={siteRoot + 'org/'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} onTabNavClick={this.tabItemClick}/>
+              <InvitationsView path={siteRoot + 'invitations/'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
             </Router>
           </MainPanel>
         </div>

frontend/src/components/main-side-nav.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@reach/router';
 import Group from '../models/group';
-import { gettext, siteRoot, enableWiki, canAddRepo, canGenerateShareLink, canGenerateUploadLink } from '../utils/constants';
+import { gettext, siteRoot, enableWiki, canAddRepo, canGenerateShareLink, canGenerateUploadLink, canInvitePeople } from '../utils/constants';
 import { seafileAPI } from '../utils/seafile-api';
 import { Badge } from 'reactstrap';
 
@@ -223,6 +223,14 @@ class MainSideNav extends React.Component {
                 <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')}>
+                  <span className="sf2-icon-invite" aria-hidden="true"></span>
+                  <span className="nav-text">{gettext('Invite People')}</span>
+                </Link>
+              </li>
+            }
             <li className="nav-item flex-column" id="share-admin-nav">
               <a className="nav-link ellipsis" title={gettext('Share Admin')} onClick={this.shExtend}>
                 <span className={`toggle-icon float-right fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>

frontend/src/components/toolbar/invitations-toolbar.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
+import CommonToolbar from './common-toolbar';
+import { Button } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  onShowSidePanel: PropTypes.func.isRequired,
+  onSearchedClick: PropTypes.func.isRequired,
+};
+
+class InvitationsToolbar extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { onShowSidePanel, onSearchedClick } = this.props;
+    return (
+      <div className="main-panel-north border-left-show">
+        <div className="cur-view-toolbar">
+          <span title="Side Nav Menu" onClick={onShowSidePanel}
+            className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none">
+          </span>
+
+          <MediaQuery query="(min-width: 768px)">
+            <div className="operation">
+              <Button color="btn btn-secondary operation-item" >
+                <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Invite People')}
+              </Button>
+            </div>
+          </MediaQuery>
+          <MediaQuery query="(max-width: 768px)">
+            <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('Invite People')}></span>
+          </MediaQuery>
+        </div>
+        <CommonToolbar searchPlaceholder={this.props.searchPlaceholder} onSearchedClick={onSearchedClick}/>
+      </div>
+    );
+  }
+}
+
+
+export default InvitationsToolbar;

frontend/src/pages/invitations/invitations-view.js

@@ -0,0 +1,30 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import InvitationsToolbar from '../../components/toolbar/invitations-toolbar';
+
+class InvitationsView extends React.Component {
+  
+  render() {
+    return (
+      <Fragment>
+        <InvitationsToolbar
+          onShowSidePanel={this.props.onShowSidePanel}
+          onSearchedClick={this.props.onSearchedClick}
+        />
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext('Invite People')}</h3>
+            </div>
+            <div className="message empty-tip">
+              <h2>{gettext('You have not invited any people.')}</h2>
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default InvitationsView;

frontend/src/utils/constants.js

@@ -45,6 +45,7 @@ export const isSystemStaff = window.app.pageOptions.isSystemStaff;
 export const thumbnailSizeForOriginal = window.app.pageOptions.thumbnailSizeForOriginal;
 export const repoPasswordMinLength = window.app.pageOptions.repoPasswordMinLength;
 export const canAddPublicRepo = window.app.pageOptions.canAddPublicRepo;
+export const canInvitePeople = window.app.pageOptions.canInvitePeople;
 
 export const curNoteMsg = window.app.pageOptions.curNoteMsg;
 export const curNoteID = window.app.pageOptions.curNoteID;

media/css/seahub_react.css

@@ -100,6 +100,7 @@
 .sf2-icon-drafts:before {content:"\e03a"}
 .sf2-icon-recycle:before {content:"\e03b"}
 .sf2-icon-library:before { content:"\e00d"; }
+.sf2-icon-invite:before { content: "\e02b"; }
 
 /* common class and element style*/
 body { overflow-y: auto; }

seahub/templates/base_for_react.html

@@ -83,6 +83,7 @@
             thumbnailSizeForOriginal: {{ thumbnail_size_for_original }},
             repoPasswordMinLength: {{repo_password_min_length}},
             canAddPublicRepo: {% if can_add_public_repo %} true {% else %} false {% endif %},
+            canInvitePeople: {% if enable_guest_invitation and user.permissions.can_invite_guest %} true {% else %} false {% endif %},
 
             {% if request.user.is_authenticated and request.cur_note %}
             curNoteMsg: '{{ request.cur_note.message|urlize }}',

seahub/urls.py

@@ -215,6 +215,7 @@ urlpatterns = [
     url(r'^library/(?P<repo_id>[-0-9a-f]{36})/(?P<repo_name>[^/]+)/(?P<path>.*)$', react_fake_view, name="lib_view"),
     url(r'^my-libs/deleted/$', react_fake_view, name="my_libs_deleted"),
     url(r'^org/$', react_fake_view, name="org"),
+    url(r'^invitations/$', react_fake_view, name="invitations"),
 
     ### Ajax ###
     url(r'^ajax/repo/(?P<repo_id>[-0-9a-f]{36})/dirents/$', get_dirents, name="get_dirents"),