create disassociate modal

resource/locales/en-US/translation.json

@@ -123,6 +123,7 @@
   "List Drafts": "Drafts",
   "Deleted Pages": "Deleted Pages",
   "Sign out": "Logout",
+  "Disassociate": "Disassociate",
   "form_validation": {
     "error_message": "Some values ​​are incorrect",
     "required": "%s is required",
@@ -165,6 +166,8 @@
   "Password": "Password",
   "Password Settings": "Password Settings",
     "personal_settings": {
+    "disassociate_external_account": "Disassociate External Account",
+    "disassociate_external_account_desc": "Are you sure to disassociate the <strong>{{providerType}}</strong> account <strong>{{accountId}}</strong>?",
     "set_new_password": "Set new Password",
     "update_password": "Update Password",
       "current_password": "Current password",

resource/locales/ja/translation.json

@@ -122,6 +122,7 @@
   "List Drafts": "下書き一覧",
   "Deleted Pages": "削除済みページ",
   "Sign out": "ログアウト",
+  "Disassociate": "連携解除",
   "form_validation": {
     "error_message": "いくつかの値が設定されていません",
     "required": "%sに値を入力してください",
@@ -164,6 +165,8 @@
   "Password": "パスワード",
   "Password Settings": "パスワード設定",
   "personal_settings":{
+    "disassociate_external_account": "External Account の連携解除",
+    "disassociate_external_account_desc": "<strong>{{providerType}}</strong> プロバイダーの <strong>{{accountId}}</strong> アカウントを連携解除します",
     "set_new_password": "パスワードを新規に設定",
     "update_password": "パスワードを更新",
     "current_password": "現在のパスワード",

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

@@ -69,6 +69,10 @@ class AssociateModal extends React.Component {
             <li className="active">
               <a href="#passport-ldap" data-toggle="tab" role="tab"><i className="fa fa-sitemap"></i> LDAP</a>
             </li>
+            <li className="tbd disabled"><a><i className="fa fa-github"></i> (TBD) GitHub</a></li>
+            <li className="tbd disabled"><a><i className="fa fa-google"></i> (TBD) Google OAuth</a></li>
+            <li className="tbd disabled"><a><i className="fa fa-facebook"></i> (TBD) Facebook</a></li>
+            <li className="tbd disabled"><a><i className="fa fa-twitter"></i> (TBD) Twitter</a></li>
           </ul>
           <LdapAuthTest
             username={this.state.username}

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

@@ -10,43 +10,20 @@ 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);
+    this.onClickDisassociateBtn = this.onClickDisassociateBtn.bind(this);
   }
 
-  /**
-   * Change username
-   */
-  onChangeUsername(username) {
-    this.setState({ username });
-  }
-
-  /**
-   * Change password
-   */
-  onChangePassword(password) {
-    this.setState({ password });
-  }
-
-  async onClickAddBtn() {
+  async onClickDisassociateBtn() {
     const { t, personalContainer } = this.props;
-    const { username, password } = this.state;
 
     try {
-      await personalContainer.associateLdapAccount({ username, password });
+      await personalContainer.disassociateLdapAccount();
+      this.props.onClose();
       toastSuccess(t('security_setting.updated_general_security_setting'));
     }
     catch (err) {
@@ -55,20 +32,28 @@ class DisassociateModal extends React.Component {
   }
 
   render() {
-    const { t } = this.props;
+    const { t, accountForDisassociate } = this.props;
+    const { providerType, accountId } = accountForDisassociate;
 
     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')}
+            {t('personal_settings.disassociate_external_account')}
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
-
+          {/* eslint-disable-next-line react/no-danger */}
+          <p dangerouslySetInnerHTML={{ __html: t('personal_settings.disassociate_external_account_desc', { providerType, accountId }) }} />
         </Modal.Body>
         <Modal.Footer>
-
+          <button type="button" className="btn btn-sm btn-default" onClick={this.props.onClose}>
+            { t('Cancel') }
+          </button>
+          <button type="button" className="btn btn-sm btn-danger" onClick={this.onClickDisassociateBtn}>
+            <i className="ti-unlink"></i>
+            { t('Disassociate') }
+          </button>
         </Modal.Footer>
       </Modal>
     );
@@ -87,6 +72,8 @@ DisassociateModal.propTypes = {
 
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
+  accountForDisassociate: PropTypes.object.isRequired,
+
 };
 
 

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

@@ -50,8 +50,8 @@ class ExternalAccountLinkedMe extends React.Component {
    * open disassociate modal, and props account
    * @param {object} account
    */
-  async openDisassociateModal(account) {
-    await this.setState({
+  openDisassociateModal(account) {
+    this.setState({
       isDisassociateModalOpen: true,
       accountForDisassociate: account,
     });

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

@@ -22,7 +22,7 @@ const ExternalAccountRow = (props) => {
           onClick={() => props.openDisassociateModal(account)}
         >
           <i className="ti-unlink"></i>
-          { t('Diassociate') }
+          { t('Disassociate') }
         </button>
       </td>
     </tr>

src/client/js/services/PersonalContainer.js

@@ -231,4 +231,18 @@ export default class PersonalContainer extends Container {
     }
   }
 
+  /**
+   * Disassociate LDAP account
+   */
+  async disassociateLdapAccount() {
+    try {
+      // return this.appContainer.apiv3.put('/personal-setting/associateLdap', account);
+    }
+    catch (err) {
+      this.setState({ retrieveError: err });
+      logger.error(err);
+      throw new Error('Failed to disassociate ldap account');
+    }
+  }
+
 }