shadcn.io is not affiliated with official shadcn/ui
Multi-Factor Authentication Settings Block for Solid
A multi-factor policy settings panel with choice cells for who must use it, allowed methods with a keep-one guard, a grace period that prints the start day, and a coverage meter that draws the people who have not set one up.
Installation
Overview
Decide who needs a second step and see how many people it reaches, with this multi-factor policy settings panel for Solid with Ark UI. A hairline frame with a plus mark on each corner starts with three choice cells that say who must use it, everyone, owners and admins, or nobody, each with the number of people it covers. Three Checkboxes choose the methods allowed (an authenticator app, a security key and an SMS code, which is called the weakest option), and at least one stays on. A Native Select sets the grace period and a sentence prints the day the rule starts and how many people would be asked at their next sign-in. Under the policy, a Progress meter counts how many people in scope have set one up ("31 of 42"), draws the ones who haven't as initials in Avatars and has a Remind button that says nothing was sent. The action foot counts unsaved changes beside a Shine Button that saves them and an outline button that discards them. It's built from Checkbox, Native Select, Progress, Avatar, Field, Button, Shine Button and Guides, with a CSS entrance only. For a workforce security console or an admin settings page.
FAQ
How do I fill it with my own people?
Edit GROUPS at the top: each role has how many people hold it and the ones who haven't set a second step up, each as initials and a name. The counts, the coverage figure, the people drawn and the reminder label are all worked out from those, and SCOPES says which roles each choice covers. AS_OF is the fixed day the grace period is counted from. In your app, read both from your directory rather than typing them.
What does the coverage meter measure?
The people in scope who have a second step set up, out of the people in scope: all 42 for everyone, the 6 owners and admins for the second choice. For nobody, nothing is required, so it counts the people who use one without being asked and says so in its title, and there is no one to remind. The people drawn are the ones still missing, with their names kept for screen readers, and the room for them is reserved so the panel doesn't change height when the scope does.
Why can't the last method be turned off?
A policy that allows no method would lock everyone out, so unticking the last one is refused: the box stays ticked, a message under the list says why, the status line says it too and focus returns to the box. You can tick another method first and then untick the one you wanted gone. The SMS note is always visible rather than a tooltip, so it reads the same by keyboard and by touch.
What stays local, and how do I make it real?
Everything. Nothing is enforced, saved or sent: the policy lives in this page's state, Save only says what it kept, and Remind says "Reminder queued in this demo. Nothing was sent." once and then that one is already queued. To make it real, store the policy with the workspace, ask for a second step at sign-in once the start day passes, send the reminder from your server and read the coverage from your identity data.
How does it look on a phone, and is it accessible?
The three choice cells stack, the methods keep their rows, the sentence reserves its lines and the action foot is pinned to the bottom of the screen. The choice cells are native radio buttons in a group, so the arrow keys move between them, every checkbox is named and described by its hint, the meter is hidden from assistive technology and restated by its figure, and the status line is a polite live region present from the start.