PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-06-25 16:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Rework contenus-edit: auto-save, OverType toolbar, dynamic sidebar links

Browse Source 
- Auto-save: new autosave.js with 1.5s debounce, watches all forms with
  data-autosave, POSTs to form action with Accept: application/json, shows
  saving/saved/error status indicator
- All action handlers (page.php, apropos.php, form-help.php) now detect
  JSON Accept header and return {success, csrf_token} or {error} responses
- OverType toolbar enabled (toolbar:true) on all three markdown editors
  (page, about_page, form_help)
- Sidebar links: replaced fixed erg_site_url / source_code_url rows with
  dynamic sidebar_links array of {label, url} objects. Add/remove via JS.
  Fallback migration reads legacy keys if sidebar_links is empty.
- Updated AboutController and about.php template to render dynamic links
- Updated apropos.css: unified .apropos-toc-link replacing .apropos-toc-erg
  and .apropos-toc-source
- New CSS: autosave-status states, sidebar-link-row layout
- Removed all Enregistrer + Annuler buttons — auto-save and h1 back-arrow
  make them redundant
This commit is contained in:
Pontoporeia
2026-06-09 17:10:49 +02:00
parent a45a2c9ac4
commit c4a550f9d1
13 changed files with 441 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
app/public/admin/actions/apropos.php
View File

@@ -1,25 +1,45 @@
<?php
/**
* Save handler for apropos contacts.
* Structure: groups[] with role, each having entries[] of {text, url, email}.
* Save handler for apropos contacts, sidebar links, and URL-based keys.
* Supports:
* - contacts: groups[] with role, each having entries[] of {text, url, email}
* - sidebar_links: links[] of {label, url}
* - Legacy URL keys: erg_site_url, source_code_url (single url field)
*/
require_once __DIR__ . "/../../../bootstrap.php";
require_once __DIR__ . '/../../../src/AdminAuth.php';
error_log('[apropos.php] ENTRY | method=' . $_SERVER['REQUEST_METHOD'] . ' | key=' . ($_POST['apropos_key'] ?? 'none') . ' | post_keys=' . implode(',', array_keys($_POST)));
AdminAuth::requireLogin();
$isAjax = !empty($_SERVER['HTTP_ACCEPT']) && str_contains($_SERVER['HTTP_ACCEPT'], 'application/json');
// CSRF check
if (!isset($_POST['csrf_token']) || !isset($_SESSION['csrf_token']) ||
!hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'])) {
die("Erreur de sécurité : token invalide.");
if ($isAjax) {
http_response_code(403);
header('Content-Type: application/json');
echo json_encode(['error' => 'Erreur de sécurité : token invalide.']);
} else {
die("Erreur de sécurité : token invalide.");
}
exit;
}
$urlKeys = ['erg_site_url', 'source_code_url'];
$groupKeys = ['contacts'];
$allowedKeys = array_merge($urlKeys, $groupKeys);
$linkListKeys = ['sidebar_links'];
$allowedKeys = array_merge($urlKeys, $groupKeys, $linkListKeys);
$aproposKey = $_POST['apropos_key'] ?? '';
if (!in_array($aproposKey, $allowedKeys)) {
die("Clé invalide.");
if ($isAjax) {
http_response_code(400);
header('Content-Type: application/json');
echo json_encode(['error' => 'Clé invalide.']);
} else {
die("Clé invalide.");
}
exit;
}
require_once __DIR__ . '/../../../src/Database.php';
@@ -30,12 +50,40 @@ try {
$db = new Database();
if (in_array($aproposKey, $urlKeys)) {
// ── URL-based keys (sidebar links) ──
// ── URL-based keys (legacy sidebar links) ──
$url = trim($_POST['url'] ?? '');
if ($url !== '' && !filter_var($url, FILTER_VALIDATE_URL)) {
die("URL invalide.");
if ($isAjax) {
http_response_code(400);
header('Content-Type: application/json');
echo json_encode(['error' => 'URL invalide.']);
} else {
die("URL invalide.");
}
exit;
}
$db->saveAproposContent($aproposKey, $url);
} elseif (in_array($aproposKey, $linkListKeys)) {
// ── Sidebar links list ──
$links = $_POST['links'] ?? [];
$cleaned = [];
foreach ($links as $link) {
$label = trim($link['label'] ?? '');
$url = trim($link['url'] ?? '');
if ($label === '') continue;
if ($url !== '' && !filter_var($url, FILTER_VALIDATE_URL)) {
if ($isAjax) {
http_response_code(400);
header('Content-Type: application/json');
echo json_encode(['error' => 'URL invalide: ' . htmlspecialchars($label)]);
} else {
die("URL invalide: " . htmlspecialchars($label));
}
exit;
}
$cleaned[] = ['label' => $label, 'url' => $url];
}
$db->saveAproposContent($aproposKey, $cleaned);
} else {
// ── Group-based keys (contacts) ──
$groups = $_POST['groups'] ?? [];
@@ -61,18 +109,43 @@ try {
}
if (empty($cleaned)) {
die("Au moins un groupe avec des entrées est requis.");
if ($isAjax) {
http_response_code(400);
header('Content-Type: application/json');
echo json_encode(['error' => 'Au moins un groupe avec des entrées est requis.']);
} else {
die("Au moins un groupe avec des entrées est requis.");
}
exit;
}
$db->saveAproposContent($aproposKey, $cleaned);
}
AdminLogger::make()->logAproposEdit($aproposKey);
App::flash('success', "Contenu « $aproposKey » mis à jour avec succès.");
if ($isAjax) {
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
header('Content-Type: application/json');
echo json_encode([
'success' => true,
'csrf_token' => $_SESSION['csrf_token'],
]);
} else {
App::flash('success', "Contenu « $aproposKey » mis à jour avec succès.");
header('Location: /admin/contenus.php');
}
} catch (Exception $e) {
ErrorHandler::log('apropos', $e);
die('Erreur lors de la sauvegarde : ' . htmlspecialchars(ErrorHandler::userMessage($e)));
$msg = 'Erreur lors de la sauvegarde : ' . htmlspecialchars(ErrorHandler::userMessage($e));
if ($isAjax) {
http_response_code(500);
header('Content-Type: application/json');
echo json_encode(['error' => $msg]);
} else {
die($msg);
}
exit;
}
header('Location: /admin/contenus.php');
exit;

