import { Head, Link, useForm } from '@inertiajs/react'; import { CheckboxCard } from '@/components/ui/checkbox-card'; import { Switch } from '@/components/ui/switch'; import { AdminLayout } from '@/layouts/admin-layout'; type AbilityOption = { value: string; label: string; }; type ApiTokenForm = { name: string; abilities: string[]; is_active: boolean; expires_at: string; }; type ApiTokenCreateProps = { abilityOptions: AbilityOption[]; }; export default function ApiTokenCreate({ abilityOptions, }: ApiTokenCreateProps) { const form = useForm({ name: '', abilities: [], is_active: true, expires_at: '', }); const submit = (event: React.FormEvent) => { event.preventDefault(); form.transform((data) => ({ ...data, expires_at: data.expires_at === '' ? null : data.expires_at, })); form.post('/admin/api-tokens'); }; return ( ); } type FormViewProps = { title: string; form: ReturnType>; abilityOptions: AbilityOption[]; onSubmit: (event: React.FormEvent) => void; submitLabel: string; }; export function ApiTokenFormView({ title, form, abilityOptions, onSubmit, submitLabel, }: FormViewProps) { const allAbilityValues = abilityOptions.map((option) => option.value); const granularAbilityValues = allAbilityValues.filter( (ability) => ability !== '*', ); const allGranularSelected = granularAbilityValues.every((ability) => form.data.abilities.includes(ability), ); const fullAccessSelected = form.data.abilities.includes('*') && allGranularSelected; const toggleAbility = (ability: string) => { if (ability === '*') { form.setData( 'abilities', fullAccessSelected ? [] : allAbilityValues, ); return; } const nextAbilities = form.data.abilities.includes(ability) ? form.data.abilities.filter( (item) => item !== ability && item !== '*', ) : [...form.data.abilities, ability]; const uniqueAbilities = Array.from(new Set(nextAbilities)); form.setData( 'abilities', granularAbilityValues.every((item) => uniqueAbilities.includes(item), ) ? Array.from(new Set(['*', ...uniqueAbilities])) : uniqueAbilities, ); }; const selectAllAbilities = () => { form.setData('abilities', allAbilityValues); }; const clearAbilities = () => { form.setData('abilities', []); }; return (

{title}

Tokens are shown once after creation and stored only as hashes.

Back to tokens
form.setData('name', event.target.value) } required placeholder="ERP catalog sync" 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]" /> form.setData('expires_at', event.target.value) } 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]" />
form.setData('is_active', checked) } ariaLabel="Toggle API token active state" /> Active token
{abilityOptions.map((option) => ( toggleAbility(option.value)} label={option.label} /> ))}
); } function Field({ label, error, help, children, }: { label: string; error?: string; help?: string; children: React.ReactNode; }) { return (
{children}
{help ? (

{help}

) : null} {error ? (

{error}

) : null}
); }