Include language in account form.

frontend/src/components/account/ProfileForm.vue

@@ -84,7 +84,7 @@
   </v-expansion-panels>
 </template>
 
-<script setup lang="js">
+<script setup>
 import { useBusStore, useAuthStore } from '@/stores'
 import languagesApi from '@/api/languages'
 import AccountPasswordForm from '@/components/admin/identities/form_steps/AccountPasswordSubForm.vue'

frontend/src/components/admin/identities/AccountEditForm.vue

@@ -28,7 +28,7 @@
         <v-expansion-panel-title v-slot="{ expanded }">
           <v-row no-gutters>
             <v-col cols="4">
-              {{ $gettext('Identification') }}
+              {{ $gettext('Account') }}
             </v-col>
             <v-col cols="8" class="">
               <v-fade-transition leave-absolute>
@@ -62,6 +62,35 @@
           />
         </v-expansion-panel-text>
       </v-expansion-panel>
+
+      <v-expansion-panel eager value="profileForm">
+        <v-expansion-panel-title v-slot="{ expanded }">
+          <v-row no-gutters>
+            <v-col cols="4">
+              {{ $gettext('Profile') }}
+            </v-col>
+            <v-col cols="8" class="">
+              <v-fade-transition leave-absolute>
+                <span v-if="expanded"></span>
+                <v-row v-else no-gutters style="width: 100%">
+                  <v-col cols="6">
+                    <div class="mr-2">
+                      {{ $gettext('Language:') }}
+                      {{
+                        languageStore.getLanguageLabel(editedAccount.language)
+                      }}
+                    </div>
+                  </v-col>
+                </v-row>
+              </v-fade-transition>
+            </v-col>
+          </v-row>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <AccountProfileForm ref="profileForm" v-model="editedAccount" />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
       <v-expansion-panel v-if="usernameIsEmail" eager value="mailboxForm">
         <v-expansion-panel-title v-slot="{ expanded }">
           <v-row no-gutters>
@@ -195,11 +224,12 @@
   </div>
 </template>
 
-<script setup lang="js">
-import { useAuthStore } from '@/stores'
+<script setup>
+import { useAuthStore, useBusStore, useLanguageStore } from '@/stores'
 import AccountGeneralForm from './form_steps/AccountGeneralForm.vue'
 import AccountMailboxForm from './form_steps/AccountMailboxForm.vue'
 import AccountAliasForm from './form_steps/AccountAliasForm.vue'
+import AccountProfileForm from './form_steps/AccountProfileForm.vue'
 import AccountRoleForm from './form_steps/AccountRoleForm.vue'
 import ResourcesForm from '@/components/tools/ResourcesForm.vue'
 import LoadingData from '@/components/tools/LoadingData.vue'
@@ -213,6 +243,8 @@ import constants from '@/constants.json'
 
 const { $gettext } = useGettext()
 const authStore = useAuthStore()
+const { displayNotification } = useBusStore()
+const languageStore = useLanguageStore()
 const route = useRoute()
 const router = useRouter()
 const { canSetRole } = usePermissions()
@@ -308,6 +340,7 @@ async function save() {
       }
     }
     await accountsApi.patch(editedAccount.value.pk, data)
