chore: optimization of code

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}