shadcn.io is not affiliated with official shadcn/ui
Environment Variables Account Block for Vue
Who and what can read each secret: a table of secrets with environment, reader count and last read, rows that open to the readers with Remove access and an Add a reader select, and a bulk removal of stale tokens.
Installation
Overview
Show who and what can read each secret, with this secret readers panel for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a table with a row per secret: its name in mono, an environment Badge, a button with the number of readers and the date it was last read. The button opens the readers, people and tokens, each with when they last read the secret, a Remove access button, and an "Add a reader" Native Select for the ones that cannot read it yet. The values are never shown. One line above the table adds the risk up ("2 secrets are readable by a token unused for 90 days") and those rows say so in words under the name. The header's Shine Button is the only colored control: it removes every stale token after an Alert Dialog names them, and Undo at the foot brings the last removal back. On a phone each secret becomes a card with its readers button. It's built from a native table, Alert Dialog, Native Select, Badge, Button, Shine Button and Guides, with a CSS entrance and disclosure only. For the security page of any deployment platform.
FAQ
How do I fill it with my secrets and readers?
Edit SECRETS: each has a name, its scope (the environment, as text) and its readers, each with an id, a kind (person or token), a name and the ISO day it was last read, or an empty string for never. POOL lists everyone and every token that exists, for the "Add a reader" select. The staleness limit is STALE (90 days) and is measured against the one AS_OF constant, never the clock. Only token readers can be stale: a person who has not read a secret in a while is not a risk this page flags.
What stays local, and how do I make it real?
Everything. Removing, adding and Undo change this page's state and say so in the foot; no access changes anywhere. To make it real, call your access endpoint in remove, add and removeStale, update the list only when it answers, and keep the values themselves out of the page, as this one does. A real Undo would add the reader back through the same endpoint.
What counts as stale, and how is it marked?
A token reader whose last read is 90 days or more before the as-of day. The sentence above the table counts the secrets that have one, the secret's name cell says "Readable by backup-cron, unused for 90 days or more", and in the opened list the reader carries an "Unused for 90 days or more" badge and its day count in words. No colour is needed to see it. The header button says how many stale readers it would remove and is marked unavailable, but still explains itself, when there are none.
How do removal and Undo work?
Remove access takes the reader off that secret at once, says so in the status line and moves focus to the secret's readers button. It is a one-secret, reversible change, so there is no dialog; the bulk removal of stale tokens asks first because it touches several secrets, and focus starts on Cancel. Undo is always in the foot, named for what it would bring back ("Undo removing backup-cron"), and steps back one removal at a time.
How does the table behave on a phone and with a keyboard?
It is a native table in a scrollable, focusable region with a caption and column heads. Below the medium breakpoint the heads are read out only, each row becomes a card with the name, its environment and last-read line, and the readers button at the end, and the opened readers sit under it. The readers button reports whether it is open and controls its panel; closed panels are not focusable.