From e2f9f8e35222b94bdc3957c4c8604f2de1109b80 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Thu, 3 Oct 2024 21:02:31 +0000 Subject: [PATCH] start implement of admin page --- admin.html | 28 ++++---- scripts/admin.js | 183 ++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 195 insertions(+), 16 deletions(-) diff --git a/admin.html b/admin.html index a2f750d..8e04032 100644 --- a/admin.html +++ b/admin.html @@ -1,18 +1,18 @@ - + proxmox - dashboard - + - - -
+ + +

proxmox

@@ -24,14 +24,14 @@ Logout
-
-

Cluster Administration

+
+

Admin

Users

-
@@ -41,15 +41,15 @@

Admin

Actions

-
+

Groups

-
@@ -58,9 +58,9 @@

Members

Actions

-
+
- + \ No newline at end of file diff --git a/scripts/admin.js b/scripts/admin.js index cdc0990..b9bec1e 100644 --- a/scripts/admin.js +++ b/scripts/admin.js @@ -1,8 +1,187 @@ -import { setTitleAndHeader, setAppearance } from "./utils.js"; +import { setTitleAndHeader, setAppearance, requestAPI, goToPage } from "./utils.js"; window.addEventListener("DOMContentLoaded", init); -function init () { +async function init () { setAppearance(); setTitleAndHeader(); + + const cookie = document.cookie; + if (cookie === "") { + goToPage("login.html"); + } + + document.querySelector("#user-add").addEventListener("click", handleUserAdd); + document.querySelector("#group-add").addEventListener("click", handleGroupAdd); + + await getUsers(); + await getGroups(); +} + +async function getUsers () { + const users = (await requestAPI("/access/users")).users; + const usersContainer = document.querySelector("#users-container"); + for (const user of Object.keys(users)) { + const newUserCard = document.createElement("user-card"); + users[user].username = user; + newUserCard.data = users[user]; + usersContainer.append(newUserCard); + } +} + +async function getGroups () { + const groups = (await requestAPI("/access/groups")).groups; + const groupsContainer = document.querySelector("#groups-container"); + for (const group of Object.keys(groups)) { + const newGroupCard = document.createElement("group-card"); + groups[group].groupname = group; + newGroupCard.data = groups[group]; + groupsContainer.append(newGroupCard); + } +} + +class UserCard extends HTMLElement { + constructor () { + super(); + this.attachShadow({ mode: "open" }); + this.shadowRoot.innerHTML = ` + + + + +
+

+

+

+

+ + +
+
+ `; + + const configButton = this.shadowRoot.querySelector("#config-btn"); + configButton.onclick = this.handleConfigButton.bind(this); + + const deleteButton = this.shadowRoot.querySelector("#delete-btn"); + deleteButton.onclick = this.handleDeleteButton.bind(this); + } + + get data () { + return { + username: this.username, + groups: this.groups, + admin: this.admin + }; + } + + set data (data) { + this.username = data.username; + this.groups = this.#getGroupsFromAttribute(data.attributes.memberOf); + this.admin = data.cluster.admin; + this.update(); + } + + #getGroupsFromAttribute (attribute) { + return Array.from(attribute, (e) => e.split("cn=")[1].split(",")[0]); + } + + update () { + const nameParagraph = this.shadowRoot.querySelector("#user-name"); + nameParagraph.innerText = this.username; + + const groupsParagraph = this.shadowRoot.querySelector("#user-groups"); + groupsParagraph.innerText = `${this.groups.toString()}`; + + const adminParagraph = this.shadowRoot.querySelector("#user-admin"); + adminParagraph.innerText = this.admin; + } + + handleConfigButton () { + goToPage("user.html", { username: this.username }); + } + + handleDeleteButton () { + // TODO + } +} + +class GroupCard extends HTMLElement { + constructor () { + super(); + this.attachShadow({ mode: "open" }); + this.shadowRoot.innerHTML = ` + + + + +
+

+

+

+ + +
+
+ `; + + const configButton = this.shadowRoot.querySelector("#config-btn"); + configButton.onclick = this.handleConfigButton.bind(this); + + const deleteButton = this.shadowRoot.querySelector("#delete-btn"); + deleteButton.onclick = this.handleDeleteButton.bind(this); + } + + get data () { + return { + groupname: this.groupname, + members: this.members + }; + } + + set data (data) { + this.groupname = data.groupname; + this.members = this.#getMembersFromAttribute(data.attributes.member); + this.update(); + } + + #getMembersFromAttribute (attribute) { + const filteredGroups = attribute.filter(e => e !== ""); + return Array.from(filteredGroups, (e) => e.split("uid=")[1].split(",")[0]); + } + + update () { + const nameParagraph = this.shadowRoot.querySelector("#group-name"); + nameParagraph.innerText = this.groupname; + + const membersParagraph = this.shadowRoot.querySelector("#group-members"); + membersParagraph.innerText = `${this.members.toString()}`; + } + + handleConfigButton () { + // TODO + } + + handleDeleteButton () { + // TODO + } +} + +customElements.define("user-card", UserCard); +customElements.define("group-card", GroupCard); + +function handleUserAdd () { + // TODO +} + +function handleGroupAdd () { + // TODO }