feat(aep): carte AEP — push Gitea 2026-04-28

pages/contribuer.vue

@@ -0,0 +1,795 @@
+<template>
+  <div class="contribuer-page">
+    <div class="contribuer-inner">
+      <!-- Retour -->
+      <NuxtLink to="/" class="back-link">
+        ← Retour à la carte
+      </NuxtLink>
+
+      <!-- En-tête -->
+      <div class="contribuer-header">
+        <h1>Proposer une ressource</h1>
+        <p class="contribuer-subtitle">
+          Tu connais une organisation utile aux architectes qui n'est pas encore référencée ?
+          Soumets-la ici — une IA enrichira la fiche et on validera sous 7 jours.
+        </p>
+        <p class="contribuer-hint">
+          Si tu n'as pas le temps de tout remplir, laisse-nous juste le lien — on extraira les infos du site.
+          Mais une description de toi, c'est toujours plus vivant et plus précis.
+        </p>
+      </div>
+
+      <!-- Message succès -->
+      <div v-if="success" class="success-block" role="status" aria-live="polite">
+        <div class="success-icon">✓</div>
+        <h2>Merci !</h2>
+        <p>Ta fiche est en cours de traitement.</p>
+        <p class="success-detail">
+          Une IA va scraper le site et enrichir la description.
+          Jules (et bientôt une équipe de modération) valide sous 7 jours.
+        </p>
+        <button type="button" class="btn-secondary" @click="reset">
+          Proposer une autre fiche
+        </button>
+      </div>
+
+      <!-- Formulaire -->
+      <form v-else @submit.prevent="submit" class="contribuer-form" novalidate>
+
+        <!-- Nom -->
+        <div class="field-group" :class="{ 'field-error': errors.nom }">
+          <label for="nom">Nom de l'organisation <span class="required">*</span></label>
+          <input
+            id="nom"
+            v-model="form.nom"
+            type="text"
+            placeholder="Ex : UNSFA, Maison de l'Architecture..."
+            autocomplete="organization"
+            @blur="validateField('nom')"
+          />
+          <span v-if="errors.nom" class="error-msg" role="alert">{{ errors.nom }}</span>
+        </div>
+
+        <!-- URL -->
+        <div class="field-group" :class="{ 'field-error': errors.url }">
+          <label for="url">
+            Site web
+            <span class="label-hint">(optionnel — recommandé pour l'enrichissement IA)</span>
+          </label>
+          <input
+            id="url"
+            v-model="form.url"
+            type="url"
+            placeholder="https://..."
+            @blur="validateField('url')"
+          />
+          <span v-if="errors.url" class="error-msg" role="alert">{{ errors.url }}</span>
+        </div>
+
+        <!-- Description -->
+        <div class="field-group" :class="{ 'field-error': errors.description_user }">
+          <label for="description_user">
+            Description courte <span class="required">*</span>
+            <span class="label-hint">(50 à 500 caractères)</span>
+          </label>
+          <textarea
+            id="description_user"
+            v-model="form.description_user"
+            rows="4"
+            placeholder="Présente l'organisation en quelques mots : ses missions, son public, ce qu'elle apporte..."
+            @blur="validateField('description_user')"
+          />
+          <div class="field-meta">
+            <span v-if="errors.description_user" class="error-msg" role="alert">
+              {{ errors.description_user }}
+            </span>
+            <span v-else class="char-count" :class="{ 'char-warn': form.description_user.length > 450 }">
+              {{ form.description_user.length }}/500
+            </span>
+          </div>
+        </div>
+
+        <!-- Échelle -->
+        <div class="field-group" :class="{ 'field-error': errors.echelle }">
+          <fieldset>
+            <legend>
+              Échelle <span class="required">*</span>
+              <span class="label-hint">(une seule)</span>
+            </legend>
+            <div class="radio-group">
+              <label
+                v-for="opt in ECHELLES"
+                :key="opt"
+                class="radio-label"
+                :class="{ active: form.echelle === opt }"
+              >
+                <input
+                  type="radio"
+                  :value="opt"
+                  v-model="form.echelle"
+                  name="echelle"
+                  @change="validateField('echelle')"
+                />
+                {{ opt }}
+              </label>
+            </div>
+          </fieldset>
+          <span v-if="errors.echelle" class="error-msg" role="alert">{{ errors.echelle }}</span>
+        </div>
+
+        <!-- Fonctions -->
+        <div class="field-group" :class="{ 'field-error': errors.fonctions }">
+          <fieldset>
+            <legend>
+              Fonctions <span class="required">*</span>
+              <span class="label-hint">(1 à 5 — l'ordre de clic = priorité)</span>
+            </legend>
+            <div class="checkbox-grid">
+              <label
+                v-for="fn in FONCTIONS"
+                :key="fn"
+                class="checkbox-label"
+                :class="{
+                  active: form.fonctions.includes(fn),
+                  disabled: !form.fonctions.includes(fn) && form.fonctions.length >= 5,
+                }"
+              >
+                <input
+                  type="checkbox"
+                  :value="fn"
+                  :checked="form.fonctions.includes(fn)"
+                  :disabled="!form.fonctions.includes(fn) && form.fonctions.length >= 5"
+                  @change="toggleFonction(fn)"
+                />
+                <span class="fn-order" v-if="form.fonctions.includes(fn)">
+                  {{ form.fonctions.indexOf(fn) + 1 }}
+                </span>
+                {{ fn }}
+              </label>
+            </div>
+          </fieldset>
+          <span v-if="errors.fonctions" class="error-msg" role="alert">{{ errors.fonctions }}</span>
+        </div>
+
+        <!-- Territoire -->
+        <div class="field-group" :class="{ 'field-error': errors.territoire }">
+          <fieldset>
+            <legend>
+              Territoire <span class="required">*</span>
+            </legend>
+            <div class="radio-group">
+              <label
+                v-for="t in TERRITOIRES"
+                :key="t"
+                class="radio-label"
+                :class="{ active: form.territoire === t }"
+              >
+                <input
+                  type="radio"
+                  :value="t"
+                  v-model="form.territoire"
+                  name="territoire"
+                  @change="validateField('territoire')"
+                />
+                {{ t }}
+              </label>
+            </div>
+          </fieldset>
+          <span v-if="errors.territoire" class="error-msg" role="alert">{{ errors.territoire }}</span>
+        </div>
+
+        <!-- Ville -->
+        <div class="field-group" :class="{ 'field-error': errors.localisation_ville }">
+          <label for="localisation_ville">
+            Ville principale
+            <span class="label-hint">(optionnel — pour la géolocalisation sur la carte)</span>
+          </label>
+          <input
+            id="localisation_ville"
+            v-model="form.localisation_ville"
+            type="text"
+            placeholder="Ex : Paris, Lyon, Bordeaux..."
+          />
+          <span v-if="errors.localisation_ville" class="error-msg" role="alert">
+            {{ errors.localisation_ville }}
+          </span>
+        </div>
+
+        <!-- Email -->
+        <div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
+          <label for="submitted_by_email">
+            Ton email
+            <span class="label-hint">(optionnel — pour le suivi de modération)</span>
+          </label>
+          <input
+            id="submitted_by_email"
+            v-model="form.submitted_by_email"
+            type="email"
+            placeholder="ton@email.fr"
+            autocomplete="email"
+            @blur="validateField('submitted_by_email')"
+          />
+          <span v-if="errors.submitted_by_email" class="error-msg" role="alert">
+            {{ errors.submitted_by_email }}
+          </span>
+        </div>
+
+        <!-- Erreur globale -->
+        <div v-if="serverError" class="server-error" role="alert">
+          <strong>Erreur :</strong> {{ serverError }}
+        </div>
+
+        <!-- Actions -->
+        <div class="form-actions">
+          <NuxtLink to="/" class="btn-secondary">Annuler</NuxtLink>
+          <button
+            type="submit"
+            class="btn-primary"
+            :disabled="submitting"
+          >
+            {{ submitting ? 'Envoi en cours...' : 'Proposer la fiche →' }}
+          </button>
+        </div>
+
+        <p class="form-note">
+          Ta fiche sera examinée par l'équipe avant publication.
+        </p>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { z } from 'zod'
+
+// ── Constantes ────────────────────────────────────────────────────────────────
+
+const ECHELLES = ['National', 'Régional', 'Local'] as const
+const TERRITOIRES = ['Métropole', 'Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte'] as const
+const FONCTIONS = [
+  'Juridique', 'Technique', 'Économique', 'Administratif', 'Chantier',
+  'Comptabilité', 'Développement', 'Formation', 'Gestion d\'agence', 'Santé mentale',
+] as const
+
+// ── Schéma Zod (côté client — miroir du serveur) ──────────────────────────────
+
+const SubmitSchema = z.object({
+  nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
+  url: z.string().url('URL invalide (commencer par https://)').optional().or(z.literal('')),
+  description_user: z.string().min(50, 'Minimum 50 caractères').max(500, 'Maximum 500 caractères').trim(),
+  echelle: z.enum(ECHELLES, { errorMap: () => ({ message: 'Sélectionne une échelle' }) }),
+  fonctions: z.array(z.string()).min(1, 'Sélectionne au moins une fonction').max(5, 'Maximum 5 fonctions'),
+  territoire: z.enum(TERRITOIRES, { errorMap: () => ({ message: 'Sélectionne un territoire' }) }),
+  localisation_ville: z.string().max(100).optional(),
+  submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
+})
+
+// ── État du formulaire ────────────────────────────────────────────────────────
+
+const form = reactive({
+  nom: '',
+  url: '',
+  description_user: '',
+  echelle: '' as typeof ECHELLES[number] | '',
+  fonctions: [] as string[],
+  territoire: '' as typeof TERRITOIRES[number] | '',
+  localisation_ville: '',
+  submitted_by_email: '',
+})
+
+const errors = reactive<Record<string, string>>({})
+const submitting = ref(false)
+const success = ref(false)
+const serverError = ref('')
+const trackingUrl = ref<string | null>(null)
+
+// ── Validation champ par champ ────────────────────────────────────────────────
+
+function validateField(field: string) {
+  const partial = SubmitSchema.partial()
+  const result = partial.safeParse({ [field]: (form as any)[field] })
+  if (!result.success) {
+    const fieldErrors = result.error.flatten().fieldErrors
+    errors[field] = fieldErrors[field]?.[0] ?? ''
+  } else {
+    delete errors[field]
+  }
+}
+
+function validateAll(): boolean {
+  const result = SubmitSchema.safeParse(form)
+  if (!result.success) {
+    const flat = result.error.flatten().fieldErrors
+    Object.assign(errors, Object.fromEntries(
+      Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])
+    ))
+    return false
+  }
+  Object.keys(errors).forEach(k => delete errors[k])
+  return true
+}
+
+// ── Gestion fonctions (ordre de clic = priorité) ──────────────────────────────
+
+function toggleFonction(fn: string) {
+  const idx = form.fonctions.indexOf(fn)
+  if (idx >= 0) {
+    form.fonctions.splice(idx, 1)
+  } else if (form.fonctions.length < 5) {
+    form.fonctions.push(fn)
+  }
+  validateField('fonctions')
+}
+
+// ── Soumission ────────────────────────────────────────────────────────────────
+
+async function submit() {
+  serverError.value = ''
+
+  if (!validateAll()) {
+    // Scroll vers la première erreur
+    await nextTick()
+    const firstError = document.querySelector('.field-error')
+    firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    return
+  }
+
+  submitting.value = true
+
+  try {
+    const result: any = await $fetch('/api/submit', {
+      method: 'POST',
+      body: {
+        nom: form.nom,
+        url: form.url || undefined,
+        description_user: form.description_user,
+        echelle: form.echelle,
+        fonctions: form.fonctions,
+        territoire: form.territoire,
+        localisation_ville: form.localisation_ville || undefined,
+        submitted_by_email: form.submitted_by_email || undefined,
+      },
+    })
+
+    trackingUrl.value = result.trackingUrl ?? null
+    success.value = true
+  } catch (e: any) {
+    const status = e?.status ?? e?.statusCode
+    if (status === 429) {
+      serverError.value = 'Tu as déjà soumis 3 fiches aujourd\'hui. Réessaie demain.'
+    } else if (status === 422 && e?.data) {
+      // Erreurs Zod serveur → mapper sur le formulaire
+      const fieldErrors = e.data
+      Object.entries(fieldErrors).forEach(([k, v]) => {
+        errors[k] = Array.isArray(v) ? v[0] : String(v)
+      })
+      serverError.value = 'Certains champs sont invalides — vérifie les erreurs ci-dessus.'
+    } else {
+      serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+
+function reset() {
+  Object.assign(form, {
+    nom: '', url: '', description_user: '', echelle: '',
+    fonctions: [], territoire: '', localisation_ville: '', submitted_by_email: '',
+  })
+  Object.keys(errors).forEach(k => delete errors[k])
+  success.value = false
+  serverError.value = ''
+  trackingUrl.value = null
+}
+
+// ── Meta ──────────────────────────────────────────────────────────────────────
+
+useHead({ title: 'Proposer une ressource — AEP' })
+</script>
+
+<style scoped>
+/* ── Layout ─────────────────────────────────────────────────────────────────── */
+
+.contribuer-page {
+  min-height: 100vh;
+  background: var(--nav-bg);
+  padding: 1.5rem 1rem 4rem;
+}
+
+.contribuer-inner {
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+/* ── Retour ──────────────────────────────────────────────────────────────────── */
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--nav-primary-solid);
+  opacity: 0.7;
+  text-decoration: none;
+  margin-bottom: 1.5rem;
+  transition: opacity 0.15s;
+}
+
+.back-link:hover {
+  opacity: 1;
+}
+
+/* ── En-tête ─────────────────────────────────────────────────────────────────── */
+
+.contribuer-header {
+  margin-bottom: 2rem;
+}
+
+.contribuer-header h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--nav-text);
+  margin: 0 0 0.5rem;
+}
+
+.contribuer-subtitle {
+  font-size: 0.9rem;
+  color: var(--nav-text-muted);
+  line-height: 1.5;
+  margin: 0 0 0.5rem;
+}
+
+.contribuer-hint {
+  font-size: 0.82rem;
+  color: var(--nav-text-muted);
+  opacity: 0.75;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* ── Succès ──────────────────────────────────────────────────────────────────── */
+
+.success-block {
+  background: var(--nav-surface);
+  border: 1px solid rgba(26, 34, 56, 0.15);
+  border-radius: 12px;
+  padding: 2rem 1.5rem;
+  text-align: center;
+}
+
+.success-icon {
+  width: 48px;
+  height: 48px;
+  background: rgba(26, 34, 56, 0.1);
+  color: var(--nav-text);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 0 auto 1rem;
+}
+
+.success-block h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--nav-text);
+  margin: 0 0 0.5rem;
+}
+
+.success-block p {
+  font-size: 0.9rem;
+  color: var(--nav-text-muted);
+  margin: 0 0 0.5rem;
+  line-height: 1.5;
+}
+
+.success-detail {
+  font-size: 0.85rem !important;
+}
+
+.success-tracking {
+  font-size: 0.85rem !important;
+  margin-top: 1rem !important;
+}
+
+.tracking-link {
+  color: var(--nav-primary-solid);
+  font-size: 0.8rem;
+  word-break: break-all;
+}
+
+/* ── Formulaire ──────────────────────────────────────────────────────────────── */
+
+.contribuer-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+/* ── Champ générique ─────────────────────────────────────────────────────────── */
+
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.field-group label,
+.field-group legend {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--nav-text);
+  display: block;
+}
+
+.field-group fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.required {
+  color: #c0392b;
+}
+
+.label-hint {
+  font-weight: 400;
+  color: var(--nav-text-muted);
+  font-size: 0.8rem;
+  margin-left: 0.25rem;
+}
+
+.field-group input[type="text"],
+.field-group input[type="url"],
+.field-group input[type="email"],
+.field-group textarea {
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  border: 1px solid rgba(26, 34, 56, 0.2);
+  border-radius: 8px;
+  font-size: 0.9rem;
+  color: var(--nav-text);
+  background: var(--nav-surface);
+  font-family: inherit;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  box-sizing: border-box;
+}
+
+.field-group input:focus,
+.field-group textarea:focus {
+  outline: none;
+  border-color: var(--nav-primary-solid);
+  box-shadow: 0 0 0 2px rgba(245, 179, 66, 0.4);
+}
+
+.field-group textarea {
+  resize: vertical;
+  min-height: 100px;
+}
+
+/* Erreur champ */
+
+.field-error input,
+.field-error textarea {
+  border-color: #c0392b !important;
+}
+
+.error-msg {
+  font-size: 0.8rem;
+  color: #c0392b;
+}
+
+.field-meta {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.char-count {
+  font-size: 0.75rem;
+  color: var(--nav-text-muted);
+}
+
+.char-warn {
+  color: #e67e22;
+}
+
+/* ── Radio (Échelle + Territoire) ────────────────────────────────────────────── */
+
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.375rem;
+}
+
+.radio-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  border: 1px solid rgba(26, 34, 56, 0.2);
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--nav-text);
+  background: var(--nav-surface);
+  cursor: pointer;
+  transition: all 0.15s;
+  user-select: none;
+}
+
+.radio-label input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.radio-label:hover {
+  border-color: var(--nav-primary-solid);
+  background: var(--nav-bg-alt);
+}
+
+.radio-label.active {
+  background: var(--nav-primary);
+  border-color: transparent;
+  color: var(--nav-text-on-primary);
+}
+
+/* ── Checkboxes (Fonctions) ──────────────────────────────────────────────────── */
+
+.checkbox-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+  margin-top: 0.375rem;
+}
+
+@media (max-width: 400px) {
+  .checkbox-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  border: 1px solid rgba(26, 34, 56, 0.2);
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--nav-text);
+  background: var(--nav-surface);
+  cursor: pointer;
+  transition: all 0.15s;
+  user-select: none;
+  position: relative;
+}
+
+.checkbox-label input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.checkbox-label:hover:not(.disabled) {
+  border-color: var(--nav-primary-solid);
+  background: var(--nav-bg-alt);
+}
+
+.checkbox-label.active {
+  background: var(--nav-primary);
+  border-color: transparent;
+  color: var(--nav-text-on-primary);
+}
+
+.checkbox-label.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.fn-order {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  background: var(--nav-accent);
+  color: var(--nav-text);
+  border-radius: 50%;
+  font-size: 0.7rem;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+/* ── Erreur serveur ──────────────────────────────────────────────────────────── */
+
+.server-error {
+  padding: 0.875rem 1rem;
+  background: #fdf0ee;
+  border: 1px solid #e74c3c;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  color: #c0392b;
+}
+
+/* ── Actions ──────────────────────────────────────────────────────────────────── */
+
+.form-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+}
+
+.btn-primary {
+  padding: 0.75rem 1.5rem;
+  background: var(--nav-primary);
+  color: var(--nav-text-on-primary);
+  border: none;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.15s, opacity 0.15s;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: rgba(26, 34, 56, 0.75);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  padding: 0.75rem 1.25rem;
+  background: transparent;
+  color: var(--nav-text-muted);
+  border: 1px solid rgba(26, 34, 56, 0.2);
+  border-radius: 8px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  font-family: inherit;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.btn-secondary:hover {
+  border-color: var(--nav-primary-solid);
+  color: var(--nav-text);
+}
+
+.form-note {
+  font-size: 0.75rem;
+  color: var(--nav-text-muted);
+  text-align: center;
+  margin: 0;
+}
+
+/* ── Responsive ──────────────────────────────────────────────────────────────── */
+
+@media (max-width: 480px) {
+  .contribuer-page {
+    padding: 1rem 0.75rem 3rem;
+  }
+
+  .form-actions {
+    flex-direction: column-reverse;
+  }
+
+  .btn-primary,
+  .btn-secondary {
+    width: 100%;
+    justify-content: center;
+  }
+}
+</style>