feat: add security section in setting and make it responsive

public/locales/fa/security.json

@@ -6,6 +6,12 @@
     "notDeterminedPassword": "هنوز رمز عبوری برای این حساب کاربری تعیین نکرده اید",
     "newPassword": "رمز عبور جدید",
     "confirmPassword": "تکرار رمز عبور",
-    "confirm": "تایید"
+    "confirm": "تایید",
+    "hasNumber": "شامل عدد",
+    "hasMinLength": "حداقل 8 کاراکتر",
+    "hasUpperAndLower": "شامل یک حرف کوچک و بزرگ",
+    "hasSpecialChar": "شامل علامت (!@#$%^&*)",
+    "notCompatibility": "تکرار رمز عبور با رمز عبور یکسان نمی باشد",
+    "alertSuccess": "رمز عبور با موفقیت تعویض شد"
   }
 }

src/App.tsx

@@ -9,7 +9,6 @@ import {
 import './App.css';
 import { useTranslation } from 'react-i18next';
 import { LanguageManager } from './components/LanguageManager';
-import { UserSecurity } from './features/profile/components/UserSecurity';
 
 function App() {
   const { t } = useTranslation();
@@ -18,7 +17,6 @@ function App() {
     <>
       <CssBaseline />
       <LanguageManager />
-      <UserSecurity />
       <div style={{ padding: '16px' }}>
         <Typography variant="h3">{t('helloWorld')}</Typography>
         <Box

src/components/Toast.tsx

@@ -0,0 +1,23 @@
+import { Alert, Snackbar, type AlertColor } from '@mui/material';
+import React, { type PropsWithChildren } from 'react';
+
+export interface ToastProps extends PropsWithChildren {
+  color: AlertColor | undefined;
+  open: boolean;
+  onClose: () => void;
+}
+
+export const Toast = ({ color, open, onClose, children }: ToastProps) => {
+  return (
+    <Snackbar sx={{ minWidth: '396px' }} open={open} onClose={onClose}>
+      <Alert
+        onClose={onClose}
+        severity={color}
+        variant="filled"
+        sx={{ width: '100%' }}
+      >
+        {children}
+      </Alert>
+    </Snackbar>
+  );
+};

src/features/profile/components/PasswordValidation.tsx

@@ -0,0 +1,41 @@
+import { Box, Typography } from '@mui/material';
+import { TickCircle } from 'iconsax-react';
+
+interface ValidationItemProps {
+  isValid: boolean;
+  label: string;
+}
+
+export function PasswordValidationItem({
+  isValid,
+  label,
+}: ValidationItemProps) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        mb: 0.5,
+        flexWrap: 'wrap',
+      }}
+    >
+      <TickCircle
+        size="16"
+        color={isValid ? '#14AE5C' : '#2979FF'}
+        variant={isValid ? 'Bold' : 'Outline'}
+      />
+      <Typography
+        variant="body2"
+        color="text.primary"
+        sx={{
+          fontSize: { xs: '0.85rem', sm: '0.875rem' },
+          wordBreak: 'break-word',
+          flex: 1,
+        }}
+      >
+        {label}
+      </Typography>
+    </Box>
+  );
+}

src/features/profile/components/UserSecurity.tsx

@@ -10,115 +10,313 @@ import {
   IconButton,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useState } from 'react';
-import { CloseCircle } from 'iconsax-react';
+import { useState, useEffect } from 'react';
+import { CloseCircle, Refresh } from 'iconsax-react';
+import { PasswordValidationItem } from './PasswordValidation';
+import { Toast } from '@/components/Toast';
 
 export function UserSecurity() {
   const { t } = useTranslation('security');
   const [open, setOpen] = useState(false);
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const [showValidation, setShowValidation] = useState(false);
+  const [showPasswordAlert, setShowPasswordAlert] = useState(false);
+  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 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('');
+    }, 1500);
+  };
+
+  useEffect(() => {
+    if (password) {
+      if (!validPassword) {
+        setShowValidation(true);
+      } else {
+        const timer = setTimeout(() => setShowValidation(false), 1000);
+        return () => clearTimeout(timer);
+      }
+    } else {
+      setShowValidation(false);
+    }
+  }, [password, validPassword]);
 
   return (
-    <Box
-      sx={{
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: 'background.paper',
-        px: 2,
-      }}
-    >
+    <Box sx={{ overflowX: 'hidden' }}>
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          flexWrap: 'wrap',
           backgroundColor: 'background.paper',
-          maxWidth: '754px',
+          width: '100%',
+          maxWidth: '834px',
           mx: 'auto',
-          p: 2,
-          borderRadius: 2,
+          px: { xs: 2, sm: 3 },
         }}
       >
         <Box
           sx={{
-            width: '100%',
-            maxWidth: '580px',
-            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'background.paper',
+            px: 2,
           }}
         >
