adding allowAutoComplete ui option

Author: luisrudge

README.md

@@ -187,6 +187,7 @@ The appearance of the widget and the mechanics of authentication can be customiz
 - **flashMessage {Object}**: Shows an `error` or `success` flash message when Lock is shown.
   + **type {String}**: The message type, it should be `error` or `success`.
   + **text {String}**: The text to show.
+- **allowAutocomplete {Boolean}**: Determines whether or not the the email or username inputs will allow autocomplete (`<input autocomplete />`). Defaults to `false`.
 
 #### Theming options
 

src/__tests__/field/__snapshots__/email_pane.test.jsx.snap

@@ -13,6 +13,7 @@ Array [
 exports[`EmailPane renders correctly 1`] = `
 <div
   data-__type="email_input"
+  data-autoComplete={false}
   data-invalidHint="invalidErrorHint"
   data-isValid={false}
   data-onChange={[Function]}
@@ -24,6 +25,7 @@ exports[`EmailPane renders correctly 1`] = `
 exports[`EmailPane sets \`blankErrorHint\` when username is empty 1`] = `
 <div
   data-__type="email_input"
+  data-autoComplete={false}
   data-invalidHint="blankErrorHint"
   data-isValid={false}
   data-onChange={[Function]}
@@ -32,9 +34,22 @@ exports[`EmailPane sets \`blankErrorHint\` when username is empty 1`] = `
 />
 `;
 
+exports[`EmailPane sets autoComplete to true when \`allowAutocomplete\` is true 1`] = `
+<div
+  data-__type="email_input"
+  data-autoComplete={true}
+  data-invalidHint="invalidErrorHint"
+  data-isValid={false}
+  data-onChange={[Function]}
+  data-placeholder="placeholder"
+  data-value="user@example.com"
+/>
+`;
+
 exports[`EmailPane sets isValid as true when \`isFieldVisiblyInvalid\` is false 1`] = `
 <div
   data-__type="email_input"
+  data-autoComplete={false}
   data-invalidHint="invalidErrorHint"
   data-isValid={true}
   data-onChange={[Function]}

src/__tests__/field/__snapshots__/username_pane.test.jsx.snap

@@ -15,6 +15,7 @@ Array [
 exports[`UsernamePane renders correctly 1`] = `
 <div
   data-__type="username_input"
+  data-autoComplete={false}
   data-invalidHint="invalidErrorHint"
   data-isValid={false}
   data-onChange={[Function]}
@@ -26,6 +27,7 @@ exports[`UsernamePane renders correctly 1`] = `
 exports[`UsernamePane sets \`blankErrorHint\` when username is empty 1`] = `
 <div
   data-__type="username_input"
+  data-autoComplete={false}
   data-invalidHint="blankErrorHint"
   data-isValid={false}
   data-onChange={[Function]}
@@ -37,6 +39,7 @@ exports[`UsernamePane sets \`blankErrorHint\` when username is empty 1`] = `
 exports[`UsernamePane sets \`usernameFormatErrorHint\` when usernameLooksLikeEmail() returns false and \`validateFormat\` is true 1`] = `
 <div
   data-__type="username_input"
+  data-autoComplete={false}
   data-invalidHint="usernameFormatErrorHint,min,max"
   data-isValid={false}
   data-onChange={[Function]}
@@ -45,9 +48,22 @@ exports[`UsernamePane sets \`usernameFormatErrorHint\` when usernameLooksLikeEma
 />
 `;
 
