chore: optimization of code

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

@@ -0,0 +1,179 @@
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  IconButton,
+  Box,
+  Button,
+  Link,
+} from '@mui/material';
+import { CloseCircle, Refresh } from 'iconsax-react';
+import { PasswordValidationItem } from './PasswordValidation';
+
+interface PasswordDialogProps {
+  open: boolean;
+  fullScreen: boolean;
+  handleClose: () => void;
+  password: string;
+  setPassword: (val: string) => void;
+  confirmPassword: string;
+  setConfirmPassword: (val: string) => void;
+  currentPassword: string;
+  setCurrentPassword: (val: string) => void;
+  showValidation: boolean;
+  hasNumber: boolean;
+  hasMinLength: boolean;
+  hasUpperAndLower: boolean;
+  hasSpecialChar: boolean;
+  matchPassword: boolean;
+  loading: boolean;
+  handleShowAlert: () => void;
+  changePassword: boolean;
+  t: (key: string) => string;
+}
+
+export function PasswordDialog({
+  open,
+  fullScreen,
+  handleClose,
+  password,
+  setPassword,
+  confirmPassword,
+  setConfirmPassword,
+  currentPassword,
+  setCurrentPassword,
+  showValidation,
+  hasNumber,
+  hasMinLength,
+  hasUpperAndLower,
+  hasSpecialChar,
+  matchPassword,
+  loading,
+  handleShowAlert,
+  changePassword,
+  t,
+}: PasswordDialogProps) {
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      fullWidth
+      fullScreen={fullScreen}
+      maxWidth="xs"
+      scroll="body"
+      PaperProps={{ sx: { mx: 1 } }}
+    >
+      <DialogTitle sx={{ p: 2 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <IconButton onClick={handleClose}>
+            <CloseCircle size={24} color="#82B1FF" />
+          </IconButton>
+          <Box component="span" fontWeight="bold" fontSize={18}>
+            {t('securityForm.addPassword')}
+          </Box>
+        </Box>
+      </DialogTitle>
+
+      <DialogContent
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+          px: { xs: 2, sm: 3 },
+        }}
+      >
+        {changePassword && (
+          <>
+            <TextField
+              label={t('securityForm.currentPassword')}
+              fullWidth
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+              sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 }, mt: 2 }}
+            />
+            <Link sx={{ fontSize: '15px' }}>
+              {t('securityForm.forgetPassword')}
+            </Link>
+          </>
+        )}
+
+        <TextField
+          label={t('securityForm.newPassword')}
+          type="password"
+          fullWidth
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+        />
+
+        {password && showValidation && (
+          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+            <Box sx={{ maxWidth: '364px', width: '100%' }}>
+              <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>
+          </Box>
+        )}
+
+        <TextField
+          label={t('securityForm.confirmPassword')}
+          type="password"
+          fullWidth
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          error={confirmPassword.length > 0 && !matchPassword}
+          helperText={
+            confirmPassword.length > 0 && !matchPassword
+              ? t('securityForm.notCompatibility')
+              : ' '
+          }
+          sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+        />
+      </DialogContent>
+
+      <DialogActions sx={{ px: 3, pb: 2, justifyContent: 'center' }}>
+        <Button
+          fullWidth
+          sx={{ maxWidth: '364px', height: 48, textTransform: 'none' }}
+          variant="contained"
+          onClick={handleShowAlert}
+          disabled={!password || password !== confirmPassword || loading}
+        >
+          {loading ? (
+            <Box
+              component="span"
+              sx={{
+                display: 'flex',
+                animation: 'spin 1s linear infinite',
+                '@keyframes spin': {
+                  '0%': { transform: 'rotate(0deg)' },
+                  '100%': { transform: 'rotate(360deg)' },
+                },
+              }}
+            >
+              <Refresh size="20" color="#fff" />
+            </Box>
+          ) : (
+            t('securityForm.confirm')
+          )}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

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

@@ -1,30 +1,23 @@
+import { useState, useEffect } from 'react';
 import {
   Box,
   Typography,
   Button,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  TextField,
-  DialogActions,
-  IconButton,
+  useTheme,
   useMediaQuery,
-  Link,
 } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
-import { useState, useEffect } from 'react';
-import { CloseCircle, Refresh } from 'iconsax-react';
-import { PasswordValidationItem } from './PasswordValidation';
-import { Toast } from '@/components/Toast';
-import Logo from '@/components/Logo';
 import { CardContainer } from '@/components/CardContainer';
 import { PageWrapper } from '../PageWrapper';
