chore: change styles and add Api for user profile

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

@@ -11,11 +11,12 @@ import { CardContainer } from '@/components/CardContainer';
 import { PageWrapper } from '../PageWrapper';
 import { PasswordDialog } from './PasswordDialog';
 import { Toast } from '@/components/Toast';
+import { regex } from '@/utils/regex';
 
 export function PasswordSecurity() {
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
-  const { t } = useTranslation('security');
+  const { t } = useTranslation('setting');
 
   const [open, setOpen] = useState(false);
   const [password, setPassword] = useState('');
@@ -26,12 +27,14 @@ export function PasswordSecurity() {
   const [changePassword, setChangePassword] = useState(false);
   const [loading, setLoading] = useState(false);
 
-  const hasNumber = /\d/.test(password);
-  const hasMinLength = password.length >= 8;
-  const hasUpperAndLower = /[A-Z]/.test(password) && /[a-z]/.test(password);
-  const hasSpecialChar = /[!@#$%^&*]/.test(password);
-  const validPassword =
-    hasNumber && hasMinLength && hasUpperAndLower && hasSpecialChar;
+  const {
+    hasNumber,
+    hasMinLength,
+    hasUpperAndLower,
+    hasSpecialChar,
+    validPassword,
+  } = regex(password);
+
   const matchPassword = password === confirmPassword;
 
   useEffect(() => {