add admin pages for passport configuration

lib/views/admin/security.html

@@ -143,60 +143,98 @@
           </div>
       </form>
 
-      <form action="/_api/admin/security/google" method="post" class="form-horizontal officialCrowiMechanism" 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>
+
+      <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>
+              </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">更新</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">更新</button>
+              </div>
             </div>
+
+          </fieldset>
+        </form>
+
+        {#
+         # 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' %}
           </div>
 
-        </fieldset>
-      </form>
+          <div id="passport-google-oauth" class="tab-pane" role="tabpanel">
+            {% include './widget/passport/google-oauth.html' %}
+          </div>
 
-      <form action="/_api/admin/security/ldap" method="post" class="form-horizontal passportStrategy" id="ldapSetting" role="form"
-          {% if !settingForm['security:isEnabledPassport'] %}style="display: none;"{% endif %}>
-        <fieldset>
-          <h3>[Passport] LDAP Strategy</h3>
-          <p class="well">
-            (TBD)
-          </p>
+          <div id="passport-facebook" class="tab-pane" role="tabpanel">
+            {% include './widget/passport/facebook.html' %}
+          </div>
 
-        </fieldset>
-      </form>
+          <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><!-- /.tab-content -->
+
+      </div><!-- /.auth-mechanism-configurations -->
 
     </div>
   </div>
@@ -255,12 +293,12 @@
       const isEnabledPassport = ($(this).val() === "true");
 
       if (isEnabledPassport) {
-        $('form.officialCrowiMechanism').hide(400);
-        $('form.passportStrategy').show(400);
+        $('.official-crowi-auth-settings').hide(400);
+        $('.passport-settings').show(400);
       }
       else {
-        $('form.officialCrowiMechanism').show(400);
-        $('form.passportStrategy').hide(400);
+        $('.official-crowi-auth-settings').show(400);
+        $('.passport-settings').hide(400);
       }
     });
   </script>

lib/views/admin/widget/passport/facebook.html

@@ -0,0 +1,6 @@
+<form action="" method="post" class="form-horizontal passportStrategy" id="facebookOauthSetting" role="form">
+  <fieldset>
+    <legend>Facebook OAuth Configuration</legend>
+    <p class="well">(TBD)</p>
+  </fieldset>
+</form>

lib/views/admin/widget/passport/github.html

@@ -0,0 +1,6 @@
+<form action="" method="post" class="form-horizontal passportStrategy" id="githubOauthSetting" role="form">
+  <fieldset>
+    <legend>Github OAuth Configuration</legend>
+    <p class="well">(TBD)</p>
+  </fieldset>
+</form>

lib/views/admin/widget/passport/google-oauth.html

