files/nextjs/app/manage/admin/users/page.js

import {
  adminCreateUserAction,
  adminDeleteUserAction,
  adminLogoutAction,
  adminResetUserAction,
  adminSetUserAdminAction,
} from '@/src/lib/actions.js';
import { all, runCleanupIfNeeded } from '@/src/lib/db.js';
import { formatTimestamp, readSearchParam } from '@/src/lib/format.js';
import { ensureCsrfToken, requireAdminUser } from '@/src/lib/security.js';

import { AdminTabs } from '../../_components/admin-tabs.js';
import { StatusMessage } from '../../_components/status-message.js';

export const dynamic = 'force-dynamic';

export default async function AdminUsersPage({ searchParams }) {
  await runCleanupIfNeeded();
  const actor = await requireAdminUser();

  const csrfToken = await ensureCsrfToken();
  const users = await all('SELECT username, created_at, is_admin FROM users ORDER BY username ASC');

  const resolvedSearchParams = await searchParams;
  const error = readSearchParam(resolvedSearchParams, 'error');
  const success = readSearchParam(resolvedSearchParams, 'success');
  const requestedTab = readSearchParam(resolvedSearchParams, 'tab');
  const activeTab = requestedTab === 'create' ? 'create' : 'users';

  return (
    <main className="page-shell">
      <header className="page-header">
        <div className="header-main">
          <h1>Benutzerverwaltung</h1>
          <p className="muted">Konten erstellen, Passwort setzen oder Benutzer entfernen.</p>
        </div>

        <form className="inline-form" action={adminLogoutAction}>
          <input type="hidden" name="csrfToken" value={csrfToken} />
          <button className="btn secondary" type="submit">
            Abmelden
          </button>
        </form>
      </header>

      <StatusMessage error={error} success={success} />
      <AdminTabs active="users" />

      <nav className="tabs" aria-label="Benutzer-Bereiche">
        <a className={`tab ${activeTab === 'users' ? 'active' : ''}`} href="/manage/admin/users?tab=users">
          Benutzer
        </a>
        <a className={`tab ${activeTab === 'create' ? 'active' : ''}`} href="/manage/admin/users?tab=create">
          Neu
        </a>
      </nav>

      {activeTab === 'create' ? (
      <section className="panel">
        <h2>Neuen Benutzer anlegen</h2>
        <form className="form-grid" action={adminCreateUserAction}>
          <input type="hidden" name="csrfToken" value={csrfToken} />

          <label className="field">
            Benutzername
            <input className="input" name="username" autoComplete="username" required />
          </label>

          <label className="field">
            Passwort
            <input className="input" name="password" type="password" autoComplete="new-password" required />
          </label>

          <label className="check-row">
            <input type="checkbox" name="isAdmin" value="1" />
            Adminrechte vergeben
          </label>

          <button className="btn" type="submit">
            Benutzer erstellen
          </button>
        </form>
      </section>
      ) : null}

      {activeTab === 'users' ? (
      <section className="panel">
        <h2>Bestehende Benutzer</h2>
        {users.length === 0 ? (
          <p className="muted">Noch keine Benutzer vorhanden.</p>
        ) : (
          <div className="table-wrap">
            <table>
              <thead>
                <tr>
                  <th>Benutzername</th>
                  <th>Rolle</th>
                  <th>Erstellt</th>
                  <th>Aktionen</th>
                </tr>
              </thead>
              <tbody>
                {users.map((user) => (
                  <tr key={user.username}>
                    <td>{user.username}</td>
                    <td>
                      <span className={`badge ${user.is_admin ? 'primary' : ''}`}>
                        {user.is_admin ? 'Admin' : 'Benutzer'}
                      </span>
                    </td>
                    <td>{formatTimestamp(user.created_at)}</td>
                    <td>
                      <div className="stack-actions">
                        <form className="inline-form" action={adminSetUserAdminAction}>
                          <input type="hidden" name="csrfToken" value={csrfToken} />
                          <input type="hidden" name="username" value={user.username} />
                          <input type="hidden" name="isAdmin" value={user.is_admin ? '0' : '1'} />
                          <button
                            className="btn secondary"
                            type="submit"
                            disabled={actor.username === user.username && Boolean(user.is_admin)}
                          >
                            {user.is_admin ? 'Adminrechte entziehen' : 'Zum Admin machen'}
                          </button>
                        </form>

                        <form className="inline-form" action={adminResetUserAction}>
                          <input type="hidden" name="csrfToken" value={csrfToken} />
                          <input type="hidden" name="username" value={user.username} />
                          <input
                            className="input small"
                            name="password"
                            type="password"
                            placeholder="Neues Passwort"
                            required
                          />
                          <button className="btn" type="submit">
                            Passwort setzen
                          </button>
                        </form>

                        <form className="inline-form" action={adminDeleteUserAction}>
                          <input type="hidden" name="csrfToken" value={csrfToken} />
                          <input type="hidden" name="username" value={user.username} />
                          <button className="btn danger" type="submit" disabled={actor.username === user.username}>
                            Benutzer löschen
                          </button>
                        </form>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>
      ) : null}
    </main>
  );
}