Label editing

frontend/static/admin.js

@@ -1,5 +1,6 @@
 (() => {
 const pluginList = document.querySelector('#plugin-list');
+const adminLabelList = document.querySelector('#admin-label-list');
 const userList = document.querySelector('#user-list');
 const userForm = document.querySelector('#user-form');
 const adminControls = document.querySelector('#admin-controls');
@@ -31,6 +32,31 @@ function renderPlugins(plugins) {
   }));
 }
 
+function renderLabels(labels) {
+  adminLabelList.replaceChildren(...labels.map((label) => {
+    const row = document.createElement('div');
+    row.className = 'plugin-row';
+    const text = document.createElement('span');
+    text.textContent = `${label.name}${label.creator ? ` (${label.creator})` : ' (default)'}`;
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'danger-button';
+    button.textContent = 'Delete';
+    button.addEventListener('click', async () => {
+      const response = await fetch(`/api/admin/labels/${label.id}`, {method: 'DELETE', headers: authHeaders()});
+      if (response.ok) loadLabels();
+    });
+    row.append(text, button);
+    return row;
+  }));
+}
+
+async function loadLabels() {
+  const response = await fetch('/api/admin/labels', {headers: authHeaders()});
+  if (!response.ok) throw new Error('Could not load labels');
+  renderLabels(await response.json());
+}
+
 function renderUsers(users) {
   userList.replaceChildren(...users.map((user) => {
     const row = document.createElement('div');
@@ -95,7 +121,7 @@ async function loadAdminState() {
     return;
   }
 
-  await Promise.all([loadUsers(), loadPlugins()]);
+  await Promise.all([loadUsers(), loadPlugins(), loadLabels()]);
   showAdminState(true);
 }
 
@@ -174,5 +200,6 @@ loadAdminState().catch((error) => {
   adminAuthNotice.classList.remove('hidden');
   userList.textContent = '';
   pluginList.textContent = '';
+  adminLabelList.textContent = '';
 });
 })();

frontend/static/auth-header.js

@@ -1,6 +1,7 @@
 (() => {
   const loginButton = document.querySelector('#auth-login-button');
   const profileLink = document.querySelector('#auth-profile-link');
+  const labelsLink = document.querySelector('#auth-labels-link');
   const adminLink = document.querySelector('#auth-admin-link');
   const session = document.querySelector('#auth-session');
   const username = document.querySelector('#auth-username');
@@ -10,7 +11,7 @@
   const menuToggle = document.querySelector('.menu-toggle');
   const logoutButton = document.querySelector('#logout-button');
 
-  if (!loginButton || !profileLink || !adminLink || !session || !username || !menu || !menuToggle || !logoutButton) return;
+  if (!loginButton || !profileLink || !labelsLink || !adminLink || !session || !username || !menu || !menuToggle || !logoutButton) return;
 
   menuToggle.addEventListener('click', () => {
     const isOpen = !menu.classList.contains('hidden');
@@ -21,6 +22,7 @@
   function showSignedOut() {
     loginButton.classList.remove('hidden');
     profileLink.classList.add('hidden');
+    labelsLink.classList.add('hidden');
     adminLink.classList.add('hidden');
     session.classList.add('hidden');
     logoutButton.classList.add('hidden');
@@ -29,6 +31,7 @@
   function showSignedIn(user) {
     loginButton.classList.add('hidden');
     profileLink.classList.remove('hidden');
+    labelsLink.classList.remove('hidden');
     adminLink.classList.toggle('hidden', !user.is_admin);
     session.classList.remove('hidden');
     logoutButton.classList.remove('hidden');