disable submit button

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

@@ -2,16 +2,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import loggerFactory from '@alias/logger';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminGeneralSecurityContainer from '../../../services/AdminGeneralSecurityContainer';
 import AdminOidcSecurityContainer from '../../../services/AdminOidcSecurityContainer';
 
+const logger = loggerFactory('growi:security:AdminGoogleSecurityContainer');
 
 class OidcSecurityManagement extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      retrieveError: null,
+    };
+
+    // this.onClickSubmit = this.onClickSubmit.bind(this);
+  }
+
+  async componentDidMount() {
+    const { adminOidcSecurityContainer } = this.props;
+
+    try {
+      await adminOidcSecurityContainer.retrieveSecurityData();
+    }
+    catch (err) {
+      toastError(err);
+      this.setState({ retrieveError: err });
+      logger.error(err);
+    }
+  }
+
   render() {
     const { t, adminGeneralSecurityContainer, adminOidcSecurityContainer } = this.props;
 
@@ -20,11 +46,11 @@ class OidcSecurityManagement extends React.Component {
       <React.Fragment>
 
         <h2 className="alert-anchor border-bottom">
-          { t('security_setting.OAuth.OIDC.name') } { t('security_setting.configuration') }
+          {t('security_setting.OAuth.OIDC.name')} {t('security_setting.configuration')}
         </h2>
 
         <div className="row mb-5">
-          <strong className="col-xs-3 text-right">{ t('security_setting.OAuth.OIDC.name') }</strong>
+          <strong className="col-xs-3 text-right">{t('security_setting.OAuth.OIDC.name')}</strong>
           <div className="col-xs-6 text-left">
             <div className="checkbox checkbox-success">
               <input
@@ -34,14 +60,14 @@ class OidcSecurityManagement extends React.Component {
                 onChange={() => { adminGeneralSecurityContainer.switchIsOidcEnabled() }}
               />
               <label htmlFor="isOidcEnabled">
-                { t('security_setting.OAuth.enable_oidc') }
+                {t('security_setting.OAuth.enable_oidc')}
               </label>
             </div>
           </div>
         </div>
 
         <div className="row mb-5">
-          <label className="col-xs-3 text-right">{ t('security_setting.callback_URL') }</label>
+          <label className="col-xs-3 text-right">{t('security_setting.callback_URL')}</label>
           <div className="col-xs-6">
             <input
               className="form-control"
@@ -49,227 +75,233 @@ class OidcSecurityManagement extends React.Component {
               value={adminOidcSecurityContainer.state.callbackUrl}
               readOnly
             />
-            <p className="help-block small">{ t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' }) }</p>
+            <p className="help-block small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
             {!adminGeneralSecurityContainer.state.appSiteUrl && (
-            <div className="alert alert-danger">
-              <i
-                className="icon-exclamation"
-                // eslint-disable-next-line max-len
-                dangerouslySetInnerHTML={{ __html: t('security_setting.alert_siteUrl_is_not_set', { link: `<a href="/admin/app">${t('App settings')}<i class="icon-login"></i></a>` }) }}
-              />
-            </div>
+              <div className="alert alert-danger">
+                <i
+                  className="icon-exclamation"
+                  // eslint-disable-next-line max-len
+                  dangerouslySetInnerHTML={{ __html: t('security_setting.alert_siteUrl_is_not_set', { link: `<a href="/admin/app">${t('App settings')}<i class="icon-login"></i></a>` }) }}
+                />
+              </div>
             )}
           </div>
         </div>
 
         {adminGeneralSecurityContainer.state.isOidcEnabled && (
-        <React.Fragment>
-
-          <div className="row mb-5">
-            <label htmlFor="oidcProviderName" className="col-xs-3 text-right">{ t('security_setting.providerName') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcProviderName"
-                value={adminOidcSecurityContainer.state.oidcProviderName}
-                onChange={e => adminOidcSecurityContainer.changeOidcProviderName(e.target.value)}
-              />
-            </div>
-          </div>
+          <React.Fragment>
 
-          <div className="row mb-5">
-            <label htmlFor="oidcIssuerHost" className="col-xs-3 text-right">{ t('security_setting.issuerHost') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcIssuerHost"
-                value={adminOidcSecurityContainer.state.oidcIssuerHost}
-                onChange={e => adminOidcSecurityContainer.changeOidcIssuerHost(e.target.value)}
-              />
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_ISSUER_HOST' }) }} />
-              </p>
+            <div className="row mb-5">
+              <label htmlFor="oidcProviderName" className="col-xs-3 text-right">{t('security_setting.providerName')}</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="oidcProviderName"
+                  value={adminOidcSecurityContainer.state.oidcProviderName}
+                  onChange={e => adminOidcSecurityContainer.changeOidcProviderName(e.target.value)}
+                />
+              </div>
             </div>
-          </div>
 
-          <div className="row mb-5">
-            <label htmlFor="oidcClientId" className="col-xs-3 text-right">{ t('security_setting.clientID') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcClientId"
-                value={adminOidcSecurityContainer.state.oidcClientId}
-                onChange={e => adminOidcSecurityContainer.changeOidcClientId(e.target.value)}
-              />
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_CLIENT_ID' }) }} />
-              </p>
+            <div className="row mb-5">
+              <label htmlFor="oidcIssuerHost" className="col-xs-3 text-right">{t('security_setting.issuerHost')}</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="oidcIssuerHost"
+                  value={adminOidcSecurityContainer.state.oidcIssuerHost}
+                  onChange={e => adminOidcSecurityContainer.changeOidcIssuerHost(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_ISSUER_HOST' }) }} />
+                </p>
+              </div>
             </div>
-          </div>
 
-          <div className="row mb-5">
-            <label htmlFor="oidcClientSecret" className="col-xs-3 text-right">{ t('security_setting.client_secret') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcClientSecret"
-                value={adminOidcSecurityContainer.state.oidcClientSecret}
-                onChange={e => adminOidcSecurityContainer.changeOidcClientSecret(e.target.value)}
-              />
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_CLIENT_SECRET' }) }} />
-              </p>
+            <div className="row mb-5">
+              <label htmlFor="oidcClientId" className="col-xs-3 text-right">{t('security_setting.clientID')}</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="oidcClientId"
+                  value={adminOidcSecurityContainer.state.oidcClientId}
+                  onChange={e => adminOidcSecurityContainer.changeOidcClientId(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_CLIENT_ID' }) }} />
+                </p>
+              </div>
             </div>
-          </div>
-
-          <h3 className="alert-anchor border-bottom">
-              Attribute Mapping ({ t('security_setting.optional') })
-          </h3>
 
-          <div className="row mb-5">
-            <label htmlFor="oidcAttrMapId" className="col-xs-3 text-right">Identifier</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcAttrMapId"
-                value={adminOidcSecurityContainer.state.oidcAttrMapId}
-                onChange={e => adminOidcSecurityContainer.changeOidcAttrMapId(e.target.value)}
-              />
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.id_detail') }} />
-              </p>
+            <div className="row mb-5">
+              <label htmlFor="oidcClientSecret" className="col-xs-3 text-right">{t('security_setting.client_secret')}</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="oidcClientSecret"
+                  value={adminOidcSecurityContainer.state.oidcClientSecret}
+                  onChange={e => adminOidcSecurityContainer.changeOidcClientSecret(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_CLIENT_SECRET' }) }} />
+                </p>
+              </div>
             </div>
-          </div>
 
-          <div className="row mb-5">
-            <label htmlFor="oidcAttrMapUserName" className="col-xs-3 text-right">{ t('username') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcAttrMapUserName"
-                value={adminOidcSecurityContainer.state.oidcAttrMapUserName}
-                onChange={e => adminOidcSecurityContainer.changeOidcAttrMapUserName(e.target.value)}
-              />
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.username_detail') }} />
-              </p>
-            </div>
-          </div>
+            <h3 className="alert-anchor border-bottom">
+              Attribute Mapping ({t('security_setting.optional')})
+            </h3>
 
-          <div className="row mb-5">
-            <label htmlFor="oidcAttrMapName" className="col-xs-3 text-right">{ t('Name') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcAttrMapName"
-                value={adminOidcSecurityContainer.state.oidcAttrMapName}
-                onChange={e => adminOidcSecurityContainer.changeOidcAttrMapName(e.target.value)}
-              />
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.name_detail') }} />
-              </p>
+            <div className="row mb-5">
+              <label htmlFor="oidcAttrMapId" className="col-xs-3 text-right">Identifier</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="oidcAttrMapId"
+                  value={adminOidcSecurityContainer.state.oidcAttrMapId}
+                  onChange={e => adminOidcSecurityContainer.changeOidcAttrMapId(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.id_detail') }} />
+                </p>
+              </div>
             </div>
-          </div>
 
-          <div className="row mb-5">
-            <label htmlFor="oidcAttrMapEmail" className="col-xs-3 text-right">{ t('Email') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                name="oidcAttrMapEmail"
-                value={adminOidcSecurityContainer.state.oidcAttrMapEmail}
-                onChange={e => adminOidcSecurityContainer.changeOidcAttrMapEmail(e.target.value)}
-              />
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.mapping_detail', { target: t('Email') }) }} />
-              </p>
+            <div className="row mb-5">
+              <label htmlFor="oidcAttrMapUserName" className="col-xs-3 text-right">{t('username')}</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="oidcAttrMapUserName"
+                  value={adminOidcSecurityContainer.state.oidcAttrMapUserName}
+                  onChange={e => adminOidcSecurityContainer.changeOidcAttrMapUserName(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.username_detail') }} />
+                </p>
+              </div>
             </div>
-          </div>
 
-          <div className="row mb-5">
-            <label className="col-xs-3 text-right">{ t('security_setting.callback_URL') }</label>
-            <div className="col-xs-6">
-              <input
-                className="form-control"
-                type="text"
-                value={adminOidcSecurityContainer.state.callbackUrl}
-                readOnly
-              />
-              <p className="help-block small">{ t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' }) }</p>
-              {!adminGeneralSecurityContainer.state.appSiteUrl && (
-              <div className="alert alert-danger">
-                <i
-                  className="icon-exclamation"
-                // eslint-disable-next-line max-len
-                  dangerouslySetInnerHTML={{ __html: t('security_setting.alert_siteUrl_is_not_set', { link: `<a href="/admin/app">${t('App settings')}<i class="icon-login"></i></a>` }) }}
+            <div className="row mb-5">
+              <label htmlFor="oidcAttrMapName" className="col-xs-3 text-right">{t('Name')}</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="oidcAttrMapName"
+                  value={adminOidcSecurityContainer.state.oidcAttrMapName}
+                  onChange={e => adminOidcSecurityContainer.changeOidcAttrMapName(e.target.value)}
                 />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.name_detail') }} />
+                </p>
               </div>
-            )}
             </div>
-          </div>
 
-          <div className="row mb-3">
-            <div className="col-xs-offset-3 col-xs-6 text-left">
-              <div className="checkbox checkbox-success">
+            <div className="row mb-5">
+              <label htmlFor="oidcAttrMapEmail" className="col-xs-3 text-right">{t('Email')}</label>
+              <div className="col-xs-6">
                 <input
-                  id="bindByUserName-oidc"
-                  type="checkbox"
-                  checked={adminOidcSecurityContainer.state.isSameUsernameTreatedAsIdenticalUser}
-                  onChange={() => { adminOidcSecurityContainer.switchIsSameUsernameTreatedAsIdenticalUser() }}
-                />
-                <label
-                  htmlFor="bindByUserName-oidc"
-                  dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical') }}
+                  className="form-control"
+                  type="text"
+                  name="oidcAttrMapEmail"
+                  value={adminOidcSecurityContainer.state.oidcAttrMapEmail}
+                  onChange={e => adminOidcSecurityContainer.changeOidcAttrMapEmail(e.target.value)}
                 />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.mapping_detail', { target: t('Email') }) }} />
+                </p>
               </div>
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical_warn') }} />
-              </p>
             </div>
-          </div>
 
-          <div className="row mb-5">
-            <div className="col-xs-offset-3 col-xs-6 text-left">
-              <div className="checkbox checkbox-success">
+            <div className="row mb-5">
+              <label className="col-xs-3 text-right">{t('security_setting.callback_URL')}</label>
+              <div className="col-xs-6">
                 <input
-                  id="bindByEmail-oidc"
-                  type="checkbox"
-                  checked={adminOidcSecurityContainer.state.isSameEmailTreatedAsIdenticalUser}
-                  onChange={() => { adminOidcSecurityContainer.switchIsSameEmailTreatedAsIdenticalUser() }}
-                />
-                <label
-                  htmlFor="bindByEmail-oidc"
-                  dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical') }}
+                  className="form-control"
+                  type="text"
+                  value={adminOidcSecurityContainer.state.callbackUrl}
+                  readOnly
                 />
+                <p className="help-block small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
+                {!adminGeneralSecurityContainer.state.appSiteUrl && (
+                  <div className="alert alert-danger">
+                    <i
+                      className="icon-exclamation"
+                      // eslint-disable-next-line max-len
+                      dangerouslySetInnerHTML={{ __html: t('security_setting.alert_siteUrl_is_not_set', { link: `<a href="/admin/app">${t('App settings')}<i class="icon-login"></i></a>` }) }}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="row mb-3">
+              <div className="col-xs-offset-3 col-xs-6 text-left">
+                <div className="checkbox checkbox-success">
+                  <input
+                    id="bindByUserName-oidc"
+                    type="checkbox"
+                    checked={adminOidcSecurityContainer.state.isSameUsernameTreatedAsIdenticalUser}
+                    onChange={() => { adminOidcSecurityContainer.switchIsSameUsernameTreatedAsIdenticalUser() }}
+                  />
+                  <label
+                    htmlFor="bindByUserName-oidc"
+                    dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical') }}
+                  />
+                </div>
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical_warn') }} />
+                </p>
+              </div>
+            </div>
+
+            <div className="row mb-5">
+              <div className="col-xs-offset-3 col-xs-6 text-left">
+                <div className="checkbox checkbox-success">
+                  <input
+                    id="bindByEmail-oidc"
+                    type="checkbox"
+                    checked={adminOidcSecurityContainer.state.isSameEmailTreatedAsIdenticalUser}
+                    onChange={() => { adminOidcSecurityContainer.switchIsSameEmailTreatedAsIdenticalUser() }}
+                  />
+                  <label
+                    htmlFor="bindByEmail-oidc"
+                    dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical') }}
+                  />
+                </div>
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical_warn') }} />
+                </p>
               </div>
-              <p className="help-block">
-                <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical_warn') }} />
-              </p>
             </div>
-          </div>
 
-        </React.Fragment>
+          </React.Fragment>
         )}
 
+        <div className="row my-3">
+          <div className="col-xs-offset-3 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' }}>
           <h4>
             <i className="icon-question" aria-hidden="true"></i>
-            <a href="#collapseHelpForOidcOauth" data-toggle="collapse">{ t('security_setting.OAuth.how_to.oidc') }</a>
+            <a href="#collapseHelpForOidcOauth" data-toggle="collapse">{t('security_setting.OAuth.how_to.oidc')}</a>
           </h4>
           <ol id="collapseHelpForOidcOauth" className="collapse">
-            <li>{ t('security_setting.OAuth.OIDC.register_1') }</li>
-            <li>{ t('security_setting.OAuth.OIDC.register_2') }</li>
-            <li>{ t('security_setting.OAuth.OIDC.register_3') }</li>
+            <li>{t('security_setting.OAuth.OIDC.register_1')}</li>
+            <li>{t('security_setting.OAuth.OIDC.register_2')}</li>
+            <li>{t('security_setting.OAuth.OIDC.register_3')}</li>
           </ol>
         </div>