From 079778997aa824aeeb2b98bae11a1757b3b87e1d Mon Sep 17 00:00:00 2001
From: =?utf8?q?Gr=C3=A9goire=20Aubert?= <gregoire.aubert@sonarsource.com>
Date: Fri, 27 Apr 2018 10:51:26 +0200
Subject: [PATCH] SONAR-10325 Add "advanced" url query flag to display
 login/password form on SonarCloud login page

---
 .../sessions/components/LoginContainer.tsx    | 18 +++++--
 .../sessions/components/LoginSonarCloud.css   |  5 +-
 .../sessions/components/LoginSonarCloud.tsx   | 34 +++++++++---
 .../__tests__/LoginSonarCloud-test.tsx        | 16 ++++++
 .../LoginSonarCloud-test.tsx.snap             | 54 +++++++++++++++++++
 5 files changed, 114 insertions(+), 13 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/sessions/components/LoginContainer.tsx b/server/sonar-web/src/main/js/apps/sessions/components/LoginContainer.tsx
index 04396a37d99..2750f8f083e 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/LoginContainer.tsx
+++ b/server/sonar-web/src/main/js/apps/sessions/components/LoginContainer.tsx
@@ -27,17 +27,23 @@ import { getIdentityProviders } from '../../../api/users';
 import { IdentityProvider } from '../../../app/types';
 import { getBaseUrl } from '../../../helpers/urls';
 
-interface Props {
-  doLogin: (login: string, password: string) => Promise<void>;
+interface OwnProps {
   location: {
     hash?: string;
     pathName: string;
     query: {
+      advanced?: string;
       return_to?: string; // eslint-disable-line camelcase
     };
   };
 }
 
+interface DispatchToProps {
+  doLogin: (login: string, password: string) => Promise<void>;
+}
+
+type Props = OwnProps & DispatchToProps;
+
 interface State {
   identityProviders?: IdentityProvider[];
 }
@@ -84,6 +90,7 @@ class LoginContainer extends React.PureComponent<Props, State> {
   };
 
   render() {
+    const { location } = this.props;
     const { identityProviders } = this.state;
     if (!identityProviders) {
       return null;
@@ -95,6 +102,7 @@ class LoginContainer extends React.PureComponent<Props, State> {
           identityProviders={identityProviders}
           onSubmit={this.handleSubmit}
           returnTo={this.getReturnUrl()}
+          showForm={location.query['advanced'] !== undefined}
         />
       );
     }
@@ -110,6 +118,8 @@ class LoginContainer extends React.PureComponent<Props, State> {
 }
 
 const mapStateToProps = null;
-const mapDispatchToProps = { doLogin };
+const mapDispatchToProps = { doLogin: doLogin as any };
 
-export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer as any);
+export default connect<{}, DispatchToProps, OwnProps>(mapStateToProps, mapDispatchToProps)(
+  LoginContainer
+);
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/LoginSonarCloud.css b/server/sonar-web/src/main/js/apps/sessions/components/LoginSonarCloud.css
index b618673b4db..e88cfb3e387 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/LoginSonarCloud.css
+++ b/server/sonar-web/src/main/js/apps/sessions/components/LoginSonarCloud.css
@@ -25,6 +25,10 @@
   padding: calc(2 * var(--gridSize)) 20px;
 }
 
+.sonarcloud-login-page-large {
+  width: 300px;
+}
+
 .sonarcloud-login-title {
   line-height: 1.5;
   font-size: var(--bigFontSize);
@@ -38,7 +42,6 @@
 }
 
 .sonarcloud-oauth-providers.oauth-providers > ul > li > a > span {
-  font-weight: 600;
   padding-left: calc(1.5 * var(--gridSize));
 }
 
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/LoginSonarCloud.tsx b/server/sonar-web/src/main/js/apps/sessions/components/LoginSonarCloud.tsx
index 9df3ffd6a56..80843135a5d 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/LoginSonarCloud.tsx
+++ b/server/sonar-web/src/main/js/apps/sessions/components/LoginSonarCloud.tsx
@@ -18,6 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as classNames from 'classnames';
+import LoginForm from './LoginForm';
 import OAuthProviders from './OAuthProviders';
 import { IdentityProvider } from '../../../app/types';
 import { getHostUrl } from '../../../helpers/urls';
