ensure to be able to input WebhookURL and check whether incoming webhooks is prioritized than Slack App

lib/form/admin/slackIwhSetting.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var form = require('express-form')
+  , field = form.field;
+
+module.exports = form(
+  field('slackIwhSetting[slack:incomingWebhookUrl]', 'Webhook URL'),
+  field('slackIwhSetting[slack:isIncomingWebhookPrioritized]', 'Prioritize Incoming Webhook than Slack App ').trim().toBooleanStrict()
+);
+

lib/form/index.js

@@ -23,6 +23,7 @@ module.exports = {
     customlayout: require('./admin/customlayout'),
     customfeatures: require('./admin/customfeatures'),
     userInvite: require('./admin/userInvite'),
+    slackIwhSetting: require('./admin/slackIwhSetting'),
     slackSetting: require('./admin/slackSetting'),
   },
 };

lib/models/config.js

@@ -350,6 +350,17 @@ module.exports = function(crowi) {
     return true;
   };
 
+  /**
+   * for Slack Incoming Webhooks
+   */
+  configSchema.statics.hasSlackIwhConfig = function(config)
+  {
+    if (!config.notification) {
+      return false;
+    }
+    return config.notification['slack:incomingWebhookUrl'];
+  };
+
   configSchema.statics.hasSlackToken = function(config)
   {
     if (!this.hasSlackConfig(config)) {

lib/routes/admin.js

@@ -133,6 +133,7 @@ module.exports = function(crowi, app) {
     var UpdatePost = crowi.model('UpdatePost');
     var slackSetting = Config.setupCofigFormData('notification', config);
     var hasSlackConfig = Config.hasSlackConfig(config);
+    var hasSlackIwhConfig = Config.hasSlackIwhConfig(config);
     var hasSlackToken = Config.hasSlackToken(config);
     var slack = crowi.slack;
     var slackAuthUrl = '';
@@ -140,10 +141,13 @@ module.exports = function(crowi, app) {
     if (!Config.hasSlackConfig(req.config)) {
       slackSetting['slack:clientId'] = '';
       slackSetting['slack:clientSecret'] = '';
-    } else {
-      slackAuthUrl = slack.getAuthorizeURL();
+    }
+    if (!Config.hasSlackIwhConfig(req.config)) {
+      slackSetting['slack:incomingWebhookUrl'] = '';
     }
 
+    slackAuthUrl = slack.getAuthorizeURL();
+
     if (req.session.slackSetting) {
       slackSetting = req.session.slackSetting;
       req.session.slackSetting = null;
@@ -155,6 +159,7 @@ module.exports = function(crowi, app) {
         settings,
         slackSetting,
         hasSlackConfig,
+        hasSlackIwhConfig,
         hasSlackToken,
         slackAuthUrl
       });
@@ -169,6 +174,7 @@ module.exports = function(crowi, app) {
     if (req.form.isValid) {
       Config.updateNamespaceByArray('notification', slackSetting, function(err, config) {
         Config.updateConfigCache('notification', config);
+        req.flash('successMessage', ['Successfully Updated!']);
         req.session.slackSetting = null;
 
         crowi.setupSlack().then(function() {
@@ -218,7 +224,7 @@ module.exports = function(crowi, app) {
     });
   };
 
-  // app.post('/admin/notification/slackSetting/disconnect');
+  // app.post('/admin/notification/slackSetting/disconnect' , admin.notification.disconnectFromSlack);
   actions.notification.disconnectFromSlack = function(req, res) {
     const config = crowi.getConfig();
     const slack = crowi.slack;
@@ -243,6 +249,24 @@ module.exports = function(crowi, app) {
     });
   };
 
+  // app.post('/admin/notification/slackIwhSetting' , admin.notification.slackIwhSetting);
+  actions.notification.slackIwhSetting = function(req, res) {
+    var slackIwhSetting = req.form.slackIwhSetting;
+
+    if (req.form.isValid) {
+      Config.updateNamespaceByArray('notification', slackIwhSetting, function(err, config) {
+        Config.updateConfigCache('notification', config);
+        req.flash('successMessage', ['Successfully Updated!']);
+        crowi.setupSlack().then(function() {
+          return res.redirect('/admin/notification#slack-incoming-webhooks');
+        });
+      });
+    } else {
+      req.flash('errorMessage', req.form.errors);
+      return res.redirect('/admin/notification#slack-incoming-webhooks');
+    }
+  };
+
   actions.search.buildIndex = function(req, res) {
     var search = crowi.getSearcher();
     if (!search) {

lib/routes/index.js

@@ -64,6 +64,7 @@ module.exports = function(crowi, app) {
 
   // notification admin
   app.get('/admin/notification'              , loginRequired(crowi, app) , middleware.adminRequired() , admin.notification.index);
+  app.post('/admin/notification/slackIwhSetting', loginRequired(crowi, app) , middleware.adminRequired() , csrf, form.admin.slackIwhSetting, admin.notification.slackIwhSetting);
   app.post('/admin/notification/slackSetting', loginRequired(crowi, app) , middleware.adminRequired() , csrf, form.admin.slackSetting, admin.notification.slackSetting);
   app.get('/admin/notification/slackAuth'    , loginRequired(crowi, app) , middleware.adminRequired() , admin.notification.slackAuth);
   app.get('/admin/notification/slackSetting/disconnect', loginRequired(crowi, app) , middleware.adminRequired() , admin.notification.disconnectFromSlack);

lib/views/admin/notification.html

@@ -18,12 +18,6 @@
     </div>
     <div class="col-md-9">
 
-      <ul class="nav nav-tabs">
-        <li class="active"><a href="#slack" data-toggle="tab"><i class="fa fa-slack"></i> Slack App</a></li>
-      </ul>
-
-      <br>
-
       {% set smessage = req.flash('successMessage') %}
       {% if smessage.length %}
       <div class="alert alert-success">
@@ -42,59 +36,204 @@
       </div>
       {% endif %}
 
-      <form action="/admin/notification/slackSetting" method="post" class="form-horizontal" id="appSettingForm" role="form">
-      <fieldset>
-        <legend>Slack App Configuration</legend>
-
-        <p class="well text-warning">
-          <i class="fa fa-warning"></i> NOT RECOMMENDED
-          <br><br>
-          This is the way that compatible to the official Crowi,<br>
-          but not recommended in crowi-plus because it is too complex.
-          <br><br>
-          Please use <a href="#">(TBD) Slack incomming web hook Configuration</a> instead.
-        </p>
-
-        <div class="form-group">
-          <label for="slackSetting[slack:clientId]" class="col-xs-3 control-label">clientId</label>
-          <div class="col-xs-6">
-            <input class="form-control" type="text" name="slackSetting[slack:clientId]" value="{{ slackSetting['slack:clientId'] }}">
-          </div>
-        </div>
+      <ul class="nav nav-tabs" role="tablist">
+        <li class="active">
+          <a href="#slack-app" data-toggle="tab" role="tab"><i class="fa fa-slack"></i> Slack App</a>
+        </li>
+        <li role="tab">
+          <a href="#slack-incoming-webhooks" data-toggle="tab" role="tab"><i class="fa fa-slack"></i> Slack Incoming Webhooks</a>
+        </li>
+      </ul>
 
-        <div class="form-group">
-          <label for="slackSetting[slack:clientSecret]" class="col-xs-3 control-label">clientSecret</label>
-          <div class="col-xs-6">
-            <input class="form-control" type="text" name="slackSetting[slack:clientSecret]" value="{{ slackSetting['slack:clientSecret'] }}">
-          </div>
-        </div>
+      <div class="tab-content">
+        <div id="slack-app" class="tab-pane active" role="tabpanel" >
+
+          <form action="/admin/notification/slackSetting" method="post" class="form-horizontal" id="appSettingForm" role="form">
+            <fieldset>
+              <legend>Slack App Configuration</legend>
+
+              <p class="well text-warning">
+                <i class="fa fa-warning"></i> NOT RECOMMENDED
+                <br><br>
+                This is the way that compatible with the official Crowi,<br>
+                but not recommended in crowi-plus because it is too complex.
+                <br><br>
+                Please use <a href="#slack-incoming-webhooks" data-toggle="tab" onclick="activateTab('slack-incoming-webhooks')">Slack incomming webhooks Configuration</a> instead.
+              </p>
 
-        <div class="form-group">
-          <div class="col-xs-offset-3 col-xs-6">
-            <button type="submit" class="btn btn-primary">Submit</button>
+              <div class="form-group">
+                <label for="slackSetting[slack:clientId]" class="col-xs-3 control-label">clientId</label>
+                <div class="col-xs-6">
+                  <input class="form-control" type="text" name="slackSetting[slack:clientId]" value="{{ slackSetting['slack:clientId'] }}">
+                </div>
+              </div>
+
+              <div class="form-group">
+                <label for="slackSetting[slack:clientSecret]" class="col-xs-3 control-label">clientSecret</label>
+                <div class="col-xs-6">
+                  <input class="form-control" type="text" name="slackSetting[slack:clientSecret]" value="{{ slackSetting['slack:clientSecret'] }}">
+                </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>
+
+          {% if hasSlackConfig %}
+          <div class="text-center">
+            {% if hasSlackToken %}
+            <p>Crowi and Slack is already <strong>connected</strong>. You can re-connect to refresh and overwirte the token with your Slack account.</p>
+            <a class="btn btn-warning" href="/admin/notification/slackSetting/disconnect">
+              <i class="fa fa-slack"></i> Disconnect from Slack
+            </a>
+            <a class="btn btn-default" href="{{ slackAuthUrl }}" target="_blank">
+              <i class="fa fa-slack"></i> Reconnect to Slack
+            </a>
+            {% else %}
+            <p>Slack clientId and clientSecret is configured. Now, you can connect with Slack.</p>
+            <a class="btn btn-primary" href="{{ slackAuthUrl }}" target="_blank">
+              <i class="fa fa-slack"></i> Connect to Slack
+            </a>
+            {% endif %}
           </div>
-        </div>
-      </fieldset>
-      <input type="hidden" name="_csrf" value="{{ csrf() }}">
-      </form>
-
-      {% if hasSlackConfig %}
-      <div class="text-center">
-        {% if hasSlackToken %}
-        <p>Crowi and Slack is already <strong>connected</strong>. You can re-connect to refresh and overwirte the token with your Slack account.</p>
-        <a class="btn btn-warning" href="/admin/notification/slackSetting/disconnect">
-          <i class="fa fa-slack"></i> Disconnect from Slack
-        </a>
-        <a class="btn btn-default" href="{{ slackAuthUrl }}" target="_blank">
-          <i class="fa fa-slack"></i> Reconnect to Slack
-        </a>
-        {% else %}
-        <p>Slack clientId and clientSecret is configured. Now, you can connect with Slack.</p>
-        <a class="btn btn-primary" href="{{ slackAuthUrl }}" target="_blank">
-          <i class="fa fa-slack"></i> Connect to Slack
-        </a>
-        {% endif %}
-      </div>
+
+          {% endif %}
+
+          {# {% if not hasSlackConfig %} #}
+          <hr>
+          <h3>
+            <i class="fa fa-question-circle" aria-hidden="true"></i>
+            <a href="#collapseHelpForApp" data-toggle="collapse">How to configure Slack App?</a>
+          </h3>
+
+          <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 and 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 %} #}
+
+
+        </div><!-- /#slack-app -->
+
+        <div id="slack-incoming-webhooks" class="tab-pane" role="tabpanel">
+
+          <form action="/admin/notification/slackIwhSetting" method="post" class="form-horizontal" id="appSettingForm" role="form">
+            <fieldset>
+              <legend>Slack Incoming Webhooks Configuration</legend>
+
+              <div class="form-group">
+                <label for="slackIwhSetting[slack:incomingWebhookUrl]" class="col-xs-3 control-label">Webhook URL</label>
+                <div class="col-xs-6">
+                  <input class="form-control" type="text" name="slackIwhSetting[slack:incomingWebhookUrl]" value="{{ slackSetting['slack:incomingWebhookUrl'] }}">
+                </div>
+              </div>
+
+              <div class="form-group">
+                <label for="slackIwhSetting[slack:isIncomingWebhookPrioritized]" class="col-xs-3 control-label"></label>
+                <div class="col-xs-6">
+                  <input type="checkbox" name="slackIwhSetting[slack:isIncomingWebhookPrioritized]" value="1"
+                    {% if slackSetting['slack:isIncomingWebhookPrioritized'] %}checked{% endif %}>
+                  Prioritize Incoming Webhook than Slack App
+                </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>
+
+          <hr>
+          <h3>
+            <i class="fa fa-question-circle" aria-hidden="true"></i>
+            <a href="#collapseHelpForIwh" data-toggle="collapse">How to configure Incoming Webhooks?</a>
+          </h3>
+
+          <ol id="collapseHelpForIwh" class="collapse">
+            <li>
+              (At Team) Add a hook
+              <ol>
+                <li>Go to <a href="https://slack.com/services/new/incoming-webhook">Incoming Webhooks Configuration page</a>.</li>
+                <li>Choose the default channel to post.</li>
+                <li>Add.</li>
+              </ol>
+            </li>
+
+          </ol>
+
+        </div><!-- /#slack-incoming-webhooks -->
+
+      </div><!-- /.tab-content -->
 
       <hr>
 
@@ -149,85 +288,14 @@
       </table>
 
 
-      {% endif %}
-
-      {# {% if not hasSlackConfig %} #}
-      <hr>
-      <h3>How to configure Slack app</h3>
-
-      <ol>
-        <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 and 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 %} #}
-
-
-
     </div>
   </div>
 
+  <script>
+    function activateTab(tab){
+      $('.nav-tabs a[href="#' + tab + '"]').tab('show');
+    };
+  </script>
 </div>
 {% endblock content_main %}