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(() => {

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

@@ -5,7 +5,7 @@ import { PageWrapper } from '../PageWrapper';
 import React from 'react';
 
 export function RecentLogins() {
-  const { t } = useTranslation('security');
+  const { t } = useTranslation('setting');
   const data = [
     {
       id: 0,
@@ -31,7 +31,6 @@ export function RecentLogins() {
       >
         <Box
           sx={{
-            // px: { xs: 2, sm: 3, md: 4 },
             py: 2,
             display: 'flex',
             flexDirection: 'column',
@@ -102,7 +101,7 @@ export function RecentLogins() {
                       <Button
                         variant="outlined"
                         sx={{
-                          borderRadius: '15px',
+                          borderRadius: 2,
                           border: '2px solid',
                           borderColor: 'success.main',
                           height: '30px',