.idea/data_source_mapping.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DataSourcePerFileMappings">
+    <file url="file://$APPLICATION_CONFIG_DIR$/consoles/db/f407a514-c6b4-4b26-9555-445a85892502/console.sql" value="f407a514-c6b4-4b26-9555-445a85892502" />
+    <file url="file://$APPLICATION_CONFIG_DIR$/consoles/db/f407a514-c6b4-4b26-9555-445a85892502/console_1.sql" value="f407a514-c6b4-4b26-9555-445a85892502" />
+    <file url="file://$APPLICATION_CONFIG_DIR$/consoles/db/f407a514-c6b4-4b26-9555-445a85892502/console_2.sql" value="f407a514-c6b4-4b26-9555-445a85892502" />
+    <file url="file://$APPLICATION_CONFIG_DIR$/consoles/db/f407a514-c6b4-4b26-9555-445a85892502/console_3.sql" value="f407a514-c6b4-4b26-9555-445a85892502" />
+    <file url="file://$APPLICATION_CONFIG_DIR$/consoles/db/f407a514-c6b4-4b26-9555-445a85892502/console_4.sql" value="f407a514-c6b4-4b26-9555-445a85892502" />
+  </component>
+</project>

CHANGELOG.md

@@ -31,6 +31,7 @@ Ajouter dans le fichier .env du frontend
 * [#268] Lister les réceptions terminées
 * [#316] Admin liste des transporteurs
 * [#312] Creation administration listing fournisseurs
+* [#315] Creation page admin utilisateur
 
 ### Changed
 

frontend/components/user/user-form.vue

@@ -0,0 +1,123 @@
+<template>
+    <form @submit.prevent="validate">
+        <div
+            class="flex items-center justify-between gap-10">
+            <h1 class="text-3xl font-bold uppercase">
+                {{ userId ? "Modifications de l'utilisateur" : "Ajout d'un utilisateur" }}
+            </h1>
+            <button
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+                type="submit"
+            >
+                {{ userId ? 'Sauvegarder' : 'Ajouter' }}
+            </button>
+        </div>
+
+        <div class="grid gap-y-16 gap-x-40 mb-16">
+            <UiTextInput
+                id="user-name"
+                v-model="form.username"
+                label="Nom de l'utilisateur"
+            />
+
+            <UiSelect
+                id="user-role"
+                v-model="form.role"
+                label="Rôle de l'utilisateur"
+                :options="ROLE"
+            />
+            <UiTextInput
+                id="user-password"
+                v-model="form.password"
+                label="Mot de passe"
+                type="password"
+
+            />
+
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+
+import {computed, reactive, ref, watch} from 'vue'
+import {ROLE} from '~/utils/constants'
+import {createUser, updateUser, getUser} from '~/services/auth'
+import type {UserData, UserFormData} from '~/services/dto/user-data'
+
+const route = useRoute()
+const router = useRouter()
+const userId = computed(() => resolveUserId(route.params.id))
+const isLoading = ref(false)
+const isHydrating = ref(false)
+
+const resolveUserId = (param: unknown) => {
+    const idStr = Array.isArray(param) ? param[0] : param
+    if (!idStr) {
+        return null
+    }
+    const id = Number(idStr)
+    return Number.isFinite(id) ? id : null
+}
+
+
+const form = reactive<UserFormData>({
+    username: '',
+    password: '',
+    role: ''
+})
+
+const hydrateFromUser = (user: UserData | null) => {
+    if (!user) {
+        return
+    }
+    isHydrating.value = true
+    form.username = user.username ?? ''
+    const roles = user.roles ?? []
+    const hasAdmin = roles.includes("ROLE_ADMIN")
+    form.role = hasAdmin ? "ROLE_ADMIN" : "ROLE_USER"
+    form.password = ''
+    isHydrating.value = false
+}
+
+watch(
+    () => userId.value,
+    async (id) => {
+        if (id === null) {
+            return
+        }
+        isLoading.value = true
+        try {
+            const user = await getUser(id)
+            hydrateFromUser(user)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+
+async function validate() {
+
+    const normalizedUsername = form.username.trim()
+    const normalizedRole = form.role.trim()
+    const normalizedPassword = form.password.trim()
+
+    const basePayload = {
+        username: normalizedUsername,
+        roles: normalizedRole ? [normalizedRole] : undefined,
+        password: normalizedPassword || undefined
+    }
+
+    if (userId.value) {
+        await updateUser(userId.value, basePayload)
+        await router.push(`/admin/user/list/`)
+        return
+    }
+
+    const created = await createUser(basePayload)
+    if (created) {
+        await router.push(`/admin/user/list/`)
+    }
+}
+</script>

frontend/i18n/locales/fr.json

@@ -57,7 +57,9 @@
         "auth": {
             "login": "Identifiants invalides.",
             "users": "Impossible de récupérer les utilisateurs.",
-            "logout": "Impossible de se déconnecter."
+            "logout": "Impossible de se déconnecter.",
+            "update": "Impossible de mettre à jour l'utilisateur.",
+            "create": "Impossible de créer l'utilisateur."
         }
     },
     "success": {
@@ -65,6 +67,8 @@
             "update": "Réception mise à jour avec succès."
         },
         "auth": {
+            "update": "Utilisateur mis à jour avec succès.",
+            "create": "Utilisateur créé avec succès.",
             "login": "Connexion réussie.",
             "logout": "Déconnexion réussie."
         }

frontend/layouts/admin.vue

@@ -33,9 +33,13 @@
                     <NuxtLink to="/admin/carrier/carrier-list">
                         Transporteur
                     </NuxtLink>
+                    <NuxtLink to="/admin/user/list">
+                        Utilisateurs
+                    </NuxtLink>
                 </div>
 
                 <div class="p-4">
+                        <p class="font-bold text-white text-left">v{{ version }}</p>
                     <button
                         @click="handleLogout"
                         class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-bold"
@@ -56,7 +60,10 @@
 
 
 <script setup lang="ts">
+import {useAuthStore} from '~/stores/auth'
 
+const auth = useAuthStore()
+const { version } = useAppVersion()
 const handleLogout = async () => {
     try {
         await auth.logout()

frontend/layouts/default.vue

@@ -20,7 +20,10 @@
                             Accueil
                         </a>
                     </NuxtLink>
-                    <NuxtLink to="/admin/dashboard" custom v-slot="{ href, navigate, isActive }">
+                    <NuxtLink
+                        to="/admin/dashboard" custom v-slot="{ href, navigate, isActive }"
+                        v-if="auth.isAdmin"
+                    >
                         <a
                             :href="href"
                             @click="navigate"

frontend/pages/admin/dashboard.vue

@@ -1,13 +1,9 @@
+<template>
+    <AdminUserForm/>
+</template>
+
 <script setup lang="ts">
 definePageMeta({
     layout: 'admin'
 })
 </script>
-
-<template>
-<h1>test</h1>
-</template>
-
-<style scoped>
-
-</style>

frontend/pages/admin/user/[[id]].vue

@@ -0,0 +1,8 @@
+<template>
+    <UserForm/>
+</template>
+<script setup lang="ts">
+definePageMeta({
+    layout: 'admin'
+})
+</script>

frontend/pages/admin/user/list.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="flex items-center justify-between">
+        <h1 class="text-3xl font-bold uppercase">Liste des utilisateurs</h1>
+        <NuxtLink
+            class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            @click="router.push('/admin/user/')"
+        >
+            Ajouter
+        </NuxtLink>
+
+    </div>
+
+    <div>
+        <div class="mt-6 border border-slate-200 mb-16 ">
+            <div class="grid grid-cols-3 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Username</div>
+                <div>Role</div>
+            </div>
+            <div
+                v-for="user in userList"
+                :key="user.id"
+                class="grid grid-cols-3 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t items-center"
+                role="button"
+                tabindex="0"
+                @click="goToUser(user.id)"
+            >
+                <div>
+                    {{ user.username }}
+                </div>
+                <div>
+                    {{ user.roles?.join(', ') || ' ---' }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+definePageMeta({
+    layout: 'admin'
+})
+
+import type {UserData} from "~/services/dto/user-data";
+import {getAdminUsers, getUsers} from "~/services/auth";
+
+const userList = ref<UserData[]>([])
+const router = useRouter()
+
+const goToUser = (id: number) => {
+    router.push(`/admin/user/${id}`)
+}
+
+onMounted(async () => {
+    userList.value = await getAdminUsers()
+})
+</script>

frontend/services/auth.ts

@@ -1,5 +1,6 @@
 import { useApi } from '~/composables/useApi'
 import type { UserData } from '~/services/dto/user-data'
+import type {UserPayload} from "~/services/dto/user-data";
 
 export async function getUsers() {
   const api = useApi()
@@ -12,7 +13,40 @@ 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()
+  return api.get<UserData>(`users/${id}`, {}, {
+    toastErrorKey: 'errors.auth.user'
+  })
+}
+
+export async function createUser(payload: UserPayload = {}) {
+    const api = useApi()
+    return api.post<UserData>('users', payload, {
+        toastErrorKey: 'errors.auth.create',
+        toastSuccessKey : 'success.auth.create'
+    })
+}
+
+export async function updateUser(id : number, playload: UserPayload = {}){
+    const api = useApi()
+    return api.patch<UserData>(`users/${id}`, playload, {
+        toastErrorKey: 'errors.auth.update',
+        toastSuccessKey: 'success.auth.update'
+    })
+}
 export async function getCurrentUser() {
   const api = useApi()
   return api.get<UserData>('me', {}, {

frontend/services/dto/user-data.ts

@@ -1,4 +1,17 @@
 export interface UserData {
   id: number
   username: string
+  roles: string[]
+}
+
+export type UserPayload = {
+  username?: string
+  password?: string
+  roles?: string[]
+}
+
+export type UserFormData = {
+    username: string
+    password: string
+    role: string
 }

frontend/stores/auth.ts

@@ -1,6 +1,8 @@
 import {defineStore} from 'pinia'
 import type {UserData} from '~/services/dto/user-data'
-import { getCurrentUser, login, logout } from '~/services/auth'
+import {getCurrentUser, createUser, login, logout} from '~/services/auth'
+import type {UserPayload} from "~/services/dto/user-data";
+import {ROLE} from '~/utils/constants'
 
 export const useAuthStore = defineStore('auth', {
     state: () => ({
@@ -9,7 +11,8 @@ export const useAuthStore = defineStore('auth', {
         checked: false
     }),
     getters: {
-    isAuthenticated: (state) => Boolean(state.user)
+        isAuthenticated: (state) => Boolean(state.user),
+        isAdmin: (state) => Boolean(state.user?.roles?.includes(ROLE[0].value))
     },
     actions: {
         clearSession() {
@@ -46,6 +49,20 @@ export const useAuthStore = defineStore('auth', {
                 this.isLoading = false
             }
         },
+        async createUser(payload: UserPayload = {}) {
+            this.isLoading = true
+            const result = await createUser(payload).finally(() => {
+                this.isLoading = false
+            })
+            return result
+        },
+        async updateUser(id: number, payload: UserPayload) {
+            this.isLoading = true
+            const result = await createUser(payload).finally(() => {
+                this.isLoading = false
+            })
+            return result
+        },
         async logout() {
             this.isLoading = true
 
@@ -58,6 +75,6 @@ export const useAuthStore = defineStore('auth', {
                 this.checked = true
                 this.isLoading = false
             }
-    }
+        },
     }
 })

frontend/utils/constants.ts

@@ -8,6 +8,10 @@ export const MERCHANDISE_TYPE_CODES = {
     AUTRES: 'AUTRES'
 } as const
 
+export const ROLE = [
+    { label: 'Administrateur', value: 'ROLE_ADMIN' },
+    { label: 'Utilisateur', value: 'ROLE_USER' }
+]
 export const SUPLLIER_CODE = {
     LIOT: 'LIOT'
 }

src/Entity/User.php

@@ -7,7 +7,10 @@ namespace App\Entity;
 use ApiPlatform\Metadata\ApiResource;
 use ApiPlatform\Metadata\Get;
 use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
+use ApiPlatform\Metadata\Post;
 use App\State\MeProvider;
+use App\State\UserPasswordProcessor;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface;
 use Symfony\Component\Security\Core\User\UserInterface;
@@ -28,10 +31,27 @@ use Symfony\Component\Serializer\Attribute\Groups;
             normalizationContext: ['groups' => ['user:read']],
             security: "is_granted('ROLE_USER')"
         ),
-        new GetCollection(
+        new Post(
             normalizationContext: ['groups' => ['user:read']],
+            denormalizationContext: ['groups' => ['user:write']],
+            security: "is_granted('ROLE_ADMIN')",
+            processor: UserPasswordProcessor::class
+        ),
+        new Patch(
+            normalizationContext: ['groups' => ['user:read']],
+            denormalizationContext: ['groups' => ['user:write']],
+            security: "is_granted('ROLE_ADMIN')",
+            processor: UserPasswordProcessor::class
+        ),
+        new GetCollection(
+            normalizationContext: ['groups' => ['user-login:read']],
             security: "is_granted('PUBLIC_ACCESS')"
         ),
+        new GetCollection(
+            uriTemplate: '/admin/users',
+            normalizationContext: ['groups' => ['user:read']],
+            security: "is_granted('ROLE_ADMIN')"
+        ),
     ],
     normalizationContext: ['groups' => ['user:read']],
     paginationEnabled: false
@@ -41,17 +61,19 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
     #[ORM\Id]
     #[ORM\GeneratedValue]
     #[ORM\Column(type: 'integer')]
-    #[Groups(['user:read', 'reception:read'])]
+    #[Groups(['user:read', 'user-login:read', 'reception:read'])]
     private ?int $id = null;
 
     #[ORM\Column(length: 180, unique: true)]
-    #[Groups(['user:read', 'reception:read'])]
+    #[Groups(['user:read', 'user:write', 'user-login:read', 'reception:read'])]
     private string $username = '';
 
     #[ORM\Column(type: 'json')]
+    #[Groups(['user:write', 'user:read'])]
     private array $roles = [];
 
     #[ORM\Column]
+    #[Groups(['user:write'])]
     private string $password = '';
 
     public function getId(): ?int

src/State/UserPasswordProcessor.php

@@ -0,0 +1,40 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\State;
+
+use ApiPlatform\Metadata\Operation;
+use ApiPlatform\State\ProcessorInterface;
+use App\Entity\User;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\PasswordHasher\Hasher\UserPasswordHasherInterface;
+
+final class UserPasswordProcessor implements ProcessorInterface
+{
+    public function __construct(
+        private readonly UserPasswordHasherInterface $hasher,
+        #[Autowire(service: 'api_platform.doctrine.orm.state.persist_processor')]
+        private readonly ProcessorInterface $persistProcessor
+    ) {}
+
+    public function process(mixed $data, Operation $operation, array $uriVariables = [], array $context = []): mixed
+    {
+        if ($data instanceof User) {
+            $plain = $data->getPassword();
+            if ('' !== $plain) {
+                $data->setPassword($this->hasher->hashPassword(
+                    $data,
+                    $plain
+                ));
+            }
+        }
+
+        return $this->persistProcessor->process(
+            $data,
+            $operation,
+            $uriVariables,
+            $context
+        );
+    }
+}