Introduce <PasswordInput>

marmelab · Jul 9, 2019 · b502f17 · b502f17
1 parent fdc7d19
commit b502f17
Show file tree

Hide file tree

Showing 13 changed files with 158 additions and 7 deletions.
diff --git a/docs/Inputs.md b/docs/Inputs.md
@@ -644,6 +644,29 @@ You can customize the `step` props (which defaults to "any"):
 <NumberInput source="nb_views" step={1} />
 ```
 
+## `<PasswordInput>`
+
+`<PasswordInput>` works like the [`<TextInput>`](#textinput) but overwrites its `type` prop to `password` or `text`  in accordance with a visibility button, hidden by default.
+
+```jsx
+import { PasswordInput } from 'react-admin';
+
+<PasswordInput source="password" />
+```
+
+![Password Input](./img/password-input.png)
+
+It is possible to change the default behavior and display the value by default via the `initiallyVisible` prop:
+
+```jsx
+import { PasswordInput } from 'react-admin';
+
+<PasswordInput source="password" initiallyVisible />
+```
+
+![Password Input (visible)](./img/password-input-visible.png)
+
+
 ## `<RadioButtonGroupInput>`
 
 If you want to let the user choose a value among a list of possible values by showing them all (instead of hiding them behind a dropdown list, as in [`<SelectInput>`](#selectinput)), `<RadioButtonGroupInput>` is the right component. Set the `choices` attribute to determine the options (with `id`, `name` tuples):

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -569,6 +569,11 @@
                                     <code>&lt;NumberInput&gt;</code>
                                 </a>
                             </li>
+                            <li class="chapter">
+                                <a href="#passwordinput">
+                                    <code>&lt;PasswordInput&gt;</code>
+                                </a>
+                            </li>
                             <li class="chapter">
                                 <a href="#radiobuttongroupinput">
                                     <code>&lt;RadioButtonGroupInput&gt;</code>

diff --git a/docs/img/password-input-visible.png b/docs/img/password-input-visible.png
diff --git a/docs/img/password-input.png b/docs/img/password-input.png
diff --git a/examples/data-generator/src/customers.js b/examples/data-generator/src/customers.js
@@ -11,6 +11,7 @@ export default (db, { serializeDate }) =>
         const last_name = name.lastName();
         const email = internet.email(first_name, last_name);
         const birthday = has_ordered ? date.past(60) : null;
+
         return {
             id,
             first_name,

diff --git a/examples/demo/src/i18n/en.js b/examples/demo/src/i18n/en.js
@@ -51,10 +51,16 @@ export default {
                 orders: 'Orders',
                 reviews: 'Reviews',
                 stats: 'Stats',
+                password: 'Password',
+                change_password: 'Change Password',
             },
             page: {
                 delete: 'Delete Customer',
             },
+            errors: {
+                password_mismatch:
+                    'The password confirmation is not the same as the first password.',
+            },
         },
         commands: {
             name: 'Order |||| Orders',

diff --git a/examples/demo/src/i18n/fr.js b/examples/demo/src/i18n/fr.js
@@ -62,6 +62,8 @@ export default {
                 orders: 'Commandes',
                 reviews: 'Commentaires',
                 stats: 'Statistiques',
+                password: 'Mot de passe',
+                change_password: 'Changer le mot de passe',
             },
             page: {
                 delete: 'Supprimer le client',

diff --git a/examples/demo/src/visitors/VisitorCreate.js b/examples/demo/src/visitors/VisitorCreate.js
@@ -6,13 +6,18 @@ import {
     LongTextInput,
     TabbedForm,
     TextInput,
+    PasswordInput,
+    translate as withTranslation,
 } from 'react-admin';
 import { makeStyles } from '@material-ui/core/styles';
 
 export const styles = {
     first_name: { display: 'inline-block' },
     last_name: { display: 'inline-block', marginLeft: 32 },
     email: { width: 544 },
+    birthday: { display: 'inline-block' },
+    password: { display: 'inline-block' },
+    confirm_password: { display: 'inline-block', marginLeft: 32 },
     address: { maxWidth: 544 },
     zipcode: { display: 'inline-block' },
     city: { display: 'inline-block', marginLeft: 32 },
@@ -24,13 +29,29 @@ export const styles = {
     },
 };
 
+export const validatePasswords = translate => ({
+    password,
+    confirm_password,
+}) => {
+    const errors = {};
+
+    if (password && confirm_password && password !== confirm_password) {
+        errors.confirm_password = [
+            translate('resources.customers.errors.password_mismatch'),
+        ];
+    }
+
+    return errors;
+};
+
 const useStyles = makeStyles(styles);
 
-const VisitorCreate = props => {
+const VisitorCreate = ({ translate, ...props }) => {
     const classes = useStyles();
+
     return (
         <Create {...props}>
-            <TabbedForm>
+            <TabbedForm validate={validatePasswords(translate)}>
                 <FormTab label="resources.customers.tabs.identity">
                     <TextInput
                         autoFocus
@@ -49,6 +70,10 @@ const VisitorCreate = props => {
                         formClassName={classes.email}
                     />
                     <DateInput source="birthday" />
+                    <PasswordInput
+                        source="password"
+                        formClassName={classes.password}
+                    />
                 </FormTab>
                 <FormTab
                     label="resources.customers.tabs.address"
@@ -64,9 +89,24 @@ const VisitorCreate = props => {
                     />
                     <TextInput source="city" formClassName={classes.city} />
                 </FormTab>
+                <FormTab
+                    label="resources.customers.tabs.password"
+                    path="password"
+                >
+                    <PasswordInput
+                        source="password"
+                        formClassName={classes.password}
+                        required
+                    />
+                    <PasswordInput
+                        source="confirm_password"
+                        formClassName={classes.confirm_password}
+                        required
+                    />
+                </FormTab>
             </TabbedForm>
         </Create>
     );
 };
 
-export default VisitorCreate;
+export default withTranslation(VisitorCreate);
diff --git a/examples/demo/src/visitors/VisitorEdit.js b/examples/demo/src/visitors/VisitorEdit.js
@@ -9,10 +9,12 @@ import {
     LongTextInput,
     NullableBooleanInput,
     NumberField,
+    PasswordInput,
     ReferenceManyField,
     TabbedForm,
     TextField,
     TextInput,
+    translate as withTranslation,
 } from 'react-admin';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -21,18 +23,19 @@ import ProductReferenceField from '../products/ProductReferenceField';
 import StarRatingField from '../reviews/StarRatingField';
 import FullNameField from './FullNameField';
 import SegmentsInput from './SegmentsInput';
-import { styles } from './VisitorCreate';
+import { styles, validatePasswords } from './VisitorCreate';
 
 const useStyles = makeStyles(styles);
 
 const VisitorTitle = ({ record }) =>
     record ? <FullNameField record={record} size={32} /> : null;
 
-const VisitorEdit = props => {
+const VisitorEdit = ({ translate, ...props }) => {
     const classes = useStyles();
+
     return (
         <Edit title={<VisitorTitle />} {...props}>
-            <TabbedForm>
+            <TabbedForm validate={validatePasswords(translate)}>
                 <FormTab label="resources.customers.tabs.identity">
                     <TextInput
                         source="first_name"
@@ -123,9 +126,22 @@ const VisitorEdit = props => {
                         style={{ width: 128, display: 'inline-block' }}
                     />
                 </FormTab>
+                <FormTab
+                    label="resources.customers.tabs.change_password"
+                    path="password"
+                >
+                    <PasswordInput
+                        source="password"
+                        formClassName={classes.password}
+                    />
+                    <PasswordInput
+                        source="confirm_password"
+                        formClassName={classes.confirm_password}
+                    />
+                </FormTab>
             </TabbedForm>
         </Edit>
     );
 };
 
-export default VisitorEdit;
+export default withTranslation(VisitorEdit);
diff --git a/packages/ra-language-english/index.js b/packages/ra-language-english/index.js
@@ -58,6 +58,9 @@ module.exports = {
                 single_missing:
                     'Associated reference no longer appears to be available.',
             },
+            password: {
+                toggle_visibility: 'Toggle visibility',
+            },
         },
         message: {
             about: 'About',

diff --git a/packages/ra-language-french/index.js b/packages/ra-language-french/index.js
@@ -60,6 +60,9 @@ module.exports = {
                 single_missing:
                     'La référence associée ne semble plus disponible.',
             },
+            password: {
+                toggle_visibility: 'Afficher / Cacher',
+            },
         },
         message: {
             about: 'Au sujet de',

diff --git a/packages/ra-ui-materialui/src/input/PasswordInput.js b/packages/ra-ui-materialui/src/input/PasswordInput.js
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import compose from 'recompose/compose';
+import { addField, translate } from 'ra-core';
+
+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';
+
+import TextInput from './TextInput';
+
+const PasswordInput = ({ translate, initiallyVisible, ...rest }) => {
+    const [visible, setVisible] = useState(initiallyVisible);
+
+    return (
+        <TextInput
+            {...rest}
+            type={visible ? 'text' : 'password'}
+            InputProps={{
+                endAdornment: (
+                    <InputAdornment position="end">
+                        <IconButton
+                            aria-label={translate(
+                                'ra.input.password.toggle_visibility'
+                            )}
+                            onClick={() => setVisible(!visible)}
+                        >
+                            {visible ? <Visibility /> : <VisibilityOff />}
+                        </IconButton>
+                    </InputAdornment>
+                ),
+            }}
+        />
+    );
+};
+
+PasswordInput.propTypes = {
+    translate: PropTypes.func.isRequired,
+    initiallyVisible: PropTypes.bool,
+};
+
+PasswordInput.defaultProps = {
+    initiallyVisible: false,
+};
+
+export default compose(
+    translate,
+    addField
+)(PasswordInput);
diff --git a/packages/ra-ui-materialui/src/input/index.js b/packages/ra-ui-materialui/src/input/index.js
@@ -13,6 +13,7 @@ import Labeled from './Labeled';
 import LongTextInput from './LongTextInput';
 import NullableBooleanInput from './NullableBooleanInput';
 import NumberInput from './NumberInput';
+import PasswordInput from './PasswordInput';
 import RadioButtonGroupInput from './RadioButtonGroupInput';
 import ReferenceArrayInput from './ReferenceArrayInput';
 import ReferenceInput from './ReferenceInput';
@@ -38,6 +39,7 @@ export {
     LongTextInput,
     NullableBooleanInput,
     NumberInput,
+    PasswordInput,
     RadioButtonGroupInput,
     ReferenceArrayInput,
     ReferenceInput,