show alert when the authentication mechanism is different from the running configuration

lib/util/swigFunctions.js

@@ -25,6 +25,22 @@ module.exports = function(crowi, app, req, locals) {
     return req.csrfToken;
   };
 
+  /**
+   * return true if enabled
+   */
+  locals.isEnabledPassport = function() {
+    var config = crowi.getConfig()
+    return Config.isEnabledPassport(config);
+  }
+
+  /**
+   * return true if local strategy has been setup successfully
+   *  used whether restarting the server needed
+   */
+  locals.isPassportLocalStrategySetup = function() {
+    return passportService != null && passportService.isLocalStrategySetup;
+  }
+
   /**
    * return true if enabled and strategy has been setup successfully
    */

lib/views/admin/security.html

@@ -102,7 +102,7 @@
 
       <form action="/_api/admin/security/mechanism" method="post" class="form-horizontal" id="mechanismSetting" role="form">
         <fieldset>
-          <legend>認証機構設定</legend>
+          <legend>認証機構選択</legend>
           <p class="alert alert-info"><b>NOTE: </b>Restarting the server is needed if you switch the auth mechanism.</p>
           <div class="form-group">
             <div class="col-xs-6">
@@ -147,93 +147,122 @@
 
       <div class="auth-mechanism-configurations">
 
-        <form action="/_api/admin/security/google" method="post" class="form-horizontal official-crowi-auth-settings" id="googleSetting" role="form"
-            {% if true === settingForm['security:isEnabledPassport'] %}style="display: none;"{% endif %}>
-          <fieldset>
-            <h3>Google 設定</h3>
-            <p class="well">
-              Google Cloud Platform の <a href="https://console.cloud.google.com/apis/credentials">API Manager</a>
-              から OAuth2 Client ID を作成すると、Google アカウントにコネクトして登録やログインが可能になります。
-            </p>
-
-            <ol class="help-block">
-              <li><a href="https://console.cloud.google.com/apis/credentials">API Manager</a> へアクセス</li>
-              <li>プロジェクトを作成していない場合は作成してください</li>
-              <li>「認証情報を作成」-> OAuthクライアントID</li>
-              <ol>
-                <li>「ウェブアプリケーション」を選択</li>
-                <li>承認済みのリダイレクトURLに、 <code>https://${crowi.host}/google/callback</code> を入力<br>
-                (<code>${crowi.host}</code>は環境に合わせて変更してください)</li>
+        <legend>認証機構設定</legend>
+
+        {% set isOfficialConfigurationVisible = !isEnabledPassport() %}
+        <div class="official-crowi-auth-settings">
+          {% set isRestartingServerNeeded = isPassportLocalStrategySetup() %}
+          <p class="alert alert-warning"
+              {% if !isRestartingServerNeeded %}style="display: none;"{% endif %}>
+            <b>
+              <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+              Restarting the server is needed.
+            </b>
+            The server is running with Passport authentication mechanism.
+          </p>
+
+          <form action="/_api/admin/security/google" method="post" class="form-horizontal " id="googleSetting" role="form"
+              {% if isRestartingServerNeeded %}style="opacity: 0.4;"{% endif %}>
+
+            <fieldset>
+              <h4>Google 設定</h4>
+              <p class="well">
+                Google Cloud Platform の <a href="https://console.cloud.google.com/apis/credentials">API Manager</a>
+                から OAuth2 Client ID を作成すると、Google アカウントにコネクトして登録やログインが可能になります。
+              </p>
+
+              <ol class="help-block">
+                <li><a href="https://console.cloud.google.com/apis/credentials">API Manager</a> へアクセス</li>
+                <li>プロジェクトを作成していない場合は作成してください</li>
+                <li>「認証情報を作成」-> OAuthクライアントID</li>
+                <ol>
+                  <li>「ウェブアプリケーション」を選択</li>
+                  <li>承認済みのリダイレクトURLに、 <code>https://${crowi.host}/google/callback</code> を入力<br>
+                  (<code>${crowi.host}</code>は環境に合わせて変更してください)</li>
+                </ol>
               </ol>
-            </ol>
 
-            <div class="form-group">
-              <label for="settingForm[google:clientId]" class="col-xs-3 control-label">Client ID</label>
-              <div class="col-xs-6">
-                <input class="form-control" type="text" name="settingForm[google:clientId]" value="{{ settingForm['google:clientId'] }}">
+              <div class="form-group">
+                <label for="settingForm[google:clientId]" class="col-xs-3 control-label">Client ID</label>
+                <div class="col-xs-6">
+                  <input class="form-control" type="text" name="settingForm[google:clientId]" value="{{ settingForm['google:clientId'] }}">
+                </div>
               </div>
-            </div>
 
-            <div class="form-group">
-              <label for="settingForm[google:clientSecret]" class="col-xs-3 control-label">Client Secret</label>
-              <div class="col-xs-6">
-                <input class="form-control" type="text" name="settingForm[google:clientSecret]" value="{{ settingForm['google:clientSecret'] }}">
+              <div class="form-group">
+                <label for="settingForm[google:clientSecret]" class="col-xs-3 control-label">Client Secret</label>
+                <div class="col-xs-6">
+                  <input class="form-control" type="text" name="settingForm[google:clientSecret]" value="{{ settingForm['google:clientSecret'] }}">
+                </div>
               </div>
