modify language select style

src/views/desktop/ResetPasswordPage.vue

@@ -92,22 +92,7 @@
                         <v-card-text class="pt-0">
                             <v-row>
                                 <v-col cols="12" class="text-center">
-                                    <v-menu location="bottom">
-                                        <template #activator="{ props }">
-                                            <v-btn variant="text"
-                                                   :disabled="updating"
-                                                   v-bind="props">{{ currentLanguageName }}</v-btn>
-                                        </template>
-                                        <v-list>
-                                            <v-list-item v-for="lang in allLanguages" :key="lang.languageTag">
-                                                <v-list-item-title
-                                                    class="cursor-pointer"
-                                                    @click="changeLanguage(lang.languageTag)">
-                                                    {{ lang.displayName }}
-                                                </v-list-item-title>
-                                            </v-list-item>
-                                        </v-list>
-                                    </v-menu>
+                                    <language-select-button :disabled="updating" />
                                 </v-col>
 
                                 <v-col cols="12" class="d-flex align-center pt-0">
@@ -139,11 +124,9 @@ import { ref, computed, useTemplateRef } from 'vue';
 import { useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 
-import type { LanguageOption } from '@/locales/index.ts';
 import { useI18n } from '@/locales/helpers.ts';
 
 import { useRootStore } from '@/stores/index.ts';
-import { useSettingsStore } from '@/stores/setting.ts';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { ThemeType } from '@/core/theme.ts';
@@ -163,10 +146,9 @@ const props = defineProps<{
 const router = useRouter();
 const theme = useTheme();
 
-const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions, setLanguage } = useI18n();
+const { tt } = useI18n();
 
 const rootStore = useRootStore();
-const settingsStore = useSettingsStore();
 
 const version = `v${getVersion()}`;
 
@@ -181,9 +163,7 @@ const confirmPassword = ref<string>('');
 const updating = ref<boolean>(false);
 const passwordChanged = ref<boolean>(false);
 
-const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
 
 const inputProblemMessage = computed<string | null>(() => {
     if (!email.value) {
@@ -201,11 +181,6 @@ const inputProblemMessage = computed<string | null>(() => {
     }
 });
 
-function changeLanguage(locale: string): void {
-    const localeDefaultSettings = setLanguage(locale);
-    settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-}
-
 function onSnackbarShowStateChanged(newValue: boolean): void {
     if (!newValue && passwordChanged.value) {
         router.replace('/login');