34
app/public/admin/actions/form-help.php
View File

@@ -2,14 +2,23 @@
/**
* Save handler for form help blocks (student-facing explanatory text shown
* in the /partage share-link submission form).
* Supports both regular form POST and AJAX auto-save requests.
*/
require_once __DIR__ . '/../../../bootstrap.php';
require_once __DIR__ . '/../../../src/AdminAuth.php';
error_log('[form-help.php] ENTRY | method=' . $_SERVER['REQUEST_METHOD'] . ' | key=' . ($_POST['form_help_key'] ?? 'none') . ' | post_keys=' . implode(',', array_keys($_POST)));
AdminAuth::requireLogin();
$isAjax = !empty($_SERVER['HTTP_ACCEPT']) && str_contains($_SERVER['HTTP_ACCEPT'], 'application/json');
if (!isset($_POST['csrf_token'], $_SESSION['csrf_token'])
|| !hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'])) {
if ($isAjax) {
http_response_code(403);
header('Content-Type: application/json');
echo json_encode(['error' => 'Erreur de sécurité : token invalide.']);
exit;
}
App::flash('error', 'Erreur de sécurité : token invalide.');
header('Location: /admin/contenus.php');
exit;
@@ -24,6 +33,12 @@ require_once APP_ROOT . '/src/ErrorHandler.php';
$db = new Database();
if (!in_array($key, Database::FORM_HELP_KEYS, true)) {
if ($isAjax) {
http_response_code(400);
header('Content-Type: application/json');
echo json_encode(['error' => 'Clé de bloc invalide.']);
exit;
}
App::flash('error', 'Clé de bloc invalide.');
header('Location: /admin/contenus.php');
exit;
@@ -32,10 +47,27 @@ if (!in_array($key, Database::FORM_HELP_KEYS, true)) {
try {
$db->setFormHelpBlock($key, $content);
AdminLogger::make()->logFormStructureEdit($key);
if ($isAjax) {
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
header('Content-Type: application/json');
echo json_encode([
'success' => true,
'csrf_token' => $_SESSION['csrf_token'],
]);
exit;
}
App::flash('success', 'Bloc « ' . htmlspecialchars($key) . ' » mis à jour.');
} catch (Exception $e) {
ErrorHandler::log('form_help', $e);
App::flash('error', 'Erreur lors de la sauvegarde : ' . ErrorHandler::userMessage($e));
$msg = 'Erreur lors de la sauvegarde : ' . ErrorHandler::userMessage($e);
if ($isAjax) {
http_response_code(500);
header('Content-Type: application/json');
echo json_encode(['error' => $msg]);
exit;
}
App::flash('error', $msg);
}
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));

34
app/public/admin/actions/page.php
View File

@@ -1,14 +1,23 @@
<?php
/**
* Save handler for static page content (Markdown).
* Supports both regular form POST and AJAX auto-save requests.
*/
require_once __DIR__ . '/../../../bootstrap.php';
require_once __DIR__ . '/../../../src/AdminAuth.php';
error_log('[page.php] ENTRY | method=' . $_SERVER['REQUEST_METHOD'] . ' | slug=' . ($_POST['slug'] ?? 'none') . ' | post_keys=' . implode(',', array_keys($_POST)));
AdminAuth::requireLogin();
$isAjax = !empty($_SERVER['HTTP_ACCEPT']) && str_contains($_SERVER['HTTP_ACCEPT'], 'application/json');
if (!isset($_POST['csrf_token'], $_SESSION['csrf_token'])
|| !hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'])) {
if ($isAjax) {
http_response_code(403);
header('Content-Type: application/json');
echo json_encode(['error' => 'Erreur de sécurité : token invalide.']);
exit;
}
App::flash('error', 'Erreur de sécurité : token invalide.');
header('Location: /admin/contenus.php');
exit;
@@ -19,6 +28,12 @@ $slug = $_POST['slug'] ?? '';
$content = $_POST['content'] ?? '';
if (!in_array($slug, $allowedSlugs, true)) {
if ($isAjax) {
http_response_code(400);
header('Content-Type: application/json');
echo json_encode(['error' => 'Slug de page invalide.']);
exit;
}
App::flash('error', 'Slug de page invalide.');
header('Location: /admin/contenus.php');
exit;
@@ -32,10 +47,27 @@ $db = new Database();
try {
$db->savePage($slug, $content);
AdminLogger::make()->logPageEdit($slug);
if ($isAjax) {
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
header('Content-Type: application/json');
echo json_encode([
'success' => true,
'csrf_token' => $_SESSION['csrf_token'],
]);
exit;
}
App::flash('success', 'Page « ' . htmlspecialchars($slug) . ' » mise à jour.');
} catch (Exception $e) {
ErrorHandler::log('page', $e);
App::flash('error', 'Erreur lors de la sauvegarde : ' . ErrorHandler::userMessage($e));
$msg = 'Erreur lors de la sauvegarde : ' . ErrorHandler::userMessage($e);
if ($isAjax) {
http_response_code(500);
header('Content-Type: application/json');
echo json_encode(['error' => $msg]);
exit;
}
App::flash('error', $msg);
}
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));

23
app/public/admin/contenus-edit.php
View File

@@ -44,8 +44,19 @@ try {
$editType = 'about_page';
$aboutContacts = $db->getAproposContent('contacts');
$aboutContacts = is_array($aboutContacts) ? $aboutContacts : [];
$ergSiteUrl = $db->getAproposContent('erg_site_url');
$sourceCodeUrl = $db->getAproposContent('source_code_url');
$sidebarLinks = $db->getAproposContent('sidebar_links');
$sidebarLinks = is_array($sidebarLinks) ? $sidebarLinks : [];
// Fallback: migrate legacy individual sidebar link keys
if (empty($sidebarLinks)) {
$ergSiteUrl = $db->getAproposContent('erg_site_url');
$sourceCodeUrl = $db->getAproposContent('source_code_url');
if ($ergSiteUrl) {
$sidebarLinks[] = ['label' => 'Site de l\'erg', 'url' => $ergSiteUrl];
}
if ($sourceCodeUrl) {
$sidebarLinks[] = ['label' => 'Code source', 'url' => $sourceCodeUrl];
}
}
} else {
$editType = "page";
}
@@ -72,7 +83,7 @@ $extraJsInline = '';
if ($editType === 'page' || $editType === 'about_page') {
$initialContent = $page["content"] ?? "";
$extraJs = ["/assets/js/vendor/overtype.min.js"];
$extraJs = ["/assets/js/vendor/overtype.min.js", "/assets/js/app/autosave.js"];
$extraJsInline = <<<'JS'
var OT = window.OverType.default || window.OverType;
var hidden = document.getElementById('content');
@@ -80,12 +91,13 @@ var editor = new OT(document.getElementById('editor'), {
value: hidden.value,
minHeight: '400px',
spellcheck: false,
toolbar: true,
onChange: function(value) { hidden.value = value; }
});
JS;
} elseif ($editType === 'form_help') {
$initialContent = $formHelpContent;
$extraJs = ["/assets/js/vendor/overtype.min.js"];
$extraJs = ["/assets/js/vendor/overtype.min.js", "/assets/js/app/autosave.js"];
$extraJsInline = <<<'JS'
var OT = window.OverType.default || window.OverType;
var hidden = document.getElementById('content');
@@ -93,9 +105,12 @@ var editor = new OT(document.getElementById('editor'), {
value: hidden.value,
minHeight: '400px',
spellcheck: false,
toolbar: true,
onChange: function(value) { hidden.value = value; }
});
JS;
} elseif ($editType === 'apropos') {
$extraJs = ["/assets/js/app/autosave.js"];
}
$isAdmin = true;

60
app/public/assets/css/admin.css
View File

@@ -2140,3 +2140,63 @@ th.admin-ap-col {
width: 100%;
box-sizing: border-box;
}
/* ── Sidebar links editor ──────────────────────────────────────────────── */
.sidebar-link-row {
display: flex;
align-items: flex-start;
gap: var(--space-xs);
margin-bottom: var(--space-s);
}
.sidebar-link-fields {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--space-s);
flex: 1;
}
.sidebar-link-fields > div {
display: flex;
flex-direction: column;
}
.sidebar-link-fields label {
font-size: var(--step--1);
margin-bottom: var(--space-3xs);
}
.sidebar-link-fields input {
width: 100%;
box-sizing: border-box;
}
.sidebar-link-row .admin-icon-btn--delete {
margin-top: calc(var(--step--1) + var(--space-3xs) + 0.3em);
flex-shrink: 0;
}
/* ── Auto-save status indicator ────────────────────────────────────────── */
.autosave-status {
font-size: var(--step--2);
min-height: 1.5em;
margin-top: var(--space-2xs);
color: var(--text-tertiary);
transition: color 0.2s;
}
.autosave-status--saving {
color: var(--accent-yellow);
font-style: italic;
}
.autosave-status--saved {
color: var(--accent-green);
}
.autosave-status--error {
color: var(--error);
font-weight: 500;
}

