100 lines
2.7 KiB
HTML
100 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>User Management</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; }
|
|
.container { width: 80%; margin: auto; }
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
|
|
th { background-color: #f2f2f2; }
|
|
.form-input { margin-bottom: 10px; }
|
|
label { display: block; }
|
|
input[type="text"], input[type="password"] { width: 100%; padding: 8px; }
|
|
button { padding: 8px 16px; margin-top: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h2>User Management</h2>
|
|
<div id="user-form">
|
|
<div class="form-input">
|
|
<label for="username">Username:</label>
|
|
<input type="text" id="username" name="username">
|
|
</div>
|
|
<div class="form-input">
|
|
<label for="password">Password:</label>
|
|
<input type="password" id="password" name="password">
|
|
</div>
|
|
<div class="form-input">
|
|
<label for="description">Description:</label>
|
|
<input type="text" id="description" name="description">
|
|
</div>
|
|
<button onclick="createUser()">Create User</button>
|
|
</div>
|
|
<table id="users-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Username</th>
|
|
<th>Password</th>
|
|
<th>Description</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- User entries will be dynamically inserted here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<script>
|
|
// Function to make AJAX call to the RESTful service
|
|
function ajaxCall(method, url, data, callback) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open(method, url, true);
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState === 4 && xhr.status === 200) {
|
|
callback(JSON.parse(xhr.responseText));
|
|
}
|
|
};
|
|
xhr.send(JSON.stringify(data));
|
|
}
|
|
|
|
// Function to create a new user
|
|
function createUser() {
|
|
var username = document.getElementById('username').value;
|
|
var password = document.getElementById('password').value;
|
|
var description = document.getElementById('description').value;
|
|
var data = { username: username, password: password, description: description };
|
|
ajaxCall('POST', 'http://example.com/api/users', data, function(response) {
|
|
// Handle response
|
|
console.log(response);
|
|
});
|
|
}
|
|
|
|
// Function to edit a user
|
|
function editUser(userId) {
|
|
// Get user data from form
|
|
// Make AJAX call to update user
|
|
}
|
|
|
|
// Function to delete a user
|
|
function deleteUser(userId) {
|
|
// Make AJAX call to delete user
|
|
}
|
|
|
|
// Function to fetch and display users
|
|
function fetchUsers() {
|
|
// Make AJAX call to get users
|
|
// Populate users table
|
|
}
|
|
|
|
// Initial fetch of users
|
|
fetchUsers();
|
|
</script>
|
|
</body>
|
|
</html>
|