amir/Account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add sidebar

Browse Source
This commit is contained in:
Koosha Lahouti
2025-08-02 12:41:25 +03:30
parent 064b3f66dc
commit 482d672955
11 changed files with 435 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/features/profile/components/activeDevices/ActiveDevices.tsx
View File

@@ -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',
}}
>
<Typography
@@ -116,7 +116,11 @@ export function ActiveDevices() {
}}
>
<DeviceMessage size={24} color="#82B1FF" />
<Typography variant="body2" noWrap>
<Typography
variant="body2"
noWrap
sx={{ width: { xs: '100%', sm: '138px' } }}
>
{device.deviceModel}
</Typography>
</Box>

12
src/features/profile/components/security/UserSecurity.tsx → src/features/profile/components/security/PasswordSecurity.tsx
View File

@@ -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 (
<Box sx={{ overflowX: 'hidden', px: { xs: 2, sm: 3 }, pb: 4 }}>
<Box sx={{ overflowX: 'hidden', px: { xs: 2, sm: 3 } }}>
<Box
sx={{
backgroundColor: 'background.paper',
@@ -90,7 +90,7 @@ export function UserSecurity() {
<Box
sx={{ width: '100%', height: '1px', backgroundColor: 'divider' }}
/>
<Box sx={{ px: { xs: 2, sm: 3 } }}>
<Box>
<CardContainer
title={t('securityForm.password')}
subtitle={t('securityForm.determinePassword')}
@@ -113,9 +113,11 @@ export function UserSecurity() {
<Box sx={{ height: 'auto', py: { xs: 3, sm: 4 } }}>
{changePassword ? (
<Box sx={{ flexDirection: 'column', px: 2, py: 2 }}>
<Typography variant="h6">رمز عبور فعال است</Typography>
<Typography variant="h6">
{t('securityForm.activePassword')}
</Typography>
<Typography variant="caption" color="text.secondary">
آخرین تغییر چند ثانیه پیش
{t('securityForm.lastChange')}
</Typography>
</Box>
) : (

99
src/features/profile/components/security/RecentLogins.tsx Normal file
View File

@@ -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 (
<Box sx={{ overflowX: 'hidden', px: { xs: 2, sm: 3 } }}>
<Box
sx={{
backgroundColor: 'background.paper',
width: '100%',
maxWidth: '796px',
mx: 'auto',
px: { xs: 1, sm: 2 },
}}
>
<Box>
<CardContainer
title={t('securityForm.recentLogins')}
subtitle={t('securityForm.description')}
>
<Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
{data.map((d) => (
<Box
sx={{
display: 'flex',
// flexWrap: 'wrap',
alignItems: 'center',
gap: 1,
height: '50px',
}}
key={d.id}
>
<Typography
variant="body2"
sx={{ width: { xs: '100%', sm: '172.5px' } }}
>
{d.time}
</Typography>
<Typography
variant="body2"
sx={{ width: { xs: '100%', sm: '172.5px' } }}
>
{d.device}
</Typography>
<Typography
variant="body2"
sx={{ width: { xs: '100%', sm: '172.5px' } }}
>
{d.ip}
</Typography>
<Box sx={{ width: { xs: '100%', sm: '172.5px' } }}>
{d.current ? (
<Button
variant="outlined"
sx={{
borderRadius: '15px',
border: '2px solid',
borderColor: 'success.main',
height: '30px',
whiteSpace: 'nowrap',
color: 'success.main',
width: '93px',
textTransform: 'none',
}}
>
{t('securityForm.currentDevice')}
</Button>
) : (
<Typography></Typography>
)}
</Box>
</Box>
))}
</Box>
</CardContainer>
</Box>
</Box>
</Box>
);
}

12
src/features/profile/components/security/Security.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { PasswordSecurity } from './PasswordSecurity';
import { RecentLogins } from './RecentLogins';
import { Box } from '@mui/material';
export function Security() {
return (
<Box sx={{ backgroundColor: 'background.paper' }}>
<PasswordSecurity />
<RecentLogins />
</Box>
);
}

94
src/features/profile/components/setting/Setting.tsx
View File

@@ -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 (
<Box
sx={{
px: { xs: 2, sm: 3 },
py: 4,
backgroundColor: 'background.default',
}}
>
<Box sx={{ px: { xs: 2, sm: 3 }, py: 4, bgcolor: 'background.default' }}>
<Box
sx={{
width: '754px',
maxWidth: 790,
mx: 'auto',
backgroundColor: 'background.paper',
bgcolor: 'background.paper',
px: { xs: 1, sm: 2 },
}}
>
<Box sx={{ display: 'flex', alignItems: 'center', py: 2 }}>
<Logo />
</Box>
<Box
sx={{ width: '100%', height: '1px', backgroundColor: 'divider' }}
/>
<Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
<CardContainer
title={t('settings.title')}
subtitle={t('settings.description')}
@@ -119,24 +100,25 @@ export function Setting() {
</Box>
}
/>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
flexDirection: { xs: 'column', sm: 'row' },
gap: 2,
mt: 2,
width: '754px',
mx: 'auto',
width: { xs: '100%', md: 700 },
px: 4,
}}
>
<Box sx={{ flex: '1 1 337px' }}>
<Box sx={{ flex: 1, maxWidth: { sm: 337 }, width: '100%' }}>
{isEditing ? (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography variant="body1">{t('settings.theme')}</Typography>
<ThemeToggleButton />
</Box>
) : (
<Box sx={{ px: 6 }}>
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.theme')}
</Typography>
@@ -146,55 +128,49 @@ export function Setting() {
</Box>
)}
</Box>
<Box sx={{ flex: '1 1 337px' }}>
<Box sx={{ flex: 1, maxWidth: { sm: 337 }, width: '100%' }}>
{isEditing ? (
<Autocomplete
options={languageOptions}
getOptionLabel={(option) => 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) => (
<TextField {...params} label={t('settings.language')} />
renderInput={(p) => (
<TextField {...p} label={t('settings.language')} />
)}
size="small"
sx={{ width: 337, height: '56px' }}
size="medium"
fullWidth
/>
) : (
<Box sx={{ px: 6 }}>
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.language')}
</Typography>
<Typography variant="body1">
{
languageOptions.find((opt) => opt.code === savedLanguage)
?.label
}
{languageOptions.find((o) => o.code === savedLanguage)?.label}
</Typography>
</Box>
)}
</Box>
</Box>
<Box sx={{ mt: 2 }}>
<Box sx={{ width: { xs: '100%', sm: '337px' } }}>
<Box sx={{ mt: 2, px: 4 }}>
<Box sx={{ maxWidth: { sm: 310 }, width: '100%' }}>
{isEditing ? (
<Autocomplete
options={calendarOptions}
value={selectedCalendar}
onChange={(_, newVal) => newVal && setSelectedCalendar(newVal)}
renderInput={(params) => (
<TextField {...params} label={t('settings.calendar')} />
onChange={(_, v) => v && setSelectedCalendar(v)}
renderInput={(p) => (
<TextField {...p} label={t('settings.calendar')} />
)}
size="small"
sx={{ width: 337, height: 56 }}
size="medium"
fullWidth
/>
) : (
<Box sx={{ px: 6 }}>
<Typography variant="caption">
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.calendar')}
</Typography>
<Typography variant="body1">{selectedCalendar}</Typography>