SONAR-10325 Add "advanced" url query flag to display login/password form on SonarClou...

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 04396a37d99f548153b550c97786a4854ac818b2..2750f8f083e85f170e1ab9c9a38fb17f987db669 100644 (file)
--- 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 b618673b4db393dcb220552eff525ae289e47d12..e88cfb3e3870015772c95315cad8a8798fbd1212 100644 (file)
--- 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 9df3ffd6a5667f1b412794c197a1a92e2c240f36..80843135a5debeb7f32b2ae40697c339a46b8be4 100644 (file)
--- 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 0fa5c7ae1da217788794c3419670783f93d4c567..f29a3d8b963f5b20493ed7c2b13ecac6e6a44fd6 100644 (file)
--- 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 a14d1983c520b1abb90b3f98c9b4e2e5d5322a65..7a2921af8dde14728959011a9262cf1dd837c6b4 100644 (file)
--- 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>
+`;