feat(permissions) : add role-based UI guards and readonly mode for viewers

- Add usePermissions composable (isAdmin, canEdit, canView)
- Password-protected profile login with modal on profiles page
- Disable all form fields for ROLE_VIEWER across edit/create pages
- Show navigation buttons (Modifier/Consulter) for all roles, hide delete for viewers
- Add readonly prop to ModelTypeForm for category pages
- Disable modal fields (sites, constructeurs) for viewers
- Guard /admin routes in middleware

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/pages/profiles/index.vue

@@ -1,55 +1,74 @@
 <template>
   <main class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
-    <div class="w-full max-w-2xl">
+    <div class="w-full max-w-md">
       <div class="card bg-base-100 shadow-2xl">
         <div class="card-body">
-          <h1 class="text-2xl font-bold mb-2">
-            Choisir un profil
+          <h1 class="text-2xl font-bold mb-6 text-center">
+            Connexion
           </h1>
-          <p class="text-sm text-base-content/70 mb-6">
-            Sélectionnez votre profil pour accéder à l'application. La création et la gestion se font via le menu utilisateur.
-          </p>
 
-          <section class="space-y-4">
-            <header class="flex items-center justify-between">
-              <h2 class="font-semibold">
-                Profils disponibles
-              </h2>
-              <button
-                type="button"
-                class="btn btn-ghost btn-xs"
-                :disabled="loadingProfiles"
-                @click="refreshProfiles"
-              >
-                <span v-if="loadingProfiles" class="loading loading-spinner loading-xs" />
-                <span v-else>Rafraîchir</span>
-              </button>
-            </header>
+          <div v-if="loadingProfiles" class="flex justify-center py-8">
+            <span class="loading loading-spinner loading-lg" />
+          </div>
 
-            <div v-if="profiles.length" class="space-y-2 max-h-64 overflow-y-auto">
-              <button
-                v-for="profile in profiles"
-                :key="profile.id"
-                type="button"
-                class="btn btn-outline btn-sm w-full justify-between"
-                @click="selectProfile(profile.id)"
+          <form v-else @submit.prevent="handleLogin">
+            <div class="form-control mb-4">
+              <label class="label">
+                <span class="label-text">Profil</span>
+              </label>
+              <select
+                v-model="selectedProfileId"
+                class="select select-bordered w-full"
+                required
               >
-                <span>{{ profile.firstName }} {{ profile.lastName }}</span>
-                <IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
-              </button>
+                <option value="" disabled>
+                  Choisir un profil...
+                </option>
+                <option
+                  v-for="profile in profiles"
+                  :key="profile.id"
+                  :value="profile.id"
+                >
+                  {{ profile.firstName }} {{ profile.lastName }}
+                </option>
+              </select>
             </div>
-            <p v-else class="text-sm text-base-content/60">
-              Aucun profil enregistré.
-            </p>
-          </section>
 
-          <footer v-if="activeProfile" class="mt-6 flex justify-between items-center">
+            <div class="form-control mb-2">
+              <label class="label">
+                <span class="label-text">Mot de passe</span>
+              </label>
+              <input
+                ref="passwordInput"
+                v-model="password"
+                type="password"
+                placeholder="Mot de passe"
+                class="input input-bordered w-full"
+                :class="{ 'input-error': loginError }"
+              >
+            </div>
+
+            <p v-if="loginError" class="text-error text-sm mb-4">
+              {{ loginError }}
+            </p>
+
+            <button
+              type="submit"
+              class="btn btn-primary w-full mt-4"
+              :disabled="!selectedProfileId || submitting"
+            >
+              <span v-if="submitting" class="loading loading-spinner loading-xs" />
+              Se connecter
+            </button>
+          </form>
+
+          <footer v-if="activeProfile" class="mt-6 pt-4 border-t border-base-300 flex justify-between items-center">
             <div class="text-sm text-base-content/70">
-              Profil actuel :
+              Connecte :
               <span class="font-semibold">{{ activeProfile.firstName }} {{ activeProfile.lastName }}</span>
             </div>
             <button type="button" class="btn btn-outline btn-sm" @click="handleLogout">
-              Déconnexion
+              Deconnexion
             </button>
           </footer>
         </div>
@@ -59,32 +78,43 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useProfiles, useProfileSession } from '#imports'
-import IconLucideChevronRight from '~icons/lucide/chevron-right'
 
 const router = useRouter()
 const { profiles, loadingProfiles, fetchProfiles } = useProfiles()
 const { activeProfile, activateProfile, fetchCurrentProfile, logout } = useProfileSession()
 
-const refreshProfiles = async () => {
-  await fetchProfiles()
-}
+const selectedProfileId = ref('')
+const password = ref('')
+const loginError = ref('')
+const submitting = ref(false)
+const passwordInput = ref(null)
 
