From eec8b0f15bf6f78ecae228ed8ba38333c3e27f74 Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Sat, 1 Feb 2025 22:27:27 +1300 Subject: [PATCH] Add loading indicator to invite screens --- src/web/pug/guild.pug | 6 ++---- src/web/pug/invite.pug | 6 +++--- src/web/pug/ok.pug | 2 +- src/web/routes/guild.js | 5 +++-- 4 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/web/pug/guild.pug b/src/web/pug/guild.pug index 1d564dc..050e2c1 100644 --- a/src/web/pug/guild.pug +++ b/src/web/pug/guild.pug @@ -56,7 +56,7 @@ block body .fl-grow1 h2.fs-headline1 Invite a Matrix user - form.d-grid.g-af-column.gy4.gx8.jc-start(method="post" action="/api/invite" style="grid-template-rows: repeat(2, auto)") + form.d-grid.g-af-column.gy4.gx8.jc-start(method="post" action="/api/invite" hx-post="/api/invite" hx-indicator="#invite-button") label.s-label(for="mxid") Matrix ID input.fl-grow1.s-input.wmx3#mxid(name="mxid" required placeholder="@user:example.org") label.s-label(for="permissions") Permissions @@ -67,12 +67,10 @@ block body option(value="admin") Admin input(type="hidden" name="guild_id" value=guild_id) .grid--row-start2 - button.s-btn.s-btn__filled Invite + button.s-btn.s-btn__filled#invite-button Invite div != svg - h2.mt48.fs-headline1 Moderation - h2.mt48.fs-headline1 Matrix setup h3.mt32.fs-category Linked channels diff --git a/src/web/pug/invite.pug b/src/web/pug/invite.pug index 7f7ff2e..8cb977b 100644 --- a/src/web/pug/invite.pug +++ b/src/web/pug/invite.pug @@ -13,11 +13,11 @@ block body .s-page-title.mb24 h1.s-page-title--header= guild.name - .d-flex.g16 + .d-flex.g16#form-container .fl-grow1 h2.fs-headline1 Invite a Matrix user - form.d-flex.gy16.fd-column(method="post" action="/api/invite" style="grid-template-rows: repeat(2, auto)") + form.d-flex.gy16.fd-column(method="post" action="/api/invite" hx-post="/api/invite" hx-indicator="#invite-button" hx-select="#ok" hx-target="#form-container") .d-flex.gy4.fd-column label.s-label(for="mxid") Matrix ID input.fl-grow1.s-input.wmx3#mxid(name="mxid" required placeholder="@user:example.org") @@ -30,4 +30,4 @@ block body option(value="admin") Admin input(type="hidden" name="nonce" value=nonce) div - button.s-btn.s-btn__filled.htmx-indicator Invite + button.s-btn.s-btn__filled#invite-button Invite diff --git a/src/web/pug/ok.pug b/src/web/pug/ok.pug index 9aed737..dee4ed8 100644 --- a/src/web/pug/ok.pug +++ b/src/web/pug/ok.pug @@ -1,6 +1,6 @@ extends includes/template.pug block body - .ta-center.wmx5.p48.mx-auto + .ta-center.wmx5.p48.mx-auto#ok != icons.Spots.SpotApproveXL p.mt24.fs-body2= msg diff --git a/src/web/routes/guild.js b/src/web/routes/guild.js index 8a1cbc2..3d0bf6f 100644 --- a/src/web/routes/guild.js +++ b/src/web/routes/guild.js @@ -2,7 +2,7 @@ const assert = require("assert/strict") const {z} = require("zod") -const {H3Event, defineEventHandler, sendRedirect, useSession, createError, getValidatedQuery, readValidatedBody} = require("h3") +const {H3Event, defineEventHandler, sendRedirect, useSession, createError, getValidatedQuery, readValidatedBody, setResponseHeader} = require("h3") const {randomUUID} = require("crypto") const {LRUCache} = require("lru-cache") const Ty = require("../../types") @@ -191,9 +191,10 @@ as.router.post("/api/invite", defineEventHandler(async event => { ( parsedBody.permissions === "admin" ? 100 : parsedBody.permissions === "moderator" ? 50 : 0) - await api.setUserPowerCascade(spaceID, parsedBody.mxid, powerLevel) + if (powerLevel) await api.setUserPowerCascade(spaceID, parsedBody.mxid, powerLevel) if (parsedBody.guild_id) { + setResponseHeader(event, "HX-Refresh", true) return sendRedirect(event, `/guild?guild_id=${guild_id}`, 302) } else { return sendRedirect(event, "/ok?msg=User has been invited.", 302)