fix: ui center paragraph

src/app/components/ui/ChooseLang.vue

@@ -1,5 +1,5 @@
 <template>
-  <SelectRoot v-model="langProxy">
+  <SelectRoot v-model="langProxy" :default-value="lang">
     <SelectTrigger
       class="inline-flex min-w-[160px] items-center justify-between rounded px-[15px] text-[13px] dark:text-white leading-none h-[35px] gap-[5px] dark:bg-neutral-500"
       aria-label="Customise language"

src/app/pages/setup.vue

@@ -8,14 +8,14 @@
         </h2>
 
         <div v-if="step === 1">
-          <p class="text-lg p-8">{{ $t('setup.msgStepOne') }}</p>
+          <p class="text-lg p-8 text-center">{{ $t('setup.msgStepOne') }}</p>
           <div class="flex justify-center mb-8">
-            <UiChooseLang :lang="lang" @update:lang="updateLang" />
+            <UiChooseLang :lang="lang" @update:lang="handleEventUpdateLang" />
           </div>
         </div>
 
         <div v-if="step === 2">
-          <p class="text-lg p-8">{{ $t('setup.msgStepTwo') }}</p>
+          <p class="text-lg p-8 text-center">{{ $t('setup.msgStepTwo') }}</p>
           <div>
             <label for="username" class="inline-block py-2">{{
               $t('username')
@@ -57,15 +57,15 @@
         </div>
 
         <div v-if="step === 3">
-          <p class="text-lg p-8">Host/Port section</p>
+          <p class="text-lg p-8 text-center">Host/Port section</p>
         </div>
 
         <div v-if="step === 4">
-          <p class="text-lg p-8">Migration section</p>
+          <p class="text-lg p-8 text-center">Migration section</p>
         </div>
 
         <div v-if="step === 5">
-          <p class="text-lg p-8">Validation section</p>
+          <p class="text-lg p-8 text-center">Validation section</p>
         </div>
 
         <div class="flex justify-between items-center">
@@ -130,7 +130,7 @@ watch(setupError, (value) => {
   }
 });
 
-function updateLang(value: string) {
+function handleEventUpdateLang(value: string) {
   lang.value = value;
   // TODO: if the translation does not exist, it shows the key instead of default (en)
   setLocale(lang.value);
@@ -139,8 +139,7 @@ function updateLang(value: string) {
 async function increaseStep() {
   try {
     if (step.value === 1) {
-      // TODO: handle error
+      await updateLang();
-      await globalStore.updateLang(lang.value);
       stepInvalide.value.push(1);
     }
 
@@ -180,6 +179,21 @@ function decreaseStep() {
   if (step.value > 1) step.value -= 1;
 }
 
+async function updateLang() {
+  try {
+    await globalStore.updateLang(lang.value);
+  } catch (error) {
+    if (error instanceof FetchError) {
+      setupError.value = {
+        title: t('setup.requirements'),
+        message: error.data.message,
+      };
+    }
+    // increaseStep fn
+    throw error;
+  }
+}
+
 async function newAccount() {
   if (!username.value || !password.value) return;
 

src/server/utils/types.ts

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