likwid/frontend/src/pages/admin/community-creators.astro

---
export const prerender = false;
import Layout from '../../layouts/Layout.astro';
import AdminNav from '../../components/AdminNav.astro';
import { API_BASE as apiBase } from '../../lib/api';
---

<Layout title="Admin - Community Creators">
  <div class="admin-container">
    <AdminNav currentPage="/admin/community-creators" />

    <main class="admin-content">
      <header class="ui-page-header">
        <div class="ui-page-title">
          <h1>Community Creators</h1>
          <p class="ui-subtitle">Grant who can create communities when the platform is restricted</p>
        </div>
      </header>

      <div id="loading" class="loading">Loading...</div>
      <div id="error" class="error-box" style="display: none;"></div>
      <div id="success" class="success-box" style="display: none;"></div>

      <section class="ui-card ui-card-soft ui-card-pad-md" style="margin-bottom: 1.25rem;">
        <h2 style="margin-top: 0;">Assign creator role</h2>
        <form id="assign-form" class="ui-form" style="--ui-form-control-max-width: 420px; --ui-form-group-mb: 0.75rem;">
          <div class="form-group">
            <label for="user_id">User</label>
            <select id="user_id" name="user_id" required></select>
            <small class="help-text">Select a user to grant the Community Creator platform role.</small>
          </div>
          <div class="form-actions">
            <button class="ui-btn ui-btn-primary" type="submit">Grant role</button>
          </div>
        </form>
      </section>

      <section class="ui-card ui-card-soft ui-card-pad-md">
        <h2 style="margin-top: 0;">Current community creators</h2>
        <div id="creators" class="list">
          <p class="loading-small">Loading...</p>
        </div>
      </section>
    </main>
  </div>
</Layout>

<style>
  .admin-container {
    display: flex;
    min-height: calc(100vh - 60px);
  }

  .admin-content {
    flex: 1;
    padding: 2rem;
    max-width: 1000px;
  }

  .loading {
    color: var(--color-text-muted);
    padding: 2rem;
    text-align: center;
  }

  .error-box {
    background: color-mix(in srgb, var(--color-error) 18%, transparent);
    color: var(--color-error);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
  }

  .success-box {
    background: color-mix(in srgb, var(--color-success) 18%, transparent);
    color: var(--color-success);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
  }

  .list {
    display: grid;
    gap: 0.75rem;
  }

  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }

  .meta {
    color: var(--color-text-muted);
    font-size: 0.875rem;
  }
</style>

<script define:vars={{ apiBase }}>
  (function() {
    const token = localStorage.getItem('token');
    if (!token) {
      window.location.href = '/login?redirect=/admin/community-creators';
      return;
    }

    const loadingEl = document.getElementById('loading');
    const errorEl = document.getElementById('error');
    const successEl = document.getElementById('success');
    const creatorsEl = document.getElementById('creators');
    const assignForm = document.getElementById('assign-form');
    const userSelect = document.getElementById('user_id');

    let creatorRoleId = null;

    function showError(msg) {
      if (!errorEl) return;
      errorEl.textContent = msg;
      errorEl.style.display = 'block';
    }

    function showSuccess(msg) {
      if (!successEl) return;
      successEl.textContent = msg;
      successEl.style.display = 'block';
      setTimeout(() => {
        successEl.style.display = 'none';
        successEl.textContent = '';
      }, 2500);
    }

    function clearError() {
      if (!errorEl) return;
      errorEl.style.display = 'none';
      errorEl.textContent = '';
    }

    function escapeHtml(value) {
      return String(value || '').replace(/[&<>"']/g, function(ch) {
        switch (ch) {
          case '&': return '&amp;';
          case '<': return '&lt;';
          case '>': return '&gt;';
          case '"': return '&quot;';
          case "'": return '&#39;';
          default: return ch;
        }
      });
    }

    async function fetchJson(url, init) {
      const res = await fetch(url, init);
      if (res.status === 401) {
        window.location.href = '/login?redirect=/admin/community-creators';
        return null;
      }
      const text = await res.text();
      let json = null;
      try { json = text ? JSON.parse(text) : null; } catch (e) {}
      if (!res.ok) {
        throw new Error((json && json.error) || text || 'Request failed');
      }
      return json;
    }

    async function loadRoles() {
      const roles = await fetchJson(`${apiBase}/api/roles`, {
        headers: { 'Authorization': `Bearer ${token}` },
      });

      const found = (roles || []).find(r => r && r.name === 'community_creator');
      if (!found) {
        throw new Error('community_creator role not found (migration not applied yet?)');
      }
      creatorRoleId = found.id;
    }

    async function loadUsers() {
      const users = await fetchJson(`${apiBase}/api/users`, {
        headers: { 'Authorization': `Bearer ${token}` },
      });

      if (!userSelect) return;
      userSelect.innerHTML = (users || []).map(u => {
        const label = (u.display_name ? `${u.display_name} (@${u.username})` : `@${u.username}`);
        return `<option value="${escapeHtml(u.id)}">${escapeHtml(label)}</option>`;
      }).join('');
    }

    async function loadCreators() {
      if (!creatorRoleId) return;
      const list = await fetchJson(`${apiBase}/api/roles/${creatorRoleId}/users`, {
        headers: { 'Authorization': `Bearer ${token}` },
      });

      if (!creatorsEl) return;

      if (!list || list.length === 0) {
        creatorsEl.innerHTML = '<p class="meta">No community creators assigned yet.</p>';
        return;
      }

      creatorsEl.innerHTML = list.map(u => {
        const label = (u.display_name ? `${u.display_name} (@${u.username})` : `@${u.username}`);
        return `
          <div class="row ui-card ui-card-pad-md ui-card-soft">
            <div>
              <div><strong>${escapeHtml(label)}</strong></div>
              <div class="meta">User id: ${escapeHtml(u.id)}</div>
            </div>
            <button class="ui-btn ui-btn-danger js-remove" type="button" data-user-id="${escapeHtml(u.id)}">Remove</button>
          </div>
        `;
      }).join('');

      creatorsEl.querySelectorAll('.js-remove').forEach(btn => {
        btn.addEventListener('click', async () => {
          const userId = btn.getAttribute('data-user-id');
          if (!userId) return;
          try {
            clearError();
            await fetchJson(`${apiBase}/api/roles/${creatorRoleId}/users/${userId}`, {
              method: 'DELETE',
              headers: { 'Authorization': `Bearer ${token}` },
            });
            showSuccess('Role removed.');
            await loadCreators();
          } catch (e) {
            showError(e && e.message ? e.message : String(e));
          }
        });
      });
    }

    assignForm?.addEventListener('submit', async (e) => {
      e.preventDefault();
      if (!creatorRoleId) return;
      if (!(userSelect instanceof HTMLSelectElement)) return;

      try {
        clearError();
        await fetchJson(`${apiBase}/api/roles/${creatorRoleId}/assign`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`,
          },
          body: JSON.stringify({ user_id: userSelect.value, expires_at: null }),
        });

        showSuccess('Role granted.');
        await loadCreators();
      } catch (e) {
        showError(e && e.message ? e.message : String(e));
      }
    });

    (async function init() {
      try {
        await loadRoles();
        await loadUsers();
        await loadCreators();
        if (loadingEl) loadingEl.style.display = 'none';
      } catch (e) {
        showError(e && e.message ? e.message : String(e));
        if (loadingEl) loadingEl.style.display = 'none';
      }
    })();
  })();
</script>