From ed7aa81aea1591126d80be7699e29f390d8b5253 Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Wed, 20 May 2026 18:00:08 +0200
Subject: [PATCH] feat(plugin-id/ui): convert user edit to a dialog (chantier
 I.2)

Per Fabrice's review (chantier I.2): the user create/edit screen is no
longer a routed page but a popup, mirroring the Roles screen.

- Extract the former UserEditView form into UserEditDialog.vue, a
  v-dialog component (props modelValue + userId, emits saved). It is
  hosted by UserListView and opened from the "New user" button and the
  row gear menu's Edit action; clicking a row also opens it.
- Remove the per-entity routes /id/user/new and /id/user/:id (Option A,
  mirroring the Roles screen which has no per-entity route).
- Adapt the unsaved-changes guard: useFormGuard's onBeforeRouteLeave is
  inert without a route change, so the dialog binds model-value one-way
  and intercepts every close (Cancel / Esc / scrim) through requestClose,
  which raises the existing guard dialog when the form is dirty.
- Rearrange the lock/isolate/reset actions inside the dialog as a
  compact bordered list, consistent with the row gear menu.
- Preload the Groups dropdown's first page of options when it opens, in
  edit mode as well as create, so the user always sees a list to pick
  from without typing; already-assigned groups are merged in so their
  chips keep rendering.
---
 ui/src/index.js                               |   5 +-
 .../{UserEditView.vue => UserEditDialog.vue}  | 437 +++++++++++-------
 ui/src/views/UserListView.vue                 |  36 +-
 3 files changed, 300 insertions(+), 178 deletions(-)
 rename ui/src/views/{UserEditView.vue => UserEditDialog.vue} (52%)

