SONAR-21566 - Change password after first login adopts new MIUI

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 4059383518262d23a38ce8e55a37a79516ea640b..2feeaad91a93b7a22f03c3809d4426364cac3175 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/ResetPassword.tsx
+++ b/server/sonar-web/src/main/js/app/components/ResetPassword.tsx
@@ -17,6 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import {
+  FlagMessage,
+  LargeCenteredLayout,
+  PageContentFontWrapper,
+  SubHeading,
+  Title,
+} from 'design-system';
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
 import ResetPasswordForm from '../../components/common/ResetPasswordForm';
@@ -29,29 +36,29 @@ export interface ResetPasswordProps {
   currentUser: LoggedInUser;
 }
 
-export function ResetPassword({ currentUser }: ResetPasswordProps) {
+export function ResetPassword({ currentUser }: Readonly<ResetPasswordProps>) {
   return (
-    <div className="page-wrapper-simple">
-      <Helmet defer={false} title={translate('my_account.reset_password.page')} />
-      <div className="page-simple">
-        <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()}/`;
-            }}
-          />
+    <LargeCenteredLayout>
+      <PageContentFontWrapper className="sw-body-sm">
+        <Helmet defer={false} title={translate('my_account.reset_password.page')} />
+        <div className="sw-flex sw-justify-center sw-mt-10">
+          <div>
+            <Title>{translate('my_account.reset_password')}</Title>
+            <FlagMessage variant="warning" className="sw-mb-4">
+              {translate('my_account.reset_password.explain')}
+            </FlagMessage>
+            <SubHeading>{translate('my_profile.password.title')}</SubHeading>
+            <ResetPasswordForm
+              user={currentUser}
+              onPasswordChange={() => {
+                // Force a refresh for the backend to handle additional redirects.
+                window.location.href = `${getBaseUrl()}/`;
+              }}
+            />
+          </div>
         </div>
-      </div>
-    </div>
+      </PageContentFontWrapper>
+    </LargeCenteredLayout>
   );
 }
 

diff --git a/server/sonar-web/src/main/js/components/common/ResetPasswordForm.tsx b/server/sonar-web/src/main/js/components/common/ResetPasswordForm.tsx
index b282209f32f644dce1da2a665afa915c16f5c29c..bf14308c9e1d6fcea93074c62b563f7c51ec5183 100644 (file)
--- a/server/sonar-web/src/main/js/components/common/ResetPasswordForm.tsx
+++ b/server/sonar-web/src/main/js/components/common/ResetPasswordForm.tsx
@@ -91,6 +91,7 @@ export default function ResetPasswordForm({
       <div className="sw-pb-4">
         <FormField htmlFor="old_password" label={translate('my_profile.password.old')} required>
           <InputField
+            size="large"
             autoComplete="off"
             id="old_password"
             name="old_password"
@@ -105,6 +106,7 @@ export default function ResetPasswordForm({
       <div className="sw-pb-4">
         <FormField htmlFor="password" label={translate('my_profile.password.new')} required>
           <InputField
+            size="large"
             autoComplete="off"
             id="password"
             name="password"
@@ -123,6 +125,7 @@ export default function ResetPasswordForm({
           required
         >
           <InputField
+            size="large"
             autoComplete="off"
             id="password_confirmation"
             name="password_confirmation"