apply all setting

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

@@ -35,10 +35,11 @@ class BasicSecurityManagement extends React.Component {
   }
 
   async onClickSubmit() {
-    const { t, adminBasicSecurityContainer } = this.props;
+    const { t, adminBasicSecurityContainer, adminGeneralSecurityContainer } = this.props;
 
     try {
       await adminBasicSecurityContainer.updateBasicSetting();
+      await adminGeneralSecurityContainer.retrieveSetupStratedies();
       toastSuccess(t('security_setting.Basic.updated_basic'));
     }
     catch (err) {
@@ -48,6 +49,7 @@ class BasicSecurityManagement extends React.Component {
 
   render() {
     const { t, adminGeneralSecurityContainer, adminBasicSecurityContainer } = this.props;
+    const { isBasicEnabled } = adminGeneralSecurityContainer.state;
 
     if (this.state.isRetrieving) {
       return null;
@@ -56,7 +58,7 @@ class BasicSecurityManagement extends React.Component {
       <React.Fragment>
 
         <h2 className="alert-anchor border-bottom">
-          { t('security_setting.Basic.name') } { t('security_setting.configuration') }
+          { t('security_setting.Basic.name') }
         </h2>
 
         {this.state.retrieveError != null && (
@@ -66,7 +68,9 @@ class BasicSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <strong className="col-xs-3 text-right">{ t('security_setting.Basic.name') }</strong>
+          <div className="col-xs-3 my-3 text-right">
+            <strong>{t('security_setting.Basic.name')}</strong>
+          </div>
           <div className="col-xs-6 text-left">
             <div className="checkbox checkbox-success">
               <input
@@ -85,10 +89,12 @@ class BasicSecurityManagement extends React.Component {
                 { t('security_setting.Basic.desc_2')}
               </small>
             </p>
+            {(!adminGeneralSecurityContainer.state.setupStrategies.includes('basic') && isBasicEnabled)
+            && <div className="label label-warning">{t('security_setting.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 
-        {adminGeneralSecurityContainer.state.isBasicEnabled && (
+        {isBasicEnabled && (
         <React.Fragment>
           <div className="row mb-5">
             <div className="col-xs-offset-3 col-xs-6 text-left">

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

@@ -35,10 +35,11 @@ class GitHubSecurityManagement extends React.Component {
   }
 
   async onClickSubmit() {
-    const { t, adminGitHubSecurityContainer } = this.props;
+    const { t, adminGitHubSecurityContainer, adminGeneralSecurityContainer } = this.props;
 
     try {
       await adminGitHubSecurityContainer.updateGitHubSetting();
+      await adminGeneralSecurityContainer.retrieveSetupStratedies();
       toastSuccess(t('security_setting.OAuth.GitHub.updated_github'));
     }
     catch (err) {
@@ -48,6 +49,7 @@ class GitHubSecurityManagement extends React.Component {
 
   render() {
     const { t, adminGeneralSecurityContainer, adminGitHubSecurityContainer } = this.props;
+    const { isGitHubEnabled } = adminGeneralSecurityContainer.state;
 
     if (this.state.isRetrieving) {
       return null;
@@ -57,7 +59,7 @@ class GitHubSecurityManagement extends React.Component {
       <React.Fragment>
 
         <h2 className="alert-anchor border-bottom">
-          {t('security_setting.OAuth.GitHub.name')} {t('security_setting.configuration')}
+          {t('security_setting.OAuth.GitHub.name')}
         </h2>
 
         {this.state.retrieveError != null && (
@@ -67,7 +69,9 @@ class GitHubSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <strong className="col-xs-3 text-right">{t('security_setting.OAuth.GitHub.name')}</strong>
+          <div className="col-xs-3 my-3 text-right">
+            <strong>{t('security_setting.OAuth.GitHub.name')}</strong>
+          </div>
           <div className="col-xs-6 text-left">
             <div className="checkbox checkbox-success">
               <input
@@ -80,6 +84,8 @@ class GitHubSecurityManagement extends React.Component {
                 {t('security_setting.OAuth.GitHub.enable_github')}
               </label>
             </div>
+            {(!adminGeneralSecurityContainer.state.setupStrategies.includes('github') && isGitHubEnabled)
+              && <div className="label label-warning">{t('security_setting.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 
@@ -106,9 +112,11 @@ class GitHubSecurityManagement extends React.Component {
         </div>
 
 
-        {adminGeneralSecurityContainer.state.isGitHubEnabled && (
+        {isGitHubEnabled && (
           <React.Fragment>
 
+            <h3 className="border-bottom">{t('security_setting.configuration')}</h3>
+
             <div className="row mb-5">
               <label htmlFor="githubClientId" className="col-xs-3 text-right">{t('security_setting.clientID')}</label>
               <div className="col-xs-6">

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

@@ -35,10 +35,11 @@ class GoogleSecurityManagement extends React.Component {
   }
 
   async onClickSubmit() {
-    const { t, adminGoogleSecurityContainer } = this.props;
+    const { t, adminGoogleSecurityContainer, adminGeneralSecurityContainer } = this.props;
 
     try {
       await adminGoogleSecurityContainer.updateGoogleSetting();
+      await adminGeneralSecurityContainer.retrieveSetupStratedies();
       toastSuccess(t('security_setting.OAuth.Google.updated_google'));
     }
     catch (err) {
@@ -48,6 +49,7 @@ class GoogleSecurityManagement extends React.Component {
 
   render() {
     const { t, adminGeneralSecurityContainer, adminGoogleSecurityContainer } = this.props;
+    const { isGoogleEnabled } = adminGeneralSecurityContainer.state;
 
     if (this.state.isRetrieving) {
       return null;
@@ -57,7 +59,7 @@ class GoogleSecurityManagement extends React.Component {
       <React.Fragment>
 
         <h2 className="alert-anchor border-bottom">
-          {t('security_setting.OAuth.Google.name')} {t('security_setting.configuration')}
+          {t('security_setting.OAuth.Google.name')}
         </h2>
 
         {this.state.retrieveError != null && (
@@ -67,7 +69,9 @@ class GoogleSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <strong className="col-xs-3 text-right">{t('security_setting.OAuth.Google.name')}</strong>
+          <div className="col-xs-3 my-3 text-right">
+            <strong>{t('security_setting.OAuth.Google.name')}</strong>
+          </div>
           <div className="col-xs-6 text-left">
             <div className="checkbox checkbox-success">
               <input
@@ -80,6 +84,8 @@ class GoogleSecurityManagement extends React.Component {
                 {t('security_setting.OAuth.Google.enable_google')}
               </label>
             </div>
+            {(!adminGeneralSecurityContainer.state.setupStrategies.includes('google') && isGoogleEnabled)
+              && <div className="label label-warning">{t('security_setting.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 
@@ -106,9 +112,11 @@ class GoogleSecurityManagement extends React.Component {
         </div>
 
 
-        {adminGeneralSecurityContainer.state.isGoogleEnabled && (
+        {isGoogleEnabled && (
           <React.Fragment>
 
+            <h3 className="border-bottom">{t('security_setting.configuration')}</h3>
+
             <div className="row mb-5">
               <label htmlFor="googleClientId" className="col-xs-3 text-right">{t('security_setting.clientID')}</label>
               <div className="col-xs-6">

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

@@ -39,10 +39,11 @@ class LdapSecuritySetting extends React.Component {
   }
 
   async onClickSubmit() {
-    const { t, adminLdapSecurityContainer } = this.props;
+    const { t, adminLdapSecurityContainer, adminGeneralSecurityContainer } = this.props;
 
     try {
       await adminLdapSecurityContainer.updateLdapSetting();
+      await adminGeneralSecurityContainer.retrieveSetupStratedies();
       toastSuccess(t('security_setting.ldap.updated_ldap'));
     }
     catch (err) {
@@ -69,11 +70,13 @@ class LdapSecuritySetting extends React.Component {
       <React.Fragment>
 
         <h2 className="alert-anchor border-bottom">
-          LDAP {t('security_setting.configuration')}
+          LDAP
         </h2>
 
         <div className="row mb-5">
-          <strong className="col-xs-3 text-right">Use LDAP</strong>
+          <div className="col-xs-3 my-3 text-right">
+            <strong>Use LDAP</strong>
+          </div>
           <div className="col-xs-6 text-left">
             <div className="checkbox checkbox-success">
               <input
@@ -86,12 +89,17 @@ class LdapSecuritySetting extends React.Component {
                 {t('security_setting.ldap.enable_ldap')}
               </label>
             </div>
+            {(!adminGeneralSecurityContainer.state.setupStrategies.includes('ldap') && isLdapEnabled)
+              && <div className="label label-warning">{t('security_setting.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 
 
         {isLdapEnabled && (
           <React.Fragment>
+
+            <h3 className="border-bottom">{t('security_setting.configuration')}</h3>
+
             <div className="row mb-5">
               <label htmlFor="serverUrl" className="col-xs-3 control-label text-right">Server URL</label>
               <div className="col-xs-6">
@@ -384,20 +392,23 @@ class LdapSecuritySetting extends React.Component {
                 </p>
               </div>
             </div>
+            <div className="row my-3">
+              <div className="col-xs-offset-3 col-xs-5">
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  disabled={adminLdapSecurityContainer.state.retrieveError != null}
+                  onClick={this.onClickSubmit}
+                >
+                  {t('Update')}
+                </button>
+                <button type="button" className="btn btn-default ml-2" onClick={this.openLdapAuthTestModal}>{t('security_setting.ldap.test_config')}</button>
+              </div>
+            </div>
 
           </React.Fragment>
         )}
 
-        <div className="row my-3">
-          <div className="col-xs-offset-3 col-xs-5">
-            <button type="button" className="btn btn-primary" disabled={adminLdapSecurityContainer.state.retrieveError != null} onClick={this.onClickSubmit}>
-              {t('Update')}
-            </button>
-            {adminGeneralSecurityContainer.state.isLdapEnabled
-              && <button type="button" className="btn btn-default ml-2" onClick={this.openLdapAuthTestModal}>{t('security_setting.ldap.test_config')}</button>
-            }
-          </div>
-        </div>
 
         <LdapAuthTestModal isOpen={this.state.isLdapAuthTestModalShown} onClose={this.closeLdapAuthTestModal} />
 

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

@@ -96,7 +96,7 @@ class LocalSecuritySetting extends React.Component {
         </div>
 
         {isLocalEnabled && (
-          <div>
+          <React.Fragment>
 
             <h3 className="border-bottom">{t('security_setting.configuration')}</h3>
 
@@ -178,7 +178,7 @@ class LocalSecuritySetting extends React.Component {
                 </button>
               </div>
             </div>
-          </div>
+          </React.Fragment>
         )}
 
 

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

@@ -35,10 +35,11 @@ class OidcSecurityManagement extends React.Component {
   }
 
   async onClickSubmit() {
-    const { t, adminOidcSecurityContainer } = this.props;
+    const { t, adminOidcSecurityContainer, adminGeneralSecurityContainer } = this.props;
 
     try {
       await adminOidcSecurityContainer.updateOidcSetting();
+      await adminGeneralSecurityContainer.retrieveSetupStratedies();
       toastSuccess(t('security_setting.OAuth.OIDC.updated_oidc'));
     }
     catch (err) {
@@ -48,6 +49,7 @@ class OidcSecurityManagement extends React.Component {
 
   render() {
     const { t, adminGeneralSecurityContainer, adminOidcSecurityContainer } = this.props;
+    const { isOidcEnabled } = adminGeneralSecurityContainer.state;
 
     if (this.state.isRetrieving) {
       return null;
@@ -58,11 +60,13 @@ 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')}
         </h2>
 
         <div className="row mb-5">
-          <strong className="col-xs-3 text-right">{t('security_setting.OAuth.OIDC.name')}</strong>
+          <div className="col-xs-3 my-3 text-right">
+            <strong>{t('security_setting.OAuth.OIDC.name')}</strong>
+          </div>
           <div className="col-xs-6 text-left">
             <div className="checkbox checkbox-success">
               <input
@@ -75,6 +79,8 @@ class OidcSecurityManagement extends React.Component {
                 {t('security_setting.OAuth.enable_oidc')}
               </label>
             </div>
+            {(!adminGeneralSecurityContainer.state.setupStrategies.includes('oidc') && isOidcEnabled)
+              && <div className="label label-warning">{t('security_setting.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 
@@ -100,9 +106,11 @@ class OidcSecurityManagement extends React.Component {
           </div>
         </div>
 
-        {adminGeneralSecurityContainer.state.isOidcEnabled && (
+        {isOidcEnabled && (
           <React.Fragment>
 
+            <h3 className="border-bottom">{t('security_setting.configuration')}</h3>
+
             <div className="row mb-5">
               <label htmlFor="oidcProviderName" className="col-xs-3 text-right">{t('security_setting.providerName')}</label>
               <div className="col-xs-6">
@@ -294,16 +302,21 @@ class OidcSecurityManagement extends React.Component {
               </div>
             </div>
 
+            <div className="row my-3">
+              <div className="col-xs-offset-3 col-xs-5">
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  disabled={adminOidcSecurityContainer.state.retrieveError != null}
+                  onClick={this.onClickSubmit}
+                >
+                  {t('Update')}
+                </button>
+              </div>
+            </div>
           </React.Fragment>
         )}
 
-        <div className="row my-3">
-          <div className="col-xs-offset-3 col-xs-5">
-            <button type="button" className="btn btn-primary" disabled={adminOidcSecurityContainer.state.retrieveError != null} onClick={this.onClickSubmit}>
-              {t('Update')}
-            </button>
-          </div>
-        </div>
 
         <hr />
 

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

@@ -55,10 +55,11 @@ class SamlSecurityManagement extends React.Component {
   }
 
   async onClickSubmit() {
-    const { t, adminSamlSecurityContainer } = this.props;
+    const { t, adminSamlSecurityContainer, adminGeneralSecurityContainer } = this.props;
 
     try {
       await adminSamlSecurityContainer.updateSamlSetting();
+      await adminGeneralSecurityContainer.retrieveSetupStratedies();
       toastSuccess(t('security_setting.SAML.updated_saml'));
     }
     catch (err) {
@@ -69,6 +70,7 @@ class SamlSecurityManagement extends React.Component {
   render() {
     const { t, adminGeneralSecurityContainer, adminSamlSecurityContainer } = this.props;
     const { useOnlyEnvVars } = adminSamlSecurityContainer.state;
+    const { isSamlEnabled } = adminGeneralSecurityContainer.state;
 
     if (this.state.isRetrieving) {
       return null;
@@ -77,7 +79,7 @@ class SamlSecurityManagement extends React.Component {
       <React.Fragment>
 
         <h2 className="alert-anchor border-bottom">
-          {t('security_setting.SAML.name')} {t('security_setting.configuration')}
+          {t('security_setting.SAML.name')}
         </h2>
 
         {useOnlyEnvVars && (
@@ -88,7 +90,9 @@ class SamlSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <strong className="col-xs-3 text-right">{t('security_setting.SAML.name')}</strong>
+          <div className="col-xs-3 my-3 text-right">
+            <strong>{t('security_setting.SAML.name')}</strong>
+          </div>
           <div className="col-xs-6 text-left">
             <div className="checkbox checkbox-success">
               <input
@@ -101,6 +105,8 @@ class SamlSecurityManagement extends React.Component {
                 {t('security_setting.SAML.enable_saml')}
               </label>
             </div>
+            {(!adminGeneralSecurityContainer.state.setupStrategies.includes('ldap') && isSamlEnabled)
+              && <div className="label label-warning">{t('security_setting.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 
@@ -126,7 +132,7 @@ class SamlSecurityManagement extends React.Component {
           </div>
         </div>
 
-        {adminGeneralSecurityContainer.state.isSamlEnabled && (
+        {isSamlEnabled && (
           <React.Fragment>
 
             {(adminSamlSecurityContainer.state.missingMandatoryConfigKeys.length !== 0) && (
@@ -507,19 +513,22 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
               </tbody>
             </table>
 
-          </React.Fragment>
+            <div className="row my-3">
+              <div className="col-xs-offset-3 col-xs-5">
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  disabled={adminSamlSecurityContainer.state.retrieveError != null}
+                  onClick={this.onClickSubmit}
+                >
+                  {t('Update')}
+                </button>
+              </div>
+            </div>
 
+          </React.Fragment>
         )}
 
-        <div className="row my-3">
-          <div className="col-xs-offset-3 col-xs-5">
-            <button type="button" className="btn btn-primary" disabled={adminSamlSecurityContainer.state.retrieveError != null} onClick={this.onClickSubmit}>
-              {t('Update')}
-            </button>
-          </div>
-        </div>
-
-
       </React.Fragment>
     );
 

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

@@ -35,10 +35,11 @@ class TwitterSecurityManagement extends React.Component {
   }
 
   async onClickSubmit() {
-    const { t, adminTwitterSecurityContainer } = this.props;
+    const { t, adminTwitterSecurityContainer, adminGeneralSecurityContainer } = this.props;
 
     try {
       await adminTwitterSecurityContainer.updateTwitterSetting();
+      await adminGeneralSecurityContainer.retrieveSetupStratedies();
       toastSuccess(t('security_setting.OAuth.Twitter.updated_twitter'));
     }
     catch (err) {
@@ -48,6 +49,7 @@ class TwitterSecurityManagement extends React.Component {
 
   render() {
     const { t, adminGeneralSecurityContainer, adminTwitterSecurityContainer } = this.props;
+    const { isTwitterEnabled } = adminTwitterSecurityContainer.state;
 
     if (this.state.isRetrieving) {
       return null;
@@ -57,7 +59,7 @@ class TwitterSecurityManagement extends React.Component {
       <React.Fragment>
 
         <h2 className="alert-anchor border-bottom">
-          {t('security_setting.OAuth.Twitter.name')} {t('security_setting.configuration')}
+          {t('security_setting.OAuth.Twitter.name')}
         </h2>
 
         {this.state.retrieveError != null && (
@@ -67,7 +69,9 @@ class TwitterSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <strong className="col-xs-3 text-right">{t('security_setting.OAuth.Twitter.name')}</strong>
+          <div className="col-xs-3 my-3 text-right">
+            <strong>{t('security_setting.OAuth.Twitter.name')}</strong>
+          </div>
           <div className="col-xs-6 text-left">
             <div className="checkbox checkbox-success">
               <input
@@ -80,6 +84,8 @@ class TwitterSecurityManagement extends React.Component {
                 {t('security_setting.OAuth.Twitter.enable_twitter')}
               </label>
             </div>
+            {(!adminGeneralSecurityContainer.state.setupStrategies.includes('twitter') && isTwitterEnabled)
+              && <div className="label label-warning">{t('security_setting.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 
@@ -106,9 +112,11 @@ class TwitterSecurityManagement extends React.Component {
         </div>
 
 
-        {adminGeneralSecurityContainer.state.isTwitterEnabled && (
+        {isTwitterEnabled && (
           <React.Fragment>
 
+            <h3 className="border-bottom">{t('security_setting.configuration')}</h3>
+
             <div className="row mb-5">
               <label htmlFor="TwitterConsumerId" className="col-xs-3 text-right">{t('security_setting.clientID')}</label>
               <div className="col-xs-6">