add language selector to admin

api.go

@@ -1237,9 +1237,16 @@ func (app *appContext) Logout(gc *gin.Context) {
 // @Router /lang [get]
 // @tags Other
 func (app *appContext) GetLanguages(gc *gin.Context) {
+	page := gc.Param("page")
 	resp := langDTO{}
-	for key, lang := range app.storage.lang.Form {
+	if page == "form" {
-		resp[key] = lang["meta"].(map[string]interface{})["name"].(string)
+		for key, lang := range app.storage.lang.Form {
+			resp[key] = lang["meta"].(map[string]interface{})["name"].(string)
+		}
+	} else if page == "admin" {
+		for key, lang := range app.storage.lang.Admin {
+			resp[key] = lang["meta"].(map[string]interface{})["name"].(string)
+		}
 	}
 	if len(resp) == 0 {
 		respond(500, "Couldn't get languages", gc)

html/admin.html

@@ -167,6 +167,16 @@
             </form>
         </div>
         <div id="notification-box"></div>
+        <span class="dropdown" tabindex="0" id="lang-dropdown">
+            <span class="button ~urge dropdown-button">
+                <i class="ri-global-line"></i>
+                <span class="ml-1 chev"></span>
+            </span>
+            <div class="dropdown-display">
+                <div class="card ~neutral !low" id="lang-list">
+                </div>
+            </div>
+        </span>
         <div class="page-container">
             <div class="mb-1">
                 <header class="flex flex-wrap items-center justify-between">

main.go

@@ -577,7 +577,7 @@ func start(asDaemon, firstCall bool) {
 		router.GET("/accounts", app.AdminPage)
 		router.GET("/settings", app.AdminPage)
 
-		router.GET("/lang", app.GetLanguages)
+		router.GET("/lang/:page", app.GetLanguages)
 		router.GET("/token/login", app.getTokenLogin)
 		router.GET("/token/refresh", app.getTokenRefresh)
 		router.POST("/newUser", app.NewUser)

ts/admin.ts

@@ -1,5 +1,5 @@
 import { toggleTheme, loadTheme } from "./modules/theme.js";
-import { lang, LangFile } from "./modules/lang.js";
+import { lang, LangFile, loadLangSelector } from "./modules/lang.js";
 import { Modal } from "./modules/modal.js";
 import { Tabs } from "./modules/tabs.js";
 import { inviteList, createInvite } from "./modules/invites.js";
@@ -11,9 +11,8 @@ import { _get, _post, notificationBox, whichAnimationEvent, toggleLoader } from
 loadTheme();
 (document.getElementById('button-theme') as HTMLSpanElement).onclick = toggleTheme;
 
-var langLoaded = false;
-
 window.lang = new lang(window.langFile as LangFile);
+loadLangSelector("admin");
 // _get(`/lang/admin/${window.language}.json`, null, (req: XMLHttpRequest) => {
 //     if (req.readyState == 4 && req.status == 200) {
 //         langLoaded = true;

ts/form.ts

@@ -1,5 +1,6 @@
 import { Modal } from "./modules/modal.js";
 import { _get, _post, toggleLoader } from "./modules/common.js";
+import { loadLangSelector } from "./modules/lang.js";
 
 interface formWindow extends Window {
     validationStrings: pwValStrings;
@@ -21,23 +22,7 @@ interface pwValStrings {
     [ type: string ]: pwValString;
 }
 
-_get("/lang", null, (req: XMLHttpRequest) => {
+loadLangSelector("form");
-    if (req.readyState == 4) {
-        if (req.status != 200) {
-            document.getElementById("lang-dropdown").remove();
-            return;
-        }
-        const list = document.getElementById("lang-list") as HTMLDivElement;
-        let innerHTML = '';
-        for (let code in req.response) {
-            innerHTML += `<a href="?lang=${code}" class="button input ~neutral field mb-half">${req.response[code]}</a>`;
-        }
-        list.innerHTML = innerHTML;
-    }
-});
-
-
-
 
 window.modal = new Modal(document.getElementById("modal-success"));
 declare var window: formWindow;

ts/modules/lang.ts

@@ -1,3 +1,5 @@
+import { _get } from "../modules/common.js";
+
 interface Meta {
     name: string;
 }
@@ -45,7 +47,20 @@ export class lang implements Lang {
     }
 }
 
-
+export const loadLangSelector = (page: string) => _get("/lang/" + page, null, (req: XMLHttpRequest) => {
+    if (req.readyState == 4) {
+        if (req.status != 200) {
+            document.getElementById("lang-dropdown").remove();
+            return;
+        }
+        const list = document.getElementById("lang-list") as HTMLDivElement;
+        let innerHTML = '';
+        for (let code in req.response) {
+            innerHTML += `<a href="?lang=${code}" class="button input ~neutral field mb-half">${req.response[code]}</a>`;
+        }
+        list.innerHTML = innerHTML;
+    }
+});