[RFR] Introduce <PasswordInput>

[Kmaschta]

This PR introduce a new component in ra-ui-materialui, <PasswordInput>.
It is very similar to a <TextInput type="password">, but it adds a button to toggle visibility.

I found that it's a common need in our client projects, and it can be a great accessibility addition.

That being said, I'm willing to create a third-party library with this component if you think that this component doesn't have its place in ra-ui-materialui.

Also, I have another proposal: apply this toggle button directly on the TextInput if the type is password.

TODO

• Implement the component
• Update the documentation
• Use it in the demo

Previews

[fzaninotto]

So it seems you changed many files just because you run prettier on them. It makes it hard to tell the changes you made for the password input feature. Please revert the prettier changes on files you didn't modify for the password input feature - we'll fix the prettier problems in another PR.

Also, there hous not be a PasswordField, because the password should never be exposed.

[fzaninotto]

Again, you should simulate the hashing of the password in the server side, and the fact that a user update with no password doesn't empty the password in the server side. You can do all that in a wrapper around the data provider.

[fzaninotto]

Any chance you can update that one soon?

[Kmaschta]

Yeah, I think I'll just do it in plain JavaScript since none of the inputs are in TS and that I need to use a dependency.

[fzaninotto]

OK, let's forget the TypeScript requirement

[Kmaschta]

OK, I replaced the direct password edition by a tab with two fields: password and confirm password, on both Create and Edit views.
But if I hash the password by changing the data provider, I fear that someone will use it as an example and it's not really a good practice.

Since the demo API is a false in-memory API with only purpose to show react admin features, are we forced to handle that password hashing?

PS: Screenshots have been updated on the first post.

[Luwangel]

We use this version in one of our project. It's not TypeScript but there are hooks 😄

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { TextInput } from 'react-admin';

import IconButton from '@material-ui/core/IconButton';
import InputAdornment from '@material-ui/core/InputAdornment';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';

const PasswordInput = ({ defaultVisible, ...otherProps }) => {
    const [visible, setVisible] = useState(defaultVisible);

    return (
        <TextInput
            {...otherProps}
            type={visible ? 'text' : 'password'}
            InputProps={{
                endAdornment: (
                    <InputAdornment position="end">
                        <IconButton onClick={() => setVisible(!visible)}>
                            {visible ? <Visibility /> : <VisibilityOff />}
                        </IconButton>
                    </InputAdornment>
                ),
            }}
        />
    );
};

PasswordInput.propTypes = {
    defaultVisible: PropTypes.bool,
};

PasswordInput.defaultProps = {
    defaultVisible: false,
};

export default PasswordInput;

[Kmaschta]

Is it worth it to rebase this one?
Or we don't need a <PasswordInput> in the core?
Or should I rewrite it entirely for the v3?

[fzaninotto]

Yes, it's still worth rebasing! No need to rewrite it with hooks, but you're welcome to do so.

[Kmaschta]

Rebased on next

[Kmaschta]

Done 👌

[fzaninotto]

Needs rebase

[fzaninotto]

Excellent, thanks!