create personalSettings component

src/client/js/app.jsx

@@ -59,6 +59,8 @@ import AdminAppContainer from './services/AdminAppContainer';
 import WebsocketContainer from './services/WebsocketContainer';
 import AdminMarkDownContainer from './services/AdminMarkDownContainer';
 import AdminExternalAccountsContainer from './services/AdminExternalAccountsContainer';
+import PersonalSettings from './components/Me/PersonalSettings';
+import PersonalContainer from './services/PersonalContainer';
 
 const logger = loggerFactory('growi:app');
 
@@ -246,6 +248,21 @@ if (adminUserGroupPageElem != null) {
   );
 }
 
+const personalSettingsElem = document.getElementById('personal-setting');
+if (personalSettingsElem != null) {
+  const personalContainer = new PersonalContainer(appContainer);
+  ReactDOM.render(
+    <Provider inject={[injectableContainers, personalContainer]}>
+      <I18nextProvider i18n={i18n}>
+        <PersonalSettings
+          crowi={appContainer}
+        />
+      </I18nextProvider>
+    </Provider>,
+    personalSettingsElem,
+  );
+}
+
 // うわーもうー (commented by Crowi team -- 2018.03.23 Yuki Takei)
 $('a[data-toggle="tab"][href="#revision-history"]').on('show.bs.tab', () => {
   ReactDOM.render(

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

@@ -0,0 +1,65 @@
+
+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 UserSettings from './UserSettings';
+
+class PersonalSettings extends React.Component {
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <Fragment>
+        {/* TODO GW-226 adapt BS4 */}
+        <div className="m-t-10">
+          <div className="personal-settings">
+            <ul className="nav nav-tabs" role="tablist">
+              <li className="active">
+                <a href="#user-settings" data-toggle="tab" role="tab"><i className="icon-user"></i> { t('User Information') }</a>
+              </li>
+              <li>
+                <a href="#external-accounts" data-toggle="tab" role="tab"><i className="icon-share-alt"></i> { t('External Accounts') }</a>
+              </li>
+              <li>
+                <a href="#password-settings" data-toggle="tab" role="tab"><i className="icon-lock"></i> { t('Password Settings') }</a>
+              </li>
+              <li>
+                <a href="#apiToken" data-toggle="tab" role="tab"><i className="icon-paper-plane"></i> { t('API Settings') }</a>
+              </li>
+            </ul>
+            <div className="tab-content p-t-10">
+              <div id="user-settings" className="tab-pane active" role="tabpanel">
+                <UserSettings />
+              </div>
+              <div id="external-accounts" className="tab-pane" role="tabpanel">
+                {/* TODO GW-1029 create component */}
+              </div>
+              <div id="password-settings" className="tab-pane" role="tabpanel">
+                {/* TODO GW-1030 create component */}
+              </div>
+              <div id="apiToken" className="tab-pane" role="tabpanel">
+                {/* TODO GW-1031 create component */}
+              </div>
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+
+}
+
+const PersonalSettingsWrapper = (props) => {
+  return createSubscribedElement(PersonalSettings, props, [AppContainer]);
+};
+
+PersonalSettings.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};
+
+export default withTranslation()(PersonalSettingsWrapper);

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

@@ -0,0 +1,35 @@
+
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../UnstatedUtils';
+import AppContainer from '../../services/AppContainer';
+
+class UserSettings extends React.Component {
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <Fragment>
+        <div className="mb-5 container-fluid">
+          <h2 className="border-bottom">{t('Basic Info')}</h2>
+        </div>
+
+      </Fragment>
+    );
+  }
+
+}
+
+const UserSettingsWrapper = (props) => {
+  return createSubscribedElement(UserSettings, props, [AppContainer]);
+};
+
+UserSettings.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};
+
+export default withTranslation()(UserSettingsWrapper);

src/client/js/services/PersonalContainer.js

@@ -0,0 +1,35 @@
+import { Container } from 'unstated';
+
+import loggerFactory from '@alias/logger';
+
+import { toastError } from '../util/apiNotification';
+
+// eslint-disable-next-line no-unused-vars
+const logger = loggerFactory('growi:services:PersonalContainer');
+
+/**
+ * Service container for personal settings page (PersonalSettings.jsx)
+ * @extends {Container} unstated Container
+ */
+export default class PersonalContainer extends Container {
+
+  constructor(appContainer) {
+    super();
+
+    this.appContainer = appContainer;
+
+    this.state = {
+      hoge: 'huga',
+    };
+
+  }
+
+  /**
+   * Workaround for the mangling in production build to break constructor.name
+   */
+  static getClassName() {
+    return 'PersonalContainer';
+  }
+
+
+}

src/server/views/me/index.html

@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main">
+<div class="content-main" id="personal-setting">
 
   <ul class="nav nav-tabs">
     <li class="active"><a href="/me"><i class="icon-user"></i> {{ t('User Information') }}</a></li>