Add allowPasswordAutocomplete option (#1419)

resolves #1406

README.md

@@ -246,6 +246,7 @@ The appearance of the widget and the mechanics of authentication can be customiz
 - **allowAutocomplete {Boolean}**: Determines whether or not the the email or username inputs will allow autocomplete (`<input autocomplete />`). Defaults to `false`.
 - **scrollGlobalMessagesIntoView {Boolean}**: Determines whether or not a globalMessage should be scrolled into the user's viewport. Defaults to `true`.
 - **allowShowPassword {Boolean}**: Determines whether or not add a checkbox to show the password when typing it. Defaults to `false`.
+- **allowPasswordAutocomplete {Boolean}**: Determines whether the password field will allow autocomplete; setting this to `true` is required for password manager support and to avoid many cases of adverse behaviour. Defaults to `false`.
 
 
 #### Theming options

src/__tests__/core/__snapshots__/index.test.js.snap

@@ -58,6 +58,7 @@ Object {
   "tenantBaseUrl": "https://domain/info-v1.js",
   "ui": Object {
     "allowAutocomplete": false,
+    "allowPasswordAutocomplete": false,
     "allowShowPassword": false,
     "appendContainer": true,
     "authButtonsTheme": Object {},

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

@@ -30,6 +30,7 @@ exports[`PasswordPane disables input when submitting 1`] = `
     data-disabled={true}
     data-invalidHint="blankErrorHint"
     data-isValid={false}
+    data-lock={Object {}}
     data-onChange={[Function]}
     data-placeholder="placeholder"
     data-policy="policy"
@@ -50,6 +51,7 @@ exports[`PasswordPane renders correct css className when \`hidden\` is true 1`]
     data-disabled={false}
     data-invalidHint="blankErrorHint"
     data-isValid={false}
+    data-lock={Object {}}
     data-onChange={[Function]}
     data-placeholder="placeholder"
     data-policy="policy"
@@ -70,6 +72,7 @@ exports[`PasswordPane renders correctly 1`] = `
     data-disabled={false}
     data-invalidHint="blankErrorHint"
     data-isValid={false}
+    data-lock={Object {}}
     data-onChange={[Function]}
     data-placeholder="placeholder"
     data-policy="policy"
@@ -90,6 +93,7 @@ exports[`PasswordPane renders correctly when \`allowShowPassword\` is true 1`] =
     data-disabled={false}
     data-invalidHint="blankErrorHint"
     data-isValid={false}
+    data-lock={Object {}}
     data-onChange={[Function]}
     data-placeholder="placeholder"
     data-policy="policy"
@@ -123,6 +127,7 @@ exports[`PasswordPane sets isValid as true when \`isFieldVisiblyInvalid\` is fal
     data-disabled={false}
     data-invalidHint="blankErrorHint"
     data-isValid={true}
+    data-lock={Object {}}
     data-onChange={[Function]}
     data-placeholder="placeholder"
     data-policy="policy"
@@ -143,6 +148,7 @@ exports[`PasswordPane sets showPasswordStrengthMessage as false when \`isFieldVa
     data-disabled={false}
     data-invalidHint="blankErrorHint"
     data-isValid={false}
+    data-lock={Object {}}
     data-onChange={[Function]}
     data-placeholder="placeholder"
     data-policy="policy"
@@ -163,6 +169,7 @@ exports[`PasswordPane sets showPasswordStrengthMessage as true when \`isFieldVal
     data-disabled={false}
     data-invalidHint="blankErrorHint"
     data-isValid={false}
+    data-lock={Object {}}
     data-onChange={[Function]}
     data-placeholder="placeholder"
     data-policy="policy"

src/core/index.js

@@ -157,7 +157,9 @@ export function stopRendering(m) {
 function extractUIOptions(id, options) {
   const closable = options.container
     ? false
-    : undefined === options.closable ? true : !!options.closable;
+    : undefined === options.closable
+      ? true
+      : !!options.closable;
   const theme = options.theme || {};
   const { labeledSubmitButton, hideMainScreenTitle, logo, primaryColor, authButtons } = theme;
 
@@ -193,6 +195,7 @@ function extractUIOptions(id, options) {
     allowAutocomplete: !!options.allowAutocomplete,
     authButtonsTheme: typeof authButtons === 'object' ? authButtons : {},
     allowShowPassword: !!options.allowShowPassword,
+    allowPasswordAutocomplete: !!options.allowPasswordAutocomplete,
     scrollGlobalMessagesIntoView:
       undefined === options.scrollGlobalMessagesIntoView
         ? true
@@ -229,7 +232,9 @@ export const ui = {
   rememberLastLogin: m => tget(m, 'rememberLastLogin', getUIAttribute(m, 'rememberLastLogin')),
   allowAutocomplete: m => tget(m, 'allowAutocomplete', getUIAttribute(m, 'allowAutocomplete')),
   scrollGlobalMessagesIntoView: lock => getUIAttribute(lock, 'scrollGlobalMessagesIntoView'),
-  allowShowPassword: m => tget(m, 'allowShowPassword', getUIAttribute(m, 'allowShowPassword'))
+  allowShowPassword: m => tget(m, 'allowShowPassword', getUIAttribute(m, 'allowShowPassword')),
+  allowPasswordAutocomplete: m =>
+    tget(m, 'allowPasswordAutocomplete', getUIAttribute(m, 'allowPasswordAutocomplete'))
 };
 
 const { get: getAuthAttribute } = dataFns(['core', 'auth']);
@@ -616,6 +621,9 @@ export function overrideOptions(m, opts) {
   if (typeof opts.allowShowPassword === 'boolean') {
     m = tset(m, 'allowShowPassword', opts.allowShowPassword);
   }
+  if (typeof opts.allowPasswordAutocomplete === 'boolean') {
+    m = tset(m, 'allowPasswordAutocomplete', opts.allowPasswordAutocomplete);
+  }
 
   return m;
 }

src/field/password/password_pane.jsx

@@ -32,6 +32,7 @@ export default class PasswordPane extends React.Component {
           disabled={l.submitting(lock)}
           policy={policy}
           showPassword={c.getFieldValue(lock, 'showPassword', false)}
+          lock={lock}
         />
         {l.ui.allowShowPassword(lock) && (
           <div className="auth0-lock-show-password">

src/ui/input/password_input.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import InputWrap from './input_wrap';
 import PasswordStrength from './password/password_strength';
+import * as l from '../../core/index';
 
 export const icon =
   '<svg focusable="false" width="11px" height="14px" viewBox="0 0 13 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="auth0-lock-icon auth0-lock-icon-box"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-288.000000, -1508.000000)" fill="#888888"><path d="M299,1523.998 L290,1523.998 C288.896,1523.998 288,1523.102 288,1521.999 L288,1515.999 C288,1514.895 288.896,1513.998 290,1513.998 L290,1513.998 L290,1512.499 C290,1510.015 292.015,1507.999 294.5,1507.999 C296.985,1507.999 299,1510.015 299,1512.499 L299,1513.999 C300.104,1513.999 301,1514.895 301,1515.999 L301,1521.999 C301,1523.103 300.104,1523.998 299,1523.998 L299,1523.998 Z M298,1512.499 C298,1510.566 296.433,1508.999 294.5,1508.999 C292.567,1508.999 291,1510.566 291,1512.499 L291,1513.998 L298,1513.998 L298,1512.499 L298,1512.499 Z M300,1515.999 C300,1515.446 299.552,1514.998 299,1514.998 L290,1514.998 C289.447,1514.998 289,1515.446 289,1515.999 L289,1521.999 C289,1522.551 289.447,1522.998 290,1522.998 L299,1522.998 C299.552,1522.998 300,1522.551 300,1521.999 L300,1515.999 L300,1515.999 Z M294.5,1520.998 C294.224,1520.998 294,1520.774 294,1520.498 L294,1517.498 C294,1517.223 294.224,1516.999 294.5,1516.999 C294.776,1516.999 295,1517.223 295,1517.498 L295,1520.498 C295,1520.774 294.776,1520.998 294.5,1520.998 L294.5,1520.998 Z"></path></g></g></svg>';
@@ -16,7 +17,8 @@ export default class PasswordInput extends React.Component {
     policy: PropTypes.string,
     strengthMessages: PropTypes.object,
     value: PropTypes.string.isRequired,
-    showPassword: PropTypes.bool.isRequired
+    showPassword: PropTypes.bool.isRequired,
+    lock: PropTypes.object.isRequired
   };
 
   constructor(props) {
@@ -42,11 +44,14 @@ export default class PasswordInput extends React.Component {
       strengthMessages,
       value,
       showPassword,
+      lock,
       ...props
     } = this.props;
 
     const { focused, changing } = this.state;
 
+    const allowPasswordAutocomplete = l.ui.allowPasswordAutocomplete(lock);
+
     const passwordStrength =
       policy && focused && changing && showPasswordStrengthMessage ? (
         <PasswordStrength messages={strengthMessages} password={value} policy={policy} />
@@ -66,7 +71,7 @@ export default class PasswordInput extends React.Component {
           type={showPassword ? 'text' : 'password'}
           name="password"
           className="auth0-lock-input"
-          autoComplete="off"
+          autoComplete={allowPasswordAutocomplete}
           autoCapitalize="off"
           onChange={::this.handleOnChange}
           onFocus={::this.handleFocus}