create components

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

@@ -0,0 +1,62 @@
+
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../UnstatedUtils';
+import AppContainer from '../../services/AppContainer';
+import PersonalContainer from '../../services/PersonalContainer';
+import ExternalAccountRow from './ExternalAccountRow';
+
+class ExternalAccountLinkedMe extends React.Component {
+
+  render() {
+    const { t, personalContainer } = this.props;
+    const { externalAccounts } = personalContainer.state;
+
+    return (
+      <Fragment>
+        <h2 className="border-bottom">
+          <button type="button" className="btn btn-default btn-sm pull-right">
+            <i className="icon-plus" aria-hidden="true" />
+            Add
+          </button>
+          { t('External Accounts') }
+        </h2>
+
+        <div className="row">
+          <div className="col-md-12">
+            <table className="table table-bordered table-user-list">
+              <thead>
+                <tr>
+                  <th width="120px">Authentication Provider</th>
+                  <th>
+                    <code>accountId</code>
+                  </th>
+                  <th width="200px">{ t('Created') }</th>
+                  <th width="150px">{ t('Admin') }</th>
+                </tr>
+              </thead>
+              <tbody>
+                {externalAccounts !== 0 && externalAccounts.map(account => <ExternalAccountRow account={account} />)}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+
+}
+
+const ExternalAccountLinkedMeWrapper = (props) => {
+  return createSubscribedElement(ExternalAccountLinkedMe, props, [AppContainer, PersonalContainer]);
+};
+
+ExternalAccountLinkedMe.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  personalContainer: PropTypes.instanceOf(PersonalContainer).isRequired,
+};
+
+export default withTranslation()(ExternalAccountLinkedMeWrapper);

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

@@ -0,0 +1,41 @@
+
+import React from 'react';
+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>
+    );
+  }
+
+}
+
+ExternalAccountRow.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
+  account: PropTypes.object.isRequired,
+};
+
+export default withTranslation()(ExternalAccountRow);

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

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import UserSettings from './UserSettings';
+import ExternalAccountLinkedMe from './ExternalAccountLinkedMe';
 
 class PersonalSettings extends React.Component {
 
@@ -34,7 +35,7 @@ class PersonalSettings extends React.Component {
                 <UserSettings />
               </div>
               <div id="external-accounts" className="tab-pane" role="tabpanel">
-                {/* TODO GW-1029 create component */}
+                <ExternalAccountLinkedMe />
               </div>
               <div id="password-settings" className="tab-pane" role="tabpanel">
                 {/* TODO GW-1030 create component */}

src/client/js/services/PersonalContainer.js

@@ -24,6 +24,7 @@ export default class PersonalContainer extends Container {
       registrationWhiteList: [],
       isEmailPublished: false,
       lang: 'English',
+      externalAccounts: [],
     };
 
   }