modify language select style

src/views/desktop/ForgetPasswordPage.vue

@@ -67,22 +67,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="requesting"
-                                                   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="requesting" />
                                 </v-col>
 
                                 <v-col cols="12" class="d-flex align-center pt-0">
@@ -100,23 +85,19 @@
             </v-col>
         </v-row>
 
-        <confirm-dialog ref="confirmDialog"/>
         <snack-bar ref="snackbar" />
     </div>
 </template>
 
 <script setup lang="ts">
-import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 import SnackBar from '@/components/desktop/SnackBar.vue';
 
 import { ref, computed, useTemplateRef } from 'vue';
 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';
@@ -126,27 +107,22 @@ import {
     mdiChevronLeft,
 } from '@mdi/js';
 
-type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
 type SnackBarType = InstanceType<typeof SnackBar>;
 
 const theme = useTheme();
 
-const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions, setLanguage } = useI18n();
+const { tt } = useI18n();
 
 const rootStore = useRootStore();
-const settingsStore = useSettingsStore();
 
 const version = `v${getVersion()}`;
 
-const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
 const email = ref<string>('');
 const requesting = ref<boolean>(false);
 
-const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
 
 function requestResetPassword(): void {
     if (!email.value) {
@@ -169,9 +145,4 @@ function requestResetPassword(): void {
         }
     });
 }
-
-function changeLanguage(locale: string): void {
-    const localeDefaultSettings = setLanguage(locale);
-    settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-}
 </script>