- Closes https://github.com/go-gitea/gitea/issues/28880 This change introduces htmx with the hope we could use it to make Gitea more reactive while keeping our "HTML rendered on the server" approach. - Add `htmx.js` that imports `htmx.org` and initializes error toasts - Place `hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'` on the `<body>` tag so every request that htmx sends is authenticated - Place `hx-swap="outerHTML"` on the `<body>` tag so the response of each htmx request replaces the tag it targets (as opposed to its inner content) - Place `hx-push-url="false"` on the `<body>` tag so no changes to the URL happen in `<form>` tags - Add the `is-loading` class during request ### Error toasts in action ![errors](https://github.com/go-gitea/gitea/assets/20454870/181a1beb-1cb8-4858-abe8-fa1fc3f5b8f3) ## Don't do a full page load when clicking the subscribe button - Refactor the form around the subscribe button into its own template - Use htmx to perform the form submission - `hx-boost="true"` to prevent the default form submission behavior of a full page load - `hx-sync="this:replace"` to replace the current request (in case the button is clicked again before the response is returned) - `hx-target="this"` to replace the form tag with the new form tag - Change the backend response to return a `<form>` tag instead of a redirect to the issue page ### Before ![subscribe_before](https://github.com/go-gitea/gitea/assets/20454870/cb2439a2-c3c0-425c-8d3c-5d646b1cdc28) ### After ![subscribe_after](https://github.com/go-gitea/gitea/assets/20454870/6fcd77d8-7b11-40b0-af4f-b152aaad787c) ## Don't do a full page load when clicking the follow button - Use htmx to perform the button request - `hx-post="{{.ContextUser.HomeLink}}?action=follow"` to send a POST request to follow the user - `hx-target="#profile-avatar-card"` to target the card div for replacement - `hx-indicator="#profile-avatar-card"` to place the loading indicator on the card - Change the backend response to return a `<div>` tag (the card) instead of a redirect to the user page ### Before ![follow_before](https://github.com/go-gitea/gitea/assets/20454870/a210b643-6e74-4ff9-8e61-d658c62edf1f) ### After ![follow_after](https://github.com/go-gitea/gitea/assets/20454870/5bb19ae9-0d59-4ae3-b538-4c83334e4722) --------- Signed-off-by: Yarden Shoham <git@yardenshoham.com> Co-authored-by: 6543 <m.huber@kithara.com> Co-authored-by: Giteabot <teabot@gitea.io>tags/v1.22.0-rc0
@@ -26,6 +26,7 @@ | |||
"esbuild-loader": "4.0.2", | |||
"escape-goat": "4.0.0", | |||
"fast-glob": "3.3.2", | |||
"htmx.org": "1.9.10", | |||
"jquery": "3.7.1", | |||
"katex": "0.16.9", | |||
"license-checker-webpack-plugin": "0.2.1", | |||
@@ -6158,6 +6159,11 @@ | |||
"url": "https://github.com/fb55/entities?sponsor=1" | |||
} | |||
}, | |||
"node_modules/htmx.org": { | |||
"version": "1.9.10", | |||
"resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-1.9.10.tgz", | |||
"integrity": "sha512-UgchasltTCrTuU2DQLom3ohHrBvwr7OqpwyAVJ9VxtNBng4XKkVsqrv0Qr3srqvM9ZNI3f1MmvVQQqK7KW/bTA==" | |||
}, | |||
"node_modules/http-proxy-agent": { | |||
"version": "7.0.0", | |||
"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz", |
@@ -25,6 +25,7 @@ | |||
"esbuild-loader": "4.0.2", | |||
"escape-goat": "4.0.0", | |||
"fast-glob": "3.3.2", | |||
"htmx.org": "1.9.10", | |||
"jquery": "3.7.1", | |||
"katex": "0.16.9", | |||
"license-checker-webpack-plugin": "0.2.1", |
@@ -8,10 +8,15 @@ import ( | |||
"strconv" | |||
issues_model "code.gitea.io/gitea/models/issues" | |||
"code.gitea.io/gitea/modules/base" | |||
"code.gitea.io/gitea/modules/context" | |||
"code.gitea.io/gitea/modules/log" | |||
) | |||
const ( | |||
tplWatching base.TplName = "repo/issue/view_content/watching" | |||
) | |||
// IssueWatch sets issue watching | |||
func IssueWatch(ctx *context.Context) { | |||
issue := GetActionIssue(ctx) | |||
@@ -52,5 +57,7 @@ func IssueWatch(ctx *context.Context) { | |||
return | |||
} | |||
ctx.Redirect(issue.Link()) | |||
ctx.Data["Issue"] = issue | |||
ctx.Data["IssueWatch"] = &issues_model.IssueWatch{IsWatching: watch} | |||
ctx.HTML(http.StatusOK, tplWatching) | |||
} |
@@ -14,6 +14,7 @@ import ( | |||
"code.gitea.io/gitea/models/db" | |||
repo_model "code.gitea.io/gitea/models/repo" | |||
user_model "code.gitea.io/gitea/models/user" | |||
"code.gitea.io/gitea/modules/base" | |||
"code.gitea.io/gitea/modules/context" | |||
"code.gitea.io/gitea/modules/git" | |||
"code.gitea.io/gitea/modules/log" | |||
@@ -26,6 +27,10 @@ import ( | |||
shared_user "code.gitea.io/gitea/routers/web/shared/user" | |||
) | |||
const ( | |||
tplProfileBigAvatar base.TplName = "shared/user/profile_big_avatar" | |||
) | |||
// OwnerProfile render profile page for a user or a organization (aka, repo owner) | |||
func OwnerProfile(ctx *context.Context) { | |||
if strings.Contains(ctx.Req.Header.Get("Accept"), "application/rss+xml") { | |||
@@ -309,8 +314,10 @@ func Action(ctx *context.Context) { | |||
if err != nil { | |||
log.Error("Failed to apply action %q: %v", ctx.FormString("action"), err) | |||
ctx.JSONError(fmt.Sprintf("Action %q failed", ctx.FormString("action"))) | |||
ctx.Error(http.StatusBadRequest, fmt.Sprintf("Action %q failed", ctx.FormString("action"))) | |||
return | |||
} | |||
ctx.JSONOK() | |||
shared_user.PrepareContextForProfileBigAvatar(ctx) | |||
ctx.HTML(http.StatusOK, tplProfileBigAvatar) | |||
} |
@@ -29,7 +29,7 @@ | |||
{{template "base/head_style" .}} | |||
{{template "custom/header" .}} | |||
</head> | |||
<body> | |||
<body hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}' hx-swap="outerHTML" hx-push-url="false"> | |||
{{ctx.DataRaceCheck $.Context}} | |||
{{template "custom/body_outer_pre" .}} | |||
@@ -270,19 +270,7 @@ | |||
<div class="ui watching"> | |||
<span class="text"><strong>{{ctx.Locale.Tr "notification.notifications"}}</strong></span> | |||
<div class="gt-mt-3"> | |||
<form method="post" action="{{.Issue.Link}}/watch"> | |||
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}"> | |||
{{$.CsrfTokenHtml}} | |||
<button class="fluid ui button"> | |||
{{if $.IssueWatch.IsWatching}} | |||
{{svg "octicon-mute" 16 "gt-mr-3"}} | |||
{{ctx.Locale.Tr "repo.issues.unsubscribe"}} | |||
{{else}} | |||
{{svg "octicon-unmute" 16 "gt-mr-3"}} | |||
{{ctx.Locale.Tr "repo.issues.subscribe"}} | |||
{{end}} | |||
</button> | |||
</form> | |||
{{template "repo/issue/view_content/watching" .}} | |||
</div> | |||
</div> | |||
{{end}} |
@@ -0,0 +1,12 @@ | |||
<form hx-boost="true" hx-sync="this:replace" hx-target="this" method="post" action="{{.Issue.Link}}/watch"> | |||
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}"> | |||
<button class="fluid ui button"> | |||
{{if $.IssueWatch.IsWatching}} | |||
{{svg "octicon-mute" 16 "gt-mr-3"}} | |||
{{ctx.Locale.Tr "repo.issues.unsubscribe"}} | |||
{{else}} | |||
{{svg "octicon-unmute" 16 "gt-mr-3"}} | |||
{{ctx.Locale.Tr "repo.issues.subscribe"}} | |||
{{end}} | |||
</button> | |||
</form> |
@@ -1,4 +1,4 @@ | |||
<div class="ui card"> | |||
<div id="profile-avatar-card" class="ui card"> | |||
<div id="profile-avatar" class="content gt-df"> | |||
{{if eq .SignedUserID .ContextUser.ID}} | |||
<a class="image" href="{{AppSubUrl}}/user/settings" data-tooltip-content="{{ctx.Locale.Tr "user.change_avatar"}}"> | |||
@@ -110,13 +110,13 @@ | |||
</li> | |||
{{end}} | |||
{{if and .IsSigned (ne .SignedUserID .ContextUser.ID)}} | |||
<li class="follow"> | |||
<li class="follow" hx-target="#profile-avatar-card" hx-indicator="#profile-avatar-card" > | |||
{{if $.IsFollowing}} | |||
<button class="ui basic red button link-action" data-url="{{.ContextUser.HomeLink}}?action=unfollow"> | |||
<button hx-post="{{.ContextUser.HomeLink}}?action=unfollow" class="ui basic red button"> | |||
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.unfollow"}} | |||
</button> | |||
{{else}} | |||
<button class="ui basic primary button link-action" data-url="{{.ContextUser.HomeLink}}?action=follow"> | |||
<button hx-post="{{.ContextUser.HomeLink}}?action=follow" class="ui basic primary button"> | |||
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.follow"}} | |||
</button> | |||
{{end}} |
@@ -12,6 +12,7 @@ import {showTemporaryTooltip} from '../modules/tippy.js'; | |||
import {confirmModal} from './comp/ConfirmModal.js'; | |||
import {showErrorToast} from '../modules/toast.js'; | |||
import {request, POST} from '../modules/fetch.js'; | |||
import '../htmx.js'; | |||
const {appUrl, appSubUrl, csrfToken, i18n} = window.config; | |||
@@ -0,0 +1,18 @@ | |||
import * as htmx from 'htmx.org'; | |||
import {showErrorToast} from './modules/toast.js'; | |||
// https://htmx.org/reference/#config | |||
htmx.config.requestClass = 'is-loading'; | |||
htmx.config.scrollIntoViewOnBoost = false; | |||
// https://htmx.org/events/#htmx:sendError | |||
document.body.addEventListener('htmx:sendError', (event) => { | |||
// TODO: add translations | |||
showErrorToast(`Network error when calling ${event.detail.requestConfig.path}`); | |||
}); | |||
// https://htmx.org/events/#htmx:responseError | |||
document.body.addEventListener('htmx:responseError', (event) => { | |||
// TODO: add translations | |||
showErrorToast(`Error ${event.detail.xhr.status} when calling ${event.detail.requestConfig.path}`); | |||
}); |
@@ -214,6 +214,7 @@ export default { | |||
}, | |||
override: { | |||
'khroma@*': {licenseName: 'MIT'}, // https://github.com/fabiospampinato/khroma/pull/33 | |||
'htmx.org@1.9.10': {licenseName: 'BSD-2-Clause'}, // "BSD 2-Clause" -> "BSD-2-Clause" | |||
}, | |||
emitError: true, | |||
allow: '(Apache-2.0 OR BSD-2-Clause OR BSD-3-Clause OR MIT OR ISC OR CPAL-1.0 OR Unlicense OR EPL-1.0 OR EPL-2.0)', |