+exports[`UsernamePane sets autoComplete to true when \`allowAutocomplete\` is true 1`] = `
+<div
+  data-__type="username_input"
+  data-autoComplete={true}
+  data-invalidHint="invalidErrorHint"
+  data-isValid={false}
+  data-onChange={[Function]}
+  data-placeholder="placeholder"
+  data-value="username"
+/>
+`;
+
 exports[`UsernamePane sets isValid as true when \`isFieldVisiblyInvalid\` is false 1`] = `
 <div
   data-__type="username_input"
+  data-autoComplete={false}
   data-invalidHint="invalidErrorHint"
   data-isValid={true}
   data-onChange={[Function]}

src/__tests__/field/email_pane.test.jsx

@@ -38,7 +38,8 @@ describe('EmailPane', () => {
     jest.mock('core/index', () => ({
       id: () => 1,
       ui: {
-        avatar: () => false
+        avatar: () => false,
+        allowAutocomplete: () => false
       }
     }));
 
@@ -75,6 +76,12 @@ describe('EmailPane', () => {
 
     expectComponent(<EmailPane {...defaultProps} />).toMatchSnapshot();
   });
+  it('sets autoComplete to true when `allowAutocomplete` is true', () => {
+    require('core/index').ui.allowAutocomplete = () => true;
+    let EmailPane = getComponent();
+
+    expectComponent(<EmailPane {...defaultProps} />).toMatchSnapshot();
+  });
   it('fetches the avatar on componentDidMount if ui.avatar is true and there is a username', () => {
     require('core/index').ui.avatar = () => true;
     let EmailPane = getComponent();

src/__tests__/field/username_pane.test.jsx

@@ -40,7 +40,8 @@ describe('UsernamePane', () => {
     jest.mock('core/index', () => ({
       id: () => 1,
       ui: {
-        avatar: () => false
+        avatar: () => false,
+        allowAutocomplete: () => false
       }
     }));
 
@@ -81,6 +82,12 @@ describe('UsernamePane', () => {
 
     expectComponent(<UsernamePane {...defaultProps} />).toMatchSnapshot();
   });
+  it('sets autoComplete to true when `allowAutocomplete` is true', () => {
+    require('core/index').ui.allowAutocomplete = () => true;
+    let UsernamePane = getComponent();
+
+    expectComponent(<UsernamePane {...defaultProps} />).toMatchSnapshot();
+  });
   it('fetches the avatar on componentDidMount if ui.avatar is true and there is a username', () => {
     require('core/index').ui.avatar = () => true;
     let UsernamePane = getComponent();

src/core/index.js

@@ -153,6 +153,7 @@ function extractUIOptions(id, options) {
     popupOptions: undefined === options.popupOptions ? {} : options.popupOptions,
     primaryColor: typeof primaryColor === 'string' ? primaryColor : undefined,
     rememberLastLogin: undefined === options.rememberLastLogin ? true : !!options.rememberLastLogin,
+    allowAutocomplete: !!options.allowAutocomplete,
     authButtonsTheme: typeof authButtons === 'object' ? authButtons : {}
   });
 }
@@ -183,7 +184,8 @@ export const ui = {
   popupOptions: lock => getUIAttribute(lock, 'popupOptions'),
   primaryColor: lock => getUIAttribute(lock, 'primaryColor'),
   authButtonsTheme: lock => getUIAttribute(lock, 'authButtonsTheme'),
-  rememberLastLogin: m => tget(m, 'rememberLastLogin', getUIAttribute(m, 'rememberLastLogin'))
+  rememberLastLogin: m => tget(m, 'rememberLastLogin', getUIAttribute(m, 'rememberLastLogin')),
+  allowAutocomplete: m => tget(m, 'allowAutocomplete', getUIAttribute(m, 'allowAutocomplete'))
 };
 
 const { get: getAuthAttribute } = dataFns(['core', 'auth']);
@@ -575,6 +577,9 @@ export function overrideOptions(m, opts) {
   if (typeof opts.rememberLastLogin === 'boolean') {
     m = tset(m, 'rememberLastLogin', opts.rememberLastLogin);
   }
+  if (typeof opts.allowAutocomplete === 'boolean') {
+    m = tset(m, 'allowAutocomplete', opts.allowAutocomplete);
+  }
 
   return m;
 }

src/field/email/email_pane.jsx

@@ -26,6 +26,7 @@ export default class EmailPane extends React.Component {
 
   render() {
     const { i18n, lock, placeholder, forceInvalidVisibility = false } = this.props;
+    const allowAutocomplete = l.ui.allowAutocomplete(lock);
 
     const field = c.getField(lock, 'email');
     const value = field.get('value', '');
@@ -44,6 +45,7 @@ export default class EmailPane extends React.Component {
         isValid={isValid}
         onChange={::this.handleChange}
         placeholder={placeholder}
+        autoComplete={allowAutocomplete}
       />
     );
   }

src/field/username/username_pane.jsx

@@ -34,6 +34,7 @@ export default class UsernamePane extends React.Component {
 
   render() {
     const { i18n, lock, placeholder, validateFormat } = this.props;
+    const allowAutocomplete = l.ui.allowAutocomplete(lock);
     const value = c.getFieldValue(lock, 'username');
     const usernameValidation = validateFormat ? getUsernameValidation(lock) : {};
 
@@ -62,6 +63,7 @@ export default class UsernamePane extends React.Component {
         isValid={!c.isFieldVisiblyInvalid(lock, 'username')}
         onChange={::this.handleChange}
         placeholder={placeholder}
+        autoComplete={allowAutocomplete}
       />
     );
   }

src/ui/input/email_input.jsx

@@ -23,7 +23,7 @@ export default class EmailInput extends React.Component {
   }
 
   render() {
-    const { invalidHint, isValid, onChange, ...props } = this.props;
+    const { invalidHint, isValid, onChange, autoComplete, ...props } = this.props;
     const { focused } = this.state;
 
     return (
@@ -40,7 +40,7 @@ export default class EmailInput extends React.Component {
           name="email"
           className="auth0-lock-input"
           placeholder="yours@example.com"
-          autoComplete="off"
+          autoComplete={autoComplete ? 'on' : 'off'}
           autoCapitalize="off"
           onChange={::this.handleOnChange}
           onFocus={::this.handleFocus}

src/ui/input/username_input.jsx

@@ -23,7 +23,7 @@ export default class UsernameInput extends React.Component {
   }
 
   render() {
-    const { invalidHint, isValid, onChange, ...props } = this.props;
+    const { invalidHint, isValid, onChange, autoComplete, ...props } = this.props;
     const { focused } = this.state;
 
     return (
@@ -40,7 +40,7 @@ export default class UsernameInput extends React.Component {
           name="username"
           className="auth0-lock-input"
           placeholder="username"
-          autoComplete="off"
+          autoComplete={autoComplete ? 'on' : 'off'}
           autoCapitalize="off"
           spellCheck="off"
           autoCorrect="off"