diff --git a/ui/src/index.js b/ui/src/index.js
index a10e316..74abdec 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -36,7 +36,6 @@ if (typeof document !== 'undefined') {
 import { useI18nStore } from '@ligoj/host'
 import IdPlugin from './IdPlugin.vue'
 import UserListView from './views/UserListView.vue'
-import UserEditView from './views/UserEditView.vue'
 import GroupListView from './views/GroupListView.vue'
 import GroupEditView from './views/GroupEditView.vue'
 import CompanyListView from './views/CompanyListView.vue'
@@ -55,9 +54,9 @@ const features = {
 }
 
 const routes = [
+  // User create/edit is a dialog hosted by UserListView (chantier I.2),
+  // so there is no per-entity user route — mirrors the Roles screen.
   { path: '/id/user', name: 'id-user', component: UserListView },
-  { path: '/id/user/new', name: 'id-user-new', component: UserEditView },
-  { path: '/id/user/:id', name: 'id-user-edit', component: UserEditView },
   { path: '/id/group', name: 'id-group', component: GroupListView },
   { path: '/id/group/new', name: 'id-group-new', component: GroupEditView },
   { path: '/id/group/:id', name: 'id-group-edit', component: GroupEditView },
diff --git a/ui/src/views/UserEditView.vue b/ui/src/views/UserEditDialog.vue
similarity index 52%
rename from ui/src/views/UserEditView.vue
rename to ui/src/views/UserEditDialog.vue
index 6e8a518..d952c97 100644
--- a/ui/src/views/UserEditView.vue
+++ b/ui/src/views/UserEditDialog.vue
@@ -1,119 +1,134 @@
 <template>
   <div>
-    <v-alert v-if="demoMode" type="info" variant="tonal" density="compact" class="mb-4">
-      {{ t('user.demoEdit') }}
-    </v-alert>
-
-    <v-skeleton-loader v-if="loading" type="card, actions" max-width="700" class="mb-4" />
-
-    <v-card v-if="!loading" class="edit-card">
-      <v-card-text>
-        <v-form ref="formRef" @submit.prevent="save">
-          <v-text-field v-model="form.id" :label="t('user.login')" :rules="[rules.required]" :disabled="isEdit" :hint="isEdit ? '' : t('user.loginHint')" persistent-hint variant="outlined"
-            class="mb-2" />
-          <v-text-field v-model="form.firstName" :label="t('user.firstName')" :rules="[rules.required]" variant="outlined" class="mb-2" />
-          <v-text-field v-model="form.lastName" :label="t('user.lastName')" :rules="[rules.required]" variant="outlined" class="mb-2" />
-          <!-- Auto-suggest for company. Queries rest/service/id/company as the
-               user types (300 ms debounced). v-model stores the company name
-               as a string, matching the payload contract of rest/service/id/user. -->
-          <v-autocomplete
-            v-model="form.company"
-            :items="companyResults"
-            :loading="companyLoading"
-            :search="companySearchQuery"
-            item-title="name"
-            item-value="name"
-            :label="t('user.company')"
-            placeholder="Rechercher une entité…"
-            variant="outlined"
-            class="mb-2"
-            no-filter
-            clearable
-            @update:search="onCompanySearch"
-          >
-            <template #item="{ props: itemProps, item }">
-              <v-list-item v-bind="itemProps" :title="item?.name || ''">
-                <template v-if="item?.scope || item?.count !== undefined" #subtitle>
-                  <span v-if="item?.scope" class="text-caption mr-2">{{ item.scope }}</span>
-                  <v-chip
-                    v-if="item?.count !== undefined"
-                    size="x-small"
-                    variant="tonal"
-                    class="mr-1"
-                  >{{ item.count }} {{ t('user.title').toLowerCase() }}</v-chip>
+    <!-- User create/edit popup (chantier I.2). Replaces the former routed
+         UserEditView page; hosted by UserListView, opened from the "New
+         user" button and the row gear menu. model-value is bound one-way
+         so a close request (Cancel / Esc / scrim) can be vetoed by the
+         unsaved-changes guard before it actually closes. -->
+    <v-dialog :model-value="modelValue" @update:model-value="onDialogModel" max-width="700" scrollable>
+      <v-card>
+        <v-card-title>{{ isEdit ? t('user.edit') : t('user.new') }}</v-card-title>
+
+        <v-card-text>
+          <v-alert v-if="demoMode" type="info" variant="tonal" density="compact" class="mb-4">
+            {{ t('user.demoEdit') }}
+          </v-alert>
+
+          <v-skeleton-loader v-if="loading" type="article" />
+
+          <template v-else>
+            <v-form ref="formRef" @submit.prevent="save">
+              <v-text-field v-model="form.id" :label="t('user.login')" :rules="[rules.required]" :disabled="isEdit" :hint="isEdit ? '' : t('user.loginHint')" persistent-hint
+                variant="outlined" class="mb-2" autofocus />
+              <v-text-field v-model="form.firstName" :label="t('user.firstName')" :rules="[rules.required]" variant="outlined" class="mb-2" />
+              <v-text-field v-model="form.lastName" :label="t('user.lastName')" :rules="[rules.required]" variant="outlined" class="mb-2" />
+              <!-- Auto-suggest for company. Queries rest/service/id/company as the
+                   user types (300 ms debounced). v-model stores the company name
+                   as a string, matching the payload contract of rest/service/id/user. -->
+              <v-autocomplete
+                v-model="form.company"
+                :items="companyResults"
+                :loading="companyLoading"
+                :search="companySearchQuery"
+                item-title="name"
+                item-value="name"
+                :label="t('user.company')"
+                placeholder="Rechercher une entité…"
+                variant="outlined"
+                class="mb-2"
+                no-filter
+                clearable
+                @update:search="onCompanySearch"
+              >
+                <template #item="{ props: itemProps, item }">
+                  <v-list-item v-bind="itemProps" :title="item?.name || ''">
+                    <template v-if="item?.scope || item?.count !== undefined" #subtitle>
+                      <span v-if="item?.scope" class="text-caption mr-2">{{ item.scope }}</span>
+                      <v-chip
+                        v-if="item?.count !== undefined"
+                        size="x-small"
+                        variant="tonal"
+                        class="mr-1"
+                      >{{ item.count }} {{ t('user.title').toLowerCase() }}</v-chip>
+                    </template>
+                  </v-list-item>
                 </template>
-              </v-list-item>
-            </template>
-            <template #no-data>
-              <v-list-item>
-                <v-list-item-title>
-                  {{ companySearchQuery ? 'Aucune entité trouvée' : 'Saisissez des caractères pour rechercher' }}
-                </v-list-item-title>
-              </v-list-item>
-            </template>
-          </v-autocomplete>
-          <v-text-field v-model="form.mail" :label="t('user.email')" type="email" variant="outlined" class="mb-2" />
-          <!-- Auto-suggest for groups (multi-select). Queries
-               rest/service/id/group as the user types (300 ms debounced).
-               v-model holds an array of group **names** (strings),
-               matching the payload contract of rest/service/id/user. -->
-          <v-autocomplete
-            v-model="groups"
-            v-model:menu="groupMenu"
-            :items="groupResults"
-            :loading="groupLoading"
-            :search="groupSearchQuery"
-            item-title="name"
-            item-value="name"
-            :label="t('user.groups')"
-            placeholder="Ajouter un groupe…"
-            variant="outlined"
-            class="mb-2"
-            multiple
-            chips
-            closable-chips
-            no-filter
-            clearable
-            @update:search="onGroupSearch"
-            @update:model-value="onGroupModelUpdate"
-          >
-            <template #item="{ props: itemProps, item }">
-              <v-list-item v-bind="itemProps" :title="item?.name || ''" />
-            </template>
-            <template #no-data>
-              <v-list-item>
-                <v-list-item-title>
-                  {{ groupSearchQuery ? 'Aucun groupe trouvé' : 'Saisissez des caractères pour rechercher' }}
-                </v-list-item-title>
-              </v-list-item>
+                <template #no-data>
+                  <v-list-item>
+                    <v-list-item-title>
+                      {{ companySearchQuery ? 'Aucune entité trouvée' : 'Saisissez des caractères pour rechercher' }}
+                    </v-list-item-title>
+                  </v-list-item>
+                </template>
+              </v-autocomplete>
+              <v-text-field v-model="form.mail" :label="t('user.email')" type="email" variant="outlined" class="mb-2" />
+              <!-- Auto-suggest for groups (multi-select). Queries
+                   rest/service/id/group as the user types (300 ms debounced).
+                   v-model holds an array of group **names** (strings),
+                   matching the payload contract of rest/service/id/user. -->
+              <v-autocomplete
+                v-model="groups"
+                v-model:menu="groupMenu"
+                :items="groupResults"
+                :loading="groupLoading"
+                :search="groupSearchQuery"
+                item-title="name"
+                item-value="name"
+                :label="t('user.groups')"
+                placeholder="Ajouter un groupe…"
+                variant="outlined"
+                class="mb-2"
+                multiple
+                chips
+                closable-chips
+                no-filter
+                clearable
+                @update:search="onGroupSearch"
+                @update:model-value="onGroupModelUpdate"
+              >
+                <template #item="{ props: itemProps, item }">
+                  <v-list-item v-bind="itemProps" :title="item?.name || ''" />
+                </template>
+                <template #no-data>
+                  <v-list-item>
+                    <v-list-item-title>
+                      {{ groupSearchQuery ? 'Aucun groupe trouvé' : 'Saisissez des caractères pour rechercher' }}
+                    </v-list-item-title>
+                  </v-list-item>
+                </template>
+              </v-autocomplete>
+            </v-form>
+
+            <!-- Account actions (edit mode only). Rearranged per Fabrice's
+                 review: the former separate "Actions" card with a row of
+                 tonal buttons is now an inline bordered list inside the
+                 dialog, consistent with the row gear menu of the list. -->
+            <template v-if="isEdit">
+              <v-divider class="my-4" />
+              <div class="text-subtitle-2 text-medium-emphasis mb-2">{{ t('user.actions') }}</div>
+              <v-list border rounded density="compact" bg-color="transparent">
+                <v-list-item :prepend-icon="locked ? 'mdi-lock-open-variant' : 'mdi-lock'" :title="locked ? t('user.unlock') : t('user.lock')"
+                  @click="startAction(locked ? 'unlock' : 'lock')" />
+                <v-list-item :prepend-icon="isolated ? 'mdi-account-check' : 'mdi-account-off'" :title="isolated ? t('user.restore') : t('user.isolate')"
+                  @click="startAction(isolated ? 'restore' : 'isolate')" />
+                <v-list-item prepend-icon="mdi-lock-reset" :title="t('user.resetPassword')" @click="startAction('resetPassword')" />
+              </v-list>
             </template>
-          </v-autocomplete>
-        </v-form>
-      </v-card-text>
-      <v-card-actions>
-        <v-btn v-if="isEdit" color="error" variant="tonal" @click="confirmDelete = true">
-          <v-icon start>mdi-delete</v-icon> {{ t('common.delete') }}
-        </v-btn>
-        <v-spacer />
-        <v-btn variant="text" @click="router.push('/id/user')">{{ t('common.cancel') }}</v-btn>
-        <v-btn color="primary" variant="elevated" :loading="saving" @click="save">
-          <v-icon start>mdi-content-save</v-icon> {{ t('common.save') }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-
-    <v-card v-if="isEdit && !loading" class="edit-card mt-4">
-      <v-card-title class="text-h6">{{ t('user.actions') }}</v-card-title>
-      <v-card-text>
-        <div class="d-flex flex-wrap ga-2">
-          <v-btn v-if="!locked" color="warning" variant="tonal" prepend-icon="mdi-lock" @click="startAction('lock')">{{ t('user.lock') }}</v-btn>
-          <v-btn v-if="locked" color="success" variant="tonal" prepend-icon="mdi-lock-open-variant" @click="startAction('unlock')">{{ t('user.unlock') }}</v-btn>
-          <v-btn v-if="!isolated" color="error" variant="tonal" prepend-icon="mdi-account-off" @click="startAction('isolate')">{{ t('user.isolate') }}</v-btn>
-          <v-btn v-if="isolated" color="success" variant="tonal" prepend-icon="mdi-account-check" @click="startAction('restore')">{{ t('user.restore') }}</v-btn>
-          <v-btn color="info" variant="tonal" prepend-icon="mdi-lock-reset" @click="startAction('resetPassword')">{{ t('user.resetPassword') }}</v-btn>
-        </div>
-      </v-card-text>
-    </v-card>
+          </template>
+        </v-card-text>
+
+        <v-card-actions>
+          <v-btn v-if="isEdit" color="error" variant="tonal" :disabled="loading" @click="confirmDelete = true">
+            <v-icon start>mdi-delete</v-icon> {{ t('common.delete') }}
+          </v-btn>
+          <v-spacer />
+          <v-btn variant="text" @click="requestClose">{{ t('common.cancel') }}</v-btn>
+          <v-btn color="primary" variant="elevated" :loading="saving" :disabled="loading" @click="save">
+            <v-icon start>mdi-content-save</v-icon> {{ t('common.save') }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
 
     <v-dialog v-model="confirmDelete" max-width="400">
       <v-card>
@@ -129,14 +144,19 @@
       </v-card>
     </v-dialog>
 
-    <v-dialog v-model="showGuardDialog" max-width="400">
+    <!-- Unsaved-changes guard. Triggered either by a dialog close request
+         (Cancel / Esc / scrim) or by useFormGuard's onBeforeRouteLeave when
+         navigating away from the list with the dialog still open.
+         persistent: only the explicit buttons dismiss it, so pendingClose
+         is always reset through onGuardConfirm/onGuardCancel. -->
+    <v-dialog v-model="showGuardDialog" max-width="400" persistent>
       <v-card>
         <v-card-title>{{ t('common.unsavedTitle') }}</v-card-title>
         <v-card-text>{{ t('common.unsavedMsg') }}</v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn variant="text" @click="cancelLeave">{{ t('common.cancel') }}</v-btn>
-          <v-btn color="warning" variant="elevated" @click="confirmLeave">{{ t('common.discard') }}</v-btn>
+          <v-btn variant="text" @click="onGuardCancel">{{ t('common.cancel') }}</v-btn>
+          <v-btn color="warning" variant="elevated" @click="onGuardConfirm">{{ t('common.discard') }}</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -156,14 +176,18 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useApi, useFormGuard, useAppStore, useErrorStore, useI18nStore } from '@ligoj/host'
+import { ref, computed, watch } from 'vue'
+import { useApi, useFormGuard, useErrorStore, useI18nStore } from '@ligoj/host'
+
+const props = defineProps({
+  // Dialog visibility (v-model).
+  modelValue: { type: Boolean, default: false },
+  // User login to edit; null/absent means create mode.
+  userId: { type: String, default: null },
+})
+const emit = defineEmits(['update:modelValue', 'saved'])
 
-const route = useRoute()
-const router = useRouter()
 const api = useApi()
-const appStore = useAppStore()
 const errorStore = useErrorStore()
 const i18n = useI18nStore()
 const t = i18n.t
@@ -192,9 +216,11 @@ const groupSearchQuery = ref('')
 const groupResults = ref([])
 const groupLoading = ref(false)
 const groupMenu = ref(false)
+const groupsPreloaded = ref(false)
 let groupDebounce = null
+let groupMenuTimer = null
 
-const isEdit = computed(() => !!route.params.id)
+const isEdit = computed(() => !!props.userId)
 
 const form = ref({
   id: '',
@@ -204,7 +230,17 @@ const form = ref({
   mail: '',
 })
 
-const { showGuardDialog, confirmLeave, cancelLeave, markClean, init: initGuard } = useFormGuard(form)
+// useFormGuard still drives the dirty tracking (snapshot + deep watch) and
+// keeps its onBeforeRouteLeave guard for the "navigate away with the dialog
+// open" case. The dialog's own close (Cancel / Esc / scrim) is intercepted
+// separately below — onBeforeRouteLeave never fires without a route change.
+// The tracked value merges `form` with the `groups` multi-select (a separate
+// ref) so editing only the groups still flags the form as dirty.
+const { isDirty, showGuardDialog, markClean, confirmLeave, cancelLeave, init: initGuard } =
+  useFormGuard(computed(() => ({ ...form.value, groups: groups.value })))
+// True while the guard dialog was raised by a dialog-close request (vs a
+// route-leave), so the confirm/cancel handlers know which path to resume.
+const pendingClose = ref(false)
 
 const rules = {
   required: v => !!v || t('common.required'),
@@ -287,19 +323,26 @@ function onGroupModelUpdate() {
   groupResults.value = []
 }
 
-/** Preload the first page of groups so the dropdown can be opened
- *  with content already visible on mount (used on /new where the user
- *  has no pre-selected groups). The list endpoint returns 200 with an
- *  empty array when no IAM is configured, so this is safe to call. */
+/** Load the first page of available groups (20) for the dropdown. Called
+ *  lazily when the dropdown opens, for both create and edit modes, so the
+ *  user always sees a list without having to type. The user's already-
+ *  assigned groups are merged in so their chips keep rendering. */
 async function preloadGroups() {
+  groupsPreloaded.value = true
   groupLoading.value = true
   try {
     const url = 'rest/service/id/group?rows=20&page=1&sidx=name&sord=asc'
     const resp = await api.get(url)
-    groupResults.value = Array.isArray(resp) ? resp : (Array.isArray(resp?.data) ? resp.data : [])
+    let rows = Array.isArray(resp) ? resp : (Array.isArray(resp?.data) ? resp.data : [])
+    // Keep the user's already-assigned groups present so their chips keep
+    // rendering even when those groups fall outside this first page.
+    for (const name of groups.value) {
+      if (!rows.some(g => (g.name || g) === name)) rows.unshift({ name })
+    }
+    groupResults.value = rows
   } catch (err) {
     console.error('Group preload failed:', err)
-    groupResults.value = []
+    groupResults.value = groups.value.map(n => ({ name: n }))
   } finally {
     groupLoading.value = false
   }
@@ -374,10 +417,32 @@ function loadDemoUser(id) {
   }
 }
 
-onMounted(async () => {
+/** Reset all form state to a clean create-mode baseline. Called every time
+ *  the dialog opens so a previous edit never bleeds into the next one. */
+function resetForm() {
+  form.value = { id: '', firstName: '', lastName: '', company: '', mail: '' }
+  groups.value = []
+  locked.value = false
+  isolated.value = false
+  demoMode.value = false
+  companyResults.value = []
+  companySearchQuery.value = ''
+  groupResults.value = []
+  groupSearchQuery.value = ''
+  groupMenu.value = false
+  groupsPreloaded.value = false
+  clearTimeout(groupMenuTimer)
+  formRef.value?.resetValidation()
+}
+
+/** Load (or reset) the form when the dialog opens. Replaces the routed
+ *  page's onMounted: the component stays mounted across opens, so the work
+ *  is keyed on the modelValue transition instead. */
+async function loadOnOpen() {
+  resetForm()
   if (isEdit.value) {
     loading.value = true
-    const data = await api.get(`rest/service/id/user/${route.params.id}`)
+    const data = await api.get(`rest/service/id/user/${props.userId}`)
     if (data && !data.code) {
       form.value.id = data.id || ''
       form.value.firstName = data.firstName || ''
@@ -399,44 +464,88 @@ onMounted(async () => {
       // API unavailable — use demo data
       demoMode.value = true
       errorStore.clear()
-      loadDemoUser(route.params.id)
+      loadDemoUser(props.userId)
       // Pre-seed in demo mode too, with a stub object.
       if (form.value.company) {
         companyResults.value = [{ name: form.value.company }]
       }
     }
     loading.value = false
-    appStore.setBreadcrumbs([
-      { title: t('nav.home'), to: '/' },
-      { title: t('nav.identity') },
-      { title: t('user.title'), to: '/id/user' },
-      { title: form.value.id || t('user.edit') },
-    ])
   } else {
-    appStore.setBreadcrumbs([
-      { title: t('nav.home'), to: '/' },
-      { title: t('nav.identity') },
-      { title: t('user.title'), to: '/id/user' },
-      { title: t('user.new') },
-    ])
-    // Check if API is available. Use a list probe (rows=1) so the check doesn't
-    // depend on a specific hardcoded entity that may or may not exist in the
-    // real LDAP backend. The list endpoint returns 200 with an empty array when
-    // nothing matches, and `code` is only set on real API errors.
+    // Check if API is available. Use a list probe (rows=1) so the check
+    // doesn't depend on a specific hardcoded entity that may or may not
+    // exist in the real LDAP backend.
     const check = await api.get('rest/service/id/user?rows=1&page=1')
     if (!check || check.code) {
       demoMode.value = true
       errorStore.clear()
     }
-    // Preload group list and open the dropdown so the available groups
-    // are visible on mount (per Fabrice's UX feedback). Only on /new
-    // since /edit already shows the user's existing groups as chips.
+    // Preload the group list and auto-open the dropdown so the available
+    // groups are visible (per Fabrice's UX feedback, chantier B). Deferred
+    // so the dropdown opens once the dialog transition has settled.
     await preloadGroups()
-    groupMenu.value = true
+    groupMenuTimer = setTimeout(() => { groupMenu.value = true }, 350)
   }
+  // Snapshot the loaded state so the guard only flags real edits.
   initGuard()
+}
+
+watch(() => props.modelValue, val => {
+  if (val) loadOnOpen()
+})
+
+// Lazily preload the available groups when the dropdown opens — for edit
+// mode as well as create, so opening the Groups field always shows a list
+// without typing. groupsPreloaded prevents a duplicate fetch on create
+// mode, where loadOnOpen already preloaded before auto-opening the menu.
+watch(groupMenu, open => {
+  if (open && !groupsPreloaded.value && !groupSearchQuery.value) {
+    preloadGroups()
+  }
 })
 
+// --- Close handling with the unsaved-changes guard ---
+
+/** v-dialog requests a visibility change. Opening is parent-driven, so only
+ *  close requests (Esc / scrim click) reach here. */
+function onDialogModel(val) {
+  if (!val) requestClose()
+}
+
+/** Close request from Cancel / Esc / scrim. Vetoed (guard dialog shown)
+ *  when the form has unsaved changes. */
+function requestClose() {
+  if (isDirty.value) {
+    pendingClose.value = true
+    showGuardDialog.value = true
+  } else {
+    emit('update:modelValue', false)
+  }
+}
+
+/** Guard dialog — "Discard changes". */
+function onGuardConfirm() {
+  if (pendingClose.value) {
+    pendingClose.value = false
+    showGuardDialog.value = false
+    markClean()
+    emit('update:modelValue', false)
+  } else {
+    // Raised by onBeforeRouteLeave — let useFormGuard resume navigation.
+    confirmLeave()
+  }
+}
+
+/** Guard dialog — "Cancel", keep editing. */
+function onGuardCancel() {
+  if (pendingClose.value) {
+    pendingClose.value = false
+    showGuardDialog.value = false
+  } else {
+    cancelLeave()
+  }
+}
+
 async function save() {
   const { valid } = await formRef.value.validate()
   if (!valid) return
@@ -465,7 +574,8 @@ async function save() {
   }
   saving.value = false
   markClean()
-  router.push('/id/user')
+  emit('saved')
+  emit('update:modelValue', false)
 }
 
 async function remove() {
@@ -476,11 +586,12 @@ async function remove() {
   }
 
   deleting.value = true
-  await api.del(`rest/service/id/user/${route.params.id}`)
+  await api.del(`rest/service/id/user/${props.userId}`)
   deleting.value = false
   confirmDelete.value = false
   markClean()
-  router.push('/id/user')
+  emit('saved')
+  emit('update:modelValue', false)
 }
 
 function startAction(type) {
@@ -506,26 +617,16 @@ async function confirmAction() {
   await actions[actionType.value]()
   actionLoading.value = false
   actionDialog.value = false
-  // Update local state
+  // Update local state so the action list relabels immediately.
   if (actionType.value === 'lock') locked.value = true
   if (actionType.value === 'unlock') locked.value = false
   if (actionType.value === 'isolate') isolated.value = true
   if (actionType.value === 'restore') isolated.value = false
+  // Keep the list behind the dialog in sync (status icon, gear labels).
+  emit('saved')
 }
 </script>
 
-<style scoped>
-.edit-card {
-  max-width: 700px;
-}
-
-@media (max-width: 600px) {
-  .edit-card {
-    max-width: 100%;
-  }
-}
-</style>
-
 <style>
 /*
  * Safety net for the ligojLight custom theme: --v-theme-on-surface-variant
diff --git a/ui/src/views/UserListView.vue b/ui/src/views/UserListView.vue
index 03e9081..fc932ee 100644
--- a/ui/src/views/UserListView.vue
+++ b/ui/src/views/UserListView.vue
@@ -4,7 +4,7 @@
       <v-spacer />
       <v-text-field v-model="dt.search.value" prepend-inner-icon="mdi-magnify" :label="t('common.search')" variant="outlined" density="compact" hide-details class="search-field"
         @update:model-value="onSearch" />
-      <v-btn color="primary" prepend-icon="mdi-plus" @click="router.push('/id/user/new')">
+      <v-btn color="primary" prepend-icon="mdi-plus" @click="openCreate">
         {{ t('user.new') }}
       </v-btn>
       <ImportExportBar export-endpoint="service/id/user" import-endpoint="service/id/user/import/csv/full" export-filename="users.csv"
@@ -34,7 +34,7 @@
 
     <LigojDataTableServer filename="users.csv" :fetch-all="dt.loadAll" v-if="!dt.error.value" v-show="dt.items.value.length > 0 || !dt.loading.value" v-model="selected"
       v-model:items-per-page="itemsPerPage" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value" item-value="id" show-select hover
-      @update:options="loadData" @click:row="(_, { item }) => router.push('/id/user/' + item.id)">
+      @update:options="loadData" @click:row="(_, { item }) => openEdit(item.id)">
       <template #item.mails="{ item }">
         {{ item.mails?.[0] || '' }}
       </template>
@@ -53,8 +53,8 @@
       <template #item.actions="{ item }">
         <!-- Single gear button opening a menu of row actions (Fabrice
              review, chantier I.1). @click.stop on the gear activator
-             keeps the click off the row, whose @click:row navigates to
-             the edit page. The menu items deliberately carry NO .stop:
+             keeps the click off the row, whose @click:row opens the edit
+             dialog. The menu items deliberately carry NO .stop:
              VMenu teleports its content outside the <tr>, so item clicks
              can never reach @click:row anyway — and a .stop there would
              swallow the bubbling click that VMenu's close-on-content-click
@@ -69,7 +69,7 @@
             </v-btn>
           </template>
           <v-list density="compact" min-width="220">
-            <v-list-item prepend-icon="mdi-pencil" :title="t('user.edit')" @click="router.push('/id/user/' + item.id)" />
+            <v-list-item prepend-icon="mdi-pencil" :title="t('user.edit')" @click="openEdit(item.id)" />
             <v-list-item prepend-icon="mdi-delete" base-color="error" :title="t('common.delete')" @click="startDelete(item)" />
             <v-divider class="my-1" />
             <v-list-item :prepend-icon="item.locked ? 'mdi-lock-open-variant' : 'mdi-lock'" :title="item.locked ? t('user.unlock') : t('user.lock')"
@@ -122,15 +122,17 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <!-- User create/edit popup (chantier I.2). userId null = create mode. -->
+    <UserEditDialog v-model="editDialog" :user-id="editUserId" @saved="onUserSaved" />
   </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
 import { useDataTable, useApi, useAppStore, useErrorStore, useI18nStore, ImportExportBar, LigojDataTableServer } from '@ligoj/host'
+import UserEditDialog from './UserEditDialog.vue'
 
-const router = useRouter()
 const appStore = useAppStore()
 const api = useApi()
 const errorStore = useErrorStore()
@@ -163,6 +165,10 @@ const actionType = ref('')
 const actionTarget = ref(null)
 const actionLoading = ref(false)
 
+// User create/edit dialog state. editUserId null = create mode.
+const editDialog = ref(false)
+const editUserId = ref(null)
+
 const headers = computed(() => [
   { title: t('user.login'), key: 'id', sortable: true },
   { title: t('user.firstName'), key: 'firstName', sortable: true },
@@ -253,6 +259,22 @@ async function confirmUserAction() {
   dt.load(lastOptions)
 }
 
+function openCreate() {
+  editUserId.value = null
+  editDialog.value = true
+}
+
+function openEdit(id) {
+  editUserId.value = id
+  editDialog.value = true
+}
+
+function onUserSaved() {
+  // Reload the current page after a create/edit/delete or an account
+  // action performed from the dialog.
+  dt.load(lastOptions)
+}
+
 onMounted(() => {
   appStore.setBreadcrumbs(
     [