add update function

resource/locales/en-US/common/toaster.json

@@ -0,0 +1,3 @@
+{
+  "update_successed": "Succeeded to update {{target}} setting"
+}

resource/locales/ja/common/toaster.json

@@ -0,0 +1,3 @@
+{
+  "update_successed": "{{target}}設定を更新しました"
+}

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

@@ -3,24 +3,135 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
+import loggerFactory from '@alias/logger';
+
+import { toastSuccess, toastError } from '../../util/apiNotification';
 import { createSubscribedElement } from '../UnstatedUtils';
 
 import AppContainer from '../../services/AppContainer';
 import PersonalContainer from '../../services/PersonalContainer';
 
+const logger = loggerFactory('growi:basicInfoSettings');
+
 class BasicInfoSettings extends React.Component {
 
+  constructor(appContainer) {
+    super();
+
+    this.onClickSubmit = this.onClickSubmit.bind(this);
+  }
+
+  async onClickSubmit() {
+    const { t, personalContainer } = this.props;
+
+    try {
+      await personalContainer.updateBasicInfo();
+      toastSuccess(t('toaster:update_successed', { target: t('Basic Info') }));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  }
+
   render() {
-    const { t } = this.props;
+    const { t, personalContainer } = this.props;
 
     return (
       <Fragment>
-        <div className="form-group">
-          <label htmlFor="userForm[name]" className="col-sm-2 control-label">{ t('Name') }</label>
-          <div className="col-sm-4">
-            <input className="form-control" type="text" name="userForm[name]" value="{{ user.name }}" required />
+
+        <div className="row mb-3">
+          <label htmlFor="userForm[name]" className="col-sm-2 text-right">{t('Name')}</label>
+          <div className="col-sm-4 text-left">
+            <input
+              className="form-control"
+              type="text"
+              name="userForm[name]"
+              defaultValue={personalContainer.state.name}
+              onChange={(e) => { personalContainer.changeName(e.target.value) }}
+            />
           </div>
         </div>
+
+        <div className="row mb-3">
+          <label htmlFor="userForm[email]" className="col-sm-2 text-right">{t('Email')}</label>
+          <div className="col-sm-4 text-left">
+            <input
+              className="form-control"
+              type="text"
+              name="userForm[email]"
+              defaultValue={personalContainer.state.email}
+              onChange={(e) => { personalContainer.changeEmail(e.target.value) }}
+            />
+          </div>
+          <div className="col-sm-offset-2 col-sm-10">
+            <p className="help-block">
+              { t('page_register.form_help.email') }
+              <ul>
+                <li><code></code></li>
+              </ul>
+            </p>
+          </div>
+        </div>
+
+        <div className="row mb-3">
+          <label className="col-xs-2 text-right">{t('Disclose E-mail')}</label>
+          <div className="col-xs-4">
+            <div className="radio radio-primary radio-inline">
+              <input
+                type="radio"
+                id="radioEmailShow"
+                name="userForm[isEmailPublished]"
+                checked={personalContainer.state.isEmailPublished}
+                onClick={() => { personalContainer.changeIsEmailPublished(true) }}
+              />
+              <label htmlFor="radioEmailShow">{t('Show')}</label>
+            </div>
+            <div className="radio radio-primary radio-inline">
+              <input
+                type="radio"
+                id="radioEmailHide"
+                name="userForm[isEmailPublished]"
+                checked={!personalContainer.state.isEmailPublished}
+                onClick={() => { personalContainer.changeIsEmailPublished(false) }}
+              />
+              <label htmlFor="radioEmailHide">{t('Hide')}</label>
+            </div>
+          </div>
+        </div>
+
+        <div className="row mb-3">
+          <label className="col-xs-2 text-right">{t('Language')}</label>
+          <div className="col-xs-4">
+            <div className="radio radio-primary radio-inline">
+              <input
+                type="radio"
+                id="radioLangEn"
+                name="userForm[lang]"
+                checked={personalContainer.state.lang === 'English'}
+                onClick={() => { personalContainer.changeLang('English') }}
+              />
+              <label htmlFor="radioLangEn">{t('English')}</label>
+            </div>
+            <div className="radio radio-primary radio-inline">
+              <input
+                type="radio"
+                id="radioLangJa"
+                name="userForm[lang]"
+                checked={personalContainer.state.lang === 'Japanese'}
+                onClick={() => { personalContainer.changeLang('Japanese') }}
+              />
+              <label htmlFor="radioLangJa">{t('Japanese')}</label>
+            </div>
+          </div>
+        </div>
+
+        <div className="row my-3">
+          <div className="col-xs-offset-4 col-xs-5">
+            <button type="button" className="btn btn-primary" onClick={this.onClickSubmit}>{t('Update')}</button>
+          </div>
+        </div>
+
       </Fragment>
     );
   }

src/client/js/services/PersonalContainer.js

@@ -2,8 +2,6 @@ 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');
 
@@ -19,7 +17,10 @@ export default class PersonalContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
-      hoge: 'huga',
+      name: '',
+      email: '',
+      isEmailPublished: false,
+      lang: 'English',
     };
 
   }
@@ -31,5 +32,41 @@ export default class PersonalContainer extends Container {
     return 'PersonalContainer';
   }
 
+  /**
+   * Change name
+   */
+  changeName(inputValue) {
+    this.setState({ name: inputValue });
+  }
+
+  /**
+   * Change email
+   */
+  changeEmail(inputValue) {
+    this.setState({ email: inputValue });
+  }
+
+  /**
+   * Change isEmailPublished
+   */
+  changeIsEmailPublished(boolean) {
+    this.setState({ isEmailPublished: boolean });
+  }
+
+  /**
+   * Change lang
+   */
+  changeLang(lang) {
+    this.setState({ lang });
+  }
+
+  /**
+   * Update basic info
+   * @memberOf PersonalContainer
+   * @return {Array} basic info
+   */
+  async updateBasicInfo() {
+    // TODO GW-1036 create apiV3
+  }
 
 }