-            </div>
 
-            <div class="form-group">
-              <div class="col-xs-offset-3 col-xs-6">
-                <input type="hidden" name="_csrf" value="{{ csrf() }}">
-                <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
+              <div class="form-group">
+                <div class="col-xs-offset-3 col-xs-6">
+                  <input type="hidden" name="_csrf" value="{{ csrf() }}">
+                  <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
+                </div>
               </div>
-            </div>
 
-          </fieldset>
-        </form>
+            </fieldset>
+          </form>
+        </div>
 
         {#
          # passport settings nav
          #}
-        <ul class="nav nav-tabs passport-settings" role="tablist" {% if !settingForm['security:isEnabledPassport'] %}style="display: none;"{% endif %}>
-          <li class="active">
-            <a href="#passport-ldap" data-toggle="tab" role="tab"><i class="fa fa-sitemap"></i> LDAP</a>
-          </li>
-          <li>
-            <a href="#passport-google-oauth" data-toggle="tab" role="tab"><i class="fa fa-google"></i> Google OAuth</a>
-          </li>
-          <li>
-            <a href="#passport-facebook" data-toggle="tab" role="tab"><i class="fa fa-facebook"></i> Facebook</a>
-          </li>
-          <li>
-            <a href="#passport-twitter" data-toggle="tab" role="tab"><i class="fa fa-twitter"></i> Twitter</a>
-          </li>
-          <li>
-            <a href="#passport-github" data-toggle="tab" role="tab"><i class="fa fa-github"></i> Github</a>
-          </li>
-        </ul>
-
-        <div class="tab-content passport-settings" {% if !settingForm['security:isEnabledPassport'] %}style="display: none;"{% endif %}>
-          <div id="passport-ldap" class="tab-pane active" role="tabpanel" >
-            {% include './widget/passport/ldap.html' with { settingForm: settingForm } %}
-          </div>
+        {% set isPassportConfigurationVisible = settingForm['security:isEnabledPassport'] %}
+        <div class="passport-settings" {% if !isPassportConfigurationVisible %}style="display: none;"{% endif %}>
+
+          {% set isRestartingServerNeeded = !isPassportLocalStrategySetup() %}
+          <p class="alert alert-warning"
+              {% if !isRestartingServerNeeded %}style="display: none;"{% endif %}>
+            <b>
+              <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+              Restarting the server is needed.
+            </b>
+            The server is running with Official Crowi authentication mechanism.
+          </p>
+          <ul class="nav nav-tabs" role="tablist" {% if isRestartingServerNeeded %}style="opacity: 0.4;"{% endif %}>
+            <li class="active">
+              <a href="#passport-ldap" data-toggle="tab" role="tab"><i class="fa fa-sitemap"></i> LDAP</a>
+            </li>
+            <li>
+              <a href="#passport-google-oauth" data-toggle="tab" role="tab"><i class="fa fa-google"></i> Google OAuth</a>
+            </li>
+            <li>
+              <a href="#passport-facebook" data-toggle="tab" role="tab"><i class="fa fa-facebook"></i> Facebook</a>
+            </li>
+            <li>
+              <a href="#passport-twitter" data-toggle="tab" role="tab"><i class="fa fa-twitter"></i> Twitter</a>
+            </li>
+            <li>
+              <a href="#passport-github" data-toggle="tab" role="tab"><i class="fa fa-github"></i> Github</a>
+            </li>
+          </ul>
+
+          <div class="tab-content" {% if isRestartingServerNeeded %}style="opacity: 0.4;"{% endif %}>
+            <div id="passport-ldap" class="tab-pane active" role="tabpanel" >
+              {% include './widget/passport/ldap.html' with { settingForm: settingForm } %}
+            </div>
 
-          <div id="passport-google-oauth" class="tab-pane" role="tabpanel">
-            {% include './widget/passport/google-oauth.html' %}
-          </div>
+            <div id="passport-google-oauth" class="tab-pane" role="tabpanel">
+              {% include './widget/passport/google-oauth.html' %}
+            </div>
 
-          <div id="passport-facebook" class="tab-pane" role="tabpanel">
-            {% include './widget/passport/facebook.html' %}
-          </div>
+            <div id="passport-facebook" class="tab-pane" role="tabpanel">
+              {% include './widget/passport/facebook.html' %}
+            </div>
 
-          <div id="passport-twitter" class="tab-pane" role="tabpanel">
-            {% include './widget/passport/twitter.html' %}
-          </div>
+            <div id="passport-twitter" class="tab-pane" role="tabpanel">
+              {% include './widget/passport/twitter.html' %}
+            </div>
 
-          <div id="passport-github" class="tab-pane" role="tabpanel">
-            {% include './widget/passport/github.html' %}
-          </div>
+            <div id="passport-github" class="tab-pane" role="tabpanel">
+              {% include './widget/passport/github.html' %}
+            </div>
 
-        </div><!-- /.tab-content -->
+          </div><!-- /.tab-content -->
+        </div>
 
       </div><!-- /.auth-mechanism-configurations -->