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

chore: change styles and add Api for user profile

Browse Source
This commit is contained in:
Koosha Lahouti
2025-08-12 20:20:28 +03:30
parent ed57858c2e
commit 782ef2a2de
35 changed files with 2785 additions and 1843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1786
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@@ -13,12 +13,12 @@
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@mui/icons-material": "^7.3.1",
"@mui/material": "^7.3.1",
"@mui/stylis-plugin-rtl": "^7.2.0",
"@mui/x-data-grid": "^8.10.0",
"@mui/x-virtualizer": "^0.1.1",
"@rkheftan/harmony-ui": "^0.1.4",
"@rkheftan/harmony-ui": "^0.1.6",
"axios": "^1.11.0",
"i18next": "^25.3.0",
"i18next-browser-languagedetector": "^8.2.0",
"i18next-http-backend": "^3.0.2",
@@ -35,7 +35,7 @@
"devDependencies": {
"@eslint/js": "^9.29.0",
"@types/node": "^24.0.10",
"@types/react": "^19.1.9",
"@types/react": "^19.1.10",
"@types/react-dom": "^19.1.7",
"@types/stylis": "^4.2.7",
"@typescript-eslint/eslint-plugin": "^8.35.1",

9
public/locales/en/activeDevices.json
View File

@@ -1,9 +0,0 @@
{
"active": {
"activeDevices": "Active devices",
"activeDevicesCaption": "Watch and manage all your active devices",
"deletDevicesButton": "Remove rest of the devices",
"deleteDevice": "Remove device",
"currentDevice": "Current device"
}
}

46
public/locales/en/profileSetting.json
View File

@@ -1,46 +0,0 @@
{
"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": ".",
"notDetermined": "Not determined",
"successfulChangePhone": "Phone number changed successfully",
"phoneNumberIsInvalid": "Phone number is invalid",
"thisFieldIsRequired": "This field is required",
"changePicture": "Change picture"
}
}

22
public/locales/en/security.json
View File

@@ -1,22 +0,0 @@
{
"securityForm": {
"password": "Password",
"determinePassword": "Log in to your Harmony account more easily by setting a strong password.",
"addPassword": "Add password",
"notDeterminedPassword": "You have not set a password for this account yet.",
"newPassword": "New password",
"confirmPassword": "Confirm password",
"confirm": "Confirm",
"hasNumber": "Contains number",
"hasMinLength": "at least 8 character",
"hasUpperAndLower": "Contains a lowercase and uppercase letter",
"hasSpecialChar": "Contains sign (!@#$%^&*)",
"notCompatibility": "Confirm password is not the same as password.",
"alertSuccess": "Password has successfully changed",
"lastChange": "Last change a few seconds ago",
"activePassword": "Password is active",
"recentLogins": "Recent logins",
"description": "In this section, you can see the recent logins to your Harmony account.",
"currentDevice": "Current device"
}
}

110
public/locales/en/setting.json
View File

@@ -1,4 +1,82 @@
{
"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": ".",
"notDetermined": "Not determined",
"successfulChangePhone": "Phone number changed successfully",
"phoneNumberIsInvalid": "Phone number is invalid",
"thisFieldIsRequired": "This field is required",
"changePicture": "Change picture",
"confirmAndSave": "Confirm",
"fileSizeError": "Your file exceed the limit",
"removePicture": "Remove picture",
"failRetrieve": "Failed to retrieve profile data.",
"errorFetch": "An error occurred while fetching your profile.",
"notLoggedIn": "You are not logged in. Please log in to view your profile.",
"unknownError": "An unknown error occurred while saving.",
"checkConnection": "Failed to save profile. Please check your connection and try again.",
"failFetchPhoneNumber": "Failed to fetch phone number data.",
"errorFetchPhoneNumber": "An error occurred while fetching your phone number.",
"sendCodeFailed": "Send code failed",
"verificationCodeRequired": "Verification code required",
"verifyCodeFailed": "Verification of code failed",
"changePhoneFailed": "Change of phone number failed",
"justNow": "Just now",
"failFetchEmail": "Failed to fetch email data",
"errorFetchEmail": "An error occurred while fetching your linked accounts.",
"emailIsInvalid": "Email is invalid",
"changeEmailFailed": "Change of email failed",
"anErrorOccurred": "An error occurred."
},
"active": {
"activeDevices": "Active devices",
"activeDevicesCaption": "Watch and manage all your active devices",
"deleteDevicesButton": "Remove rest of the devices",
"deleteDevice": "Remove device",
"currentDevice": "Current device",
"minutesAgo": "{{count}} minutes ago",
"justNow": "Just now",
"notLoggedIn": "You are not logged in",
"failFetchActiveSessions": "Failed to fetch active sessions.",
"errorFetch": "An error occurred while fetching your active sessions."
},
"settings": {
"title": "Base settings",
"description": "Change your base settings",
@@ -13,6 +91,36 @@
"solar": "Solar",
"lunar": "Lunar",
"christian": "Christian",
"iran": "Iran"
"iran": "Iran",
"saving": "Saving...",
"notLoggedIn": "You are not logged in",
"failedRetrieve": "Failed to retrieve settings.",
"errorFetch": "An error occurred while fetching your settings.",
"saveFailed": "Save failed",
"invalidSelection": "Invalid selection"
},
"securityForm": {
"password": "Password",
"determinePassword": "Log in to your Harmony account more easily by setting a strong password.",
"addPassword": "Add password",
"notDeterminedPassword": "You have not set a password for this account yet.",
"newPassword": "New password",
"confirmPassword": "Confirm password",
"confirm": "Confirm",
"hasNumber": "Contains number",
"hasMinLength": "at least 8 character",
"hasUpperAndLower": "Contains a lowercase and uppercase letter",
"hasSpecialChar": "Contains sign (!@#$%^&*)",
"notCompatibility": "Confirm password is not the same as password.",
"alertSuccess": "Password has successfully changed",
"lastChange": "Last change a few seconds ago",
"activePassword": "Password is active",
"recentLogins": "Recent logins",
"description": "In this section, you can see the recent logins to your Harmony account.",
"currentDevice": "Current device",
"changePassword": "Change password",
"currentPassword": "Current password",
"forgetPassword": "Forgot your password?"
}
}

9
public/locales/fa/activeDevices.json
View File

@@ -1,9 +0,0 @@
{
"active": {
"activeDevices": "نشست های فعال",
"activeDevicesCaption": "مشاهده و مدیریت تمام نشست های فعال شما",
"deletDevicesButton": "حذف بقیه نشست ها",
"deleteDevice": "حذف نشست",
"currentDevice": "دستگاه فعلی"
}
}

46
public/locales/fa/profileSetting.json
View File

@@ -1,46 +0,0 @@
{
"settingForm": {
"titlePersonalInfo": "اطلاعات شخصی من",
"descriptionPersonalInfo": "این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی می‌ماند",
"titlePhoneNumber": "شماره تماس من",
"descriptionPhoneNumber": "این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی می‌ماند",
"titleSocial": "ایمیل و شبکه های اجتماعی من",
"descriptionSocial": "این اطلاعات شما صرفاً برای احراز هویت شما است و نزد هارمونی باقی می‌ماند",
"rejectButton": "لغو",
"saveButton": "ذخیره",
"editButton": "ویرایش",
"editPhoneNumber": "تغییر شماره تماس",
"addEmailOrSocialButton": "افزودن ایمیل / سوشال",
"addEmailButton": "افزودن ایمیل",
"name": "نام",
"familyName": "نام خانوادگی",
"country": "کشور",
"gender": "جنسیت",
"nationalCode": "کد ملی",
"man": "مرد",
"woman": "زن",
"genderPlaceholder": "مرد",
"newPhoneNumber": "شماره تماس جدید",
"verificationCodeButton": "ارسال کد تایید",
"verificationCode": "کد تایید",
"checkCode": "بررسی کد",
"successButton": "تایید شد",
"email": "ایمیل",
"apple": "اپل",
"google": "گوگل",
"newEmail": "ایمیل جدید",
"dialogHeader": "با فعال‌سازی ایمیل می‌توانید در دفعات بعدی ورود برای ورود از این ایمیل استفاده کنید",
"or": "یا",
"emailError": "لطفا یک ایمیل معتبر وارد کنید",
"profilePicture": "تصویر حساب کاربری",
"allowedFormat": "فرمت‌های مجاز: PNG، JPEG، GIF (حداکثر ۱۰ مگابایت)",
"uploadPicture": "بارگذاری تصویر",
"phoneNumberText": "شماره تماس جدید شما جایگزین شماره تماس قبلی",
"verb": "خواهد شد",
"notDetermined": "تعیین نشده",
"successfulChangePhone": "شماره تماس با موفقیت تغییر کرد",
"phoneNumberIsInvalid": "شماره وارد شده نامعتبر میباشد",
"thisFieldIsRequired": "این فیلد الزامی است",
"changePicture": "تغییر تصویر"
}
}

25
public/locales/fa/security.json
View File

@@ -1,25 +0,0 @@
{
"securityForm": {
"password": "رمز عبور",
"determinePassword": "با تعیین یک رمز عبور قوی راحت تر به اکانت هارمونی خود وارد شوید",
"addPassword": "افزودن رمز عبور",
"notDeterminedPassword": "هنوز رمز عبوری برای این حساب کاربری تعیین نکرده اید",
"newPassword": "رمز عبور جدید",
"confirmPassword": "تکرار رمز عبور",
"confirm": "تایید",
"hasNumber": "شامل عدد",
"hasMinLength": "حداقل 8 کاراکتر",
"hasUpperAndLower": "شامل یک حرف کوچک و بزرگ",
"hasSpecialChar": "شامل علامت (!@#$%^&*)",
"notCompatibility": "تکرار رمز عبور با رمز عبور یکسان نمی باشد",
"alertSuccess": "رمز عبور با موفقیت تعویض شد",
"lastChange": "آخرین تغییر چند ثانیه پیش",
"activePassword": "رمز عبور فعال است",
"recentLogins": "ورود های اخیر",
"description": "در این بخش از ورود های اخیر به اکانت هارمونی خود را مشاهده می کنید",
"currentDevice": "دستگاه فعلی",
"changePassword": "تغییر رمز عبور",
"currentPassword": "رمز عبور فعلی",
"forgetPassword": "رمز عبور را فراموش کرده اید؟"
}
}

110
public/locales/fa/setting.json
View File

