This adds a password complexity rule during registration to require strong
passwords. This is based on the `zxcvbn` module that we already use for key
backup passphrases.
In addition, this also tweaks validation more generally to allow rules to be
async functions.
When submitting a form, we want to validate more strictly to check for empty
values that might be required. A separate mode is used since we want to ignore
this issue when visiting a field one by one to enter data.
As an example, we convert the pre-existing logic for the username requirement
using this new support.
Since we're keeping the input as a ref anyway, let's use that rather than
requiring the value to be passed to `validate`. This allows others to call
`validate` as well.
This adjusts the submission step to focus the first invalid field and redisplay
validation. This also rearranges the older style field error handling on
registration which is slated for removal once we convert all fields to the new
style.
The class name handling for validation inadvertently added `undefined` as a
class when validation is not used. This rearranges the logic to avoid the issue.
Fixes https://github.com/vector-im/riot-web/issues/9345
When working on the `Field` validation support, I thought `RegistrationForm`'s
refs would be okay to leave as is, but I missed that they also depended on the
value getter.
For the moment, it's quicker to temporarily revive the value getter to get
registration working.
Fixes https://github.com/vector-im/riot-web/issues/9171
As part of adding validation to Field, the logic is simpler to follow if we can
assume that all usages of Field use it as a controlled component, instead of
supporting both controlled and uncontrolled.
This converts the uncontrolled usages to controlled.
* renames RoomTooltip to be a generic Tooltip (which it is)
* hooks it into Field to show validation results
* adds onValidate to Field to let Field instances call an arbitrary validation function
Rebased from @ara4n's https://github.com/matrix-org/matrix-react-sdk/pull/2550
by @jryans. Subsequent commits revise and adapt this work.
This allows Fields to have an optional prefix component which is placed inside
the border of the Field and to the left of the input. Since this label animation
would be complex to get right for this case, it is instead fixed to the top left
if there is a prefix component.
This canonical example of this today would be a phone number field which
includes a country dropdown.
Several small tweaks to the props handling:
* Use destructuring instead of `delete`
* Emphasize the `element` as a primary prop
* Document `textarea` as supported
Fixes https://github.com/vector-im/riot-web/issues/8250
This keeps all fields in line with the design without them having to defining it twice. The option is kept in the first place as some fields might want to override the placeholder to be longer than the label or something.
The label moves into the border on focus and after being filled. A valid color
is applied to the label and input border. Other states like invalid can be added
later as needed.
Adapted from @ara4n's experiment into a React component with a CSS only
approach.
