{t('helloWorld')}
+ {sections.map(({ title, hash }) => (
+
+
+ {title}
+
+
+ ))}
+
+ );
+}
+
+function Header() {
+ return (
+
+ محمدحسین برزهگر
+
+ 09123456789
+
+
+ );
+}
+
+function Layout() {
+ const theme = useTheme();
+ const isMdUp = useMediaQuery(theme.breakpoints.up('md'));
+ const location = useLocation();
+
+ const navConfig: NavItemConfig[] = [
+ {
+ text: 'حساب کاربری',
+ icon: ,
+ path: '/profile',
+ children: [
+ {
+ text: 'اطلاعات شخصی',
+ icon: ,
+ path: '/profile#info',
+ },
+ {
+ text: 'شماره تماس',
+ icon: ,
+ path: '/profile#contact-info',
+ },
+ { text: 'ایمیل', icon: , path: '/profile#email' },
+ ],
+ },
+ {
+ text: 'امنیت',
+ icon: ,
+ path: '/security',
+ children: [
+ {
+ text: 'رمز عبور',
+ icon: ,
+ path: '/security#password',
+ },
+ {
+ text: 'آدرسهای تایید شده',
+ icon: ,
+ path: '/security#locations',
+ },
+ {
+ text: 'ورودهای اخیر',
+ icon: ,
+ path: '/security#sessions',
+ },
+ ],
+ },
+ { text: 'دستگاههای فعال', icon: , path: '/devices' },
+ { text: 'تنظیمات', icon: , path: '/setting' },
+ ];
+
+ return (
+
+
+ }
+ activePath={location.pathname + location.hash}
+ sideNavVariant={isMdUp ? 'full' : 'minimized'}
+ drawerWidth={274}
+ minimizedWidth={50}
+ />
+
+
+
+
+
+
+
+ );
+}
+
+const profileSections = [
+ { title: 'اطلاعات شخصی', hash: 'info' },
+ { title: 'شماره تماس', hash: 'contact-info' },
+ { title: 'ایمیل', hash: 'email' },
+];
+
+const router = createBrowserRouter([
+ {
+ path: '/',
+ element: ,
+ children: [
+ { path: '/', element: },
+ { path: '/profile', element: },
+ {
+ path: '/security',
+ element: (
+ <>
+
+
+
+
+
+
+ ),
+ },
+ { path: '/devices', element: },
+ { path: '/setting', element: },
+ ],
+ },
+]);
+
+export function Settings() {
+ useTranslation();
+ return ;
+}
diff --git a/src/features/profile/components/activeDevices/ActiveDevices.tsx b/src/features/profile/components/activeDevices/ActiveDevices.tsx
index f4b4bb6..ae8982e 100644
--- a/src/features/profile/components/activeDevices/ActiveDevices.tsx
+++ b/src/features/profile/components/activeDevices/ActiveDevices.tsx
@@ -66,7 +66,7 @@ export function ActiveDevices() {
justifyContent: 'space-between',
alignItems: 'center',
flexWrap: 'wrap',
- gap: 2,
+ py: 1,
mb: 2,
}}
>
@@ -96,8 +96,8 @@ export function ActiveDevices() {
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
- gap: 1,
py: 1,
+ width: '690px',
}}
>
-
+
{device.deviceModel}
diff --git a/src/features/profile/components/security/UserSecurity.tsx b/src/features/profile/components/security/PasswordSecurity.tsx
similarity index 96%
rename from src/features/profile/components/security/UserSecurity.tsx
rename to src/features/profile/components/security/PasswordSecurity.tsx
index 578e0bf..9f3a619 100644
--- a/src/features/profile/components/security/UserSecurity.tsx
+++ b/src/features/profile/components/security/PasswordSecurity.tsx
@@ -19,7 +19,7 @@ import { Toast } from '@/components/Toast';
import Logo from '@/components/Logo';
import { CardContainer } from '@/components/CardContainer';
-export function UserSecurity() {
+export function PasswordSecurity() {
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
const { t } = useTranslation('security');
@@ -67,7 +67,7 @@ export function UserSecurity() {
}, [password, validPassword]);
return (
-
+
-
+
{changePassword ? (
- رمز عبور فعال است
+
+ {t('securityForm.activePassword')}
+
- آخرین تغییر چند ثانیه پیش
+ {t('securityForm.lastChange')}
) : (
diff --git a/src/features/profile/components/security/RecentLogins.tsx b/src/features/profile/components/security/RecentLogins.tsx
new file mode 100644
index 0000000..1528593
--- /dev/null
+++ b/src/features/profile/components/security/RecentLogins.tsx
@@ -0,0 +1,99 @@
+import { Box, Typography, Button } from '@mui/material';
+import { CardContainer } from '@/components/CardContainer';
+import { useTranslation } from 'react-i18next';
+
+export function RecentLogins() {
+ const { t } = useTranslation('security');
+ const data = [
+ {
+ id: 0,
+ time: 'دقایقی پیش',
+ device: 'asus i5 24i',
+ ip: '192.168.1.1',
+ current: true,
+ },
+ {
+ id: 1,
+ time: '۲۲:۱۳ - ۱۴۰۴/۰۹/۰۹',
+ device: 'samsung s23 ultra',
+ ip: '192.220.1.1',
+ current: false,
+ },
+ ];
+
+ return (
+
+
+
+
+
+ {data.map((d) => (
+
+
+ {d.time}
+
+
+ {d.device}
+
+
+ {d.ip}
+
+
+ {d.current ? (
+
+ ) : (
+
+ )}
+
+
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/src/features/profile/components/security/Security.tsx b/src/features/profile/components/security/Security.tsx
new file mode 100644
index 0000000..08a81ec
--- /dev/null
+++ b/src/features/profile/components/security/Security.tsx
@@ -0,0 +1,12 @@
+import { PasswordSecurity } from './PasswordSecurity';
+import { RecentLogins } from './RecentLogins';
+import { Box } from '@mui/material';
+
+export function Security() {
+ return (
+
+
+
+
+ );
+}
diff --git a/src/features/profile/components/setting/Setting.tsx b/src/features/profile/components/setting/Setting.tsx
index 06ec217..850d1cd 100644
--- a/src/features/profile/components/setting/Setting.tsx
+++ b/src/features/profile/components/setting/Setting.tsx
@@ -27,15 +27,6 @@ export function Setting() {
{ code: 'fa', label: 'فارسی' },
];
- const handleDraftLanguageChange = (
- _: any,
- newValue: { code: string; label: string } | null,
- ) => {
- if (newValue) {
- setDraftLanguage(newValue.code);
- }
- };
-
const calendarOptions = [
t('settings.christian'),
t('settings.solar'),
@@ -45,6 +36,11 @@ export function Setting() {
t('settings.solar'),
);
+ const handleDraftLanguageChange = (
+ _: any,
+ v: { code: string; label: string } | null,
+ ) => v && setDraftLanguage(v.code);
+
const handleCancel = () => {
setDraftLanguage(savedLanguage);
setIsEditing(false);
@@ -58,38 +54,23 @@ export function Setting() {
setIsEditing(false);
};
- const handleEditToggle = () => {
- if (isEditing) {
- handleSave();
- } else {
- setDraftLanguage(savedLanguage);
- setIsEditing(true);
- }
- };
+ const handleEditToggle = () =>
+ isEditing ? handleSave() : setIsEditing(true);
return (
-
+
-
-
+
}
/>
-
-
+
{isEditing ? (
{t('settings.theme')}
) : (
-
+
{t('settings.theme')}
@@ -146,55 +128,49 @@ export function Setting() {
)}
-
-
+
{isEditing ? (
option.label}
+ getOptionLabel={(o) => o.label}
value={
- languageOptions.find((opt) => opt.code === draftLanguage) ||
- null
+ languageOptions.find((o) => o.code === draftLanguage) || null
}
onChange={handleDraftLanguageChange}
- renderInput={(params) => (
-
+ renderInput={(p) => (
+
)}
- size="small"
- sx={{ width: 337, height: '56px' }}
+ size="medium"
+ fullWidth
/>
) : (
-
+
{t('settings.language')}
- {
- languageOptions.find((opt) => opt.code === savedLanguage)
- ?.label
- }
+ {languageOptions.find((o) => o.code === savedLanguage)?.label}
)}
-
-
-
+
+
{isEditing ? (
newVal && setSelectedCalendar(newVal)}
- renderInput={(params) => (
-
+ onChange={(_, v) => v && setSelectedCalendar(v)}
+ renderInput={(p) => (
+
)}
- size="small"
- sx={{ width: 337, height: 56 }}
+ size="medium"
+ fullWidth
/>
) : (
-
-
+
+
{t('settings.calendar')}
{selectedCalendar}