notification.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. {% extends '../layout/2column.html' %}
  2. {% block html_title %}通知設定 · {{ path }}{% endblock %}
  3. {% block content_head %}
  4. <header id="page-header">
  5. <h1 class="title" id="">通知設定</h1>
  6. </header>
  7. {% endblock %}
  8. {% block content_main %}
  9. <div class="content-main">
  10. <div class="row">
  11. <div class="col-md-3">
  12. <ul class="nav nav-pills nav-stacked">
  13. <li><a href="/admin"><i class="fa fa-cube"></i> Wiki管理トップ</a></li>
  14. <li><a href="/admin/app"><i class="fa fa-gears"></i> アプリ設定</a></li>
  15. <li class="active"><a href="/admin/notification"><i class="fa fa-bell"></i> 通知設定</a></li>
  16. <li><a href="/admin/users"><i class="fa fa-users"></i> ユーザー管理</a></li>
  17. </ul>
  18. </div>
  19. <div class="col-md-9">
  20. <ul class="nav nav-tabs">
  21. <li class="active"><a href="#slack" data-toggle="tab"><i class="fa fa-slack"></i> Slack</a></li>
  22. </ul>
  23. <br>
  24. {% set smessage = req.flash('successMessage') %}
  25. {% if smessage.length %}
  26. <div class="alert alert-success">
  27. {% for e in smessage %}
  28. {{ e }}<br>
  29. {% endfor %}
  30. </div>
  31. {% endif %}
  32. {% set emessage = req.flash('errorMessage') %}
  33. {% if emessage.length %}
  34. <div class="alert alert-danger">
  35. {% for e in emessage %}
  36. {{ e }}<br>
  37. {% endfor %}
  38. </div>
  39. {% endif %}
  40. <form action="/admin/notification/slackSetting" method="post" class="form-horizontal" id="appSettingForm" role="form">
  41. <fieldset>
  42. <legend>Slack App Configuration</legend>
  43. <div class="form-group">
  44. <label for="slackSetting[slack:clientId]" class="col-xs-3 control-label">clientId</label>
  45. <div class="col-xs-6">
  46. <input class="form-control" type="text" name="slackSetting[slack:clientId]" value="{{ slackSetting['slack:clientId'] }}">
  47. </div>
  48. </div>
  49. <div class="form-group">
  50. <label for="slackSetting[slack:clientSecret]" class="col-xs-3 control-label">clientSecret</label>
  51. <div class="col-xs-6">
  52. <input class="form-control" type="text" name="slackSetting[slack:clientSecret]" value="{{ slackSetting['slack:clientSecret'] }}">
  53. </div>
  54. </div>
  55. <div class="form-group">
  56. <div class="col-xs-offset-3 col-xs-6">
  57. <button type="submit" class="btn btn-primary">Submit</button>
  58. </div>
  59. </div>
  60. </fieldset>
  61. </form>
  62. {% if hasSlackConfig %}
  63. <div class="text-center">
  64. {% if hasSlackToken %}
  65. <p>Crowi and Slack is already <strong>connected</strong>. You can re-connect to refresh and overwirte the token with your Slack account.</p>
  66. <a class="btn btn-default" href="{{ slackAuthUrl }}">
  67. <i class="fa fa-slack"></i> Reconnect to Slack
  68. </a>
  69. {% else %}
  70. <p>Slack clientId and clientSecret is configured. Now, you can connect with Slack.</p>
  71. <a class="btn btn-primary" href="{{ slackAuthUrl }}">
  72. <i class="fa fa-slack"></i> Connect to Slack
  73. </a>
  74. {% endif %}
  75. </div>
  76. <hr>
  77. <h4>Default Notification Settings for Patterns</h4>
  78. <table class="table table-bordered">
  79. <thead>
  80. <th>Pattern</th>
  81. <th>Channel</th>
  82. <th>Operation</th>
  83. </thead>
  84. <tbody>
  85. <form id="slackNotificationForm">
  86. <tr>
  87. <td>
  88. <input class="form-control" type="text" name="pathPattern" value="" placeholder="e.g. /projects/xxx/MTG/*">
  89. <p class="help-block">
  90. Path name of wiki. Pattern expression with <code>*</code> can be used.
  91. </p>
  92. </td>
  93. <td>
  94. <input class="form-control form-inline" type="text" name="channel" value="" placeholder="e.g. project-xxx">
  95. <p class="help-block">
  96. Slack channel name. Without <code>#</code>.
  97. </p>
  98. </td>
  99. <td>
  100. <input type="submit" value="Add" class="btn btn-primary">
  101. </td>
  102. </tr>
  103. </form>
  104. {% for notif in notifs %}
  105. <tr>
  106. <td>
  107. {{ notif.pattern }}
  108. </td>
  109. <td>
  110. {{ notif.channel }}
  111. </td>
  112. <td>
  113. <form>
  114. <input type="hidden" name="id" value="">
  115. <input type="submit" value="Delete" class="btn btn-default">
  116. </form>
  117. </td>
  118. </tr>
  119. {% endfor %}
  120. </tbody>
  121. </table>
  122. {% endif %}
  123. {% if not hasSlackConfig %}
  124. <h3>How to configure Slack app for Crowi</h3>
  125. <p>
  126. Register Crowi as a Slack application, the notification feature for Slack can be enabled.
  127. </p>
  128. <h4>1. Register Slack App</h4>
  129. <p>
  130. Create App from this link, and fill the form out as below:
  131. </p>
  132. <dl class="dl-horizontal">
  133. <dt>App Name</dt> <dd><code>Crowi</code> </dd>
  134. <dt>Icon</dt> <dd>Upload this image as the icon (Free to download and use it) =&gt; <img src=""></dd>
  135. <dt>Short description</dt> <dd><code>Crowi's Slack Notification Integration</code> </dd>
  136. <dt>Long description</dt> <dd><code>Crowi's Slack Notification Integration</code> </dd>
  137. </dl>
  138. <p>
  139. and <strong>Save</strong> it.
  140. </p>
  141. <h4>2. Get <code>clientId</code> and <code>clientSecret</code></h4>
  142. <h4>3. Configure Slack on this notification setting screen</h4>
  143. {% endif %}
  144. </div>
  145. </div>
  146. </div>
  147. {% endblock content_main %}
  148. {% block content_footer %}
  149. {% endblock content_footer %}
  150. {% block footer %}
  151. {% endblock footer %}