@@ -1,4 +1,82 @@
{
"settingForm": {
"titlePersonalInfo": "اطلاعات شخصی من",
"descriptionPersonalInfo": "این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی می‌ماند",
"titlePhoneNumber": "شماره تماس من",
"descriptionPhoneNumber": "این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی می‌ماند",
"titleSocial": "ایمیل و شبکه های اجتماعی من",
"descriptionSocial": "این اطلاعات شما صرفاً برای احراز هویت شما است و نزد هارمونی باقی می‌ماند",
"rejectButton": "لغو",
"saveButton": "ذخیره",
"editButton": "ویرایش",
"editPhoneNumber": "تغییر شماره تماس",
"addEmailOrSocialButton": "افزودن ایمیل / سوشال",
"addEmailButton": "افزودن ایمیل",
"name": "نام",
"familyName": "نام خانوادگی",
"country": "کشور",
"gender": "جنسیت",
"nationalCode": "کد ملی",
"man": "مرد",
"woman": "زن",
"genderPlaceholder": "مرد",
"newPhoneNumber": "شماره تماس جدید",
"verificationCodeButton": "ارسال کد تایید",
"verificationCode": "کد تایید",
"checkCode": "بررسی کد",
"successButton": "تایید شد",
"email": "ایمیل",
"apple": "اپل",
"google": "گوگل",
"newEmail": "ایمیل جدید",
"dialogHeader": "با فعال‌سازی ایمیل می‌توانید در دفعات بعدی ورود برای ورود از این ایمیل استفاده کنید",
"or": "یا",
"emailError": "لطفا یک ایمیل معتبر وارد کنید",
"profilePicture": "تصویر حساب کاربری",
"allowedFormat": "فرمت‌های مجاز: PNG، JPEG، GIF (حداکثر ۱۰ مگابایت)",
"uploadPicture": "بارگذاری تصویر",
"phoneNumberText": "شماره تماس جدید شما جایگزین شماره تماس قبلی",
"verb": "خواهد شد",
"notDetermined": "تعیین نشده",
"successfulChangePhone": "شماره تماس با موفقیت تغییر کرد",
"phoneNumberIsInvalid": "شماره وارد شده نامعتبر میباشد",
"thisFieldIsRequired": "این فیلد الزامی است",
"changePicture": "تغییر تصویر",
"confirmAndSave": "تایید",
"fileSizeError": "حجم فایل شما از حد مجاز بیشتر شده است",
"removePicture": "حذف عکس",
"failRetrieve": "بازیابی اطلاعات پروفایل ناموفق بود.",
"errorFetch": "هنگام دریافت پروفایل شما خطایی رخ داد.",
"notLoggedIn": "شما وارد سیستم نشده‌اید. لطفا برای مشاهده پروفایل خود وارد شوید.",
"unknownError": "هنگام ذخیره خطای ناشناخته‌ای رخ داد.",
"checkConnection": "ذخیره پروفایل ناموفق بود. لطفاً اتصال خود را بررسی کرده و دوباره امتحان کنید.",
"failFetchPhoneNumber": "دریافت اطلاعات شماره تلفن ناموفق بود.",
"errorFetchPhoneNumber": "هنگام دریافت شماره تلفن شما خطایی روی داد.",
"sendCodeFailed": "خطا در ارسال کد",
"verificationCodeRequired": "کد تأیید مورد نیاز است",
"verifyCodeFailed": "تأیید کد ناموفق بود",
"changePhoneFailed": "تغییر شماره تلفن ناموفق بود",
"justNow": "همین الان",
"failFetchEmail": "دریافت داده‌های ایمیل ناموفق بود",
"errorFetchEmail": "هنگام دریافت حساب‌های پیوند داده شده شما خطایی روی داد.",
"emailIsInvalid": "ایمیل نامعتبر است",
"changeEmailFailed": "تغییر ایمیل با خطا مواجه شد",
"anErrorOccurred": "خطایی رخ داد"
},
"active": {
"activeDevices": "نشست های فعال",
"activeDevicesCaption": "مشاهده و مدیریت تمام نشست های فعال شما",
"deleteDevicesButton": "حذف بقیه نشست ها",
"deleteDevice": "حذف نشست",
"currentDevice": "دستگاه فعلی",
"minutesAgo": "{{count}} دقیقه پیش",
"justNow": "همین الان",
"notLoggedIn": "شما وارد سیستم نشده‌اید",
"failFetchActiveSessions": "دریافت نشست های فعال ناموفق بود.",
"errorFetch": "هنگام دریافت جلسات فعال شما خطایی روی داد."
},
"settings": {
"title": "تنظیمات پایه",
"description": "تنظیمات پایه‌ای حساب خود را تغییر دهید",
@@ -13,6 +91,36 @@
"solar": "شمسی",
"lunar": "قمری",
"christian": "میلادی",
"iran": "ایران"
"iran": "ایران",
"saving": "در حال ذخیره‌سازی...",
"notLoggedIn": "شما وارد سیستم نشده‌اید",
"failedRetrieve": "بازیابی تنظیمات ناموفق بود.",
"errorFetch": "هنگام دریافت تنظیمات شما خطایی روی داد.",
"saveFailed": "خطا در ذخیره",
"invalidSelection": "انتخاب نامعتبر است"
},
"securityForm": {
"password": "رمز عبور",
"determinePassword": "با تعیین یک رمز عبور قوی راحت تر به اکانت هارمونی خود وارد شوید",
"addPassword": "افزودن رمز عبور",
"notDeterminedPassword": "هنوز رمز عبوری برای این حساب کاربری تعیین نکرده اید",
"newPassword": "رمز عبور جدید",
"confirmPassword": "تکرار رمز عبور",
"confirm": "تایید",
"hasNumber": "شامل عدد",
"hasMinLength": "حداقل 8 کاراکتر",
"hasUpperAndLower": "شامل یک حرف کوچک و بزرگ",
"hasSpecialChar": "شامل علامت (!@#$%^&*)",
"notCompatibility": "تکرار رمز عبور با رمز عبور یکسان نمی باشد",
"alertSuccess": "رمز عبور با موفقیت تعویض شد",
"lastChange": "آخرین تغییر چند ثانیه پیش",
"activePassword": "رمز عبور فعال است",
"recentLogins": "ورود های اخیر",
"description": "در این بخش از ورود های اخیر به اکانت هارمونی خود را مشاهده می کنید",
"currentDevice": "دستگاه فعلی",
"changePassword": "تغییر رمز عبور",
"currentPassword": "رمز عبور فعلی",
"forgetPassword": "رمز عبور را فراموش کرده اید؟"
}
}

2
src/components/CardContainer.tsx
View File

