Merge pull request #1882 from auth0/blank-pw-hint

Show the "Can't be blank" message under the password input

css/index.styl

@@ -1210,6 +1210,7 @@ loadingSize = 30px
 .auth0-lock-password-strength
   width 100%
   bottom 41px
+  left 0
   // width calc(100% - 28px)
   display block
   text-align left

src/__tests__/ui/input/__snapshots__/input_wrap.test.jsx.snap

@@ -6,9 +6,10 @@ exports[`InputWrap renders correctly with the \`after\` prop 1`] = `
 >
   <div
     className="auth0-lock-input-wrap"
-  />
-  <span>
-    after
-  </span>
+  >
+    <span>
+      after
+    </span>
+  </div>
 </div>
 `;

src/__tests__/ui/input/password_input.test.jsx

@@ -3,6 +3,7 @@ import { mount, shallow } from 'enzyme';
 
 import { mockComponent } from 'testUtils';
 import { extractPropsFromWrapper } from '../../testUtils';
+import InputWrap from '../../../ui/input/input_wrap';
 
 jest.mock('ui/input/input_wrap', () => mockComponent('input_wrap'));
 jest.mock('ui/input/password/password_strength', () => mockComponent('password_strength'));
@@ -51,4 +52,9 @@ describe('PasswordInput', () => {
     const wrapper = mount(<Input {...defaultProps} />);
     expect(wrapper.find('input').props().autoComplete).toBe('off');
   });
+  test('shows invalid Hint', () => {
+    const Input = getComponent();
+    const wrapper = mount(<Input {...defaultProps} />);
+    expect(wrapper.find(InputWrap).props().invalidHint).toBe('invalidHint');
+  });
 });

src/ui/input/input_wrap.jsx

@@ -40,8 +40,8 @@ export default class InputWrap extends React.Component {
         <div className={wrapClassName}>
           {iconElement}
           {this.props.children}
+          {after}
         </div>
-        {after}
         {errorTooltip}
       </div>
     );

src/ui/input/password_input.jsx

@@ -61,7 +61,7 @@ export default class PasswordInput extends React.Component {
       <InputWrap
         after={passwordStrength}
         focused={focused}
-        invalidHint={policy ? undefined : invalidHint}
+        invalidHint={invalidHint}
         isValid={isValid}
         name="password"
         icon={icon}