@(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.account.html.main(account, groupNames, "webhooks"){
<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 <small class="help-block">Wiki page updated. </small> </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.responce && !e.responce.error);
        $("#res-errors").toggle(e.responce && !!e.responce.error);
        $("#res-errors-body").text(e.responce.error);
        var success = !!(e.responce && e.responce.status && /^2\d\d$/.test(e.responce.status.statusCode));
        $("#res-status").text((e.responce && e.responce.status && e.responce.status.statusCode) || "ERROR");
        $("#res-status").toggleClass("badge-success", success).toggleClass("badge-important", !success);
        $("#res-headers").html(headers(e.responce));
        $("#res-body").text(e.responce && e.responce.body ? e.responce.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>
}