Fusionne l'espace admin dans l'espace membre : connexion unique

- Le menu public n'affiche plus « Espace admin » — un seul lien
  « Espace membre » pour tous les comptes
- /espace-membre devient le point de connexion unique : après connexion,
  le contenu affiché dépend du rôle du compte (portail membre avec header
  du site, ou back-office admin plein écran avec sa propre barre latérale)
- Admin.jsx exporte désormais AdminShell (coquille admin authentifiée,
  sans logique de connexion) réutilisée par Espace.jsx ; l'export par
  défaut devient une redirection de /admin vers /espace-membre pour ne
  pas casser d'anciens liens
- App.jsx masque le header/footer public uniquement quand un admin est
  affiché sur /espace-membre (ou sur l'ancienne route /admin)

Vérifié : navigation sans lien admin, /admin redirige, connexion membre
→ portail avec header, connexion admin → back-office sans header ; 34
tests e2e toujours au vert.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fkg15RCxNgUys4ru73He2o
This commit is contained in:
Claude committed 2026-07-13 08:59:06 +00:00
1 parent 4d5d42c61a
commit 3ea069bfbb
4 files changed
+26 -27

No files matched your search

+9 -3
View File
@@ -7,10 +7,16 @@ import Annuaire from './pages/Annuaire.jsx';
import Association from './pages/Association.jsx';
import Espace from './pages/Espace.jsx';
import Admin from './pages/Admin.jsx';
import { useAuth } from './lib/AuthContext.jsx';
export default function App() {
const location = useLocation();
const isAdmin = location.pathname.startsWith('/admin');
const { user } = useAuth();
// The admin backend (shown inside /espace-membre once an admin logs in)
// uses its own full-height sidebar layout, without the public header/footer.
const isAdminBackend =
location.pathname.startsWith('/admin') ||
(location.pathname === '/espace-membre' && user?.role === 'admin');
useEffect(() => {
window.scrollTo(0, 0);
@@ -18,7 +24,7 @@ export default function App() {
return (
<div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
{!isAdmin && <Header />}
{!isAdminBackend && <Header />}
<div style={{ flex: 1 }}>
<Routes>
<Route path="/" element={<Home />} />
@@ -29,7 +35,7 @@ export default function App() {
<Route path="*" element={<Home />} />
</Routes>
</div>
{!isAdmin && <Footer />}
{!isAdminBackend && <Footer />}
</div>
);
}
-8
View File
@@ -29,14 +29,6 @@ export default function Header() {
<NavLink to="/annuaire" className={navLinkClass}>Annuaire</NavLink>
<NavLink to="/association" className={navLinkClass}>L'association</NavLink>
<NavLink to="/espace-membre" className={navLinkClass}>Espace membre</NavLink>
<NavLink
to="/admin"
style={{ fontSize: 13, color: 'var(--gray-light)', display: 'flex', alignItems: 'center', gap: 6 }}
className="nav-btn"
>
<span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--red)', display: 'inline-block' }} />
Espace admin
</NavLink>
<Link to="/" style={{ marginLeft: 10, textDecoration: 'none' }}>
<button className="btn btn-red" style={{ padding: '12px 22px', fontSize: 14 }}>Devenir membre</button>
</Link>
+11 -13
View File
@@ -1,8 +1,7 @@
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { Link, Navigate } from 'react-router-dom';
import { useAuth } from '../lib/AuthContext.jsx';
import { api, dateParts, statutLabel } from '../lib/api.js';
import { LoginSection } from './Espace.jsx';
import { MembersTab, RencontresTab, InscriptionsTab } from '../components/admin/AdminTabs.jsx';
import { CategoriesTab, ContenuTab } from '../components/admin/AdminContent.jsx';
@@ -86,19 +85,13 @@ function Dashboard() {
);
}
export default function Admin() {
const { user, loading, logout } = useAuth();
// Rendered inside /espace-membre once a logged-in user is confirmed as
// admin (see Espace.jsx). Assumes an authenticated admin user — no auth
// gate here, the caller already checked it.
export function AdminShell() {
const { user, logout } = useAuth();
const [tab, setTab] = useState('dashboard');
if (loading) return <main style={{ minHeight: '60vh' }} />;
if (!user || user.role !== 'admin') {
return (
<main>
<LoginSection kicker="Espace admin" title="Administration du Business Club" />
</main>
);
}
const current = TABS.find((t) => t.key === tab);
const today = new Date().toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
@@ -150,3 +143,8 @@ export default function Admin() {
</div>
);
}
// Legacy /admin bookmarks: everyone now logs in from a single entry point.
export default function Admin() {
return <Navigate to="/espace-membre" replace />;
}
+6 -3
View File
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
import { useAuth } from '../lib/AuthContext.jsx';
import { api, seasonLabel } from '../lib/api.js';
import ImageSlot from '../components/ImageSlot.jsx';
import { AdminShell } from './Admin.jsx';
function LoginSection({ title = 'Gérez votre présence au Club', kicker = 'Espace membre' }) {
const { login } = useAuth();
@@ -266,12 +267,14 @@ function Portal() {
);
}
// Single login entry point for both members and admins. Once authenticated,
// the content shown depends on the account's role — the URL and the login
// form never differ.
export default function Espace() {
const { user, loading } = useAuth();
if (loading) return <main style={{ minHeight: '60vh' }} />;
if (!user || user.role !== 'member') return <main><LoginSection /></main>;
if (!user) return <main><LoginSection /></main>;
if (user.role === 'admin') return <AdminShell />;
return <main><Portal /></main>;
}
export { LoginSection };