-const selectProfile = async (profileId) => {
+const handleLogin = async () => {
+  if (!selectedProfileId.value) { return }
+  submitting.value = true
+  loginError.value = ''
   try {
-    await activateProfile(profileId)
-    await fetchProfiles()
+    await activateProfile(selectedProfileId.value, password.value || undefined)
     await router.push('/')
   } catch (error) {
-    console.error('Erreur lors de la sélection du profil', error)
+    const err = error
+    if (err?.status === 401 || err?.statusCode === 401) {
+      loginError.value = 'Mot de passe incorrect.'
+    } else {
+      loginError.value = 'Erreur lors de la connexion.'
+    }
+  } finally {
+    submitting.value = false
   }
 }
 
 const handleLogout = async () => {
   await logout()
-  await router.push('/profiles')
+  selectedProfileId.value = ''
+  password.value = ''
 }
 
 onMounted(async () => {

app/pages/profiles/manage.vue

@@ -1,196 +0,0 @@
-<template>
-  <main class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
-    <div class="max-w-4xl mx-auto">
-      <div class="flex items-center justify-between mb-6">
-        <div>
-          <h1 class="text-2xl font-bold">
-            Gestion des profils
-          </h1>
-          <p class="text-sm text-base-content/70">
-            Sélectionnez, créez ou supprimez des profils.
-          </p>
-        </div>
-        <NuxtLink to="/" class="btn btn-ghost btn-sm">
-          Retour
-        </NuxtLink>
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <section class="card bg-base-100 shadow-lg">
-          <div class="card-body space-y-4">
-            <header class="flex items-center justify-between">
-              <h2 class="card-title text-lg">
-                Profils existants
-              </h2>
-              <button type="button" class="btn btn-ghost btn-xs" :disabled="loadingProfiles" @click="refresh">
-                <span v-if="loadingProfiles" class="loading loading-spinner loading-xs" />
-                <span v-else>Rafraîchir</span>
-              </button>
-            </header>
-
-            <div v-if="profiles.length" class="space-y-2 max-h-80 overflow-y-auto">
-              <div
-                v-for="profile in profiles"
-                :key="profile.id"
-                class="flex items-center justify-between rounded-lg border border-base-200 bg-base-100 px-3 py-2"
-              >
-                <div>
-                  <p class="font-medium">
-                    {{ profile.firstName }} {{ profile.lastName }}
-                  </p>
-                  <p class="text-xs text-base-content/60">
-                    ID : {{ profile.id }}
-                  </p>
-                </div>
-                <div class="flex items-center gap-2">
-                  <button
-                    type="button"
-                    class="btn btn-sm"
-                    :class="profile.id === activeProfile?.id ? 'btn-primary' : 'btn-outline'"
-                    @click="select(profile.id)"
-                  >
-                    {{ profile.id === activeProfile?.id ? 'Actif' : 'Activer' }}
-                  </button>
-                  <button
-                    type="button"
-                    class="btn btn-error btn-sm"
-                    @click="remove(profile.id)"
-                  >
-                    <span v-if="deleting === profile.id" class="loading loading-spinner loading-xs" />
-                    <span v-else>Supprimer</span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <p v-else class="text-sm text-base-content/60">
-              Aucun profil enregistré.
-            </p>
-          </div>
-        </section>
-
-        <section class="card bg-base-100 shadow-lg">
-          <div class="card-body space-y-4">
-            <h2 class="card-title text-lg">
-              Créer un profil
-            </h2>
-            <form class="space-y-3" @submit.prevent="create">
-              <div class="form-control">
-                <label class="label"><span class="label-text">Prénom</span></label>
-                <input
-                  v-model="createForm.firstName"
-                  type="text"
-                  class="input input-bordered"
-                  placeholder="Prénom"
-                  required
-                >
-              </div>
-              <div class="form-control">
-                <label class="label"><span class="label-text">Nom</span></label>
-                <input
-                  v-model="createForm.lastName"
-                  type="text"
-                  class="input input-bordered"
-                  placeholder="Nom"
-                  required
-                >
-              </div>
-              <button type="submit" class="btn btn-primary w-full" :disabled="creating">
-                <span v-if="creating" class="loading loading-spinner loading-sm" />
-                <span v-else>Créer et activer</span>
-              </button>
-            </form>
-          </div>
-        </section>
-      </div>
-
-      <div v-if="activeProfile" class="mt-8 flex items-center justify-between bg-base-100 shadow-lg rounded-lg p-4">
-        <div>
-          <p class="text-sm text-base-content/70">
-            Profil actif :
-          </p>
-          <p class="font-semibold text-base-content">
-            {{ activeProfile.firstName }} {{ activeProfile.lastName }}
-          </p>
-        </div>
-        <button type="button" class="btn btn-outline" @click="handleLogout">
-          Déconnexion
-        </button>
-      </div>
-    </div>
-  </main>
-</template>
-
-<script setup>
-import { reactive, ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useProfiles, useProfileSession } from '#imports'
-
-const router = useRouter()
-const { profiles, loadingProfiles, fetchProfiles, createProfile, deleteProfile } = useProfiles()
-const { activeProfile, activateProfile, fetchCurrentProfile, logout } = useProfileSession()
-
-const createForm = reactive({
-  firstName: '',
-  lastName: ''
-})
-
-const creating = ref(false)
-const deleting = ref(null)
-
-const refresh = async () => {
-  await fetchProfiles()
-  await fetchCurrentProfile()
-}
-
-const select = async (profileId) => {
-  try {
-    await activateProfile(profileId)
-    await refresh()
-  } catch (error) {
-    console.error('Erreur lors de la sélection du profil', error)
-  }
-}
-
-const create = async () => {
-  creating.value = true
-  try {
-    const profile = await createProfile({
-      firstName: createForm.firstName,
-      lastName: createForm.lastName
-    })
-    createForm.firstName = ''
-    createForm.lastName = ''
-    await activateProfile(profile.id)
-    await refresh()
-  } catch (error) {
-    console.error('Erreur lors de la création du profil', error)
-  } finally {
-    creating.value = false
-  }
-}
-
-const { confirm } = useConfirm()
-
-const remove = async (profileId) => {
-  if (!await confirm({ message: 'Supprimer ce profil ?' })) { return }
-  deleting.value = profileId
-  try {
-    await deleteProfile(profileId)
-    await refresh()
-  } catch (error) {
-    console.error('Erreur lors de la suppression du profil', error)
-  } finally {
-    deleting.value = null
-  }
-}
-
-const handleLogout = async () => {
-  await logout()
-  await refresh()
-  await router.push('/profiles')
-}
-
-onMounted(async () => {
-  await refresh()
-})
-</script>