Risk Assessment Login Block for React

Everything. The six signals, their weights and the demo code (275194, printed under the field) are typed constants; nothing reads your device, place or network, and nothing is sent. In a product, work the signals out on your server at sign-in, keep the weights and thresholds there, and never let the browser report them. The switches here exist only so a visitor can see the score move.

Each signal that differs adds its weight: device 25, place 20, sign-in history 20, network 15, time of day 10 and account age 10, which add up to 100. The zones are Allow from 0 to 29, Verify from 30 to 59 and Block from 60. Every weight is shown in words (Heavy, Medium, Light) and in points, and the bar beside it is as long as the weight and dark when the signal counts.

They are demo controls, named so ("Device matches (demo control)"). On means the signal matches, off means it differs. Reset brings back the opening signals, where place and network differ for a score of 35.

Allow asks for nothing and the button reads Continue to Remitloft. Verify asks for a six-digit code, with all six digits required and a wrong code cleared and named; the button reads Verify and continue. Block asks for nothing and says the sign-in waits for a review; the button reads Contact support. Every pane shares one cell, so the column never changes height.

By a glyph (a tick, a shield with a question mark, a cancel mark), the zone's word, a heavy outline on the current zone and a marker with the score on the band. Nothing is green or red.

Yes, once the switches have rested for 600 milliseconds, and only when the words change, through the page's one status line ("Score 60. Block: sign-in not allowed."). The score and the zone are also plain text in the verdict column.