Partie admin
This commit is contained in:
Arcade69
parent
ffa19ba1ba
commit
f9a22d418b
6
package-lock.json
generated
Normal file
6
package-lock.json
generated
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "Projet-Dev-Web-Ing1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
256
projet_admin/css/styles.css
Normal file
256
projet_admin/css/styles.css
Normal file
@ -0,0 +1,256 @@
|
||||
/* 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;
|
||||
}
|
||||
0
projet_admin/database/logs.json
Normal file
0
projet_admin/database/logs.json
Normal file
0
projet_admin/database/points.json
Normal file
0
projet_admin/database/points.json
Normal file
0
projet_admin/database/users.json
Normal file
0
projet_admin/database/users.json
Normal file
132
projet_admin/http/User.php
Normal file
132
projet_admin/http/User.php
Normal file
@ -0,0 +1,132 @@
|
||||
<!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>
|
||||
17
projet_admin/http/frontend.php
Normal file
17
projet_admin/http/frontend.php
Normal file
@ -0,0 +1,17 @@
|
||||
<!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>
|
||||
10
projet_admin/http/index.js
Normal file
10
projet_admin/http/index.js
Normal file
@ -0,0 +1,10 @@
|
||||
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 />);
|
||||
52
projet_admin/http/sidebar.php
Normal file
52
projet_admin/http/sidebar.php
Normal file
@ -0,0 +1,52 @@
|
||||
<!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>
|
||||
106
projet_admin/js/script.js
Normal file
106
projet_admin/js/script.js
Normal file
@ -0,0 +1,106 @@
|
||||
// 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);
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user