SONAR-14604 Improve reset password form layout

4 files changed, 93 insertions, 75 deletions

diff --git a/server/sonar-web/src/main/js/app/components/ResetPassword.css b/server/sonar-web/src/main/js/app/components/ResetPassword.css
deleted file mode 100644
index e0a344a0a42..00000000000
--- a/server/sonar-web/src/main/js/app/components/ResetPassword.css
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2021 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-.reset-page {
-  padding-top: 10vh;
-}
-
-.reset-page h1 {
-  line-height: 1.5;
-  font-size: 24px;
-  font-weight: 300;
-  text-align: center;
-}
-
-.reset-form {
-  width: 300px;
-  margin-left: auto;
-  margin-right: auto;
-}
diff --git a/server/sonar-web/src/main/js/app/components/ResetPassword.tsx b/server/sonar-web/src/main/js/app/components/ResetPassword.tsx
index 9a55f23a4d2..55ef8b4c88f 100644
--- a/server/sonar-web/src/main/js/app/components/ResetPassword.tsx
+++ b/server/sonar-web/src/main/js/app/components/ResetPassword.tsx
@@ -19,30 +19,37 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import ResetPasswordForm from '../../components/common/ResetPassword';
+import ResetPasswordForm from '../../components/common/ResetPasswordForm';
 import { whenLoggedIn } from '../../components/hoc/whenLoggedIn';
+import { getBaseUrl } from '../../helpers/system';
 import GlobalMessagesContainer from './GlobalMessagesContainer';
-import './ResetPassword.css';
 
 export interface ResetPasswordProps {
   currentUser: T.LoggedInUser;
 }
 
-export function ResetPassword(props: ResetPasswordProps) {
-  const { currentUser } = props;
-  const redirect = () => {
-    window.location.href = `/`; // force a refresh for the backend to handle additional redirects
-  };
-
+export function ResetPassword({ currentUser }: ResetPasswordProps) {
   return (
-    <div className="reset-page">
-      <h1 className="text-center spacer-bottom">{translate('my_account.reset_password')}</h1>
-      <h2 className="text-center huge-spacer-bottom">
-        {translate('my_account.reset_password.explain')}
-      </h2>
-      <GlobalMessagesContainer />
-      <div className="reset-form">
-        <ResetPasswordForm user={currentUser} onPasswordChange={redirect} />
+    <div className="page-wrapper-simple">
+      <div className="page-simple">
+        <GlobalMessagesContainer />
+
+        <h1 className="text-center huge">{translate('my_account.reset_password')}</h1>
+        <p className="text-center huge-spacer-top huge-spacer-bottom">
+          {translate('my_account.reset_password.explain')}
+        </p>
+
+        <div className="text-center">
+          <h2 className="big-spacer-bottom big">{translate('my_profile.password.title')}</h2>
+
+          <ResetPasswordForm
+            user={currentUser}
+            onPasswordChange={() => {
+              // Force a refresh for the backend to handle additional redirects.
+              window.location.href = getBaseUrl() + '/';
+            }}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/ResetPassword-test.tsx b/server/sonar-web/src/main/js/app/components/__tests__/ResetPassword-test.tsx
index 0f3093f3f51..56b33efcc57 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/ResetPassword-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/__tests__/ResetPassword-test.tsx
@@ -19,13 +19,50 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import ResetPasswordForm from '../../../components/common/ResetPasswordForm';
 import { mockLoggedInUser } from '../../../helpers/testMocks';
 import { ResetPassword, ResetPasswordProps } from '../ResetPassword';
 
+jest.mock('../../../helpers/system', () => ({
+  getBaseUrl: jest.fn().mockReturnValue('/context')
+}));
+
+const originalLocation = window.location;
+
+beforeAll(() => {
+  const location = {
+    ...window.location,
+    href: null
+  };
+  Object.defineProperty(window, 'location', {
+    writable: true,
+    value: location
+  });
+});
+
+afterAll(() => {
+  Object.defineProperty(window, 'location', {
+    writable: true,
+    value: originalLocation
+  });
+});
+
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot();
 });
 
+it('should navigate to the homepage after submission', () => {
+  const wrapper = shallowRender();
+  const form = wrapper.find(ResetPasswordForm);
+  const { onPasswordChange } = form.props();
+
+  if (onPasswordChange) {
+    onPasswordChange();
+  }
+
+  expect(window.location.href).toBe('/context/');
+});
+
 function shallowRender(props: Partial<ResetPasswordProps> = {}) {
   return shallow(<ResetPassword currentUser={mockLoggedInUser()} {...props} />);
 }
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/ResetPassword-test.tsx.snap b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/ResetPassword-test.tsx.snap
index ad2db130e85..cf445a7dcb5 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/ResetPassword-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/ResetPassword-test.tsx.snap
@@ -2,34 +2,43 @@
 
 exports[`should render correctly 1`] = `
 <div
-  className="reset-page"
+  className="page-wrapper-simple"
 >
-  <h1
-    className="text-center spacer-bottom"
-  >
-    my_account.reset_password
-  </h1>
-  <h2
-    className="text-center huge-spacer-bottom"
-  >
-    my_account.reset_password.explain
-  </h2>
-  <Connect(GlobalMessages) />
   <div
-    className="reset-form"
+    className="page-simple"
   >
-    <ResetPassword
-      onPasswordChange={[Function]}
-      user={
-        Object {
-          "groups": Array [],
-          "isLoggedIn": true,
-          "login": "luke",
-          "name": "Skywalker",
-          "scmAccounts": Array [],
+    <Connect(GlobalMessages) />
+    <h1
+      className="text-center huge"
+    >
+      my_account.reset_password
+    </h1>
+    <p
+      className="text-center huge-spacer-top huge-spacer-bottom"
+    >
+      my_account.reset_password.explain
+    </p>
+    <div
+      className="text-center"
+    >
+      <h2
+        className="big-spacer-bottom big"
+      >
+        my_profile.password.title
+      </h2>
+      <ResetPasswordForm
+        onPasswordChange={[Function]}
+        user={
+          Object {
+            "groups": Array [],
+            "isLoggedIn": true,
+            "login": "luke",
+            "name": "Skywalker",
+            "scmAccounts": Array [],
+          }
         }
-      }
-    />
+      />
+    </div>
   </div>
 </div>
 `;