From b9b336898854f7adb47cf0b4a2408a154d4c1856 Mon Sep 17 00:00:00 2001
From: Luis Deschamps Rudge <luis@luisrudge.net>
Date: Tue, 12 Jun 2018 18:47:14 -0300
Subject: [PATCH 1/2] In SSO mode, hide the password input instead of removing
 it from the DOM

---
 css/index.styl                                |  3 +++
 .../__snapshots__/login_pane.test.jsx.snap    | 14 +++++++++++++
 .../__snapshots__/password_pane.test.jsx.snap | 20 +++++++++++++++++++
 src/__tests__/field/password_pane.test.jsx    |  4 ++++
 src/connection/database/login_pane.jsx        | 11 +++++-----
 src/field/password/password_pane.jsx          |  8 +++++---
 6 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/css/index.styl b/css/index.styl
index ebff6b2dd..a1954501d 100644
--- a/css/index.styl
+++ b/css/index.styl
@@ -1361,3 +1361,6 @@ tabsHeight = 40px
 
 input[type="button"]
    cursor pointer
+
+.auth0-lock-hidden
+  display: none
\ No newline at end of file
diff --git a/src/__tests__/field/__snapshots__/login_pane.test.jsx.snap b/src/__tests__/field/__snapshots__/login_pane.test.jsx.snap
index 286189c22..e0977b991 100644
--- a/src/__tests__/field/__snapshots__/login_pane.test.jsx.snap
+++ b/src/__tests__/field/__snapshots__/login_pane.test.jsx.snap
@@ -12,6 +12,7 @@ exports[`LoginPane hides password link when lock does not have the screen \`forg
   />
   <div
     data-__type="password_pane"
+    data-hidden={false}
     data-i18n={Object {}}
     data-lock={Object {}}
     data-placeholder="passwordInputPlaceholder"
@@ -31,6 +32,7 @@ exports[`LoginPane hides password link when showForgotPasswordLink === false 1`]
   />
   <div
     data-__type="password_pane"
+    data-hidden={false}
     data-i18n={Object {}}
     data-lock={Object {}}
     data-placeholder="passwordInputPlaceholder"
@@ -48,6 +50,13 @@ exports[`LoginPane hides password pane when showPassword===false 1`] = `
     data-usernameStyle={undefined}
     data-validateFormat={false}
   />
+  <div
+    data-__type="password_pane"
+    data-hidden={true}
+    data-i18n={Object {}}
+    data-lock={Object {}}
+    data-placeholder="passwordInputPlaceholder"
+  />
   <p
     className="auth0-lock-alternative"
   >
@@ -74,6 +83,7 @@ exports[`LoginPane renders correctly 1`] = `
   />
   <div
     data-__type="password_pane"
+    data-hidden={false}
     data-i18n={Object {}}
     data-lock={Object {}}
     data-placeholder="passwordInputPlaceholder"
@@ -103,6 +113,7 @@ exports[`LoginPane shows email pane when user usernameStyle === email 1`] = `
   />
   <div
     data-__type="password_pane"
+    data-hidden={false}
     data-i18n={Object {}}
     data-lock={Object {}}
     data-placeholder="passwordInputPlaceholder"
@@ -136,6 +147,7 @@ exports[`LoginPane shows header when instructions is not empty 1`] = `
   />
   <div
     data-__type="password_pane"
+    data-hidden={false}
     data-i18n={Object {}}
     data-lock={Object {}}
     data-placeholder="passwordInputPlaceholder"
@@ -166,6 +178,7 @@ exports[`LoginPane shows username pane when user usernameStyle !== email 1`] = `
   />
   <div
     data-__type="password_pane"
+    data-hidden={false}
     data-i18n={Object {}}
     data-lock={Object {}}
     data-placeholder="passwordInputPlaceholder"
@@ -196,6 +209,7 @@ exports[`LoginPane shows username pane when user usernameStyle !== email 2`] = `
   />
   <div
     data-__type="password_pane"
+    data-hidden={false}
     data-i18n={Object {}}
     data-lock={Object {}}
     data-placeholder="passwordInputPlaceholder"
diff --git a/src/__tests__/field/__snapshots__/password_pane.test.jsx.snap b/src/__tests__/field/__snapshots__/password_pane.test.jsx.snap
index eeeb03c7b..8eefc25f2 100644
--- a/src/__tests__/field/__snapshots__/password_pane.test.jsx.snap
+++ b/src/__tests__/field/__snapshots__/password_pane.test.jsx.snap
@@ -41,6 +41,26 @@ exports[`PasswordPane disables input when submitting 1`] = `
 </div>
 `;
 
+exports[`PasswordPane renders correct css className when \`hidden\` is true 1`] = `
+<div
+  className="auth0-lock-input-block auth0-lock-input-show-password auth0-lock-hidden"
+>
+  <div
+    data-__type="password_input"
+    data-disabled={false}
+    data-invalidHint="blankErrorHint"
+    data-isValid={false}
+    data-onChange={[Function]}
+    data-placeholder="placeholder"
+    data-policy="policy"
+    data-showPassword="showPassword"
+    data-showPasswordStrengthMessage={false}
+    data-strengthMessages={Object {}}
+    data-value="password"
+  />
+</div>
+`;
+
 exports[`PasswordPane renders correctly 1`] = `
 <div
   className="auth0-lock-input-block auth0-lock-input-show-password"
diff --git a/src/__tests__/field/password_pane.test.jsx b/src/__tests__/field/password_pane.test.jsx
index 405270d6c..5d9e33e69 100644
--- a/src/__tests__/field/password_pane.test.jsx
+++ b/src/__tests__/field/password_pane.test.jsx
@@ -55,6 +55,10 @@ describe('PasswordPane', () => {
     const PasswordPane = getComponent();
     expectComponent(<PasswordPane {...defaultProps} />).toMatchSnapshot();
   });
+  it('renders correct css className when `hidden` is true', () => {
+    const PasswordPane = getComponent();
+    expectComponent(<PasswordPane {...defaultProps} hidden />).toMatchSnapshot();
+  });
   it('disables input when submitting', () => {
     require('core/index').submitting = () => true;
     const PasswordPane = getComponent();
diff --git a/src/connection/database/login_pane.jsx b/src/connection/database/login_pane.jsx
index 172fbf6e3..c61a680da 100644
--- a/src/connection/database/login_pane.jsx
+++ b/src/connection/database/login_pane.jsx
@@ -49,10 +49,6 @@ export default class LoginPane extends React.Component {
         />
       );
 
-    const passwordPane = showPassword ? (
-      <PasswordPane i18n={i18n} lock={lock} placeholder={passwordInputPlaceholder} />
-    ) : null;
-
     const dontRememberPassword =
       showForgotPasswordLink && hasScreen(lock, 'forgotPassword') ? (
         <p className="auth0-lock-alternative">
@@ -70,7 +66,12 @@ export default class LoginPane extends React.Component {
       <div>
         {header}
         {fieldPane}
-        {passwordPane}
+        <PasswordPane
+          i18n={i18n}
+          lock={lock}
+          placeholder={passwordInputPlaceholder}
+          hidden={!showPassword}
+        />
         {dontRememberPassword}
       </div>
     );
diff --git a/src/field/password/password_pane.jsx b/src/field/password/password_pane.jsx
index 4af4e7347..d6285432f 100644
--- a/src/field/password/password_pane.jsx
+++ b/src/field/password/password_pane.jsx
@@ -17,9 +17,10 @@ export default class PasswordPane extends React.Component {
   };
 
   render() {
-    const { i18n, lock, placeholder, policy, strengthMessages } = this.props;
+    const { i18n, lock, placeholder, policy, strengthMessages, hidden } = this.props;
+    const hiddenCss = hidden ? ' auth0-lock-hidden' : '';
     return (
-      <div className="auth0-lock-input-block auth0-lock-input-show-password">
+      <div className={`auth0-lock-input-block auth0-lock-input-show-password${hiddenCss}`}>
         <PasswordInput
           value={c.getFieldValue(lock, 'password')}
           invalidHint={i18n.str('blankErrorHint')}
@@ -49,5 +50,6 @@ PasswordPane.propTypes = {
   onChange: PropTypes.func,
   placeholder: PropTypes.string.isRequired,
   policy: PropTypes.string,
-  strengthMessages: PropTypes.object
+  strengthMessages: PropTypes.object,
+  hidden: PropTypes.bool
 };

From 7687e41e02877627cb7aa31d97e20918b41a9c9a Mon Sep 17 00:00:00 2001
From: Luis Deschamps Rudge <luis@luisrudge.net>
Date: Tue, 12 Jun 2018 19:37:07 -0300
Subject: [PATCH 2/2] Fix test

---
 test/helper/ui.js      | 3 +++
 test/layout.ui.test.js | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/test/helper/ui.js b/test/helper/ui.js
index 703d3994c..0daf79989 100644
--- a/test/helper/ui.js
+++ b/test/helper/ui.js
@@ -179,6 +179,9 @@ export const hasOneSocialBigButton = hasOneViewFn(
   '.auth0-lock-social-button.auth0-lock-social-big-button'
 );
 export const hasPasswordInput = hasInputFn('password');
+export const hasHiddenPasswordInput = lock =>
+  hasFn('.auth0-lock-input-block.auth0-lock-input-show-password.auth0-lock-hidden')(lock) &&
+  hasPasswordInput(lock);
 export const hasTermsCheckbox = hasFn(
   ".auth0-lock-sign-up-terms-agreement label input[type='checkbox']"
 );
diff --git a/test/layout.ui.test.js b/test/layout.ui.test.js
index cd69bc1a0..609933d0b 100644
--- a/test/layout.ui.test.js
+++ b/test/layout.ui.test.js
@@ -208,7 +208,7 @@ describe('layout', function() {
       expect(h.hasSocialButtons(this.lock)).to.not.be.ok();
       expect(h.hasEmailInput(this.lock)).to.be.ok();
       expect(h.hasUsernameInput(this.lock)).to.not.be.ok();
-      expect(h.hasPasswordInput(this.lock)).to.not.be.ok();
+      expect(h.hasHiddenPasswordInput(this.lock)).to.be.ok();
       expect(h.hasAlternativeLink(this.lock)).to.not.be.ok(); // forgot password
       expect(h.hasSubmitButton(this.lock)).to.be.ok();
     });
@@ -233,7 +233,7 @@ describe('layout', function() {
       expect(h.hasSocialButtons(this.lock)).to.not.be.ok();
       expect(h.hasEmailInput(this.lock)).to.be.ok();
       expect(h.hasUsernameInput(this.lock)).to.not.be.ok();
-      expect(h.hasPasswordInput(this.lock)).to.not.be.ok();
+      expect(h.hasHiddenPasswordInput(this.lock)).to.be.ok();
       expect(h.hasAlternativeLink(this.lock)).to.not.be.ok(); // forgot password
       expect(h.hasSubmitButton(this.lock)).to.be.ok();
     });