add toaster

resource/locales/en-US/translation.json

@@ -568,7 +568,8 @@
         "register_2": "Sign in Twitter",
         "register_3": "Create Credentials → OAuth client ID → Select \"Web application\"",
         "register_4": "Register your OAuth App with one of Authorized redirect URIs as <code>{{url}}</code>",
-        "register_5": "Copy and paste your ClientID and Client Secret above"
+        "register_5": "Copy and paste your ClientID and Client Secret above",
+        "updated_twitter": "Succeeded to update Twitter OAuth setting"
       },
       "GitHub": {
         "enable_github":"enable GitHub OAuth",

resource/locales/ja/translation.json

@@ -563,7 +563,8 @@
         "register_2": "Twitterにサインイン",
         "register_3": "Create New Appをクリック → Application Detailsの各項目を入力",
         "register_4": "Create your Twitter Applicationで作成",
-        "register_5": "上記フォームにクライアントIDとクライアントシークレットを入力"
+        "register_5": "上記フォームにクライアントIDとクライアントシークレットを入力",
+        "updated_twitter": "Twitter OAuth を更新しました"
       },
       "GitHub": {
         "enable_github":"GitHub OAuth を有効にする",

src/client/js/components/Admin/Security/TwitterSecuritySetting.jsx

@@ -2,15 +2,39 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import loggerFactory from '@alias/logger';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminGeneralSecurityContainer from '../../../services/AdminGeneralSecurityContainer';
 import AdminTwitterSecurityContainer from '../../../services/AdminTwitterSecurityContainer';
 
+const logger = loggerFactory('growi:security:AdminTwitterSecurityContainer');
+
+
 class TwitterSecurityManagement extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.onClickSubmit = this.onClickSubmit.bind(this);
+  }
+
+  async onClickSubmit() {
+    const { t } = this.props;
+
+    try {
+      await this.props.adminTwitterSecurityContainer.updateTwitterSetting();
+      toastSuccess(t('security_setting.OAuth.Twitter.updated_twitter'));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  }
+
   render() {
     const { t, adminGeneralSecurityContainer, adminTwitterSecurityContainer } = this.props;
     return (
@@ -119,6 +143,12 @@ class TwitterSecurityManagement extends React.Component {
           </React.Fragment>
         )}
 
+        <div className="form-group my-3">
+          <div className="col-xs-offset-4 col-xs-5">
+            <div className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</div>
+          </div>
+        </div>
+
         <hr />
 
         <div style={{ minHeight: '300px' }}>

src/client/js/services/AdminTwitterSecurityContainer.js

@@ -69,4 +69,25 @@ export default class AdminTwitterSecurityContainer extends Container {
     this.setState({ isSameUsernameTreatedAsIdenticalUser: !this.state.isSameUsernameTreatedAsIdenticalUser });
   }
 
+  /**
+   * Update twitterSetting
+   */
+  async updateTwitterSetting() {
+
+    console.log('ここはコンテナー');
+
+    // const response = await this.appContainer.apiv3.put('/security-setting/twitterOAuth', {
+    //   twitterConsumerId: this.state.twitterConsumerId,
+    //   twitterConsumerSecret: this.state.twitterConsumerSecret,
+    //   isSameUsernameTreatedAsIdenticalUser: this.state.isSameUsernameTreatedAsIdenticalUser,
+    // });
+
+    // this.setState({
+    //   twitterConsumerId: this.state.twitterConsumerId,
+    //   twitterConsumerSecret: this.state.twitterConsumerSecret,
+    //   isSameUsernameTreatedAsIdenticalUser: this.state.isSameUsernameTreatedAsIdenticalUser,
+    // });
+    // return response;
+  }
+
 }