[my libs] added 'change password' for encrypted libraries (#2922)

2025-09-04 00:20:07 +00:00 · 2019-02-01 17:22:42 +08:00
parent c0d6b023ff
commit 56613d95d4
6 changed files with 173 additions and 0 deletions
--- a/frontend/src/components/dialog/change-repo-password-dialog.js
+++ b/frontend/src/components/dialog/change-repo-password-dialog.js
@@ -0,0 +1,133 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 
+import { gettext, repoPasswordMinLength } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import { seafileAPI } from '../../utils/seafile-api';
+import toaster from '../toast';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  repoName: PropTypes.string.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class ChangeRepoPasswordDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      oldPassword: '',
+      newPassword: '',
+      newPasswordAgain: '',
+      submitBtnDisabled: false,
+      errorMsg: ''
+    };
+  }
+
+  handleOldPasswordInputChange = (e) => {
+    this.setState({
+      oldPassword: e.target.value
+    });
+  }
+
+  handleNewPasswordInputChange = (e) => {
+    this.setState({
+      newPassword: e.target.value
+    });
+  }
+
+  handleNewPasswordAgainInputChange = (e) => {
+    this.setState({
+      newPasswordAgain: e.target.value
+    });
+  }
+
+  formSubmit = (e) => {
+    const { oldPassword, newPassword, newPasswordAgain } = this.state;
+    if (!oldPassword) {
+      this.setState({
+        errorMsg: gettext('Please enter the old password')
+      });
+      return false;
+    }
+    if (!newPassword) {
+      this.setState({
+        errorMsg: gettext('Please enter a new password')
+      });
+      return false;
+    }
+    if (newPassword.length < repoPasswordMinLength) {
+      this.setState({
+        errorMsg: gettext('New password is too short')
+      });
+      return false;
+    }
+    if (!newPasswordAgain) {
+      this.setState({
+        errorMsg: gettext('Please enter the new password again')
+      });
+      return false;
+    }
+    if (newPassword != newPasswordAgain) {
+      this.setState({
+        errorMsg: gettext('New passwords don\'t match')
+      });
+      return false;
+    }
+
+    this.setState({
+      submitBtnDisabled: true  
+    });
+    seafileAPI.changeEncryptedRepoPassword(this.props.repoID, oldPassword, newPassword)
+    .then(() => {
+      this.props.toggleDialog();
+      toaster.success(gettext('Successfully changed library password.'));
+    }).catch((error) => {
+      let errorMsg = '';
+      if (error.response) {
+        if (error.response.data) {
+            errorMsg = error.response.data.error_msg;
+        } else {
+            errorMsg = gettext('Error');
+        }   
+      } else {
+          errorMsg = gettext('Please check the network.');
+      }   
+      this.setState({
+        errorMsg: errorMsg,
+        submitBtnDisabled: false
+      }); 
+    });
+  }
+
+
+  render() {
+    const { repoID, repoName, toggleDialog } = this.props;
+
+    return (
+      <Modal isOpen={true} centered={true} style={{height: 'auto'}}>
+        <ModalHeader toggle={toggleDialog}>
+          <span dangerouslySetInnerHTML={{__html: Utils.generateDialogTitle(gettext('Change Password of Library {placeholder}'), repoName)}}></span>
+        </ModalHeader>
+        <ModalBody>
+          <form id="repo-change-passwd-form" action="" method="post">
+            <label htmlFor="passwd">{gettext('Old Password')}</label><br />
+            <input type="password" name="old_passwd" className="form-control" id="passwd" value={this.state.oldPassword} onChange={this.handleOldPasswordInputChange} /><br />
+            <label htmlFor="new-passwd">{gettext('New Password')}</label><span className="tip">{gettext('(at least {placeholder} characters)').replace('{placeholder}', repoPasswordMinLength)}</span><br />
+            <input type="password" name="new_passwd" className="form-control" id="new-passwd" value={this.state.newPassword} onChange={this.handleNewPasswordInputChange} /><br />
+            <label htmlFor="new-passwd-again">{gettext('New Password Again')}</label><br />
+            <input type="password" name="new_passwd_again" className="form-control" id="new-passwd-again" value={this.state.newPasswordAgain} onChange={this.handleNewPasswordAgainInputChange} /><br />
+            {this.state.errorMsg && <p className="alert alert-danger" role="alert">{this.state.errorMsg}</p>}
+          </form>
+        </ModalBody>
+        <ModalFooter>
+            <button className="btn btn-primary" disabled={this.state.submitBtnDisabled} onClick={this.formSubmit}>{gettext('Submit')}</button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+ChangeRepoPasswordDialog.propTypes = propTypes;
+
+export default ChangeRepoPasswordDialog;