feat: add setting and Active devices
This commit is contained in:
@@ -1,322 +0,0 @@
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
TextField,
|
||||
DialogActions,
|
||||
IconButton,
|
||||
} from '@mui/material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useState, useEffect } from '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',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'background.paper',
|
||||
px: 2,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
backgroundColor: 'background.default',
|
||||
width: '100%',
|
||||
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>
|
||||
|
||||
<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={{ textAlign: 'center', py: '43.5px' }}
|
||||
>
|
||||
{t('securityForm.notDeterminedPassword')}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Dialog
|
||||
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,
|
||||
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>
|
||||
|
||||
{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)}
|
||||
error={confirmPassword.length > 0 && !matchPassword}
|
||||
helperText={
|
||||
confirmPassword.length > 0 && !matchPassword
|
||||
? t('securityForm.notCompatibility')
|
||||
: ' '
|
||||
}
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: 2,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions
|
||||
sx={{
|
||||
px: 3,
|
||||
pb: 2,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
175
src/features/profile/components/activeDevices/ActiveDevices.tsx
Normal file
175
src/features/profile/components/activeDevices/ActiveDevices.tsx
Normal file
@@ -0,0 +1,175 @@
|
||||
import { Box, Typography, Button } from '@mui/material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { DeviceMessage, Logout } from 'iconsax-react';
|
||||
import Logo from '@/components/Logo';
|
||||
|
||||
export function ActiveDevices() {
|
||||
const { t } = useTranslation('activeDevices');
|
||||
|
||||
const devices = [
|
||||
{
|
||||
id: 0,
|
||||
timeAndDate: 'دقایقی پیش',
|
||||
deviceModel: 'asus i5 24i',
|
||||
ip: '192.168.1.1',
|
||||
current: true,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
timeAndDate: '۲۲:۱۳ - ۱۴۰۴/۰۹/۰۹',
|
||||
deviceModel: 'Dell XPS 15',
|
||||
ip: '89.165.23.12',
|
||||
current: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
timeAndDate: '۲۲:۱۳ - ۱۴۰۴/۰۹/۰۹',
|
||||
deviceModel: 'Samsung Galaxy S22',
|
||||
ip: '10.0.0.5',
|
||||
current: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
timeAndDate: '۲۲:۱۳ - ۱۴۰۴/۰۹/۰۹',
|
||||
deviceModel: 'MacBook Pro 14-inch',
|
||||
ip: '172.16.0.101',
|
||||
current: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: 'background.paper',
|
||||
width: '100%',
|
||||
maxWidth: '834px',
|
||||
mx: 'auto',
|
||||
px: { xs: 2, sm: 3 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
py: 2,
|
||||
}}
|
||||
>
|
||||
<Logo />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
// mt: 2,
|
||||
width: '100%',
|
||||
height: '1px',
|
||||
backgroundColor: 'divider',
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ px: 2 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
maxWidth: '754px',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography variant="h6">{t('active.activeDevices')}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('active.activeDevicesCaption')}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '10px',
|
||||
borderColor: 'error.main',
|
||||
color: 'error.main',
|
||||
border: '1px solid',
|
||||
}}
|
||||
>
|
||||
{t('active.deletDevicesButton')}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: '32px', px: 4 }}>
|
||||
{devices.map((device) => (
|
||||
<Box
|
||||
key={device.id}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
// gap: 1,
|
||||
py: 1,
|
||||
width: '690px',
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ width: '138px' }}>
|
||||
{device.timeAndDate}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '138px',
|
||||
height: '52px',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<DeviceMessage size={24} color="#82B1FF" />
|
||||
<Typography variant="body2" noWrap>
|
||||
{device.deviceModel}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography variant="body2" sx={{ width: '138px' }}>
|
||||
{device.ip}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: '138px', alignItems: 'center' }}>
|
||||
{device.current ? (
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
borderRadius: '15px',
|
||||
border: '2px solid',
|
||||
borderColor: 'success.main',
|
||||
height: '30px',
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'success.main',
|
||||
width: '75%',
|
||||
}}
|
||||
>
|
||||
{t('active.currentDevice')}
|
||||
</Button>
|
||||
) : null}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ width: '138px', alignItems: 'center' }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<Logout size={18} color="#E53935" />}
|
||||
sx={{
|
||||
width: '80%',
|
||||
borderRadius: '15px',
|
||||
border: '1px solid',
|
||||
borderColor: 'error.main',
|
||||
height: '30px',
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'error.main',
|
||||
}}
|
||||
disabled={device.current}
|
||||
>
|
||||
{t('active.deleteDevice')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
324
src/features/profile/components/security/UserSecurity.tsx
Normal file
324
src/features/profile/components/security/UserSecurity.tsx
Normal file
@@ -0,0 +1,324 @@
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
TextField,
|
||||
DialogActions,
|
||||
IconButton,
|
||||
} from '@mui/material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { CloseCircle, Refresh } from 'iconsax-react';
|
||||
import { PasswordValidationItem } from './PasswordValidation';
|
||||
import { Toast } from '@/components/Toast';
|
||||
import Logo from '@/components/Logo';
|
||||
import { CardContainer } from '@/components/CardContainer';
|
||||
|
||||
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: '796px',
|
||||
mx: 'auto',
|
||||
px: { xs: 2, sm: 3 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
py: 2,
|
||||
// width: '796px',
|
||||
}}
|
||||
>
|
||||
<Logo />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
// mt: 2,
|
||||
width: '100%',
|
||||
height: '1px',
|
||||
backgroundColor: 'divider',
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'background.paper',
|
||||
px: 2,
|
||||
}}
|
||||
>
|
||||
<CardContainer
|
||||
title={t('securityForm.password')}
|
||||
subtitle={t('securityForm.determinePassword')}
|
||||
action={
|
||||
<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 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={{ textAlign: 'center', py: '43.5px' }}
|
||||
>
|
||||
{t('securityForm.notDeterminedPassword')}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Dialog
|
||||
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,
|
||||
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>
|
||||
|
||||
{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)}
|
||||
error={confirmPassword.length > 0 && !matchPassword}
|
||||
helperText={
|
||||
confirmPassword.length > 0 && !matchPassword
|
||||
? t('securityForm.notCompatibility')
|
||||
: ' '
|
||||
}
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: 2,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions
|
||||
sx={{
|
||||
px: 3,
|
||||
pb: 2,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</CardContainer>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
202
src/features/profile/components/setting/Setting.tsx
Normal file
202
src/features/profile/components/setting/Setting.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
useColorScheme,
|
||||
TextField,
|
||||
Autocomplete,
|
||||
} from '@mui/material';
|
||||
import { CardContainer } from '@/components/CardContainer';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useState } from 'react';
|
||||
import { ThemeToggleButton } from '@/components/ThemToggle';
|
||||
import { Languages, CountryFlag } from './data/Languages';
|
||||
import Logo from '@/components/Logo';
|
||||
|
||||
export function Setting() {
|
||||
const { t } = useTranslation('setting');
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const { mode } = useColorScheme();
|
||||
const [selectedLang, setSelectedLang] = useState('fa');
|
||||
const selectedLanguage = Languages.find((lang) => lang.code === selectedLang);
|
||||
const calendar = ['میلادی', 'شمسی'];
|
||||
const [selectedCalendar, setSelectedCalendar] = useState('شمسی');
|
||||
|
||||
const toggleEdit = () => {
|
||||
setIsEditing((prev) => !prev);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center', // 👈 horizontal centering
|
||||
justifyContent: 'flex-start',
|
||||
minHeight: '100vh', // optional: full height of screen
|
||||
px: 2, // padding on smaller screens
|
||||
}}
|
||||
>
|
||||
<Box sx={{ maxWidth: '754px', backgroundColor: 'background.paper' }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
py: 2,
|
||||
// width: '796px',
|
||||
}}
|
||||
>
|
||||
<Logo />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
// mt: 2,
|
||||
width: '100%',
|
||||
height: '1px',
|
||||
backgroundColor: 'divider',
|
||||
}}
|
||||
/>
|
||||
<CardContainer
|
||||
title={t('settings.title')}
|
||||
subtitle={t('settings.description')}
|
||||
highlighted={isEditing}
|
||||
action={
|
||||
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
|
||||
{isEditing && (
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={() => setIsEditing(false)}
|
||||
size="large"
|
||||
sx={{
|
||||
color: 'primary.main',
|
||||
textTransform: 'none',
|
||||
width: { xs: '100%', sm: 'auto' },
|
||||
fontSize: { xs: '0.85rem', sm: '1rem' },
|
||||
}}
|
||||
>
|
||||
{t('settings.rejectButton')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={toggleEdit}
|
||||
size="large"
|
||||
variant="outlined"
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
border: '1px solid',
|
||||
borderColor: 'primary.main',
|
||||
borderRadius: '4px',
|
||||
bgcolor: isEditing ? 'primary.main' : 'background.paper',
|
||||
color: isEditing ? 'primary.contrastText' : 'primary.main',
|
||||
px: { xs: 2, sm: '22px' },
|
||||
py: { xs: '6px', sm: '8px' },
|
||||
width: { xs: '100%', sm: isEditing ? '85px' : '93px' },
|
||||
fontSize: { xs: '0.9rem', sm: '1rem' },
|
||||
}}
|
||||
>
|
||||
{isEditing
|
||||
? t('settings.saveButton')
|
||||
: t('settings.editButton')}
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 2,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-between',
|
||||
bgcolor: 'background.paper',
|
||||
px: { xs: 2, sm: 3, md: 4 },
|
||||
py: 2,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: '337px' }}>
|
||||
{isEditing ? (
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<Typography variant="body1">{t('settings.theme')}</Typography>
|
||||
<ThemeToggleButton />
|
||||
</Box>
|
||||
) : (
|
||||
<>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settings.theme')}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{mode === 'light'
|
||||
? t('settings.light')
|
||||
: t('settings.dark')}
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ width: '337px' }}>
|
||||
{isEditing ? (
|
||||
<Autocomplete
|
||||
options={Languages}
|
||||
getOptionLabel={(option) => option.fa}
|
||||
value={selectedLanguage || null}
|
||||
onChange={(_, newValue) => {
|
||||
if (newValue) setSelectedLang(newValue.code);
|
||||
}}
|
||||
renderOption={(props, option) => (
|
||||
<Box
|
||||
component="li"
|
||||
{...props}
|
||||
sx={{ display: 'flex', gap: 1 }}
|
||||
>
|
||||
<CountryFlag country={option.code} />
|
||||
</Box>
|
||||
)}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label={t('settings.language')} />
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Typography variant="caption">
|
||||
{t('settings.language')}
|
||||
</Typography>
|
||||
<CountryFlag country={selectedLang} />
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
px: { xs: 2, sm: 3, md: 4 },
|
||||
py: 2,
|
||||
}}
|
||||
>
|
||||
{isEditing ? (
|
||||
<Autocomplete
|
||||
options={calendar}
|
||||
value={selectedCalendar}
|
||||
onChange={(_, newValue) => {
|
||||
if (newValue) setSelectedCalendar(newValue);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label={t('settings.calendar')} />
|
||||
)}
|
||||
sx={{ width: '337px' }}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Typography variant="caption">
|
||||
{t('settings.calendar')}
|
||||
</Typography>
|
||||
<Typography variant="body1">{selectedCalendar}</Typography>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
44
src/features/profile/components/setting/data/Languages.tsx
Normal file
44
src/features/profile/components/setting/data/Languages.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { Box, Typography } from '@mui/material';
|
||||
|
||||
export const Languages = [
|
||||
{ code: 'en', en: 'English', fa: 'انگلیسی' },
|
||||
{ code: 'fa', en: 'Persian (Farsi)', fa: 'فارسی' },
|
||||
{ code: 'ar', en: 'Arabic', fa: 'عربی' },
|
||||
{ code: 'fr', en: 'French', fa: 'فرانسوی' },
|
||||
{ code: 'de', en: 'German', fa: 'آلمانی' },
|
||||
{ code: 'es', en: 'Spanish', fa: 'اسپانیایی' },
|
||||
{ code: 'it', en: 'Italian', fa: 'ایتالیایی' },
|
||||
{ code: 'ru', en: 'Russian', fa: 'روسی' },
|
||||
{ code: 'zh', en: 'Chinese', fa: 'چینی' },
|
||||
{ code: 'ja', en: 'Japanese', fa: 'ژاپنی' },
|
||||
{ code: 'ko', en: 'Korean', fa: 'کرهای' },
|
||||
{ code: 'hi', en: 'Hindi', fa: 'هندی' },
|
||||
{ code: 'tr', en: 'Turkish', fa: 'ترکی استانبولی' },
|
||||
{ code: 'pt', en: 'Portuguese', fa: 'پرتغالی' },
|
||||
{ code: 'ur', en: 'Urdu', fa: 'اردو' },
|
||||
{ code: 'nl', en: 'Dutch', fa: 'هلندی' },
|
||||
{ code: 'sv', en: 'Swedish', fa: 'سوئدی' },
|
||||
{ code: 'pl', en: 'Polish', fa: 'لهستانی' },
|
||||
{ code: 'th', en: 'Thai', fa: 'تایلندی' },
|
||||
{ code: 'id', en: 'Indonesian', fa: 'اندونزیایی' },
|
||||
];
|
||||
|
||||
export function CountryFlag({ country }: { country: string }) {
|
||||
const lang = Languages.find((lang) => lang.code === country);
|
||||
const countryCode = lang?.code || 'un';
|
||||
|
||||
const flagUrl = `https://flagcdn.com/w40/${countryCode}.png`;
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<img
|
||||
src={flagUrl}
|
||||
alt={country}
|
||||
width="24"
|
||||
height="16"
|
||||
style={{ borderRadius: '2px', border: '1px solid #ccc' }}
|
||||
/>
|
||||
<Typography variant="body2">{lang ? lang.fa : 'نامشخص'}</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user