The meter under a new-password field: four bars that fill as the password meets the rules, a line saying how
strong it is, and the rules with a mark for each that is met. The server computes it from the text
(evaluate/2) and the field sends it on phx-change; nothing is kept in the browser.
The rules are three: at least min_length characters, both capitals and small letters, and a number or a
symbol. The score is the rules met, plus one more for a password of 16 characters or more (the canvas's
rule); a password that meets no rule, like an empty one, is 0. The words for the rules, the line and the name of
the meter are the caller's; the marks are slots (the canvas draws a circle with a check and a clock, 15px, with
a stroke of 1.8).
The colours are the tones (DevactionUI.Tone): red, amber, blue and green for the scores 1 to 4, on the bars and
on the line under them; a rule that is met paints its whole line, mark and words, in the green of the tone :ok
and one that is not stays muted, in both themes.
Summary
Functions
What a password meets: %{score: 0..4, rules: [length: boolean, mixed_case: boolean, digit_or_symbol: boolean]}.
Functions
@spec evaluate(String.t(), pos_integer()) :: %{score: 0..4, rules: keyword(boolean())}
What a password meets: %{score: 0..4, rules: [length: boolean, mixed_case: boolean, digit_or_symbol: boolean]}.
Attributes
score(:integer) (required) - 0 to 4, fromevaluate/2.label(:string) (required) - the line under the bars, e.g.Strong; read as the meter's value.meter_label(:string) (required) - the name of the meter for assistive technology, e.g.Password strength.rules(:list) (required) -%{label: text, met: boolean}each.class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
met_icon- the mark of a rule that is met.unmet_icon- the mark of a rule that is not met yet.