new create webhook UI

cmd/web.go

@@ -411,11 +411,11 @@ func runWeb(ctx *cli.Context) {
 				m.Group("/hooks", func() {
 					m.Get("", org.Webhooks)
 					m.Post("/delete", org.DeleteWebhook)
+					m.Get("/:type/new", repo.WebhooksNew)
+					m.Post("/gogs/new", bindIgnErr(auth.NewWebhookForm{}), repo.WebHooksNewPost)
+					m.Post("/slack/new", bindIgnErr(auth.NewSlackHookForm{}), repo.SlackHooksNewPost)
 				})
 
-				m.Get("/hooks/new", repo.WebHooksNew)
-				m.Post("/hooks/gogs/new", bindIgnErr(auth.NewWebhookForm{}), repo.WebHooksNewPost)
-				m.Post("/hooks/slack/new", bindIgnErr(auth.NewSlackHookForm{}), repo.SlackHooksNewPost)
 				m.Get("/hooks/:id", repo.WebHooksEdit)
 				m.Post("/hooks/gogs/:id", bindIgnErr(auth.NewWebhookForm{}), repo.WebHooksEditPost)
 				m.Post("/hooks/slack/:id", bindIgnErr(auth.NewSlackHookForm{}), repo.SlackHooksEditPost)
@@ -449,10 +449,11 @@ func runWeb(ctx *cli.Context) {
 			m.Group("/hooks", func() {
 				m.Get("", repo.Webhooks)
 				m.Post("/delete", repo.DeleteWebhook)
+				m.Get("/:type/new", repo.WebhooksNew)
+				m.Post("/gogs/new", bindIgnErr(auth.NewWebhookForm{}), repo.WebHooksNewPost)
+				m.Post("/slack/new", bindIgnErr(auth.NewSlackHookForm{}), repo.SlackHooksNewPost)
 			})
-			m.Get("/hooks/new", repo.WebHooksNew)
-			m.Post("/hooks/gogs/new", bindIgnErr(auth.NewWebhookForm{}), repo.WebHooksNewPost)
-			m.Post("/hooks/slack/new", bindIgnErr(auth.NewSlackHookForm{}), repo.SlackHooksNewPost)
+
 			m.Get("/hooks/:id", repo.WebHooksEdit)
 			m.Post("/hooks/gogs/:id", bindIgnErr(auth.NewWebhookForm{}), repo.WebHooksEditPost)
 			m.Post("/hooks/slack/:id", bindIgnErr(auth.NewSlackHookForm{}), repo.SlackHooksEditPost)

config.codekit

@@ -235,6 +235,17 @@
 		"outputPathIsSetByUser": 0,
 		"processed": 1
 		},
+	"\/public\/img\/slack.png": {
+		"fileType": 32768,
+		"ignore": 0,
+		"ignoreWasSetByUser": 0,
+		"initialSize": 1633,
+		"inputAbbreviatedPath": "\/public\/img\/slack.png",
+		"outputAbbreviatedPath": "\/public\/img\/slack.png",
+		"outputPathIsOutsideProject": 0,
+		"outputPathIsSetByUser": 0,
+		"processed": 0
+		},
 	"\/public\/less\/_admin.less": {
 		"allowInsecureImports": 0,
 		"createSourceMap": 0,

gogs.go

@@ -17,7 +17,7 @@ import (
 	"github.com/gogits/gogs/modules/setting"
 )
 
-const APP_VER = "0.6.6.0826 Beta"
+const APP_VER = "0.6.6.0827 Beta"
 
 func init() {
 	runtime.GOMAXPROCS(runtime.NumCPU())

modules/auth/repo_form.go

@@ -65,13 +65,17 @@ func (f *RepoSettingForm) Validate(ctx *macaron.Context, errs binding.Errors) bi
 //   \__/\  /  \___  >___  /___|  /___|  /\____/|__|_ \
 //        \/       \/    \/     \/     \/            \/
 
+type WebhookForm struct {
+	HookType string `binding:"Required"`
+	PushOnly bool
+	Active   bool
+}
+
 type NewWebhookForm struct {
-	HookTaskType string `form:"hook_type" binding:"Required"`
-	PayloadUrl   string `form:"payload_url" binding:"Required;Url"`
-	ContentType  string `form:"content_type" binding:"Required"`
-	Secret       string `form:"secret"`
-	PushOnly     bool   `form:"push_only"`
-	Active       bool   `form:"active"`
+	PayloadURL  string `binding:"Required;Url"`
+	ContentType int    `binding:"Required"`
+	Secret      string
+	WebhookForm
 }
 
 func (f *NewWebhookForm) Validate(ctx *macaron.Context, errs binding.Errors) binding.Errors {
@@ -79,11 +83,9 @@ func (f *NewWebhookForm) Validate(ctx *macaron.Context, errs binding.Errors) bin
 }
 
 type NewSlackHookForm struct {
-	HookTaskType string `form:"hook_type" binding:"Required"`
-	PayloadUrl   string `form:"payload_url" binding:"Required`
-	Channel      string `form:"channel" binding:"Required"`
-	PushOnly     bool   `form:"push_only"`
-	Active       bool   `form:"active"`
+	PayloadURL string `binding:"Required`
+	Channel    string `binding:"Required"`
+	WebhookForm
 }
 
 func (f *NewSlackHookForm) Validate(ctx *macaron.Context, errs binding.Errors) binding.Errors {

modules/middleware/context.go

@@ -26,6 +26,27 @@ import (
 	"github.com/gogits/gogs/modules/setting"
 )
 
+type RepoContext struct {
+	AccessMode   models.AccessMode
+	IsWatching   bool
+	IsBranch     bool
+	IsTag        bool
+	IsCommit     bool
+	Repository   *models.Repository
+	Owner        *models.User
+	Commit       *git.Commit
+	Tag          *git.Tag
+	GitRepo      *git.Repository
+	BranchName   string
+	TagName      string
+	TreeName     string
+	CommitId     string
+	RepoLink     string
+	CloneLink    models.CloneLink
+	CommitsCount int
+	Mirror       *models.Mirror
+}
+
 // Context represents context of a request.
 type Context struct {
 	*macaron.Context
@@ -51,27 +72,6 @@ type Context struct {
 	}
 }
 
-type RepoContext struct {
-	AccessMode   models.AccessMode
-	IsWatching   bool
-	IsBranch     bool
-	IsTag        bool
-	IsCommit     bool
-	Repository   *models.Repository
-	Owner        *models.User
-	Commit       *git.Commit
-	Tag          *git.Tag
-	GitRepo      *git.Repository
-	BranchName   string
-	TagName      string
-	TreeName     string
-	CommitId     string
-	RepoLink     string
-	CloneLink    models.CloneLink
-	CommitsCount int
-	Mirror       *models.Mirror
-}
-
 // IsOwner returns true if current user is the owner of repository.
 func (r RepoContext) IsOwner() bool {
 	return r.AccessMode >= models.ACCESS_MODE_OWNER

modules/setting/setting.go

@@ -81,6 +81,7 @@ var (
 		QueueLength    int
 		DeliverTimeout int
 		SkipTLSVerify  bool
+		Types          []string
 	}
 
 	// Repository settings.
@@ -599,6 +600,7 @@ func newWebhookService() {
 	Webhook.QueueLength = sec.Key("QUEUE_LENGTH").MustInt(1000)
 	Webhook.DeliverTimeout = sec.Key("DELIVER_TIMEOUT").MustInt(5)
 	Webhook.SkipTLSVerify = sec.Key("SKIP_TLS_VERIFY").MustBool()
+	Webhook.Types = []string{"gogs", "slack"}
 }
 
 func NewServices() {

public/less/_form.less

@@ -79,4 +79,12 @@
 			width: 70%!important;
 		}
 	}
+}
+
+.new.webhook {
+	form {
+		.help {
+			margin-left: 25px;
+		}
+	}
 }

routers/repo/setting.go

@@ -247,7 +247,7 @@ func Collaboration(ctx *middleware.Context) {
 }
 
 func Webhooks(ctx *middleware.Context) {
-	ctx.Data["Title"] = ctx.Tr("repo.settings")
+	ctx.Data["Title"] = ctx.Tr("repo.settings.hooks")
 	ctx.Data["PageIsSettingsHooks"] = true
 	ctx.Data["BaseLink"] = ctx.Repo.RepoLink
 	ctx.Data["Description"] = ctx.Tr("repo.settings.hooks_desc", "http://gogs.io/docs/features/webhook.html")
@@ -262,65 +262,100 @@ func Webhooks(ctx *middleware.Context) {
 	ctx.HTML(200, HOOKS)
 }
 
-func renderHookTypes(ctx *middleware.Context) {
-	ctx.Data["HookTypes"] = []string{"Gogs", "Slack"}
-	ctx.Data["HookType"] = "Gogs"
+type OrgRepoCtx struct {
+	OrgID       int64
+	RepoID      int64
+	Link        string
+	NewTemplate base.TplName
 }
 
-func WebHooksNew(ctx *middleware.Context) {
-	ctx.Data["Title"] = ctx.Tr("repo.settings")
+// getOrgRepoCtx determines whether this is a repo context or organization context.
+func getOrgRepoCtx(ctx *middleware.Context) (*OrgRepoCtx, error) {
+	if len(ctx.Repo.RepoLink) > 0 {
+		return &OrgRepoCtx{
+			RepoID:      ctx.Repo.Repository.ID,
+			Link:        ctx.Repo.RepoLink,
+			NewTemplate: HOOK_NEW,
+		}, nil
+	}
+
+	if len(ctx.Org.OrgLink) > 0 {
+		return &OrgRepoCtx{
+			OrgID:       ctx.Org.Organization.Id,
+			Link:        ctx.Org.OrgLink,
+			NewTemplate: ORG_HOOK_NEW,
+		}, nil
+	}
+
+	return nil, errors.New("Unable to set OrgRepo context")
+}
+
+func checkHookType(ctx *middleware.Context) string {
+	hookType := strings.ToLower(ctx.Params(":type"))
+	if !com.IsSliceContainsStr(setting.Webhook.Types, hookType) {
+		ctx.Handle(404, "checkHookType", nil)
+		return ""
+	}
+	return hookType
+}
+
+func WebhooksNew(ctx *middleware.Context) {
+	ctx.Data["Title"] = ctx.Tr("repo.settings.add_webhook")
 	ctx.Data["PageIsSettingsHooks"] = true
 	ctx.Data["PageIsSettingsHooksNew"] = true
 	ctx.Data["Webhook"] = models.Webhook{HookEvent: &models.HookEvent{}}
-	renderHookTypes(ctx)
 
 	orCtx, err := getOrgRepoCtx(ctx)
 	if err != nil {
-		ctx.Handle(500, "WebHooksNew(getOrgRepoCtx)", err)
+		ctx.Handle(500, "getOrgRepoCtx", err)
 		return
 	}
 
+	ctx.Data["HookType"] = checkHookType(ctx)
+	if ctx.Written() {
+		return
+	}
+	ctx.Data["BaseLink"] = orCtx.Link
+
 	ctx.HTML(200, orCtx.NewTemplate)
 }
 
 func WebHooksNewPost(ctx *middleware.Context, form auth.NewWebhookForm) {
-	ctx.Data["Title"] = ctx.Tr("repo.settings")
+	ctx.Data["Title"] = ctx.Tr("repo.settings.add_webhook")
 	ctx.Data["PageIsSettingsHooks"] = true
 	ctx.Data["PageIsSettingsHooksNew"] = true
 	ctx.Data["Webhook"] = models.Webhook{HookEvent: &models.HookEvent{}}
-	renderHookTypes(ctx)
+	ctx.Data["HookType"] = "gogs"
 
 	orCtx, err := getOrgRepoCtx(ctx)
 	if err != nil {
-		ctx.Handle(500, "WebHooksNewPost(getOrgRepoCtx)", err)
+		ctx.Handle(500, "getOrgRepoCtx", err)
 		return
 	}
+	ctx.Data["BaseLink"] = orCtx.Link
 
 	if ctx.HasError() {
 		ctx.HTML(200, orCtx.NewTemplate)
 		return
 	}
 
-	// FIXME: code too old here, sync with APIs
-	ct := models.JSON
-	if form.ContentType == "2" {
-		ct = models.FORM
+	contentType := models.JSON
+	if models.HookContentType(form.ContentType) == models.FORM {
+		contentType = models.FORM
 	}
 
 	w := &models.Webhook{
-		RepoID:      orCtx.RepoId,
-		URL:         form.PayloadUrl,
-		ContentType: ct,
+		RepoID:      orCtx.RepoID,
+		URL:         form.PayloadURL,
+		ContentType: contentType,
 		Secret:      form.Secret,
 		HookEvent: &models.HookEvent{
 			PushOnly: form.PushOnly,
 		},
 		IsActive:     form.Active,
 		HookTaskType: models.GOGS,
-		Meta:         "",
-		OrgID:        orCtx.OrgId,
+		OrgID:        orCtx.OrgID,
 	}
-
 	if err := w.UpdateEvent(); err != nil {
 		ctx.Handle(500, "UpdateEvent", err)
 		return
@@ -334,17 +369,18 @@ func WebHooksNewPost(ctx *middleware.Context, form auth.NewWebhookForm) {
 }
 
 func WebHooksEdit(ctx *middleware.Context) {
-	ctx.Data["Title"] = ctx.Tr("repo.settings")
+	ctx.Data["Title"] = ctx.Tr("repo.settings.update_webhook")
 	ctx.Data["PageIsSettingsHooks"] = true
 	ctx.Data["PageIsSettingsHooksEdit"] = true
 
-	hookId := com.StrTo(ctx.Params(":id")).MustInt64()
-	if hookId == 0 {
-		ctx.Handle(404, "setting.WebHooksEdit", nil)
+	orCtx, err := getOrgRepoCtx(ctx)
+	if err != nil {
+		ctx.Handle(500, "getOrgRepoCtx", err)
 		return
 	}
+	ctx.Data["BaseLink"] = orCtx.Link
 
-	w, err := models.GetWebhookById(hookId)
+	w, err := models.GetWebhookById(ctx.ParamsInt64(":id"))
 	if err != nil {
 		if err == models.ErrWebhookNotExist {
 			ctx.Handle(404, "GetWebhookById", nil)
@@ -354,36 +390,25 @@ func WebHooksEdit(ctx *middleware.Context) {
 		return
 	}
 
-	// set data per HookTaskType
 	switch w.HookTaskType {
 	case models.SLACK:
 		ctx.Data["SlackHook"] = w.GetSlackHook()
-		ctx.Data["HookType"] = "Slack"
+		ctx.Data["HookType"] = "slack"
 	default:
-		ctx.Data["HookType"] = "Gogs"
+		ctx.Data["HookType"] = "gogs"
 	}
 	w.GetEvent()
 	ctx.Data["Webhook"] = w
-	orCtx, err := getOrgRepoCtx(ctx)
-	if err != nil {
-		ctx.Handle(500, "WebHooksEdit(getOrgRepoCtx)", err)
-		return
-	}
+
 	ctx.HTML(200, orCtx.NewTemplate)
 }
 
 func WebHooksEditPost(ctx *middleware.Context, form auth.NewWebhookForm) {
-	ctx.Data["Title"] = ctx.Tr("repo.settings")
+	ctx.Data["Title"] = ctx.Tr("repo.settings.update_webhook")
 	ctx.Data["PageIsSettingsHooks"] = true
 	ctx.Data["PageIsSettingsHooksEdit"] = true
 
-	hookId := com.StrTo(ctx.Params(":id")).MustInt64()
-	if hookId == 0 {
-		ctx.Handle(404, "setting.WebHooksEditPost", nil)
-		return
-	}
-
-	w, err := models.GetWebhookById(hookId)
+	w, err := models.GetWebhookById(ctx.ParamsInt64(":id"))
 	if err != nil {
 		if err == models.ErrWebhookNotExist {
 			ctx.Handle(404, "GetWebhookById", nil)
@@ -406,20 +431,22 @@ func WebHooksEditPost(ctx *middleware.Context, form auth.NewWebhookForm) {
 
 	orCtx, err := getOrgRepoCtx(ctx)
 	if err != nil {
-		ctx.Handle(500, "WebHooksEditPost(getOrgRepoCtx)", err)
+		ctx.Handle(500, "getOrgRepoCtx", err)
 		return
 	}
+	ctx.Data["BaseLink"] = orCtx.Link
+
 	if ctx.HasError() {
 		ctx.HTML(200, orCtx.NewTemplate)
 		return
 	}
 
 	ct := models.JSON
-	if form.ContentType == "2" {
+	if models.HookContentType(form.ContentType) == models.FORM {
 		ct = models.FORM
 	}
 
-	w.URL = form.PayloadUrl
+	w.URL = form.PayloadURL
 	w.ContentType = ct
 	w.Secret = form.Secret
 	w.HookEvent = &models.HookEvent{
@@ -435,7 +462,7 @@ func WebHooksEditPost(ctx *middleware.Context, form auth.NewWebhookForm) {
 	}
 
 	ctx.Flash.Success(ctx.Tr("repo.settings.update_hook_success"))
-	ctx.Redirect(fmt.Sprintf("%s/settings/hooks/%d", orCtx.Link, hookId))
+	ctx.Redirect(orCtx.Link + "/settings/hooks")
 }
 
 func SlackHooksNewPost(ctx *middleware.Context, form auth.NewSlackHookForm) {
@@ -464,8 +491,8 @@ func SlackHooksNewPost(ctx *middleware.Context, form auth.NewSlackHookForm) {
 	}
 
 	w := &models.Webhook{
-		RepoID:      orCtx.RepoId,
-		URL:         form.PayloadUrl,
+		RepoID:      orCtx.RepoID,
+		URL:         form.PayloadURL,
 		ContentType: models.JSON,
 		Secret:      "",
 		HookEvent: &models.HookEvent{
@@ -474,7 +501,7 @@ func SlackHooksNewPost(ctx *middleware.Context, form auth.NewSlackHookForm) {
 		IsActive:     form.Active,
 		HookTaskType: models.SLACK,
 		Meta:         string(meta),
-		OrgID:        orCtx.OrgId,
+		OrgID:        orCtx.OrgID,
 	}
 	if err := w.UpdateEvent(); err != nil {
 		ctx.Handle(500, "UpdateEvent", err)
@@ -529,7 +556,7 @@ func SlackHooksEditPost(ctx *middleware.Context, form auth.NewSlackHookForm) {
 		return
 	}
 
-	w.URL = form.PayloadUrl
+	w.URL = form.PayloadURL
 	w.Meta = string(meta)
 	w.HookEvent = &models.HookEvent{
 		PushOnly: form.PushOnly,
@@ -559,34 +586,6 @@ func DeleteWebhook(ctx *middleware.Context) {
 	})
 }
 
-type OrgRepoCtx struct {
-	OrgId       int64
-	RepoId      int64
-	Link        string
-	NewTemplate base.TplName
-}
-
-// determines whether this is a repo context or organization context
-func getOrgRepoCtx(ctx *middleware.Context) (*OrgRepoCtx, error) {
-	if _, ok := ctx.Data["RepoLink"]; ok {
-		return &OrgRepoCtx{
-			OrgId:       int64(0),
-			RepoId:      ctx.Repo.Repository.ID,
-			Link:        ctx.Repo.RepoLink,
-			NewTemplate: HOOK_NEW,
-		}, nil
-	} else if _, ok := ctx.Data["OrgLink"]; ok {
-		return &OrgRepoCtx{
-			OrgId:       ctx.Org.Organization.Id,
-			RepoId:      int64(0),
-			Link:        ctx.Org.OrgLink,
-			NewTemplate: ORG_HOOK_NEW,
-		}, nil
-	} else {
-		return &OrgRepoCtx{}, errors.New("Unable to set OrgRepo context")
-	}
-}
-
 func TriggerHook(ctx *middleware.Context) {
 	u, err := models.GetUserByName(ctx.Params(":username"))
 	if err != nil {
@@ -611,7 +610,7 @@ func TriggerHook(ctx *middleware.Context) {
 }
 
 func GitHooks(ctx *middleware.Context) {
-	ctx.Data["Title"] = ctx.Tr("repo.settings")
+	ctx.Data["Title"] = ctx.Tr("repo.settings.githooks")
 	ctx.Data["PageIsSettingsGitHooks"] = true
 
 	hooks, err := ctx.Repo.GitRepo.Hooks()
@@ -625,7 +624,7 @@ func GitHooks(ctx *middleware.Context) {
 }
 
 func GitHooksEdit(ctx *middleware.Context) {
-	ctx.Data["Title"] = ctx.Tr("repo.settings")
+	ctx.Data["Title"] = ctx.Tr("repo.settings.githooks")
 	ctx.Data["PageIsSettingsGitHooks"] = true
 
 	name := ctx.Params(":name")
@@ -662,7 +661,7 @@ func GitHooksEditPost(ctx *middleware.Context) {
 }
 
 func DeployKeys(ctx *middleware.Context) {
-	ctx.Data["Title"] = ctx.Tr("repo.settings")
+	ctx.Data["Title"] = ctx.Tr("repo.settings.deploy_keys")
 	ctx.Data["PageIsSettingsKeys"] = true
 
 	keys, err := models.ListDeployKeys(ctx.Repo.Repository.ID)
@@ -676,7 +675,7 @@ func DeployKeys(ctx *middleware.Context) {
 }
 
 func DeployKeysPost(ctx *middleware.Context, form auth.AddSSHKeyForm) {
-	ctx.Data["Title"] = ctx.Tr("repo.settings")
+	ctx.Data["Title"] = ctx.Tr("repo.settings.deploy_keys")
 	ctx.Data["PageIsSettingsKeys"] = true
 
 	keys, err := models.ListDeployKeys(ctx.Repo.Repository.ID)

templates/.VERSION

@@ -1 +1 @@
-0.6.6.0826 Beta
+0.6.6.0827 Beta

templates/org/settings/hook_new.tmpl

@@ -1,37 +1,29 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-{{template "org/base/header" .}}
-<div id="setting-wrapper" class="main-wrapper">
-    <div id="org-setting" class="container clear">
-        {{template "org/settings/nav" .}}
-        <div class="grid-4-5 left">
-            <div class="setting-content">
-                {{template "ng/base/alert" .}}
-                <div id="setting-content">
-                    <div id="repo-hooks-panel" class="panel panel-radius">
-                        <div class="panel-header">
-                          <strong>{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}</strong>
-                        </div>
-                        {{template "repo/settings/hook_types" .}}
-                        {{template "repo/settings/hook_gogs" .}}
-                        {{template "repo/settings/hook_slack" .}}
-                    </div>
-                </div>
-                {{if .PageIsSettingsHooksEdit}}
-              <br>
-                <div id="setting-content">
-                    <div id="repo-hooks-history-panel" class="panel panel-radius">
-                        <div class="panel-header">
-                          <strong>{{.i18n.Tr "repo.settings.recent_deliveries"}}</strong>
-                        </div>
-                        <ul class="panel-body setting-list">
-                            <li>Coming soon!</li>
-                        </ul>
-                    </div>
-              </div>
-              {{end}}
-            </div>
+{{template "base/head" .}}
+<div class="organization settings new webhook">
+  {{template "org/header" .}}
+  <div class="ui container">
+    <div class="ui grid">
+      {{template "org/settings/navbar" .}}
+      <div class="twelve wide column content">
+        {{template "base/alert" .}}
+        <h4 class="ui top attached header">
+          {{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}
+          <div class="ui right">
+            {{if eq .HookType "gogs"}}
+            <img class="img-13" src="{{AppSubUrl}}/img/favicon.png">
+            {{else if eq .HookType "slack"}}
+            <img class="img-13" src="{{AppSubUrl}}/img/slack.png">
+            {{end}}
+          </div>
+        </h4>
+        <div class="ui attached segment">
+          {{template "repo/settings/hook_gogs" .}}
+          {{template "repo/settings/hook_slack" .}}
         </div>
+
+        {{template "repo/settings/hook_history" .}}
+      </div>
+    </div>
   </div>
 </div>
-{{template "ng/base/footer" .}}
+{{template "base/footer" .}}

templates/repo/settings/hook_delete_modal.tmpl

@@ -0,0 +1,19 @@
+<div class="ui small basic delete modal">
+  <div class="ui icon header">
+    <i class="trash icon"></i>
+    {{.i18n.Tr "repo.settings.webhook_deletion"}}
+  </div>
+  <div class="content">
+    <p>{{.i18n.Tr "repo.settings.webhook_deletion_desc"}}</p>
+  </div>
+  <div class="actions">
+    <div class="ui red basic inverted cancel button">
+      <i class="remove icon"></i>
+      {{.i18n.Tr "modal.no"}}
+    </div>
+    <div class="ui green basic inverted ok button">
+      <i class="checkmark icon"></i>
+      {{.i18n.Tr "modal.yes"}}
+    </div>
+  </div>
+</div>

templates/repo/settings/hook_gogs.tmpl

@@ -1,23 +1,28 @@
-<div id="gogs" class="{{if (and .PageIsSettingsHooksEdit (not (eq .HookType "Gogs")))}}hidden{{end}}">
-  <form class="form form-align panel-body repo-setting-form" id="repo-setting-form-gogs" action="{{if .RepoLink}}{{.RepoLink}}{{else if .OrgLink}}{{.OrgLink}}{{end}}/settings/hooks/gogs/{{if .PageIsSettingsHooksNew}}new{{else}}{{.Webhook.ID}}{{end}}" method="post">
-    {{.CsrfTokenHtml}}
-    <input type="hidden" name="hook_type" value="gogs">
-    <div class="text-center panel-desc">{{.i18n.Tr "repo.settings.add_webhook_desc" "http://gogs.io/docs/features/webhook.html" | Str2html}}</div>
-    <div class="field">
-        <label class="req" for="payload-url">{{.i18n.Tr "repo.settings.payload_url"}}</label>
-        <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="payload-url" name="payload_url" type="url" value="{{.Webhook.URL}}" required />
+{{if eq .HookType "gogs"}}
+<p>{{.i18n.Tr "repo.settings.add_webhook_desc" "http://gogs.io/docs/features/webhook.html" | Str2html}}</p>
+<form class="ui form" action="{{.BaseLink}}/settings/hooks/{{if .PageIsSettingsHooksNew}}gogs/new{{else}}{{.Webhook.ID}}{{end}}" method="post">
+  {{.CsrfTokenHtml}}
+  <div class="required field {{if .Err_PayloadURL}}error{{end}}">
+    <label for="payload_url">{{.i18n.Tr "repo.settings.payload_url"}}</label>
+    <input id="payload_url" name="payload_url" type="url" value="{{.Webhook.URL}}" autofocus required>
+  </div>
+  <div class="field">
+    <label>{{.i18n.Tr "repo.settings.content_type"}}</label>
+    <div class="ui selection dropdown">
+      <input type="hidden" id="content_type" name="content_type" value="{{if .Webhook.ContentType}}{{.Webhook.ContentType}}{{else}}application/json{{end}}">
+      <div class="default text"></div>
+      <i class="dropdown icon"></i>
+      <div class="menu">
+        <div class="item" data-value="1">application/json</div>
+        <div class="item" data-value="2">application/x-www-form-urlencoded</div>
+      </div>
     </div>
-    <div class="field">
-      <label class="req">{{.i18n.Tr "repo.settings.content_type"}}</label>
-      <select name="content_type">
-          <option value="1" {{if or .PageIsSettingsHooksNew (eq .Webhook.ContentType 1)}}selected{{end}}>application/json</option>
-          <option value="2" {{if eq .Webhook.ContentType 2}}selected{{end}}>application/x-www-form-urlencoded</option>
-      </select>
-    </div>
-    <div class="field">
-        <label for="secret">{{.i18n.Tr "repo.settings.secret"}}</label>
-        <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="secret" name="secret" type="password" value="{{.Webhook.Secret}}" autocomplete="off" />
-    </div>
-    {{template "repo/settings/hook_settings" .}}
-  </form>
-</div>
+  </div>
+  <input class="fake" type="password">
+  <div class="field {{if .Err_Secret}}error{{end}}">
+    <label for="secret">{{.i18n.Tr "repo.settings.secret"}}</label>
+    <input id="secret" name="secret" type="password" value="{{.Webhook.Secret}}" autocomplete="off">
+  </div>
+  {{template "repo/settings/hook_settings" .}}
+</form>
+{{end}}

templates/repo/settings/hook_history.tmpl

@@ -0,0 +1,12 @@
+{{if .PageIsSettingsHooksEdit}}
+<div id="setting-content">
+      <div id="repo-hooks-history-panel" class="panel panel-radius">
+          <div class="panel-header">
+          	<strong>{{.i18n.Tr "repo.settings.recent_deliveries"}}</strong>
+          </div>
+          <ul class="panel-body setting-list">
+            	<li>Coming soon!</li>
+          </ul>
+      </div>
+</div>
+{{end}}

templates/repo/settings/hook_list.tmpl

@@ -3,7 +3,17 @@
 	<h4 class="ui top attached header">
 	  {{.i18n.Tr "repo.settings.hooks"}}
 	  <div class="ui right">
-	  	<a class="ui blue tiny button" href="{{.BaseLink}}/settings/hooks/new">{{.i18n.Tr "repo.settings.add_webhook"}}</a>
+      <div class="ui floating1 jump dropdown">
+        <div class="ui blue tiny button">{{.i18n.Tr "repo.settings.add_webhook"}}</div>
+        <div class="menu">
+          <a class="item" href="{{.BaseLink}}/settings/hooks/gogs/new">
+            <img class="img-10" src="{{AppSubUrl}}/img/favicon.png">Gogs
+          </a>
+          <a class="item" href="{{.BaseLink}}/settings/hooks/slack/new">
+            <img class="img-10" src="{{AppSubUrl}}/img/slack.png">Slack
+          </a>
+        </div>
+      </div>
 	  </div>
 	</h4>
 	<div class="ui attached table segment">
@@ -31,22 +41,4 @@
   </div>
 </div>
 
-<div class="ui small basic delete modal">
-  <div class="ui icon header">
-    <i class="trash icon"></i>
-    {{.i18n.Tr "repo.settings.webhook_deletion"}}
-  </div>
-  <div class="content">
-    <p>{{.i18n.Tr "repo.settings.webhook_deletion_desc"}}</p>
-  </div>
-  <div class="actions">
-    <div class="ui red basic inverted cancel button">
-      <i class="remove icon"></i>
-      {{.i18n.Tr "modal.no"}}
-    </div>
-    <div class="ui green basic inverted ok button">
-      <i class="checkmark icon"></i>
-      {{.i18n.Tr "modal.yes"}}
-    </div>
-  </div>
-</div>
+{{template "repo/settings/hook_delete_modal" .}}

templates/repo/settings/hook_new.tmpl

@@ -1,39 +1,29 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-<div id="repo-wrapper">
-    {{template "repo/header_old" .}}
-	<div id="setting-wrapper" class="main-wrapper">
-	    <div id="repo-setting" class="container clear">
-	        {{template "repo/settings/nav" .}}
-	        <div class="grid-4-5 left">
-	            <div class="setting-content">
-	                {{template "ng/base/alert" .}}
-	                <div id="setting-content">
-	                    <div id="repo-hooks-panel" class="panel panel-radius">
-	                        <div class="panel-header">
-	                        	<strong>{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}</strong>
-	                        </div>
-                          {{template "repo/settings/hook_types" .}}
-                          {{template "repo/settings/hook_gogs" .}}
-                          {{template "repo/settings/hook_slack" .}}
-	                    </div>
-	                </div>
-	                {{if .PageIsSettingsHooksEdit}}
-		            <br>
-	                <div id="setting-content">
-	                    <div id="repo-hooks-history-panel" class="panel panel-radius">
-	                        <div class="panel-header">
-	                        	<strong>{{.i18n.Tr "repo.settings.recent_deliveries"}}</strong>
-	                        </div>
-	                        <ul class="panel-body setting-list">
-                            	<li>Coming soon!</li>
-	                        </ul>
-	                    </div>
-		            </div>
-		            {{end}}
-	            </div>
-	        </div>
+{{template "base/head" .}}
+<div class="repository settings new webhook">
+	{{template "repo/header" .}}
+	<div class="ui container">
+		<div class="ui grid">
+			{{template "repo/settings/navbar" .}}
+			<div class="twelve wide column content">
+				{{template "base/alert" .}}
+				<h4 class="ui top attached header">
+				  {{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}
+				  <div class="ui right">
+				  	{{if eq .HookType "gogs"}}
+				  	<img class="img-13" src="{{AppSubUrl}}/img/favicon.png">
+				  	{{else if eq .HookType "slack"}}
+				  	<img class="img-13" src="{{AppSubUrl}}/img/slack.png">
+				  	{{end}}
+				  </div>
+				</h4>
+				<div class="ui attached segment">
+          {{template "repo/settings/hook_gogs" .}}
+          {{template "repo/settings/hook_slack" .}}
+		    </div>
+
+				{{template "repo/settings/hook_history" .}}
+      </div>
 		</div>
 	</div>
 </div>
-{{template "ng/base/footer" .}}
+{{template "base/footer" .}}

templates/repo/settings/hook_settings.tmpl

@@ -1,15 +1,28 @@
 <div class="field">
-  <h4 class="text-center">{{.i18n.Tr "repo.settings.event_desc"}}</h4>
-  <label></label>
-  <input name="push_only" type="radio" {{if or .PageIsSettingsHooksNew .Webhook.PushOnly}}checked{{end}}> {{.i18n.Tr "repo.settings.event_push_only" | Str2html}}
+  <h4>{{.i18n.Tr "repo.settings.event_desc"}}</h4>
+	<div class="grouped fields">
+		<div class="field">
+		  <div class="ui radio checkbox checked">
+		    <input class="hidden" name="push_only" type="radio" {{if or .PageIsSettingsHooksNew .Webhook.PushOnly}}checked{{end}}>
+		    <label>{{.i18n.Tr "repo.settings.event_push_only" | Str2html}}</label>
+		  </div>
+		</div>
+	</div>
+</div>
+<div class="inline field">
+  <div class="ui checkbox">
+    <input class="hidden" name="active" type="checkbox" tabindex="0" {{if or .PageIsSettingsHooksNew .Webhook.IsActive}}checked{{end}}>
+    <label>{{.i18n.Tr "repo.settings.active"}}</label>
+    <span class="help">{{.i18n.Tr "repo.settings.active_helper"}}</span>
+  </div>
 </div>
 <div class="field">
-  <label for="active">{{.i18n.Tr "repo.settings.active"}}</label>
-  <input class="ipt-chk" id="active" name="active" type="checkbox" {{if or .PageIsSettingsHooksNew .Webhook.IsActive}}checked{{end}} />
-<span>{{.i18n.Tr "repo.settings.active_helper"}}</span>
-</div>
-<div class="field">
-    <label></label>
-    <button class="btn btn-green btn-large btn-radius">{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}</button>
-    {{if .PageIsSettingsHooksEdit}}<a class="btn btn-red btn-large btn-link btn-radius" href="{{.RepoLink}}/settings/hooks?remove={{.Webhook.ID}}"><strong>{{.i18n.Tr "repo.settings.delete_webhook"}}</strong></a>{{end}}
+	{{if .PageIsSettingsHooksNew}}
+  <button class="ui green button">{{.i18n.Tr "repo.settings.add_webhook"}}</button>
+  {{else}}
+  <button class="ui green button">{{.i18n.Tr "repo.settings.update_webhook"}}</button>
+  <a class="ui red delete-button button" data-url="{{.BaseLink}}/settings/hooks/delete" data-id="{{.Webhook.ID}}">{{.i18n.Tr "repo.settings.delete_webhook"}}</a>
+  {{end}}
 </div>
+
+{{template "repo/settings/hook_delete_modal" .}}

templates/repo/settings/hook_slack.tmpl

@@ -1,16 +1,15 @@
-<div id="slack" class="{{if or .PageIsSettingsHooksNew (and .PageIsSettingsHooksEdit (not (eq .HookType "Slack")))}}hidden{{end}}">
-  <form class="form form-align panel-body repo-setting-form" id="repo-setting-form-slack" action="{{if .RepoLink}}{{.RepoLink}}{{else if .OrgLink}}{{.OrgLink}}{{end}}/settings/hooks/slack/{{if .PageIsSettingsHooksNew}}new{{else}}{{.Webhook.ID}}{{end}}" method="post">
-    {{.CsrfTokenHtml}}
-    <input type="hidden" name="hook_type" value="slack">
-    <div class="text-center panel-desc">{{.i18n.Tr "repo.settings.add_slack_hook_desc" "http://slack.com" | Str2html}}</div>
-    <div class="field">
-        <label class="req" for="payload-url">{{.i18n.Tr "repo.settings.payload_url"}}</label>
-        <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="payload-url" name="payload_url" type="url" value="{{.Webhook.URL}}" required />
-    </div>
-    <div class="field">
-        <label class="req" for="channel">{{.i18n.Tr "repo.settings.slack_channel"}}</label>
-        <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="channel" name="channel" type="text" value="{{.SlackHook.Channel}}" placeholder="#general" required />
-    </div>
-    {{template "repo/settings/hook_settings" .}}
-  </form>
-</div>
+{{if eq .HookType "slack"}}
+<p>{{.i18n.Tr "repo.settings.add_slack_hook_desc" "http://slack.com" | Str2html}}</p>
+<form class="ui form" action="{{.BaseLink}}/settings/hooks/{{if .PageIsSettingsHooksNew}}slack/new{{else}}{{.Webhook.ID}}{{end}}" method="post">
+	{{.CsrfTokenHtml}}
+  <div class="required field {{if .Err_PayloadURL}}error{{end}}">
+    <label for="payload_url">{{.i18n.Tr "repo.settings.payload_url"}}</label>
+    <input id="payload_url" name="payload_url" type="url" value="{{.Webhook.URL}}" autofocus required>
+  </div>
+  <div class="required field {{if .Err_Channel}}error{{end}}">
+    <label for="channel">{{.i18n.Tr "repo.settings.slack_channel"}}</label>
+    <input id="channel" name="channel" value="{{.SlackHook.Channel}}" placeholder="#general" required>
+  </div>
+	{{template "repo/settings/hook_settings" .}}
+</form>
+{{end}}

templates/repo/settings/hook_types.tmpl

@@ -1,11 +0,0 @@
-{{if .PageIsSettingsHooksNew}}
-<div id="hook-type" class="form-align">
-  <label class="req">{{.i18n.Tr "repo.settings.hook_type"}}</label>
-  <select name="hook_type" id="hook-type" class="form-control">
-    {{if .HookType}}<option value="{{.HookType}}">{{.HookType}}</option>{{end}}
-    {{range .HookTypes}}
-    {{if not (eq $.HookType .)}}<option value="{{.}}" >{{.}}</option>{{end}}
-    {{end}}
-  </select>
-</div>
-{{end}}