Fixes: https://github.com/vector-im/riot-web/issues/11395
Problem here was that the form gets re-mounted but there wasn't a facility
to preserve the password confirmation field. Since the form validates
that the passwords are equal, if we mount with a password supplied we
just copy it over.
These TODO comments are expected to be fixed ASAP, but until that happens let's minimize the errors in the console for development.
For https://github.com/vector-im/riot-web/issues/12877
These all aren't using componentDidMount because they do something which causes application instability if componentDidMount were used. Much of these calls are expected to move into constructors once they are converted to real classes.
This fixes a common React warning we see. Most of these components should be using constructors instead, however componentDidMount is just as good (and doesn't require converting most of these).
Conversion to classes will be done in a later stage of React warning fixes.
For https://github.com/vector-im/riot-web/issues/12877
Instead of twisting `AuthBody`, this adds a new component for the different
styling of post-auth security flows. This also makes them fixed width and
adjusts padding to match designs.
Webpack was printing several warnings about missing default exports,
particularly from components, where we auto-generate a default import via the
component index.
As part of this, the emoji picker recent handling (which is not a component) is
moved elsewhere to avoid the generated import.
We use `export default` begrudgingly here. Ideally we'd use just `export`, though this entire SDK expects things to be exported as a default. Instead of breaking everything, we'll sacrifice our export pattern for a smaller diff - a later commit can always do the default export -> regular export conversion.
With a switch to Only One Webpack™ we need a way to help developers generate the component index without a concurrent watch task. The best way to do this is to have developers import their components, but how do they do that when we support skins? The answer in this commit is to change skinning.
Skinning now expects to receive your list of overrides instead of the react-sdk+branded components. For Riot this means we send over *only* the Vector components and not Vector+react-sdk.
Components can then be annotated with the `replaceComponent` decorator to have them be skinnable. The decorator must take a string with the dot path of the component because we can't reliably calculate it ourselves, sadly.
The decorator does a call to `getComponent` which is where the important part of the branded components not including the react-sdk is important: if the branded app includes the react-sdk then the decorator gets executed before the skin has finished loading, leading to all kinds of fun errors. This is also why the skinner lazily loads the react-sdk components to avoid importing them too early, breaking the app.
The decorator will end up receiving null for a component because of the getComponent loop mentioned: the require() call is still in progress when the decorator is called, therefore we can't error out. All usages of getComponent() within the app are safe to not need such an error (the return won't be null, and developers shouldn't use getComponent() after this commit anyways).
The AuthPage, being a prominent component, has been converted to demonstrate this working. Changes to riot-web are required to have this work.
The reskindex script has also been altered to reflect these skinning changes - it no longer should set the react-sdk as a parent. The eventual end goal is to get rid of `getComponent()` entirely as it'll be easily replaced by imports.
This ensures we only fallback to submitting MSISDN tokens to the identity server
when we expect to do. Unexpected cases will now throw an error.
Fixes https://github.com/vector-im/riot-web/issues/10936
The custom server path no longer shows an identity server field (for modern
homeservers), so it's confusing to have the help dialog reference it.
Part of https://github.com/vector-im/riot-web/issues/11236
This tweaks logic that shows some warning messages saying you need an identity
server for email recovery. Assuming you have a modern homeserver, no identity
server is need for these activities, so the warnings were confusing.
Fixes https://github.com/vector-im/riot-web/issues/11100
ServerConfig assumed that the state was already correct when
checking the given urls against the default, but that is not
neccessarily the case (eg. the validation can return a different
url to what the user entered). This would cause an infinite loop
because it would keep firing onServerConfigChange to change to
the desired URLs but the state would never change.
Fixes part of https://github.com/vector-im/riot-web/issues/10666
This hides the identity server at first from the custom server auth flows. For
the flows that may need an IS if the HS requires it (registration, password
reset), we then check with the HS before proceeding further and reveal the IS
field if it is in fact needed.
Fixes https://github.com/vector-im/riot-web/issues/10553
This performs liveliness checks on the auth pages to try and show a friendlier error. Earlier checks in the app startup are expected to not block the app from loading on such failures.
See https://github.com/vector-im/riot-web/issues/9828
We previously sent it in componentWillMount of the email token
auth component which definitely gets us on react's naughtly list.
We now pass the js-sdk a callback it can call at the appropriate
time to send the token (https://github.com/matrix-org/matrix-js-sdk/pull/926).
We should make password reset and adding email addresses work the
same way, but currently they don't even use the interactive-auth
helpers(!) so they're unaffected.
https://github.com/vector-im/riot-web/issues/9586
This makes it a bit easier to meet the requirements while still requiring a
fairly strong value. The progress bar displays a score of 3 as reaching 100% for
simplicity.
Fixes https://github.com/vector-im/riot-web/issues/9642
The configuration flag is intentionally long and annoying - the vast majority of people should not need this. The flag is intended to be used in development environments where accounts are often registered with no intention of them sticking around.
Very similar to password resets and registration, the components pass around a server config for usage by other components. Login is a bit more complicated and needs a few more changes to pull the logic out to a more generic layer.
Now that we have a fancier password complexity check, remove the older minimum
length to avoid the feeling of two password style guides fighting each other.
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.
In addition to migrating password fields, this also removes the remaining
support for old-style validation in registration now that all checks have been
converted.
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.
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.
This updates the registration form to include the new-style validation state
when deciding whether the entire form is valid overall.
In addition, this tweaks the validation helper to take functions instead of
strings for translated text. This allows the validation helper to be create once
per component instead of once every render, which improves performance.
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.
As with other auth flows, this converts inputs on the login page to use the
Field component for consistent styling. The login type dropdown is left as-is
for now.
This converts most fields in the registration form to use the Field component,
except for the phone number, which is a left as a separate task because of the
country dropdown menu.
