shadcn.io is not affiliated with official shadcn/ui
SAML Config Dashboard Block for Vue
Three SAML connections in a list with a state word each, and for the picked one copyable entity ID and sign-on URL, an attribute mapping table with a Required box, the certificate's days remaining and a four-step test that fails on the first unmapped required field.
Installation
Overview
Connect each identity provider and prove it works before anyone depends on it, with this SAML configuration panel for Vue with Ark UI. A hairline frame with a plus mark on each corner has a start cell listing three providers (Google Workspace, Microsoft Entra ID and Okta, named in text with a two-letter tile) with a state word under each: Connected, Needs attention or Not tested. The detail for the picked one shows the entity ID and sign-on URL in read-only Input Group fields with a Copy Button each, a table that maps each SAML attribute to an app field with a Native Select and a Required Checkbox, the signing certificate's days remaining against a thin bar, and four test results in order. The Shine Button in the action foot runs them on typed sample data: the metadata is read, the signature is valid, the audience matches and the required attributes are mapped. The last one fails by naming the first required attribute left unmapped; map it, run again and it passes. It's built from Input Group, Copy Button, Native Select, Checkbox, Badge, Shine Button and Guides. For admin consoles and identity settings.
FAQ
How do I add a provider?
Add an entry to PROVIDERS (its audience, the day its certificate ends, a name and a two-letter mark) and five rows to MAPS made with mapOf, which takes a comma list of app fields and a string of Required flags in the order of ATTRS. The entity ID and sign-on URL are built from the provider's id; replace entityOf and ssoOf with your own routes.
What does Run test check?
Four things in order, stopping at the first that fails: the metadata read (always true in the demo), the signature (the certificate must not have ended), the audience (the provider's must equal AUDIENCE) and the mapping (every Required attribute needs an app field). The failing check says what is wrong, and the status line says where it stopped. A run is worked out from the data on the page and nothing is sent to a provider.
Why does a provider go back to Not tested?
A test only vouches for the mapping it ran against. Changing a field or a Required box takes that provider back to Not tested and the results to "Not run", so a green state never describes a mapping that has changed since.
Do the copy buttons really copy?
Yes, they put the value on the clipboard and say so. Everything else is local: no assertion is parsed and no metadata is fetched. To make it real, fetch and parse the provider's metadata on the server and run the same four checks against it.