-          <Typography variant="h6">{t('securityForm.password')}</Typography>
-          <Typography variant="body2" color="text.secondary">
-            {t('securityForm.determinePassword')}
-          </Typography>
-        </Box>
-        <Button
-          variant="outlined"
-          onClick={handleOpen}
-          sx={{
-            mt: { xs: 2, sm: 0 },
-            backgroundColor: 'primary.main',
-            color: 'background.paper',
-            width: '142px',
-            textTransform: 'none',
-          }}
-        >
-          {t('securityForm.addPassword')}
-        </Button>
-      </Box>
-
-      <Typography
-        variant="body1"
-        color="text.secondary"
-        sx={{ mt: 2, textAlign: 'center' }}
-      >
-        {t('securityForm.notDeterminedPassword')}
-      </Typography>
-
-      <Dialog open={open} onClose={handleClose} fullWidth maxWidth="xs">
-        <DialogTitle sx={{ fontWeight: 'bold' }}>
-          <IconButton onClick={handleClose}>
-            <CloseCircle size={24} color="#82B1FF" />
-          </IconButton>
-          {t('securityForm.addPassword')}
-        </DialogTitle>
-        <DialogContent
-          sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
-        >
-          <TextField
-            label={t('securityForm.newPassword')}
-            type="password"
-            fullWidth
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            sx={{ width: '364px' }}
-          />
-          <TextField
-            label={t('securityForm.confirmPassword')}
-            type="password"
-            fullWidth
-            value={confirmPassword}
-            onChange={(e) => setConfirmPassword(e.target.value)}
-            sx={{ width: '364px' }}
-          />
-        </DialogContent>
-        <DialogActions sx={{ px: 3, pb: 2 }}>
-          <Button
-            sx={{ width: '364px' }}
-            variant="contained"
-            onClick={() => {
-              handleClose();
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+              backgroundColor: 'background.default',
+              width: '100%',
+              maxWidth: '754px',
+              mx: 'auto',
+              p: 2,
+              borderRadius: 2,
             }}
-            disabled={!password || password !== confirmPassword}
           >
-            {t('securityForm.confirm')}
-          </Button>
-        </DialogActions>
-      </Dialog>
+            <Box
+              sx={{
+                width: '100%',
+                maxWidth: '580px',
+                flexDirection: 'column',
+              }}
+            >
+              <Typography variant="h6">{t('securityForm.password')}</Typography>
+              <Typography variant="body2" color="text.secondary">
+                {t('securityForm.determinePassword')}
+              </Typography>
+            </Box>
+            <Button
+              variant="outlined"
+              onClick={handleOpen}
+              sx={{
+                mt: { xs: 2, sm: 0 },
+                backgroundColor: 'primary.main',
+                color: 'background.paper',
+                width: '142px',
+                textTransform: 'none',
+              }}
+            >
+              {t('securityForm.addPassword')}
+            </Button>
+          </Box>
+
+          <Box sx={{ height: '111px' }}>
+            {changePassword ? (
+              <Box sx={{ flexDirection: 'column', px: 4, py: 4 }}>
+                <Typography variant="h6">رمز عبور فعال است</Typography>
+                <Typography variant="caption" color="text.secondary">
+                  آخرین تغییر چند ثانیه پیش
+                </Typography>
+              </Box>
+            ) : (
+              <Box
+                sx={{
+                  width: '100%',
+                  maxWidth: '754px',
+                  mx: 'auto',
+                }}
+              >
+                <Typography
+                  variant="body1"
+                  color="text.secondary"
+                  sx={{ textAlign: 'center', py: '43.5px' }}
+                >
+                  {t('securityForm.notDeterminedPassword')}
+                </Typography>
+              </Box>
+            )}
+          </Box>
+
+          <Dialog
+            open={open}
+            onClose={handleClose}
+            fullWidth
+            maxWidth="xs"
+            scroll="body"
+            PaperProps={{
+              sx: { mx: 1 },
+            }}
+          >
+            <DialogTitle sx={{ p: 2 }}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 1,
+                }}
+              >
+                <IconButton onClick={handleClose}>
+                  <CloseCircle size={24} color="#82B1FF" />
+                </IconButton>
+                <Typography variant="h6" fontWeight="bold">
+                  {t('securityForm.addPassword')}
+                </Typography>
+              </Box>
+            </DialogTitle>
+
+            <DialogContent
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 2,
+                px: { xs: 2, sm: 3 },
+              }}
+            >
+              <Box
+                sx={{
+                  width: '100%',
+                  maxWidth: '364px',
+                  mx: 'auto',
+                  mt: '32px',
+                }}
+              >
+                <TextField
+                  label={t('securityForm.newPassword')}
+                  type="password"
+                  fullWidth
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  sx={{
+                    '& .MuiOutlinedInput-root': {
+                      borderRadius: 2,
+                    },
+                  }}
+                />
+              </Box>
+
+              {password && showValidation && (
+                <Box
+                  sx={{
+                    width: '100%',
+                    maxWidth: '364px',
+                    mx: 'auto',
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    mb: '32px',
+                  }}
+                >
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'flex-start',
+                      textAlign: 'left',
+                      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>
+              )}
+
+              <Box
+                sx={{
+                  width: '100%',
+                  maxWidth: '364px',
+                  mx: 'auto',
+                }}
+              >
+                <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,
+                    },
+                  }}
+                />
+              </Box>
+            </DialogContent>
+
+            <DialogActions
+              sx={{
+                px: 3,
+                pb: 2,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <Button
+                sx={{ width: '364px', height: 48 }}
+                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>
+
+          <Toast
+            color="success"
+            open={showPasswordAlert}
+            onClose={() => setShowPasswordAlert(false)}
+          >
+            {t('securityForm.alertSuccess')}
+          </Toast>
+        </Box>
+      </Box>
     </Box>
   );
 }