add repo create dialog

frontend/src/app.js

@@ -140,8 +140,8 @@ class App extends Component {
             <SharedLibrariesWrapper path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
             <MyLibraries path={siteRoot + 'my-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
             <DirView path={siteRoot + 'library/:repoID/*'} onMenuClick={this.onShowSidePanel} updateCurrentTab={this.updateCurrentTab}/>
-            <Groups path={siteRoot + 'groups'} />
+            <Groups path={siteRoot + 'groups'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
-            <Group path={siteRoot + 'group/:groupID'} />
+            <Group path={siteRoot + 'group/:groupID'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
           </Router>
         </MainPanel>
       </div>

frontend/src/components/dialog/create-repo-dialog.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Check } from 'reactstrap';
+import { Button, Modal, ModalHeader, Input, CustomInput, ModalBody, ModalFooter, Form, FormGroup, Label } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 
 const propTypes = {
-
+  onCreateRepo: PropTypes.func.isRequired,
+  onCreateToggle: PropTypes.func.isRequired,
 };
 
 class CreateRepoDialog extends React.Component {
@@ -12,21 +13,35 @@ class CreateRepoDialog extends React.Component {
     super(props);
     this.state = {
       repoName: '',
-      password: '',
+      disabled: true,
+      encrypt: false,
+      password1: '',
       password2: '',
+      errMessage: '',
     };
     this.newInput = React.createRef();
   }
 
-  handleChange = (e) => {
+  handleRepoNameChange = (e) => {
-    this.setState({
+    this.setState({repoName: e.target.value});
-      childName: e.target.value, 
+  }
-    });
+
+  handlePassword1Change = (e) => {
+    this.setState({password1: e.target.value});
+  }
+
+  handlePassword2Change = (e) => {
+    this.setState({password2: e.target.value});
   }
 
   handleSubmit = () => {
-    let path = this.state.parentPath + this.state.childName;
+    let isValidate = this.validateInputParams();
-    this.props.onAddFolder(path);
+    if (isValidate) {
+      let repoName = this.state.repoName.trim();
+      let password = this.state.encrypt ? this.state.password1 : '';
+      let repo = this.createRepo(repoName, password);
+      this.props.onCreateRepo(repo);
+    }
   } 
 
   handleKeyPress = (e) => {
@@ -36,17 +51,86 @@ class CreateRepoDialog extends React.Component {
   }
 
   toggle = () => {
-    this.props.addFolderCancel();
+    this.props.onCreateToggle();
   }
 
   componentDidMount() {
     this.newInput.focus();
   }
 
+  validateInputParams() {
+    let errMessage = '';
+    let repoName = this.state.repoName.trim();
+    if (!repoName.length) {
+      errMessage = 'Name is required';
+      this.setState({errMessage: errMessage});
+      return false;
+
+    }
+    if (repoName.indexOf('/') > -1) {
+      errMessage = 'Name should not include '/'.';
+      this.setState({errMessage: errMessage});
+      return;
+    }
+    if (this.state.encrypt) {
+      let password1 = this.state.password1.trim();
+      let password2 = this.state.password2.trim();
+      if (!password1.length) {
+        errMessage = 'Please enter password';
+        this.setState({errMessage: errMessage});
+        return false;
+      }
+      if (!password2.length) {
+        errMessage = 'Please enter the password again';
+        this.setState({errMessage: errMessage});
+        return false;
+      }
+      if (password1.length < 8) {
+        errMessage = 'Password is too short';
+        this.setState({errMessage: errMessage});
+        return false;
+      }
+      if (password1 !== password2) {
+        errMessage = 'Passwords don\'t match';
+        this.setState({errMessage: errMessage});
+        return false;
+      }
+    }
+    return true;
+  }
+
+  onEncrypted = (e) => {
+    let isChecked = e.target.checked;
+    this.setState({
+      encrypt: isChecked,
+      disabled: !isChecked
+    });
+  }
+
+  createRepo = (repoName, password) => {
+    let encrypt = password ? true : false;
+    let repo = {
+      id: null,
+      name: repoName,
+      desc: "",
+      encrypted: encrypt,
+      passwd: password,
+      passwd1: password,
+      passwd2: password,
+      mtime: 0,
+      mtime_relative: "",
+      owner: "-",
+      owner_nickname: "-",
+      permission: "rw",
+      storage_name: "-",
+    };
+    return repo;
+  }
+
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('New Folder')}</ModalHeader>
+        <ModalHeader toggle={this.toggle}>{gettext('New Library')}</ModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
@@ -55,33 +139,36 @@ class CreateRepoDialog extends React.Component {
                 onKeyPress={this.handleKeyPress} 
                 innerRef={input => {this.newInput = input;}} 
                 id="fileName" placeholder={gettext('newName')} 
-                value={this.state.childName} 
+                value={this.state.repoName} 
-                onChange={this.handleNameChange}
+                onChange={this.handleRepoNameChange}
+              />
+            </FormGroup>
+            <FormGroup check>
+              <Input type="checkbox" id="encrypt" onChange={this.onEncrypted}/>
+              <Label for="encrypt">{gettext('Encrypt')}</Label>
+            </FormGroup>
+            <FormGroup>
+              <Label for="passwd1">{gettext('Password')} ({gettext('at least 8 characters')})</Label>
+              <Input 
+                id="passwd1" 
+                type="password"
+                disabled={this.state.disabled}
+                value={this.state.password1} 
+                onChange={this.handlePassword1Change}
               />
             </FormGroup>
             <FormGroup>
-              <Input type="checkbox" id="encrypt"/>{gettext('Encrypt')}
+              <Label for="passwd2">{gettext('Password again')}: </Label>
-            </FormGroup>
-            <FormGroup>
-              <Label for="fileName">{gettext('Password(at least 8 characters)')}</Label>
               <Input 
-                id="fileName" 
+                id="passwd2"
-                placeholder={gettext('password')} 
+                type="password"
-                value={this.state.childName} 
+                disabled={this.state.disabled}
-                onChange={this.handlePasswordChange}
+                value={this.state.password2} 
-              />
-            </FormGroup>
-            <FormGroup>
-              <Label for="fileName">{gettext('Password again')}: </Label>
-              <Input 
-                id="fileName" 
-                placeholder={gettext('password2')} 
-                value={this.state.childName} 
                 onChange={this.handlePassword2Change}
               />
             </FormGroup>
           </Form>
-          <div className="err-message"></div>
+          <Label className="err-message">{gettext(this.state.errMessage)}</Label>
         </ModalBody>
         <ModalFooter>
           <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>

frontend/src/components/search/search.js

@@ -7,7 +7,7 @@ import More from '../more';
 
 const propTypes = {
   placeholder: PropTypes.string,
-  repoID: PropTypes.string.isRequired,
+  repoID: PropTypes.string,
   onSearchedClick: PropTypes.func.isRequired,
 };
 

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

@@ -6,7 +6,7 @@ import Notification from '../common/notification';
 import Account from '../common/account';
 
 const propTypes = {
-  repoID: PropTypes.string.isRequired,
+  repoID: PropTypes.string,
   onSearchedClick: PropTypes.func.isRequired,
   searchPlaceholder: PropTypes.string
 };

frontend/src/components/toolbar/repo-view-toobar.js

@@ -1,23 +1,55 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
+import ModalPortal from '../modal-portal';
+import CreateRepoDialog from '../dialog/create-repo-dialog';
 
 const propTypes = {
-  isOwnLibrary: PropTypes.bool.isRequired,
+  // isOwnLibrary: PropTypes.bool.isRequired,
-  libraryType: PropTypes.string.isRequired,
+  // libraryType: PropTypes.string.isRequired,
+  onCreateRepo: PropTypes.func.isRequired,
 };
 
 class RepoViewToolbar extends React.Component {
   
+  constructor(props) {
+    super(props);
+    this.state = {
+      isCreateRepoDialogShow: false,
+    };
+  }
+
+  onCreateRepo = (repo) => {
+    this.props.onCreateRepo(repo);
+    this.onCreateToggle();
+  }
+
+  onCreateToggle = () => {
+    this.setState({isCreateRepoDialogShow: !this.state.isCreateRepoDialogShow});
+  }
+
   render() {
     return (
+      <Fragment>
         <div className="cur-view-toolbar border-left-show">
           <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
           <div className="operation">
-          <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateClick}>{gettext('New Library')}</button>
+            <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateToggle}>
+              <i className="fas fa-plus-square op-icon"></i>
+              {gettext('New Library')}
+            </button>
             <button className="btn btn-secondary operation-item" title={gettext('More')} onClick={this.onShareClick}>{gettext('More')}</button>
           </div>
         </div>
+        {this.state.isCreateRepoDialogShow && (
+          <ModalPortal>
+            <CreateRepoDialog 
+              onCreateRepo={this.onCreateRepo}
+              onCreateToggle={this.onCreateToggle}
+            />
+          </ModalPortal>
+        )}
+      </Fragment>
     );
   }
 }

frontend/src/pages/group/group.js

@@ -1,9 +1,11 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, username } from '../../utils/constants';
 import Loading from '../../components/loading';
 import GroupRepoItem from './group-repo-item';
+import CommonToolbar from '../../components/toolbar/common-toolbar';
+import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
 
 import '../../css/groups.css';
 
@@ -271,8 +273,20 @@ class Group extends Component {
     });
   }
 
+  onCreateRepo = (repo) => {
+    let groupId = this.props.groupID;
+    seafileAPI.createGroupRepo(groupId, repo).then(() => {
+      //todo update group list
+    });
+  }
+
   render() {
     return (
+      <Fragment>
+        <div className="main-panel-north">
+          <RepoViewToolbar onShowSidePanel={this.props.onShowSidePanel} onCreateRepo={this.onCreateRepo} />
+          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
+        </div>
         <div className="main-panel-center">
           <div className="cur-view-container">
             <div className="cur-view-path">
@@ -283,6 +297,7 @@ class Group extends Component {
             </div>
           </div>
         </div>
+      </Fragment>
     );
   }
 }

frontend/src/pages/group/groups.js

@@ -1,8 +1,9 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot, loginUrl, username } from '../../utils/constants';
 import Loading from '../../components/loading';
 import GroupRepoItem from './group-repo-item';
+import GeneralToolbar from '../../components/toolbar/general-toolbar';
 
 import '../../css/groups.css';
 
@@ -157,6 +158,8 @@ class Groups extends Component {
 
   render() {
     return (
+      <Fragment>
+        <GeneralToolbar onShowSidePanel={this.props.onShowSidePanel} onSearchedClick={this.props.onSearchedClick}/>
         <div className="main-panel-center">
           <div className="cur-view-container">
             <div className="cur-view-path">
@@ -167,6 +170,7 @@ class Groups extends Component {
             </div>
           </div>
         </div>
+      </Fragment>
     );
   }
 }

frontend/src/pages/my-libs/my-libs.js

@@ -393,11 +393,17 @@ class MyLibraries extends Component {
     });
   }
 
+  onCreateRepo = (repo) => {
+    seafileAPI.createMineRepo(repo).then((res) => {
+      
+    });
+  }
+
   render() {
     return (
       <Fragment>
         <div className="main-panel-north">
-          <RepoViewToolbar onShowSidePanel={this.props.onShowSidePanel}/>
+          <RepoViewToolbar onShowSidePanel={this.props.onShowSidePanel} onCreateRepo={this.onCreateRepo} />
           <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
         </div>
         <div className="main-panel-center">