+    displayNotification({ msg: $gettext('Account updated') })
     router.push({
       name: 'AccountDetail',
       params: { id: route.params.id },
@@ -340,4 +373,8 @@ watch(
   },
   { deep: true }
 )
+
+if (!languageStore.loaded) {
+  await languageStore.getLanguages()
+}
 </script>

frontend/src/components/admin/identities/AccountSummary.vue

@@ -23,6 +23,12 @@
         <v-col cols="6">{{ $gettext('Role') }} </v-col>
         <v-col cols="6">{{ account.role }}</v-col>
       </v-row>
+      <v-row>
+        <v-col cols="6">{{ $gettext('Language') }} </v-col>
+        <v-col cols="6">{{
+          languageStore.getLanguageLabel(account.language)
+        }}</v-col>
+      </v-row>
       <v-row>
         <v-col cols="6">{{ $gettext('Secondary email') }}</v-col>
         <v-col cols="6">{{ account.secondary_email }}</v-col>
@@ -95,6 +101,12 @@
   </v-card>
 </template>
 
-<script setup lang="js">
+<script setup>
+import { useLanguageStore } from '@/stores'
+
 defineProps({ account: { type: Object, default: null } })
+
+const languageStore = useLanguageStore()
+
+await languageStore.getLanguages()
 </script>

frontend/src/components/admin/identities/form_steps/AccountProfileForm.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-form ref="vFormRef">
+    <label class="m-label">{{ $gettext('Language') }}</label>
+    <v-autocomplete
+      v-model="model.language"
+      :items="languageStore.availableLanguages"
+      item-title="label"
+      item-value="code"
+      variant="outlined"
+      density="compact"
+      :error-messages="languageError"
+    />
+    <label class="m-label">{{ $gettext('Phone number') }}</label>
+    <v-text-field
+      v-model="model.phone_number"
+      variant="outlined"
+      density="compact"
+    />
+    <label class="m-label">{{ $gettext('Secondary email') }}</label>
+    <v-text-field
+      v-model="model.secondary_email"
+      variant="outlined"
+      density="compact"
+      :rules="[rules.emailOrNull]"
+    />
+  </v-form>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useLanguageStore } from '@/stores'
+import rules from '@/plugins/rules'
+
+const model = defineModel({
+  type: Object,
+})
+
+const languageStore = useLanguageStore()
+
+const languageError = ref('')
+const vFormRef = ref()
+
+defineExpose({ vFormRef })
+</script>

frontend/src/plugins/gettext.js

@@ -1,26 +1,28 @@
 import { createGettext } from 'vue3-gettext'
 import translations from '@/locale/translations.json'
 
+const availableLanguages = {
+  br: 'Breton',
+  cs: 'Czech',
+  de: 'German',
+  el: 'Greek',
+  en: 'English',
+  es: 'Spain',
+  fi: 'Finnish',
+  fr: 'French',
+  it: 'Italian',
+  ja: 'Japanese',
+  nl: 'Dutch',
+  pl: 'Polish',
+  pt_BR: 'Portuguese (BR)',
+  ru: 'Russian',
+  sv: 'Swedish',
+  tr: 'tr',
+  zh: 'Chinese',
+}
+
 export default createGettext({
-  availableLanguages: {
-    en: 'English',
-    cs: 'Czech',
-    de: 'German',
-    br: 'Breton',
-    el: 'Greek',
-    es: 'Spain',
-    fi: 'Finnish',
-    fr: 'French',
-    it: 'Italian',
-    ja: 'Japanese',
-    nl: 'Dutch',
-    pl: 'Polish',
-    pt_BR: 'Portuguese (BR)',
-    ru: 'Russian',
-    sv: 'Swedish',
-    tr: 'tr',
-    zh: 'Chinese',
-  },
+  availableLanguages,
   defaultLanguage: 'en',
   translations: translations,
   silent: true, // stop warnings

frontend/src/stores/index.js

@@ -4,6 +4,7 @@ export * from './global.store'
 export * from './auth.store'
 export * from './bus.store'
 export * from './layout.store'
+export * from './language.store'
 export * from './domains.store'
 export * from './parameters.store'
 export * from './providers.store'

frontend/src/stores/language.store.js

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import languagesApi from '@/api/languages'
+
+export const useLanguageStore = defineStore('language', () => {
+  const availableLanguages = ref([])
+  const loaded = ref(false)
+
+  const $reset = async () => {
+    availableLanguages.value = []
+    loaded.value = false
+  }
+
+  const getLanguages = async () => {
+    const resp = await languagesApi.getAll()
+    availableLanguages.value = resp.data
+    loaded.value = true
+  }
+
+  const getLanguageLabel = (languageCode) => {
+    const language = availableLanguages.value.find(
+      (item) => item.code === languageCode
+    )
+    return language ? language.label : languageCode
+  }
+
+  return {
+    availableLanguages,
+    getLanguages,
+    getLanguageLabel,
+    loaded,
+    $reset,
+  }
+})