nav-carte/components/FormLibre.vue

<template>
  <form @submit.prevent="submit" class="proposer-form proposer-form--libre" novalidate>
    <div class="field-group" :class="{ 'field-error': errors.texte }">
      <label id="libre-liens-label">Tes liens <span class="label-hint">(1 ou plusieurs — sites, PDF, articles...)</span></label>
      <div class="liens-list" role="group" aria-labelledby="libre-liens-label">
        <div v-for="(lien, i) in liens" :key="i" class="lien-row">
          <input
            :id="`libre-lien-${i}`"
            v-model="liens[i]"
            type="url"
            inputmode="url"
            placeholder="https://..."
            autocomplete="off"
            @blur="validateAll(false)"
          />
          <button
            v-if="liens.length > 1"
            type="button"
            class="lien-remove"
            :aria-label="`Retirer ce lien`"
            @click="removeLien(i)"
          >×</button>
        </div>
      </div>
      <button v-if="liens.length < 10" type="button" class="btn-add-lien" @click="addLien">+ un autre lien</button>
      <span v-if="errors.texte" id="libre-texte-error" class="error-msg" role="alert">{{ errors.texte }}</span>
    </div>

    <div class="field-group">
      <label for="libre-texte">Pourquoi c'est utile, pour toi ? <span class="label-hint">(pas de format imposé)</span></label>
      <textarea
        id="libre-texte"
        v-model="texte"
        rows="4"
        placeholder="Dis-le avec tes mots : ce que ça t'a apporté, pourquoi tu le partages..."
        :aria-describedby="errors.texte ? 'libre-texte-error' : undefined"
      />
    </div>

    <div class="field-group">
      <label id="libre-type-label">Type suggéré <span class="label-hint">(optionnel — ça nous aide à trier)</span></label>
      <ChipGroup aria-label="Type suggéré">
        <Chip
          v-for="t in TYPES_SUGGERES"
          :key="t"
          :label="TYPES_SUGGERES_LABELS[t]"
          variant="fonction"
          :active="typeSuggere === t"
          @toggle="toggleType(t)"
        />
      </ChipGroup>
    </div>

    <div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
      <label for="libre-email">Ton email <span class="label-hint">(optionnel — pour qu'on te tienne au courant)</span></label>
      <input
        id="libre-email"
        v-model="email"
        type="email"
        placeholder="ton@email.fr"
        autocomplete="email"
        @blur="validateAll(false)"
      />
      <span v-if="errors.submitted_by_email" class="error-msg" role="alert">{{ errors.submitted_by_email }}</span>
    </div>

    <!-- Honeypot anti-spam : caché visuellement et aux lecteurs d'écran, un bot le remplit. -->
    <div class="hp-field" aria-hidden="true">
      <label for="libre-site-web">Site web</label>
      <input id="libre-site-web" v-model="siteWeb" type="text" tabindex="-1" autocomplete="off" />
    </div>

    <div v-if="serverError" class="server-error" role="alert" aria-live="assertive">
      <strong>Erreur :</strong> {{ serverError }}
    </div>

    <div class="form-actions">
      <button type="submit" class="btn-primary" :disabled="submitting">
        {{ submitting ? 'Envoi en cours...' : 'Proposer →' }}
      </button>
    </div>
    <p class="form-note">Ta proposition sera examinée par l'équipe avant publication.</p>
  </form>
</template>

<script setup lang="ts">
import { LibreSubmitSchema, TYPES_SUGGERES, TYPES_SUGGERES_LABELS, type TypeSuggere } from '~/utils/submitLibre'

const props = defineProps<{ presetType?: TypeSuggere }>()
const emit = defineEmits<{ success: [] }>()

const liens = reactive<string[]>([''])
const texte = ref('')
const email = ref('')
const typeSuggere = ref<TypeSuggere | undefined>(props.presetType)
const siteWeb = ref('') // honeypot

const errors = reactive<Record<string, string>>({})
const submitting = ref(false)
const serverError = ref('')

function addLien() {
  if (liens.length < 10) liens.push('')
}

function removeLien(i: number) {
  liens.splice(i, 1)
  if (liens.length === 0) liens.push('')
}

function toggleType(t: TypeSuggere) {
  typeSuggere.value = typeSuggere.value === t ? undefined : t
}

function currentPayload() {
  return {
    liens: liens.map((l) => l.trim()).filter(Boolean),
    texte: texte.value,
    submitted_by_email: email.value || undefined,
    type_suggere: typeSuggere.value,
    site_web: siteWeb.value,
  }
}

function validateAll(scrollToError = true): boolean {
  const result = LibreSubmitSchema.safeParse(currentPayload())
  if (!result.success) {
    const flat = result.error.flatten().fieldErrors
    Object.keys(errors).forEach((k) => delete errors[k])
    Object.assign(errors, Object.fromEntries(Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])))
    if (scrollToError) {
      nextTick(() => {
        document.querySelector('.field-error')?.scrollIntoView({ behavior: 'smooth', block: 'center' })
      })
    }
    return false
  }
  Object.keys(errors).forEach((k) => delete errors[k])
  return true
}

async function submit() {
  serverError.value = ''
  if (!validateAll(true)) return

  submitting.value = true
  try {
    await $fetch('/api/submit', {
      method: 'POST',
      body: { mode: 'libre', ...currentPayload() },
    })
    emit('success')
  } 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) {
      Object.assign(errors, Object.fromEntries(Object.entries(e.data as Record<string, string[]>).map(([k, v]) => [k, Array.isArray(v) ? v[0] : String(v)])))
      serverError.value = 'Vérifie les erreurs ci-dessus.'
    } else {
      serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
    }
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
@import './form-styles.css';

.liens-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.375rem;
}
.lien-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lien-row input {
  flex: 1;
  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;
  box-sizing: border-box;
}
.lien-row input:focus {
  outline: none;
  border-color: var(--nav-primary-solid);
  box-shadow: 0 0 0 2px rgba(245, 179, 66, 0.4);
}
.lien-remove {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(26, 34, 56, 0.2);
  background: transparent;
  border-radius: 6px;
  color: var(--nav-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.lien-remove:hover {
  border-color: #c0392b;
  color: #c0392b;
}
.btn-add-lien {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: 1px dashed rgba(26, 34, 56, 0.3);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--nav-text-muted);
  cursor: pointer;
  font-family: inherit;
}
.btn-add-lien:hover {
  border-color: var(--nav-primary-solid);
  color: var(--nav-text);
}

.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
</style>