+import Logo from '@/components/Logo';
+import { PasswordDialog } from './PasswordDialog';
+import { Toast } from '@/components/Toast';
 
 export function PasswordSecurity() {
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const { t } = useTranslation('security');
+
   const [open, setOpen] = useState(false);
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
@@ -42,21 +35,6 @@ export function PasswordSecurity() {
     hasNumber && hasMinLength && hasUpperAndLower && hasSpecialChar;
   const matchPassword = password === confirmPassword;
 
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-  const handleShowAlert = () => {
-    setLoading(true);
-    setTimeout(() => {
-      setLoading(false);
-      setShowPasswordAlert(true);
-      setChangePassword(true);
-      handleClose();
-      setPassword('');
-      setConfirmPassword('');
-      setCurrentPassword('');
-    }, 1500);
-  };
-
   useEffect(() => {
     if (password) {
       if (!validPassword) {
@@ -70,6 +48,22 @@ export function PasswordSecurity() {
     }
   }, [password, validPassword]);
 
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const handleShowAlert = () => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+      setShowPasswordAlert(true);
+      setChangePassword(true);
+      handleClose();
+      setPassword('');
+      setConfirmPassword('');
+      setCurrentPassword('');
+    }, 1500);
+  };
+
   return (
     <PageWrapper>
       <Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
@@ -80,35 +74,21 @@ export function PasswordSecurity() {
         title={t('securityForm.password')}
         subtitle={t('securityForm.determinePassword')}
         action={
-          changePassword ? (
-            <Button
-              variant="outlined"
-              onClick={handleOpen}
-              sx={{
-                mt: { xs: 2, sm: 0 },
-                backgroundColor: 'primary.main',
-                color: 'background.paper',
-                width: { xs: '100%', sm: '142px' },
-                textTransform: 'none',
-              }}
-            >
-              {t('securityForm.changePassword')}
-            </Button>
-          ) : (
-            <Button
-              variant="outlined"
-              onClick={handleOpen}
-              sx={{
-                mt: { xs: 2, sm: 0 },
-                backgroundColor: 'primary.main',
-                color: 'background.paper',
-                width: { xs: '100%', sm: '142px' },
-                textTransform: 'none',
-              }}
-            >
-              {t('securityForm.addPassword')}
-            </Button>
-          )
+          <Button
+            variant="outlined"
+            onClick={handleOpen}
+            sx={{
+              mt: { xs: 2, sm: 0 },
+              backgroundColor: 'primary.main',
+              color: 'background.paper',
+              width: { xs: '100%', sm: '142px' },
+              textTransform: 'none',
+            }}
+          >
+            {changePassword
+              ? t('securityForm.changePassword')
+              : t('securityForm.addPassword')}
+          </Button>
         }
       >
         <Box
@@ -122,198 +102,48 @@ export function PasswordSecurity() {
             flex: 1,
           }}
         >
-          <Box sx={{ height: 'auto', py: { xs: 3, sm: 4 } }}>
-            {changePassword ? (
-              <Box sx={{ flexDirection: 'column', px: 2, py: 2 }}>
-                <Typography variant="h6">
-                  {t('securityForm.activePassword')}
-                </Typography>
-                <Typography variant="caption" color="text.secondary">
-                  {t('securityForm.lastChange')}
-                </Typography>
-              </Box>
-            ) : (
-              <Typography
-                variant="body1"
-                color="text.secondary"
-                sx={{ textAlign: 'center', py: { xs: 4, sm: '43.5px' } }}
-              >
-                {t('securityForm.notDeterminedPassword')}
+          {changePassword ? (
+            <Box sx={{ flexDirection: 'column', px: 2, py: 2 }}>
+              <Typography variant="h6">
+                {t('securityForm.activePassword')}
               </Typography>
-            )}
-          </Box>
-          <Dialog
+              <Typography variant="caption" color="text.secondary">
+                {t('securityForm.lastChange')}
+              </Typography>
+            </Box>
+          ) : (
+            <Typography
+              variant="body1"
+              color="text.secondary"
+              sx={{ textAlign: 'center', py: { xs: 4, sm: '43.5px' } }}
+            >
+              {t('securityForm.notDeterminedPassword')}
+            </Typography>
+          )}
+
+          {/* New PasswordDialog component usage */}
+          <PasswordDialog
             open={open}
-            onClose={handleClose}
-            fullWidth
             fullScreen={fullScreen}
-            maxWidth="xs"
-            scroll="body"
-            PaperProps={{ sx: { mx: 1 } }}
-          >
-            <DialogTitle sx={{ p: 2 }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                <IconButton onClick={handleClose}>
-                  <CloseCircle size={24} color="#82B1FF" />
-                </IconButton>
-                <Typography variant="h6" fontWeight="bold">
-                  {t('securityForm.addPassword')}
-                </Typography>
-              </Box>
-            </DialogTitle>
-            {changePassword ? (
-              <DialogContent
-                sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: 2,
-                  px: { xs: 2, sm: 3 },
-                }}
-              >
-                <TextField
-                  label={t('securityForm.currentPassword')}
-                  fullWidth
-                  value={currentPassword}
-                  onChange={(e) => setCurrentPassword(e.target.value)}
-                  sx={{
-                    '& .MuiOutlinedInput-root': { borderRadius: 2 },
-                    mt: 2,
-                  }}
-                />
-                <Link sx={{ fontSize: '15px' }}>
-                  {t('securityForm.forgetPassword')}
-                </Link>
-                <TextField
-                  label={t('securityForm.newPassword')}
-                  type="password"
-                  fullWidth
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
-                />
-                {password && showValidation && (
-                  <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                    <Box sx={{ maxWidth: '364px', width: '100%' }}>
-                      <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>
-                  </Box>
-                )}
-                <TextField
-                  label={t('securityForm.confirmPassword')}
-                  type="password"
-                  fullWidth
-                  value={confirmPassword}
-                  onChange={(e) => setConfirmPassword(e.target.value)}
-                  error={confirmPassword.length > 0 && !matchPassword}
-                  helperText={
-                    confirmPassword.length > 0 && !matchPassword
-                      ? t('securityForm.notCompatibility')
-                      : ' '
-                  }
-                  sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
-                />
-              </DialogContent>
-            ) : (
-              <DialogContent
-                sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: 2,
-                  px: { xs: 2, sm: 3 },
-                }}
-              >
-                <TextField
-                  label={t('securityForm.newPassword')}
-                  type="password"
-                  fullWidth
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  sx={{
-                    '& .MuiOutlinedInput-root': { borderRadius: 2 },
-                    mt: 2,
-                  }}
-                />
-                {password && showValidation && (
-                  <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                    <Box sx={{ maxWidth: '364px', width: '100%' }}>
-                      <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>
-                  </Box>
-                )}
-                <TextField
-                  label={t('securityForm.confirmPassword')}
-                  type="password"
-                  fullWidth
-                  value={confirmPassword}
-                  onChange={(e) => setConfirmPassword(e.target.value)}
-                  error={confirmPassword.length > 0 && !matchPassword}
-                  helperText={
-                    confirmPassword.length > 0 && !matchPassword
-                      ? t('securityForm.notCompatibility')
-                      : ' '
-                  }
-                  sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
-                />
-              </DialogContent>
-            )}
-            <DialogActions sx={{ px: 3, pb: 2, justifyContent: 'center' }}>
-              <Button
-                fullWidth
-                sx={{ maxWidth: '364px', height: 48, textTransform: 'none' }}
-                variant="contained"
-                onClick={handleShowAlert}
-                disabled={!password || password !== confirmPassword || loading}
-              >
-                {loading ? (
-                  <Box
-                    component="span"
-                    sx={{
-                      display: 'flex',
-                      animation: 'spin 1s linear infinite',
-                      '@keyframes spin': {
-                        '0%': { transform: 'rotate(0deg)' },
-                        '100%': { transform: 'rotate(360deg)' },
-                      },
-                    }}
-                  >
-                    <Refresh size="20" color="#fff" />
-                  </Box>
-                ) : (
-                  t('securityForm.confirm')
-                )}
-              </Button>
-            </DialogActions>
-          </Dialog>
+            handleClose={handleClose}
+            password={password}
+            setPassword={setPassword}
+            confirmPassword={confirmPassword}
+            setConfirmPassword={setConfirmPassword}
+            currentPassword={currentPassword}
+            setCurrentPassword={setCurrentPassword}
+            showValidation={showValidation}
+            hasNumber={hasNumber}
+            hasMinLength={hasMinLength}
+            hasUpperAndLower={hasUpperAndLower}
+            hasSpecialChar={hasSpecialChar}
+            matchPassword={matchPassword}
+            loading={loading}
+            handleShowAlert={handleShowAlert}
+            changePassword={changePassword}
+            t={t}
+          />
+
           <Toast
             color="success"
             open={showPasswordAlert}

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

