Merge pull request #1428 from weseek/reactify-admin/create-apiV3-update-twitter-setting

Reactify admin/create api v3 update twitter setting

resource/locales/en-US/translation.json

@@ -569,7 +569,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

@@ -564,7 +564,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,55 @@
 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.state = {
+      retrieveError: null,
+    };
+
+    this.onClickSubmit = this.onClickSubmit.bind(this);
+  }
+
+  async componentDidMount() {
+    const { adminTwitterSecurityContainer } = this.props;
+
+    try {
+      await adminTwitterSecurityContainer.retrieveSecurityData();
+    }
+    catch (err) {
+      toastError(err);
+      this.setState({ retrieveError: err });
+      logger.error(err);
+    }
+  }
+
+  async onClickSubmit() {
+    const { t, adminTwitterSecurityContainer } = this.props;
+
+    try {
+      await 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 (
@@ -21,6 +61,12 @@ class TwitterSecurityManagement extends React.Component {
           { t('security_setting.OAuth.Twitter.name') } { t('security_setting.configuration') }
         </h2>
 
+        {this.state.retrieveError != null && (
+        <div className="alert alert-danger">
+          <p>{t('Error occurred')} : {this.state.err}</p>
+        </div>
+        )}
+
         <div className="row mb-5">
           <strong className="col-xs-3 text-right">{ t('security_setting.OAuth.Twitter.name') }</strong>
           <div className="col-xs-6 text-left">
@@ -71,8 +117,8 @@ class TwitterSecurityManagement extends React.Component {
                   className="form-control"
                   type="text"
                   name="TwitterConsumerId"
-                  value={adminTwitterSecurityContainer.state.TwitterConsumerId}
-                  onChange={e => adminTwitterSecurityContainer.changeTwitterConsumerId(e.target.value)}
+                  value={adminTwitterSecurityContainer.state.twitterConsumerKey}
+                  onChange={e => adminTwitterSecurityContainer.changeTwitterConsumerKey(e.target.value)}
                 />
                 <p className="help-block">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_TWITTER_CONSUMER_KEY' }) }} />
@@ -87,7 +133,7 @@ class TwitterSecurityManagement extends React.Component {
                   className="form-control"
                   type="text"
                   name="TwitterConsumerSecret"
-                  value={adminTwitterSecurityContainer.state.TwitterConsumerSecret}
+                  value={adminTwitterSecurityContainer.state.twitterConsumerSecret}
                   onChange={e => adminTwitterSecurityContainer.changeTwitterConsumerSecret(e.target.value)}
                 />
                 <p className="help-block">
@@ -119,6 +165,12 @@ class TwitterSecurityManagement extends React.Component {
           </React.Fragment>
         )}
 
+        <div className="row my-3">
+          <div className="col-xs-offset-4 col-xs-5">
+            <button type="button" className="btn btn-primary" disabled={this.state.retrieveError != null} onClick={this.onClickSubmit}>{ t('Update') }</button>
+          </div>
+        </div>
+
         <hr />
 
         <div style={{ minHeight: '300px' }}>

src/client/js/services/AdminGeneralSecurityContainer.js

@@ -24,7 +24,7 @@ export default class AdminGeneralSecurityContainer extends Container {
       isHideRestrictedByOwner: true,
       isHideRestrictedByGroup: true,
       useOnlyEnvVarsForSomeOptions: true,
-      appSiteUrl: '',
+      appSiteUrl: appContainer.config.crowi.url || '',
       isLocalEnabled: true,
       registrationMode: 'open',
       registrationWhiteList: '',

src/client/js/services/AdminTwitterSecurityContainer.js

@@ -1,6 +1,9 @@
 import { Container } from 'unstated';
 
 import loggerFactory from '@alias/logger';
+import { pathUtils } from 'growi-commons';
+
+import urljoin from 'url-join';
 
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:security:AdminTwitterSecurityContainer');
@@ -17,19 +20,25 @@ export default class AdminTwitterSecurityContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
-      // TODO GW-583 set value
-      appSiteUrl: '',
-      TwitterConsumerId: '',
-      TwitterConsumerSecret: '',
-      isSameUsernameTreatedAsIdenticalUser: true,
+      callbackUrl: urljoin(pathUtils.removeTrailingSlash(appContainer.config.crowi.url), '/passport/twitter/callback'),
+      twitterConsumerKey: '',
+      twitterConsumerSecret: '',
+      isSameUsernameTreatedAsIdenticalUser: false,
     };
 
-    this.init();
-
   }
 
-  init() {
-    // TODO GW-583 fetch config value with api
+  /**
+   * retrieve security data
+   */
+  async retrieveSecurityData() {
+    const response = await this.appContainer.apiv3.get('/security-setting/');
+    const { twitterOAuth } = response.data.securityParams;
+    this.setState({
+      twitterConsumerKey: twitterOAuth.twitterConsumerKey || '',
+      twitterConsumerSecret: twitterOAuth.twitterConsumerSecret || '',
+      isSameUsernameTreatedAsIdenticalUser: twitterOAuth.isSameUsernameTreatedAsIdenticalUser || false,
+    });
   }
 
   /**
@@ -40,17 +49,17 @@ export default class AdminTwitterSecurityContainer extends Container {
   }
 
   /**
-   * Change TwitterConsumerId
+   * Change twitterConsumerKey
    */
-  changeTwitterConsumerId(value) {
-    this.setState({ TwitterConsumerId: value });
+  changeTwitterConsumerKey(value) {
+    this.setState({ twitterConsumerKey: value });
   }
 
   /**
-   * Change TwitterConsumerSecret
+   * Change twitterConsumerSecret
    */
   changeTwitterConsumerSecret(value) {
-    this.setState({ TwitterConsumerSecret: value });
+    this.setState({ twitterConsumerSecret: value });
   }
 
   /**
@@ -60,4 +69,23 @@ export default class AdminTwitterSecurityContainer extends Container {
     this.setState({ isSameUsernameTreatedAsIdenticalUser: !this.state.isSameUsernameTreatedAsIdenticalUser });
   }
 
+  /**
+   * Update twitterSetting
+   */
+  async updateTwitterSetting() {
+
+    const response = await this.appContainer.apiv3.put('/security-setting/twitter-oauth', {
+      twitterConsumerKey: this.state.twitterConsumerKey,
+      twitterConsumerSecret: this.state.twitterConsumerSecret,
+      isSameUsernameTreatedAsIdenticalUser: this.state.isSameUsernameTreatedAsIdenticalUser,
+    });
+
+    this.setState({
+      twitterConsumerKey: this.state.twitterConsumerKey,
+      twitterConsumerSecret: this.state.twitterConsumerSecret,
+      isSameUsernameTreatedAsIdenticalUser: this.state.isSameUsernameTreatedAsIdenticalUser,
+    });
+    return response;
+  }
+
 }

src/server/routes/apiv3/security-setting.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /* eslint-disable no-unused-vars */
 const loggerFactory = require('@alias/logger');
 
@@ -18,6 +19,11 @@ const validator = {
     body('hideRestrictedByOwner').isBoolean(),
     body('hideRestrictedByGroup').isBoolean(),
   ],
+  twitterOAuth: [
+    body('twitterConsumerKey').isString(),
+    body('twitterConsumerSecret').isString(),
+    body('isSameUsernameTreatedAsIdenticalUser').isBoolean(),
+  ],
 };
 
 /**
@@ -57,8 +63,18 @@ const validator = {
  *                  hideRestrictedByGroup:
  *                    type: boolean
  *                    description: enable hide by group
+ *          TwitterOAuthSetting:
+ *            type:object
+ *              consumerKey:
+ *                type: string
+ *                description: key of comsumer
+ *              consumerSecret:
+ *                type: string
+ *                description: password of comsumer
+ *              isSameUsernameTreatedAsIdenticalUser
+ *                type: boolean
+ *                description: local account automatically linked the email matched
  */
-
 module.exports = (crowi) => {
   const loginRequiredStrictly = require('../../middleware/login-required')(crowi);
   const adminRequired = require('../../middleware/admin-required')(crowi);
@@ -66,6 +82,39 @@ module.exports = (crowi) => {
 
   const { ApiV3FormValidator } = crowi.middlewares;
 
+  /**
+   * @swagger
+   *
+   *    /security-setting/:
+   *      get:
+   *        tags: [SecuritySetting]
+   *        description: Get security paramators
+   *        responses:
+   *          200:
+   *            description: params of security
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    securityParams:
+   *                      $ref: '#/components/schemas/SecurityParams'
+   */
+  router.get('/', loginRequiredStrictly, adminRequired, async(req, res) => {
+
+    const securityParams = {
+      generalAuth: {
+        isTwitterOAuthEnabled: await crowi.configManager.getConfig('crowi', 'security:passport-twitter:isEnabled'),
+      },
+      twitterOAuth: {
+        twitterConsumerKey: await crowi.configManager.getConfig('crowi', 'security:passport-twitter:consumerKey'),
+        twitterConsumerSecret: await crowi.configManager.getConfig('crowi', 'security:passport-twitter:consumerSecret'),
+        isSameUsernameTreatedAsIdenticalUser: await crowi.configManager.getConfig('crowi', 'security:passport-twitter:isSameUsernameTreatedAsIdenticalUser'),
+      },
+    };
+
+    return res.apiv3({ securityParams });
+  });
+
   /**
    * @swagger
    *
@@ -127,5 +176,49 @@ module.exports = (crowi) => {
     }
   });
 
+  /**
+   * @swagger
+   *
+   *    /security-setting/twitter-oauth:
+   *      put:
+   *        tags: [SecuritySetting]
+   *        description: Update twitter OAuth
+   *        requestBody:
+   *          required: true
+   *          content:
+   *            application/json:
+   *              schema:
+   *                $ref: '#/components/schemas/SecurityParams/TwitterOAuthSetting'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update function
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/SecurityParams/TwitterOAuthSetting'
+   */
+  router.put('/twitter-oauth', loginRequiredStrictly, adminRequired, csrf, validator.twitterOAuth, ApiV3FormValidator, async(req, res) => {
+    const requestParams = {
+      'security:passport-twitter:consumerKey': req.body.twitterConsumerKey,
+      'security:passport-twitter:consumerSecret': req.body.twitterConsumerSecret,
+      'security:passport-twitter:isSameUsernameTreatedAsIdenticalUser': req.body.isSameUsernameTreatedAsIdenticalUser,
+    };
+
+    try {
+      await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestParams);
+      const securitySettingParams = {
+        twitterConsumerId: await crowi.configManager.getConfig('crowi', 'security:passport-twitter:consumerKey'),
+        twitterConsumerSecret: await crowi.configManager.getConfig('crowi', 'security:passport-twitter:consumerSecret'),
+        isSameUsernameTreatedAsIdenticalUser: await crowi.configManager.getConfig('crowi', 'security:passport-twitter:isSameUsernameTreatedAsIdenticalUser'),
+      };
+      return res.apiv3({ securitySettingParams });
+    }
+    catch (err) {
+      const msg = 'Error occurred in updating twitterOAuth';
+      logger.error('Error', err);
+      return res.apiv3Err(new ErrorV3(msg, 'update-twitterOAuth-failed'));
+    }
+  });
+
   return router;
 };