@@ -0,0 +1,82 @@
+<form action="" method="post" class="form-horizontal passportStrategy" id="googleOauthSetting" role="form">
+  <fieldset>
+    <legend>Google OAuth Configuration</legend>
+    <p class="well">(TBD)</p>
+  </fieldset>
+</form>
+
+{% if false %}
+<hr>
+<h4>
+  <i class="fa fa-question-circle" aria-hidden="true"></i>
+  <a href="#collapseHelpForApp" data-toggle="collapse">How to configure Slack App?</a>
+</h4>
+
+<ol id="collapseHelpForApp" class="collapse">
+  <li>
+    Register Slack App
+    <ol>
+      <li>
+        Create App from <a href="https://api.slack.com/applications/new">this link</a>, and fill the form out as below:
+        <dl class="dl-horizontal">
+          <dt>App Name</dt> <dd><code>crowi-plus</code> </dd>
+          <dt>Development Slack Team</dt> <dd>Select the team you want to notify to.</dd>
+        </dl>
+      </li>
+      <li><strong>Save</strong> it.</li>
+    </ol>
+  </li>
+  <li>
+    Get App Credentials
+    <ol>
+      <li>Go To "Basic Information" page and make a note "Client ID" and "Client Secret".</li>
+    </ol>
+  </li>
+  <li>
+    Set Redirect URLs
+    <ol>
+      <li>Go to "OAuth &amp; Permissions" page.</li>
+      <li>Add <code><script>document.write(location.origin);</script>/admin/notification/slackAuth</code> .</li>
+      <li>Don't forget to <strong>save</strong>.</li>
+    </ol>
+  </li>
+  <li>
+    Set Permission Scopes to the App
+    <ol>
+      <li>Go to "OAuth &amp; Permissions" page.</li>
+      <li>Add "Send messages as crowi-plus"(<code>chat:write:bot</code>).</li>
+      <li>Don't forget to <strong>save</strong>.</li>
+    </ol>
+  </li>
+  <li>
+    Create a bot user
+    <ol>
+      <li>Go to "Bot Users" page and add.</li>
+    </ol>
+  </li>
+  <li>
+    Install the app
+    <ol>
+      <li>Go to "Install App to Your Team" page and install.</li>
+    </ol>
+  </li>
+  <li>
+    (At Team) Approve the app
+    <ol>
+      <li>Go to the management Apps page for the team you installed the app and approve crowi-plus.</li>
+    </ol>
+  </li>
+  <li>
+    (At Team) Invite the bot to your team
+    <ol>
+      <li>Invite the user you created in <code>4. Add a bot user</code> to the channel you notify to.</li>
+    </ol>
+  </li>
+  <li>
+    (At crowi-plus) Input "clientId" and "clientSecret" and submit on this page.
+  </li>
+  <li>
+    (At crowi-plus) Click "Connect to Slack" button to start OAuth process.
+  </li>
+</ol>
+{% endif %}

lib/views/admin/widget/passport/ldap.html

@@ -0,0 +1,40 @@
+<form action="/_api/admin/security/ldap" method="post" class="form-horizontal passportStrategy" id="ldapSetting" role="form">
+  <fieldset>
+    <legend>LDAP Configuration</legend>
+
+    <div class="form-group">
+      <label for="passportSetting[passport-ldap:serverUrl]" class="col-xs-3 control-label">Server URL</label>
+      <div class="col-xs-6">
+        <input class="form-control" type="text" name="passportSetting[passport-ldap:serverUrl]" value="{{ passportSetting['passport-ldap:serverUrl'] }}">
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="passportSetting[passport-ldap:bindDN]" class="col-xs-3 control-label">Bind DN</label>
+      <div class="col-xs-6">
+        <input class="form-control" type="text" name="passportSetting[passport-ldap:bindDN]" value="{{ passportSetting['passport-ldap:bindDN'] }}">
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="passportSetting[passport-ldap:bindDNPassword]" class="col-xs-3 control-label">Bind DN Password</label>
+      <div class="col-xs-6">
+        <input class="form-control" type="text" name="passportSetting[passport-ldap:bindDNPassword]" value="{{ passportSetting['passport-ldap:bindDNPassword'] }}">
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="passportSetting[passport-ldap:searchFilter]" class="col-xs-3 control-label">Search Filter</label>
+      <div class="col-xs-6">
+        <input class="form-control" type="text" name="passportSetting[passport-ldap:searchFilter]" value="{{ passportSetting['passport-ldap:searchFilter'] }}">
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-xs-offset-3 col-xs-6">
+        <button type="submit" class="btn btn-primary">Submit</button>
+      </div>
+    </div>
+  </fieldset>
+  <input type="hidden" name="_csrf" value="{{ csrf() }}">
+</form>

lib/views/admin/widget/passport/twitter.html

@@ -0,0 +1,6 @@
+<form action="" method="post" class="form-horizontal passportStrategy" id="twitterOauthSetting" role="form">
+  <fieldset>
+    <legend>Twitter OAuth Configuration</legend>
+    <p class="well">(TBD)</p>
+  </fieldset>
+</form>

resource/css/_admin.scss

@@ -48,4 +48,8 @@
     height: 32px;
     background-color: black;
   }
+
+  .auth-mechanism-configurations {
+    min-height: 600px;
+  }
 } // }}}