linumiq_net-web_app/app/admin/users/[id]/user-actions.tsx

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';

type Props = {
  userId: string;
  role: string;
  banned: boolean;
  isSelf: boolean;
};

export function UserActions({ userId, role, banned, isSelf }: Props) {
  const router = useRouter();
  const [busy, setBusy] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  async function call(
    label: string,
    url: string,
    init: RequestInit,
    confirmMsg?: string,
  ) {
    if (confirmMsg && !window.confirm(confirmMsg)) return;
    setBusy(label);
    setError(null);
    setSuccess(null);
    try {
      const res = await fetch(url, init);
      if (!res.ok) {
        const b = (await res.json().catch(() => ({}))) as { error?: string };
        throw new Error(b.error ?? `Request failed (${res.status})`);
      }
      setSuccess(`${label} succeeded`);
      router.refresh();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(null);
    }
  }

  const jsonInit = (body: unknown): RequestInit => ({
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  });

  return (
    <div style={{ marginTop: '1rem' }}>
      {error && <p className="error">{error}</p>}
      {success && <p className="success">{success}</p>}
      <div className="row" style={{ flexWrap: 'wrap' }}>
        {role === 'admin' ? (
          <button
            type="button"
            className="secondary btn-sm"
            disabled={isSelf || busy !== null}
            title={isSelf ? 'You cannot change your own role' : undefined}
            onClick={() =>
              call(
                'Demote',
                `/api/admin/users/${userId}/role`,
                jsonInit({ role: 'user' }),
              )
            }
          >
            Demote to user
          </button>
        ) : (
          <button
            type="button"
            className="btn-sm"
            disabled={isSelf || busy !== null}
            onClick={() =>
              call(
                'Promote',
                `/api/admin/users/${userId}/role`,
                jsonInit({ role: 'admin' }),
              )
            }
          >
            Promote to admin
          </button>
        )}

        <button
          type="button"
          className="secondary btn-sm"
          disabled={isSelf || busy !== null}
          title={isSelf ? 'You cannot ban yourself' : undefined}
          onClick={() =>
            call(
              banned ? 'Unban' : 'Ban',
              `/api/admin/users/${userId}/ban`,
              jsonInit({ banned: !banned }),
            )
          }
        >
          {banned ? 'Unban' : 'Ban'}
        </button>

        <button
          type="button"
          className="btn-danger btn-sm"
          disabled={isSelf || busy !== null}
          title={isSelf ? 'You cannot delete yourself' : undefined}
          onClick={() =>
            call(
              'Delete',
              `/api/admin/users/${userId}`,
              { method: 'DELETE' },
              'Permanently delete this user and their tunnel? This cannot be undone.',
            ).then(() => router.push('/admin/users'))
          }
        >
          Delete user
        </button>
      </div>
    </div>
  );
}