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
 }

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>

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>

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()

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
+}

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() {

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'
 }