mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.8 KiB
HTML
111 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="description" content="User Management">
|
|
<title>{{ $t('nav.users') }}</title>
|
|
<style>
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: #fff;
|
|
box-shadow: var(--shadow-sm);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
th, td {
|
|
text-align: left;
|
|
padding: 12px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
th {
|
|
background-color: var(--bg-color-tertiary);
|
|
font-weight: 600;
|
|
}
|
|
.btn-action {
|
|
padding: 6px 12px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
border: none;
|
|
margin-right: 5px;
|
|
}
|
|
.btn-edit {
|
|
background-color: var(--color-info);
|
|
color: white;
|
|
}
|
|
.btn-delete {
|
|
background-color: var(--color-danger);
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-header">
|
|
<h1>{{ $t('nav.users') }}</h1>
|
|
<button class="btn-action btn-edit" @click="createUser">Create User</button>
|
|
</div>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Username</th>
|
|
<th>Email</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="u in users">
|
|
<td>{{ u.id }}</td>
|
|
<td>{{ u.username }}</td>
|
|
<td>{{ u.email }}</td>
|
|
<td>{{ u.status || 'Active' }}</td>
|
|
<td>
|
|
<button class="btn-action btn-edit" @click="editUser(u)">Edit</button>
|
|
<button class="btn-action btn-delete" @click="deleteUser(u.id)">Delete</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</body>
|
|
<script setup>
|
|
users = [];
|
|
|
|
loadUsers = async () => {
|
|
try {
|
|
const res = await $axios.get('/api/users');
|
|
users = res || [];
|
|
} catch (e) {
|
|
$message.error(e.message);
|
|
}
|
|
};
|
|
|
|
createUser = () => {
|
|
$message.info("Create User Modal coming soon");
|
|
};
|
|
|
|
editUser = (u) => {
|
|
$message.info("Edit User " + u.username);
|
|
};
|
|
|
|
deleteUser = async (id) => {
|
|
try {
|
|
await $message.confirm("Delete user?");
|
|
await $axios.delete(`/api/users/${id}`);
|
|
$message.success("Deleted");
|
|
loadUsers();
|
|
} catch (e) {
|
|
// Cancelled
|
|
}
|
|
};
|
|
</script>
|
|
<script>
|
|
$data.loadUsers();
|
|
</script>
|
|
</html>
|