ldap tab

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

@@ -1,20 +1,43 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
 import Modal from 'react-bootstrap/es/Modal';
 
 const AssociateModal = (props) => {
+  const { t } = props;
+
   return (
     <Modal show={props.isOpen} onHide={props.onClose}>
-      <Modal.Header closeButton>
-        <Modal.Title></Modal.Title>
+      <Modal.Header className="bg-info" closeButton>
+        <Modal.Title className="text-white">
+          { t('Create External Account') }
+        </Modal.Title>
       </Modal.Header>
       <Modal.Body>
-          hoge
+        <ul className="nav nav-tabs passport-settings" role="tablist">
+          <li className="active">
+            <a href="#passport-ldap" data-toggle="tab" role="tab"><i className="fa fa-sitemap"></i> LDAP</a>
+          </li>
+        </ul>
+
+        <div className="tab-content passport-settings m-t-15">
+          <div id="passport-ldap" className="tab-pane active" role="tabpanel">
+            <div id="formLdapAssociationContainer">
+              <div className="clearfix">
+                <button type="button" className="btn btn-info pull-right" onClick="associateLdap()">
+                  <i className="fa fa-plus-circle" aria-hidden="true"></i>
+                  { t('add') }
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
       </Modal.Body>
 
-      <Modal.Footer>
-      </Modal.Footer>
     </Modal>
   );
 };
@@ -27,4 +50,4 @@ AssociateModal.propTypes = {
 };
 
 
-export default AssociateModal;
+export default withTranslation()(AssociateModal);