SONAR-14604 Improve reset password form layout

3 files changed, 74 insertions, 84 deletions

diff --git a/server/sonar-web/src/main/js/components/common/__tests__/ResetPassword-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/ResetPasswordForm-test.tsx
index 904f693ed69..e940f20395e 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/ResetPassword-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/ResetPasswordForm-test.tsx
@@ -22,7 +22,7 @@ import * as React from 'react';
 import { waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
 import { changePassword } from '../../../api/users';
 import { mockEvent, mockLoggedInUser } from '../../../helpers/testMocks';
-import ResetPassword from '../ResetPassword';
+import ResetPasswordForm from '../ResetPasswordForm';
 
 jest.mock('../../../api/users', () => ({
   changePassword: jest.fn().mockResolvedValue({})
@@ -74,6 +74,6 @@ it('renders correctly', () => {
   expect(shallowRender()).toMatchSnapshot();
 });
 
-function shallowRender(props?: Partial<ResetPassword['props']>) {
-  return shallow<ResetPassword>(<ResetPassword user={mockLoggedInUser()} {...props} />);
+function shallowRender(props?: Partial<ResetPasswordForm['props']>) {
+  return shallow<ResetPasswordForm>(<ResetPasswordForm user={mockLoggedInUser()} {...props} />);
 }
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ResetPassword-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ResetPassword-test.tsx.snap
deleted file mode 100644
index f2fbe03c093..00000000000
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ResetPassword-test.tsx.snap
+++ /dev/null
@@ -1,81 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-<section
-  className="boxed-group"
->
-  <h2
-    className="spacer-bottom"
-  >
-    my_profile.password.title
-  </h2>
-  <form
-    className="boxed-group-inner"
-    onSubmit={[Function]}
-  >
-    <MandatoryFieldsExplanation
-      className="form-field"
-    />
-    <div
-      className="form-field"
-    >
-      <label
-        htmlFor="old_password"
-      >
-        my_profile.password.old
-        <MandatoryFieldMarker />
-      </label>
-      <input
-        autoComplete="off"
-        id="old_password"
-        name="old_password"
-        required={true}
-        type="password"
-      />
-    </div>
-    <div
-      className="form-field"
-    >
-      <label
-        htmlFor="password"
-      >
-        my_profile.password.new
-        <MandatoryFieldMarker />
-      </label>
-      <input
-        autoComplete="off"
-        id="password"
-        name="password"
-        required={true}
-        type="password"
-      />
-    </div>
-    <div
-      className="form-field"
-    >
-      <label
-        htmlFor="password_confirmation"
-      >
-        my_profile.password.confirm
-        <MandatoryFieldMarker />
-      </label>
-      <input
-        autoComplete="off"
-        id="password_confirmation"
-        name="password_confirmation"
-        required={true}
-        type="password"
-      />
-    </div>
-    <div
-      className="form-field"
-    >
-      <SubmitButton
-        id="change-password"
-      >
-        update_verb
-      </SubmitButton>
-    </div>
-  </form>
-</section>
-`;
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ResetPasswordForm-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ResetPasswordForm-test.tsx.snap
new file mode 100644
index 00000000000..3f32833747d
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ResetPasswordForm-test.tsx.snap
@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<form
+  onSubmit={[Function]}
+>
+  <MandatoryFieldsExplanation
+    className="form-field"
+  />
+  <div
+    className="form-field"
+  >
+    <label
+      htmlFor="old_password"
+    >
+      my_profile.password.old
+      <MandatoryFieldMarker />
+    </label>
+    <input
+      autoComplete="off"
+      id="old_password"
+      name="old_password"
+      required={true}
+      type="password"
+    />
+  </div>
+  <div
+    className="form-field"
+  >
+    <label
+      htmlFor="password"
+    >
+      my_profile.password.new
+      <MandatoryFieldMarker />
+    </label>
+    <input
+      autoComplete="off"
+      id="password"
+      name="password"
+      required={true}
+      type="password"
+    />
+  </div>
+  <div
+    className="form-field"
+  >
+    <label
+      htmlFor="password_confirmation"
+    >
+      my_profile.password.confirm
+      <MandatoryFieldMarker />
+    </label>
+    <input
+      autoComplete="off"
+      id="password_confirmation"
+      name="password_confirmation"
+      required={true}
+      type="password"
+    />
+  </div>
+  <div
+    className="form-field"
+  >
+    <SubmitButton
+      id="change-password"
+    >
+      update_verb
+    </SubmitButton>
+  </div>
+</form>
+`;