Merge pull request #2642 from haiwen/encrypt-libs

lib decrypt

frontend/src/components/dialog/lib-decrypt-dialog.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+import { Button, Modal, Input, ModalBody, Form, FormGroup, Label } from 'reactstrap';
+import { gettext, siteRoot } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+
+
+class LibDecryptDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      password: '',
+      showError: false,
+    };
+  }
+
+  handleSubmit = () => {
+    let repoID = this.props.repoID;
+    let password = this.state.password;
+    seafileAPI.setRepoDecryptPassword(repoID, password).then(res => {
+      this.props.onLibDecryptDialog();
+    }).catch(res => {
+      this.setState({
+        showError: true
+      });
+    })
+  } 
+
+  handleChange = (e) => {
+    this.setState({
+      password: e.target.value,
+      showError: false
+    });
+  }
+
+  toggle = () => {
+    window.location.href = siteRoot;
+  };
+
+  render() {
+    return (
+      <Modal isOpen={true} centered={true}>
+        <ModalBody>
+        <button type="button" className="close" onClick={this.toggle}><span aria-hidden="true">×</span></button> 
+        <Form className="lib-decrypt-form text-center">
+          <img src={siteRoot + 'media/img/lock.png'} alt=""/>
+          <p>{gettext('This library is password protected')}</p>
+          {this.state.showError &&
+            <p className="error">{gettext('Wrong password')}</p>
+          }
+          <FormGroup>
+            <Input type="password" name="password" placeholder={gettext('Password')} onChange={this.handleChange}/>
+          </FormGroup>
+          <Button onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+          <br />
+          <p className="tip">{'* '}{gettext('The password will be kept in the server for only 1 hour.')}</p>
+        </Form>
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+export default LibDecryptDialog;

frontend/src/components/dir-view/dir-panel.js

@@ -11,6 +11,8 @@ import CurDirPath from '../cur-dir-path';
 import DirentListView from '../dirent-list-view/dirent-list-view';
 import DirentDetail from '../dirent-detail/dirent-details';
 import FileUploader from '../file-uploader/file-uploader';
+import ModalPortal from '../modal-portal';
+import LibDecryptDialog from '../dialog/lib-decrypt-dialog';
 
 const propTypes = {
   currentRepo: PropTypes.object,
@@ -110,6 +112,7 @@ class DirPanel extends React.Component {
     return (
       <div className="main-panel wiki-main-panel o-hidden">
         <div className="main-panel-north">
+        {!this.props.libNeedDecrypt &&
           <div className="cur-view-toolbar border-left-show">
             <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.props.onMenuClick}></span>
             <div className="dir-operation">
@@ -137,6 +140,7 @@ class DirPanel extends React.Component {
               switchViewMode={this.switchViewMode}
             />
           </div>
+          }
           <CommonToolbar 
             repoID={this.props.repoID} 
             onSearchedClick={this.props.onSearchedClick} 
@@ -144,6 +148,7 @@ class DirPanel extends React.Component {
           />
         </div>
         <div className="main-panel-center flex-direction-row">
+          {!this.props.libNeedDecrypt &&
           <div className="cur-view-container">
             <div className="cur-view-path">
               <CurDirPath 
@@ -190,6 +195,7 @@ class DirPanel extends React.Component {
               }
             </div>
           </div>
+          }
           {this.state.isDirentDetailShow && (
             <div className="cur-view-detail">
               <DirentDetail
@@ -201,6 +207,13 @@ class DirPanel extends React.Component {
               />
             </div>
           )}
+          {this.props.libNeedDecrypt && (
+            <ModalPortal>
+              <LibDecryptDialog repoID={this.props.repoID} 
+                                onLibDecryptDialog={this.props.onLibDecryptDialog}
+                                />
+            </ModalPortal>
+          )}
         </div>
       </div>
     );

frontend/src/components/dir-view/dir-view.js

@@ -27,6 +27,7 @@ class DirView extends React.Component {
       repoName: '',
       repoID: '',
       permission: true,
+      libNeedDecrypt: false,
       isDirentSelected: false,
       isAllDirentSelected: false,
       isDirentListLoading: true,
@@ -55,12 +56,16 @@ class DirView extends React.Component {
         repoName: repo.repo_name,
         permission: repo.permission === 'rw',
         currentRepo: repo,
+        libNeedDecrypt: res.data.lib_need_decrypt,
       });
+
       let repoName = repo.repo_name;
       let index = location.indexOf(repoName);
       let path = location.slice(index + repoName.length);
-      this.updateDirentList(path);
       this.setState({path: path});
+      if (!res.data.lib_need_decrypt) {
+        this.updateDirentList(path);
+      }
     });
   }
   
@@ -437,6 +442,13 @@ class DirView extends React.Component {
     }
   }
 
+  onLibDecryptDialog = () => {
+    this.setState({
+      libNeedDecrypt: !this.state.libNeedDecrypt
+    })
+    this.updateDirentList(this.state.path);
+  }
+
   render() {
     return (
       <DirPanel 
@@ -472,6 +484,8 @@ class DirView extends React.Component {
         switchViewMode={this.switchViewMode}
         onSearchedClick={this.onSearchedClick}
         onFileUploadSuccess={this.onFileUploadSuccess}
+        libNeedDecrypt={this.state.libNeedDecrypt}
+        onLibDecryptDialog={this.onLibDecryptDialog}
       />
     );
   }