22
app/public/assets/css/apropos.css
View File

@@ -71,35 +71,23 @@
border-left-color: var(--accent-primary);
}
.apropos-toc-erg {
.apropos-toc-link:first-of-type {
padding-top: var(--space-s);
border-top: 1px solid var(--border-primary);
}
.apropos-toc-erg a {
font-size: var(--step--2);
color: var(--accent-primary);
text-decoration: none;
transition: opacity 0.15s;
}
.apropos-toc-erg a:hover {
color: var(--accent-primary);
opacity: 1;
}
.apropos-toc-source {
.apropos-toc-link + .apropos-toc-link {
padding-top: var(--space-xs);
}
.apropos-toc-source a {
.apropos-toc-link a {
font-size: var(--step--2);
color: var(--accent-primary);
text-decoration: none;
transition: opacity 0.15s;
}
.apropos-toc-source a:hover {
.apropos-toc-link a:hover {
color: var(--accent-primary);
opacity: 1;
}
@@ -326,7 +314,7 @@
padding-left: 0;
}
.apropos-toc-erg {
.apropos-toc-link {
border-top: none;
padding-top: 0;
margin-left: auto;

76
app/public/assets/js/app/autosave.js Normal file
View File

@@ -0,0 +1,76 @@
/**
* Auto-save for admin content edit forms.
*
* Watches forms with [data-autosave] attribute. Debounces 1.5s after the
* last change, POSTs to the form's action, and shows a small status bar.
*
* The status indicator lives in a sibling element with [data-autosave-status].
* States: idle → saving… → saved ✓ / error !
*/
(() => {
const forms = document.querySelectorAll('form[data-autosave]');
if (!forms.length) return;
const DEBOUNCE_MS = 1500;
for (const form of forms) {
const statusEl = document.querySelector(form.dataset.autosaveStatus || '[data-autosave-status]');
let timer = null;
let dirty = false;
const setStatus = (text, cls) => {
if (!statusEl) return;
statusEl.textContent = text;
statusEl.className = 'autosave-status ' + (cls || '');
};
const doSave = () => {
if (!dirty) return;
dirty = false;
setStatus('Enregistrement…', 'autosave-status--saving');
const formData = new FormData(form);
fetch(form.action, {
method: 'POST',
body: formData,
headers: { 'Accept': 'application/json' },
})
.then((r) => {
if (!r.ok) throw new Error('HTTP ' + r.status);
setStatus('Enregistré ✓', 'autosave-status--saved');
// Refresh CSRF token from response if provided
r.json().then((data) => {
if (data && data.csrf_token) {
const csrfInput = form.querySelector('input[name="csrf_token"]');
if (csrfInput) csrfInput.value = data.csrf_token;
const meta = document.querySelector('meta[name="csrf-token"]');
if (meta) meta.setAttribute('content', data.csrf_token);
}
}).catch(() => {});
})
.catch(() => {
setStatus('Erreur !', 'autosave-status--error');
dirty = true;
});
};
const schedule = () => {
dirty = true;
setStatus('', '');
clearTimeout(timer);
timer = setTimeout(doSave, DEBOUNCE_MS);
};
// Watch all inputs inside the form
form.addEventListener('input', schedule);
form.addEventListener('change', schedule);
// Clear dirty on manual submit
form.addEventListener('submit', () => {
clearTimeout(timer);
dirty = false;
setStatus('', '');
});
}
})();