feat(aep): carte AEP — push Gitea 2026-04-28
This commit is contained in:
Jules Neny
389
pages/signaler.vue
Normal file
389
pages/signaler.vue
Normal file
@@ -0,0 +1,389 @@
|
||||
<template>
|
||||
<div class="signaler-page">
|
||||
<div class="signaler-inner">
|
||||
<NuxtLink to="/" class="back-link">← Retour à la carte</NuxtLink>
|
||||
|
||||
<h1>Signaler un problème</h1>
|
||||
<p class="signaler-subtitle">
|
||||
Un bug, un contenu inapproprié, ou une suggestion ? Décris le problème ci-dessous.
|
||||
</p>
|
||||
|
||||
<!-- Succès -->
|
||||
<div v-if="success" class="success-block" role="status">
|
||||
<div class="success-icon">✓</div>
|
||||
<h2>Merci pour ton retour !</h2>
|
||||
<p>Le signalement a été envoyé. On s'en occupe.</p>
|
||||
<button type="button" class="btn-secondary" @click="reset">Envoyer un autre signalement</button>
|
||||
</div>
|
||||
|
||||
<!-- Formulaire -->
|
||||
<form v-else @submit.prevent="submit" class="signaler-form" novalidate>
|
||||
|
||||
<!-- Catégorie -->
|
||||
<div class="field-group">
|
||||
<fieldset>
|
||||
<legend>Ça concerne</legend>
|
||||
<div class="radio-group">
|
||||
<label
|
||||
v-for="cat in CATEGORIES"
|
||||
:key="cat"
|
||||
class="radio-label"
|
||||
:class="{ active: form.category === cat }"
|
||||
>
|
||||
<input type="radio" :value="cat" v-model="form.category" name="category" />
|
||||
{{ cat }}
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="field-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
v-model="form.description"
|
||||
rows="4"
|
||||
placeholder="Décris le problème..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Email (optionnel) -->
|
||||
<div class="field-group">
|
||||
<label for="email">
|
||||
Ton email
|
||||
<span class="label-hint">(optionnel — pour un suivi)</span>
|
||||
</label>
|
||||
<input id="email" v-model="form.email" type="email" placeholder="ton@email.fr" />
|
||||
</div>
|
||||
|
||||
<div v-if="serverError" class="server-error" role="alert">{{ serverError }}</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<NuxtLink to="/" class="btn-secondary">Annuler</NuxtLink>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn-primary"
|
||||
:disabled="submitting || !form.category || !form.description.trim()"
|
||||
>
|
||||
{{ submitting ? 'Envoi...' : 'Envoyer le signalement' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const CATEGORIES = ['Une fiche', 'Le chatbot', 'La carte', 'Autre'] as const
|
||||
|
||||
const form = reactive({
|
||||
category: '' as string,
|
||||
description: '',
|
||||
email: '',
|
||||
})
|
||||
|
||||
const submitting = ref(false)
|
||||
const success = ref(false)
|
||||
const serverError = ref('')
|
||||
|
||||
async function submit() {
|
||||
serverError.value = ''
|
||||
submitting.value = true
|
||||
try {
|
||||
await $fetch('/api/report-general', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
category: form.category,
|
||||
description: form.description,
|
||||
email: form.email || undefined,
|
||||
},
|
||||
})
|
||||
success.value = true
|
||||
} catch (e: any) {
|
||||
serverError.value = e?.data?.message || 'Erreur lors de l\'envoi. Réessaie.'
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
Object.assign(form, { category: '', description: '', email: '' })
|
||||
success.value = false
|
||||
serverError.value = ''
|
||||
}
|
||||
|
||||
useHead({ title: 'Signaler un problème — AEP' })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ── Layout ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
.signaler-page {
|
||||
min-height: 100vh;
|
||||
background: var(--nav-bg);
|
||||
padding: 1.5rem 1rem 120px;
|
||||
}
|
||||
|
||||
.signaler-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 ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--nav-text);
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.signaler-subtitle {
|
||||
font-size: 0.9rem;
|
||||
color: var(--nav-text-muted);
|
||||
line-height: 1.5;
|
||||
margin: 0 0 2rem;
|
||||
}
|
||||
|
||||
/* ── 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 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── Formulaire ──────────────────────────────────────────────────────────────── */
|
||||
|
||||
.signaler-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;
|
||||
}
|
||||
|
||||
.label-hint {
|
||||
font-weight: 400;
|
||||
color: var(--nav-text-muted);
|
||||
font-size: 0.8rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── Radio (Catégorie) ────────────────────────────────────────────────────────── */
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* ── 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);
|
||||
}
|
||||
|
||||
/* ── Responsive ──────────────────────────────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.signaler-page {
|
||||
padding: 1rem 0.75rem 3rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user