From c15f408d608afeddc72a0b69a883f76833f0cc04 Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Wed, 30 Oct 2024 11:34:57 +0100
Subject: [PATCH] Add language switch to navbar

---
 assets/js/index.js                |  2 ++
 assets/js/theme/languageSwitch.js | 26 ++++++++++++++++++++++++++
 templates/components/navbar.html  | 21 +++++++++++++++++++++
 3 files changed, 49 insertions(+)
 create mode 100644 assets/js/theme/languageSwitch.js

diff --git a/assets/js/index.js b/assets/js/index.js
index f194054..3b98a24 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -6,6 +6,7 @@ import advancedFormat from "dayjs/plugin/advancedFormat";
 import times from "./theme/times";
 import styles from "./theme/styles";
 import highlight from "./theme/highlight";
+import languageSwitch from "./theme/languageSwitch";
 
 import alerts from "./utils/alerts";
 import tooltips from "./utils/tooltips";
@@ -22,6 +23,7 @@ CTFd.init(window.init);
   styles();
   times();
   highlight();
+  languageSwitch();
 
   alerts();
   tooltips();
diff --git a/assets/js/theme/languageSwitch.js b/assets/js/theme/languageSwitch.js
new file mode 100644
index 0000000..3741c10
--- /dev/null
+++ b/assets/js/theme/languageSwitch.js
@@ -0,0 +1,26 @@
+export default () => {
+  const form = document.getElementById("language-switch");
+  form.addEventListener("submit", async e => {
+    // Do not open API page
+    e.preventDefault();
+
+    // Submit form
+    let data = new URLSearchParams(new FormData(form));
+    const response = await fetch(form.action, {
+      method: "post",
+      body: data,
+    });
+    if (!response.ok) {
+      throw new Error(`Language change failed: ${response.status}`);
+    }
+
+    // Reload with new language
+    window.location.reload();
+  });
+
+  document.querySelectorAll("#language-switch input[type='radio']").forEach(el => {
+    el.addEventListener("change", e => {
+      form.requestSubmit();
+    });
+  });
+};
diff --git a/templates/components/navbar.html b/templates/components/navbar.html
index 4db3aea..14de095 100644
--- a/templates/components/navbar.html
+++ b/templates/components/navbar.html
@@ -171,6 +171,27 @@
             </a>
           </li>
         {% endif %}
+
+        <li class="nav-item dropdown">
+          <button class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="fas fa-language d-none d-md-inline"></i>
+            <span class="d-sm-inline d-md-none">
+              <i class="fas fa-language pe-1"></i>
+              {% trans %}Change language{% endtrans %}
+            </span>
+          </button>
+          {%- with form = Forms.lang.LanguageForm(language=get_locale()) %}
+          <form action="/api/v1/lang" method="post" id="language-switch">
+            <ul class="dropdown-menu dropdown-menu-end">
+              {%- for subfield in form.language %}
+              <li>{{ subfield(class="btn-check") }}{{ subfield.label(class="dropdown-item") }}</li>
+              {%- endfor %}
+            </ul>
+            {{ form.nonce() }}
+          </form>
+          {%- endwith %}
+        </li>
+
         <li class="nav-item">
           <button class="nav-link theme-switch" type="button">
             <span data-bs-toggle="tooltip" data-bs-placement="bottom" title="{% trans %}Toggle theme{% endtrans %}">