@@ -2,6 +2,7 @@ import { Box, Typography, Button } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CardContainer } from '@/components/CardContainer';
 import { PageWrapper } from '../PageWrapper';
+import React from 'react';
 
 export function RecentLogins() {
   const { t } = useTranslation('security');
@@ -46,7 +47,7 @@ export function RecentLogins() {
         >
           <Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
             {data.map((d) => (
-              <>
+              <React.Fragment key={d.id}>
                 <Box
                   sx={{
                     display: 'flex',
@@ -54,7 +55,6 @@ export function RecentLogins() {
                     alignItems: { xs: 'flex-start', sm: 'center' },
                     minHeight: 50,
                   }}
-                  key={d.id}
                 >
                   <Typography
                     variant="body2"
@@ -117,7 +117,7 @@ export function RecentLogins() {
                   </Box>
                 </Box>
                 <Box sx={{ color: 'divider', borderBottom: '1px solid' }} />
-              </>
+              </React.Fragment>
             ))}
           </Box>
         </Box>

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

@@ -1,12 +0,0 @@
-import { PasswordSecurity } from './PasswordSecurity';
-import { RecentLogins } from './RecentLogins';
-import { Box } from '@mui/material';
-
-export function Security() {
-  return (
-    <Box sx={{ backgroundColor: 'background.paper', height: '730px' }}>
-      <PasswordSecurity />
-      <RecentLogins />
-    </Box>
-  );
-}