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

feat: language can be changed between persian and english and everything got responsive

Browse Source
This commit is contained in:
Koosha Lahouti
2025-07-30 19:44:08 +03:30
parent 32ea4dceeb
commit 064b3f66dc
8 changed files with 306 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/features/profile/components/security/UserSecurity.tsx
View File

@@ -8,7 +8,9 @@ import {
TextField,
DialogActions,
IconButton,
useMediaQuery,
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { useTranslation } from 'react-i18next';
import { useState, useEffect } from 'react';
import { CloseCircle, Refresh } from 'iconsax-react';
@@ -18,6 +20,8 @@ import Logo from '@/components/Logo';
import { CardContainer } from '@/components/CardContainer';
export function UserSecurity() {
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
const { t } = useTranslation('security');
const [open, setOpen] = useState(false);
const [password, setPassword] = useState('');
@@ -63,14 +67,14 @@ export function UserSecurity() {
}, [password, validPassword]);
return (
<Box sx={{ overflowX: 'hidden' }}>
<Box sx={{ overflowX: 'hidden', px: { xs: 2, sm: 3 }, pb: 4 }}>
<Box
sx={{
backgroundColor: 'background.paper',
width: '100%',
maxWidth: '796px',
mx: 'auto',
px: { xs: 2, sm: 3 },
px: { xs: 1, sm: 2 },
}}
>
<Box
@@ -79,27 +83,14 @@ export function UserSecurity() {
justifyContent: 'flex-start',
alignItems: 'center',
py: 2,
// width: '796px',
}}
>
<Logo />
</Box>
<Box
sx={{
// mt: 2,
width: '100%',
height: '1px',
backgroundColor: 'divider',
}}
sx={{ width: '100%', height: '1px', backgroundColor: 'divider' }}
/>
<Box
sx={{
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'background.paper',
px: 2,
}}
>
<Box sx={{ px: { xs: 2, sm: 3 } }}>
<CardContainer
title={t('securityForm.password')}
subtitle={t('securityForm.determinePassword')}
@@ -111,7 +102,7 @@ export function UserSecurity() {
mt: { xs: 2, sm: 0 },
backgroundColor: 'primary.main',
color: 'background.paper',
width: '142px',
width: { xs: '100%', sm: '142px' },
textTransform: 'none',
}}
>
@@ -119,30 +110,22 @@ export function UserSecurity() {
</Button>
}
>
<Box sx={{ height: '111px' }}>
<Box sx={{ height: 'auto', py: { xs: 3, sm: 4 } }}>
{changePassword ? (
<Box sx={{ flexDirection: 'column', px: 4, py: 4 }}>
<Box sx={{ flexDirection: 'column', px: 2, py: 2 }}>
<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: { xs: 4, sm: '43.5px' } }}
>
<Typography
variant="body1"
color="text.secondary"
sx={{ textAlign: 'center', py: '43.5px' }}
>
{t('securityForm.notDeterminedPassword')}
</Typography>
</Box>
{t('securityForm.notDeterminedPassword')}
</Typography>
)}
</Box>
@@ -150,21 +133,13 @@ export function UserSecurity() {
open={open}
onClose={handleClose}
fullWidth
fullScreen={fullScreen}
maxWidth="xs"
scroll="body"
PaperProps={{
sx: { mx: 1 },
}}
PaperProps={{ sx: { mx: 1 } }}
>
<DialogTitle sx={{ p: 2 }}>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: 1,
}}
>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<IconButton onClick={handleClose}>
<CloseCircle size={24} color="#82B1FF" />
</IconButton>
@@ -182,48 +157,18 @@ export function UserSecurity() {
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>
<TextField
label={t('securityForm.newPassword')}
type="password"
fullWidth
value={password}
onChange={(e) => setPassword(e.target.value)}
sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
/>
{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%',
}}
>
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box sx={{ maxWidth: '364px', width: '100%' }}>
<PasswordValidationItem
isValid={hasNumber}
label={t('securityForm.hasNumber')}
@@ -244,44 +189,26 @@ export function UserSecurity() {
</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>
<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 } }}
/>
</DialogContent>
<DialogActions
sx={{
px: 3,
pb: 2,
justifyContent: 'center',
alignItems: 'center',
}}
>
<DialogActions sx={{ px: 3, pb: 2, justifyContent: 'center' }}>
<Button
sx={{ width: '364px', height: 48 }}
fullWidth
sx={{ maxWidth: '364px', height: 48, textTransform: 'none' }}
variant="contained"
onClick={handleShowAlert}
disabled={