fix: api issue and merge styles problem

src/features/profile/components/security/PasswordDialog.tsx

@@ -14,6 +14,7 @@ import {
 import { CloseCircle } from 'iconsax-react';
 import { Icon } from '@rkheftan/harmony-ui';
 import { type PasswordDialogProps } from '../../types/settingsType';
+import { PasswordValidationItem } from './PasswordValidation';
 
 export function PasswordDialog({
   open,
@@ -33,6 +34,10 @@ export function PasswordDialog({
   changePassword,
   apiError,
   t,
+  hasMinLength,
+  hasNumber,
+  hasUpperAndLower,
+  hasSpecialChar,
 }: PasswordDialogProps) {
   return (
     <Dialog
@@ -93,18 +98,28 @@ export function PasswordDialog({
           fullWidth
           value={password}
           onChange={(e) => setPassword(e.target.value)}
-          sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+          sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 }, mt: 2 }}
         />
 
         {showValidation && (
-          <Typography
-            variant="body2"
-            color={validPassword ? 'success.main' : 'error.main'}
-          >
-            {validPassword
-              ? t('securityForm.passwordIsValid')
-              : t('securityForm.passwordIsInvalid')}
-          </Typography>
+          <Box sx={{ mt: 1 }}>
+            <PasswordValidationItem
+              isValid={hasNumber}
+              label={t('securityForm.hasNumber')}
+            />
+            <PasswordValidationItem
+              isValid={hasMinLength}
+              label={t('securityForm.hasMinLength')}
+            />
+            <PasswordValidationItem
+              isValid={hasUpperAndLower}
+              label={t('securityForm.hasUpperAndLower')}
+            />
+            <PasswordValidationItem
+              isValid={hasSpecialChar}
+              label={t('securityForm.hasSpecialChar')}
+            />
+          </Box>
         )}
 
         <TextField

src/features/profile/components/security/PasswordSecurity.tsx

@@ -100,7 +100,8 @@ export function PasswordSecurity() {
   useEffect(() => {
     if (addError || changeError) {
       showToast({
-        message: getErrorMessage(addError || changeError) || t('error.general'),
+        message:
+          getErrorMessage(addError || changeError) || t('securityForm.general'),
         severity: 'error',
       });
     }
@@ -116,7 +117,7 @@ export function PasswordSecurity() {
         newPassword: password,
       });
     } else {
-      await executeAddPassword({ password });
+      await executeAddPassword({ newPassword: password });
     }
   };
 
@@ -206,6 +207,10 @@ export function PasswordSecurity() {
               changePassword={changePasswordUI}
               apiError={getErrorMessage(apiError)}
               t={t}
+              hasMinLength={hasMinLength}
+              hasNumber={hasNumber}
+              hasUpperAndLower={hasUpperAndLower}
+              hasSpecialChar={hasSpecialChar}
             />
           </Box>
         )}