From 8d2491ad9ed494c71dbab1c974818f8ae1191c59 Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Mon, 9 Feb 2026 15:11:15 +0100
Subject: [PATCH] feat : creation d'une page d'aministration pour la ajout /
 modification d'utlisateur

---
 frontend/components/user/user-form.vue | 18 ++++++++----------
 frontend/layouts/admin.vue             |  5 +----
 frontend/pages/admin/user/list.vue     |  4 ++--
 frontend/services/auth.ts              | 11 +++++++++++
 frontend/services/dto/user-data.ts     |  6 ++++++
 frontend/stores/auth.ts                |  2 +-
 frontend/utils/constants.ts            |  8 ++++----
 7 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/frontend/components/user/user-form.vue b/frontend/components/user/user-form.vue
index 3e9fac6..137d299 100644
--- a/frontend/components/user/user-form.vue
+++ b/frontend/components/user/user-form.vue
@@ -24,10 +24,7 @@
                 id="user-role"
                 v-model="form.role"
                 label="Rôle de l'utilisateur"
-                :options="[
-                    { value: ROLE.ROLE_USER, label: 'User' },
-                    { value: ROLE.ROLE_ADMIN, label: 'Admin' },
-                ]"
+                :options="ROLE"
             />
             <UiTextInput
                 id="user-password"
@@ -46,7 +43,7 @@
 import {computed, reactive, ref, watch} from 'vue'
 import {ROLE} from '~/utils/constants'
 import {createUser, updateUser, getUser} from '~/services/auth'
-import type {UserData} from '~/services/dto/user-data'
+import type {UserData, UserFormData} from '~/services/dto/user-data'
 
 const route = useRoute()
 const router = useRouter()
@@ -63,10 +60,11 @@ const resolveUserId = (param: unknown) => {
     return Number.isFinite(id) ? id : null
 }
 
-const form = reactive({
+
+const form = reactive<UserFormData>({
     username: '',
-    role: '',
-    password: ''
+    password: '',
+    role: ''
 })
 
 const hydrateFromUser = (user: UserData | null) => {
@@ -76,8 +74,8 @@ const hydrateFromUser = (user: UserData | null) => {
     isHydrating.value = true
     form.username = user.username ?? ''
     const roles = user.roles ?? []
-    const hasAdmin = roles.includes(ROLE.ROLE_ADMIN)
-    form.role = hasAdmin ? ROLE.ROLE_ADMIN : ROLE.ROLE_USER
+    const hasAdmin = roles.includes("ROLE_ADMIN")
+    form.role = hasAdmin ? "ROLE_ADMIN" : "ROLE_USER"
     form.password = ''
     isHydrating.value = false
 }
diff --git a/frontend/layouts/admin.vue b/frontend/layouts/admin.vue
index 9b0e146..b534cf4 100644
--- a/frontend/layouts/admin.vue
+++ b/frontend/layouts/admin.vue
@@ -33,10 +33,7 @@
                     <NuxtLink to="/admin/carrier/carrier-list">
                         Transporteur
                     </NuxtLink>
-                    <NuxtLink
-                        to="/admin/user/list"
-                        class="block px-4 py-2 rounded hover:bg-primary-600 transition"
-                    >
+                    <NuxtLink to="/admin/user/list">
                         Utilisateurs
                     </NuxtLink>
                 </div>
diff --git a/frontend/pages/admin/user/list.vue b/frontend/pages/admin/user/list.vue
index 0222982..691c5e0 100644
--- a/frontend/pages/admin/user/list.vue
+++ b/frontend/pages/admin/user/list.vue
@@ -42,7 +42,7 @@ definePageMeta({
 })
 
 import type {UserData} from "~/services/dto/user-data";
-import {getUsers} from "~/services/auth";
+import {getAdminUsers, getUsers} from "~/services/auth";
 
 const userList = ref<UserData[]>([])
 const router = useRouter()
@@ -52,6 +52,6 @@ const goToUser = (id: number) => {
 }
 
 onMounted(async () => {
-    userList.value = await getUsers()
+    userList.value = await getAdminUsers()
 })
 </script>
diff --git a/frontend/services/auth.ts b/frontend/services/auth.ts
index 7703ac4..d244d50 100644
--- a/frontend/services/auth.ts
+++ b/frontend/services/auth.ts
@@ -13,6 +13,17 @@ export async function getUsers() {
 
   return data['hydra:member'] ?? []
 }
+export async function getAdminUsers() {
+  const api = useApi()
+  const data = await api.get<UserData[] | { 'hydra:member': UserData[] }>('admin/users', {}, {
+    toastErrorKey: 'errors.auth.users'
+  })
+  if (Array.isArray(data)) {
+    return data
+  }
+
+  return data['hydra:member'] ?? []
+}
 
 export async function getUser(id: number) {
   const api = useApi()
diff --git a/frontend/services/dto/user-data.ts b/frontend/services/dto/user-data.ts
index ae62f22..3fb9206 100644
--- a/frontend/services/dto/user-data.ts
+++ b/frontend/services/dto/user-data.ts
@@ -9,3 +9,9 @@ export type UserPayload = {
   password?: string
   roles?: string[]
 }
+
+export type UserFormData = {
+    username: string
+    password: string
+    role: string
+}
diff --git a/frontend/stores/auth.ts b/frontend/stores/auth.ts
index d5d9f00..4bd5e33 100644
--- a/frontend/stores/auth.ts
+++ b/frontend/stores/auth.ts
@@ -12,7 +12,7 @@ export const useAuthStore = defineStore('auth', {
     }),
     getters: {
         isAuthenticated: (state) => Boolean(state.user),
-        isAdmin: (state) => Boolean(state.user?.roles?.includes(ROLE.ROLE_ADMIN))
+        isAdmin: (state) => Boolean(state.user?.roles?.includes(ROLE[0].value))
     },
     actions: {
         clearSession() {
diff --git a/frontend/utils/constants.ts b/frontend/utils/constants.ts
index acfab4f..719b4f6 100644
--- a/frontend/utils/constants.ts
+++ b/frontend/utils/constants.ts
@@ -8,10 +8,10 @@ export const MERCHANDISE_TYPE_CODES = {
     AUTRES: 'AUTRES'
 } as const
 
-export const ROLE = {
-    ROLE_ADMIN : 'ROLE_ADMIN',
-    ROLE_USER : 'ROLE_USER'
-}
+export const ROLE = [
+    { label: 'Administrateur', value: 'ROLE_ADMIN' },
+    { label: 'Utilisateur', value: 'ROLE_USER' }
+]
 export const SUPLLIER_CODE = {
     LIOT: 'LIOT'
 }