Merge branch 'Ruben' of https://github.com/Charles40130/Projet-Dev-Web-Ing1 into Ruben

Front-end/package.json

@@ -23,12 +23,13 @@
     "@eslint/js": "^9.9.1",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.18",
-    "eslint": "^9.9.1",
+    "eslint": "^9.23.0",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.11",
     "globals": "^15.9.0",
     "postcss": "^8.4.35",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.17",
     "vite": "^5.4.2"
   },
   "description": "Bienvenue dans le projet **DevWeb** ! Ce projet utilise **Vite** et **React** pour créer une application web moderne et performante.",

Front-end/src/pages/Admin/Dashboard.jsx

@@ -1,65 +1,95 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import Sidebar from './sidebar.jsx';
+import Sidebar from "./sidebar.jsx";
 
 const dashboardStyles = {
   mainContent: {
     flexGrow: 1,
-    padding: '20px',
+    padding: "20px",
   },
   summaryContainer: {
-    display: 'flex',
+    display: "flex",
-    gap: '20px',
+    gap: "20px",
-    marginBottom: '20px',
+    marginBottom: "20px",
   },
   summaryCard: {
-    background: '#f4f4f4',
+    background: "#f4f4f4",
-    padding: '20px',
+    padding: "20px",
     flex: 1,
-    borderRadius: '5px',
+    borderRadius: "5px",
-    textAlign: 'center'
+    textAlign: "center",
   },
   table: {
-    width: '100%',
+    width: "100%",
-    borderCollapse: 'collapse',
+    borderCollapse: "collapse",
   },
   tableHeader: {
-    padding: '10px',
+    padding: "10px",
-    border: '1px solid #ccc',
+    border: "1px solid #ccc",
-    backgroundColor: '#f4f4f4',
+    backgroundColor: "#f4f4f4",
   },
   tableCell: {
-    padding: '10px',
+    padding: "10px",
-    border: '1px solid #ccc',
+    border: "1px solid #ccc",
-    textAlign: 'left',
+    textAlign: "left",
   },
   viewMoreButton: {
-    marginTop: '10px',
+    marginTop: "10px",
-    padding: '10px 15px',
+    padding: "10px 15px",
-    backgroundColor: '#007bff',
+    backgroundColor: "#007bff",
-    color: '#fff',
+    color: "#fff",
-    border: 'none',
+    border: "none",
-    borderRadius: '5px',
+    borderRadius: "5px",
-    cursor: 'pointer',
+    cursor: "pointer",
-  }
+  },
 };
 
 function Dashboard() {
   // États simulés (dans une vraie application, ils viendraient d'une API ou d'un store global)
   const [users, setUsers] = useState([
-    { id: 1, username: 'Alice', email: 'alice@example.com', accessLevel: 'Admin' },
+    {
-    { id: 2, username: 'Bob', email: 'bob@example.com', accessLevel: 'User' },
+      id: 1,
-    { id: 3, username: 'Charlie', email: 'charlie@example.com', accessLevel: 'Guest' },
+      username: "Alice",
-    { id: 4, username: 'David', email: 'david@example.com', accessLevel: 'User' },
+      email: "alice@example.com",
-    { id: 5, username: 'Eva', email: 'eva@example.com', accessLevel: 'User' },
+      accessLevel: "Admin",
-    { id: 6, username: 'Frank', email: 'frank@example.com', accessLevel: 'Admin' },
+    },
+    { id: 2, username: "Bob", email: "bob@example.com", accessLevel: "User" },
+    {
+      id: 3,
+      username: "Charlie",
+      email: "charlie@example.com",
+      accessLevel: "Guest",
+    },
+    {
+      id: 4,
+      username: "David",
+      email: "david@example.com",
+      accessLevel: "User",
+    },
+    { id: 5, username: "Eva", email: "eva@example.com", accessLevel: "User" },
+    {
+      id: 6,
+      username: "Frank",
+      email: "frank@example.com",
+      accessLevel: "Admin",
+    },
   ]);
   const [logs, setLogs] = useState([
-    { id: 1, username: 'Alice', action: 'User added', timestamp: new Date().toLocaleString() },
+    {
-    { id: 2, username: 'Bob', action: 'Access assigned', timestamp: new Date().toLocaleString() },
+      id: 1,
+      username: "Alice",
+      action: "User added",
+      timestamp: new Date().toLocaleString(),
+    },
+    {
+      id: 2,
+      username: "Bob",
+      action: "Access assigned",
+      timestamp: new Date().toLocaleString(),
+    },
   ]);
 
   return (
-    <div style={{ display: 'flex', minHeight: '100vh' }}>
+    <div style={{ display: "flex", minHeight: "100vh" }}>
       <Sidebar />
       <main style={dashboardStyles.mainContent}>
         <h1>Dashboard</h1>
@@ -72,7 +102,8 @@ function Dashboard() {
             <h2>Dernier Log</h2>
             {logs.length > 0 ? (
               <p>
-                {logs[logs.length - 1].username} - {logs[logs.length - 1].action}
+                {logs[logs.length - 1].username} -{" "}
+                {logs[logs.length - 1].action}
               </p>
             ) : (
               <p>Aucun log</p>
@@ -91,7 +122,7 @@ function Dashboard() {
               </tr>
             </thead>
             <tbody>
-              {users.slice(0, 5).map(user => (
+              {users.slice(0, 5).map((user) => (
                 <tr key={user.id}>
                   <td style={dashboardStyles.tableCell}>{user.username}</td>
                   <td style={dashboardStyles.tableCell}>{user.email}</td>
@@ -100,13 +131,18 @@ function Dashboard() {
               ))}
               {users.length === 0 && (
                 <tr>
-                  <td colSpan="3" style={dashboardStyles.tableCell}>Aucun utilisateur disponible</td>
+                  <td colSpan="3" style={dashboardStyles.tableCell}>
+                    Aucun utilisateur disponible
+                  </td>
                 </tr>
               )}
             </tbody>
           </table>
           {/* Bouton pour accéder à la page complète */}
-          <button style={dashboardStyles.viewMoreButton} onClick={() => window.location.href = '/user'}>
+          <button
+            style={dashboardStyles.viewMoreButton}
+            onClick={() => (window.location.href = "/user")}
+          >
             Voir plus
           </button>
         </section>

Front-end/src/pages/Admin/User.jsx

@@ -1,56 +1,56 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import Sidebar from './sidebar.jsx';
+import Sidebar from "./sidebar.jsx";
-  
+
 const styles = {
   mainContent: {
     flexGrow: 1,
-    padding: '20px',
+    padding: "20px",
   },
   header: {
-    marginBottom: '20px',
+    marginBottom: "20px",
   },
   userManagement: {
-    marginTop: '20px',
+    marginTop: "20px",
   },
   userForm: {
-    display: 'grid',
+    display: "grid",
-    gridTemplateColumns: '1fr 1fr auto',
+    gridTemplateColumns: "1fr 1fr auto",
-    gap: '10px',
+    gap: "10px",
-    marginBottom: '20px',
+    marginBottom: "20px",
   },
   input: {
-    padding: '10px',
+    padding: "10px",
-    border: '1px solid #ccc',
+    border: "1px solid #ccc",
-    borderRadius: '5px',
+    borderRadius: "5px",
   },
   button: {
-    padding: '10px',
+    padding: "10px",
-    backgroundColor: '#28a745',
+    backgroundColor: "#28a745",
-    color: 'white',
+    color: "white",
-    border: 'none',
+    border: "none",
-    borderRadius: '5px',
+    borderRadius: "5px",
-    cursor: 'pointer',
+    cursor: "pointer",
   },
   userTable: {
-    width: '100%',
+    width: "100%",
-    borderCollapse: 'collapse',
+    borderCollapse: "collapse",
   },
   thTd: {
-    padding: '10px',
+    padding: "10px",
-    border: '1px solid #ccc',
+    border: "1px solid #ccc",
-    textAlign: 'left',
+    textAlign: "left",
   },
   th: {
-    backgroundColor: '#f4f4f4',
+    backgroundColor: "#f4f4f4",
-  }
+  },
 };
 
 function User() {
   // États pour la gestion des utilisateurs, des logs, des champs du formulaire et des ajustements de points
   const [users, setUsers] = useState([]);
   const [logs, setLogs] = useState([]);
-  const [username, setUsername] = useState('');
+  const [username, setUsername] = useState("");
-  const [email, setEmail] = useState('');
+  const [email, setEmail] = useState("");
   const [pointsInput, setPointsInput] = useState({});
 
   // Ajout d'un utilisateur
@@ -60,48 +60,55 @@ function User() {
       id: Date.now(),
       username,
       email,
-      accessLevel: 'User', // Niveau d'accès par défaut
+      accessLevel: "User", // Niveau d'accès par défaut
       points: 0,
     };
     setUsers([...users, newUser]);
-    logAction(username, 'User added');
+    logAction(username, "User added");
-    setUsername('');
+    setUsername("");
-    setEmail('');
+    setEmail("");
   };
 
   // Suppression d'un utilisateur (fonction présente dans script.js)
   const handleDeleteUser = (userId) => {
-    const user = users.find(u => u.id === userId);
+    const user = users.find((u) => u.id === userId);
     if (user) {
-      logAction(user.username, 'User deleted');
+      logAction(user.username, "User deleted");
     }
-    setUsers(users.filter(u => u.id !== userId));
+    setUsers(users.filter((u) => u.id !== userId));
   };
 
   // Changement du niveau d'accès via le menu déroulant (fonction issue de script.js)
   const handleChangeAccessLevel = (userId, newLevel) => {
-    setUsers(users.map(user => {
+    setUsers(
-      if (user.id === userId) {
+      users.map((user) => {
-        const oldLevel = user.accessLevel;
+        if (user.id === userId) {
-        user.accessLevel = newLevel;
+          const oldLevel = user.accessLevel;
-        logAction(user.username, `Access level changed from ${oldLevel} to ${newLevel}`);
+          user.accessLevel = newLevel;
-      }
+          logAction(
-      return user;
+            user.username,
-    }));
+            `Access level changed from ${oldLevel} to ${newLevel}`
+          );
+        }
+        return user;
+      })
+    );
   };
 
   // Ajustement des points d'un utilisateur (fonction issue de script.js)
   const handleAdjustPoints = (userId) => {
     const pointsToAdd = parseInt(pointsInput[userId]) || 0;
-    setUsers(users.map(user => {
+    setUsers(
-      if (user.id === userId) {
+      users.map((user) => {
-        user.points += pointsToAdd;
+        if (user.id === userId) {
-        logAction(user.username, `Points adjusted by ${pointsToAdd}`);
+          user.points += pointsToAdd;
-      }
+          logAction(user.username, `Points adjusted by ${pointsToAdd}`);
-      return user;
+        }
-    }));
+        return user;
+      })
+    );
     // Réinitialiser la valeur de l'input pour cet utilisateur
-    setPointsInput({ ...pointsInput, [userId]: '' });
+    setPointsInput({ ...pointsInput, [userId]: "" });
   };
 
   // Fonction de journalisation des actions (définie dans script.js)
@@ -111,12 +118,12 @@ function User() {
   };
 
   return (
-    <div style={{ display: 'flex', minHeight: '100vh' }}>
+    <div style={{ display: "flex", minHeight: "100vh" }}>
       <Sidebar />
       <main style={styles.mainContent}>
         <section style={styles.userManagement}>
-        <h1>User Management</h1>
+          <h1>User Management</h1>
-        <p>Manage users from this panel.</p>
+          <p>Manage users from this panel.</p>
           {/* Formulaire d'ajout d'utilisateur */}
           <form style={styles.userForm} onSubmit={handleAddUser}>
             <input
@@ -137,7 +144,9 @@ function User() {
               onChange={(e) => setEmail(e.target.value)}
               required
             />
-            <button style={styles.button} type="submit">Add User</button>
+            <button style={styles.button} type="submit">
+              Add User
+            </button>
           </form>
           {/* Tableau des utilisateurs */}
           <table style={styles.userTable}>
@@ -151,7 +160,7 @@ function User() {
               </tr>
             </thead>
             <tbody>
-              {users.map(user => (
+              {users.map((user) => (
                 <tr key={user.id}>
                   <td style={styles.thTd}>{user.username}</td>
                   <td style={styles.thTd}>{user.email}</td>
@@ -159,8 +168,10 @@ function User() {
                     {/* Menu déroulant pour changer le niveau d'accès */}
                     <select
                       value={user.accessLevel}
-                      onChange={(e) => handleChangeAccessLevel(user.id, e.target.value)}
+                      onChange={(e) =>
-                      style={{ padding: '5px', borderRadius: '5px' }}
+                        handleChangeAccessLevel(user.id, e.target.value)
+                      }
+                      style={{ padding: "5px", borderRadius: "5px" }}
                     >
                       <option value="Admin">Admin</option>
                       <option value="User">User</option>
@@ -173,15 +184,22 @@ function User() {
                     <input
                       type="number"
                       min="0"
-                      style={{ width: '60px', marginLeft: '10px' }}
+                      style={{ width: "60px", marginLeft: "10px" }}
                       placeholder="Adjust"
-                      value={pointsInput[user.id] || ''}
+                      value={pointsInput[user.id] || ""}
                       onChange={(e) =>
-                        setPointsInput({ ...pointsInput, [user.id]: e.target.value })
+                        setPointsInput({
+                          ...pointsInput,
+                          [user.id]: e.target.value,
+                        })
                       }
                     />
                     <button
-                      style={{ ...styles.button, padding: '5px 10px', marginLeft: '5px' }}
+                      style={{
+                        ...styles.button,
+                        padding: "5px 10px",
+                        marginLeft: "5px",
+                      }}
                       onClick={() => handleAdjustPoints(user.id)}
                     >
                       Adjust
@@ -190,7 +208,11 @@ function User() {
                   <td style={styles.thTd}>
                     {/* Bouton de suppression */}
                     <button
-                      style={{ ...styles.button, backgroundColor: '#dc3545', padding: '5px 10px' }}
+                      style={{
+                        ...styles.button,
+                        backgroundColor: "#dc3545",
+                        padding: "5px 10px",
+                      }}
                       onClick={() => handleDeleteUser(user.id)}
                     >
                       Delete
@@ -202,7 +224,7 @@ function User() {
           </table>
         </section>
         {/* Tableau des logs */}
-        <section className="user-logs" style={{ marginTop: '40px' }}>
+        <section className="user-logs" style={{ marginTop: "40px" }}>
           <h2>Login History and Action Logs</h2>
           <table style={styles.userTable}>
             <thead>
@@ -213,7 +235,7 @@ function User() {
               </tr>
             </thead>
             <tbody>
-              {logs.map(log => (
+              {logs.map((log) => (
                 <tr key={log.id}>
                   <td style={styles.thTd}>{log.username}</td>
                   <td style={styles.thTd}>{log.action}</td>

projet_admin/css/styles.css

@@ -1,256 +0,0 @@
-/* General Reset */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: Arial, sans-serif;
-    background-color: #f4f4f4;
-}
-
-/* Container */
-.container {
-    display: flex;
-    height: 100vh;
-}
-
-/* Sidebar */
-.sidebar h2 {
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.sidebar nav ul {
-    list-style: none;
-}
-
-.sidebar nav ul li {
-    margin: 15px 0;
-}
-
-.sidebar nav ul li a {
-    color: #fff;
-    text-decoration: none;
-    padding: 10px;
-    display: block;
-    border-radius: 5px;
-}
-
-.sidebar nav ul li a:hover {
-    background-color: #555;
-}
-
-/* Main Content */
-.main-content {
-    flex-grow: 1;
-    padding: 20px;
-    background-color: #fff;
-    overflow-y: auto;
-}
-
-header {
-    margin-bottom: 20px;
-}
-
-header h1 {
-    margin-bottom: 10px;
-}
-
-/* Cards Section */
-.cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 20px;
-}
-
-.card {
-    background: #e3e3e3;
-    padding: 20px;
-    border-radius: 8px;
-    text-align: center;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-.card h3 {
-    margin-bottom: 10px;
-}
-
-/* Media Query for Responsive Design */
-@media (max-width: 768px) {
-    .sidebar {
-        width: 70px;
-        text-align: center;
-    }
-    
-    .sidebar h2 {
-        font-size: 16px;
-    }
-    
-    .sidebar nav ul li {
-        margin: 10px 0;
-    }
-
-    .sidebar nav ul li a {
-        padding: 5px;
-    }
-    
-    .main-content {
-        padding: 10px;
-    }
-}
-
-/* User Management Section */
-.user-management {
-    margin-top: 20px;
-}
-
-.user-form {
-    display: grid;
-    grid-template-columns: 1fr 1fr auto;
-    gap: 10px;
-    margin-bottom: 20px;
-}
-
-.user-form input {
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-}
-
-.user-form button {
-    padding: 10px;
-    background-color: #28a745;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.user-form button:hover {
-    background-color: #218838;
-}
-
-.user-table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.user-table th, .user-table td {
-    padding: 10px;
-    border: 1px solid #ccc;
-    text-align: left;
-}
-
-.user-table th {
-    background-color: #f4f4f4;
-}
-
-.action-button {
-    background-color: #dc3545;
-    color: white;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.action-button:hover {
-    background-color: #c82333;
-}
-
-/* Add this to your existing CSS */
-
-/* User Management Section */
-.user-management {
-    margin-top: 20px;
-}
-
-.user-form {
-    display: grid;
-    grid-template-columns: 1fr 1fr auto;
-    gap: 10px;
-    margin-bottom: 20px;
-}
-
-.user-form input {
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-}
-
-.user-form button {
-    padding: 10px;
-    background-color: #28a745;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.user-form button:hover {
-    background-color: #218838;
-}
-
-.user-table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.user-table th, .user-table td {
-    padding: 10px;
-    border: 1px solid #ccc;
-    text-align: left;
-}
-
-.user-table th {
-    background-color: #f4f4f4;
-}
-
-.access-level {
-    margin-right: 10px;
-}
-
-.assign-button, .revoke-button, .adjust-points-button {
-    background-color: #007bff;
-    color: white;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.assign-button:hover {
-    background-color: #0069d9;
-}
-
-.revoke-button {
-    background-color: #dc3545;
-}
-
-.revoke-button:hover {
-    background-color: #c82333;
-}
-
-/* Add this to your existing CSS */
-
-/* User Logs Section */
-.user-logs {
-    margin-top: 40px;
-}
-
-.log-table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.log-table th, .log-table td {
-    padding: 10px;
-    border: 1px solid #ccc;
-    text-align: left;
-}
-
-.log-table th {
-    background-color: #f4f4f4;
-}

projet_admin/http/User.php

@@ -1,132 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="../css/styles.css">
-    <title>User</title>
-    <style>
-        /* Add this to your existing CSS */
-
-        /* User Management Section */
-        .user-management {
-            margin-top: 20px;
-        }
-
-        .user-form {
-            display: grid;
-            grid-template-columns: 1fr 1fr auto;
-            gap: 10px;
-            margin-bottom: 20px;
-        }
-
-        .user-form input {
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-        }
-
-        .user-form button {
-            padding: 10px;
-            background-color: #28a745;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-
-        .user-form button:hover {
-            background-color: #218838;
-        }
-
-        .user-table {
-            width: 100%;
-            border-collapse: collapse;
-        }
-
-        .user-table th,
-        .user-table td {
-            padding: 10px;
-            border: 1px solid #ccc;
-            text-align: left;
-        }
-
-        .user-table th {
-            background-color: #f4f4f4;
-        }
-
-        .access-level {
-            margin-right: 10px;
-        }
-
-        .assign-button,
-        .revoke-button {
-            background-color: #007bff;
-            color: white;
-            border: none;
-            padding: 5px 10px;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-
-        .assign-button:hover {
-            background-color: #0069d9;
-        }
-
-        .revoke-button {
-            background-color: #dc3545;
-        }
-
-        .revoke-button:hover {
-            background-color: #c82333;
-        }
-    </style>
-</head>
-<?php include("sidebar.php"); ?>
-
-<body>
-    <main class="main-content">
-        <header>
-            <h1>User Management</h1>
-            <p>Manage users from this panel.</p>
-        </header>
-        <section class="user-management">
-            <form id="userForm" class="user-form">
-                <input type="text" id="username" placeholder="Username" required>
-                <input type="email" id="email" placeholder="Email" required>
-                <button type="submit">Add User</button>
-            </form>
-            <table class="user-table">
-                <thead>
-                    <tr>
-                        <th>Username</th>
-                        <th>Email</th>
-                        <th>Access Level</th>
-                        <th>Points</th>
-                        <th>Actions</th>
-                    </tr>
-                </thead>
-                <tbody id="userList">
-                </tbody>
-            </table>
-        </section>
-        <section class="user-logs">
-            <h2>Login History and Action Logs</h2>
-            <table class="log-table">
-                <thead>
-                    <tr>
-                        <th>Username</th>
-                        <th>Action</th>
-                        <th>Timestamp</th>
-                    </tr>
-                </thead>
-                <tbody id="logList">
-                </tbody>
-            </table>
-        </section>
-    </main>
-</body>
-<script src="../js/script.js"></script>
-
-</html>

projet_admin/http/frontend.php

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Admin Dashboard - User Management</title>
-    <link rel="stylesheet" href="../css/styles.css">
-</head>
-<?php include("sidebar.php"); ?>
-
-<body>
-    <nav id="navigation"></nav>
-    <script src="../js/script.js"></script>
-</body>
-
-</html>

projet_admin/http/index.js

@@ -1,10 +0,0 @@
-import { createRoot } from 'react-dom/client';
-
-function NavigationBar() {
-  // TODO: Actually implement a navigation bar
-  return <h1>Hello from React!</h1>;
-}
-
-const domNode = document.getElementById('navigation');
-const root = createRoot(domNode);
-root.render(<NavigationBar />);

projet_admin/http/sidebar.php

@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><i class="fas fa-head-side-brain"></i></title>
-    <link rel="stylesheet" href="../css/styles.css">
-    <style>
-        body {
-            display: flex;
-        }
-
-        main {
-            flex-grow: 1; /* Permet au contenu principal de prendre tout l'espace restant */
-            padding: 20px;
-        }
-        html,
-        body {
-            height: 100%;
-            margin: 0;
-            padding: 0;
-        }
-
-        .sidebar {
-            width: 250px;
-            background-color: #333;
-            color: #fff;
-            padding: 20px;
-            height: 100vh;
-            /* Sidebar prend toute la hauteur visible de l'écran */
-            box-sizing: border-box;
-            /* inclut padding dans la largeur/hauteur */
-        }
-    </style>
-</head>
-
-<body>
-    <aside class="sidebar">
-        <h2>Admin Panel</h2>
-        <nav>
-            <ul>
-                <li><a href="frontend.php">Dashboard</a></li>
-                <li><a href="User.php">Users</a></li>
-                <li><a href="#">Settings</a></li>
-                <li><a href="#">Reports</a></li>
-            </ul>
-        </nav>
-    </aside>
-</body>
-
-</html>

projet_admin/js/script.js

@@ -1,106 +0,0 @@
-// script.js
-
-let users = [];
-let logs = [];
-
-document.getElementById('userForm').addEventListener('submit', function(event) {
-    event.preventDefault();
-    
-    const username = document.getElementById('username').value;
-    const email = document.getElementById('email').value;
-    
-    const user = {
-        id: Date.now(),
-        username: username,
-        email: email,
-        accessLevel: 'User',  // Default access level
-        points: 0,             // Default points
-        logins: []             // Array to track login timestamps     
-    };
-    
-    users.push(user);
-    logAction(username, 'User added');
-    renderUserList();
-    this.reset();  // Clear the form
-});
-
-function renderUserList() {
-    const userList = document.getElementById('userList');
-    userList.innerHTML = '';  // Clear the list before rendering
-    
-    users.forEach((user) => {
-        const row = document.createElement('tr');
-        row.innerHTML = `
-            <td>${user.username}</td>
-            <td>${user.email}</td>
-            <td>
-                <select class="access-level" onchange="changeAccessLevel(${user.id}, this.value)">
-                    <option value="Admin" ${user.accessLevel === 'Admin' ? 'selected' : ''}>Admin</option>
-                    <option value="User" ${user.accessLevel === 'User' ? 'selected' : ''}>User</option>
-                    <option value="Guest" ${user.accessLevel === 'Guest' ? 'selected' : ''}>Guest</option>
-                </select>
-            </td>
-            <td>
-                <span>${user.points}</span>
-                <input type="number" min="0" id="points-${user.id}" style="width:60px" placeholder="Adjust" />
-                <button class="adjust-points-button" onclick="adjustPoints(${user.id})">Adjust</button>
-            </td>
-            <td>
-                <button class="action-button" onclick="deleteUser(${user.id})">Delete</button>
-            </td>
-        `;
-        userList.appendChild(row);
-    });
-}
-
-function deleteUser(userId) {
-    const user = users.find(user => user.id === userId);
-    if (user) {
-        logAction(user.username, 'User deleted');
-    }
-    users = users.filter(user => user.id !== userId);
-    renderUserList();
-}
-
-function changeAccessLevel(userId, newLevel) {
-    const user = users.find(user => user.id === userId);
-    if (user) {
-        const oldLevel = user.accessLevel;
-        user.accessLevel = newLevel;
-        logAction(user.username, `Access level changed from ${oldLevel} to ${newLevel}`);
-    }
-}
-
-function adjustPoints(userId) {
-    const inputField = document.getElementById(`points-${userId}`);
-    const pointsToAdd = parseInt(inputField.value) || 0;
-
-    const user = users.find(user => user.id === userId);
-    if (user) {
-        user.points += pointsToAdd;  // Adjust points based on the input value
-        logAction(user.username, `Points adjusted by ${pointsToAdd}`);
-        inputField.value = '';  // Clear the input
-        renderUserList();  // Re-render the user list
-    }
-}
-
-function logAction(username, action) {
-    const timestamp = new Date().toLocaleString();
-    logs.push({username, action, timestamp});
-    renderLogList();
-}
-
-function renderLogList() {
-    const logList = document.getElementById('logList');
-    logList.innerHTML = '';  // Clear the list before rendering
-
-    logs.forEach(log => {
-        const row = document.createElement('tr');
-        row.innerHTML = `
-            <td>${log.username}</td>
-            <td>${log.action}</td>
-            <td>${log.timestamp}</td>
-        `;
-        logList.appendChild(row);
-    });
-}