Migrated webapp/source/src/app/components/Settings/ChangePassword

wso2 · Feb 16, 2024 · fe08af0 · fe08af0
1 parent 953852c
commit fe08af0
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 15 deletions.
diff --git a/...rtal/src/main/webapp/source/src/app/components/Settings/ChangePassword/ChangePassword.jsx b/...rtal/src/main/webapp/source/src/app/components/Settings/ChangePassword/ChangePassword.jsx
@@ -17,13 +17,13 @@
  */
 
 import React, { useReducer } from 'react';
+import { styled } from '@mui/material/styles';
 import { FormattedMessage } from 'react-intl';
 import AuthManager from 'AppData/AuthManager';
 import Settings from 'Settings';
 import Joi from '@hapi/joi';
 import { Box, Grid } from '@mui/material';
 import Button from '@mui/material/Button';
-import makeStyles from '@mui/styles/makeStyles';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import ChangePasswordBase from './ChangePasswordBase';
@@ -33,17 +33,29 @@ import Alert from 'AppComponents/Shared/Alert';
 import Progress from 'AppComponents/Shared/Progress';
 import { useSettingsContext } from 'AppComponents/Shared/SettingsContext';
 
-const useStyles = makeStyles((theme) => ({
-    mandatoryStarText: {
+const PREFIX = 'ChangePassword';
+
+const classes = {
+    mandatoryStarText: `${PREFIX}-mandatoryStarText`,
+    passwordChangeForm: `${PREFIX}-passwordChangeForm`
+};
+
+const StyledChangePasswordBase = styled(ChangePasswordBase)((
+    {
+        theme
+    }
+) => ({
+    [`& .${classes.mandatoryStarText}`]: {
         '& label>span:nth-child(1)': {
             color: 'red',
         },
     },
-    passwordChangeForm: {
+
+    [`& .${classes.passwordChangeForm}`]: {
         '& > span, & div, & p, & input': {
             color: theme.palette.getContrastText(theme.palette.primary.main),
         },
-    },
+    }
 }));
 
 /**
@@ -68,7 +80,7 @@ const ChangePassword = () => {
             passwordPolicyMaxLength,
         }
     } = useSettingsContext();
-    const classes = useStyles();
+
     const username = AuthManager.getUser().name;
     const initialState = {
         currentPassword: undefined,
@@ -280,7 +292,7 @@ const ChangePassword = () => {
     // otherwise, display page not found.
     if (IsPasswordChangeEnabled) {
         return (
-            <ChangePasswordBase title={title}>
+            <StyledChangePasswordBase title={title}>
                 <Box py={2} display='flex' justifyContent='center'>
                     <Grid item xs={10} md={9}>
                         <Box component='div' m={2}>
@@ -380,7 +392,7 @@ const ChangePassword = () => {
                         </Box>
                     </Grid>
                 </Box>
-            </ChangePasswordBase>
+            </StyledChangePasswordBase>
         );
     } else {
         return <PageNotFound />;

diff --git a/.../src/main/webapp/source/src/app/components/Settings/ChangePassword/ChangePasswordBase.jsx b/.../src/main/webapp/source/src/app/components/Settings/ChangePassword/ChangePasswordBase.jsx
@@ -17,17 +17,29 @@
  */
 
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
-import makeStyles from '@mui/styles/makeStyles';
 import PropTypes from 'prop-types';
 
-const useStyles = makeStyles((theme) => ({
-    createTitle: {
+const PREFIX = 'ChangePasswordBase';
+
+const classes = {
+    createTitle: `${PREFIX}-createTitle`,
+    formContent: `${PREFIX}-formContent`
+};
+
+const StyledBox = styled(Box)((
+    {
+        theme
+    }
+) => ({
+    [`& .${classes.createTitle}`]: {
         color: theme.palette.getContrastText(theme.palette.background.default),
     },
-    formContent: {
+
+    [`& .${classes.formContent}`]: {
         '& span, & div, & p, & input': {
             color: theme.palette.getContrastText(theme.palette.background.paper),
         }
@@ -42,9 +54,9 @@ const useStyles = makeStyles((theme) => ({
  */
 function ChangePasswordBase(props) {
     const { title, children } = props;
-    const classes = useStyles();
+
     return (
-        <Box width={1} mt={5}>
+        <StyledBox width={1} mt={5}>
             <Grid justifyContent='center' container spacing={3}>
                 <Grid item sm={6} md={4}>
                     <Grid container spacing={4}>
@@ -57,7 +69,7 @@ function ChangePasswordBase(props) {
                     </Grid>
                 </Grid>
             </Grid>
-        </Box>
+        </StyledBox>
     );
 }
 ChangePasswordBase.propTypes = {