RenewCMS/docs/design/screens/integration-api-keys.md

Integration: API keys

Route: /integration/api-keys. Component: ApiKeysPage.dc.html, mounted by AppFrame.

• Visual reference: source/RenewCMS Screens API keys.dc.html, group "API keys", drawn by source/ApiKeysPage.dc.html (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).

API

POST /v1/api-key · GET /v1/api-key · DELETE /v1/api-key/{id}. Access: Session only. An API key cannot manage keys; with a key these routes answer 403 "This action needs a real session."

• POST /v1/api-key body: name (string, required, max 60), expires_at (RFC3339 string, optional, in the future). A past date answers 400 "The expiry must be a date in the future."
• DELETE /v1/api-key/{id}: unknown id answers 404 "API key not found".

Placement

Under Integration, as a sub-page linked from the Authentication section ("Manage API keys") and the sidebar item. Keys exist to call the API and admins can create them; Settings is owner-only today. The mobile top bar has a back arrow that returns to Integration.

Content

• Columns: Name, Key (prefix, mono), Status (active, expired, revoked), Created by (owners only), Created, Last used, Expires, Revoke. Owners see all keys; admins see their own.
• Create key modal: Name (required, up to 60, counter), Expiry date (optional, must be in the future). Errors: "Enter a name." / "Use 60 characters or fewer." / "Choose a date in the future."
• The Expiry field is a native date input. The displayed format follows the browser's locale, so there is no custom format. The board draws one example date only.
• One-time reveal: warning "You won't be able to see this key again.", monospace key, Copy / Copied, "Closing this window discards the key from the screen. Copy it first." Button "Done".
• Revoke: "Revoke this key?" / ""Nightly media import" (rcms_Mq7b…) will stop working right away. Requests that use it answer 401. This can't be undone." Buttons "Keep key", "Revoke key". Toast "Key revoked".
• Empty: "No API keys yet" / "Create a key to call the API from a script or service." Error: "Couldn't load your API keys" / "Check your connection and try again."
• Note: "Resetting a user's password revokes all of their keys."

Mobile: pinned Create key

On mobile the "Create key" button is pinned to the bottom of the viewport (44 px high, full width, on a bar with a top border). It shows in Owner list, Admin own keys only, Loading, Empty, Error and Revoked, and is hidden behind every modal state. In Empty it replaces the inline button. The content has bottom padding so nothing sits under the bar, and the toast sits above it. Desktop keeps "Create key" in the page header (and in the Empty card).

States

Names are matched exactly by the visual-check script.

Owner: list

Admin: own keys only

Loading

the list request is in flight. Skeleton rows appear only after 150 ms.

Empty

Error

a 500 or network failure on the list request. If a key is created while this state is showing, the list reloads, the new key appears and the error alert is cleared.

Create key

Create key: validation

Create key: name too long

One-time reveal

One-time reveal: copied

Revoke: confirm

Revoked

Component inventory (Nuxt UI v4)

UTable, UBadge, UModal with UForm/UFormField/UInput (type date), UAlert color warning, UButton, useClipboard.