Merge pull request #1431 from weseek/reactify-admin/create-apiV3-update-github-setting

Reactify admin/create api v3 update GitHub setting

resource/locales/en-US/translation.json

@@ -577,7 +577,8 @@
         "name": "GitHub OAuth",
         "register_1": "Access {{link}}",
         "register_2": "Register your OAuth App with \"Authorization callback URL\" as <code>{{url}}</code>",
-        "register_3": "Copy and paste your ClientID and Client Secret above"
+        "register_3": "Copy and paste your ClientID and Client Secret above",
+        "updated_github": "Succeeded to update GitHub OAuth setting"
       },
       "OIDC": {
         "name": "OpenID Connect",

resource/locales/ja/translation.json

@@ -572,7 +572,8 @@
         "name": "GitHub OAuth",
         "register_1": "{{link}} へアクセス",
         "register_2": "\"Authorization callback URL\"を<code>{{url}}</code>としてGrowiを登録",
-        "register_3": "上記フォームにクライアントIDとクライアントシークレットを入力"
+        "register_3": "上記フォームにクライアントIDとクライアントシークレットを入力",
+        "updated_github": "GitHub OAuth を更新しました"
       },
       "OIDC": {
         "name": "OpenID Connect",

src/client/js/components/Admin/Security/GithubSecuritySetting.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 AdminGithubSecurityContainer from '../../../services/AdminGithubSecurityConatainer';
 
+const logger = loggerFactory('growi:security:AdminGitHubSecurityContainer');
+
 class GithubSecurityManagement extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      retrieveError: null,
+    };
+
+    this.onClickSubmit = this.onClickSubmit.bind(this);
+  }
+
+  async componentDidMount() {
+    const { adminGithubSecurityContainer } = this.props;
+
+    try {
+      await adminGithubSecurityContainer.retrieveSecurityData();
+    }
+    catch (err) {
+      toastError(err);
+      this.setState({ retrieveError: err });
+      logger.error(err);
+    }
+  }
+
+  async onClickSubmit() {
+    const { t, adminGithubSecurityContainer } = this.props;
+
+    try {
+      await adminGithubSecurityContainer.updateGitHubSetting();
+      toastSuccess(t('security_setting.OAuth.GitHub.updated_github'));
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  }
+
   render() {
     const { t, adminGeneralSecurityContainer, adminGithubSecurityContainer } = this.props;
     return (
@@ -21,6 +61,12 @@ class GithubSecurityManagement extends React.Component {
           { t('security_setting.OAuth.GitHub.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.GitHub.name') }</strong>
           <div className="col-xs-6 text-left">
@@ -44,7 +90,7 @@ class GithubSecurityManagement extends React.Component {
             <input
               className="form-control"
               type="text"
-              value={adminGithubSecurityContainer.state.callbackUrl}
+              value={adminGithubSecurityContainer.state.appSiteUrl}
               readOnly
             />
             <p className="help-block small">{ t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' }) }</p>
@@ -87,7 +133,7 @@ class GithubSecurityManagement extends React.Component {
                   className="form-control"
                   type="text"
                   name="githubClientSecret"
-                  value={adminGithubSecurityContainer.state.githubClientSecret}
+                  defaultValue={adminGithubSecurityContainer.state.githubClientSecret}
                   onChange={e => adminGithubSecurityContainer.changeGithubClientSecret(e.target.value)}
                 />
                 <p className="help-block">
@@ -119,6 +165,12 @@ class GithubSecurityManagement extends React.Component {
           </React.Fragment>
         )}
 
+        <div className="row my-3">
+          <div className="col-xs-offset-4 col-xs-5">
+            <div className="btn btn-primary" disabled={this.state.retrieveError != null} onClick={this.onClickSubmit}>{ t('Update') }</div>
+          </div>
+        </div>
+
         <hr />
 
         <div style={{ minHeight: '300px' }}>

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

@@ -117,7 +117,7 @@ class TwitterSecurityManagement extends React.Component {
                   className="form-control"
                   type="text"
                   name="TwitterConsumerId"
-                  value={adminTwitterSecurityContainer.state.twitterConsumerKey}
+                  defaultValue={adminTwitterSecurityContainer.state.twitterConsumerKey}
                   onChange={e => adminTwitterSecurityContainer.changeTwitterConsumerKey(e.target.value)}
                 />
                 <p className="help-block">
@@ -133,7 +133,7 @@ class TwitterSecurityManagement extends React.Component {
                   className="form-control"
                   type="text"
                   name="TwitterConsumerSecret"
-                  value={adminTwitterSecurityContainer.state.twitterConsumerSecret}
+                  defaultValue={adminTwitterSecurityContainer.state.twitterConsumerSecret}
                   onChange={e => adminTwitterSecurityContainer.changeTwitterConsumerSecret(e.target.value)}
                 />
                 <p className="help-block">

src/client/js/services/AdminGithubSecurityConatainer.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:AdminGithubSecurityContainer');
@@ -17,19 +20,25 @@ export default class AdminGithubSecurityContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
-      // TODO GW-583 set value
-      appSiteUrl: '',
+      appSiteUrl: urljoin(pathUtils.removeTrailingSlash(appContainer.config.crowi.url), '/passport/github/callback'),
       githubClientId: '',
       githubClientSecret: '',
       isSameUsernameTreatedAsIdenticalUser: true,
     };
 
-    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 { githubOAuth } = response.data.securityParams;
+    this.setState({
+      githubClientId: githubOAuth.githubClientId || '',
+      githubClientSecret: githubOAuth.githubClientSecret || '',
+      isSameUsernameTreatedAsIdenticalUser: githubOAuth.isSameUsernameTreatedAsIdenticalUser || false,
+    });
   }
 
   /**
@@ -60,4 +69,23 @@ export default class AdminGithubSecurityContainer extends Container {
     this.setState({ isSameUsernameTreatedAsIdenticalUser: !this.state.isSameUsernameTreatedAsIdenticalUser });
   }
 
+  /**
+   * Update githubSetting
+   */
+  async updateGitHubSetting() {
+
+    const response = await this.appContainer.apiv3.put('/security-setting/github-oauth', {
+      githubClientId: this.state.githubClientId,
+      githubClientSecret: this.state.githubClientSecret,
+      isSameUsernameTreatedAsIdenticalUser: this.state.isSameUsernameTreatedAsIdenticalUser,
+    });
+
+    this.setState({
+      githubClientId: this.state.githubClientId,
+      githubClientSecret: this.state.githubClientSecret,
+      isSameUsernameTreatedAsIdenticalUser: this.state.isSameUsernameTreatedAsIdenticalUser,
+    });
+    return response;
+  }
+
 }

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

@@ -19,6 +19,11 @@ const validator = {
     body('hideRestrictedByOwner').isBoolean(),
     body('hideRestrictedByGroup').isBoolean(),
   ],
+  githubOAuth: [
+    body('githubClientId').isString(),
+    body('githubClientSecret').isString(),
+    body('isSameUsernameTreatedAsIdenticalUser').isBoolean(),
+  ],
   twitterOAuth: [
     body('twitterConsumerKey').isString(),
     body('twitterConsumerSecret').isString(),
@@ -63,12 +68,23 @@ const validator = {
  *                  hideRestrictedByGroup:
  *                    type: boolean
  *                    description: enable hide by group
+ *          GitHubOAuthSetting:
+ *            type:object
+ *              githubClientId:
+ *                type: string
+ *                description: key of comsumer
+ *              githubClientSecret:
+ *                type: string
+ *                description: password of comsumer
+ *              isSameUsernameTreatedAsIdenticalUser
+ *                type: boolean
+ *                description: local account automatically linked the email matched
  *          TwitterOAuthSetting:
  *            type:object
- *              consumerKey:
+ *              twitterConsumerKey:
  *                type: string
  *                description: key of comsumer
- *              consumerSecret:
+ *              twitterConsumerSecret:
  *                type: string
  *                description: password of comsumer
  *              isSameUsernameTreatedAsIdenticalUser
@@ -103,8 +119,14 @@ module.exports = (crowi) => {
 
     const securityParams = {
       generalAuth: {
+        isGithubOAuthEnabled: await crowi.configManager.getConfig('crowi', 'security:passport-github:isEnabled'),
         isTwitterOAuthEnabled: await crowi.configManager.getConfig('crowi', 'security:passport-twitter:isEnabled'),
       },
+      githubOAuth: {
+        githubClientId: await crowi.configManager.getConfig('crowi', 'security:passport-github:clientId'),
+        githubClientSecret: await crowi.configManager.getConfig('crowi', 'security:passport-github:clientSecret'),
+        isSameUsernameTreatedAsIdenticalUser: await crowi.configManager.getConfig('crowi', 'security:passport-github:isSameUsernameTreatedAsIdenticalUser'),
+      },
       twitterOAuth: {
         twitterConsumerKey: await crowi.configManager.getConfig('crowi', 'security:passport-twitter:consumerKey'),
         twitterConsumerSecret: await crowi.configManager.getConfig('crowi', 'security:passport-twitter:consumerSecret'),
@@ -176,6 +198,50 @@ module.exports = (crowi) => {
     }
   });
 
+  /**
+   * @swagger
+   *
+   *    /security-setting/github-oauth:
+   *      put:
+   *        tags: [SecuritySetting]
+   *        description: Update github OAuth
+   *        requestBody:
+   *          required: true
+   *          content:
+   *            application/json:
+   *              schema:
+   *                $ref: '#/components/schemas/SecurityParams/GitHubOAuthSetting'
+   *        responses:
+   *          200:
+   *            description: Succeeded to update function
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  $ref: '#/components/schemas/SecurityParams/GitHubOAuthSetting'
+   */
+  router.put('/github-oauth', loginRequiredStrictly, adminRequired, csrf, validator.githubOAuth, ApiV3FormValidator, async(req, res) => {
+    const requestParams = {
+      'security:passport-github:clientId': req.body.githubClientId,
+      'security:passport-github:clientSecret': req.body.githubClientSecret,
+      'security:passport-github:isSameUsernameTreatedAsIdenticalUser': req.body.isSameUsernameTreatedAsIdenticalUser,
+    };
+
+    try {
+      await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestParams);
+      const securitySettingParams = {
+        githubClientId: await crowi.configManager.getConfig('crowi', 'security:passport-github:clientId'),
+        githubClientSecret: await crowi.configManager.getConfig('crowi', 'security:passport-github:clientSecret'),
+        isSameUsernameTreatedAsIdenticalUser: await crowi.configManager.getConfig('crowi', 'security:passport-github:isSameUsernameTreatedAsIdenticalUser'),
+      };
+      return res.apiv3({ securitySettingParams });
+    }
+    catch (err) {
+      const msg = 'Error occurred in updating githubOAuth';
+      logger.error('Error', err);
+      return res.apiv3Err(new ErrorV3(msg, 'update-githubOAuth-failed'));
+    }
+  });
+
   /**
    * @swagger
    *