@@ -22,8 +22,6 @@ export function CardContainer({
sx={{
marginInline: 'auto',
width: '100%',
maxWidth: 'min(100%, 818px)',
// paddingInline: { xs: 2, sm: 3, md: 4 },
display: 'flex',
flexDirection: 'column',
gap: 2,

26
src/components/CountDownTimer.tsx
View File

@@ -1,4 +1,6 @@
import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { toLocaleDigits } from '@/utils/persianDigit';
interface CountdownTimerProps {
initialSeconds: number;
@@ -9,30 +11,30 @@ export function CountDownTimer({
initialSeconds,
onComplete,
}: CountdownTimerProps) {
const { i18n } = useTranslation();
const [secondsLeft, setSecondsLeft] = useState(initialSeconds);
useEffect(() => {
setSecondsLeft(initialSeconds);
}, [initialSeconds]);
useEffect(() => {
if (secondsLeft <= 0) {
onComplete?.();
return;
}
const timer = setInterval(() => {
setSecondsLeft((prev) => prev - 1);
setSecondsLeft((prev) => {
if (prev <= 1) {
clearInterval(timer);
onComplete?.();
return 0;
}
return prev - 1;
});
}, 1000);
return () => clearInterval(timer);
}, [secondsLeft, onComplete]);
const toPersianDigits = (str: string) =>
str.replace(/\d/g, (d: string) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d)]);
return () => clearInterval(timer);
}, [initialSeconds, onComplete]);
const formatTime = (totalSeconds: number) => {
const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
const seconds = String(totalSeconds % 60).padStart(2, '0');
return toPersianDigits(`${minutes}:${seconds}`);
return toLocaleDigits(`${minutes}:${seconds}`, i18n.language);
};
return <span>{formatTime(secondsLeft)}</span>;

13
src/components/CountryFlag.tsx
View File

@@ -20,13 +20,18 @@ export function CountryFlag({ code }: CountryFlagProps) {
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<img
<Box
component="img"
loading="lazy"
src={flagUrl}
alt={displayName}
width="24"
height="16"
style={{ borderRadius: '2px', border: '1px solid #ccc' }}
sx={{
width: 24,
height: 16,
borderRadius: 0.5,
border: '1px solid',
borderColor: 'divider',
}}
/>
<Typography variant="body2">{displayName}</Typography>
</Box>

32
src/components/ThemToggle.tsx
View File

@@ -1,12 +1,23 @@
import { ToggleButtonGroup, ToggleButton, Box } from '@mui/material';
import { useColorScheme } from '@mui/material/styles';
import { Sun1, Moon } from 'iconsax-react';
import { useTranslation } from 'react-i18next';
import { Icon } from '@rkheftan/harmony-ui';
import { type MouseEvent } from 'react';
export const ThemeToggleButton = () => {
const { mode, setMode } = useColorScheme();
enum ThemeMode {
Light = 'light',
Dark = 'dark',
}
interface ThemeToggleButtonProps {
value: 'light' | 'dark';
onChange: (newMode: 'light' | 'dark') => void;
}
export const ThemeToggleButton = ({
value,
onChange,
}: ThemeToggleButtonProps) => {
const { t } = useTranslation('setting');
const handleChange = (
@@ -14,26 +25,26 @@ export const ThemeToggleButton = () => {
newMode: 'light' | 'dark' | null,
) => {
if (newMode !== null) {
setMode(newMode);
localStorage.setItem('theme', newMode);
onChange(newMode);
}
};
return (
<Box dir="rtl">
<Box>
<ToggleButtonGroup
value={mode}
value={value}
exclusive
onChange={handleChange}
sx={{
borderRadius: '12px',
borderRadius: 1.5,
border: '1px solid',
borderColor: 'divider',
overflow: 'hidden',
}}
>
<ToggleButton
value="light"
value={ThemeMode.Light}
aria-label="light theme"
sx={{
textTransform: 'none',
display: 'flex',
@@ -51,7 +62,8 @@ export const ThemeToggleButton = () => {
</ToggleButton>
<ToggleButton
value="dark"
value={ThemeMode.Dark}
aria-label="dark theme"
sx={{
textTransform: 'none',
display: 'flex',

1
src/components/Toast.tsx
View File

@@ -2,7 +2,6 @@ import { Alert, Snackbar, type AlertColor } from '@mui/material';
import { type PropsWithChildren } from 'react';
export interface ToastProps extends PropsWithChildren {
color: AlertColor | undefined;
open: boolean;

353
src/features/authentication/components/UserCompletionForm.tsx
View File

@@ -1,353 +0,0 @@
import {
TextField,
FormControl,
InputLabel,
MenuItem,
Select,
Box,
type SelectChangeEvent,
Switch,
FormGroup,
Button,
Typography,
Link,
} from '@mui/material';
import React, { useEffect, useState } from 'react';
export function UserCompletionForm() {
const [sex, setSex] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [showEmail, setShowEmail] = useState(false);
const [password, setPassword] = useState('');
const [email, setEmail] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [codeSent, setCodeSent] = useState(false);
const [verificationCode, setVerificationCode] = useState('');
const [buttonState, setButtonState] = useState('default'); // default | counting | sent
const [countdown, setCountdown] = useState(60);
const matchPassword = password === confirmPassword;
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 correctEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
const handleTogglePassword = (e: React.ChangeEvent<HTMLInputElement>) => {
setShowPassword(e.target.checked);
};
const handleToggleEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
setShowEmail(e.target.checked);
};
const handleChange = (e: SelectChangeEvent) => {
setSex(e.target.value);
};
const onClickCodeSent = () => {
setCodeSent(true);
setButtonState('sent');
setTimeout(() => {
setButtonState('counting');
setCountdown(60);
}, 1000);
};
useEffect(() => {
let timer: ReturnType<typeof setInterval>;
if (buttonState === 'counting' && countdown > 0) {
timer = setInterval(() => {
setCountdown((prev) => prev - 1);
}, 1000);
}
if (countdown === 0) {
setButtonState('default');
}
return () => clearInterval(timer);
}, [buttonState, countdown]);
const toPersianDigits = (str: string) =>
str.replace(/\d/g, (d: string) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d)]);
const getButtonLabel = () => {
if (buttonState === 'sent') return 'ارسال شد!';
if (buttonState === 'counting') {
const minutes = String(Math.floor(countdown / 60)).padStart(2, '0');
const seconds = String(countdown % 60).padStart(2, '0');
const time = `${minutes}:${seconds}`;
return toPersianDigits(time);
}
return 'ارسال کد تایید';
};
return (
<div
dir="rtl"
style={{
backgroundColor: '#F5F5F5',
minHeight: '100vh',
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={{ flexDirection: 'column', mb: 2 }}>
<Typography variant="h5" sx={{ mb: 0.5 }}>
تکمیل اطلاعات حساب کاربری
</Typography>
<Typography sx={{ color: 'gray', fontSize: '14px' }}>
اطلاعات کسب و کار خود را وارد کنید
</Typography>
</Box>
<Box
sx={{
display: 'flex',
gap: 2,
}}
>
<TextField
label="نام"
placeholder="نام"
variant="outlined"
sx={{
width: '330px',
'& .MuiOutlinedInput-root': {
height: 45,
},
}}
/>
<TextField
label="نام خانوادگی"
placeholder="نام خانوادگی"
variant="outlined"
sx={{
width: '330px',
'& .MuiOutlinedInput-root': {
height: 45,
},
}}
/>
</Box>
<Box sx={{ display: 'flex', gap: 2 }}>
<FormControl sx={{ width: '330px' }}>
<InputLabel id="sex-label">جنسیت</InputLabel>
<Select
labelId="sex-label"
id="sex"
value={sex}
label="جنسیت"
onChange={handleChange}
sx={{
height: '45px',
'& .MuiSelect-select': {
paddingY: '10px',
},
}}
>
<MenuItem value="female">زن</MenuItem>
<MenuItem value="male">مرد</MenuItem>
</Select>
</FormControl>
<TextField
label="کدملی(اختیاری)"
placeholder="کدملی(اختیاری)"
variant="outlined"
sx={{
width: '330px',
'& .MuiOutlinedInput-root': {
height: 45,
},
}}
/>
</Box>
<FormGroup>
<Box sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}>
<Switch
checked={showPassword}
onChange={handleTogglePassword}
sx={{
transform: 'scaleX(-1)',
'& .MuiSwitch-thumb': {
transform: 'scaleX(-1)',
},
}}
/>
<Typography> تعیین رمز عبور</Typography>
</Box>
</FormGroup>
{showPassword && (
<Box sx={{ display: 'flex', gap: 2 }}>
<Box
sx={{ display: 'flex', flexDirection: 'column', width: '330px' }}
>
<TextField
label="رمز عبور"
value={password}
onChange={(e) => setPassword(e.target.value)}
variant="outlined"
sx={{
'& .MuiOutlinedInput-root': {
height: 45,
},
}}
/>
{password && (
<Box sx={{ mt: 1 }}>
<Typography
variant="caption"
sx={{ color: hasNumber ? 'green' : 'red' }}
>
شامل عدد
</Typography>
<br />
<Typography
variant="caption"
sx={{ color: hasMinLength ? 'green' : 'red' }}
>
حداقل 8 کاراکتر
</Typography>
<br />
<Typography
variant="caption"
sx={{ color: hasUpperAndLower ? 'green' : 'red' }}
>
شامل یک حرف بزرگ و کوچک
</Typography>
<br />
<Typography
variant="caption"
sx={{ color: hasSpecialChar ? 'green' : 'red' }}
>
شامل علامت(!@#$%^&*)
</Typography>
</Box>
)}
</Box>
{showPassword && (
<TextField
label="تکرار رمز عبور"
variant="outlined"
onChange={(e) => setConfirmPassword(e.target.value)}
error={confirmPassword.length > 0 && !matchPassword}
helperText={
confirmPassword.length > 0 && !matchPassword
? 'مطابقت ندارد'
: ' '
}
sx={{
width: '330px',
'& .MuiOutlinedInput-root': {
height: 45,
},
}}
/>
)}
</Box>
)}
<FormGroup>
<Box sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}>
<Switch
checked={showEmail}
onChange={handleToggleEmail}
sx={{
transform: 'scaleX(-1)',
'& .MuiSwitch-thumb': {
transform: 'scaleX(-1)',
},
}}
/>
<Typography> اتصال ایمیل خود</Typography>
</Box>
</FormGroup>
{showEmail && (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
<Box sx={{ display: 'flex', gap: 2 }}>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<TextField
label="ایمیل"
variant="outlined"
value={email}
onChange={(e) => setEmail(e.target.value)}
sx={{
width: '330px',
'& .MuiOutlinedInput-root': {
height: 45,
},
}}
/>
{email && (
<Typography sx={{ color: correctEmail ? 'green' : 'red' }}>
فرم درست ایمیل وارد کنید
</Typography>
)}
</Box>
<Button
variant="text"
onClick={onClickCodeSent}
sx={{ width: '200px' }}
disabled={buttonState === 'sent' || buttonState === 'counting'}
>
{getButtonLabel()}
</Button>
</Box>
{codeSent && (
<Box sx={{ display: 'flex', gap: 2 }}>
<TextField
label="کد تایید"
variant="outlined"
value={verificationCode}
onChange={(e) => setVerificationCode(e.target.value)}
sx={{
width: '330px',
'& .MuiOutlinedInput-root': {
height: 45,
},
}}
/>
<Button
variant="contained"
sx={{
width: '150px',
backgroundColor: 'white',
border: 0.5,
borderColor: '#1976d2',
color: '#1976d2',
}}
>
بررسی کد
</Button>
</Box>
)}
</Box>
)}
<Box sx={{ display: 'flex', gap: 2 }}>
<Typography variant="body2" sx={{ flex: 1 }}>
ادامه فرایند ثبت نام به منزله تایید و قبول{' '}
<Link href="" target="_blank" rel="">
قوانین و مقررات هارمونی
</Link>{' '}
می باشد.
</Typography>
<Button variant="contained" sx={{ width: '250px', height: '40px' }}>
تایید و ثبت نام
</Button>
</Box>
</Box>
</div>
);
}

1
src/features/profile/components/PageWrapper.tsx
View File

@@ -10,7 +10,6 @@ export function PageWrapper({ children }: PageWrapperProps) {
<Box
sx={{
mx: 'auto',
width: { xs: '100%', sm: '754px' },
backgroundColor: 'background.paper',
display: 'flex',
flexDirection: 'column',

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

@@ -1,53 +1,205 @@
import React, { useState, useEffect } from 'react';
import {
Box,
Typography,
Button,
useTheme,
useMediaQuery,
CircularProgress,
} from '@mui/material';
import { useTranslation } from 'react-i18next';
import type { TFunction } from 'i18next';
import { DeviceMessage, Logout } from 'iconsax-react';
import { CardContainer } from '@/components/CardContainer';
import { PageWrapper } from '../PageWrapper';
import React from 'react';
import { Icon } from '@rkheftan/harmony-ui';
import apiClient from '@/lib/apiClient';
function formatSessionDate(
isoDate: string,
lang: string,
t: TFunction,
): string {
const date = new Date(isoDate);
const now = new Date();
const diffInMinutes = Math.floor(
(now.getTime() - date.getTime()) / (1000 * 60),
);
if (diffInMinutes < 1) {
return t('active.justNow');
}
if (diffInMinutes < 60) {
return t('active.minutesAgo', { count: diffInMinutes });
}
let displayLocale: string;
let options: Intl.DateTimeFormatOptions;
if (lang.startsWith('fa')) {
displayLocale = 'fa-IR';
options = {
calendar: 'persian',
numberingSystem: 'arab',
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
hour12: false,
};
} else {
displayLocale = 'en-US';
options = {
calendar: 'gregory',
numberingSystem: 'latn',
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
hour12: false,
};
}
return new Intl.DateTimeFormat(displayLocale, options).format(date);
}
interface Device {
id: string;
timeAndDate: string;
deviceModel: string;
ip: string;
current: boolean;
}
interface ApiSession {
key: string;
created: string;
deviceOs: string;
deviceName: string;
ipAddress: string;
}
interface ActiveSessionsData {
sessions: ApiSession[];
currentKey: string;
}
interface ProfileApiResponse {
success: boolean;
message?: string;
activeSessions?: ActiveSessionsData;
}
export function ActiveDevices() {
const { t } = useTranslation('activeDevices');
const { t, i18n } = useTranslation('setting');
const token = localStorage.getItem('authToken');
const [devices, setDevices] = useState<Device[]>([]);
const [loadingDeleteIds, setLoadingDeleteIds] = useState<string[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [fetchError, setFetchError] = useState<string | null>(null);
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,
},
];
const theme = useTheme();
const isXsup = useMediaQuery(theme.breakpoints.up('xs'));
useEffect(() => {
const fetchActiveSessions = async () => {
setIsLoading(true);
setFetchError(null);
if (!token) {
setIsLoading(false);
setFetchError(t('active.notLoggedIn'));
return;
}
try {
const res = await apiClient.post<ProfileApiResponse>(
'/Profile/GetProfile',
{},
{ headers: { Authorization: `Bearer ${token}` } },
);
if (res.data.success && res.data.activeSessions) {
const { sessions, currentKey } = res.data.activeSessions;
const formattedDevices = sessions.map((session: ApiSession) => ({
id: session.key,
timeAndDate: formatSessionDate(session.created, i18n.language, t),
deviceModel: `${session.deviceOs} ${session.deviceName}`,
ip: session.ipAddress,
current: session.key === currentKey,
}));
setDevices(formattedDevices);
} else {
throw new Error(
res.data.message || t('active.failFetchActiveSessions'),
);
}
} catch (err: unknown) {
console.error(t('active.failFetchActiveSessions'), err);
let message = t('active.errorFetch');
if (err instanceof Error) {
message = err.message;
}
setFetchError(message);
} finally {
setIsLoading(false);
}
};
fetchActiveSessions();
}, [token, i18n.language, t]);
const handleDeleteDevice = async (id: string) => {
if (loadingDeleteIds.includes(id)) return;
setLoadingDeleteIds((prev) => [...prev, id]);
try {
const res = await apiClient.post(
'/Profile/DeleteSessions',
{
keys: [id],
},
{ headers: { Authorization: `Bearer ${token}` } },
);
if (res.data.success) {
setDevices((prevDevices) => prevDevices.filter((d) => d.id !== id));
} else {
console.error('Delete failed:', res.data.message);
}
} catch (error: unknown) {
// console.error('Delete error:', error);
} finally {
setLoadingDeleteIds((prev) =>
prev.filter((loadingId) => loadingId !== id),
);
}
};
const handleTerminateAllOtherSessions = async () => {
const otherSessionKeys = devices.filter((d) => !d.current).map((d) => d.id);
if (otherSessionKeys.length === 0) return;
try {
const res = await apiClient.post(
'/Profile/DeleteSessions',
{
keys: otherSessionKeys,
},
{ headers: { Authorization: `Bearer ${token}` } },
);
if (res.data.success) {
setDevices((prev) => prev.filter((d) => d.current));
} else {
console.error('Failed to terminate other sessions:', res.data.message);
}
} catch (error: unknown) {
console.error('Error terminating sessions:', error);
}
};
return (
<PageWrapper>
<CardContainer
@@ -57,151 +209,181 @@ export function ActiveDevices() {
<Button
size="medium"
variant="outlined"
onClick={handleTerminateAllOtherSessions}
sx={{
borderRadius: 1,
borderColor: 'error.main',
color: 'error.main',
}}
disabled={isLoading}
>
{t('active.deletDevicesButton')}
{t('active.deleteDevicesButton')}
</Button>
}
>
<Box
sx={{
px: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex',
flexDirection: 'column',
// gap: 2,
}}
>
{devices.map((device) => (
<React.Fragment key={device.id}>
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
alignItems: { xs: 'flex-start', sm: 'center' },
minHeight: 50,
}}
>
<Typography
variant="body2"
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '138px' },
order: { xs: 1, sm: 1 },
}}
>
{device.timeAndDate}
</Typography>
{isLoading ? (
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
p: 4,
minHeight: '200px',
}}
>
<CircularProgress />
</Box>
) : fetchError ? (
<Box sx={{ textAlign: 'center', p: 4 }}>
<Typography color="error.main">{fetchError}</Typography>
</Box>
) : (
<Box
sx={{
px: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex',
flexDirection: 'column',
}}
>
{devices.map((device) => (
<React.Fragment key={device.id}>
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '138px' },
order: { xs: 2, sm: 2 },
flexDirection: { xs: 'column', sm: 'row' },
alignItems: { xs: 'flex-start', sm: 'center' },
minHeight: 50,
py: 1.5,
}}
>
<Icon
Component={DeviceMessage}
size="medium"
color="primary.main"
/>
<Typography variant="body2" noWrap>
{device.deviceModel}
</Typography>
</Box>
<Typography
variant="body2"
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '138px' },
order: { xs: 3, sm: 3 },
}}
>
{device.ip}
</Typography>
<Box
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '138px' },
order: { xs: 4, sm: 4 },
alignItems: 'center',
justifyContent: 'center',
}}
>
{device.current && (
<Button
variant="outlined"
size="medium"
sx={{
borderRadius: '100px',
border: '1px solid',
borderColor: 'success.main',
whiteSpace: 'nowrap',
color: 'success.main',
}}
>
{t('active.currentDevice')}
</Button>
)}
</Box>
<Box
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
textAlign: { xs: 'left', sm: 'center' },
minWidth: { sm: '138px' },
order: { xs: 5, sm: 5 },
}}
>
<Button
size="small"
variant="outlined"
startIcon={
<Icon
Component={Logout}
size="small"
color="error.main"
/>
}
disabled={device.current}
<Typography
variant="body2"
sx={{
color: 'error.main',
borderRadius: 1,
borderColor: 'error.main',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
whiteSpace: 'nowrap',
'& .MuiButton-startIcon': {
marginRight: '4px',
marginLeft: 0,
},
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '138px' },
// order: { xs: 1, sm: 1 },
}}
>
{t('active.deleteDevice')}
</Button>
{device.timeAndDate}
</Typography>
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '138px' },
order: { xs: 2, sm: 2 },
}}
>
<Icon
Component={DeviceMessage}
size="medium"
color="primary.main"
/>
<Typography variant="body2" noWrap>
{device.deviceModel}
</Typography>
</Box>
<Typography
variant="body2"
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '138px' },
order: { xs: 3, sm: 3 },
}}
>
{device.ip}
</Typography>
<Box
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
minWidth: { sm: '138px' },
order: { xs: 4, sm: 4 },
alignItems: 'center',
justifyContent: 'center',
}}
>
{device.current && (
<Button
variant="outlined"
size="medium"
sx={{
borderRadius: 12.5,
border: '1px solid',
borderColor: 'success.main',
whiteSpace: 'nowrap',
color: 'success.main',
'&.Mui-disabled': {
color: 'success.main',
borderColor: 'success.main',
},
}}
disabled
>
{t('active.currentDevice')}
</Button>
)}
</Box>
<Box
sx={{
flexBasis: { xs: '100%', sm: 'auto' },
mb: { xs: 1, sm: 0 },
textAlign: { xs: 'left', sm: 'center' },
minWidth: { sm: '138px' },
order: { xs: 5, sm: 5 },
}}
>
<Button
size="small"
variant="outlined"
startIcon={
<Icon
Component={Logout}
size="small"
color="error.main"
/>
}
disabled={
device.current || loadingDeleteIds.includes(device.id)
}
onClick={() => handleDeleteDevice(device.id)}
sx={{
color: 'error.main',
borderRadius: 1,
borderColor: 'error.main',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
whiteSpace: 'nowrap',
'& .MuiButton-startIcon': {
marginRight: 0.5,
marginLeft: 0,
},
}}
>
{loadingDeleteIds.includes(device.id)
? t('active.deleting...')
: t('active.deleteDevice')}
</Button>
</Box>
</Box>
</Box>
{isXsup && (
<Box sx={{ color: 'divider', borderBottom: '1px solid' }} />
)}
</React.Fragment>
))}
</Box>
{isXsup && (
<Box sx={{ color: 'divider', borderBottom: '1px solid' }} />
)}
</React.Fragment>
))}
</Box>
)}
</CardContainer>
</PageWrapper>
);

