feat: responsive design and english translator for this section
This commit is contained in:
41
public/locales/en/profileSetting.json
Normal file
41
public/locales/en/profileSetting.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"settingForm": {
|
||||
"titlePersonalInfo": "My Personal Information",
|
||||
"descriptionPersonalInfo": "This information is only for your identification and remains with Harmony.",
|
||||
"titlePhoneNumber": "My phone number",
|
||||
"descriptionPhoneNumber": "This information is only for your identification and remains with Harmony.",
|
||||
"titleSocial": "My email and social medias",
|
||||
"descriptionSocial": "This information is only for your identification and remains with Harmony.",
|
||||
"rejectButton": "Cancel",
|
||||
"saveButton": "Save",
|
||||
"editButton": "Edit",
|
||||
"editPhoneNumber": "Change phone number",
|
||||
"addEmailOrSocialButton": "Add email / social",
|
||||
"addEmailButton": "Add email",
|
||||
"name": "Name",
|
||||
"familyName": "Family Name",
|
||||
"country": "Country",
|
||||
"gender": "Gender",
|
||||
"nationalCode": "National code",
|
||||
"man": "Male",
|
||||
"woman": "Female",
|
||||
"genderPlaceholder": "Male",
|
||||
"newPhoneNumber": "New phone number",
|
||||
"verificationCodeButton": "Send verification code",
|
||||
"verificationCode": "Verification code",
|
||||
"checkCode": "Check code",
|
||||
"successButton": "Confirmed",
|
||||
"email": "Email",
|
||||
"apple": "Apple",
|
||||
"google": "Google",
|
||||
"newEmail": "New email",
|
||||
"dialogHeader": "By activating your email, you can use this email to log in the next time you log in.",
|
||||
"or": "Or",
|
||||
"emailError": "Please enter a valid email.",
|
||||
"profilePicture": "User account image",
|
||||
"allowedFormat": "Allowed formats: PNG, JPEG, GIF (maximum 10 MB)",
|
||||
"uploadPicture": "Upload image",
|
||||
"phoneNumberText": "Your new contact number will replace your previous contact number.",
|
||||
"verb": "."
|
||||
}
|
||||
}
|
||||
25
src/App.tsx
25
src/App.tsx
@@ -9,31 +9,8 @@ import {
|
||||
import './App.css';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { LanguageManager } from './components/LanguageManager';
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
|
||||
=======
|
||||
>>>>>>> f1620b6 (fix: issue in user profile)
|
||||
=======
|
||||
=======
|
||||
import { UserProfileForm } from './features/profile/components/UserProfileForm';
|
||||
|
||||
>>>>>>> 3698cbf (feat: implement user profile form)
|
||||
>>>>>>> f9815fb (fix: issue in user profile)
|
||||
=======
|
||||
>>>>>>> 2a79376 (fix: merge conflict)
|
||||
=======
|
||||
import { UserForm } from './features/profile/components/UserForm';
|
||||
>>>>>>> 60c6dc1 (fix: styles)
|
||||
=======
|
||||
>>>>>>> afc7ff8 (fix: translation and styles)
|
||||
=======
|
||||
import { UserForm } from './features/profile/components/UserForm';
|
||||
>>>>>>> b327e7a (fix: styles and add a country textfield in personal field)
|
||||
|
||||
function App() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Box, Typography } from '@mui/material';
|
||||
|
||||
export function CardContainer({
|
||||
title,
|
||||
subtitle,
|
||||
@@ -15,13 +16,16 @@ export function CardContainer({
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: '786px',
|
||||
width: '100%',
|
||||
backgroundColor: 'white',
|
||||
maxWidth: {
|
||||
xs: '100%',
|
||||
sm: '500pxpx',
|
||||
md: '786px',
|
||||
},
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
px: 2,
|
||||
px: { xs: 2, sm: 3, md: 4 },
|
||||
py: 2,
|
||||
}}
|
||||
>
|
||||
@@ -30,7 +34,7 @@ export function CardContainer({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: highlighted ? '#E3F2FD' : '#F5F5F5',
|
||||
backgroundColor: highlighted ? 'primary.light' : 'background.default',
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
@@ -38,12 +42,12 @@ export function CardContainer({
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
color={highlighted ? '#2979FF' : 'text.primary'}
|
||||
color={highlighted ? 'primary.main' : 'text.primary'}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography
|
||||
color={highlighted ? '#2979FF' : 'text.secondary'}
|
||||
color={highlighted ? 'primary.main' : 'text.secondary'}
|
||||
variant="body2"
|
||||
>
|
||||
{subtitle}
|
||||
|
||||
@@ -89,7 +89,11 @@ export function PersonalInformation() {
|
||||
variant="text"
|
||||
onClick={() => setIsEditing(false)}
|
||||
size="large"
|
||||
sx={{ color: '#2979FF', width: '43px' }}
|
||||
sx={{
|
||||
color: 'primary.main',
|
||||
width: '43px',
|
||||
textTransform: 'none',
|
||||
}}
|
||||
>
|
||||
{t('settingForm.rejectButton')}
|
||||
</Button>
|
||||
@@ -97,12 +101,16 @@ export function PersonalInformation() {
|
||||
<Button
|
||||
onClick={toggleEdit}
|
||||
size="large"
|
||||
variant="outlined"
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
border: '1px solid',
|
||||
borderColor: '#2979FF',
|
||||
borderColor: 'primary.main',
|
||||
borderRadius: '4px',
|
||||
backgroundColor: isEditing ? '#2979FF' : 'white',
|
||||
color: isEditing ? 'white' : '#2979FF',
|
||||
backgroundColor: isEditing
|
||||
? 'primary.main'
|
||||
: 'background.paper',
|
||||
color: isEditing ? 'primary.contrastText' : 'primary.main',
|
||||
px: '22px',
|
||||
py: '8px',
|
||||
width: isEditing ? '85px' : '93px',
|
||||
@@ -117,7 +125,7 @@ export function PersonalInformation() {
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
px: 4,
|
||||
px: { xs: 2, sm: 3, md: 4 },
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -125,10 +133,17 @@ export function PersonalInformation() {
|
||||
}}
|
||||
>
|
||||
{isEditing && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
sx={{
|
||||
bgcolor: '#00C3B7',
|
||||
bgcolor: 'secondary.main',
|
||||
width: 88,
|
||||
height: 88,
|
||||
fontSize: '20px',
|
||||
@@ -170,50 +185,63 @@ export function PersonalInformation() {
|
||||
)}
|
||||
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
|
||||
<Box sx={{ width: 'calc(50% - 8px)' }}>
|
||||
{isEditing ? (
|
||||
<TextField
|
||||
fullWidth
|
||||
name="firstName"
|
||||
value={data.firstName}
|
||||
onChange={handleChange}
|
||||
label={t('settingForm.name')}
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ px: 4 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{`${t('settingForm.name')} و ${t('settingForm.familyName')}`}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Avatar>{initials}</Avatar>
|
||||
{[
|
||||
{
|
||||
name: 'firstName',
|
||||
label: t('settingForm.name'),
|
||||
value: data.firstName,
|
||||
},
|
||||
{
|
||||
name: 'lastName',
|
||||
label: t('settingForm.familyName'),
|
||||
value: data.lastName,
|
||||
},
|
||||
{
|
||||
name: 'nationalCode',
|
||||
label: t('settingForm.nationalCode'),
|
||||
value: data.nationalCode,
|
||||
},
|
||||
].map((field, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
width: {
|
||||
xs: '100%',
|
||||
sm: '48%',
|
||||
md: 'calc(50% - 8px)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{isEditing ? (
|
||||
<TextField
|
||||
fullWidth
|
||||
name={field.name}
|
||||
value={field.value}
|
||||
onChange={handleChange}
|
||||
label={field.label}
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ px: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{field.label}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.primary">
|
||||
{displayValue(data.firstName + ' ' + data.lastName)}
|
||||
{displayValue(field.value)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
|
||||
<Box sx={{ width: 'calc(50% - 8px)' }}>
|
||||
{isEditing ? (
|
||||
<TextField
|
||||
fullWidth
|
||||
name="lastName"
|
||||
value={data.lastName}
|
||||
onChange={handleChange}
|
||||
label={t('settingForm.familyName')}
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ px: 4 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settingForm.country')}
|
||||
</Typography>
|
||||
<CountryFlag country={data.country} />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ width: 'calc(50% - 8px)' }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: {
|
||||
xs: '100%',
|
||||
sm: '48%',
|
||||
md: 'calc(50% - 8px)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{isEditing ? (
|
||||
<FormControl fullWidth>
|
||||
<Select
|
||||
@@ -238,7 +266,7 @@ export function PersonalInformation() {
|
||||
</Select>
|
||||
</FormControl>
|
||||
) : (
|
||||
<Box sx={{ px: 4 }}>
|
||||
<Box sx={{ px: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settingForm.gender')}
|
||||
</Typography>
|
||||
@@ -249,29 +277,15 @@ export function PersonalInformation() {
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ width: 'calc(50% - 8px)' }}>
|
||||
{isEditing ? (
|
||||
<TextField
|
||||
fullWidth
|
||||
name="nationalCode"
|
||||
value={data.nationalCode}
|
||||
onChange={handleChange}
|
||||
label={t('settingForm.nationalCode')}
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ px: 4 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settingForm.nationalCode')}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.primary">
|
||||
{displayValue(data.nationalCode)}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
{isEditing && (
|
||||
<Autocomplete
|
||||
sx={{ width: 'calc(50% - 8px)' }}
|
||||
sx={{
|
||||
width: {
|
||||
xs: '100%',
|
||||
sm: '48%',
|
||||
md: 'calc(50% - 8px)',
|
||||
},
|
||||
}}
|
||||
options={Object.keys(countryCodeMap)}
|
||||
value={data.country}
|
||||
onChange={(_, newValue) =>
|
||||
@@ -290,6 +304,24 @@ export function PersonalInformation() {
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isEditing && (
|
||||
<Box
|
||||
sx={{
|
||||
px: 2,
|
||||
width: {
|
||||
xs: '100%',
|
||||
sm: '48%',
|
||||
md: 'calc(50% - 8px)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settingForm.country')}
|
||||
</Typography>
|
||||
<CountryFlag country={data.country} />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContainer>
|
||||
|
||||
@@ -56,7 +56,7 @@ export function PhoneNumber() {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
// p: 2,
|
||||
px: 2,
|
||||
}}
|
||||
>
|
||||
<CardContainer
|
||||
@@ -70,7 +70,11 @@ export function PhoneNumber() {
|
||||
variant="text"
|
||||
onClick={toggleEdit}
|
||||
size="large"
|
||||
sx={{ color: '#2979FF', width: '43px' }}
|
||||
sx={{
|
||||
color: 'primary.main',
|
||||
textTransform: 'none',
|
||||
width: '43px',
|
||||
}}
|
||||
>
|
||||
{t('settingForm.rejectButton')}
|
||||
</Button>
|
||||
@@ -80,12 +84,16 @@ export function PhoneNumber() {
|
||||
size="large"
|
||||
variant="outlined"
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
border: '1px solid',
|
||||
borderColor: '#2979FF',
|
||||
borderColor: 'primary.main',
|
||||
borderRadius: '4px',
|
||||
backgroundColor: isEditing ? '#2979FF' : 'white',
|
||||
color: isEditing ? 'white' : '#2979FF',
|
||||
backgroundColor: isEditing
|
||||
? 'primary.main'
|
||||
: 'background.paper',
|
||||
color: isEditing ? 'primary.contrastText' : 'primary.main',
|
||||
width: isEditing ? '85px' : '161px',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{isEditing
|
||||
@@ -96,9 +104,9 @@ export function PhoneNumber() {
|
||||
}
|
||||
>
|
||||
{isEditing ? (
|
||||
<Box sx={{ px: 4 }}>
|
||||
<Box sx={{ width: '668px', mb: 2 }}>
|
||||
<Typography variant="h6" color="text.primary">
|
||||
<Box sx={{ px: { xs: 2, sm: 4 } }}>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<Typography variant="h6">
|
||||
{t('settingForm.editPhoneNumber')}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
@@ -110,19 +118,18 @@ export function PhoneNumber() {
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '700px',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
name="phoneNumber"
|
||||
placeholder="09123456789"
|
||||
label={t('settingForm.newPhoneNumber')}
|
||||
type="tel"
|
||||
value={phoneNumber}
|
||||
onChange={handlePhoneNumberChange}
|
||||
sx={{ width: '100%', maxWidth: '474px' }}
|
||||
sx={{ flex: 1, minWidth: '250px' }}
|
||||
placeholder="09123456789"
|
||||
inputProps={{
|
||||
dir: 'rtl',
|
||||
style: { textAlign: 'right' },
|
||||
@@ -132,10 +139,13 @@ export function PhoneNumber() {
|
||||
buttonState === 'counting' ? (
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => setButtonState('default')}
|
||||
onClick={() => {
|
||||
setButtonState('default');
|
||||
setPhoneNumber('');
|
||||
}}
|
||||
sx={{ mr: 1 }}
|
||||
>
|
||||
<Edit size="24" color="#2979FF" />
|
||||
<Edit size="24" color="#64B5F6" />
|
||||
</IconButton>
|
||||
) : null,
|
||||
}}
|
||||
@@ -144,25 +154,30 @@ export function PhoneNumber() {
|
||||
{isVerified ? (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: '194px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'success.main',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<TickCircle size="20" color="#2e7d32" variant="Bold" />
|
||||
{t('settingForm.successButton')}
|
||||
<TickCircle
|
||||
size="24"
|
||||
style={{ color: 'black' }}
|
||||
variant="Bold"
|
||||
/>
|
||||
<Typography sx={{ color: 'success.main' }}>
|
||||
{t('settingForm.successButton')}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Button
|
||||
variant="text"
|
||||
sx={{ width: '100%', maxWidth: '194px', color: '#2979FF' }}
|
||||
size="large"
|
||||
onClick={handleSendCode}
|
||||
disabled={buttonState === 'counting'}
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
minWidth: '170px',
|
||||
color: 'primary.main',
|
||||
}}
|
||||
>
|
||||
{buttonState === 'counting' ? (
|
||||
<CountDownTimer
|
||||
@@ -180,32 +195,32 @@ export function PhoneNumber() {
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '700px',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
mt: 2,
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
name="verificationCode"
|
||||
placeholder={t('settingForm.verificationCode')}
|
||||
label={t('settingForm.verificationCode')}
|
||||
type="tel"
|
||||
value={verificationCode}
|
||||
onChange={handleVerificationCodeChange}
|
||||
sx={{ width: '100%', maxWidth: '474px' }}
|
||||
sx={{ flex: 1, minWidth: '250px' }}
|
||||
placeholder={t('settingForm.verificationCode')}
|
||||
inputProps={{
|
||||
dir: 'rtl',
|
||||
style: { textAlign: 'right' },
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={handleVerifyCode}
|
||||
disabled={isVerifying || verificationCode.length === 0}
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: '194px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#2979FF',
|
||||
textTransform: 'none',
|
||||
minWidth: '170px',
|
||||
backgroundColor: 'primary.main',
|
||||
}}
|
||||
>
|
||||
{isVerifying ? (
|
||||
@@ -226,18 +241,16 @@ export function PhoneNumber() {
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ px: 4 }}>
|
||||
<Box sx={{ px: { xs: 2, sm: 4 } }}>
|
||||
{phones.map((item, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
height: '76px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
// mb: 1,
|
||||
width: '690px',
|
||||
// mt: 1,
|
||||
py: 1,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" color="text.primary">
|
||||
|
||||
@@ -54,37 +54,67 @@ export function SocialMedia() {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// backgroundColor: '#F5F5F5',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
// p: 2,
|
||||
alignItems: 'center',
|
||||
px: 2,
|
||||
}}
|
||||
>
|
||||
<CardContainer
|
||||
title={t('settingForm.titleSocial')}
|
||||
subtitle={t('settingForm.descriptionSocial')}
|
||||
action={
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
|
||||
<Button
|
||||
onClick={handleClickMenu}
|
||||
variant="outlined"
|
||||
size="large"
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
flexWrap: 'wrap',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: '187px',
|
||||
height: '42px',
|
||||
border: '1px solid',
|
||||
borderColor: '#2979FF',
|
||||
borderRadius: '8px',
|
||||
color: '#2979FF',
|
||||
fontSize: '14px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
px: 2,
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
alignItems: { xs: 'stretch', sm: 'flex-start' },
|
||||
gap: 1,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{t('settingForm.addEmailOrSocialButton')}
|
||||
{openMenu && <ArrowDown3 size="20" color="#2979FF" />}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleClickMenu}
|
||||
variant="outlined"
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: { sm: '187px' },
|
||||
textTransform: 'none',
|
||||
border: '1px solid',
|
||||
borderColor: 'primary.main',
|
||||
borderRadius: '8px',
|
||||
color: 'primary.main',
|
||||
fontSize: '14px',
|
||||
px: 2,
|
||||
py: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
direction: 'rtl',
|
||||
}}
|
||||
>
|
||||
{t('settingForm.addEmailOrSocialButton')}
|
||||
</Box>
|
||||
<ArrowDown3 size="20" color="#2979FF" />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Menu
|
||||
anchorEl={anchor}
|
||||
open={openMenu}
|
||||
@@ -125,9 +155,9 @@ export function SocialMedia() {
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
backgroundColor: 'white',
|
||||
backgroundColor: 'background.paper',
|
||||
borderRadius: '8px',
|
||||
p: 2,
|
||||
p: { xs: 1, sm: 2 },
|
||||
}}
|
||||
>
|
||||
{emailList.map((item, index) => (
|
||||
@@ -137,40 +167,25 @@ export function SocialMedia() {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
p: 1,
|
||||
flexWrap: 'wrap',
|
||||
py: 1,
|
||||
gap: 1,
|
||||
borderBottom:
|
||||
index !== emailList.length - 1 ? '1px solid #eee' : 'none',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
{item.provider === 'google' && (
|
||||
<Google
|
||||
size="20"
|
||||
variant="Bold"
|
||||
color="#4285F4"
|
||||
style={{ marginLeft: 8 }}
|
||||
/>
|
||||
<Google size="20" variant="Bold" color="#4285F4" />
|
||||
)}
|
||||
{item.provider === 'apple' && (
|
||||
<Apple
|
||||
size="20"
|
||||
variant="Bold"
|
||||
color="black"
|
||||
style={{ marginLeft: 8 }}
|
||||
/>
|
||||
<Apple size="20" variant="Bold" color="black" />
|
||||
)}
|
||||
{item.provider === 'email' && (
|
||||
<Sms
|
||||
size="20"
|
||||
variant="Bold"
|
||||
color="#1976d2"
|
||||
style={{ marginLeft: 8 }}
|
||||
/>
|
||||
<Sms size="20" variant="Bold" color="#1976d2" />
|
||||
)}
|
||||
<Box>
|
||||
<Typography sx={{ fontWeight: 'bold', fontSize: '14px' }}>
|
||||
{item.email}
|
||||
</Typography>
|
||||
<Typography variant="h6">{item.email}</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{item.time}
|
||||
</Typography>
|
||||
@@ -194,14 +209,14 @@ export function SocialMedia() {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5F5F5',
|
||||
// backgroundColor: 'background.paper',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '16px',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<IconButton onClick={handleCloseDialog} size="small">
|
||||
<CloseSquare size="24" color="gray" />
|
||||
<CloseSquare size="24" color="#F5F5F5" />
|
||||
</IconButton>
|
||||
{t('settingForm.addEmailButton')}
|
||||
</DialogTitle>
|
||||
@@ -241,6 +256,7 @@ export function SocialMedia() {
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: '#1976d2',
|
||||
}}
|
||||
@@ -257,10 +273,17 @@ export function SocialMedia() {
|
||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 1,
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
sx={{
|
||||
width: '50%',
|
||||
textTransform: 'none',
|
||||
border: 2,
|
||||
borderColor: '#1976d2',
|
||||
color: '#1976d2',
|
||||
@@ -274,8 +297,9 @@ export function SocialMedia() {
|
||||
{t('settingForm.google')}
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
sx={{
|
||||
width: '50%',
|
||||
textTransform: 'none',
|
||||
border: 2,
|
||||
borderColor: '#1976d2',
|
||||
color: '#1976d2',
|
||||
|
||||
@@ -1,286 +0,0 @@
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
TextField,
|
||||
Grid,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
type SelectChangeEvent,
|
||||
} from '@mui/material';
|
||||
import { useState, type ChangeEvent } from 'react';
|
||||
|
||||
export function UserProfileForm() {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [gender, setGender] = useState('');
|
||||
const [data, setData] = useState({
|
||||
firstName: 'محمد حسین',
|
||||
lastName: 'برزهگر',
|
||||
gender: 'مرد',
|
||||
nationalCode: '',
|
||||
});
|
||||
|
||||
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
[e.target.name]: e.target.value,
|
||||
}));
|
||||
};
|
||||
|
||||
const toggleEdit = () => {
|
||||
setIsEditing((prev) => !prev);
|
||||
};
|
||||
const handleChangeGender = (e: SelectChangeEvent) => {
|
||||
setGender(e.target.value);
|
||||
};
|
||||
const displayValue = (value: string | null | undefined) => {
|
||||
return value && value.trim() !== '' ? value : 'تعیین نشده';
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
dir="rtl"
|
||||
style={{
|
||||
backgroundColor: '#F5F5F5',
|
||||
minHeight: '100vh',
|
||||
minWidth: '100vw',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '500px',
|
||||
backgroundColor: 'white',
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: 2,
|
||||
padding: 5,
|
||||
margin: '40px auto',
|
||||
boxShadow: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: isEditing ? '#ADD8E6' : '#F5F5F5',
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{ color: isEditing ? '#1976d2' : 'gray' }}
|
||||
>
|
||||
اطلاعات شخصی من
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{ color: isEditing ? '#1976d2' : 'gray', fontSize: '13px' }}
|
||||
>
|
||||
این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی
|
||||
میماند
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button
|
||||
onClick={toggleEdit}
|
||||
sx={{
|
||||
border: 0.5,
|
||||
borderColor: '#1976d2',
|
||||
borderRadius: '5px',
|
||||
backgroundColor: isEditing ? '#1976d2' : 'white',
|
||||
color: isEditing ? 'white' : '#1976d2',
|
||||
width: '80px',
|
||||
height: '30px',
|
||||
}}
|
||||
>
|
||||
{isEditing ? 'ذخیره' : 'ویرایش'}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={0.5}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
>>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
sx={{ color: 'gray', fontSize: '14px', ml: '34vh' }}
|
||||
>
|
||||
نام
|
||||
</Typography>
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
<Typography variant="subtitle2">نام</Typography>
|
||||
>>>>>>> f9815fb (fix: issue in user profile)
|
||||
=======
|
||||
>>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
|
||||
{isEditing ? (
|
||||
<TextField
|
||||
fullWidth
|
||||
name="firstName"
|
||||
label="نام"
|
||||
value={data.firstName}
|
||||
onChange={handleChange}
|
||||
sx={{ width: '230px' }}
|
||||
inputProps={{
|
||||
sx: {
|
||||
height: '12px',
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
fontSize: '16px',
|
||||
fontWeight: 'bold',
|
||||
direction: 'rtl',
|
||||
=======
|
||||
>>>>>>> f9815fb (fix: issue in user profile)
|
||||
=======
|
||||
fontSize: '16px',
|
||||
fontWeight: 'bold',
|
||||
direction: 'rtl',
|
||||
>>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>
|
||||
{displayValue(data.firstName)}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
>>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
sx={{ color: 'gray', fontSize: '14px' }}
|
||||
>
|
||||
جنسیت
|
||||
</Typography>
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
<Typography variant="subtitle2">جنسیت</Typography>
|
||||
>>>>>>> f9815fb (fix: issue in user profile)
|
||||
=======
|
||||
>>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
|
||||
{isEditing ? (
|
||||
<FormControl sx={{ width: '230px' }}>
|
||||
<InputLabel id="sex-label">جنسیت</InputLabel>
|
||||
<Select
|
||||
labelId="sex-label"
|
||||
id="sex"
|
||||
value={gender}
|
||||
label="جنسیت"
|
||||
onChange={handleChangeGender}
|
||||
sx={{
|
||||
height: '45px',
|
||||
'& .MuiSelect-select': {
|
||||
paddingY: '10px',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem value="female">زن</MenuItem>
|
||||
<MenuItem value="male">مرد</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
) : (
|
||||
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>
|
||||
{displayValue(data.gender)}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
>>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
sx={{ color: 'gray', fontSize: '14px' }}
|
||||
>
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
<Typography variant="subtitle2" sx={{ width: '230px' }}>
|
||||
>>>>>>> f9815fb (fix: issue in user profile)
|
||||
=======
|
||||
>>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
|
||||
نام خانوادگی
|
||||
</Typography>
|
||||
{isEditing ? (
|
||||
<TextField
|
||||
fullWidth
|
||||
name="lastName"
|
||||
value={data.lastName}
|
||||
label="نام خانوادگی"
|
||||
onChange={handleChange}
|
||||
sx={{ width: '230px' }}
|
||||
inputProps={{
|
||||
sx: {
|
||||
height: '12px',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>
|
||||
{displayValue(data.lastName)}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
>>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
sx={{ color: 'gray', fontSize: '14px' }}
|
||||
>
|
||||
کد ملی
|
||||
</Typography>
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
<Typography variant="subtitle2">کد ملی</Typography>
|
||||
>>>>>>> f9815fb (fix: issue in user profile)
|
||||
=======
|
||||
>>>>>>> 280b19d (feat: complete phone number and edit of that in user-profile)
|
||||
{isEditing ? (
|
||||
<TextField
|
||||
fullWidth
|
||||
name="nationalCode"
|
||||
label="کد ملی"
|
||||
value={data.nationalCode}
|
||||
onChange={handleChange}
|
||||
sx={{ width: '230px' }}
|
||||
inputProps={{
|
||||
sx: {
|
||||
height: '12px',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>
|
||||
{displayValue(data.nationalCode)}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user