create component

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

@@ -0,0 +1,35 @@
+
+import React 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';
+
+
+class ApiSettings extends React.Component {
+
+  render() {
+    const { t } = this.props;
+    return (
+      <div className="mb-5 container-fluid">
+        <h2 className="border-bottom">{ t('API Token Settings') }</h2>
+      </div>
+    );
+  }
+
+}
+
+const ApiSettingsWrapper = (props) => {
+  return createSubscribedElement(ApiSettings, props, [AppContainer, PersonalContainer]);
+};
+
+ApiSettings.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  personalContainer: PropTypes.instanceOf(PersonalContainer).isRequired,
+};
+
+export default withTranslation()(ApiSettingsWrapper);

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

@@ -6,6 +6,7 @@ import { withTranslation } from 'react-i18next';
 import UserSettings from './UserSettings';
 import PasswordSettings from './PasswordSettings';
 import ExternalAccountLinkedMe from './ExternalAccountLinkedMe';
+import ApiSettings from './ApiSettings';
 
 class PersonalSettings extends React.Component {
 
@@ -42,7 +43,7 @@ class PersonalSettings extends React.Component {
                 <PasswordSettings />
               </div>
               <div id="apiToken" className="tab-pane" role="tabpanel">
-                {/* TODO GW-1031 create component */}
+                <ApiSettings />
               </div>
             </div>
           </div>