feat: security section in profile setting

package-lock.json

@@ -15,6 +15,7 @@
         "i18next": "^25.3.0",
         "i18next-browser-languagedetector": "^8.2.0",
         "i18next-http-backend": "^3.0.2",
+        "iconsax-react": "^0.0.8",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-i18next": "^15.6.0",
@@ -3102,6 +3103,18 @@
         "cross-fetch": "4.0.0"
       }
     },
+    "node_modules/iconsax-react": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/iconsax-react/-/iconsax-react-0.0.8.tgz",
+      "integrity": "sha512-l3dVk4zGtkkJHgvNYqAf0wDKqnKxXykee5/DoESGo2JvSYwaxajJUHSX2YrPRXSov8Hd8ClGFwJxCEaEjrFD1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",

package.json

@@ -18,6 +18,7 @@
     "i18next": "^25.3.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
+    "iconsax-react": "^0.0.8",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": "^15.6.0",

public/locales/fa/security.json

@@ -0,0 +1,11 @@
+{
+  "securityForm": {
+    "password": "رمز عبور",
+    "determinePassword": "با تعیین یک رمز عبور قوی راحت تر به اکانت هارمونی خود وارد شوید",
+    "addPassword": "افزودن رمز عبور",
+    "notDeterminedPassword": "هنوز رمز عبوری برای این حساب کاربری تعیین نکرده اید",
+    "newPassword": "رمز عبور جدید",
+    "confirmPassword": "تکرار رمز عبور",
+    "confirm": "تایید"
+  }
+}

src/App.tsx

@@ -9,6 +9,7 @@ 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();
@@ -17,6 +18,7 @@ function App() {
     <>
       <CssBaseline />
       <LanguageManager />
+      <UserSecurity />
       <div style={{ padding: '16px' }}>
         <Typography variant="h3">{t('helloWorld')}</Typography>
         <Box

src/features/profile/components/UserSecurity.tsx

@@ -0,0 +1,124 @@
+import {
+  Box,
+  Typography,
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  TextField,
+  DialogActions,
+  IconButton,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import { CloseCircle } from 'iconsax-react';
+
+export function UserSecurity() {
+  const { t } = useTranslation('security');
+  const [open, setOpen] = useState(false);
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <Box
+      sx={{
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'background.paper',
+        px: 2,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          backgroundColor: 'background.paper',
+          maxWidth: '754px',
+          mx: 'auto',
+          p: 2,
+          borderRadius: 2,
+        }}
+      >
+        <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>
+
+      <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();
+            }}
+            disabled={!password || password !== confirmPassword}
+          >
+            {t('securityForm.confirm')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}