Add React based password field with strength indicator

[robbieaverill]

High level ideas for a React based PasswordField component:

• It indicates your password strength by calculating entropy
• It indicates your password strength by calculating predictability
• It includes SilverStripe password validation rules, e.g. minimum length, maximum length, required character types
• It marks itself as invalid when it doesn't meet SilverStripe's validation rules
• It doesn't mark itself as invalid when the password entropy/complexity rules indicate that it is weak, but it still meets SilverStripe's validation rules (note: we could replace these rules in SilverStripe 5 with a zxcvbn score rating instead, but that'd be a separate issue)
• It would be Bootstrap styled in terms of the form field, messages, validation state, and maybe the progress bar
• It would fail validation when the confirm password field doesn't match (see note below about this)

In scope:

• Pattern library component in admin
• Member details form in the CMS (and "My profile")

Out of scope:

• Change password form (since it's not React driven, and is frontend rather than CMS driven) - note that this could change as part of silverstripe/login-forms in the future, if it became React driven

Resources:

• zxcvbn - password strength estimation library (this is the JavaScript library)
• Bootstrap progress bars with colour context
• A React tutorial to build one using zxcvbn
• Webkit progress bar - noted as not ready for production use

Notes:

• zxcvbn library may add up to 400-500kb of size to the bundle, we may consider bundling it separately from the admin bundle and loading it asynchronously to prevent the CMS load time from increasing unnecessarily
• SilverStripe has confirm password field which usually goes alongside "enter new password" fields, this component may need to replace the need for that to exist, since it'd be a separate form field. We may consider calling this component NewPasswordField or something to differentiate it from an "enter your [current] password" field eg. in login forms

[sachajudd]

Last pass example:

[robbieaverill]

This is what we have at the moment:

See Member::getMemberPasswordField() which is used in Member::getCMSFields(). We can probably built a UI for this and not have breaking changes. See FormField::$schemaComponent to define the React component to use.

[robbieaverill]

cc @StephenMakrogianni, WIP branch https://github.com/robbieaverill/silverstripe-admin/commit/34fa74c8d580f1318c91479fe0eec61476f535e0

[sachajudd]

See Style guide for potential concepts. I think we go for the MVP concept first and look into how we can improve the other concept for the future. Note: Colours to be confirmed seeing as these are not consistent patterns currently in the CMS and we want to make sure they're accessible.

[robbieaverill]

Work in progress branches here:

• https://github.com/robbieaverill/silverstripe-admin/tree/pulls/1.5/password-strength-field
• https://github.com/robbieaverill/silverstripe-framework/tree/pulls/4.5/password-strength-field

I've got most of a storybook component working. It needs to be hooked into SilverStripe, unit tested, UI tweaked (we're using temporary font icons and colours are probably not accessible), have the zxcvbn bundle pulled out into its own file.