weseek__growi/lib/views/admin/notification.html

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

{% block html_title %}通知設定 · {{ path }}{% endblock %}

{% block content_head %}
<div class="header-wrap">
  <header id="page-header">
    <h1 class="title" id="">通知設定</h1>
  </header>
</div>
{% endblock %}

{% block content_main %}
<div class="content-main">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="/admin"><i class="fa fa-cube"></i> Wiki管理トップ</a></li>
        <li><a href="/admin/app"><i class="fa fa-gears"></i> アプリ設定</a></li>
        <li class="active"><a href="/admin/notification"><i class="fa fa-bell"></i> 通知設定</a></li>
        <li><a href="/admin/users"><i class="fa fa-users"></i> ユーザー管理</a></li>
      </ul>
    </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</a></li>
      </ul>

      <br>

      {% 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 %}

      <form action="/admin/notification/slackSetting" method="post" class="form-horizontal" id="appSettingForm" role="form">
      <fieldset>
        <legend>Slack App Configuration</legend>
        <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>
      </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-default" href="{{ slackAuthUrl }}">
          <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 }}">
          <i class="fa fa-slack"></i> Connect to Slack
        </a>
        {% endif %}
      </div>

      <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="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="submit" value="Delete" class="btn btn-default">
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>


      {% endif %}

      {% if not hasSlackConfig %}
      <h3>How to configure Slack app for Crowi</h3>
      <p>
      Register Crowi as a Slack application, the notification feature for Slack can be enabled.
      </p>
      <h4>1. Register Slack App</h4>
      <p>
      Create App from <a href="https://api.slack.com/applications/new">this link</a>, and fill the form out as below:
      </p>
      <dl class="dl-horizontal">
        <dt>App Name</dt> <dd><code>Crowi</code> </dd>
        <dt>Icon</dt> <dd>Upload this image as the icon (Free to download and use it) =&gt; <a href="https://github.com/crowi/crowi/tree/master/resource/logo">Crowi Logo</a></dd>
        <dt>Short description</dt> <dd><code>Crowi's Slack Notification Integration</code> </dd>
        <dt>Long description</dt> <dd><code>Crowi's Slack Notification Integration</code> </dd>
      </dl>
      <p>
      and <strong>Save</strong> it.
      </p>

      <h4>2. Get <code>clientId</code> and <code>clientSecret</code></h4>
      <h4>3. After clientId nad clientSecret set, click "Connect to Slack" button to start OAuth process.</h4>
      <h4>4. Configure Slack on this notification setting screen</h4>
      {% endif %}



    </div>
  </div>

</div>
{% endblock content_main %}

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