props account for disassociate

src/client/js/components/Me/DisassociateModal.jsx

@@ -0,0 +1,93 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import Modal from 'react-bootstrap/es/Modal';
+import { toastSuccess, toastError } from '../../util/apiNotification';
+import { createSubscribedElement } from '../UnstatedUtils';
+
+import AppContainer from '../../services/AppContainer';
+import PersonalContainer from '../../services/PersonalContainer';
+
+import LdapAuthTest from '../Admin/Security/LdapAuthTest';
+
+class DisassociateModal extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: '',
+      password: '',
+    };
+
+    this.onChangeUsername = this.onChangeUsername.bind(this);
+    this.onChangePassword = this.onChangePassword.bind(this);
+    this.onClickAddBtn = this.onClickAddBtn.bind(this);
+  }
+
+  /**
+   * Change username
+   */
+  onChangeUsername(username) {
+    this.setState({ username });
+  }
+
+  /**
+   * Change password
+   */
+  onChangePassword(password) {
+    this.setState({ password });
+  }
+
+  async onClickAddBtn() {
+    const { t, personalContainer } = this.props;
+    const { username, password } = this.state;
+
+    try {
+      await personalContainer.associateLdapAccount({ username, password });
+      toastSuccess(t('security_setting.updated_general_security_setting'));
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <Modal show={this.props.isOpen} onHide={this.props.onClose}>
+        <Modal.Header className="bg-info" closeButton>
+          <Modal.Title className="text-white">
+            {t('Diassociate External Account')}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+
+        </Modal.Body>
+        <Modal.Footer>
+
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+
+}
+
+const DisassociateModalWrapper = (props) => {
+  return createSubscribedElement(DisassociateModal, props, [AppContainer, PersonalContainer]);
+};
+
+DisassociateModal.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  personalContainer: PropTypes.instanceOf(PersonalContainer).isRequired,
+
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+
+export default withTranslation()(DisassociateModalWrapper);

src/client/js/components/Me/ExternalAccountLinkedMe.jsx

@@ -10,6 +10,7 @@ import AppContainer from '../../services/AppContainer';
 import PersonalContainer from '../../services/PersonalContainer';
 import ExternalAccountRow from './ExternalAccountRow';
 import AssociateModal from './AssociateModal';
+import DisassociateModal from './DisassociateModal';
 
 class ExternalAccountLinkedMe extends React.Component {
 
@@ -17,11 +18,15 @@ class ExternalAccountLinkedMe extends React.Component {
     super(props);
 
     this.state = {
-      isAssociatModalOpen: false,
+      isAssociateModalOpen: false,
+      isDisassociateModalOpen: false,
+      accountForDisassociate: null,
     };
 
-    this.openAssociatModal = this.openAssociatModal.bind(this);
-    this.closeAssociatModal = this.closeAssociatModal.bind(this);
+    this.openAssociateModal = this.openAssociateModal.bind(this);
+    this.closeAssociateModal = this.closeAssociateModal.bind(this);
+    this.openDisassociateModal = this.openDisassociateModal.bind(this);
+    this.closeDisassociateModal = this.closeDisassociateModal.bind(this);
   }
 
   async componentDidMount() {
@@ -33,12 +38,27 @@ class ExternalAccountLinkedMe extends React.Component {
     }
   }
 
-  openAssociatModal() {
-    this.setState({ isAssociatModalOpen: true });
+  openAssociateModal() {
+    this.setState({ isAssociateModalOpen: true });
   }
 
-  closeAssociatModal() {
-    this.setState({ isAssociatModalOpen: false });
+  closeAssociateModal() {
+    this.setState({ isAssociateModalOpen: false });
+  }
+
+  /**
+   * open disassociate modal, and props account
+   * @param {object} account
+   */
+  async openDisassociateModal(account) {
+    await this.setState({
+      isDisassociateModalOpen: true,
+      accountForDisassociate: account,
+    });
+  }
+
+  closeDisassociateModal() {
+    this.setState({ isDisassociateModalOpen: false });
   }
 
   render() {
@@ -49,7 +69,7 @@ class ExternalAccountLinkedMe extends React.Component {
       <Fragment>
         <div className="container-fluid">
           <h2 className="border-bottom">
-            <button type="button" className="btn btn-default btn-sm pull-right" onClick={this.openAssociatModal}>
+            <button type="button" className="btn btn-default btn-sm pull-right" onClick={this.openAssociateModal}>
               <i className="icon-plus" aria-hidden="true" />
             Add
             </button>
@@ -71,16 +91,31 @@ class ExternalAccountLinkedMe extends React.Component {
                 </tr>
               </thead>
               <tbody>
-                {externalAccounts !== 0 && externalAccounts.map(account => <ExternalAccountRow account={account} key={account._id} />)}
+                {externalAccounts !== 0 && externalAccounts.map(account => (
+                  <ExternalAccountRow
+                    account={account}
+                    key={account._id}
+                    openDisassociateModal={this.openDisassociateModal}
+                  />
+                ))}
               </tbody>
             </table>
           </div>
         </div>
 
         <AssociateModal
-          isOpen={this.state.isAssociatModalOpen}
-          onClose={this.closeAssociatModal}
+          isOpen={this.state.isAssociateModalOpen}
+          onClose={this.closeAssociateModal}
+        />
+
+        {this.state.accountForDisassociate != null
+        && (
+        <DisassociateModal
+          isOpen={this.state.isDisassociateModalOpen}
+          onClose={this.closeDisassociateModal}
+          accountForDisassociate={this.state.accountForDisassociate}
         />
+        )}
 
       </Fragment>
     );

src/client/js/components/Me/ExternalAccountRow.jsx

@@ -5,37 +5,36 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import dateFnsFormat from 'date-fns/format';
 
-class ExternalAccountRow extends React.PureComponent {
-
-  render() {
-    const { t, account } = this.props;
-
-    return (
-      <tr>
-        <td>{ account.providerType }</td>
-        <td>
-          <strong>{ account.accountId }</strong>
-        </td>
-        <td>{dateFnsFormat(new Date(account.createdAt), 'yyyy-MM-dd')}</td>
-        <td className="text-center">
-          <button
-            type="button"
-            className="btn btn-default btn-sm btn-danger"
-          >
-            <i className="ti-unlink"></i>
-            { t('Diassociate') }
-          </button>
-        </td>
-      </tr>
-    );
-  }
-
-}
+const ExternalAccountRow = (props) => {
+  const { t, account } = props;
+
+  return (
+    <tr>
+      <td>{ account.providerType }</td>
+      <td>
+        <strong>{ account.accountId }</strong>
+      </td>
+      <td>{dateFnsFormat(new Date(account.createdAt), 'yyyy-MM-dd')}</td>
+      <td className="text-center">
+        <button
+          type="button"
+          className="btn btn-default btn-sm btn-danger"
+          onClick={() => props.openDisassociateModal(account)}
+        >
+          <i className="ti-unlink"></i>
+          { t('Diassociate') }
+        </button>
+      </td>
+    </tr>
+  );
+};
+
 
 ExternalAccountRow.propTypes = {
   t: PropTypes.func.isRequired, // i18next
 
   account: PropTypes.object.isRequired,
+  openDisassociateModal: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(ExternalAccountRow);