Offline Code Login Block for React

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.

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.

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.

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.

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.

By the heading, a dashed line instead of a solid one, a mark on the broken stretch and the button's label, which changes from Sign in to Use offline code.