loading text on form submit

6 files changed, 47 insertions, 6 deletions

diff --git a/locale/en.ini b/locale/en.ini
index c0edecb..7de77df 100644
--- a/locale/en.ini
+++ b/locale/en.ini
@@ -225,9 +225,13 @@ account=Account
 account.login=Log in
 account.login.switch=Switch Account
 account.login.submit=Log in
+account.login.submit.loading=Logging in...
 account.login.submit.switch=Switch
+account.login.submit.switch.loading=Switching...
 account.login.set_password=Update Password
 account.login.set_password.par=You are logging in for the first time. Please set a new password and display name.
+account.login.set_password.submit=Finish account setup
+account.login.set_password.submit.loading=Logging in...
 account.username=Username
 account.password=Password
 account.display_name=Display Name
diff --git a/ui/client-scripts/src/formfeedback.ts b/ui/client-scripts/src/formfeedback.ts
new file mode 100644
index 0000000..fab3913
--- /dev/null
+++ b/ui/client-scripts/src/formfeedback.ts
@@ -0,0 +1,17 @@
+/*
+    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2026 metamuffin <metamuffin.org>
+*/
+
+globalThis.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll("form").forEach(form => {
+        if (!(form instanceof HTMLFormElement)) return
+        form.addEventListener("submit", () => {
+            const submit = form.querySelector("input[type=submit]")
+            if (!(submit instanceof HTMLInputElement)) return
+            submit.disabled = true
+            submit.value = submit.dataset.loadingText ?? "..."
+        })
+    })
+})
diff --git a/ui/client-scripts/src/main.ts b/ui/client-scripts/src/main.ts
index ba60646..507c5ae 100644
--- a/ui/client-scripts/src/main.ts
+++ b/ui/client-scripts/src/main.ts
@@ -11,3 +11,4 @@ import "./dangerbutton.ts"
 import "./log_live.ts"
 import "./import_live.ts"
 import "./pagination.ts"
+import "./formfeedback.ts"
diff --git a/ui/client-scripts/src/pagination.ts b/ui/client-scripts/src/pagination.ts
index 62362c1..3226f6c 100644
--- a/ui/client-scripts/src/pagination.ts
+++ b/ui/client-scripts/src/pagination.ts
@@ -1,3 +1,8 @@
+/*
+    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2026 metamuffin <metamuffin.org>
+*/
 
 function init_paging() {
     const el = document.querySelector(".next_page") as HTMLAnchorElement
diff --git a/ui/src/components/login.rs b/ui/src/components/login.rs
index 7d19a38..0098c8d 100644
--- a/ui/src/components/login.rs
+++ b/ui/src/components/login.rs
@@ -29,7 +29,11 @@ markup::define! {
             label[for="display_name"] { @tr(ri.lang, "account.display_name") }
             input[type="text", id="display_name", name="display_name"]; br;
 
-            input[type="submit", value=tr(ri.lang, "account.login.submit")];
+            input[
+                type="submit",
+                value=tr(ri.lang, "account.login.set_password.submit"),
+                "data-loading-text"=tr(ri.lang, "account.login.submit.loading")
+            ];
         }
     }
     AccountLogin<'a>(ri: &'a RenderInfo<'a>) {
@@ -41,13 +45,21 @@ markup::define! {
             label[for="password"] { @tr(ri.lang, "account.password") }
             input[type="password", id="password", name="password"]; br;
 
-            input[type="submit", value=tr(ri.lang, if ri.user.is_some() { "account.login.submit.switch" } else { "account.login.submit" })];
+            input[
+                type="submit",
+                value=tr(ri.lang, if ri.user.is_some() { "account.login.submit.switch" } else { "account.login.submit" }),
+                "data-loading-text"=tr(ri.lang, if ri.user.is_some() { "account.login.submit.switch.loading" } else { "account.login.submit.loading" })
+            ];
         }
     }
     AccountLogout<'a>(ri: &'a RenderInfo<'a>) {
         form.account[method="POST", action=""] {
             h1 { @tr(ri.lang, "account.logout") }
-            input[type="submit", value=tr(ri.lang, "account.logout.submit")];
+            input[
+                type="submit",
+                value=tr(ri.lang, "account.logout.submit"),
+                "data-loading-text"=tr(ri.lang, "account.logout.submit.loading")
+            ];
         }
     }
 }
diff --git a/ui/src/scaffold.rs b/ui/src/scaffold.rs
index 40d595b..a3f0c8e 100644
--- a/ui/src/scaffold.rs
+++ b/ui/src/scaffold.rs
@@ -31,10 +31,12 @@ markup::define! {
             @let hue = ri.user.and_then(|u| u.get(USER_THEME_ACCENT)).unwrap_or(277);
             body[class=format!("theme-{theme}"), style=format!("--accent-hue: {hue}")] {
                 @Navbar { ri }
-                @if let Some((kind, text)) = ri.message {
-                    @Message { ri, kind, text }
+                #main {
+                    @if let Some((kind, text)) = ri.message {
+                        @Message { ri, kind, text }
+                    }
+                    @page.render()
                 }
-                #main { @page.render() }
                 footer {
                     p { @ri.config.brand " - " @ri.config.slogan " | powered by " a[href="https://codeberg.org/metamuffin/jellything"]{"Jellything"} }
                 }