Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pre-Login Security Audit Block for Solid

A pre-sign-in checklist panel: six typed checks in an accordion with a glyph and a word each, a fix and an I have done this box on the ones that fail, Re-check and a Continue that waits for no failures.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Ask for a few safe habits before a sensitive sign-in, and say plainly what you can and cannot know, with this pre-login security audit block for Solid with Ark UI. It's the check in front of Refillfern, a pharmacy portal, shown as a panel with a short header over one framed panel. A strip of three counts (passed, warnings, failing) sits over six checks as rows of a single-open Accordion: a secure connection, an up-to-date browser, cookies, a screen lock, a password manager and extensions, each with a glyph and a word for its result. The failing one starts open with what was found, a typed fix and an "I've done this" Checkbox; Re-check re-reads the list so that every ticked fix passes. The one Shine Button, Continue to Refillfern, stays quiet while a check fails or more than one warning remains, and pressing it opens the row to fix. It's built from Accordion, Checkbox, Button, Shine Button and Guides, with a CSS entrance only. For portals that want a few precautions before a sign-in.

FAQ

Does it inspect my browser?

No, and the header says so. The six results are typed examples, so the block can show every state. A web page can really read only a few of these facts (whether the page is on a secure connection and whether cookies are on); it cannot see a screen lock, a password manager or the extensions you have installed, so a real audit should check what it can and ask people to confirm the rest, as the checkbox does here.

When can I continue?

When no check is failing and at most one warning remains; that limit is a constant, WARNINGS_ALLOWED. Until then the button is quiet but still pressable: it says which kind of problem blocks you, opens the row that needs a fix and moves focus to its box.

How do the fix box and Re-check work?

Ticking I've done this only records your word and says to re-check. Re-check then turns every ticked fix into a pass and updates the counts; with nothing ticked it says to tick a fix first. Unticking puts a fix back to its first result.

What stays in the page, and how do I wire it for real?

Everything: the results, the fixes and the ticks are typed constants and local state, and nothing is checked, sent or stored. In a product, run the checks you can in the browser or on your server (connection, cookie support, a minimum browser version from the user agent your server sees), keep the rest as advice, and decide on your side whether the sign-in may proceed.

How do the rows work with a keyboard?

Each row is a button inside a heading, so Tab and Enter or Space open it, and only one row is open at a time with every panel the same height, so opening one never moves the rest of the page. Arrow keys also move between rows.

How are pass, warning and fail told apart without colour?

By three glyph shapes (a tick, a dash and a cross), a word (Passed, Warning, Failing) and weight: a failing row's tile is solid and its word bold. Nothing is green, amber or red.