changes

2026-06-26 11:26:45 +02:00
parent 1cf2a24ede
commit 2d25c91c55
14 changed files with 540 additions and 165 deletions
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -123,6 +123,15 @@ export default function Footer() {
              </Link>
            </li>

+            <li>
+              <Link
+                to="/sitemap"
+                className="hover:text-white transition"
+              >
+                Plan du site
+              </Link>
+            </li>
+
          </ul>

        </div>
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -1,21 +1,36 @@
 import { useState } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
 import logo from '../assets/img/logo.png'

 export default function Header() {
  const [menuOpen, setMenuOpen] = useState(false)
  const { pathname } = useLocation()
+  const navigate = useNavigate()
+
+  const user = JSON.parse(localStorage.getItem('user') || 'null')
+  const isLoggedIn = !!user
+
+  const handleLogout = () => {
+    localStorage.removeItem('token')
+    localStorage.removeItem('user')
+    setMenuOpen(false)
+    navigate('/connexion')
+  }

  const navLinks = [
    { to: '/accueil', label: 'Accueil' },
    { to: '/regles-jeu', label: 'Règles du jeu' },
  ]

+  const initials = user
+    ? `${(user.firstname || '?')[0]}${(user.lastname || '?')[0]}`.toUpperCase()
+    : null
+
  return (
    <header className="bg-white shadow-sm relative z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">

-        <Link to="/accueil" className="flex items-center flex-shrink-0">
+        <Link to={isLoggedIn ? '/mes-gains' : '/accueil'} className="flex items-center flex-shrink-0">
          <img src={logo} alt="Thé Tip Top" className="h-10 sm:h-12 w-auto" />
        </Link>

@@ -32,14 +47,32 @@ export default function Header() {
              {link.label}
            </Link>
          ))}
-          <div className="flex items-center gap-2">
-            <Link to="/connexion" className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors text-sm">
-              Connexion
-            </Link>
-            <Link to="/inscription" className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors text-sm">
-              Inscription
-            </Link>
-          </div>
+
+          {isLoggedIn ? (
+            <div className="flex items-center gap-3">
+              <Link to="/mes-gains" className="flex items-center gap-2 text-sm text-gray-700 hover:text-green-700 font-medium transition-colors">
+                <div className="w-8 h-8 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-xs font-bold">
+                  {initials}
+                </div>
+                <span>{user.firstname}</span>
+              </Link>
+              <button
+                onClick={handleLogout}
+                className="text-sm text-gray-400 hover:text-red-500 transition-colors font-medium"
+              >
+                Déconnexion
+              </button>
+            </div>
+          ) : (
+            <div className="flex items-center gap-2">
+              <Link to="/connexion" className="bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800 transition-colors text-sm">
+                Connexion
+              </Link>
+              <Link to="/inscription" className="border border-green-700 text-green-700 px-4 py-2 rounded-lg hover:bg-green-50 transition-colors text-sm">
+                Inscription
+              </Link>
+            </div>
+          )}
        </nav>

        {/* Hamburger mobile */}
@@ -69,21 +102,42 @@ export default function Header() {
              {link.label}
            </Link>
          ))}
+
          <div className="flex flex-col gap-2 pt-3">
-            <Link
-              to="/connexion"
-              onClick={() => setMenuOpen(false)}
-              className="w-full text-center bg-green-700 text-white px-4 py-2.5 rounded-lg hover:bg-green-800 transition-colors text-sm font-medium"
-            >
-              Connexion
-            </Link>
-            <Link
-              to="/inscription"
-              onClick={() => setMenuOpen(false)}
-              className="w-full text-center border border-green-700 text-green-700 px-4 py-2.5 rounded-lg hover:bg-green-50 transition-colors text-sm font-medium"
-            >
-              Inscription
-            </Link>
+            {isLoggedIn ? (
+              <>
+                <Link
+                  to="/mes-gains"
+                  onClick={() => setMenuOpen(false)}
+                  className="w-full text-center bg-[#006B6B] text-white px-4 py-2.5 rounded-lg text-sm font-medium"
+                >
+                  Mon espace ({user.firstname})
+                </Link>
+                <button
+                  onClick={handleLogout}
+                  className="w-full text-center border border-red-300 text-red-500 px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-red-50 transition-colors"
+                >
+                  Déconnexion
+                </button>
+              </>
+            ) : (
+              <>
+                <Link
+                  to="/connexion"
+                  onClick={() => setMenuOpen(false)}
+                  className="w-full text-center bg-green-700 text-white px-4 py-2.5 rounded-lg hover:bg-green-800 transition-colors text-sm font-medium"
+                >
+                  Connexion
+                </Link>
+                <Link
+                  to="/inscription"
+                  onClick={() => setMenuOpen(false)}
+                  className="w-full text-center border border-green-700 text-green-700 px-4 py-2.5 rounded-lg hover:bg-green-50 transition-colors text-sm font-medium"
+                >
+                  Inscription
+                </Link>
+              </>
+            )}
          </div>
        </div>
      )}
--- a/frontend/src/components/ProtectedRoute.jsx
+++ b/frontend/src/components/ProtectedRoute.jsx
@@ -0,0 +1,17 @@
+import { Navigate } from 'react-router-dom'
+
+export default function ProtectedRoute({ children, roles }) {
+  const token = localStorage.getItem('token')
+  const user = JSON.parse(localStorage.getItem('user') || 'null')
+
+  if (!token || !user) {
+    return <Navigate to="/connexion" replace />
+  }
+
+  if (roles && !roles.includes(user.role)) {
+    const redirects = { ADMIN: '/admin', EMPLOYEE: '/employe', CLIENT: '/mes-gains' }
+    return <Navigate to={redirects[user.role] || '/connexion'} replace />
+  }
+
+  return children
+}
--- a/frontend/src/components/UserNav.jsx
+++ b/frontend/src/components/UserNav.jsx
@@ -0,0 +1,56 @@
+import { Link } from 'react-router-dom'
+
+export default function UserNav({ active }) {
+  const tabs = [
+    {
+      key: 'code',
+      to: '/saisir-code-unique',
+      label: 'Saisir un code',
+      icon: (
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
+        </svg>
+      ),
+    },
+    {
+      key: 'gains',
+      to: '/mes-gains',
+      label: 'Mes gains',
+      icon: (
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M20 12V22H4V12M22 7H2v5h20V7zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z" />
+        </svg>
+      ),
+    },
+    {
+      key: 'profile',
+      to: '/profile',
+      label: 'Profil',
+      icon: (
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+        </svg>
+      ),
+    },
+  ]
+
+  return (
+    <div className="flex border-b border-gray-200 mb-6">
+      {tabs.map((tab) => (
+        <Link
+          key={tab.key}
+          to={tab.to}
+          className={`flex-1 flex items-center justify-center gap-1.5 py-3 text-xs sm:text-sm font-medium transition-colors ${
+            active === tab.key
+              ? 'text-[#006B6B] border-b-2 border-[#006B6B]'
+              : 'text-gray-400 hover:text-gray-600'
+          }`}
+        >
+          {tab.icon}
+          <span className="hidden sm:inline">{tab.label}</span>
+          <span className="sm:hidden">{tab.label.split(' ')[0]}</span>
+        </Link>
+      ))}
+    </div>
+  )
+}