update: setup page

- add: database langugage method
- update: api lang & export supported languages

src/app/components/ui/ChooseLang.vue

@@ -43,6 +43,8 @@
 </template>
 
 <script setup lang="ts">
+import { LOCALES } from '~/../i18n.config.js';
+
 const { lang } = defineProps<{
   lang: string;
 }>();
@@ -54,18 +56,5 @@ watch(langProxy, (newVal) => {
   updateLang('update:lang', newVal);
 });
 
-const langs = [
-  {
-    value: 'de',
-    name: 'Deutsch',
-  },
-  {
-    value: 'en',
-    name: 'English',
-  },
-  {
-    value: 'fr',
-    name: 'Français',
-  },
-];
+const langs = LOCALES;
 </script>

src/app/pages/setup.vue

@@ -104,6 +104,7 @@ import { FetchError } from 'ofetch';
 
 const { t } = useI18n();
 const authStore = useAuthStore();
+const generalStore = useGeneralStore();
 
 type SetupError = {
   title: string;
@@ -136,12 +137,14 @@ function updateLang(value: string) {
 async function increaseStep() {
   try {
     if (step.value === 1) {
-      /* lang */
+      // TODO: handle error
+      await generalStore.updateLanguage(lang.value);
+      stepInvalide.value.push(1);
     }
 
     if (step.value === 2) {
       await newAccount();
-      stepInvalide.value.push(1);
+      stepInvalide.value.push(2);
     }
 
     if (step.value === 3) {

src/app/stores/general.ts

@@ -0,0 +1,11 @@
+export const useGeneralStore = defineStore('General', () => {
+  /**
+   * @throws if unsuccessful
+   */
+  async function updateLanguage(language: string) {
+    const response = await api.updateLanguage({ lang: language });
+    return response.success;
+  }
+
+  return { updateLanguage };
+});

src/app/utils/api.ts

@@ -129,6 +129,13 @@ class API {
       body: { username, password, accept },
     });
   }
+
+  async updateLanguage({ lang }: { lang: string }) {
+    return $fetch('/api/lang', {
+      method: 'post',
+      body: { lang },
+    });
+  }
 }
 
 type WGClientReturn = Awaited<

src/i18n.config.ts

@@ -19,6 +19,31 @@ import it from './locales/it.json';
 import th from './locales/th.json';
 import hi from './locales/hi.json';
 
+const LOCALES = [
+  { value: 'en', name: 'English' },
+  { value: 'ua', name: 'Українська' },
+  { value: 'ru', name: 'Русский' },
+  { value: 'tr', name: 'Türkçe' },
+  { value: 'no', name: 'Norsk' },
+  { value: 'pl', name: 'Polski' },
+  { value: 'fr', name: 'Français' },
+  { value: 'de', name: 'Deutsch' },
+  { value: 'ca', name: 'Català' },
+  { value: 'es', name: 'Español' },
+  { value: 'ko', name: '한국어' },
+  { value: 'vi', name: 'Tiếng Việt' },
+  { value: 'nl', name: 'Nederlands' },
+  { value: 'is', name: 'Íslenska' },
+  { value: 'pt', name: 'Português' },
+  { value: 'zh-chs', name: '简体中文' },
+  { value: 'zh-cht', name: '繁體中文' },
+  { value: 'it', name: 'Italiano' },
+  { value: 'th', name: 'ไทย' },
+  { value: 'hi', name: 'हिन्दी' },
+];
+
+export { LOCALES };
+
 export default defineI18nConfig(() => ({
   legacy: false,
   locale: 'en',

src/server/api/lang.post.ts

@@ -0,0 +1,7 @@
+export default defineEventHandler(async (event) => {
+  const { lang } = await readValidatedBody(event, validateZod(langType));
+  setHeader(event, 'Content-Type', 'application/json');
+  await Database.system.updateLanguage(lang);
+  SERVER_DEBUG(`Update Language: ${lang}`);
+  return { success: true };
+});

src/server/utils/types.ts

@@ -1,6 +1,7 @@
 import type { ZodSchema } from 'zod';
 import { z, ZodError } from 'zod';
 import type { H3Event, EventHandlerRequest } from 'h3';
+import { LOCALES } from '~~/i18n.config';
 
 // TODO: use i18n for messages
 
@@ -74,6 +75,12 @@ const statistics = z.object(
 
 const objectMessage = 'zod.body'; // i18n key
 
+const langs = LOCALES.map((lang) => lang.value);
+const lang = z.enum(['', ...langs]);
+export const langType = z.object({
+  lang: lang,
+});
+
 export const clientIdType = z.object(
   {
     clientId: id,

src/services/database/lowdb.ts

@@ -24,6 +24,7 @@ import {
   SystemRepository,
   type Feature,
   type Features,
+  type Lang,
   type Statistics,
 } from './repositories/system';
 
@@ -69,6 +70,13 @@ export class LowDBSystem extends SystemRepository {
       }
     });
   }
+
+  async updateLanguage(language: Lang): Promise<void> {
+    DEBUG('Update Language');
+    this.#db.update((v) => {
+      v.system.general.lang = language;
+    });
+  }
 }
 
 export class LowDBUser extends UserRepository {

src/services/database/repositories/system.ts

@@ -1,6 +1,7 @@
 import type { SessionConfig } from 'h3';
+import type { LOCALES } from '~~/i18n.config';
 
-export type Lang = 'en' | 'fr';
+export type Lang = (typeof LOCALES)[number]['value'];
 
 export type IpTables = {
   PreUp: string;
@@ -106,4 +107,5 @@ export abstract class SystemRepository {
 
   abstract updateFeatures(features: Record<string, Feature>): Promise<void>;
   abstract updateStatistics(statistics: Statistics): Promise<void>;
+  abstract updateLanguage(language: Lang): Promise<void>;
 }