retrive when didMount

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

@@ -18,14 +18,31 @@ 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 } = this.props;
+    const { t, adminGithubSecurityContainer } = this.props;
 
     try {
-      await this.props.adminGithubSecurityContainer.updateGitHubSetting();
+      await adminGithubSecurityContainer.updateGitHubSetting();
       toastSuccess(t('security_setting.OAuth.GitHub.updated_github'));
     }
     catch (err) {
@@ -44,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">
@@ -110,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">
@@ -144,7 +167,7 @@ class GithubSecurityManagement extends React.Component {
 
         <div className="row my-3">
           <div className="col-xs-offset-4 col-xs-5">
-            <div className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</div>
+            <div className="btn btn-primary" disabled={this.state.retrieveError != null} onClick={this.onClickSubmit}>{ t('Update') }</div>
           </div>
         </div>
 

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

@@ -3,6 +3,8 @@ 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');
 
@@ -18,26 +20,24 @@ export default class AdminGithubSecurityContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
-      appSiteUrl: `${pathUtils.removeTrailingSlash(appContainer.config.crowi.url)}/passport/github/callback`,
+      appSiteUrl: urljoin(pathUtils.removeTrailingSlash(appContainer.config.crowi.url), '/passport/github/callback'),
       githubClientId: '',
       githubClientSecret: '',
       isSameUsernameTreatedAsIdenticalUser: true,
     };
 
-    this.init();
-
   }
 
   /**
    * retrieve security data
    */
-  async init() {
+  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,
+      githubClientId: githubOAuth.githubClientId || '',
+      githubClientSecret: githubOAuth.githubClientSecret || '',
+      isSameUsernameTreatedAsIdenticalUser: githubOAuth.isSameUsernameTreatedAsIdenticalUser || false,
     });
   }
 

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

@@ -123,9 +123,9 @@ module.exports = (crowi) => {
         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') || false,
+        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'),