shadcn.io is not affiliated with official shadcn/ui
Offline Code Login Block for Svelte
A sign-in that follows the browser's real online and offline events: offline it asks for an eight-character offline code and counts sessions, online it says no code is needed, in the same space.
Installation
Overview
Keep people signing in when the network drops, with this offline code login block for Svelte with Ark UI. It's the sign-in of Quadrafield, a field-survey app: a whole screen with the page's rails and one band across it, a centred stack. A small figure draws the way from your device to the servers, solid while online and broken and dashed while offline, over the heading and one sentence. The page listens to the browser's real online and offline events and reads navigator.onLine in an effect, so the server render is stable. A Switch marked as a demo control, "Pretend I'm offline", is on when the page opens so the offline state is what you see. Offline, an Input takes an eight-character offline code and the Shine Button spends one of three offline sessions; online, the page says no code is needed and the button signs in as usual. The two states share one space, so nothing moves, and Retry connection reads the browser again. It's built from Input, Field, Switch, Status, Button, Shine Button and Guides, with a CSS entrance only. For field apps, kiosks and anything that must sign someone in with no signal.
FAQ
What stays in the page, and how do I wire it for real?
The browser's connection is real: the page reads navigator.onLine and follows the online and offline events, and changes nothing. Everything else is local: the offline code is one typed value, the session count lives in the page and nothing is sent. In a product, an offline code is checked against keys stored on the device, such as a one-time-password seed or a signed token from the last sync, with its own expiry and a counter the server reconciles when the device is back online.
What do online and offline events really tell you?
Less than they seem to. navigator.onLine is false when the browser is certain there is no network, but true can mean only that a network interface is up, so a captive portal or a dead router still reads online. That is why the page offers Retry connection, why the real value is shown beside the demo switch, and why a real product should also treat a failed request as the real signal.
Why does the page open offline?
So the server render, the first paint and the preview all show the same state, and no state flashes on load. The demo switch is on at first; the browser is read in an effect after the page loads. Turn the switch off to follow the browser, and to see the other state take the same space.
How does the code field work?
It keeps letters and digits only, shows them in capitals with a dash after the fourth, and accepts a paste of the whole code. The demo code is printed once under the field. Short, wrong and out-of-sessions answers each say so under the field and focus it; a right code spends a session, and Reset puts all three back.
Is it usable with a keyboard and a screen reader?
Yes. The heading and sentence change with the state and the page's status line says what the browser reported, the switch is named and marked as a demo control, and the state that is not showing is hidden and inert. The drawing is decoration, and its dashed line is also in words.