From 73b5e7162e2adadc14fccfe7d39ecea3ec83fac1 Mon Sep 17 00:00:00 2001
From: adamjmcgrath <adam.mcgrath@auth0.com>
Date: Tue, 9 Jun 2020 11:51:10 +0100
Subject: [PATCH] Show the "Can't be blank" message under the password input

---
 css/index.styl                                           | 1 +
 .../ui/input/__snapshots__/input_wrap.test.jsx.snap      | 9 +++++----
 src/__tests__/ui/input/password_input.test.jsx           | 6 ++++++
 src/ui/input/input_wrap.jsx                              | 2 +-
 src/ui/input/password_input.jsx                          | 2 +-
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/css/index.styl b/css/index.styl
index 72ff6bcef..069d1ba61 100644
--- a/css/index.styl
+++ b/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
diff --git a/src/__tests__/ui/input/__snapshots__/input_wrap.test.jsx.snap b/src/__tests__/ui/input/__snapshots__/input_wrap.test.jsx.snap
index e0fbb3299..efbcc7323 100644
--- a/src/__tests__/ui/input/__snapshots__/input_wrap.test.jsx.snap
+++ b/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>
 `;
diff --git a/src/__tests__/ui/input/password_input.test.jsx b/src/__tests__/ui/input/password_input.test.jsx
index f53b8d5b2..f577af5dc 100644
--- a/src/__tests__/ui/input/password_input.test.jsx
+++ b/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');
+  });
 });
diff --git a/src/ui/input/input_wrap.jsx b/src/ui/input/input_wrap.jsx
index 6fc1cea6a..7392ea806 100644
--- a/src/ui/input/input_wrap.jsx
+++ b/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>
     );
diff --git a/src/ui/input/password_input.jsx b/src/ui/input/password_input.jsx
index 3e2a8ed5a..9fc8e551c 100644
--- a/src/ui/input/password_input.jsx
+++ b/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}