From 7ec61d6326be27d60dfada722fd9e7e0e44d12d0 Mon Sep 17 00:00:00 2001
From: tetuaoro <65575727+tetuaoro@users.noreply.github.com>
Date: Wed, 18 Sep 2024 14:43:16 +0200
Subject: [PATCH] update: setup page

- update ui select language
- change lang on selection
---
 src/app/components/ui/ChooseLang.vue | 24 ++++++------------------
 src/app/pages/setup.vue              |  3 ++-
 src/locales/en.json                  |  1 +
 src/locales/fr.json                  |  1 +
 4 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/app/components/ui/ChooseLang.vue b/src/app/components/ui/ChooseLang.vue
index 47722921..4d9e207b 100644
--- a/src/app/components/ui/ChooseLang.vue
+++ b/src/app/components/ui/ChooseLang.vue
@@ -1,42 +1,30 @@
 <template>
   <SelectRoot v-model="langProxy">
     <SelectTrigger
-      class="inline-flex min-w-[160px] items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9 outline-none"
-      aria-label="Customise options"
+      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"
     >
-      <SelectValue placeholder="Select a fruit..." />
-      <Icon icon="radix-icons:chevron-down" class="h-3.5 w-3.5" />
+      <SelectValue :placeholder="$t('setup.chooseLang')" />
+      <IconsArrowDown class="size-4" />
     </SelectTrigger>
 
     <SelectPortal>
       <SelectContent
-        class="min-w-[160px] bg-white rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade z-[100]"
+        class="min-w-[160px] bg-white dark:bg-neutral-500 rounded"
         :side-offset="5"
       >
-        <SelectScrollUpButton
-          class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default"
-        >
-          <Icon icon="radix-icons:chevron-up" />
-        </SelectScrollUpButton>
-
         <SelectViewport class="p-[5px]">
           <SelectItem
             v-for="(option, index) in langs"
             :key="index"
-            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
             :value="option.value"
+            class="text-[13px] leading-none text-grass11 hover:bg-red-800 dark:text-white hover:text-white rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative"
           >
             <SelectItemText>
               {{ option.name }}
             </SelectItemText>
           </SelectItem>
         </SelectViewport>
-
-        <SelectScrollDownButton
-          class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default"
-        >
-          <Icon icon="radix-icons:chevron-down" />
-        </SelectScrollDownButton>
       </SelectContent>
     </SelectPortal>
   </SelectRoot>
diff --git a/src/app/pages/setup.vue b/src/app/pages/setup.vue
index 3a8e84f6..4d1bf599 100644
--- a/src/app/pages/setup.vue
+++ b/src/app/pages/setup.vue
@@ -102,7 +102,7 @@
 <script setup lang="ts">
 import { FetchError } from 'ofetch';
 
-const { t } = useI18n();
+const { t, setLocale } = useI18n();
 const authStore = useAuthStore();
 const generalStore = useGeneralStore();
 
@@ -132,6 +132,7 @@ watch(setupError, (value) => {
 
 function updateLang(value: string) {
   lang.value = value;
+  setLocale(lang.value);
 }
 
 async function increaseStep() {
diff --git a/src/locales/en.json b/src/locales/en.json
index 5700f073..9c291ed3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -16,6 +16,7 @@
     "welcome": "Welcome to your first setup of wg-easy !",
     "msgStepOne": "Please choose a default language.",
     "msgStepTwo": "Please first enter an admin username and a strong secure password. This information will be used to log in to your administration panel.",
+    "chooseLang": "Select a language...",
     "newPassword": "New Password",
     "accept": "I accept the condition",
     "submitBtn": "Create admin account",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 8f52b200..82aaf2d6 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -16,6 +16,7 @@
     "welcome": "Bienvenue dans votre première configuration de wg-easy !",
     "msgStepOne": "Sélectionner votre langue.",
     "msgStepTwo": "Veuillez renseigner votre nom d'utilisateur et votre mot de passe. Ces informations seront utilisées pour vous connecter à votre page d'administration.",
+    "chooseLang": "Choisir une langue...",
     "newPassword": "Nouveau mot de passe",
     "accept": "J'accepte les conditions d'utilisation",
     "submitBtn": "Créer un compte administrateur",