@@ -26,12 +28,24 @@ import './LoginSonarCloud.css';
 
 interface Props {
   identityProviders: IdentityProvider[];
+  onSubmit: (login: string, password: string) => Promise<void>;
   returnTo: string;
+  showForm?: boolean;
 }
 
-export default function LoginSonarCloud({ identityProviders, returnTo }: Props) {
+export default function LoginSonarCloud({
+  identityProviders,
+  onSubmit,
+  returnTo,
+  showForm
+}: Props) {
+  const displayForm = showForm || identityProviders.length <= 0;
   return (
-    <div className="sonarcloud-login-page boxed-group boxed-group-inner" id="login_form">
+    <div
+      className={classNames('sonarcloud-login-page boxed-group boxed-group-inner', {
+        'sonarcloud-login-page-large': displayForm
+      })}
+      id="login_form">
       <div className="text-center">
         <img
           alt="SonarCloud logo"
@@ -44,12 +58,16 @@ export default function LoginSonarCloud({ identityProviders, returnTo }: Props)
         </h1>
       </div>
 
-      <OAuthProviders
-        className="sonarcloud-oauth-providers"
-        formatLabel={formatLabel}
-        identityProviders={identityProviders}
-        returnTo={returnTo}
-      />
+      {displayForm ? (
+        <LoginForm onSubmit={onSubmit} returnTo={returnTo} />
+      ) : (
+        <OAuthProviders
+          className="sonarcloud-oauth-providers"
+          formatLabel={formatLabel}
+          identityProviders={identityProviders}
+          returnTo={returnTo}
+        />
+      )}
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/__tests__/LoginSonarCloud-test.tsx b/server/sonar-web/src/main/js/apps/sessions/components/__tests__/LoginSonarCloud-test.tsx
index 0fa5c7ae1da..f29a3d8b963 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/__tests__/LoginSonarCloud-test.tsx
+++ b/server/sonar-web/src/main/js/apps/sessions/components/__tests__/LoginSonarCloud-test.tsx
@@ -34,3 +34,19 @@ it('logs in with identity provider', () => {
   );
   expect(wrapper).toMatchSnapshot();
 });
+
+it('logs in with simple form', () => {
+  expect(
+    shallow(
+      <LoginSonarCloud
+        identityProviders={[identityProvider]}
+        onSubmit={jest.fn()}
+        returnTo=""
+        showForm={true}
+      />
+    )
+  ).toMatchSnapshot();
+  expect(
+    shallow(<LoginSonarCloud identityProviders={[]} onSubmit={jest.fn()} returnTo="" />)
+  ).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/LoginSonarCloud-test.tsx.snap b/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/LoginSonarCloud-test.tsx.snap
index a14d1983c52..7a2921af8dd 100644
--- a/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/LoginSonarCloud-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/sessions/components/__tests__/__snapshots__/LoginSonarCloud-test.tsx.snap
@@ -37,3 +37,57 @@ exports[`logs in with identity provider 1`] = `
   />
 </div>
 `;
+
+exports[`logs in with simple form 1`] = `
+<div
+  className="sonarcloud-login-page boxed-group boxed-group-inner sonarcloud-login-page-large"
+  id="login_form"
+>
+  <div
+    className="text-center"
+  >
+    <img
+      alt="SonarCloud logo"
+      height={36}
+      src="null/images/sc-icon.svg"
+      width={36}
+    />
+    <h1
+      className="sonarcloud-login-title"
+    >
+      login.login_or_signup_to_sonarcloud
+    </h1>
+  </div>
+  <LoginForm
+    onSubmit={[MockFunction]}
+    returnTo=""
+  />
+</div>
+`;
+
+exports[`logs in with simple form 2`] = `
+<div
+  className="sonarcloud-login-page boxed-group boxed-group-inner sonarcloud-login-page-large"
+  id="login_form"
+>
+  <div
+    className="text-center"
+  >
+    <img
+      alt="SonarCloud logo"
+      height={36}
+      src="null/images/sc-icon.svg"
+      width={36}
+    />
+    <h1
+      className="sonarcloud-login-title"
+    >
+      login.login_or_signup_to_sonarcloud
+    </h1>
+  </div>
+  <LoginForm
+    onSubmit={[MockFunction]}
+    returnTo=""
+  />
+</div>
+`;
-- 
2.39.5