17
src/features/profile/components/security/PasswordSecurity.tsx
View File

@@ -11,11 +11,12 @@ import { CardContainer } from '@/components/CardContainer';
import { PageWrapper } from '../PageWrapper';
import { PasswordDialog } from './PasswordDialog';
import { Toast } from '@/components/Toast';
import { regex } from '@/utils/regex';
export function PasswordSecurity() {
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
const { t } = useTranslation('security');
const { t } = useTranslation('setting');
const [open, setOpen] = useState(false);
const [password, setPassword] = useState('');
@@ -26,12 +27,14 @@ export function PasswordSecurity() {
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 {
hasNumber,
hasMinLength,
hasUpperAndLower,
hasSpecialChar,
validPassword,
} = regex(password);
const matchPassword = password === confirmPassword;
useEffect(() => {

5
src/features/profile/components/security/RecentLogins.tsx
View File

@@ -5,7 +5,7 @@ import { PageWrapper } from '../PageWrapper';
import React from 'react';
export function RecentLogins() {
const { t } = useTranslation('security');
const { t } = useTranslation('setting');
const data = [
{
id: 0,
@@ -31,7 +31,6 @@ export function RecentLogins() {
>
<Box
sx={{
// px: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex',
flexDirection: 'column',
@@ -102,7 +101,7 @@ export function RecentLogins() {
<Button
variant="outlined"
sx={{
borderRadius: '15px',
borderRadius: 2,
border: '2px solid',
borderColor: 'success.main',
height: '30px',

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

@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, useEffect } from 'react';
import {
Box,
Typography,
@@ -6,6 +6,7 @@ import {
useColorScheme,
Autocomplete,
TextField,
CircularProgress,
} from '@mui/material';
import { CardContainer } from '@/components/CardContainer';
import { useTranslation } from 'react-i18next';
@@ -13,69 +14,188 @@ import { ThemeToggleButton } from '@/components/ThemToggle';
import { PageWrapper } from '../PageWrapper';
import { Icon } from '@rkheftan/harmony-ui';
import { Sun1, Moon, Calendar1 } from 'iconsax-react';
import apiClient from '@/lib/apiClient';
type ThemeMode = 'light' | 'dark';
type CalendarType = 'christian' | 'solar' | 'lunar';
interface SettingsState {
language: string;
calendar: CalendarType;
theme: ThemeMode;
}
interface UserSettingsFromApi {
theme: number;
calendarType: number;
language: number;
}
interface GetProfileApiResponse {
success: boolean;
message?: string;
userSettings?: UserSettingsFromApi;
}
interface SaveSettingApiResponse {
success: boolean;
message?: string;
}
const languageOptions = [
{ code: 'en', label: 'English', apiValue: 1 },
{ code: 'fa', label: 'فارسی', apiValue: 2 },
];
const calendarOptions: { key: CalendarType; apiValue: number }[] = [
{ key: 'christian', apiValue: 1 },
{ key: 'solar', apiValue: 2 },
{ key: 'lunar', apiValue: 3 },
];
const themeApiMap: Record<ThemeMode, number> = { light: 1, dark: 2 };
export function Setting() {
const { t, i18n } = useTranslation(['setting']);
const { mode } = useColorScheme();
const { mode, setMode } = useColorScheme();
const token = localStorage.getItem('authToken');
const [savedLanguage, setSavedLanguage] = useState<string>(
i18n.language || 'en',
);
const [draftLanguage, setDraftLanguage] = useState<string>(savedLanguage);
const [savedSettings, setSavedSettings] = useState<SettingsState>({
language: i18n.language || 'en',
calendar: 'solar',
theme: mode === 'light' || mode === 'dark' ? mode : 'light',
});
const [draftSettings, setDraftSettings] =
useState<SettingsState>(savedSettings);
const [isEditing, setIsEditing] = useState(false);
const [selectedCalendar, setSelectedCalendar] = useState<
'christian' | 'solar' | 'lunar'
>('solar');
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const languageOptions = [
{ code: 'en', label: 'English' },
{ code: 'fa', label: 'فارسی' },
];
const calendarOptions: ('christian' | 'solar' | 'lunar')[] = [
'christian',
'solar',
'lunar',
];
const [isFetching, setIsFetching] = useState(true);
const [fetchError, setFetchError] = useState<string | null>(null);
const handleDraftLanguageChange = (
_: React.SyntheticEvent,
v: { code: string; label: string } | null,
) => v && setDraftLanguage(v.code);
useEffect(() => {
const fetchUserSettings = async () => {
setIsFetching(true);
setFetchError(null);
if (!token) {
setIsFetching(false);
setFetchError(t('settings.notLoggedIn'));
return;
}
try {
const res = await apiClient.post<GetProfileApiResponse>(
'/Profile/GetProfile',
{},
{ headers: { Authorization: `Bearer ${token}` } },
);
if (res.data.success && res.data.userSettings) {
const { theme, calendarType, language } = res.data.userSettings;
const themeReverseMap: { [key: number]: ThemeMode | undefined } = {
1: 'light',
2: 'dark',
};
const themeMode = themeReverseMap[theme] || 'light';
const calendarSetting = calendarOptions.find(
(c) => c.apiValue === calendarType,
);
const calendarKey = calendarSetting ? calendarSetting.key : 'solar';
const languageSetting = languageOptions.find(
(l) => l.apiValue === language,
);
const languageCode = languageSetting ? languageSetting.code : 'en';
const newSettings: SettingsState = {
theme: themeMode,
calendar: calendarKey,
language: languageCode,
};
setSavedSettings(newSettings);
setDraftSettings(newSettings);
setMode(themeMode);
i18n.changeLanguage(languageCode);
} else {
throw new Error(res.data.message || t('settings.failRetrieve'));
}
} catch (e: unknown) {
let message = t('settings.errorFetch');
if (e instanceof Error) {
message = e.message;
}
setFetchError(message);
} finally {
setIsFetching(false);
}
};
fetchUserSettings();
}, [token, setMode, i18n, t]);
useEffect(() => {
if (isEditing) {
setDraftSettings({
...savedSettings,
theme: mode === 'light' || mode === 'dark' ? mode : 'light',
});
}
}, [isEditing, savedSettings, mode]);
const handleCancel = () => {
setDraftLanguage(savedLanguage);
setIsEditing(false);
setError(null);
};
const handleSave = () => {
if (draftLanguage !== savedLanguage) {
i18n.changeLanguage(draftLanguage);
setSavedLanguage(draftLanguage);
const handleSave = async () => {
setError(null);
setLoading(true);
try {
const languageObj = languageOptions.find(
(o) => o.code === draftSettings.language,
);
const calendarObj = calendarOptions.find(
(c) => c.key === draftSettings.calendar,
);
const apiThemeValue = themeApiMap[draftSettings.theme];
if (!languageObj || !calendarObj) {
setError(t('settings.invalidSelection'));
setLoading(false);
return;
}
const res = await apiClient.post<SaveSettingApiResponse>(
'/Profile/SaveSetting',
{
theme: apiThemeValue,
calendarType: calendarObj.apiValue,
language: languageObj.apiValue,
},
{ headers: { Authorization: `Bearer ${token}` } },
);
if (res.data.success) {
setMode(draftSettings.theme);
setSavedSettings(draftSettings);
await i18n.changeLanguage(draftSettings.language);
setIsEditing(false);
} else {
setError(res.data.message || t('settings.saveFailed'));
}
} catch (e: unknown) {
setError(t('settings.saveFailed'));
} finally {
setLoading(false);
}
setIsEditing(false);
};
const handleEditToggle = () =>
const handleEditToggle = () => {
isEditing ? handleSave() : setIsEditing(true);
// useEffect(() => {
// setSelectedCalendar(t('settings.solar'));
// }, [i18n.language, t]);
};
return (
<PageWrapper>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
}}
>
<Box
sx={{
px: { xs: 0, sm: 3 },
mx: 0,
}}
>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Box sx={{ px: { xs: 0, sm: 3 }, mx: 0 }}>
<CardContainer
title={t('settings.title')}
subtitle={t('settings.description')}
@@ -90,9 +210,9 @@ export function Setting() {
sx={{
color: 'primary.main',
textTransform: 'none',
// width: { xs: '100%', sm: 'auto' },
fontSize: { xs: '0.85rem', sm: '1rem' },
}}
disabled={loading || isFetching}
>
{t('settings.rejectButton')}
</Button>
@@ -108,80 +228,153 @@ export function Setting() {
bgcolor: isEditing ? 'primary.main' : 'background.default',
color: isEditing ? 'primary.contrastText' : 'primary.main',
}}
disabled={loading || isFetching}
>
{isEditing
? t('settings.saveButton')
: t('settings.editButton')}
{loading
? t('settings.saving...')
: isEditing
? t('settings.saveButton')
: t('settings.editButton')}
</Button>
</Box>
}
>
<Box
sx={{
px: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex',
flexDirection: 'column',
gap: 2,
bgcolor: 'background.paper',
}}
>
{isFetching ? (
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
gap: 2,
mt: 2,
justifyContent: 'center',
alignItems: 'center',
p: 4,
minHeight: '200px',
}}
>
<Box sx={{ flex: 1 }}>
{isEditing ? (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography variant="body1">
{t('settings.theme')}
</Typography>
<ThemeToggleButton />
</Box>
) : (
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.theme')}
</Typography>
<CircularProgress />
</Box>
) : fetchError ? (
<Box sx={{ textAlign: 'center', p: 4 }}>
<Typography color="error.main">{fetchError}</Typography>
</Box>
) : (
<Box
sx={{
px: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex',
flexDirection: 'column',
gap: 2,
bgcolor: 'background.paper',
}}
>
{error && (
<Typography color="error.main" variant="body2" mb={2}>
{error}
</Typography>
)}
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
gap: 2,
mt: 2,
}}
>
<Box sx={{ flex: 1 }}>
{isEditing ? (
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
}}
sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
>
<Icon
Component={mode === 'light' ? Sun1 : Moon}
size="medium"
variant="Bold"
color={mode === 'light' ? 'black' : 'primary.main'}
<Typography variant="body1" sx={{ mb: 1 }}>
{t('settings.theme')}
</Typography>
<ThemeToggleButton
value={draftSettings.theme}
onChange={(newTheme) => {
setDraftSettings((prev) => ({
...prev,
theme: newTheme,
}));
}}
/>
</Box>
) : (
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.theme')}
</Typography>
<Box
sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
>
<Icon
Component={
savedSettings.theme === 'light' ? Sun1 : Moon
}
size="medium"
variant="Bold"
color={
savedSettings.theme === 'light'
? 'action.hover'
: 'primary.main'
}
/>
<Typography variant="body1">
{t(`settings.${savedSettings.theme}`)}
</Typography>
</Box>
</Box>
)}
</Box>
<Box sx={{ flex: 1 }}>
{isEditing ? (
<Autocomplete
options={languageOptions}
getOptionLabel={(o) => o.label}
value={
languageOptions.find(
(o) => o.code === draftSettings.language,
) || null
}
onChange={(_, v) =>
v &&
setDraftSettings((prev) => ({
...prev,
language: v.code,
}))
}
renderInput={(p) => (
<TextField {...p} label={t('settings.language')} />
)}
size="medium"
fullWidth
/>
) : (
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.language')}
</Typography>
<Typography variant="body1">
{mode === 'light'
? t('settings.light')
: t('settings.dark')}
{
languageOptions.find(
(o) => o.code === savedSettings.language,
)?.label
}
</Typography>
</Box>
</Box>
)}
)}
</Box>
</Box>
<Box sx={{ flex: 1 }}>
<Box sx={{ mt: 2, width: { xs: '100%', md: '50%' } }}>
{isEditing ? (
<Autocomplete
options={languageOptions}
getOptionLabel={(o) => o.label}
value={
languageOptions.find((o) => o.code === draftLanguage) ||
null
options={calendarOptions.map((c) => c.key)}
getOptionLabel={(key) => t(`settings.${key}`)}
value={draftSettings.calendar}
onChange={(_, v) =>
v &&
setDraftSettings((prev) => ({ ...prev, calendar: v }))
}
onChange={handleDraftLanguageChange}
renderInput={(p) => (
<TextField {...p} label={t('settings.language')} />
renderInput={(params) => (
<TextField {...params} label={t('settings.calendar')} />
)}
size="medium"
fullWidth
@@ -189,51 +382,24 @@ export function Setting() {
) : (
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.language')}
</Typography>
<Typography variant="body1">
{
languageOptions.find((o) => o.code === savedLanguage)
?.label
}
{t('settings.calendar')}
</Typography>
<Box sx={{ display: 'flex', gap: 1 }}>
<Icon
Component={Calendar1}
size="medium"
color={mode === 'light' ? 'black' : 'primary.main'}
variant="Bold"
/>
<Typography variant="body1">
{t(`settings.${savedSettings.calendar}`)}
</Typography>
</Box>
</Box>
)}
</Box>
</Box>
<Box sx={{ mt: 2, width: { xs: '100%', md: '50%' } }}>
{isEditing ? (
<Autocomplete
options={calendarOptions}
getOptionLabel={(key) => t(`settings.${key}`)}
value={selectedCalendar}
onChange={(_, v) => v && setSelectedCalendar(v)}
renderInput={(params) => (
<TextField {...params} label={t('settings.calendar')} />
)}
size="medium"
fullWidth
/>
) : (
<Box>
<Typography variant="caption" color="text.secondary">
{t('settings.calendar')}
</Typography>
<Box sx={{ display: 'flex', gap: 1 }}>
<Icon
Component={Calendar1}
size="medium"
color={mode === 'light' ? 'black' : 'primary.main'}
variant="Bold"
/>
<Typography variant="body1">
{t(`settings.${selectedCalendar}`)}
</Typography>
</Box>
</Box>
)}
</Box>
</Box>
)}
</CardContainer>
</Box>
</Box>

394
src/features/profile/components/userInformation/PersonalInformation.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { Box, Button } from '@mui/material';
import { Box, Button, Typography, CircularProgress } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { CardContainer } from '@/components/CardContainer';
import { ProfileImage } from './personalInformation/ProfileImage';
@@ -7,43 +7,193 @@ import { InfoRowDisplay } from './personalInformation/InfoRowDisplay';
import { InfoRowEdit } from './personalInformation/InfoRowEdit';
import { PageWrapper } from '../PageWrapper';
import { Gender, type InfoRowData } from '../../types';
import axios, { isAxiosError } from 'axios';
import apiClient from '@/lib/apiClient';
interface GetProfileApiResponse {
success: boolean;
message?: string;
firstName?: string;
lastName?: string;
nationalCode?: string;
gender?: Gender;
countryCode?: string;
profileImageUrl?: string;
}
interface SaveProfileApiResponse {
success: boolean;
message?: string;
}
interface TokenApiResponse {
access_token: string;
}
export function PersonalInformation() {
const { t } = useTranslation('profileSetting');
const { t } = useTranslation('setting');
const [isEditing, setIsEditing] = useState(false);
const [uploadedImageUrl, setUploadedImageUrl] = useState<string | null>(null);
const initialData: InfoRowData = {
firstName: 'محمد حسین',
lastName: 'برزه‌گر',
country: 'قطر',
const [data, setData] = useState<InfoRowData>({
firstName: '',
lastName: '',
nationalCode: '',
gender: Gender.None,
};
country: '',
});
const [originalData, setOriginalData] = useState<InfoRowData | null>(null);
// const [token, setToken] = useState<string | null>(null);
const [tokenError, setTokenError] = useState<string | null>(null);
const [saveError, setSaveError] = useState<string | null>(null);
const storedToken = localStorage.getItem('authToken');
const [data, setData] = useState<InfoRowData>(initialData);
const [gender, setGender] = useState<Gender>(Gender.None);
const [isLoading, setIsLoading] = useState(true);
const [fetchError, setFetchError] = useState<string | null>(null);
useEffect(() => {
if (Object.values(Gender).includes(data.gender)) {
setGender(data.gender);
}
}, [data.gender]);
const fetchProfile = async () => {
setIsLoading(true);
setFetchError(null);
try {
const res = await apiClient.post<GetProfileApiResponse>(
'/Profile/GetProfile',
{},
{
headers: {
Authorization: `Bearer ${storedToken}`,
},
},
);
if (res.data?.success) {
const profile = res.data;
const fetchedData = {
firstName: profile.firstName ?? '',
lastName: profile.lastName ?? '',
nationalCode: profile.nationalCode ?? '',
gender: Object.values(Gender).includes(profile.gender as Gender)
? (profile.gender as Gender)
: Gender.None,
country: profile.countryCode ?? '',
};
setData(fetchedData);
setOriginalData(fetchedData);
setUploadedImageUrl(profile.profileImageUrl || null);
} else {
throw new Error(res.data.message || t('settingForm.failRetrieve'));
}
} catch (error: unknown) {
let message = t('settingForm.errorFetch');
if (error instanceof Error) {
message = error.message;
}
setFetchError(message);
} finally {
setIsLoading(false);
}
};
const initials = `${data.firstName?.trim()[0] || ''}‌${data.lastName?.trim()[0] || ''}`;
const toggleEdit = () => {
if (isEditing) {
setData((prev) => ({
...prev,
gender: gender,
}));
if (storedToken) {
fetchProfile();
} else {
setGender(
Object.values(Gender).includes(data.gender) ? data.gender : Gender.None,
);
setIsLoading(false);
setFetchError(t('settingForm.notLoggedIn'));
}
}, [storedToken, t]);
const initials = `${data?.firstName?.trim()[0] || ''}‌${
data?.lastName?.trim()[0] || ''
}`;
const handleEditClick = () => {
setIsEditing(true);
setSaveError(null);
setOriginalData(data);
};
const handleCancelClick = () => {
setIsEditing(false);
if (originalData) {
setData(originalData);
}
setSaveError(null);
};
const handleSaveClick = async () => {
if (!data) return;
setSaveError(null);
try {
const formData = new FormData();
formData.append('FirstName', data.firstName || '');
formData.append('LastName', data.lastName || '');
formData.append('NationalCode', data.nationalCode || '');
formData.append('Gender', String(data.gender ?? Gender.None));
formData.append('CountryCode', data.country || '');
if (uploadedImageUrl && uploadedImageUrl.startsWith('data:')) {
const response = await fetch(uploadedImageUrl);
const blob = await response.blob();
formData.append('Image', blob, 'profile.jpg');
}
const res = await apiClient.post<SaveProfileApiResponse>(
'Profile/SaveProfilePersonalInforamtion',
formData,
{
headers: {
Authorization: `Bearer ${storedToken}`,
},
},
);
if (res.data.success) {
setIsEditing(false);
setOriginalData(data);
} else {
throw new Error(res.data.message || t('settingForm.unknownError'));
}
} catch (error: unknown) {
let message = t('settingForm.checkConnection');
if (error instanceof Error) {
message = error.message;
}
setSaveError(message);
}
};
const apiUrl = 'https://accounts.business-harmony.com';
const tokenEndpoint = `${apiUrl}/connect/token`;
const getToken = async () => {
setTokenError(null);
try {
const body = new URLSearchParams();
body.set('grant_type', 'password');
body.set('username', 'zareian.1381@gmail.com');
body.set('password', '123@Qweasd');
body.set('client_id', 'harmony_identity');
body.set('scope', 'openid harmony_identity profile offline_access');
const response = await axios.post<TokenApiResponse>(
tokenEndpoint,
body.toString(),
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
},
);
if (response.data?.access_token) {
localStorage.setItem('authToken', response.data.access_token);
} else {
throw new Error('No access token in response');
}
} catch (error: unknown) {
let message = 'Failed to get token';
if (isAxiosError(error) && error.response) {
message = `Request failed with status ${error.response.status}`;
} else if (error instanceof Error) {
message = error.message;
}
setTokenError(message);
}
setIsEditing(!isEditing);
};
return (
@@ -53,78 +203,140 @@ export function PersonalInformation() {
subtitle={t('settingForm.descriptionPersonalInfo')}
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.8 5rem', sm: '1rem' },
}}
>
{t('settingForm.rejectButton')}
</Button>
)}
<Button
onClick={toggleEdit}
size="large"
variant="outlined"
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-end',
width: '100%',
}}
>
<Box
sx={{
borderRadius: 1,
bgcolor: isEditing ? 'primary.main' : 'background.default',
color: isEditing ? 'primary.contrastText' : 'primary.main',
display: 'flex',
gap: 1,
flexWrap: 'wrap',
justifyContent: 'flex-end',
}}
>
{isEditing
? t('settingForm.saveButton')
: t('settingForm.editButton')}
</Button>
<Button
variant="contained"
color="secondary"
onClick={getToken}
size="large"
sx={{ textTransform: 'none' }}
disabled={isLoading}
>
Get Token
</Button>
{isEditing ? (
<>
<Button
variant="text"
onClick={handleCancelClick}
size="large"
sx={{
color: 'primary.main',
textTransform: 'none',
width: { xs: '100%', sm: 'auto' },
}}
>
{t('settingForm.rejectButton')}
</Button>
<Button
onClick={handleSaveClick}
size="large"
variant="contained"
sx={{
textTransform: 'none',
width: { xs: '100%', sm: 'auto' },
}}
>
{t('settingForm.saveButton')}
</Button>
</>
) : (
<Button
onClick={handleEditClick}
size="large"
variant="outlined"
sx={{
borderRadius: 1,
}}
disabled={isLoading}
>
{t('settingForm.editButton')}
</Button>
)}
</Box>
{saveError && (
<Typography
color="error"
sx={{ mt: 1, textAlign: 'right', width: '100%' }}
>
{saveError}
</Typography>
)}
</Box>
}
>
<Box
sx={{
mx: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex',
flexDirection: 'column',
gap: 2,
bgcolor: 'background.paper',
}}
>
{isEditing && (
<ProfileImage
initials={initials}
uploadedImageUrl={uploadedImageUrl}
onImageChange={(file) => {
const reader = new FileReader();
reader.onload = () =>
setUploadedImageUrl(reader.result as string);
reader.readAsDataURL(file);
{isLoading ? (
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
p: 4,
minHeight: '200px',
}}
>
<CircularProgress />
</Box>
) : fetchError ? (
<Box sx={{ textAlign: 'center', p: 4 }}>
<Typography color="error">{fetchError}</Typography>
</Box>
) : (
<>
{tokenError && (
<Box sx={{ mt: 2, color: 'red' }}>Error: {tokenError}</Box>
)}
<Box
sx={{
mx: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex',
flexDirection: 'column',
gap: 2,
bgcolor: 'background.paper',
}}
onRemoveImage={() => setUploadedImageUrl(null)}
/>
)}
{isEditing ? (
<InfoRowEdit
data={data}
setData={setData}
gender={gender}
setGender={setGender}
/>
) : (
<InfoRowDisplay
data={data}
uploadedImageUrl={uploadedImageUrl}
initials={initials}
/>
)}
</Box>
>
{isEditing && (
<ProfileImage
initials={initials}
uploadedImageUrl={uploadedImageUrl}
onImageChange={(file) => {
const reader = new FileReader();
reader.onload = () =>
setUploadedImageUrl(reader.result as string);
reader.readAsDataURL(file);
}}
onRemoveImage={() => setUploadedImageUrl(null)}
/>
)}
{data &&
(isEditing ? (
<InfoRowEdit data={data} setData={setData} />
) : (
<InfoRowDisplay
data={data}
uploadedImageUrl={uploadedImageUrl}
initials={initials}
/>
))}
</Box>
</>
)}
</CardContainer>
</PageWrapper>
);

197
src/features/profile/components/userInformation/PhoneNumber.tsx
View File

@@ -1,4 +1,4 @@
import { useState, useRef } from 'react';
import { useState, useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import parsePhoneNumberFromString from 'libphonenumber-js';
import { PageWrapper } from '../PageWrapper';
@@ -6,9 +6,32 @@ import { CardContainer } from '@/components/CardContainer';
import PhoneDisplay from './phoneNumber/PhoneDisplay';
import PhoneEditForm from './phoneNumber/PhoneEditForm';
import PhoneActionButtons from './phoneNumber/PhoneActionButtons';
import apiClient from '@/lib/apiClient';
import { CircularProgress, Box, Typography } from '@mui/material';
interface Phone {
phone: string;
time: string;
withCode: string;
}
interface GetProfileApiResponse {
success: boolean;
message?: string;
phoneNumber?: string;
}
interface ApiResponse {
success: boolean;
message?: string;
}
interface ConfirmApiResponse extends ApiResponse {
confirm?: boolean;
}
export function PhoneNumber() {
const { t } = useTranslation('profileSetting');
const { t } = useTranslation('setting');
const [isEditing, setIsEditing] = useState(false);
const [phoneNumber, setPhoneNumber] = useState('');
const [verificationCode, setVerificationCode] = useState('');
@@ -18,15 +41,60 @@ export function PhoneNumber() {
);
const [isVerifying, setIsVerifying] = useState(false);
const [isVerified, setIsVerified] = useState(false);
const [phones, setPhone] = useState([
{ phone: '09123456789', time: '۱ ماه پیش', withCode: '+989123456789' },
]);
const [phones, setPhone] = useState<Phone[]>([]);
const [countryCode, setCountryCode] = useState('+98');
const textFieldRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
const [error, setError] = useState<string>();
const [touched, setTouched] = useState<boolean>(false);
const inputError: boolean = touched && !!error;
const token = localStorage.getItem('authToken');
const [isLoading, setIsLoading] = useState(true);
const [fetchError, setFetchError] = useState<string | null>(null);
useEffect(() => {
const fetchPhoneNumber = async () => {
setIsLoading(true);
setFetchError(null);
if (!token) {
setIsLoading(false);
setFetchError(t('settingForm.notLoggedIn'));
return;
}
try {
const res = await apiClient.post<GetProfileApiResponse>(
'/Profile/GetProfile',
{},
{ headers: { Authorization: `Bearer ${token}` } },
);
if (res.data.success && res.data.phoneNumber) {
setPhone([
{
phone: res.data.phoneNumber,
time: '',
withCode: res.data.phoneNumber,
},
]);
} else if (!res.data.success) {
throw new Error(
res.data.message || t('settingForm.failFetchPhoneNumber'),
);
}
} catch (err: unknown) {
let message = t('settingForm.errorFetchPhoneNumber');
if (err instanceof Error) {
message = err.message;
}
setFetchError(message);
} finally {
setIsLoading(false);
}
};
fetchPhoneNumber();
}, [token, t]);
const isPhoneValid = (code: string, phone: string) => {
const phoneNum = parsePhoneNumberFromString(code + phone);
@@ -37,6 +105,7 @@ export function PhoneNumber() {
setTouched(true);
if (!phoneNumber) {
setError(t('settingForm.thisFieldIsRequired'));
return;
}
if (!isPhoneValid(countryCode, phoneNumber)) {
setError(t('settingForm.phoneNumberIsInvalid'));
@@ -54,34 +123,100 @@ export function PhoneNumber() {
setIsVerified(false);
setButtonState('default');
setShowToast(false);
setError(undefined);
setTouched(false);
}
return enteringEditMode;
});
};
const handleSendCode = () => {
const handleSendCode = async () => {
if (!phoneNumber) return;
setButtonState('counting');
setIsVerified(false);
if (!isPhoneValid(countryCode, phoneNumber)) {
setError(t('settingForm.phoneNumberIsInvalid'));
return;
}
setError(undefined);
try {
const res = await apiClient.post<ApiResponse>(
'/Profile/SendVerfiyPhoneNumberCode',
{
phoneNumber: countryCode + phoneNumber.replace(/^0/, ''),
},
{ headers: { Authorization: `Bearer ${token}` } },
);
if (res.data.success) {
setButtonState('counting');
setIsVerified(false);
} else {
setError(res.data.message || t('settingForm.sendCodeFailed'));
}
} catch (error: unknown) {
setError(t('settingForm.sendCodeFailed'));
}
};
const handleVerifyCode = () => {
const handleVerifyCode = async () => {
if (!verificationCode) {
setError(t('settingForm.verificationCodeRequired'));
return;
}
setIsVerifying(true);
setTimeout(() => {
setError(undefined);
try {
const res = await apiClient.post<ConfirmApiResponse>(
'/Profile/ConfirmPhoneNumberChangeCode',
{
phoneNumber: countryCode + phoneNumber.replace(/^0/, ''),
verifyCode: verificationCode,
},
{ headers: { Authorization: `Bearer ${token}` } },
);
if (res.data.success && res.data.confirm) {
setIsVerified(true);
setShowToast(true);
await handleChangePhoneNumber();
} else {
setError(res.data.message || t('settingForm.verifyCodeFailed'));
setIsVerified(false);
}
} catch (error: unknown) {
setError(t('settingForm.verifyCodeFailed'));
setIsVerified(false);
} finally {
setIsVerifying(false);
setIsVerified(true);
setShowToast(true);
const newPhone = '+98' + phoneNumber.slice(1);
setPhone([
{ phone: phoneNumber, time: 'چند ثانیه پیش', withCode: newPhone },
]);
}, 1500);
}
};
const handleVerifyClick = () => {
if (!verificationCode || isVerifying) return;
handleVerifyCode();
setTimeout(() => setShowToast(true), 1600);
const handleChangePhoneNumber = async () => {
try {
const fullPhoneNumber = countryCode + phoneNumber.replace(/^0/, '');
const res = await apiClient.post<ApiResponse>(
'/Profile/ChangePhoneNumber',
{
phoneNumber: fullPhoneNumber,
},
{ headers: { Authorization: `Bearer ${token}` } },
);
if (res.data.success) {
setPhone([
{
phone: phoneNumber,
time: t('settingForm.justNow'),
withCode: fullPhoneNumber,
},
]);
setIsEditing(false);
} else {
setError(res.data.message || t('settingForm.changePhoneFailed'));
}
} catch (error: unknown) {
setError(t('settingForm.changePhoneFailed'));
}
};
return (
@@ -98,7 +233,23 @@ export function PhoneNumber() {
/>
}
>
{isEditing ? (
{isLoading ? (
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
p: 4,
minHeight: '150px',
}}
>
<CircularProgress />
</Box>
) : fetchError ? (
<Box sx={{ textAlign: 'center', p: 4 }}>
<Typography color="error">{fetchError}</Typography>
</Box>
) : isEditing ? (
<PhoneEditForm
phoneNumber={phoneNumber}
setPhoneNumber={setPhoneNumber}
@@ -111,7 +262,7 @@ export function PhoneNumber() {
buttonState={buttonState}
setButtonState={setButtonState}
handleSendCode={handleSendCode}
handleVerifyClick={handleVerifyClick}
handleVerifyClick={handleVerifyCode}
error={error}
inputError={inputError}
handleBlur={handleBlur}

203
src/features/profile/components/userInformation/SocialMedia.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { CardContainer } from '@/components/CardContainer';
import { PageWrapper } from '../PageWrapper';
@@ -7,13 +7,53 @@ import SocialMediaMenu from './socialMedia/SocialMediaMenu';
import SocialMediaDialog from './socialMedia/SocialMediaDialog';
import useMediaQuery from '@mui/material/useMediaQuery';
import type { Theme } from '@mui/material/styles';
import apiClient from '@/lib/apiClient';
import { Box, CircularProgress, Typography } from '@mui/material';
interface EmailAccount {
email: string;
provider: 'email' | 'google';
time: string;
}
interface GetProfileApiResponse {
success: boolean;
message?: string;
email?: string;
}
interface SendCodeApiResponse {
success: boolean;
message?: string;
}
interface ConfirmCodeApiResponse {
success: boolean;
confirm?: boolean;
message?: string;
}
interface ChangeEmailApiResponse {
success: boolean;
message?: string;
}
export function SocialMedia() {
const { t } = useTranslation('profileSetting');
const { t } = useTranslation('setting');
const token = localStorage.getItem('authToken');
const [openDialog, setOpenDialog] = useState(false);
const [emailInput, setEmailInput] = useState('');
const [emailError, setEmailError] = useState(false);
const [verificationCode, setVerificationCode] = useState('');
const [dialogStep, setDialogStep] = useState<'enterEmail' | 'enterCode'>(
'enterEmail',
);
const [apiError, setApiError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [emailList, setEmailList] = useState<EmailAccount[]>([]);
const [isFetching, setIsFetching] = useState(true);
const [fetchError, setFetchError] = useState<string | null>(null);
const fullScreen = useMediaQuery((theme: Theme) =>
theme.breakpoints.down('sm'),
@@ -26,10 +66,128 @@ export function SocialMedia() {
| 'lg'
| 'xl';
const emailList = [
{ email: 'emailtemp@email.com', provider: 'email', time: '1 ماه پیش' },
{ email: 'emailtemp@gmail.com', provider: 'google', time: '1 ماه پیش' },
] as const;
useEffect(() => {
const fetchInitialEmail = async () => {
setIsFetching(true);
setFetchError(null);
if (!token) {
setIsFetching(false);
setFetchError(t('settingForm.notLoggedIn'));
return;
}
try {
const res = await apiClient.post<GetProfileApiResponse>(
'/Profile/GetProfile',
{},
{ headers: { Authorization: `Bearer ${token}` } },
);
if (res.data.success && res.data.email) {
const userEmail = res.data.email;
const newAccount: EmailAccount = {
email: userEmail,
provider: userEmail.includes('gmail.com') ? 'google' : 'email',
time: '',
};
setEmailList([newAccount]);
} else if (!res.data.success) {
throw new Error(res.data.message || t('settingForm.failFetchEmail'));
}
} catch (err: unknown) {
let message = t('settingForm.errorFetchEmail');
if (err instanceof Error) {
message = err.message;
}
setFetchError(message);
} finally {
setIsFetching(false);
}
};
fetchInitialEmail();
}, [token, t]);
const resetDialog = () => {
setOpenDialog(false);
setEmailInput('');
setVerificationCode('');
setApiError(null);
setIsLoading(false);
setDialogStep('enterEmail');
};
const handleSendCode = async () => {
if (!/^\S+@\S+\.\S+$/.test(emailInput)) {
setApiError(t('settingForm.emailIsInvalid'));
return;
}
setIsLoading(true);
setApiError(null);
try {
const res = await apiClient.post<SendCodeApiResponse>(
'Profile/SendEmailChangeCode',
{ email: emailInput },
{ headers: { Authorization: `Bearer ${token}` } },
);
if (res.data.success) {
setDialogStep('enterCode');
} else {
setApiError(res.data.message || t('settingForm.sendCodeFailed'));
}
} catch (err: unknown) {
setApiError(t('settingForm.sendCodeFailed'));
} finally {
setIsLoading(false);
}
};
const handleConfirmAndChangeEmail = async () => {
if (verificationCode.length < 4) {
setApiError(t('settingForm.verificationCodeRequired'));
return;
}
setIsLoading(true);
setApiError(null);
try {
const confirmRes = await apiClient.post<ConfirmCodeApiResponse>(
'Profile/ConfirmEmailChangeCode',
{ email: emailInput, verifyCode: verificationCode },
{ headers: { Authorization: `Bearer ${token}` } },
);
if (confirmRes.data.success && confirmRes.data.confirm) {
const changeRes = await apiClient.post<ChangeEmailApiResponse>(
'Profile/ChangeEmail',
{ email: emailInput },
{ headers: { Authorization: `Bearer ${token}` } },
);
if (changeRes.data.success) {
setEmailList((prevList) => [
...prevList,
{
email: emailInput,
provider: 'email',
time: t('settingForm.justNow'),
},
]);
resetDialog();
} else {
setApiError(
changeRes.data.message || t('settingForm.changeEmailFailed'),
);
}
} else {
setApiError(
confirmRes.data.message || t('settingForm.verifyCodeFailed'),
);
}
} catch (err: unknown) {
setApiError(t('settingForm.anErrorOccurred'));
} finally {
setIsLoading(false);
}
};
return (
<PageWrapper>
@@ -40,15 +198,38 @@ export function SocialMedia() {
<SocialMediaMenu t={t} onOpenDialog={() => setOpenDialog(true)} />
}
>
<SocialMediaList t={t} emailList={emailList} />
{isFetching ? (
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
p: 4,
minHeight: '100px',
}}
>
<CircularProgress />
</Box>
) : fetchError ? (
<Box sx={{ textAlign: 'center', p: 4 }}>
<Typography color="error.main">{fetchError}</Typography>
</Box>
) : (
<SocialMediaList t={t} emailList={emailList} />
)}
<SocialMediaDialog
open={openDialog}
onClose={() => setOpenDialog(false)}
onClose={resetDialog}
t={t}
emailInput={emailInput}
setEmailInput={setEmailInput}
emailError={emailError}
setEmailError={setEmailError}
verificationCode={verificationCode}
setVerificationCode={setVerificationCode}
apiError={apiError}
isLoading={isLoading}
dialogStep={dialogStep}
onSendCode={handleSendCode}
onConfirmEmail={handleConfirmAndChangeEmail}
fullScreen={fullScreen}
computedMaxWidth={computedMaxWidth}
/>

2
src/features/profile/components/userInformation/personalInformation/DisplayField.tsx
View File

@@ -7,7 +7,7 @@ interface DisplayFieldProps {
}
export function DisplayField({ label, value }: DisplayFieldProps) {
const { t } = useTranslation('profileSetting');
const { t } = useTranslation('setting');
const displayValue = value?.trim() || t('settingForm.notDetermined');
return (

2
src/features/profile/components/userInformation/personalInformation/InfoRowDisplay.tsx
View File

@@ -23,7 +23,7 @@ export function InfoRowDisplay({
uploadedImageUrl,
initials,
}: InfoRowDisplayProps) {
const { t } = useTranslation('profileSetting');
const { t } = useTranslation('setting');
const displayValue = (value: string) =>
value?.trim() || t('settingForm.notDetermined');

73
src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx
View File

@@ -2,6 +2,7 @@ import {
Box,
TextField,
FormControl,
InputLabel,
MenuItem,
Select,
Autocomplete,
@@ -15,17 +16,10 @@ import { type InfoRowData } from '@/features/profile/types';
interface InfoRowEditProps {
data: InfoRowData;
setData: React.Dispatch<React.SetStateAction<InfoRowData>>;
gender: Gender;
setGender: React.Dispatch<React.SetStateAction<Gender>>;
}
export function InfoRowEdit({
data,
setData,
gender,
setGender,
}: InfoRowEditProps) {
const { t } = useTranslation(['countries', 'profileSetting']);
export function InfoRowEdit({ data, setData }: InfoRowEditProps) {
const { t } = useTranslation(['countries', 'setting']);
const countryOptions = countries.map((c) => ({
code: c.code,
@@ -34,26 +28,27 @@ export function InfoRowEdit({
const currentCountry =
countryOptions.find((c) => c.code === data.country) || null;
const fields = [
{
name: 'firstName' as const,
label: t('settingForm.name', { ns: 'profileSetting' }),
value: data.firstName,
},
{
name: 'lastName' as const,
label: t('settingForm.familyName', { ns: 'profileSetting' }),
value: data.lastName,
},
{
name: 'nationalCode' as const,
label: t('settingForm.nationalCode', { ns: 'profileSetting' }),
value: data.nationalCode,
},
];
return (
<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
{[
{
name: 'firstName' as keyof InfoRowData,
label: t('settingForm.name', { ns: 'profileSetting' }),
value: data.firstName,
},
{
name: 'lastName' as keyof InfoRowData,
label: t('settingForm.familyName', { ns: 'profileSetting' }),
value: data.lastName,
},
{
name: 'nationalCode' as keyof InfoRowData,
label: t('settingForm.nationalCode', { ns: 'profileSetting' }),
value: data.nationalCode,
},
].map(({ name, label, value }) => (
{fields.map(({ name, label, value }) => (
<Box
key={name}
sx={{ width: { xs: '100%', sm: '48%', md: 'calc(50% - 8px)' } }}
@@ -75,22 +70,17 @@ export function InfoRowEdit({
<Box sx={{ width: { xs: '100%', sm: '48%', md: 'calc(50% - 8px)' } }}>
<FormControl fullWidth>
<InputLabel>
{t('settingForm.genderPlaceholder', { ns: 'profileSetting' })}
</InputLabel>
<Select
value={gender}
onChange={(e) => setGender(e.target.value as Gender)}
displayEmpty
renderValue={(selected) =>
selected ? (
selected === Gender.Male ? (
t('settingForm.man', { ns: 'profileSetting' })
) : (
t('settingForm.woman', { ns: 'profileSetting' })
)
) : (
<span>
{t('settingForm.genderPlaceholder', { ns: 'profileSetting' })}
</span>
)
value={data.gender === Gender.None ? '' : data.gender}
label={t('settingForm.genderPlaceholder', { ns: 'profileSetting' })}
onChange={(e) =>
setData((prev) => ({
...prev,
gender: e.target.value as Gender,
}))
}
>
<MenuItem value={Gender.Male}>
@@ -117,6 +107,7 @@ export function InfoRowEdit({
renderOption={(props, option) => (
<Box component="li" {...props} key={option.code}>
<CountryFlag code={option.code} />
{option.label}
</Box>
)}
renderInput={(params) => (

6
src/features/profile/components/userInformation/personalInformation/ProfileImage.tsx
View File

@@ -19,7 +19,7 @@ export function ProfileImage({
onImageChange,
onRemoveImage,
}: ProfileImageProps) {
const { t } = useTranslation('profileSetting');
const { t } = useTranslation('setting');
const [error, setError] = useState<string | null>(null);
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -80,7 +80,9 @@ export function ProfileImage({
Component={Camera}
size="small"
color={
uploadedImageUrl && onRemoveImage ? 'primary.main' : 'white'
uploadedImageUrl && onRemoveImage
? 'primary.main'
: 'background.paper'
}
/>
}

70
src/features/profile/components/userInformation/socialMedia/SocialMediaDialog.tsx
View File

@@ -2,6 +2,7 @@ import React, { type ReactElement, type ElementType } from 'react';
import {
Box,
Button,
CircularProgress,
Dialog,
DialogContent,
DialogTitle,
@@ -27,10 +28,15 @@ interface SocialMediaDialogProps {
t: (key: string) => string;
emailInput: string;
setEmailInput: (val: string) => void;
emailError: boolean;
setEmailError: (val: boolean) => void;
fullScreen: boolean;
computedMaxWidth: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
verificationCode: string;
setVerificationCode: (value: string) => void;
apiError: string | null;
isLoading: boolean;
dialogStep: 'enterEmail' | 'enterCode';
onSendCode: () => void;
onConfirmEmail: () => void;
}
export default function SocialMediaDialog({
@@ -39,17 +45,16 @@ export default function SocialMediaDialog({
t,
emailInput,
setEmailInput,
emailError,
setEmailError,
fullScreen,
computedMaxWidth,
verificationCode,
setVerificationCode,
apiError,
isLoading,
dialogStep,
onSendCode,
onConfirmEmail,
}: SocialMediaDialogProps) {
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setEmailInput(value);
setEmailError(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value));
};
return (
<Dialog
open={open}
@@ -64,7 +69,7 @@ export default function SocialMediaDialog({
sx: {
borderRadius: { xs: 0, sm: 2 },
width: { xs: '100%', sm: '30%' },
height: { xs: '100%', sm: '43%' },
height: 'auto',
},
}}
>
@@ -79,7 +84,7 @@ export default function SocialMediaDialog({
bgcolor: 'background.default',
}}
>
<IconButton onClick={onClose} aria-label="Close">
<IconButton onClick={onClose} aria-label="Close" disabled={isLoading}>
<Icon Component={CloseCircle} size="medium" color="primary.main" />
</IconButton>
{t('settingForm.addEmailButton')}
@@ -105,24 +110,53 @@ export default function SocialMediaDialog({
fullWidth
type="email"
value={emailInput}
onChange={handleEmailChange}
error={emailError}
helperText={emailError ? t('settingForm.emailError') : ''}
onChange={(e) => setEmailInput(e.target.value)}
label={t('settingForm.email')}
placeholder="abc@email.com"
autoComplete="email"
inputMode="email"
sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
autoFocus
disabled={isLoading || dialogStep === 'enterCode'}
/>
{dialogStep === 'enterCode' && (
<>
<TextField
fullWidth
type="text"
value={verificationCode}
onChange={(e) => setVerificationCode(e.target.value)}
label={t('settingForm.verificationCode')}
autoComplete="one-time-code"
inputMode="numeric"
sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
autoFocus
disabled={isLoading}
/>
</>
)}
{apiError && (
<Typography color="error" variant="caption" sx={{ mt: 1 }}>
{apiError}
</Typography>
)}
<Button
variant="contained"
fullWidth
sx={{ textTransform: 'none', borderRadius: 2 }}
disabled={emailError || emailInput === ''}
sx={{ textTransform: 'none', borderRadius: 2, mt: 1 }}
disabled={isLoading || (dialogStep === 'enterEmail' && !emailInput)}
onClick={dialogStep === 'enterEmail' ? onSendCode : onConfirmEmail}
>
{t('settingForm.verificationCodeButton')}
{isLoading ? (
<CircularProgress size={24} color="inherit" />
) : dialogStep === 'enterEmail' ? (
t('settingForm.verificationCodeButton')
) : (
t('settingForm.confirmAndSave')
)}
</Button>
</DialogContent>
</Dialog>

2
src/features/profile/components/userInformation/socialMedia/SocialMediaList.tsx
View File

@@ -13,7 +13,7 @@ interface SocialMediaListProps {
export default function SocialMediaList({ emailList }: SocialMediaListProps) {
return (
<Box sx={{ width: '100%', borderRadius: '8px', p: { xs: 1, sm: 2 } }}>
<Box sx={{ width: '100%', borderRadius: 1, p: { xs: 1, sm: 2 } }}>
{emailList.map((item, index) => (
<Box
key={index}

6
src/features/profile/types.ts
View File

@@ -1,7 +1,7 @@
export enum Gender {
Male = 'male',
Female = 'female',
None = '',
Male = 1,
Female = 2,
None = 0,
}
export interface InfoRowData {

26
src/hooks/useApi.ts Normal file
View File

@@ -0,0 +1,26 @@
import { useState, useEffect } from 'react';
type ApiFunction<T> = () => Promise<{ data: T }>;
export function useApi<T>(apiFunction: ApiFunction<T>) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<unknown>(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await apiFunction();
setData(response.data);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
fetchData();
}, [apiFunction]);
return { data, loading, error };
}

55
src/lib/apiClient.ts Normal file
View File

@@ -0,0 +1,55 @@
import axios from 'axios';
// Function to get the token from local storage or state management
const getToken = () => localStorage.getItem('authToken');
const apiClient = axios.create({
// Define the base URL for all API requests
baseURL: 'https://accounts.business-harmony.com/api/',
// Set a timeout for requests (e.g., 10 seconds)
timeout: 10000,
// Set default headers
headers: {
Accept: 'application/json',
},
});
// --- Request Interceptor ---
// This runs BEFORE each request is sent
apiClient.interceptors.request.use(
(config) => {
const token = getToken();
if (token) {
// Add the authorization token to the headers
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
// Handle request errors
return Promise.reject(error);
},
);
// --- Response Interceptor ---
// This runs AFTER a response is received
// TODO: set global post api logic
// apiClient.interceptors.response.use(
// (response) => {
// // Any status code within the 2xx range will trigger this function
// return response;
// },
// (error) => {
// // Handle common errors globally
// if (error.response?.status === 401) {
// // e.g., redirect to login page if unauthorized
// console.error("Unauthorized! Redirecting to login...");
// // window.location.href = '/login';
// }
// return Promise.reject(error);
// }
// );
export default apiClient;

12
src/utils/persianDigit.tsx Normal file
View File

@@ -0,0 +1,12 @@
export const toLocaleDigits = (
input: string | number,
lang: string,
): string => {
const str = String(input);
if (lang.startsWith('fa')) {
return str.replace(/\d/g, (d: string) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d, 10)]);
}
return str;
};

15
src/utils/regex.ts Normal file
View File

@@ -0,0 +1,15 @@
export function regex(password: string) {
const hasNumber = /\d/.test(password);
const hasMinLength = password.length >= 8;
const hasUpperAndLower = /[A-Z]/.test(password) && /[a-z]/.test(password);
const hasSpecialChar = /[!@#$%^&*]/.test(password);
return {
hasNumber,
hasMinLength,
hasUpperAndLower,
hasSpecialChar,
validPassword:
hasNumber && hasMinLength && hasUpperAndLower && hasSpecialChar,
};
}