Admin page added - create/delete users, backup and restore database
This commit is contained in:
parent
487aa5154e
commit
cd394ca1ee
|
@ -0,0 +1,15 @@
|
|||
/* Admin.css */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f0f0f0;
|
||||
}
|
|
@ -3,6 +3,8 @@ import React, { useState, useEffect, useRef } from 'react';
|
|||
import axios from 'axios';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
|
||||
import './Admin.css'; // Import the CSS file
|
||||
|
||||
|
||||
export default function Admin() {
|
||||
const [users, setUsers] = useState([]);
|
||||
|
@ -103,24 +105,52 @@ export default function Admin() {
|
|||
return (
|
||||
<div>
|
||||
<h1>Admin</h1>
|
||||
<ul>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map(user => (
|
||||
<li key={user.ID}>
|
||||
{user.username}
|
||||
<tr key={user.ID}>
|
||||
<td>{user.username}</td>
|
||||
<td>
|
||||
<button onClick={() => handleDeleteUser(user.ID)}>Delete</button>
|
||||
</li>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</ul>
|
||||
</tbody>
|
||||
</table>
|
||||
<form onSubmit={handleCreateUser}>
|
||||
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" />
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
|
||||
<button type="submit">Create User</button>
|
||||
</form>
|
||||
<button onClick={handleBackupDatabase}>Backup Database</button>
|
||||
<form onSubmit={handleRestoreDatabase}>
|
||||
<input type="file" ref={(fileInputRef)}/>
|
||||
<button type="submit">Restore Database</button>
|
||||
</form>
|
||||
<h2>Database</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Action</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Backup</td>
|
||||
<td>
|
||||
<button onClick={handleBackupDatabase}>Download Backup</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Restore</td>
|
||||
<td>
|
||||
<input type="file" ref={fileInputRef} />
|
||||
<button onClick={handleRestoreDatabase}>Upload and Restore</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)};
|
Loading…
Reference in New Issue