[#FER-12] Ajouter un blocage des utilisateurs (!41)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #41
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

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

@@ -41,10 +41,24 @@
                 type="password"
                 :disabled="!auth.isAdmin"
                 wrapper-class="w-[280px]"
-                required
+                :required="!userId"
             />
         </div>
 
+        <div class="flex items-center mb-11">
+            <label class="flex items-center gap-2 cursor-pointer">
+                <input
+                    id="user-locked"
+                    v-model="form.isLocked"
+                    type="checkbox"
+                    :disabled="!auth.isAdmin"
+                    class="w-5 h-5 accent-primary-500"
+                />
+                <span class="text-sm text-primary-700">Verrouiller le compte</span>
+            </label>
+            <p class="ml-4 text-xs text-slate-400">Un compte verrouillé ne peut plus se connecter.</p>
+        </div>
+
         <div class="flex items-center justify-center">
             <UiButton
                 class="inline-flex mb-28 items-center justify-center text-xl min-w-[194px] text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80 justify-self-end"
@@ -86,7 +100,8 @@ const resolveUserId = (param: unknown) => {
 const form = reactive<UserFormData>({
     username: '',
     password: '',
-    role: ''
+    role: '',
+    isLocked: false
 })
 
 const hydrateFromUser = (user: UserData | null) => {
@@ -99,6 +114,7 @@ const hydrateFromUser = (user: UserData | null) => {
     const hasAdmin = roles.includes('ROLE_ADMIN')
     form.role = hasAdmin ? 'ROLE_ADMIN' : 'ROLE_USER'
     form.password = ''
+    form.isLocked = user.isLocked ?? false
     isHydrating.value = false
 }
 
@@ -129,6 +145,7 @@ async function validate() {
     const basePayload: UserPayload = {
         username: normalizedUsername,
         roles: normalizedRole ? [normalizedRole] : undefined,
+        isLocked: form.isLocked,
     }
     if (normalizedPassword) {
         basePayload.password = normalizedPassword

frontend/pages/admin/user/list.vue

@@ -4,9 +4,10 @@
     </div>
 
     <div v-if="auth.isAdmin" class="mt-7 border border-slate-200 mb-11">
-        <div class="grid grid-cols-2 text-primary-700 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+        <div class="grid grid-cols-3 text-primary-700 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
             <div>Utilisateur</div>
             <div>Role</div>
+            <div>Statut</div>
         </div>
         <div v-if="userList.length === 0" class="px-4 py-6 text-slate-400">
             Aucun utilisateur.
@@ -15,7 +16,7 @@
             <div
                 v-for="user in userList"
                 :key="user.id"
-                class="grid grid-cols-2 text-primary-700 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200 items-center"
+                class="grid grid-cols-3 text-primary-700 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200 items-center"
                 role="button"
                 tabindex="0"
                 @click="goToUser(user.id)"
@@ -23,6 +24,16 @@
             >
                 <div>{{ user.username }}</div>
                 <div>{{ getRoleLabels(user.roles) }}</div>
+                <div>
+                    <span
+                        v-if="user.isLocked"
+                        class="inline-block px-2 py-0.5 text-xs font-semibold rounded bg-red-100 text-red-700"
+                    >Verrouillé</span>
+                    <span
+                        v-else
+                        class="inline-block px-2 py-0.5 text-xs font-semibold rounded bg-green-100 text-green-700"
+                    >Actif</span>
+                </div>
             </div>
         </template>
     </div>

frontend/services/dto/user-data.ts

@@ -2,16 +2,19 @@ export interface UserData {
   id: number
   username: string
   roles: string[]
+  isLocked: boolean
 }
 
 export type UserPayload = {
   username?: string
   password?: string
   roles?: string[]
+  isLocked?: boolean
 }
 
 export type UserFormData = {
     username: string
     password: string
     role: string
+    isLocked: boolean
 }

frontend/stores/auth.ts

@@ -1,6 +1,6 @@
 import {defineStore} from 'pinia'
 import type {UserData} from '~/services/dto/user-data'
-import {getCurrentUser, createUser, login, logout} from '~/services/auth'
+import {getCurrentUser, createUser, updateUser, login, logout} from '~/services/auth'
 import type {UserPayload} from "~/services/dto/user-data";
 import {ROLE} from '~/utils/constants'
 
@@ -58,7 +58,7 @@ export const useAuthStore = defineStore('auth', {
         },
         async updateUser(id: number, payload: UserPayload) {
             this.isLoading = true
-            const result = await createUser(payload).finally(() => {
+            const result = await updateUser(id, payload).finally(() => {
                 this.isLoading = false
             })
             return result