From 0a4b78160f3dc1b6e27fc141e526d80b240dda6d Mon Sep 17 00:00:00 2001
From: Naoki Takezoe <takezoe@gmail.com>
Date: Sat, 24 Jun 2017 14:58:58 +0900
Subject: [PATCH] Refactor account level web hook entirely

---
 .../core/controller/AccountController.scala   |  17 +-
 .../RepositorySettingsController.scala        |   4 +-
 .../core/account/edithook.scala.html          |  16 ++
 .../core/account/edithooks.scala.html         | 195 -----------------
 .../{webhook.scala.html => hooks.scala.html}  |   5 +-
 .../core/settings/edithook.scala.html         |  18 ++
 .../core/settings/edithookform.scala.html     | 191 +++++++++++++++++
 .../core/settings/edithooks.scala.html        | 197 ------------------
 8 files changed, 237 insertions(+), 406 deletions(-)
 create mode 100644 src/main/twirl/gitbucket/core/account/edithook.scala.html
 delete mode 100644 src/main/twirl/gitbucket/core/account/edithooks.scala.html
 rename src/main/twirl/gitbucket/core/account/{webhook.scala.html => hooks.scala.html} (90%)
 create mode 100644 src/main/twirl/gitbucket/core/settings/edithook.scala.html
 create mode 100644 src/main/twirl/gitbucket/core/settings/edithookform.scala.html
 delete mode 100644 src/main/twirl/gitbucket/core/settings/edithooks.scala.html

diff --git a/src/main/scala/gitbucket/core/controller/AccountController.scala b/src/main/scala/gitbucket/core/controller/AccountController.scala
index 9d45edbe7..1ac1a0d0f 100644
--- a/src/main/scala/gitbucket/core/controller/AccountController.scala
+++ b/src/main/scala/gitbucket/core/controller/AccountController.scala
@@ -317,10 +317,7 @@ trait AccountControllerBase extends AccountManagementControllerBase {
   get("/:userName/_hooks")(oneselfOnly {
     val userName = params("userName")
     getAccountByUserName(userName).map { account =>
-      gitbucket.core.account.html.webhook(account,
-        if(account.isGroupAccount) Nil else getGroupsByUserName(userName),
-        getAccountWebHooks(account.userName)
-      )
+      gitbucket.core.account.html.hooks(account, getAccountWebHooks(account.userName), flash.get("info"))
     } getOrElse NotFound()
   })
 
@@ -331,7 +328,7 @@ trait AccountControllerBase extends AccountManagementControllerBase {
     val userName = params("userName")
     getAccountByUserName(userName).map { account =>
       val webhook = AccountWebHook(userName, "", WebHookContentType.FORM, None)
-      html.edithooks(webhook, Set(WebHook.Push), account, if (account.isGroupAccount) Nil else getGroupsByUserName(userName), flash.get("info"), true)
+      html.edithook(webhook, Set(WebHook.Push), account, true)
     } getOrElse NotFound()
   })
 
