weseek__growi/lib/views/admin/notification.html

{% extends '../layout/admin.html' %}

{% block html_title %}{{ t('Notification settings') }} · {{ path }}{% endblock %}

{% block content_head %}
<div class="header-wrap">
  <header id="page-header">
    <h1 class="title" id="">{{ t('Notification settings') }}</h1>
  </header>
</div>
{% endblock %}

{% block content_main %}
<div class="content-main">
  <div class="row">
    <div class="col-md-3">
      {% include './widget/menu.html' with {current: 'notification'} %}
    </div>
    <div class="col-md-9">

      {% set smessage = req.flash('successMessage') %}
      {% if smessage.length %}
      <div class="alert alert-success">
        {% for e in smessage %}
          {{ e }}<br>
        {% endfor %}
      </div>
      {% endif %}

      {% set emessage = req.flash('errorMessage') %}
      {% if emessage.length %}
      <div class="alert alert-danger">
        {% for e in emessage %}
        {{ e }}<br>
        {% endfor %}
      </div>
      {% endif %}

      <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="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">
                <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 hasSlackWebClientConfig %}
          <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 hasSlackWebClientConfig %} #}
          <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 Workspace</dt> <dd>Select the workspace 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 Workspace" page and install.</li>
              </ol>
            </li>
            <li>
              (At Workspace) Approve the app
              <ol>
                <li>Go to the management Apps page for the workspace you installed the app and approve crowi-plus.</li>
              </ol>
            </li>
            <li>
              (At Workspace) Invite the bot to your workspace
              <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-9">
                  <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-9">
                  <input type="checkbox" name="slackIwhSetting[slack:isIncomingWebhookPrioritized]" value="1"
                    {% if slackSetting['slack:isIncomingWebhookPrioritized'] %}checked{% endif %}>
                  Prioritize Incoming Webhook than Slack App
                  <p class="help-block">Check this option and crowi-plus use Incoming Webhooks even if Slack App settings are enabled.</p>
                </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 Workspace) 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>
            <li>
              (At crowi-plus) Set Webhook URL
              <ol>
                <li>Input "Webhook URL" and submit on this page.</li>
              </ol>
            </li>
          </ol>

        </div><!-- /#slack-incoming-webhooks -->

      </div><!-- /.tab-content -->

      <hr>

      <h4>Default Notification Settings for Patterns</h4>

      <table class="table table-bordered">
        <thead>
          <th>Pattern</th>
          <th>Channel</th>
          <th>Operation</th>
        </thead>
        <tbody class="admin-notif-list">
          <form id="slackNotificationForm">
          <tr>
            <td>
              <input class="form-control" type="text" name="pathPattern" value="" placeholder="e.g. /projects/xxx/MTG/*">
              <p class="help-block">
                Path name of wiki. Pattern expression with <code>*</code> can be used.
              </p>
            </td>
            <td>
              <input class="form-control form-inline" type="text" name="channel" value="" placeholder="e.g. project-xxx">
              <p class="help-block">
                Slack channel name. Without <code>#</code>.
              </p>
            </td>
            <td>
              <input type="hidden" name="_csrf" value="{{ csrf() }}">
              <input type="submit" value="Add" class="btn btn-primary">
            </td>
          </tr>
          </form>

          {% for notif in settings %}
          <tr class="admin-notif-row" data-updatepost-id="{{ notif._id.toString() }}">
            <td>
              {{ notif.pathPattern }}
            </td>
            <td>
              {{ notif.channel }}
            </td>
            <td>
              <form class="admin-remove-updatepost">
                <input type="hidden" name="id" value="{{ notif._id.toString() }}">
                <input type="hidden" name="_csrf" value="{{ csrf() }}">
                <input type="submit" value="Delete" class="btn btn-default">
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>


    </div>
  </div>

  <script>
    window.addEventListener('load', function(e) {
      // hash on page
      if (location.hash) {
        if (location.hash == '#slack-incoming-webhooks') {
          activateTab('slack-incoming-webhooks');
        }
      }
    });

    function activateTab(tab){
      $('.nav-tabs a[href="#' + tab + '"]').tab('show');
    };
  </script>
</div>
{% endblock content_main %}

{% block content_footer %}
{% endblock content_footer %}