From 832a5b1b458d9c3b12a5acc66ab439a8b6c122ac Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Wed, 5 Nov 2025 11:17:54 +0100
Subject: [PATCH 1/2] Include language in account form.

---
 .../src/components/account/ProfileForm.vue    |  2 +-
 .../admin/identities/AccountEditForm.vue      | 43 ++++++++++++++++--
 .../admin/identities/AccountSummary.vue       | 14 +++++-
 .../form_steps/AccountProfileForm.vue         | 44 +++++++++++++++++++
 frontend/src/plugins/gettext.js               | 40 +++++++++--------
 frontend/src/stores/index.js                  |  1 +
 frontend/src/stores/language.store.js         | 34 ++++++++++++++
 7 files changed, 154 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/components/admin/identities/form_steps/AccountProfileForm.vue
 create mode 100644 frontend/src/stores/language.store.js

diff --git a/frontend/src/components/account/ProfileForm.vue b/frontend/src/components/account/ProfileForm.vue
index 9c5833568..eac9cad56 100644
--- a/frontend/src/components/account/ProfileForm.vue
+++ b/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'
diff --git a/frontend/src/components/admin/identities/AccountEditForm.vue b/frontend/src/components/admin/identities/AccountEditForm.vue
index 340cca65b..8086ccc71 100644
--- a/frontend/src/components/admin/identities/AccountEditForm.vue
+++ b/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>
diff --git a/frontend/src/components/admin/identities/AccountSummary.vue b/frontend/src/components/admin/identities/AccountSummary.vue
index b3dc9390f..d6ba8416d 100644
--- a/frontend/src/components/admin/identities/AccountSummary.vue
+++ b/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>
diff --git a/frontend/src/components/admin/identities/form_steps/AccountProfileForm.vue b/frontend/src/components/admin/identities/form_steps/AccountProfileForm.vue
new file mode 100644
index 000000000..341d89760
--- /dev/null
+++ b/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>
diff --git a/frontend/src/plugins/gettext.js b/frontend/src/plugins/gettext.js
index 77347584d..1de2b70a7 100644
--- a/frontend/src/plugins/gettext.js
+++ b/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
diff --git a/frontend/src/stores/index.js b/frontend/src/stores/index.js
index c4a9f79fc..6bd7239ec 100644
--- a/frontend/src/stores/index.js
+++ b/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'
diff --git a/frontend/src/stores/language.store.js b/frontend/src/stores/language.store.js
new file mode 100644
index 000000000..dc6721c84
--- /dev/null
+++ b/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,
+  }
+})

From 410ccb45097c8d06228b4697ca8faf701bc3323b Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Wed, 5 Nov 2025 12:05:12 +0100
Subject: [PATCH 2/2] Ensure profile form gets validated too

---
 frontend/src/components/admin/identities/AccountEditForm.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/admin/identities/AccountEditForm.vue b/frontend/src/components/admin/identities/AccountEditForm.vue
index 8086ccc71..6ea171106 100644
--- a/frontend/src/components/admin/identities/AccountEditForm.vue
+++ b/frontend/src/components/admin/identities/AccountEditForm.vue
@@ -281,12 +281,14 @@ const generalForm = ref()
 const mailboxForm = ref()
 const aliasForm = ref()
 const resourcesForm = ref()
+const profileForm = ref()
 
 //formMap
 const formMap = computed(() => {
   const map = {
     roleForm: roleForm,
     generalForm: generalForm,
+    profileForm: profileForm,
   }
   if (usernameIsEmail.value) {
     map.aliasForm = aliasForm