@@ -360,11 +357,11 @@ trait AccountControllerBase extends AccountManagementControllerBase {
    */
   get("/:userName/_hooks/edit")(oneselfOnly {
     val userName = params("userName")
-    getAccountByUserName(userName).map { account =>
+    getAccountByUserName(userName).flatMap { account =>
       getAccountWebHook(userName, params("url")).map { case (webhook, events) =>
-        html.edithooks(webhook, events, account, if (account.isGroupAccount) Nil else getGroupsByUserName(userName), flash.get("info"), false)
-      } getOrElse NotFound()
-    }
+        html.edithook(webhook, events, account, false)
+      }
+    } getOrElse NotFound()
   })
 
   /**
@@ -381,7 +378,7 @@ trait AccountControllerBase extends AccountManagementControllerBase {
    * Send the test request to registered account web hook URLs.
    */
   ajaxPost("/:userName/_hooks/test")(oneselfOnly {
-    // TODO copied & pasted??
+    // TODO Is it possible to merge with [[RepositorySettingsController.ajaxPost]]?
     import scala.concurrent.duration._
     import scala.concurrent._
     import scala.util.control.NonFatal
diff --git a/src/main/scala/gitbucket/core/controller/RepositorySettingsController.scala b/src/main/scala/gitbucket/core/controller/RepositorySettingsController.scala
index 93fee33a2..7b154ce0f 100644
--- a/src/main/scala/gitbucket/core/controller/RepositorySettingsController.scala
+++ b/src/main/scala/gitbucket/core/controller/RepositorySettingsController.scala
@@ -222,7 +222,7 @@ trait RepositorySettingsControllerBase extends ControllerBase {
    */
   get("/:owner/:repository/settings/hooks/new")(ownerOnly { repository =>
     val webhook = RepositoryWebHook(repository.owner, repository.name, "", WebHookContentType.FORM, None)
-    html.edithooks(webhook, Set(WebHook.Push), repository, flash.get("info"), true)
+    html.edithook(webhook, Set(WebHook.Push), repository, true)
   })
 
   /**
@@ -311,7 +311,7 @@ trait RepositorySettingsControllerBase extends ControllerBase {
    */
   get("/:owner/:repository/settings/hooks/edit")(ownerOnly { repository =>
     getWebHook(repository.owner, repository.name, params("url")).map{ case (webhook, events) =>
-      html.edithooks(webhook, events, repository, flash.get("info"), false)
+      html.edithook(webhook, events, repository, false)
     } getOrElse NotFound()
   })
 
diff --git a/src/main/twirl/gitbucket/core/account/edithook.scala.html b/src/main/twirl/gitbucket/core/account/edithook.scala.html
new file mode 100644
index 000000000..2b44ef167
--- /dev/null
+++ b/src/main/twirl/gitbucket/core/account/edithook.scala.html
@@ -0,0 +1,16 @@
+@(webHook: gitbucket.core.model.AccountWebHook,
+  events: Set[gitbucket.core.model.WebHook.Event],
+  account: gitbucket.core.model.Account,
+  create: Boolean)(implicit context: gitbucket.core.controller.Context)
+@import gitbucket.core.view.helpers
+@gitbucket.core.html.main("Service Hooks"){
+  @gitbucket.core.account.html.menu("hooks", context.settings.ssh){
+    @gitbucket.core.settings.html.edithookform(
+      webHook, events, create,
+      helpers.url(account.userName) + "/_hooks/new",
+      helpers.url(account.userName) + "/_hooks/edit",
+      helpers.url(account.userName) + "/_hooks/delete",
+      helpers.url(account.userName) + "/_hooks/test"
+    )
+  }
+}
diff --git a/src/main/twirl/gitbucket/core/account/edithooks.scala.html b/src/main/twirl/gitbucket/core/account/edithooks.scala.html
deleted file mode 100644
index f2a49cb3f..000000000
--- a/src/main/twirl/gitbucket/core/account/edithooks.scala.html
+++ /dev/null
@@ -1,195 +0,0 @@
-@(webHook: gitbucket.core.model.AccountWebHook,
-  events: Set[gitbucket.core.model.WebHook.Event],
-  account: gitbucket.core.model.Account,
-  groupNames: List[String],
-  info: Option[Any],
-  create: Boolean)(implicit context: gitbucket.core.controller.Context)
-@import gitbucket.core.view.helpers
-@import gitbucket.core.model.WebHook._
-@import gitbucket.core.model.WebHookContentType
-@check(name: String, event: Event) = {
-  name="@(name).@event.name" value="on" @if(events(event)){checked}
-}
-@gitbucket.core.html.main("Service Hooks"){
-  @gitbucket.core.account.html.menu("hooks", context.settings.ssh){
-    <div class="panel panel-default">
-      <div class="panel-heading strong">Webhook / Manage webhook</div>
-      <div class="panel-body">
-        <form method="POST" validate="true">
-          <fieldset class="form-group">
-            <label class="strong">Payload URL</label>
-            <div>
-              <span class="error" id="error-url"></span>
-            </div>
-            @if(create){
-            <input type="text" name="url" id="url" value="@webHook.url" class="form-control" style="display: inline; width: 500px; vertical-align: middle;" required />
-            } else {
-            <input type="text" value="@webHook.url" class="form-control" style="display: inline; width: 500px; vertical-align: middle;" disabled />
-            <input type="hidden" value="@webHook.url" name="url" />
-            }
-            <button class="btn btn-default" id="test">Test Hook</button>
-          </fieldset>
-          <fieldset class="form-group">
-            <label class="strong">Content type</label>
-            <div></div>
-            <select name="ctype">
-              <option value="@WebHookContentType.FORM.code" @if(webHook.ctype == WebHookContentType.FORM){selected}>@WebHookContentType.FORM.ctype</option>
-              <option value="@WebHookContentType.JSON.code" @if(webHook.ctype == WebHookContentType.JSON){selected}>@WebHookContentType.JSON.ctype</option>
-            </select>
-          </fieldset>
-          <fieldset class="form-group">
-            <label class="strong">Security Token</label>
-            <div></div>
-            <input type="text" name="token" id="token" placeholder="leave blank for no X-Hub-Signature usage" value="@webHook.token" class="form-control" style="display: inline; width: 500px; vertical-align: middle;" />
-          </fieldset>
-          <hr />
-          <label class="strong">Which events would you like to trigger this webhook?</label>
-          <div>
-            <span class="error" id="error-events"></span>
-          </div>
-          <!--
-          <label class="checkbox"><input type="checkbox" @check("events",CommitComment) />Commit comment <small class="help-block">Commit or diff commented on. </small> </label>
-          <label class="checkbox"><input type="checkbox" @check("events",Create) />Create <small class="help-block">Branch, or tag created. </small> </label>
-          <label class="checkbox"><input type="checkbox" @check("events",Delete) />Delete <small class="help-block">Branch, or tag deleted. </small> </label>
-          <label class="checkbox"><input type="checkbox" @check("events",Deployment) />Deployment <small class="help-block">Repository deployed. </small> </label>
-          <label class="checkbox"><input type="checkbox" @check("events",DeploymentStatus) />Deployment status <small class="help-block">Deployment status updated from the API. </small> </label>
-          <label class="checkbox"><input type="checkbox" @check("events",Fork) />Fork <small class="help-block">Repository forked. </small> </label>
-          -->
-          <label class="checkbox"><input type="checkbox" @check("events",Gollum) />Gollum <span class="help-block normal">Wiki page updated. </span> </label>
-          <!--
-          <label class="checkbox"><input type="checkbox" @check("events",Member) />Member <small class="help-block">Collaborator added to a non-organization repository. </small> </label>
-          <label class="checkbox"><input type="checkbox" @check("events",PageBuild) />Page build <small class="help-block">Pages site built. </small> </label>
-          <label class="checkbox"><input type="checkbox" @check("events",Public) />Public <small class="help-block">Repository changes from private to public. </small> </label>
-          <label class="checkbox"><input type="checkbox" @check("events",Release) />Release <small class="help-block">Release published in a repository. </small> </label>
-          <label class="checkbox"><input type="checkbox" @check("events",TeamAdd) />Team add <small class="help-block">Team added or modified on a repository. </small> </label>
-          <label class="checkbox"><input type="checkbox" @check("events",Watch) />Watch <small class="help-block">User stars a repository.</small></label>
-          <label class="checkbox"><input type="checkbox" @check("events",Status) />Status <small class="help-block">Commit status updated from the API. </small> </label>
-          -->
-          <label class="checkbox"><input type="checkbox" @check("events",IssueComment) />Issue comment <span class="help-block normal">Issue commented on. </span> </label>
-          <label class="checkbox"><input type="checkbox" @check("events",Issues) />Issues <span class="help-block normal">Issue opened, closed<!-- , assigned, or labeled -->. </span> </label>
-          <label class="checkbox"><input type="checkbox" @check("events",PullRequest) />Pull request <span class="help-block normal">Pull request opened, closed<!-- , assigned, labeled -->, or synchronized. </span> </label>
-          <label class="checkbox"><input type="checkbox" @check("events",PullRequestReviewComment) />Pull request review comment <span class="help-block normal">Pull request diff commented on. </span> </label>
-          <label class="checkbox"><input type="checkbox" @check("events",Push) />Push <span class="help-block normal">Git push to a repository. </span> </label>
-          <div class="text-right">
-            @if(!create){
-              <input type="submit" class="btn btn-success" value="Update webhook" formaction="@helpers.url(account.userName)/_hooks/edit" />
-              <a href="@helpers.url(account.userName)/_hooks/delete?url=@helpers.urlEncode(webHook.url)" class="btn btn-danger" onclick="return confirm('delete webhook for @webHook.url ?')">
-                Delete webhook
-              </a>
-            } else {
-              <input type="submit" class="btn btn-success" value="Add webhook" formaction="@helpers.url(account.userName)/_hooks/new" />
-            }
-          </div>
-        </form>
-      </div>
-    </div>
-    <div class="modal" id="test-report-modal" role="dialog" tabindex="-1">
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-            <h3>WebHook Test</h3>
-          </div>
-          <div class="modal-body" style="max-height: 300px; overflow: auto;">
-            <p>request to <span id="test-modal-url" style="word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap;"></span></p>
-            <div id="test-report" style="display:none">
-              <ul class="nav nav-tabs" id="test-report-tab">
-                <li class="active"><a href="#request">Request</a></li>
-                <li><a href="#response">Response <span class="badge badge-success" id="res-status"></span></a></li>
-              </ul>
-              <div class="tab-content">
-                <div class="tab-pane active" id="request">
-                  <div id="req-errors" class="alert alert-error">
-                    ERROR<span id="req-errors-body"></span>
-                  </div>
-                  <div id="req-success" style="display:none">
-                    Headers
-                    <pre id="req-headers"></pre>
-                    Payload
-                    <pre id="req-payload"></pre>
-                  </div>
-                </div>
-                <div class="tab-pane" id="response">
-                  <div id="res-errors" class="alert alert-error">
-                    ERROR<span id="res-errors-body"></span>
-                  </div>
-                  <div id="res-success" style="display:none">
-                    Headers
-                    <pre id="res-headers"></pre>
-                    Body
-                    <pre id="res-body"></pre>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div><!-- /.modal-content -->
-      </div><!-- /.modal-dialog -->
-    </div><!-- /.modal -->
-<script>
-$(function(){
-  $('#test-report-tab a').click(function (e) {
-    e.preventDefault();
-    $(this).tab('show');
-  });
-  $('#test').click(function(e){
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-    e.preventDefault();
-    var url = this.form.url.value;
-    var token = this.form.token.value;
-    var ctype = this.form.ctype.value;
-    if(!/^https?:\/\/.+/.test(url)){
-      alert("invalid url");
-      return;
-    }
-    $("#test-modal-url").text(url)
-    $("#test-report-modal").modal('show')
-    $("#test-report").hide();
-    var targetUrl = '@helpers.url(account.userName)/_hooks/test?url=' + encodeURIComponent(url) + '&ctype=' + ctype + '&token=';
-    if (token) {
-      targetUrl = targetUrl + encodeURIComponent(token);
-    }
-    $.ajax({
-      method:'POST',
-      url:targetUrl,
-      success: function(e){
-        //console.log(e);
-        $('#test-report-tab a:first').tab('show');
-        $("#test-report").show();
-        $("#req-success").toggle(e.request && !e.request.error);
-        $("#req-errors").toggle(e.request && !!e.request.error);
-        $("#req-errors-body").text(e.request.error);
-        function headers(h){
-          h = h["headers"];
-          return h ? $.map(h, function(h){
-            return $("<div>").append($('<b>').text(h[0] + ":"),$('<span>').text(" " + h[1]))
-          }):"";
-        }
-        $("#req-headers").html(headers(e.request));
-        $("#req-payload").text(e.request && e.request.payload ? JSON.stringify(JSON.parse(e.request.payload),undefined,4) : "");
-        $("#res-success").toggle(e.response && !e.response.error);
-        $("#res-errors").toggle(e.response && !!e.response.error);
-        $("#res-errors-body").text(e.response.error);
-        var success = !!(e.response && e.response.status && /^2\d\d$/.test(e.response.status.statusCode));
-        $("#res-status").text((e.response && e.response.status && e.response.status.statusCode) || "ERROR");
-        $("#res-status").toggleClass("badge-success", success).toggleClass("badge-important", !success);
-        $("#res-headers").html(headers(e.response));
-        $("#res-body").text(e.response && e.response.body ? e.response.body : "");
-      },
-      error:function (e) {
-        if(e) {
-            console.log(e.responseText, e);
-            alert("request error ( http status " + e.status + " error on gitbugket or browser to gitbucket. show details on your javascript console )");
-        }else{
-            alert("unknown javascript error (please report to gitbucket team)");
-        }
-        $("#test-report-modal").modal('hide')
-      }
-    });
-    return false;
-  });
-})
-</script>
-  }
-}
diff --git a/src/main/twirl/gitbucket/core/account/webhook.scala.html b/src/main/twirl/gitbucket/core/account/hooks.scala.html
similarity index 90%
rename from src/main/twirl/gitbucket/core/account/webhook.scala.html
rename to src/main/twirl/gitbucket/core/account/hooks.scala.html
index a6b05db3b..34bfdc4ac 100644
--- a/src/main/twirl/gitbucket/core/account/webhook.scala.html
+++ b/src/main/twirl/gitbucket/core/account/hooks.scala.html
@@ -1,9 +1,10 @@
 @(account: gitbucket.core.model.Account,
-groupNames: List[String],
-webHooks: List[(gitbucket.core.model.AccountWebHook, Set[gitbucket.core.model.WebHook.Event])])(implicit context: gitbucket.core.controller.Context)
+  webHooks: List[(gitbucket.core.model.AccountWebHook, Set[gitbucket.core.model.WebHook.Event])],
+  info: Option[Any])(implicit context: gitbucket.core.controller.Context)
 @import gitbucket.core.view.helpers
 @gitbucket.core.html.main("Service Hooks"){
   @gitbucket.core.account.html.menu("hooks", context.settings.ssh){
+    @gitbucket.core.helper.html.information(info)
     <div class="panel panel-default">
       <div class="panel-heading strong">
         Webhooks
diff --git a/src/main/twirl/gitbucket/core/settings/edithook.scala.html b/src/main/twirl/gitbucket/core/settings/edithook.scala.html
new file mode 100644
index 000000000..44aafa0db
--- /dev/null
+++ b/src/main/twirl/gitbucket/core/settings/edithook.scala.html
@@ -0,0 +1,18 @@
+@(webHook: gitbucket.core.model.WebHook,
+  events: Set[gitbucket.core.model.WebHook.Event],
+  repository: gitbucket.core.service.RepositoryService.RepositoryInfo,
+  create: Boolean)(implicit context: gitbucket.core.controller.Context)
+@import gitbucket.core.view.helpers
+@gitbucket.core.html.main("Settings", Some(repository)){
+  @gitbucket.core.html.menu("settings", repository){
+    @gitbucket.core.settings.html.menu("hooks", repository){
+      @gitbucket.core.settings.html.edithookform(
+        webHook, events, create,
+        helpers.url(repository) + "/settings/hooks/new",
+        helpers.url(repository) + "/settings/hooks/edit",
+        helpers.url(repository) + "/settings/hooks/delete",
+        helpers.url(repository) + "/settings/hooks/test"
+      )
+    }
+  }
+}
diff --git a/src/main/twirl/gitbucket/core/settings/edithookform.scala.html b/src/main/twirl/gitbucket/core/settings/edithookform.scala.html
new file mode 100644
index 000000000..3eca7f0f8
--- /dev/null
+++ b/src/main/twirl/gitbucket/core/settings/edithookform.scala.html
@@ -0,0 +1,191 @@
+@(webHook: gitbucket.core.model.WebHook,
+  events: Set[gitbucket.core.model.WebHook.Event],
+  create: Boolean,
+  newButtonUrl: String,
+  editButtonUrl: String,
+  deleteButtonUrl: String,
+  testButtonUrl: String)(implicit context: gitbucket.core.controller.Context)
+@import gitbucket.core.view.helpers
+@import gitbucket.core.model.WebHook._
+@import gitbucket.core.model.WebHookContentType
+@check(name: String, event: Event) = {
+  name="@(name).@event.name" value="on" @if(events(event)){checked}
+}
+<div class="panel-heading strong">Webhook / Manage webhook</div>
+  <div class="panel-body">
+    <form method="POST" validate="true">
+      <fieldset class="form-group">
+        <label class="strong">Payload URL</label>
+        <div>
+          <span class="error" id="error-url"></span>
+        </div>
+        @if(create){
+          <input type="text" name="url" id="url" value="@webHook.url" class="form-control" style="display: inline; width: 500px; vertical-align: middle;" required />
+        } else {
+          <input type="text" value="@webHook.url" class="form-control" style="display: inline; width: 500px; vertical-align: middle;" disabled />
+          <input type="hidden" value="@webHook.url" name="url" />
+        }
+        <button class="btn btn-default" id="test">Test Hook</button>
+      </fieldset>
+      <fieldset class="form-group">
+        <label class="strong">Content type</label>
+        <div></div>
+        <select name="ctype" class="form-control" style="width: 500px;">
+          <option value="@WebHookContentType.FORM.code" @if(webHook.ctype == WebHookContentType.FORM){selected}>@WebHookContentType.FORM.ctype</option>
+          <option value="@WebHookContentType.JSON.code" @if(webHook.ctype == WebHookContentType.JSON){selected}>@WebHookContentType.JSON.ctype</option>
+        </select>
+      </fieldset>
+      <fieldset class="form-group">
+        <label class="strong">Security Token</label>
+        <div></div>
+        <input type="text" name="token" id="token" placeholder="leave blank for no X-Hub-Signature usage" value="@webHook.token" class="form-control" style="display: inline; width: 500px; vertical-align: middle;" />
+      </fieldset>
+      <hr />
+      <label class="strong">Which events would you like to trigger this webhook?</label>
+      <div>
+        <span class="error" id="error-events"></span>
+      </div>
+      <!--
+      <label class="checkbox"><input type="checkbox" @check("events",CommitComment) />Commit comment <small class="help-block">Commit or diff commented on. </small> </label>
+      <label class="checkbox"><input type="checkbox" @check("events",Create) />Create <small class="help-block">Branch, or tag created. </small> </label>
+      <label class="checkbox"><input type="checkbox" @check("events",Delete) />Delete <small class="help-block">Branch, or tag deleted. </small> </label>
+      <label class="checkbox"><input type="checkbox" @check("events",Deployment) />Deployment <small class="help-block">Repository deployed. </small> </label>
+      <label class="checkbox"><input type="checkbox" @check("events",DeploymentStatus) />Deployment status <small class="help-block">Deployment status updated from the API. </small> </label>
+      <label class="checkbox"><input type="checkbox" @check("events",Fork) />Fork <small class="help-block">Repository forked. </small> </label>
+      -->
+      <label class="checkbox"><input type="checkbox" @check("events",Gollum) />Gollum <span class="help-block normal">Wiki page updated. </span> </label>
+      <!--
+      <label class="checkbox"><input type="checkbox" @check("events",Member) />Member <small class="help-block">Collaborator added to a non-organization repository. </small> </label>
+      <label class="checkbox"><input type="checkbox" @check("events",PageBuild) />Page build <small class="help-block">Pages site built. </small> </label>
+      <label class="checkbox"><input type="checkbox" @check("events",Public) />Public <small class="help-block">Repository changes from private to public. </small> </label>
+      <label class="checkbox"><input type="checkbox" @check("events",Release) />Release <small class="help-block">Release published in a repository. </small> </label>
+      <label class="checkbox"><input type="checkbox" @check("events",TeamAdd) />Team add <small class="help-block">Team added or modified on a repository. </small> </label>
+      <label class="checkbox"><input type="checkbox" @check("events",Watch) />Watch <small class="help-block">User stars a repository.</small></label>
+      <label class="checkbox"><input type="checkbox" @check("events",Status) />Status <small class="help-block">Commit status updated from the API. </small> </label>
+      -->
+      <label class="checkbox"><input type="checkbox" @check("events",IssueComment) />Issue comment <span class="help-block normal">Issue commented on. </span> </label>
+      <label class="checkbox"><input type="checkbox" @check("events",Issues) />Issues <span class="help-block normal">Issue opened, closed<!-- , assigned, or labeled -->. </span> </label>
+      <label class="checkbox"><input type="checkbox" @check("events",PullRequest) />Pull request <span class="help-block normal">Pull request opened, closed<!-- , assigned, labeled -->, or synchronized. </span> </label>
+      <label class="checkbox"><input type="checkbox" @check("events",PullRequestReviewComment) />Pull request review comment <span class="help-block normal">Pull request diff commented on. </span> </label>
+      <label class="checkbox"><input type="checkbox" @check("events",Push) />Push <span class="help-block normal">Git push to a repository. </span> </label>
+      <div class="text-right">
+      @if(!create){
+        <input type="submit" class="btn btn-success" value="Update webhook" formaction="@editButtonUrl" />
+        <a href="@deleteButtonUrl?url=@helpers.urlEncode(webHook.url)" class="btn btn-danger" onclick="return confirm('delete webhook for @webHook.url ?')">
+          Delete webhook
+        </a>
+      } else {
+        <input type="submit" class="btn btn-success" value="Add webhook" formaction="@newButtonUrl" />
+      }
+      </div>
+    </form>
+  </div>
+</div>
+<div class="modal" id="test-report-modal" role="dialog" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h3>WebHook Test</h3>
+      </div>
+      <div class="modal-body" style="max-height: 300px; overflow: auto;">
+        <p>request to <span id="test-modal-url" style="word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap;"></span></p>
+        <div id="test-report" style="display:none">
+          <ul class="nav nav-tabs" id="test-report-tab">
+            <li class="active"><a href="#request">Request</a></li>
+            <li><a href="#response">Response <span class="badge badge-success" id="res-status"></span></a></li>
+          </ul>
+          <div class="tab-content">
+            <div class="tab-pane active" id="request">
+              <div id="req-errors" class="alert alert-error">
+                      ERROR<span id="req-errors-body"></span>
+                    </div>
+              <div id="req-success" style="display:none">
+                      Headers
+                <pre id="req-headers"></pre>
+                Payload
+                <pre id="req-payload"></pre>
+              </div>
+            </div>
+            <div class="tab-pane" id="response">
+              <div id="res-errors" class="alert alert-error">
+                      ERROR<span id="res-errors-body"></span>
+                    </div>
+              <div id="res-success" style="display:none">
+                      Headers
+                <pre id="res-headers"></pre>
+                Body
+                <pre id="res-body"></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+<script>
+$(function(){
+  $('#test-report-tab a').click(function (e) {
+    e.preventDefault();
+    $(this).tab('show');
+  });
+  $('#test').click(function(e){
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    e.preventDefault();
+    var url = this.form.url.value;
+    var token = this.form.token.value;
+    var ctype = this.form.ctype.value;
+    if(!/^https?:\/\/.+/.test(url)){
+      alert("invalid url");
+      return;
+    }
+    $("#test-modal-url").text(url)
+    $("#test-report-modal").modal('show')
+    $("#test-report").hide();
+    var targetUrl = '@testButtonUrl?url=' + encodeURIComponent(url) + '&ctype=' + ctype + '&token=';
+    if (token) {
+      targetUrl = targetUrl + encodeURIComponent(token);
+    }
+    $.ajax({
+      method:'POST',
+      url:targetUrl,
+      success: function(e){
+        //console.log(e);
+        $('#test-report-tab a:first').tab('show');
+        $("#test-report").show();
+        $("#req-success").toggle(e.request&&!e.request.error);
+        $("#req-errors").toggle(e.request&&!!e.request.error);
+        $("#req-errors-body").text(e.request.error);
+        function headers(h){
+          h = h["headers"];
+          return h ? $.map(h, function(h){
+            return $("<div>").append($('<b>').text(h[0] + ":"),$('<span>').text(" " + h[1]))
+          }):"";
+        }
+        $("#req-headers").html(headers(e.request));
+        $("#req-payload").text(e.request && e.request.payload ? JSON.stringify(JSON.parse(e.request.payload),undefined,4) : "");
+        $("#res-success").toggle(e.response && !e.response.error);
+        $("#res-errors").toggle(e.response && !!e.response.error);
+        $("#res-errors-body").text(e.response.error);
+        var success = !!(e.response && e.response.status && /^2\d\d$/.test(e.response.status.statusCode));
+        $("#res-status").text((e.response && e.response.status && e.response.status.statusCode) || "ERROR");
+        $("#res-status").toggleClass("badge-success", success).toggleClass("badge-important", !success);
+        $("#res-headers").html(headers(e.response));
+        $("#res-body").text(e.response && e.response.body ? e.response.body : "");
+      },
+      error:function (e) {
+        if(e) {
+          console.log(e.responseText, e);
+          alert("request error ( http status " + e.status + " error on gitbugket or browser to gitbucket. show details on your javascript console )");
+        }else{
+          alert("unknown javascript error (please report to gitbucket team)");
+        }
+        $("#test-report-modal").modal('hide')
+      }
+    });
+    return false;
+  });
+})
+</script>
diff --git a/src/main/twirl/gitbucket/core/settings/edithooks.scala.html b/src/main/twirl/gitbucket/core/settings/edithooks.scala.html
deleted file mode 100644
index 74089266b..000000000
--- a/src/main/twirl/gitbucket/core/settings/edithooks.scala.html
+++ /dev/null
@@ -1,197 +0,0 @@
-@(webHook: gitbucket.core.model.WebHook,
-  events: Set[gitbucket.core.model.WebHook.Event],
-  repository: gitbucket.core.service.RepositoryService.RepositoryInfo,
-  info: Option[Any],
-  create: Boolean)(implicit context: gitbucket.core.controller.Context)
-@import gitbucket.core.view.helpers
-@import gitbucket.core.model.WebHook._
-@import gitbucket.core.model.WebHookContentType
-@check(name: String, event: Event) = {
-  name="@(name).@event.name" value="on" @if(events(event)){checked}
-}
-@gitbucket.core.html.main("Settings", Some(repository)){
-  @gitbucket.core.html.menu("settings", repository){
-    @gitbucket.core.settings.html.menu("hooks", repository){
-      @gitbucket.core.helper.html.information(info)
-      <div class="panel panel-default">
-        <div class="panel-heading strong">Webhook / Manage webhook</div>
-        <div class="panel-body">
-          <form method="POST" validate="true">
-            <fieldset class="form-group">
-              <label class="strong">Payload URL</label>
-              <div>
-                <span class="error" id="error-url"></span>
-              </div>
-              @if(create){
-                <input type="text" name="url" id="url" value="@webHook.url" class="form-control" style="display: inline; width: 500px; vertical-align: middle;" required />
-              } else {
-                <input type="text" value="@webHook.url" class="form-control" style="display: inline; width: 500px; vertical-align: middle;" disabled />
-                <input type="hidden" value="@webHook.url" name="url" />
-              }
-              <button class="btn btn-default" id="test">Test Hook</button>
-            </fieldset>
-            <fieldset class="form-group">
-              <label class="strong">Content type</label>
-              <div></div>
-              <select name="ctype" class="form-control" style="width: 500px;">
-              	<option value="@WebHookContentType.FORM.code" @if(webHook.ctype == WebHookContentType.FORM){selected}>@WebHookContentType.FORM.ctype</option>
-              	<option value="@WebHookContentType.JSON.code" @if(webHook.ctype == WebHookContentType.JSON){selected}>@WebHookContentType.JSON.ctype</option>
-               </select>
-            </fieldset>
-            <fieldset class="form-group">
-              <label class="strong">Security Token</label>
-              <div></div>
-              <input type="text" name="token" id="token" placeholder="leave blank for no X-Hub-Signature usage" value="@webHook.token" class="form-control" style="display: inline; width: 500px; vertical-align: middle;" />
-            </fieldset>
-            <hr />
-            <label class="strong">Which events would you like to trigger this webhook?</label>
-            <div>
-              <span class="error" id="error-events"></span>
-            </div>
-            <!--
-            <label class="checkbox"><input type="checkbox" @check("events",CommitComment) />Commit comment <small class="help-block">Commit or diff commented on. </small> </label>
-            <label class="checkbox"><input type="checkbox" @check("events",Create) />Create <small class="help-block">Branch, or tag created. </small> </label>
-            <label class="checkbox"><input type="checkbox" @check("events",Delete) />Delete <small class="help-block">Branch, or tag deleted. </small> </label>
-            <label class="checkbox"><input type="checkbox" @check("events",Deployment) />Deployment <small class="help-block">Repository deployed. </small> </label>
-            <label class="checkbox"><input type="checkbox" @check("events",DeploymentStatus) />Deployment status <small class="help-block">Deployment status updated from the API. </small> </label>
-            <label class="checkbox"><input type="checkbox" @check("events",Fork) />Fork <small class="help-block">Repository forked. </small> </label>
-            -->
-            <label class="checkbox"><input type="checkbox" @check("events",Gollum) />Gollum <span class="help-block normal">Wiki page updated. </span> </label>
-            <!--
-            <label class="checkbox"><input type="checkbox" @check("events",Member) />Member <small class="help-block">Collaborator added to a non-organization repository. </small> </label>
-            <label class="checkbox"><input type="checkbox" @check("events",PageBuild) />Page build <small class="help-block">Pages site built. </small> </label>
-            <label class="checkbox"><input type="checkbox" @check("events",Public) />Public <small class="help-block">Repository changes from private to public. </small> </label>
-            <label class="checkbox"><input type="checkbox" @check("events",Release) />Release <small class="help-block">Release published in a repository. </small> </label>
-            <label class="checkbox"><input type="checkbox" @check("events",TeamAdd) />Team add <small class="help-block">Team added or modified on a repository. </small> </label>
-            <label class="checkbox"><input type="checkbox" @check("events",Watch) />Watch <small class="help-block">User stars a repository.</small></label>
-            <label class="checkbox"><input type="checkbox" @check("events",Status) />Status <small class="help-block">Commit status updated from the API. </small> </label>
-            -->
-            <label class="checkbox"><input type="checkbox" @check("events",IssueComment) />Issue comment <span class="help-block normal">Issue commented on. </span> </label>
-            <label class="checkbox"><input type="checkbox" @check("events",Issues) />Issues <span class="help-block normal">Issue opened, closed<!-- , assigned, or labeled -->. </span> </label>
-            <label class="checkbox"><input type="checkbox" @check("events",PullRequest) />Pull request <span class="help-block normal">Pull request opened, closed<!-- , assigned, labeled -->, or synchronized. </span> </label>
-            <label class="checkbox"><input type="checkbox" @check("events",PullRequestReviewComment) />Pull request review comment <span class="help-block normal">Pull request diff commented on. </span> </label>
-            <label class="checkbox"><input type="checkbox" @check("events",Push) />Push <span class="help-block normal">Git push to a repository. </span> </label>
-            <div class="text-right">
-              @if(!create){
-                <input type="submit" class="btn btn-success" value="Update webhook" formaction="@helpers.url(repository)/settings/hooks/edit" />
-                <a href="@helpers.url(repository)/settings/hooks/delete?url=@helpers.urlEncode(webHook.url)" class="btn btn-danger" onclick="return confirm('delete webhook for @webHook.url ?')">
-                  Delete webhook
-                </a>
-              } else {
-                <input type="submit" class="btn btn-success" value="Add webhook" formaction="@helpers.url(repository)/settings/hooks/new" />
-              }
-            </div>
-          </form>
-        </div>
-      </div>
-      <div class="modal" id="test-report-modal" role="dialog" tabindex="-1">
-        <div class="modal-dialog">
-          <div class="modal-content">
-            <div class="modal-header">
-              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-              <h3>WebHook Test</h3>
-            </div>
-            <div class="modal-body" style="max-height: 300px; overflow: auto;">
-              <p>request to <span id="test-modal-url" style="word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap;"></span></p>
-              <div id="test-report" style="display:none">
-                <ul class="nav nav-tabs" id="test-report-tab">
-                  <li class="active"><a href="#request">Request</a></li>
-                  <li><a href="#response">Response <span class="badge badge-success" id="res-status"></span></a></li>
-                </ul>
-                <div class="tab-content">
-                  <div class="tab-pane active" id="request">
-                    <div id="req-errors" class="alert alert-error">
-                      ERROR<span id="req-errors-body"></span>
-                    </div>
-                    <div id="req-success" style="display:none">
-                      Headers
-                      <pre id="req-headers"></pre>
-                      Payload
-                      <pre id="req-payload"></pre>
-                    </div>
-                  </div>
-                  <div class="tab-pane" id="response">
-                    <div id="res-errors" class="alert alert-error">
-                      ERROR<span id="res-errors-body"></span>
-                    </div>
-                    <div id="res-success" style="display:none">
-                      Headers
-                      <pre id="res-headers"></pre>
-                      Body
-                      <pre id="res-body"></pre>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div><!-- /.modal-content -->
-        </div><!-- /.modal-dialog -->
-      </div><!-- /.modal -->
-<script>
-$(function(){
-  $('#test-report-tab a').click(function (e) {
-    e.preventDefault();
-    $(this).tab('show');
-  });
-  $('#test').click(function(e){
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-    e.preventDefault();
-    var url = this.form.url.value;
-    var token = this.form.token.value;
-    var ctype = this.form.ctype.value;
-    if(!/^https?:\/\/.+/.test(url)){
-      alert("invalid url");
-      return;
-    }
-    $("#test-modal-url").text(url)
-    $("#test-report-modal").modal('show')
-    $("#test-report").hide();
-    var targetUrl = '@helpers.url(repository)/settings/hooks/test?url=' + encodeURIComponent(url) + '&ctype=' + ctype + '&token=';
-    if (token) {
-      targetUrl = targetUrl + encodeURIComponent(token);
-    }
-    $.ajax({
-      method:'POST',
-      url:targetUrl,
-      success: function(e){
-        //console.log(e);
-        $('#test-report-tab a:first').tab('show');
-        $("#test-report").show();
-        $("#req-success").toggle(e.request&&!e.request.error);
-        $("#req-errors").toggle(e.request&&!!e.request.error);
-        $("#req-errors-body").text(e.request.error);
-        function headers(h){
-          h = h["headers"];
-          return h ? $.map(h, function(h){
-            return $("<div>").append($('<b>').text(h[0] + ":"),$('<span>').text(" " + h[1]))
-          }):"";
-        }
-        $("#req-headers").html(headers(e.request));
-        $("#req-payload").text(e.request && e.request.payload ? JSON.stringify(JSON.parse(e.request.payload),undefined,4) : "");
-        $("#res-success").toggle(e.response && !e.response.error);
-        $("#res-errors").toggle(e.response && !!e.response.error);
-        $("#res-errors-body").text(e.response.error);
-        var success = !!(e.response && e.response.status && /^2\d\d$/.test(e.response.status.statusCode));
-        $("#res-status").text((e.response && e.response.status && e.response.status.statusCode) || "ERROR");
-        $("#res-status").toggleClass("badge-success", success).toggleClass("badge-important", !success);
-        $("#res-headers").html(headers(e.response));
-        $("#res-body").text(e.response && e.response.body ? e.response.body : "");
-      },
-      error:function (e) {
-        if(e) {
-            console.log(e.responseText, e);
-            alert("request error ( http status " + e.status + " error on gitbugket or browser to gitbucket. show details on your javascript console )");
-        }else{
-            alert("unknown javascript error (please report to gitbucket team)");
-        }
-        $("#test-report-modal").modal('hide')
-      }
-    });
-    return false;
-  });
-})
-</script>
-    }
-  }
-}