API Tokens

Issue scoped credentials for future partner and internal API integrations.
Create Token
{plainTextToken ? (
Copy this token now {createdTokenName ? ` for ${createdTokenName}` : ''} .
It is stored as a hash and will not be shown again after you leave this page.
                    </div>
                ) : null}

                <form
                    onSubmit={submitSearch}
                    className="flex max-w-md flex-col gap-2 sm:flex-row"
                >
                    <input
                        value={search}
                        onChange={(event) => setSearch(event.target.value)}
                        placeholder="Search by token name or creator"
                        className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                    />
                    <button
                        type="submit"
                        className="rounded-lg border border-slate-300 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 dark:border-[#4a3a78] dark:text-[#e5dcff] dark:hover:bg-[#2a1d50]"
                    >
                        Search
                    </button>
                </form>

                <div className="space-y-3 md:hidden">
                    {tokens.data.map((token) => (
                        <article
                            key={token.id}
                            className="rounded-xl border border-slate-200 bg-white p-4 dark:border-[#3c2b68] dark:bg-[#211740]"
                        >
                            <p className="font-semibold text-[#0a1530] dark:text-[#efe8ff]">
                                {token.name}
                            </p>
                            <p className="text-xs text-slate-500 dark:text-[#bcaee6]">
                                Created by {token.user?.name || 'Unknown'} on{' '}
                                {token.created_at || '-'}
                            </p>
                            <div className="mt-3 grid grid-cols-2 gap-2 text-xs text-slate-700 dark:text-[#c7bde8]">
                                <p>Status: {statusLabel(token)}</p>
                                <p>
                                    Last used: {token.last_used_at || 'Never'}
                                </p>
                                <p>Expires: {token.expires_at || 'Never'}</p>
                            </div>
                            <AbilityList
                                abilities={token.abilities}
                                labels={abilityLabels}
                            />
                            <Actions id={token.id} onDelete={deleteToken} />
                        </article>
                    ))}
                </div>

                <ConfigurableTable
                    tableId="admin-api-tokens"
                    className="hidden overflow-x-auto rounded-xl border border-slate-200 md:block dark:border-[#3c2b68]"
                >
                    <table className="min-w-full divide-y divide-slate-200 text-sm dark:divide-[#3c2b68]">
                        <thead className="bg-slate-50 dark:bg-[#2a1d50]/70">
                            <tr>
                                <th className="px-4 py-3 text-left font-medium text-slate-700 dark:text-[#c7bde8]">
                                    Token
                                </th>
                                <th className="px-4 py-3 text-left font-medium text-slate-700 dark:text-[#c7bde8]">
                                    Abilities
                                </th>
                                <th className="px-4 py-3 text-left font-medium text-slate-700 dark:text-[#c7bde8]">
                                    Status
                                </th>
                                <th className="px-4 py-3 text-left font-medium text-slate-700 dark:text-[#c7bde8]">
                                    Usage
                                </th>
                                <th className="px-4 py-3 text-left font-medium text-slate-700 dark:text-[#c7bde8]">
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-100 bg-white dark:divide-[#3c2b68] dark:bg-[#211740]">
                            {tokens.data.map((token) => (
                                <tr key={token.id}>
                                    <td className="px-4 py-3">
                                        <p className="font-medium text-[#0a1530] dark:text-[#efe8ff]">
                                            {token.name}
                                        </p>
                                        <p className="text-xs text-slate-500 dark:text-[#bcaee6]">
                                            {token.user?.email ||
                                                'Unknown creator'}
                                        </p>
                                    </td>
                                    <td className="px-4 py-3">
                                        <AbilityList
                                            abilities={token.abilities}
                                            labels={abilityLabels}
                                        />
                                    </td>
                                    <td className="px-4 py-3 text-slate-700 dark:text-[#c7bde8]">
                                        <p>{statusLabel(token)}</p>
                                        <p className="text-xs text-slate-500 dark:text-[#bcaee6]">
                                            Expires:{' '}
                                            {token.expires_at || 'Never'}
                                        </p>
                                    </td>
                                    <td className="px-4 py-3 text-slate-700 dark:text-[#c7bde8]">
                                        <p>
                                            Last used:{' '}
                                            {token.last_used_at || 'Never'}
                                        </p>
                                        <p className="text-xs text-slate-500 dark:text-[#bcaee6]">
                                            Created: {token.created_at || '-'}
                                        </p>
                                    </td>
                                    <td className="px-4 py-3">
                                        <Actions
                                            id={token.id}
                                            onDelete={deleteToken}
                                        />
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </ConfigurableTable>

                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <p className="text-sm text-slate-600 dark:text-[#c7bde8]">
                        Showing {tokens.from || 0} to {tokens.to || 0} of{' '}
                        {tokens.total} tokens
                    </p>
                    <PaginationLinks links={tokens.links} />
                </div>
            </div>
        </AdminLayout>
    );
}

function statusLabel(token: ApiTokenRow): string {
    if (!token.is_active) {
        return 'Inactive';
    }

    if (token.is_expired) {
        return 'Expired';
    }

    return 'Active';
}

function AbilityList({
    abilities,
    labels,
}: {
    abilities: string[];
    labels: Record<string, string>;
}) {
    return (
        <div className="mt-3 flex max-w-lg flex-wrap gap-1.5 md:mt-0">
            {abilities.map((ability) => (
                <span
                    key={ability}
                    className="rounded-full border border-sky-200 bg-sky-50 px-2 py-1 text-xs font-medium text-sky-800 dark:border-sky-400/40 dark:bg-sky-400/10 dark:text-sky-100"
                >
                    {labels[ability] || ability}
                </span>
            ))}
        </div>
    );
}

function Actions({
    id,
    onDelete,
}: {
    id: number;
    onDelete: (id: number) => void;
}) {
    return (
        <div className="mt-4 flex gap-2 md:mt-0">
            <Link
                href={`/admin/api-tokens/${id}/edit`}
                className="rounded-md border border-slate-300 px-2.5 py-1 text-xs font-medium text-slate-700 hover:bg-slate-100 dark:border-[#4a3a78] dark:text-[#e5dcff] dark:hover:bg-[#2a1d50]"
            >
                Edit
            </Link>
            <button
                type="button"
                onClick={() => onDelete(id)}
                className="rounded-md border border-rose-200 px-2.5 py-1 text-xs font-medium text-rose-700 hover:bg-rose-50"
            >
                Delete
            </button>
        </div>
    );
}