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,19 +10,67 @@ import {
   IconButton,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
-import { CloseCircle } from 'iconsax-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={{ overflowX: 'hidden' }}>
+      <Box
+        sx={{
+          backgroundColor: 'background.paper',
+          width: '100%',
+          maxWidth: '834px',
+          mx: 'auto',
+          px: { xs: 2, sm: 3 },
+        }}
+      >
         <Box
           sx={{
             justifyContent: 'center',
@@ -37,7 +85,8 @@ export function UserSecurity() {
               justifyContent: 'space-between',
               alignItems: 'center',
               flexWrap: 'wrap',
-          backgroundColor: 'background.paper',
+              backgroundColor: 'background.default',
+              width: '100%',
               maxWidth: '754px',
               mx: 'auto',
               p: 2,
@@ -71,23 +120,76 @@ export function UserSecurity() {
             </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={{ mt: 2, textAlign: 'center' }}
+                  sx={{ textAlign: 'center', py: '43.5px' }}
                 >
                   {t('securityForm.notDeterminedPassword')}
                 </Typography>
+              </Box>
+            )}
+          </Box>
 
-      <Dialog open={open} onClose={handleClose} fullWidth maxWidth="xs">
+          <Dialog
-        <DialogTitle sx={{ fontWeight: 'bold' }}>
+            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 }}
+              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')}
@@ -95,30 +197,126 @@ export function UserSecurity() {
                   fullWidth
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-            sx={{ width: '364px' }}
+                  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)}
-            sx={{ width: '364px' }}
+                  error={confirmPassword.length > 0 && !matchPassword}
-          />
+                  helperText={
-        </DialogContent>
+                    confirmPassword.length > 0 && !matchPassword
-        <DialogActions sx={{ px: 3, pb: 2 }}>
+                      ? t('securityForm.notCompatibility')
-          <Button
+                      : ' '
-            sx={{ width: '364px' }}
+                  }
-            variant="contained"
+                  sx={{
-            onClick={() => {
+                    '& .MuiOutlinedInput-root': {
-              handleClose();
+                      borderRadius: 2,
+                    },
+                  }}
+                />
+              </Box>
+            </DialogContent>
+
+            <DialogActions
+              sx={{
+                px: 3,
+                pb: 2,
+                justifyContent: 'center',
+                alignItems: 'center',
               }}
-            disabled={!password || password !== confirmPassword}
             >
-            {t('securityForm.confirm')}
+              <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>
   );
 }