Merge pull request #13 from rkheftan/feat/user-completion-form
Feat/user completion form
This commit is contained in:
SajadMRjl
GitHub
980
package-lock.json
generated
980
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -11,10 +11,17 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@date-io/dayjs": "^3.2.0",
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@mui/material": "^7.2.0",
|
||||
"@mui/stylis-plugin-rtl": "^7.2.0",
|
||||
"@mui/x-date-pickers": "^8.9.0",
|
||||
"@mui/x-date-pickers-pro": "^8.9.0",
|
||||
"axios": "^1.11.0",
|
||||
"date-fns": "^4.1.0",
|
||||
"date-fns-jalali": "^4.0.0-0",
|
||||
"dayjs": "^1.11.13",
|
||||
"@rkheftan/harmony-ui": "^0.1.6",
|
||||
"@types/stylis": "^4.2.7",
|
||||
"i18next": "^25.3.0",
|
||||
|
||||
38
public/locales/en/completionForm.json
Normal file
38
public/locales/en/completionForm.json
Normal file
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"completion": {
|
||||
"title": "Completion of user account information",
|
||||
"description": "Enter your business information",
|
||||
"name": "Name",
|
||||
"familyName": "Family Name",
|
||||
"gender": "Gender",
|
||||
"optionalNationalCode": "National Code(Optional)",
|
||||
"determinePassword": "Determine Password",
|
||||
"password": "Password",
|
||||
"passwordRepetition": "Repeat password",
|
||||
"determineEmail": "Connect your email",
|
||||
"email": "Email",
|
||||
"vericationCodeButton": "Send verification code",
|
||||
"verificationCode": "verification code",
|
||||
"checkCodeButton": "Check code",
|
||||
"registerButton": "Confirm and Register",
|
||||
"man": "male",
|
||||
"woman": "female",
|
||||
"hasNumber": "includes number",
|
||||
"hasMinLength": "at least 8 characters",
|
||||
"hasUpperAndLower": "includes a lowercase and uppercase letter",
|
||||
"hasSpecialChar": "includes sign (!@#$%^&*)",
|
||||
"notCompatibility": "does not match",
|
||||
"emailCorrectForm": "Enter the correct email form.",
|
||||
"agreementPart1": "By continuing the registration process, you agree to the",
|
||||
"agreementLinkText": " Harmony Terms and Conditions",
|
||||
"agreementPart2": ".",
|
||||
"sent": "sent",
|
||||
"country": "country",
|
||||
"dateOfBirth": "Date of birth(optional)",
|
||||
"submitSuccess": "Information successfully registered",
|
||||
"submitError": "Error in registering information",
|
||||
"submitting": "Submitting...",
|
||||
"success": "Success",
|
||||
"agreement": "1. Confidentiality of Information: Harmony commits under no circumstances to disclose users’ identity information, such as phone numbers, email addresses, passwords, user IDs, or any related data, to third parties.\n\n2. User information is used solely for providing authentication services and remains confidential even after account deactivation or termination.\n\n3. Harmony is obliged to implement necessary security measures to prevent unauthorized access.\n\n4. Responsibility for Account Security: Users must protect their accounts and choose strong, non-guessable passwords. Periodic password changes and immediate action in case of suspected unauthorized access are required. Any misuse of the account due to user negligence is the responsibility of the user.\n\n5. Security Breaches and Cyber Attacks: Harmony is not responsible for security breaches caused by cyber attacks beyond the system's control. However, Harmony employs up-to-date security standards and encryption to prevent such incidents.\n\n6. User Negligence in Protecting Information: If account information is disclosed due to user negligence or error, Harmony bears no responsibility. Determining such cases, based on system security logs, is the responsibility of Harmony's technical manager.\n\n7. Accurate Logging of Activities: All events related to registering, editing, and deleting information in the system are accurately and immutably logged. Claims regarding deletion or modification of data without logs are invalid unless supported by documentation provided by the user.\n\n8. Service Updates: Harmony services may be updated or changed over time. Continued use of the system after changes implies acceptance of the new terms. If users disagree, they may request account deletion.\n\n9. User Support: Support is provided only via email and phone, free of charge. Harmony is not obligated to provide in-person support or training beyond basic services.\n\n10. Official Communication Channels: Harmony communicates with users only via the phone number and email registered in the user account. Official announcements are sent through these channels.\n\n11. Official Domains for Communication: All emails from Harmony are sent exclusively from the domain harmony.id. Users must verify this to prevent phishing or similar attacks.\n\n12. Compliance with Iranian Laws: Users must comply with all applicable laws of the Islamic Republic of Iran, including the “Electronic Commerce Law,” “Computer Crimes Law,” and related legislation. Responsibility for violations rests with the user.\n\n13. Temporary Data Retention After Account Termination: Upon account termination or deletion, user information is stored securely for 30 days and permanently deleted thereafter.\n\n14. Ownership of User Data: All data submitted by users belongs to them. Harmony has no ownership over this information. Users are responsible for the accuracy, quality, and legality of their data.\n\n15. Purposeful Use of Identity Information: Collected identity information during registration is used only for authentication and basic services. It will not be shared with any third party without explicit user consent, except under a court order or legal authority.\n\n16. Permanent Data Confidentiality: Harmony commits to maintaining confidentiality of collected information even after the end of the user relationship or account closure.\n\n17. Limitation of Liability: Harmony is not liable for direct or indirect damages resulting from use or inability to use the authentication services.\n\n18. Disruptions in Communication Infrastructure: Harmony is not responsible for disruptions caused by the internet, infrastructure services, or other issues beyond its control.\n\n19. Force Majeure and Unforeseen Events: Harmony bears no responsibility for natural disasters, strikes, power outages, cyber attacks, or other events beyond its control that prevent service delivery.\n\n20. Services Dependent on Third Parties: If parts of the authentication services are provided by third parties, the usage terms of those services are the responsibility of those companies, and Harmony bears no liability.\n\n21. Guarantee of Data Access in Case of Service Termination: If Harmony ceases operations permanently, it commits to keeping servers active for two years and allowing users access to their data.\n\n22. Notification of Service Interruptions: If service interruption is necessary, Harmony must notify users at least 12 hours in advance via email or SMS."
|
||||
}
|
||||
}
|
||||
247
public/locales/en/country.json
Normal file
247
public/locales/en/country.json
Normal file
@@ -0,0 +1,247 @@
|
||||
{
|
||||
"country.afghanistan": "Afghanistan",
|
||||
"country.aland_islands": "Aland islands",
|
||||
"country.albania": "Albania",
|
||||
"country.algeria": "Algeria",
|
||||
"country.american_samoa": "American samoa",
|
||||
"country.andorra": "Andorra",
|
||||
"country.angola": "Angola",
|
||||
"country.anguilla": "Anguilla",
|
||||
"country.antarctica": "Antarctica",
|
||||
"country.antigua_and_barbuda": "Antigua and barbuda",
|
||||
"country.argentina": "Argentina",
|
||||
"country.armenia": "Armenia",
|
||||
"country.aruba": "Aruba",
|
||||
"country.australia": "Australia",
|
||||
"country.austria": "Austria",
|
||||
"country.azerbaijan": "Azerbaijan",
|
||||
"country.bahamas": "Bahamas",
|
||||
"country.bahrain": "Bahrain",
|
||||
"country.bangladesh": "Bangladesh",
|
||||
"country.barbados": "Barbados",
|
||||
"country.belarus": "Belarus",
|
||||
"country.belgium": "Belgium",
|
||||
"country.belize": "Belize",
|
||||
"country.benin": "Benin",
|
||||
"country.bermuda": "Bermuda",
|
||||
"country.bhutan": "Bhutan",
|
||||
"country.bolivia": "Bolivia",
|
||||
"country.bosnia_and_herzegovina": "Bosnia and herzegovina",
|
||||
"country.botswana": "Botswana",
|
||||
"country.brazil": "Brazil",
|
||||
"country.british_indian_ocean_territory": "British indian ocean territory",
|
||||
"country.british_virgin_islands": "British virgin islands",
|
||||
"country.brunei": "Brunei",
|
||||
"country.bulgaria": "Bulgaria",
|
||||
"country.burkina_faso": "Burkina faso",
|
||||
"country.burundi": "Burundi",
|
||||
"country.cambodia": "Cambodia",
|
||||
"country.cameroon": "Cameroon",
|
||||
"country.canada": "Canada",
|
||||
"country.cape_verde": "Cape verde",
|
||||
"country.cayman_islands": "Cayman islands",
|
||||
"country.central_african_republic": "Central african republic",
|
||||
"country.chad": "Chad",
|
||||
"country.chile": "Chile",
|
||||
"country.china": "China",
|
||||
"country.christmas_island": "Christmas island",
|
||||
"country.cocos_keeling_islands": "Cocos keeling islands",
|
||||
"country.colombia": "Colombia",
|
||||
"country.comoros": "Comoros",
|
||||
"country.congo_brazzaville": "Congo brazzaville",
|
||||
"country.congo_kinshasa": "Congo kinshasa",
|
||||
"country.cook_islands": "Cook islands",
|
||||
"country.costa_rica": "Costa rica",
|
||||
"country.cote_divoire": "Cote divoire",
|
||||
"country.croatia": "Croatia",
|
||||
"country.cuba": "Cuba",
|
||||
"country.curacao": "Curacao",
|
||||
"country.cyprus": "Cyprus",
|
||||
"country.czech_republic": "Czech republic",
|
||||
"country.denmark": "Denmark",
|
||||
"country.djibouti": "Djibouti",
|
||||
"country.dominica": "Dominica",
|
||||
"country.dominican_republic": "Dominican republic",
|
||||
"country.ecuador": "Ecuador",
|
||||
"country.egypt": "Egypt",
|
||||
"country.el_salvador": "El salvador",
|
||||
"country.equatorial_guinea": "Equatorial guinea",
|
||||
"country.eritrea": "Eritrea",
|
||||
"country.estonia": "Estonia",
|
||||
"country.eswatini": "Eswatini",
|
||||
"country.ethiopia": "Ethiopia",
|
||||
"country.falkland_islands": "Falkland islands",
|
||||
"country.faroe_islands": "Faroe islands",
|
||||
"country.fiji": "Fiji",
|
||||
"country.finland": "Finland",
|
||||
"country.france": "France",
|
||||
"country.french_guiana": "French guiana",
|
||||
"country.french_polynesia": "French polynesia",
|
||||
"country.gabon": "Gabon",
|
||||
"country.gambia": "Gambia",
|
||||
"country.georgia": "Georgia",
|
||||
"country.germany": "Germany",
|
||||
"country.ghana": "Ghana",
|
||||
"country.gibraltar": "Gibraltar",
|
||||
"country.greece": "Greece",
|
||||
"country.greenland": "Greenland",
|
||||
"country.grenada": "Grenada",
|
||||
"country.guadeloupe": "Guadeloupe",
|
||||
"country.guam": "Guam",
|
||||
"country.guatemala": "Guatemala",
|
||||
"country.guernsey": "Guernsey",
|
||||
"country.guinea": "Guinea",
|
||||
"country.guinea_bissau": "Guinea bissau",
|
||||
"country.guyana": "Guyana",
|
||||
"country.haiti": "Haiti",
|
||||
"country.honduras": "Honduras",
|
||||
"country.hong_kong": "Hong kong",
|
||||
"country.hungary": "Hungary",
|
||||
"country.iceland": "Iceland",
|
||||
"country.india": "India",
|
||||
"country.indonesia": "Indonesia",
|
||||
"country.iran": "Iran",
|
||||
"country.iraq": "Iraq",
|
||||
"country.ireland": "Ireland",
|
||||
"country.isle_of_man": "Isle of man",
|
||||
"country.israel": "Israel",
|
||||
"country.italy": "Italy",
|
||||
"country.jamaica": "Jamaica",
|
||||
"country.japan": "Japan",
|
||||
"country.jersey": "Jersey",
|
||||
"country.jordan": "Jordan",
|
||||
"country.kazakhstan": "Kazakhstan",
|
||||
"country.kenya": "Kenya",
|
||||
"country.kiribati": "Kiribati",
|
||||
"country.kosovo": "Kosovo",
|
||||
"country.kuwait": "Kuwait",
|
||||
"country.kyrgyzstan": "Kyrgyzstan",
|
||||
"country.laos": "Laos",
|
||||
"country.latvia": "Latvia",
|
||||
"country.lebanon": "Lebanon",
|
||||
"country.lesotho": "Lesotho",
|
||||
"country.liberia": "Liberia",
|
||||
"country.libya": "Libya",
|
||||
"country.liechtenstein": "Liechtenstein",
|
||||
"country.lithuania": "Lithuania",
|
||||
"country.luxembourg": "Luxembourg",
|
||||
"country.macau": "Macau",
|
||||
"country.madagascar": "Madagascar",
|
||||
"country.malawi": "Malawi",
|
||||
"country.malaysia": "Malaysia",
|
||||
"country.maldives": "Maldives",
|
||||
"country.mali": "Mali",
|
||||
"country.malta": "Malta",
|
||||
"country.marshall_islands": "Marshall islands",
|
||||
"country.martinique": "Martinique",
|
||||
"country.mauritania": "Mauritania",
|
||||
"country.mauritius": "Mauritius",
|
||||
"country.mayotte": "Mayotte",
|
||||
"country.mexico": "Mexico",
|
||||
"country.micronesia": "Micronesia",
|
||||
"country.moldova": "Moldova",
|
||||
"country.monaco": "Monaco",
|
||||
"country.mongolia": "Mongolia",
|
||||
"country.montenegro": "Montenegro",
|
||||
"country.montserrat": "Montserrat",
|
||||
"country.morocco": "Morocco",
|
||||
"country.mozambique": "Mozambique",
|
||||
"country.myanmar": "Myanmar",
|
||||
"country.namibia": "Namibia",
|
||||
"country.nauru": "Nauru",
|
||||
"country.nepal": "Nepal",
|
||||
"country.netherlands": "Netherlands",
|
||||
"country.new_caledonia": "New caledonia",
|
||||
"country.new_zealand": "New zealand",
|
||||
"country.nicaragua": "Nicaragua",
|
||||
"country.niger": "Niger",
|
||||
"country.nigeria": "Nigeria",
|
||||
"country.niue": "Niue",
|
||||
"country.norfolk_island": "Norfolk island",
|
||||
"country.north_korea": "North korea",
|
||||
"country.north_macedonia": "North macedonia",
|
||||
"country.northern_mariana_islands": "Northern mariana islands",
|
||||
"country.norway": "Norway",
|
||||
"country.oman": "Oman",
|
||||
"country.pakistan": "Pakistan",
|
||||
"country.palau": "Palau",
|
||||
"country.palestine": "Palestine",
|
||||
"country.panama": "Panama",
|
||||
"country.papua_new_guinea": "Papua new guinea",
|
||||
"country.paraguay": "Paraguay",
|
||||
"country.peru": "Peru",
|
||||
"country.philippines": "Philippines",
|
||||
"country.pitcairn_islands": "Pitcairn islands",
|
||||
"country.poland": "Poland",
|
||||
"country.portugal": "Portugal",
|
||||
"country.puerto_rico": "Puerto rico",
|
||||
"country.qatar": "Qatar",
|
||||
"country.reunion": "Reunion",
|
||||
"country.romania": "Romania",
|
||||
"country.russia": "Russia",
|
||||
"country.rwanda": "Rwanda",
|
||||
"country.saint_barthelemy": "Saint barthelemy",
|
||||
"country.saint_helena": "Saint helena",
|
||||
"country.saint_kitts_and_nevis": "Saint kitts and nevis",
|
||||
"country.saint_lucia": "Saint lucia",
|
||||
"country.saint_martin": "Saint martin",
|
||||
"country.saint_pierre_and_miquelon": "Saint pierre and miquelon",
|
||||
"country.saint_vincent_and_the_grenadines": "Saint vincent and the grenadines",
|
||||
"country.samoa": "Samoa",
|
||||
"country.san_marino": "San marino",
|
||||
"country.sao_tome_and_principe": "Sao tome and principe",
|
||||
"country.saudi_arabia": "Saudi arabia",
|
||||
"country.senegal": "Senegal",
|
||||
"country.serbia": "Serbia",
|
||||
"country.seychelles": "Seychelles",
|
||||
"country.sierra_leone": "Sierra leone",
|
||||
"country.singapore": "Singapore",
|
||||
"country.sint_maarten": "Sint maarten",
|
||||
"country.slovakia": "Slovakia",
|
||||
"country.slovenia": "Slovenia",
|
||||
"country.solomon_islands": "Solomon islands",
|
||||
"country.somalia": "Somalia",
|
||||
"country.south_africa": "South africa",
|
||||
"country.south_georgia_and_south_sandwich_islands": "South georgia and south sandwich islands",
|
||||
"country.south_korea": "South korea",
|
||||
"country.south_sudan": "South sudan",
|
||||
"country.spain": "Spain",
|
||||
"country.sri_lanka": "Sri lanka",
|
||||
"country.sudan": "Sudan",
|
||||
"country.suriname": "Suriname",
|
||||
"country.svalbard_and_jan_mayen": "Svalbard and jan mayen",
|
||||
"country.sweden": "Sweden",
|
||||
"country.switzerland": "Switzerland",
|
||||
"country.syria": "Syria",
|
||||
"country.taiwan": "Taiwan",
|
||||
"country.tajikistan": "Tajikistan",
|
||||
"country.tanzania": "Tanzania",
|
||||
"country.thailand": "Thailand",
|
||||
"country.timor_leste": "Timor leste",
|
||||
"country.togo": "Togo",
|
||||
"country.tokelau": "Tokelau",
|
||||
"country.tonga": "Tonga",
|
||||
"country.trinidad_and_tobago": "Trinidad and tobago",
|
||||
"country.tunisia": "Tunisia",
|
||||
"country.turkey": "Turkey",
|
||||
"country.turkmenistan": "Turkmenistan",
|
||||
"country.turks_and_caicos_islands": "Turks and caicos islands",
|
||||
"country.tuvalu": "Tuvalu",
|
||||
"country.us_virgin_islands": "Us virgin islands",
|
||||
"country.uganda": "Uganda",
|
||||
"country.ukraine": "Ukraine",
|
||||
"country.united_arab_emirates": "United arab emirates",
|
||||
"country.united_kingdom": "United kingdom",
|
||||
"country.united_states": "United states",
|
||||
"country.uruguay": "Uruguay",
|
||||
"country.uzbekistan": "Uzbekistan",
|
||||
"country.vanuatu": "Vanuatu",
|
||||
"country.vatican_city": "Vatican city",
|
||||
"country.venezuela": "Venezuela",
|
||||
"country.vietnam": "Vietnam",
|
||||
"country.wallis_and_futuna": "Wallis and futuna",
|
||||
"country.western_sahara": "Western sahara",
|
||||
"country.yemen": "Yemen",
|
||||
"country.zambia": "Zambia",
|
||||
"country.zimbabwe": "Zimbabwe"
|
||||
}
|
||||
46
public/locales/fa/completionForm.json
Normal file
46
public/locales/fa/completionForm.json
Normal file
File diff suppressed because one or more lines are too long
182
public/locales/fa/country.json
Normal file
182
public/locales/fa/country.json
Normal file
@@ -0,0 +1,182 @@
|
||||
{
|
||||
"country.afghanistan": "افغانستان",
|
||||
"country.aland_islands": "جزایر آلند",
|
||||
"country.albania": "آلبانی",
|
||||
"country.algeria": "الجزایر",
|
||||
"country.american_samoa": "ساموای آمریکایی",
|
||||
"country.andorra": "آندورا",
|
||||
"country.angola": "آنگولا",
|
||||
"country.anguilla": "آنگویلا",
|
||||
"country.antarctica": "جنوبگان",
|
||||
"country.antigua_and_barbuda": "آنتیگوا و باربودا",
|
||||
"country.argentina": "آرژانتین",
|
||||
"country.armenia": "ارمنستان",
|
||||
"country.aruba": "آروبا",
|
||||
"country.australia": "استرالیا",
|
||||
"country.austria": "اتریش",
|
||||
"country.azerbaijan": "آذربایجان",
|
||||
"country.bahamas": "باهاما",
|
||||
"country.bahrain": "بحرین",
|
||||
"country.bangladesh": "بنگلادش",
|
||||
"country.barbados": "باربادوس",
|
||||
"country.belarus": "بلاروس",
|
||||
"country.belgium": "بلژیک",
|
||||
"country.belize": "بلیز",
|
||||
"country.benin": "بنین",
|
||||
"country.bermuda": "برمودا",
|
||||
"country.bhutan": "بوتان",
|
||||
"country.bolivia": "بولیوی",
|
||||
"country.bosnia_and_herzegovina": "بوسنی و هرزگوین",
|
||||
"country.botswana": "بوتسوانا",
|
||||
"country.brazil": "برزیل",
|
||||
"country.british_virgin_islands": "جزایر ویرجین بریتانیا",
|
||||
"country.brunei": "برونئی",
|
||||
"country.bulgaria": "بلغارستان",
|
||||
"country.burkina_faso": "بورکینافاسو",
|
||||
"country.burundi": "بوروندی",
|
||||
"country.cambodia": "کامبوج",
|
||||
"country.cameroon": "کامرون",
|
||||
"country.canada": "کانادا",
|
||||
"country.cape_verde": "کیپ ورد",
|
||||
"country.cayman_islands": "جزایر کیمن",
|
||||
"country.central_african_republic": "جمهوری آفریقای مرکزی",
|
||||
"country.chad": "چاد",
|
||||
"country.chile": "شیلی",
|
||||
"country.china": "چین",
|
||||
"country.colombia": "کلمبیا",
|
||||
"country.comoros": "کومور",
|
||||
"country.costa_rica": "کاستاریکا",
|
||||
"country.cote_divoire": "ساحل عاج",
|
||||
"country.croatia": "کرواسی",
|
||||
"country.cuba": "کوبا",
|
||||
"country.cyprus": "قبرس",
|
||||
"country.czech_republic": "جمهوری چک",
|
||||
"country.denmark": "دانمارک",
|
||||
"country.djibouti": "جیبوتی",
|
||||
"country.dominica": "دومینیکا",
|
||||
"country.dominican_republic": "جمهوری دومینیکن",
|
||||
"country.ecuador": "اکوادور",
|
||||
"country.egypt": "مصر",
|
||||
"country.el_salvador": "السالوادور",
|
||||
"country.equatorial_guinea": "گینه استوایی",
|
||||
"country.eritrea": "اریتره",
|
||||
"country.estonia": "استونی",
|
||||
"country.eswatini": "سوازیلند",
|
||||
"country.ethiopia": "اتیوپی",
|
||||
"country.fiji": "فیجی",
|
||||
"country.finland": "فنلاند",
|
||||
"country.france": "فرانسه",
|
||||
"country.gabon": "گابن",
|
||||
"country.gambia": "گامبیا",
|
||||
"country.georgia": "گرجستان",
|
||||
"country.germany": "آلمان",
|
||||
"country.ghana": "غنا",
|
||||
"country.greece": "یونان",
|
||||
"country.guatemala": "گواتمالا",
|
||||
"country.guinea": "گینه",
|
||||
"country.guinea_bissau": "گینه بیسائو",
|
||||
"country.guyana": "گویان",
|
||||
"country.haiti": "هائیتی",
|
||||
"country.honduras": "هندوراس",
|
||||
"country.hungary": "مجارستان",
|
||||
"country.iceland": "ایسلند",
|
||||
"country.india": "هندوستان",
|
||||
"country.indonesia": "اندونزی",
|
||||
"country.iran": "ایران",
|
||||
"country.iraq": "عراق",
|
||||
"country.ireland": "ایرلند",
|
||||
"country.israel": "اسرائیل",
|
||||
"country.italy": "ایتالیا",
|
||||
"country.jamaica": "جامائیکا",
|
||||
"country.japan": "ژاپن",
|
||||
"country.jordan": "اردن",
|
||||
"country.kazakhstan": "قزاقستان",
|
||||
"country.kenya": "کنیا",
|
||||
"country.kuwait": "کویت",
|
||||
"country.kyrgyzstan": "قرقیزستان",
|
||||
"country.laos": "لائوس",
|
||||
"country.latvia": "لتونی",
|
||||
"country.lebanon": "لبنان",
|
||||
"country.lesotho": "لسوتو",
|
||||
"country.liberia": "لیبریا",
|
||||
"country.libya": "لیبی",
|
||||
"country.luxembourg": "لوکزامبورگ",
|
||||
"country.malaysia": "مالزی",
|
||||
"country.maldives": "مالدیو",
|
||||
"country.mali": "مالی",
|
||||
"country.malta": "مالت",
|
||||
"country.mauritania": "موریتانی",
|
||||
"country.mauritius": "موریس",
|
||||
"country.mexico": "مکزیک",
|
||||
"country.moldova": "مولداوی",
|
||||
"country.monaco": "موناکو",
|
||||
"country.mongolia": "مغولستان",
|
||||
"country.morocco": "مراکش",
|
||||
"country.mozambique": "موزامبیک",
|
||||
"country.myanmar": "میانمار",
|
||||
"country.namibia": "نامیبیا",
|
||||
"country.nepal": "نپال",
|
||||
"country.netherlands": "هلند",
|
||||
"country.new_zealand": "نیوزیلند",
|
||||
"country.nicaragua": "نیکاراگوئه",
|
||||
"country.niger": "نیجر",
|
||||
"country.nigeria": "نیجریه",
|
||||
"country.north_korea": "کره شمالی",
|
||||
"country.north_macedonia": "مقدونیه",
|
||||
"country.norway": "نروژ",
|
||||
"country.oman": "عمان",
|
||||
"country.pakistan": "پاکستان",
|
||||
"country.palau": "پالائو",
|
||||
"country.panama": "پاناما",
|
||||
"country.papua_new_guinea": "پاپوآ گینه نو",
|
||||
"country.paraguay": "پاراگوئه",
|
||||
"country.peru": "پرو",
|
||||
"country.philippines": "فیلیپین",
|
||||
"country.poland": "لهستان",
|
||||
"country.portugal": "پرتغال",
|
||||
"country.qatar": "قطر",
|
||||
"country.romania": "رومانی",
|
||||
"country.russia": "روسیه",
|
||||
"country.rwanda": "رواندا",
|
||||
"country.saudi_arabia": "عربستان سعودی",
|
||||
"country.senegal": "سنگال",
|
||||
"country.serbia": "صربستان",
|
||||
"country.seychelles": "سیشل",
|
||||
"country.sierra_leone": "سیرالئون",
|
||||
"country.singapore": "سنگاپور",
|
||||
"country.south_africa": "آفریقای جنوبی",
|
||||
"country.south_korea": "کره جنوبی",
|
||||
"country.south_sudan": "سودان جنوبی",
|
||||
"country.spain": "اسپانیا",
|
||||
"country.sri_lanka": "سریلانکا",
|
||||
"country.sudan": "سودان",
|
||||
"country.suriname": "سورینام",
|
||||
"country.sweden": "سوئد",
|
||||
"country.switzerland": "سوئیس",
|
||||
"country.syria": "سوریه",
|
||||
"country.taiwan": "تایوان",
|
||||
"country.tajikistan": "تاجیکستان",
|
||||
"country.tanzania": "تانزانیا",
|
||||
"country.thailand": "تایلند",
|
||||
"country.timor_leste": "تیمور شرقی",
|
||||
"country.togo": "توگو",
|
||||
"country.tonga": "تونگا",
|
||||
"country.trinidad_and_tobago": "ترینیداد و توباگو",
|
||||
"country.tunisia": "تونس",
|
||||
"country.turkey": "ترکیه",
|
||||
"country.turkmenistan": "ترکمنستان",
|
||||
"country.tuvalu": "تووالو",
|
||||
"country.uganda": "اوگاندا",
|
||||
"country.ukraine": "اوکراین",
|
||||
"country.united_arab_emirates": "امارات متحده عربی",
|
||||
"country.united_kingdom": "انگلستان",
|
||||
"country.united_states": "ایالات متحده آمریکا",
|
||||
"country.uruguay": "اروگوئه",
|
||||
"country.uzbekistan": "ازبکستان",
|
||||
"country.vanuatu": "وانواتو",
|
||||
"country.venezuela": "ونزوئلا",
|
||||
"country.vietnam": "ویتنام",
|
||||
"country.yemen": "یمن",
|
||||
"country.zambia": "زامبیا",
|
||||
"country.zimbabwe": "زیمبابوه"
|
||||
}
|
||||
34
src/components/CountryFlag.tsx
Normal file
34
src/components/CountryFlag.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { Box, Typography } from '@mui/material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { countries } from '@/features/authentication/data/Countries';
|
||||
|
||||
interface CountryFlagProps {
|
||||
code: string;
|
||||
}
|
||||
|
||||
export function CountryFlag({ code }: CountryFlagProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const countryObj = code ? countries.find((c) => c.code === code) : null;
|
||||
|
||||
if (!countryObj) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const displayName = t(countryObj.label);
|
||||
const flagUrl = `https://flagcdn.com/w40/${countryObj.code.toLowerCase()}.png`;
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<img
|
||||
loading="lazy"
|
||||
src={flagUrl}
|
||||
alt={displayName}
|
||||
width="24"
|
||||
height="16"
|
||||
style={{ borderRadius: 0.25, border: '1px solid' }}
|
||||
/>
|
||||
<Typography variant="body2">{displayName}</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
32
src/features/authentication/api/userCompletion.ts
Normal file
32
src/features/authentication/api/userCompletion.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import {
|
||||
type SendEmailOtpPayload,
|
||||
type ConfirmEmailOtpPayload,
|
||||
type CompleteUserInfoPayload,
|
||||
type CompleteUserInfoResponse,
|
||||
type GenericApiResponse,
|
||||
} from '../types/completionFormApiTypes';
|
||||
import apiClient from '@/lib/apiClient';
|
||||
|
||||
export const sendEmailOtpApi = async (
|
||||
payload: SendEmailOtpPayload,
|
||||
): Promise<GenericApiResponse & { codeSentAnyway?: boolean }> => {
|
||||
const { data } = await apiClient.post('/User/SendEmailOtp', payload);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const confirmEmailOtpApi = async (
|
||||
payload: ConfirmEmailOtpPayload,
|
||||
): Promise<GenericApiResponse> => {
|
||||
const { data } = await apiClient.post('/User/ConfirmEmailOtp', payload);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const completeUserInformationApi = async (
|
||||
payload: CompleteUserInfoPayload,
|
||||
): Promise<CompleteUserInfoResponse> => {
|
||||
const { data } = await apiClient.post(
|
||||
'/User/CompleteUserInformation',
|
||||
payload,
|
||||
);
|
||||
return data;
|
||||
};
|
||||
72
src/features/authentication/components/DateOfBirth.tsx
Normal file
72
src/features/authentication/components/DateOfBirth.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { useMemo } from 'react';
|
||||
import {
|
||||
DatePicker,
|
||||
PickersDay,
|
||||
type PickersDayProps,
|
||||
} from '@mui/x-date-pickers';
|
||||
import { LocalizationProvider } from '@mui/x-date-pickers';
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
|
||||
import { enUS } from 'date-fns/locale';
|
||||
import { faIR as faIRJalali } from 'date-fns-jalali/locale';
|
||||
import { getDay } from 'date-fns-jalali';
|
||||
import { format as formatJalali } from 'date-fns-jalali';
|
||||
import { format } from 'date-fns';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { toLocaleDigits } from '@/utils/persianDigit';
|
||||
import { type DateOfBirthProps } from '../types/settingForm';
|
||||
|
||||
export default function DateOfBirth({ value, onChange }: DateOfBirthProps) {
|
||||
const { t, i18n } = useTranslation('completionForm');
|
||||
const isFarsi = i18n.language === 'fa' || i18n.language === 'fa-IR';
|
||||
|
||||
const { Adapter, locale, formatString, dayOfWeekFormatter } = useMemo(() => {
|
||||
if (isFarsi) {
|
||||
const persianDays = ['ی', 'د', 'س', 'چ', 'پ', 'ج', 'ش'];
|
||||
return {
|
||||
Adapter: AdapterDateFnsJalali,
|
||||
locale: faIRJalali,
|
||||
formatString: 'yyyy/MM/dd',
|
||||
dayOfWeekFormatter: (date: Date) => persianDays[getDay(date)],
|
||||
};
|
||||
}
|
||||
return {
|
||||
Adapter: AdapterDateFns,
|
||||
locale: enUS,
|
||||
formatString: 'MM/dd/yyyy',
|
||||
dayOfWeekFormatter: undefined,
|
||||
};
|
||||
}, [isFarsi]);
|
||||
|
||||
const CustomDay = (props: PickersDayProps) => {
|
||||
const dayNumber = isFarsi
|
||||
? formatJalali(props.day, 'dd')
|
||||
: format(props.day, 'dd');
|
||||
return (
|
||||
<PickersDay {...props}>
|
||||
{toLocaleDigits(dayNumber, i18n.language)}
|
||||
</PickersDay>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<LocalizationProvider dateAdapter={Adapter} adapterLocale={locale}>
|
||||
<DatePicker
|
||||
label={toLocaleDigits(t('completion.dateOfBirth'), i18n.language)}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
format={formatString}
|
||||
dayOfWeekFormatter={dayOfWeekFormatter}
|
||||
slots={{ day: CustomDay }}
|
||||
slotProps={{
|
||||
textField: {
|
||||
fullWidth: true,
|
||||
sx: {
|
||||
flex: '1 1 260px',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
);
|
||||
}
|
||||
184
src/features/authentication/components/EmailSection.tsx
Normal file
184
src/features/authentication/components/EmailSection.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
TextField,
|
||||
Box,
|
||||
Button,
|
||||
Switch,
|
||||
FormGroup,
|
||||
Typography,
|
||||
InputAdornment,
|
||||
IconButton,
|
||||
CircularProgress,
|
||||
} from '@mui/material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { TickCircle, Edit } from 'iconsax-react';
|
||||
import { Icon } from '@rkheftan/harmony-ui';
|
||||
import { type EmailSectionProps } from '../types/settingForm';
|
||||
|
||||
export function EmailSection({
|
||||
showEmail,
|
||||
setShowEmail,
|
||||
email,
|
||||
setEmail,
|
||||
correctEmail,
|
||||
codeSent,
|
||||
verificationCode,
|
||||
setVerificationCode,
|
||||
buttonState,
|
||||
getButtonLabel,
|
||||
handleSendCode,
|
||||
handleVerifyCode,
|
||||
emailVerified,
|
||||
loading,
|
||||
handleEditEmail,
|
||||
}: EmailSectionProps) {
|
||||
const { t } = useTranslation('completionForm');
|
||||
|
||||
const onSendCodeClick = () => {
|
||||
if (!correctEmail) return;
|
||||
handleSendCode();
|
||||
};
|
||||
|
||||
const handleToggleEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setShowEmail(e.target.checked);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormGroup>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
px: { xs: 2, sm: 0 },
|
||||
}}
|
||||
>
|
||||
<Switch checked={showEmail} onChange={handleToggleEmail} />
|
||||
<Typography
|
||||
sx={{ color: showEmail ? 'primary.main' : 'text.primary' }}
|
||||
>
|
||||
{t('completion.determineEmail')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</FormGroup>
|
||||
{showEmail && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
px: { xs: 2, sm: 0 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
justifyContent: { xs: 'center', sm: 'flex-start' },
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
label={t('completion.email')}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
error={email.length > 0 && !correctEmail}
|
||||
sx={{ flex: '1 1 260px' }}
|
||||
slotProps={{
|
||||
input: {
|
||||
startAdornment:
|
||||
!loading && emailVerified ? (
|
||||
<InputAdornment position="end">
|
||||
<Icon
|
||||
Component={TickCircle}
|
||||
size="medium"
|
||||
variant="Bold"
|
||||
color="success.main"
|
||||
/>
|
||||
</InputAdornment>
|
||||
) : null,
|
||||
endAdornment:
|
||||
buttonState === 'counting' ? (
|
||||
<InputAdornment position="start">
|
||||
<IconButton onClick={handleEditEmail}>
|
||||
<Icon
|
||||
Component={Edit}
|
||||
color="primary.main"
|
||||
size="medium"
|
||||
/>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
) : null,
|
||||
sx: {
|
||||
paddingLeft: buttonState === 'counting' ? 0 : undefined,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{!loading && !emailVerified && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="text"
|
||||
onClick={onSendCodeClick}
|
||||
sx={{
|
||||
minWidth: '140px',
|
||||
width: { xs: '100%', sm: '156px' },
|
||||
alignSelf: 'center',
|
||||
textTransform: 'none',
|
||||
}}
|
||||
>
|
||||
{getButtonLabel()}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
{email && (
|
||||
<Typography
|
||||
sx={{ color: correctEmail ? 'success.main' : 'error.main' }}
|
||||
variant="caption"
|
||||
>
|
||||
{correctEmail ? '' : t('completion.emailCorrectForm')}
|
||||
</Typography>
|
||||
)}
|
||||
{!emailVerified && codeSent && correctEmail && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
justifyContent: { xs: 'center', sm: 'flex-start' },
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
label={t('completion.verificationCode')}
|
||||
variant="outlined"
|
||||
value={verificationCode}
|
||||
onChange={(e) => setVerificationCode(e.target.value)}
|
||||
sx={{ flex: '1 1 260px' }}
|
||||
disabled={loading}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleVerifyCode}
|
||||
disabled={loading}
|
||||
sx={{
|
||||
width: { xs: '100%', sm: '156px' },
|
||||
border: 0.5,
|
||||
textTransform: 'none',
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<CircularProgress size={20} />
|
||||
) : (
|
||||
t('completion.checkCodeButton')
|
||||
)}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
250
src/features/authentication/components/PasswordSection.tsx
Normal file
250
src/features/authentication/components/PasswordSection.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
TextField,
|
||||
Box,
|
||||
IconButton,
|
||||
Switch,
|
||||
FormGroup,
|
||||
Typography,
|
||||
InputAdornment,
|
||||
} from '@mui/material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { TickCircle, Eye, EyeSlash, CloseCircle } from 'iconsax-react';
|
||||
import { PasswordValidationItem } from './PasswordValidation';
|
||||
import { Icon } from '@rkheftan/harmony-ui';
|
||||
import { type PasswordSectionProps } from '../types/settingForm';
|
||||
|
||||
export function PasswordSection({
|
||||
showPasswordSection,
|
||||
setShowPasswordSection,
|
||||
password,
|
||||
setPassword,
|
||||
confirmPassword,
|
||||
setConfirmPassword,
|
||||
matchPassword,
|
||||
hasNumber,
|
||||
hasMinLength,
|
||||
hasUpperAndLower,
|
||||
hasSpecialChar,
|
||||
validPassword,
|
||||
showValidations,
|
||||
}: PasswordSectionProps) {
|
||||
const { t } = useTranslation('completionForm');
|
||||
const [showPasswordText, setShowPasswordText] = useState(false);
|
||||
const [showPasswordRepetitionText, setShowPasswordRepetitionText] =
|
||||
useState(false);
|
||||
|
||||
const handleTogglePasswordSection = (
|
||||
e: React.ChangeEvent<HTMLInputElement>,
|
||||
) => {
|
||||
setShowPasswordSection(e.target.checked);
|
||||
};
|
||||
|
||||
const handleTogglePasswordEye = () => setShowPasswordText((prev) => !prev);
|
||||
const handleTogglePasswordRepetitionEye = () =>
|
||||
setShowPasswordRepetitionText((prev) => !prev);
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormGroup>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 0.5,
|
||||
px: { xs: 2, sm: -4 },
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Switch
|
||||
checked={showPasswordSection}
|
||||
onChange={handleTogglePasswordSection}
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
color: showPasswordSection ? 'primary.main' : 'text.primary',
|
||||
}}
|
||||
>
|
||||
{t('completion.determinePassword')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</FormGroup>
|
||||
|
||||
{showPasswordSection && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
px: { xs: 2, sm: 0 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
justifyContent: { xs: 'center', sm: 'flex-start' },
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
label={t('completion.password')}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
variant="outlined"
|
||||
type={showPasswordText ? 'text' : 'password'}
|
||||
sx={{
|
||||
flex: '1 1 260px',
|
||||
'& .MuiInputBase-input': {
|
||||
pr: 8, // Increased padding to accommodate both icons
|
||||
},
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
minWidth: '64px', // Adjusted to fit both icons
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
onClick={handleTogglePasswordEye}
|
||||
sx={{ p: 0.5 }}
|
||||
>
|
||||
{showPasswordText ? (
|
||||
<Icon
|
||||
Component={Eye}
|
||||
color="primary.main"
|
||||
size="medium"
|
||||
/>
|
||||
) : (
|
||||
<Icon
|
||||
Component={EyeSlash}
|
||||
size="medium"
|
||||
color="primary.main"
|
||||
/>
|
||||
)}
|
||||
</IconButton>
|
||||
{validPassword && (
|
||||
<Icon
|
||||
Component={TickCircle}
|
||||
size="medium"
|
||||
color="success.main"
|
||||
variant="Bold"
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label={t('completion.passwordRepetition')}
|
||||
variant="outlined"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
error={confirmPassword.length > 0 && !matchPassword}
|
||||
helperText={
|
||||
confirmPassword.length > 0 && !matchPassword
|
||||
? t('completion.notCompatibility')
|
||||
: ' '
|
||||
}
|
||||
type={showPasswordRepetitionText ? 'text' : 'password'}
|
||||
sx={{
|
||||
flex: '1 1 260px',
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
minWidth: '64px',
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
onClick={handleTogglePasswordRepetitionEye}
|
||||
sx={{ p: 0.5 }}
|
||||
>
|
||||
{showPasswordRepetitionText ? (
|
||||
<Icon
|
||||
Component={Eye}
|
||||
color="primary.main"
|
||||
size="medium"
|
||||
/>
|
||||
) : (
|
||||
<Icon
|
||||
Component={EyeSlash}
|
||||
size="medium"
|
||||
color="primary.main"
|
||||
/>
|
||||
)}
|
||||
</IconButton>
|
||||
{confirmPassword.length > 0 && (
|
||||
<Icon
|
||||
Component={matchPassword ? TickCircle : CloseCircle}
|
||||
size="medium"
|
||||
color={matchPassword ? 'success.main' : 'error.main'}
|
||||
variant="Bold"
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{password && showValidations && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
justifyContent: { xs: 'center', sm: 'flex-start' },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
flex: '1 1 260px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<PasswordValidationItem
|
||||
isValid={hasNumber}
|
||||
label={t('completion.hasNumber')}
|
||||
/>
|
||||
<PasswordValidationItem
|
||||
isValid={hasMinLength}
|
||||
label={t('completion.hasMinLength')}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
flex: '1 1 260px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<PasswordValidationItem
|
||||
isValid={hasUpperAndLower}
|
||||
label={t('completion.hasUpperAndLower')}
|
||||
/>
|
||||
<PasswordValidationItem
|
||||
isValid={hasSpecialChar}
|
||||
label={t('completion.hasSpecialChar')}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { Box, Typography } from '@mui/material';
|
||||
import { TickCircle } from 'iconsax-react';
|
||||
import { Icon } from '@rkheftan/harmony-ui';
|
||||
import { type ValidationItemProps } from '../types/settingForm';
|
||||
|
||||
export function PasswordValidationItem({
|
||||
isValid,
|
||||
label,
|
||||
}: ValidationItemProps) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
mb: 0.5,
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
Component={TickCircle}
|
||||
size="small"
|
||||
color={isValid ? 'success.main' : 'primary.main'}
|
||||
variant={isValid ? 'Bold' : 'Outline'}
|
||||
/>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.primary"
|
||||
sx={{
|
||||
wordBreak: 'break-word',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
168
src/features/authentication/components/PersonalInfoFields.tsx
Normal file
168
src/features/authentication/components/PersonalInfoFields.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import {
|
||||
TextField,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
Box,
|
||||
Autocomplete,
|
||||
type SelectChangeEvent,
|
||||
} from '@mui/material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Woman, Man } from 'iconsax-react';
|
||||
import DateOfBirth from './DateOfBirth';
|
||||
import { countries } from '../data/Countries';
|
||||
import { CountryFlag } from '@/components/CountryFlag';
|
||||
import { Icon } from '@rkheftan/harmony-ui';
|
||||
import { type PersonalInfoFieldsProps } from '../types/settingForm';
|
||||
import { Gender } from '../types/settingForm';
|
||||
|
||||
export function PersonalInfoFields({
|
||||
firstName,
|
||||
setFirstName,
|
||||
lastName,
|
||||
setLastName,
|
||||
nationalId,
|
||||
setNationalId,
|
||||
birthDate,
|
||||
setBirthDate,
|
||||
sex,
|
||||
setSex,
|
||||
country,
|
||||
setCountry,
|
||||
}: PersonalInfoFieldsProps) {
|
||||
const { t } = useTranslation('completionForm');
|
||||
|
||||
const countryOptions = countries.map((c) => ({
|
||||
code: c.code,
|
||||
label: t(c.label, { ns: 'countries' }),
|
||||
}));
|
||||
|
||||
const currentCountry = countryOptions.find((c) => c.code === country) || null;
|
||||
|
||||
const handleChangeSex = (e: SelectChangeEvent<Gender>) => {
|
||||
setSex(e.target.value as Gender);
|
||||
};
|
||||
|
||||
const genderOptions = [
|
||||
{
|
||||
value: Gender.Female,
|
||||
icon: Woman,
|
||||
label: t('completion.woman'),
|
||||
color: '#F50057',
|
||||
},
|
||||
{
|
||||
value: Gender.Male,
|
||||
icon: Man,
|
||||
label: t('completion.man'),
|
||||
color: '#0091EA',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
width: '100%',
|
||||
px: { xs: 2, sm: 4, md: 1 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
justifyContent: { xs: 'center', sm: 'flex-start' },
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
label={t('completion.name')}
|
||||
placeholder={t('completion.name')}
|
||||
variant="outlined"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
sx={{ flex: '1 1 260px' }}
|
||||
/>
|
||||
<TextField
|
||||
label={t('completion.familyName')}
|
||||
placeholder={t('completion.familyName')}
|
||||
variant="outlined"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
sx={{ flex: '1 1 260px' }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
justifyContent: { xs: 'center', sm: 'flex-start' },
|
||||
}}
|
||||
>
|
||||
<FormControl sx={{ flex: '1 1 260px' }}>
|
||||
<InputLabel>{t('completion.gender')}</InputLabel>
|
||||
<Select
|
||||
value={sex}
|
||||
label={t('completion.gender')}
|
||||
onChange={handleChangeSex}
|
||||
>
|
||||
{genderOptions.map((g) => (
|
||||
<MenuItem key={g.value} value={g.value}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Icon Component={g.icon} size="small" color={g.color} />
|
||||
{g.label}
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<TextField
|
||||
label={t('completion.optionalNationalCode')}
|
||||
placeholder={t('completion.optionalNationalCode')}
|
||||
value={nationalId}
|
||||
onChange={(e) => setNationalId(e.target.value)}
|
||||
variant="outlined"
|
||||
sx={{ flex: '1 1 260px' }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
justifyContent: { xs: 'center', sm: 'flex-start' },
|
||||
}}
|
||||
>
|
||||
<Autocomplete
|
||||
sx={{ flex: '1 1 260px' }}
|
||||
options={countryOptions}
|
||||
getOptionLabel={(option) => option.label}
|
||||
value={currentCountry}
|
||||
onChange={(_, newValue) => setCountry(newValue?.code || '')}
|
||||
renderOption={(props, option) => (
|
||||
<Box component="li" {...props} key={option.code}>
|
||||
<CountryFlag code={option.code} />
|
||||
{option.label}
|
||||
</Box>
|
||||
)}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label={t('completion.country')} />
|
||||
)}
|
||||
clearOnEscape
|
||||
/>
|
||||
|
||||
<Box sx={{ flex: '1 1 260px' }}>
|
||||
<DateOfBirth value={birthDate} onChange={setBirthDate} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
89
src/features/authentication/components/SubmitSection.tsx
Normal file
89
src/features/authentication/components/SubmitSection.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Typography,
|
||||
Link,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
} from '@mui/material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { type SubmitProps } from '../types/settingForm';
|
||||
|
||||
export function SubmitSection({ onSubmit, loading, error }: SubmitProps) {
|
||||
const { t, i18n } = useTranslation('completionForm');
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
|
||||
const handleOpenDialog = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
setOpenDialog(true);
|
||||
};
|
||||
|
||||
const agreementText = t('completion.agreement');
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
px: { xs: 2, sm: 0 },
|
||||
mb: 2,
|
||||
justifyContent: { xs: 'center', sm: 'flex-start' },
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
flex: '1 1 260px',
|
||||
maxWidth: 'calc(100% - 263px)',
|
||||
minWidth: '260px',
|
||||
}}
|
||||
color="text.primary"
|
||||
>
|
||||
{t('completion.agreementPart1')}
|
||||
<Link href="#" onClick={handleOpenDialog}>
|
||||
{t('completion.agreementLinkText')}
|
||||
</Link>
|
||||
{t('completion.agreementPart2')}
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={onSubmit}
|
||||
disabled={loading}
|
||||
sx={{
|
||||
width: { xs: '100%', sm: '247px' },
|
||||
alignSelf: { xs: 'stretch', sm: 'center' },
|
||||
textTransform: 'none',
|
||||
}}
|
||||
>
|
||||
{loading
|
||||
? t('completion.submitting')
|
||||
: t('completion.registerButton')}
|
||||
</Button>
|
||||
{error && <Typography color="error">{error}</Typography>}
|
||||
</Box>
|
||||
|
||||
<Dialog
|
||||
open={openDialog}
|
||||
onClose={() => setOpenDialog(false)}
|
||||
fullWidth
|
||||
maxWidth="md"
|
||||
dir={i18n.language.startsWith('fa') ? 'rtl' : 'ltr'}
|
||||
>
|
||||
<DialogTitle>
|
||||
{t('completion.rules') || t('completion.rules')}
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent
|
||||
dividers
|
||||
sx={{ whiteSpace: 'pre-line', fontSize: '14px' }}
|
||||
>
|
||||
{agreementText}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
329
src/features/authentication/components/UserCompletionForm.tsx
Normal file
329
src/features/authentication/components/UserCompletionForm.tsx
Normal file
@@ -0,0 +1,329 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Box, Typography } from '@mui/material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Logo from '@/components/Logo';
|
||||
import { PersonalInfoFields } from './PersonalInfoFields';
|
||||
import { PasswordSection } from './PasswordSection';
|
||||
import { EmailSection } from './EmailSection';
|
||||
import { SubmitSection } from './SubmitSection';
|
||||
import { useToast } from '@rkheftan/harmony-ui';
|
||||
import { regex } from '../../../utils/regex';
|
||||
import { toLocaleDigits } from '../../../utils/persianDigit';
|
||||
import i18n from '@/config/i18n';
|
||||
import { Gender } from '../types/settingForm';
|
||||
import { useApi } from '@/hooks/useApi';
|
||||
import {
|
||||
sendEmailOtpApi,
|
||||
confirmEmailOtpApi,
|
||||
completeUserInformationApi,
|
||||
} from '../api/userCompletion';
|
||||
import {
|
||||
type SendEmailOtpPayload,
|
||||
type ConfirmEmailOtpPayload,
|
||||
type CompleteUserInfoPayload,
|
||||
} from '../types/completionFormApiTypes';
|
||||
import { type ApiResponse } from '@/types/apiResponse';
|
||||
|
||||
export function UserCompletionForm() {
|
||||
const { t } = useTranslation('completionForm');
|
||||
const showToast = useToast();
|
||||
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
const [nationalId, setNationalId] = useState('');
|
||||
const [birthDate, setBirthDate] = useState<Date | null>(null);
|
||||
const [sex, setSex] = useState<Gender>(Gender.Female);
|
||||
const [country, setCountry] = useState('');
|
||||
const [showPasswordSection, setShowPasswordSection] = useState(false);
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [showEmail, setShowEmail] = useState(false);
|
||||
const [email, setEmail] = useState('');
|
||||
const [verificationCode, setVerificationCode] = useState('');
|
||||
|
||||
const [codeSent, setCodeSent] = useState(false);
|
||||
const [buttonState, setButtonState] = useState<'default' | 'counting'>(
|
||||
'default',
|
||||
);
|
||||
const [countdown, setCountdown] = useState(0);
|
||||
const [emailVerified, setEmailVerified] = useState(false);
|
||||
const [showPasswordValidations, setShowPasswordValidations] = useState(false);
|
||||
|
||||
const {
|
||||
hasNumber,
|
||||
hasMinLength,
|
||||
hasUpperAndLower,
|
||||
hasSpecialChar,
|
||||
validPassword,
|
||||
correctEmail,
|
||||
} = regex(password, email);
|
||||
const matchPassword = password === confirmPassword;
|
||||
|
||||
const { execute: sendCode, data: sendCodeData } = useApi(
|
||||
async (payload: SendEmailOtpPayload) => {
|
||||
const result = await sendEmailOtpApi(payload);
|
||||
const conformingResult: ApiResponse = {
|
||||
...result,
|
||||
errorCode: result.errorCode || 0,
|
||||
validations: [],
|
||||
};
|
||||
return { data: conformingResult };
|
||||
},
|
||||
);
|
||||
|
||||
const {
|
||||
execute: verifyCode,
|
||||
loading: isVerifyingCode,
|
||||
data: verifyCodeData,
|
||||
} = useApi(async (payload: ConfirmEmailOtpPayload) => {
|
||||
const result = await confirmEmailOtpApi(payload);
|
||||
const conformingResult: ApiResponse = {
|
||||
...result,
|
||||
errorCode: result.errorCode || 0,
|
||||
validations: [],
|
||||
};
|
||||
return { data: conformingResult };
|
||||
});
|
||||
|
||||
const {
|
||||
execute: submitForm,
|
||||
loading: isSubmitting,
|
||||
error: submitError,
|
||||
data: submitData,
|
||||
} = useApi(async (payload: CompleteUserInfoPayload) => {
|
||||
const result = await completeUserInformationApi(payload);
|
||||
const conformingResult: ApiResponse = {
|
||||
...result,
|
||||
errorCode: result.errorCode || 0,
|
||||
validations: [],
|
||||
};
|
||||
return { data: conformingResult };
|
||||
});
|
||||
|
||||
const getErrorMessage = (error: unknown): string | null => {
|
||||
if (!error) return null;
|
||||
if (error instanceof Error) return error.message;
|
||||
return String(error);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (sendCodeData) {
|
||||
if (sendCodeData.success) {
|
||||
showToast({
|
||||
message: sendCodeData.message || t('completion.successfullCodeSent'),
|
||||
severity: 'success',
|
||||
});
|
||||
setCodeSent(true);
|
||||
setButtonState('counting');
|
||||
setCountdown(120);
|
||||
} else {
|
||||
showToast({
|
||||
message: sendCodeData.message || t('completion.problem'),
|
||||
severity: 'error',
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [sendCodeData, showToast, t]);
|
||||
|
||||
useEffect(() => {
|
||||
if (verifyCodeData) {
|
||||
if (verifyCodeData.success) {
|
||||
setEmailVerified(true);
|
||||
showToast({
|
||||
message: verifyCodeData.message || t('completion.codeVerified'),
|
||||
severity: 'success',
|
||||
});
|
||||
} else {
|
||||
showToast({
|
||||
message: verifyCodeData.message || t('completion.invalidCode'),
|
||||
severity: 'error',
|
||||
});
|
||||
setEmailVerified(false);
|
||||
}
|
||||
}
|
||||
}, [verifyCodeData, showToast, t]);
|
||||
|
||||
useEffect(() => {
|
||||
if (submitData) {
|
||||
showToast({
|
||||
message:
|
||||
submitData.message ||
|
||||
t(
|
||||
submitData.success
|
||||
? 'completion.submitSuccess'
|
||||
: 'completion.submitError',
|
||||
),
|
||||
severity: submitData.success ? 'success' : 'error',
|
||||
});
|
||||
} else if (submitError) {
|
||||
showToast({
|
||||
message: getErrorMessage(submitError) || t('completion.problem'),
|
||||
severity: 'error',
|
||||
});
|
||||
}
|
||||
}, [submitData, submitError, showToast, t]);
|
||||
|
||||
useEffect(() => {
|
||||
setShowPasswordValidations(password ? !validPassword : false);
|
||||
}, [password, validPassword]);
|
||||
|
||||
useEffect(() => {
|
||||
let timer: NodeJS.Timeout;
|
||||
if (buttonState === 'counting' && countdown > 0) {
|
||||
timer = setInterval(() => {
|
||||
setCountdown((prev) => {
|
||||
if (prev <= 1) {
|
||||
setButtonState('default');
|
||||
clearInterval(timer);
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
return () => clearInterval(timer);
|
||||
}, [buttonState, countdown]);
|
||||
|
||||
const handleSendCode = () => {
|
||||
sendCode({ email });
|
||||
};
|
||||
|
||||
const handleVerifyCode = () => {
|
||||
if (!verificationCode.trim()) {
|
||||
showToast({
|
||||
message: 'Please enter the verification code',
|
||||
severity: 'warning',
|
||||
});
|
||||
return;
|
||||
}
|
||||
verifyCode({ email, otpCode: verificationCode });
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
submitForm({
|
||||
userId: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
|
||||
firstName,
|
||||
lastName,
|
||||
gender: sex,
|
||||
nationalId,
|
||||
savePassword: showPasswordSection,
|
||||
password: showPasswordSection ? password : undefined,
|
||||
saveEmail: showEmail,
|
||||
email: showEmail ? email : undefined,
|
||||
birthDate,
|
||||
country,
|
||||
});
|
||||
};
|
||||
|
||||
const getButtonLabel = () => {
|
||||
if (buttonState === 'counting') {
|
||||
const m = String(Math.floor(countdown / 60)).padStart(2, '0');
|
||||
const s = String(countdown % 60).padStart(2, '0');
|
||||
return toLocaleDigits(`${m}:${s}`, i18n.language);
|
||||
}
|
||||
return t('completion.vericationCodeButton');
|
||||
};
|
||||
|
||||
const handleEditEmail = () => {
|
||||
setButtonState('default');
|
||||
setCodeSent(false);
|
||||
setEmailVerified(false);
|
||||
setVerificationCode('');
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: 'background.default',
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
p: { xs: 1, sm: 2, md: 3 },
|
||||
}}
|
||||
>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<Logo />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: 730,
|
||||
backgroundColor: 'background.paper',
|
||||
border: '1px solid #ccc',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
px: { xs: 2, sm: 4, md: 6 },
|
||||
py: { xs: 3, sm: 4 },
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="h5" color="text.primary">
|
||||
{t('completion.title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('completion.description')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<PersonalInfoFields
|
||||
firstName={firstName}
|
||||
setFirstName={setFirstName}
|
||||
lastName={lastName}
|
||||
setLastName={setLastName}
|
||||
nationalId={nationalId}
|
||||
setNationalId={setNationalId}
|
||||
birthDate={birthDate}
|
||||
setBirthDate={setBirthDate}
|
||||
sex={sex}
|
||||
setSex={setSex}
|
||||
country={country}
|
||||
setCountry={setCountry}
|
||||
/>
|
||||
|
||||
<PasswordSection
|
||||
showPasswordSection={showPasswordSection}
|
||||
setShowPasswordSection={setShowPasswordSection}
|
||||
password={password}
|
||||
setPassword={setPassword}
|
||||
confirmPassword={confirmPassword}
|
||||
setConfirmPassword={setConfirmPassword}
|
||||
matchPassword={matchPassword}
|
||||
hasNumber={hasNumber}
|
||||
hasMinLength={hasMinLength}
|
||||
hasUpperAndLower={hasUpperAndLower}
|
||||
hasSpecialChar={hasSpecialChar}
|
||||
validPassword={validPassword}
|
||||
showValidations={showPasswordValidations}
|
||||
/>
|
||||
|
||||
<EmailSection
|
||||
showEmail={showEmail}
|
||||
setShowEmail={setShowEmail}
|
||||
email={email}
|
||||
setEmail={setEmail}
|
||||
correctEmail={correctEmail}
|
||||
codeSent={codeSent}
|
||||
verificationCode={verificationCode}
|
||||
setVerificationCode={setVerificationCode}
|
||||
buttonState={buttonState}
|
||||
getButtonLabel={getButtonLabel}
|
||||
handleSendCode={handleSendCode}
|
||||
handleVerifyCode={handleVerifyCode}
|
||||
emailVerified={emailVerified}
|
||||
loading={isVerifyingCode}
|
||||
handleEditEmail={handleEditEmail}
|
||||
/>
|
||||
|
||||
<SubmitSection
|
||||
onSubmit={handleSubmit}
|
||||
loading={isSubmitting}
|
||||
error={getErrorMessage(submitError)}
|
||||
success={!!submitData?.success}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
271
src/features/authentication/data/Countries.ts
Normal file
271
src/features/authentication/data/Countries.ts
Normal file
@@ -0,0 +1,271 @@
|
||||
export interface Country {
|
||||
code: string;
|
||||
label: string;
|
||||
phone: string;
|
||||
}
|
||||
|
||||
export interface Country {
|
||||
code: string;
|
||||
label: string;
|
||||
phone: string;
|
||||
}
|
||||
|
||||
export const countries: readonly Country[] = [
|
||||
{ code: 'AF', label: 'country.afghanistan', phone: '+93' },
|
||||
{ code: 'AX', label: 'country.aland_islands', phone: '+358' },
|
||||
{ code: 'AL', label: 'country.albania', phone: '+355' },
|
||||
{ code: 'DZ', label: 'country.algeria', phone: '+213' },
|
||||
{ code: 'AS', label: 'country.american_samoa', phone: '+1684' },
|
||||
{ code: 'AD', label: 'country.andorra', phone: '+376' },
|
||||
{ code: 'AO', label: 'country.angola', phone: '+244' },
|
||||
{ code: 'AI', label: 'country.anguilla', phone: '+1264' },
|
||||
{ code: 'AQ', label: 'country.antarctica', phone: '+672' },
|
||||
{ code: 'AG', label: 'country.antigua_and_barbuda', phone: '+1268' },
|
||||
{ code: 'AR', label: 'country.argentina', phone: '+54' },
|
||||
{ code: 'AM', label: 'country.armenia', phone: '+374' },
|
||||
{ code: 'AW', label: 'country.aruba', phone: '+297' },
|
||||
{ code: 'AU', label: 'country.australia', phone: '+61' },
|
||||
{ code: 'AT', label: 'country.austria', phone: '+43' },
|
||||
{ code: 'AZ', label: 'country.azerbaijan', phone: '+994' },
|
||||
{ code: 'BS', label: 'country.bahamas', phone: '+1242' },
|
||||
{ code: 'BH', label: 'country.bahrain', phone: '+973' },
|
||||
{ code: 'BD', label: 'country.bangladesh', phone: '+880' },
|
||||
{ code: 'BB', label: 'country.barbados', phone: '+1246' },
|
||||
{ code: 'BY', label: 'country.belarus', phone: '+375' },
|
||||
{ code: 'BE', label: 'country.belgium', phone: '+32' },
|
||||
{ code: 'BZ', label: 'country.belize', phone: '+501' },
|
||||
{ code: 'BJ', label: 'country.benin', phone: '+229' },
|
||||
{ code: 'BM', label: 'country.bermuda', phone: '+1441' },
|
||||
{ code: 'BT', label: 'country.bhutan', phone: '+975' },
|
||||
{ code: 'BO', label: 'country.bolivia', phone: '+591' },
|
||||
{ code: 'BA', label: 'country.bosnia_and_herzegovina', phone: '+387' },
|
||||
{ code: 'BW', label: 'country.botswana', phone: '+267' },
|
||||
{ code: 'BR', label: 'country.brazil', phone: '+55' },
|
||||
{
|
||||
code: 'IO',
|
||||
label: 'country.british_indian_ocean_territory',
|
||||
phone: '+246',
|
||||
},
|
||||
{ code: 'VG', label: 'country.british_virgin_islands', phone: '+1284' },
|
||||
{ code: 'BN', label: 'country.brunei', phone: '+673' },
|
||||
{ code: 'BG', label: 'country.bulgaria', phone: '+359' },
|
||||
{ code: 'BF', label: 'country.burkina_faso', phone: '+226' },
|
||||
{ code: 'BI', label: 'country.burundi', phone: '+257' },
|
||||
{ code: 'KH', label: 'country.cambodia', phone: '+855' },
|
||||
{ code: 'CM', label: 'country.cameroon', phone: '+237' },
|
||||
{ code: 'CA', label: 'country.canada', phone: '+1' },
|
||||
{ code: 'CV', label: 'country.cape_verde', phone: '+238' },
|
||||
{ code: 'KY', label: 'country.cayman_islands', phone: '+1345' },
|
||||
{ code: 'CF', label: 'country.central_african_republic', phone: '+236' },
|
||||
{ code: 'TD', label: 'country.chad', phone: '+235' },
|
||||
{ code: 'CL', label: 'country.chile', phone: '+56' },
|
||||
{ code: 'CN', label: 'country.china', phone: '+86' },
|
||||
{ code: 'CX', label: 'country.christmas_island', phone: '+61' },
|
||||
{ code: 'CC', label: 'country.cocos_keeling_islands', phone: '+61' },
|
||||
{ code: 'CO', label: 'country.colombia', phone: '+57' },
|
||||
{ code: 'KM', label: 'country.comoros', phone: '+269' },
|
||||
{ code: 'CG', label: 'country.congo_brazzaville', phone: '+242' },
|
||||
{ code: 'CD', label: 'country.congo_kinshasa', phone: '+243' },
|
||||
{ code: 'CK', label: 'country.cook_islands', phone: '+682' },
|
||||
{ code: 'CR', label: 'country.costa_rica', phone: '+506' },
|
||||
{ code: 'CI', label: 'country.cote_divoire', phone: '+225' },
|
||||
{ code: 'HR', label: 'country.croatia', phone: '+385' },
|
||||
{ code: 'CU', label: 'country.cuba', phone: '+53' },
|
||||
{ code: 'CW', label: 'country.curacao', phone: '+599' },
|
||||
{ code: 'CY', label: 'country.cyprus', phone: '+357' },
|
||||
{ code: 'CZ', label: 'country.czech_republic', phone: '+420' },
|
||||
{ code: 'DK', label: 'country.denmark', phone: '+45' },
|
||||
{ code: 'DJ', label: 'country.djibouti', phone: '+253' },
|
||||
{ code: 'DM', label: 'country.dominica', phone: '+1767' },
|
||||
{ code: 'DO', label: 'country.dominican_republic', phone: '+1' },
|
||||
{ code: 'EC', label: 'country.ecuador', phone: '+593' },
|
||||
{ code: 'EG', label: 'country.egypt', phone: '+20' },
|
||||
{ code: 'SV', label: 'country.el_salvador', phone: '+503' },
|
||||
{ code: 'GQ', label: 'country.equatorial_guinea', phone: '+240' },
|
||||
{ code: 'ER', label: 'country.eritrea', phone: '+291' },
|
||||
{ code: 'EE', label: 'country.estonia', phone: '+372' },
|
||||
{ code: 'SZ', label: 'country.eswatini', phone: '+268' },
|
||||
{ code: 'ET', label: 'country.ethiopia', phone: '+251' },
|
||||
{ code: 'FK', label: 'country.falkland_islands', phone: '+500' },
|
||||
{ code: 'FO', label: 'country.faroe_islands', phone: '+298' },
|
||||
{ code: 'FJ', label: 'country.fiji', phone: '+679' },
|
||||
{ code: 'FI', label: 'country.finland', phone: '+358' },
|
||||
{ code: 'FR', label: 'country.france', phone: '+33' },
|
||||
{ code: 'GF', label: 'country.french_guiana', phone: '+594' },
|
||||
{ code: 'PF', label: 'country.french_polynesia', phone: '+689' },
|
||||
{ code: 'GA', label: 'country.gabon', phone: '+241' },
|
||||
{ code: 'GM', label: 'country.gambia', phone: '+220' },
|
||||
{ code: 'GE', label: 'country.georgia', phone: '+995' },
|
||||
{ code: 'DE', label: 'country.germany', phone: '+49' },
|
||||
{ code: 'GH', label: 'country.ghana', phone: '+233' },
|
||||
{ code: 'GI', label: 'country.gibraltar', phone: '+350' },
|
||||
{ code: 'GR', label: 'country.greece', phone: '+30' },
|
||||
{ code: 'GL', label: 'country.greenland', phone: '+299' },
|
||||
{ code: 'GD', label: 'country.grenada', phone: '+1473' },
|
||||
{ code: 'GP', label: 'country.guadeloupe', phone: '+590' },
|
||||
{ code: 'GU', label: 'country.guam', phone: '+1671' },
|
||||
{ code: 'GT', label: 'country.guatemala', phone: '+502' },
|
||||
{ code: 'GG', label: 'country.guernsey', phone: '+44' },
|
||||
{ code: 'GN', label: 'country.guinea', phone: '+224' },
|
||||
{ code: 'GW', label: 'country.guinea_bissau', phone: '+245' },
|
||||
{ code: 'GY', label: 'country.guyana', phone: '+592' },
|
||||
{ code: 'HT', label: 'country.haiti', phone: '+509' },
|
||||
{ code: 'HN', label: 'country.honduras', phone: '+504' },
|
||||
{ code: 'HK', label: 'country.hong_kong', phone: '+852' },
|
||||
{ code: 'HU', label: 'country.hungary', phone: '+36' },
|
||||
{ code: 'IS', label: 'country.iceland', phone: '+354' },
|
||||
{ code: 'IN', label: 'country.india', phone: '+91' },
|
||||
{ code: 'ID', label: 'country.indonesia', phone: '+62' },
|
||||
{ code: 'IR', label: 'country.iran', phone: '+98' },
|
||||
{ code: 'IQ', label: 'country.iraq', phone: '+964' },
|
||||
{ code: 'IE', label: 'country.ireland', phone: '+353' },
|
||||
{ code: 'IM', label: 'country.isle_of_man', phone: '+44' },
|
||||
{ code: 'IL', label: 'country.israel', phone: '+972' },
|
||||
{ code: 'IT', label: 'country.italy', phone: '+39' },
|
||||
{ code: 'JM', label: 'country.jamaica', phone: '+1876' },
|
||||
{ code: 'JP', label: 'country.japan', phone: '+81' },
|
||||
{ code: 'JE', label: 'country.jersey', phone: '+44' },
|
||||
{ code: 'JO', label: 'country.jordan', phone: '+962' },
|
||||
{ code: 'KZ', label: 'country.kazakhstan', phone: '+7' },
|
||||
{ code: 'KE', label: 'country.kenya', phone: '+254' },
|
||||
{ code: 'KI', label: 'country.kiribati', phone: '+686' },
|
||||
{ code: 'XK', label: 'country.kosovo', phone: '+383' },
|
||||
{ code: 'KW', label: 'country.kuwait', phone: '+965' },
|
||||
{ code: 'KG', label: 'country.kyrgyzstan', phone: '+996' },
|
||||
{ code: 'LA', label: 'country.laos', phone: '+856' },
|
||||
{ code: 'LV', label: 'country.latvia', phone: '+371' },
|
||||
{ code: 'LB', label: 'country.lebanon', phone: '+961' },
|
||||
{ code: 'LS', label: 'country.lesotho', phone: '+266' },
|
||||
{ code: 'LR', label: 'country.liberia', phone: '+231' },
|
||||
{ code: 'LY', label: 'country.libya', phone: '+218' },
|
||||
{ code: 'LI', label: 'country.liechtenstein', phone: '+423' },
|
||||
{ code: 'LT', label: 'country.lithuania', phone: '+370' },
|
||||
{ code: 'LU', label: 'country.luxembourg', phone: '+352' },
|
||||
{ code: 'MO', label: 'country.macau', phone: '+853' },
|
||||
{ code: 'MG', label: 'country.madagascar', phone: '+261' },
|
||||
{ code: 'MW', label: 'country.malawi', phone: '+265' },
|
||||
{ code: 'MY', label: 'country.malaysia', phone: '+60' },
|
||||
{ code: 'MV', label: 'country.maldives', phone: '+960' },
|
||||
{ code: 'ML', label: 'country.mali', phone: '+223' },
|
||||
{ code: 'MT', label: 'country.malta', phone: '+356' },
|
||||
{ code: 'MH', label: 'country.marshall_islands', phone: '+692' },
|
||||
{ code: 'MQ', label: 'country.martinique', phone: '+596' },
|
||||
{ code: 'MR', label: 'country.mauritania', phone: '+222' },
|
||||
{ code: 'MU', label: 'country.mauritius', phone: '+230' },
|
||||
{ code: 'YT', label: 'country.mayotte', phone: '+262' },
|
||||
{ code: 'MX', label: 'country.mexico', phone: '+52' },
|
||||
{ code: 'FM', label: 'country.micronesia', phone: '+691' },
|
||||
{ code: 'MD', label: 'country.moldova', phone: '+373' },
|
||||
{ code: 'MC', label: 'country.monaco', phone: '+377' },
|
||||
{ code: 'MN', label: 'country.mongolia', phone: '+976' },
|
||||
{ code: 'ME', label: 'country.montenegro', phone: '+382' },
|
||||
{ code: 'MS', label: 'country.montserrat', phone: '+1664' },
|
||||
{ code: 'MA', label: 'country.morocco', phone: '+212' },
|
||||
{ code: 'MZ', label: 'country.mozambique', phone: '+258' },
|
||||
{ code: 'MM', label: 'country.myanmar', phone: '+95' },
|
||||
{ code: 'NA', label: 'country.namibia', phone: '+264' },
|
||||
{ code: 'NR', label: 'country.nauru', phone: '+674' },
|
||||
{ code: 'NP', label: 'country.nepal', phone: '+977' },
|
||||
{ code: 'NL', label: 'country.netherlands', phone: '+31' },
|
||||
{ code: 'NC', label: 'country.new_caledonia', phone: '+687' },
|
||||
{ code: 'NZ', label: 'country.new_zealand', phone: '+64' },
|
||||
{ code: 'NI', label: 'country.nicaragua', phone: '+505' },
|
||||
{ code: 'NE', label: 'country.niger', phone: '+227' },
|
||||
{ code: 'NG', label: 'country.nigeria', phone: '+234' },
|
||||
{ code: 'NU', label: 'country.niue', phone: '+683' },
|
||||
{ code: 'NF', label: 'country.norfolk_island', phone: '+672' },
|
||||
{ code: 'KP', label: 'country.north_korea', phone: '+850' },
|
||||
{ code: 'MK', label: 'country.north_macedonia', phone: '+389' },
|
||||
{ code: 'MP', label: 'country.northern_mariana_islands', phone: '+1670' },
|
||||
{ code: 'NO', label: 'country.norway', phone: '+47' },
|
||||
{ code: 'OM', label: 'country.oman', phone: '+968' },
|
||||
{ code: 'PK', label: 'country.pakistan', phone: '+92' },
|
||||
{ code: 'PW', label: 'country.palau', phone: '+680' },
|
||||
{ code: 'PS', label: 'country.palestine', phone: '+970' },
|
||||
{ code: 'PA', label: 'country.panama', phone: '+507' },
|
||||
{ code: 'PG', label: 'country.papua_new_guinea', phone: '+675' },
|
||||
{ code: 'PY', label: 'country.paraguay', phone: '+595' },
|
||||
{ code: 'PE', label: 'country.peru', phone: '+51' },
|
||||
{ code: 'PH', label: 'country.philippines', phone: '+63' },
|
||||
{ code: 'PN', label: 'country.pitcairn_islands', phone: '+64' },
|
||||
{ code: 'PL', label: 'country.poland', phone: '+48' },
|
||||
{ code: 'PT', label: 'country.portugal', phone: '+351' },
|
||||
{ code: 'PR', label: 'country.puerto_rico', phone: '+1' },
|
||||
{ code: 'QA', label: 'country.qatar', phone: '+974' },
|
||||
{ code: 'RE', label: 'country.reunion', phone: '+262' },
|
||||
{ code: 'RO', label: 'country.romania', phone: '+40' },
|
||||
{ code: 'RU', label: 'country.russia', phone: '+7' },
|
||||
{ code: 'RW', label: 'country.rwanda', phone: '+250' },
|
||||
{ code: 'BL', label: 'country.saint_barthelemy', phone: '+590' },
|
||||
{ code: 'SH', label: 'country.saint_helena', phone: '+290' },
|
||||
{ code: 'KN', label: 'country.saint_kitts_and_nevis', phone: '+1869' },
|
||||
{ code: 'LC', label: 'country.saint_lucia', phone: '+1758' },
|
||||
{ code: 'MF', label: 'country.saint_martin', phone: '+590' },
|
||||
{ code: 'PM', label: 'country.saint_pierre_and_miquelon', phone: '+508' },
|
||||
{
|
||||
code: 'VC',
|
||||
label: 'country.saint_vincent_and_the_grenadines',
|
||||
phone: '+1784',
|
||||
},
|
||||
{ code: 'WS', label: 'country.samoa', phone: '+685' },
|
||||
{ code: 'SM', label: 'country.san_marino', phone: '+378' },
|
||||
{ code: 'ST', label: 'country.sao_tome_and_principe', phone: '+239' },
|
||||
{ code: 'SA', label: 'country.saudi_arabia', phone: '+966' },
|
||||
{ code: 'SN', label: 'country.senegal', phone: '+221' },
|
||||
{ code: 'RS', label: 'country.serbia', phone: '+381' },
|
||||
{ code: 'SC', label: 'country.seychelles', phone: '+248' },
|
||||
{ code: 'SL', label: 'country.sierra_leone', phone: '+232' },
|
||||
{ code: 'SG', label: 'country.singapore', phone: '+65' },
|
||||
{ code: 'SX', label: 'country.sint_maarten', phone: '+1721' },
|
||||
{ code: 'SK', label: 'country.slovakia', phone: '+421' },
|
||||
{ code: 'SI', label: 'country.slovenia', phone: '+386' },
|
||||
{ code: 'SB', label: 'country.solomon_islands', phone: '+677' },
|
||||
{ code: 'SO', label: 'country.somalia', phone: '+252' },
|
||||
{ code: 'ZA', label: 'country.south_africa', phone: '+27' },
|
||||
{
|
||||
code: 'GS',
|
||||
label: 'country.south_georgia_and_south_sandwich_islands',
|
||||
phone: '+500',
|
||||
},
|
||||
{ code: 'KR', label: 'country.south_korea', phone: '+82' },
|
||||
{ code: 'SS', label: 'country.south_sudan', phone: '+211' },
|
||||
{ code: 'ES', label: 'country.spain', phone: '+34' },
|
||||
{ code: 'LK', label: 'country.sri_lanka', phone: '+94' },
|
||||
{ code: 'SD', label: 'country.sudan', phone: '+249' },
|
||||
{ code: 'SR', label: 'country.suriname', phone: '+597' },
|
||||
{ code: 'SJ', label: 'country.svalbard_and_jan_mayen', phone: '+47' },
|
||||
{ code: 'SE', label: 'country.sweden', phone: '+46' },
|
||||
{ code: 'CH', label: 'country.switzerland', phone: '+41' },
|
||||
{ code: 'SY', label: 'country.syria', phone: '+963' },
|
||||
{ code: 'TW', label: 'country.taiwan', phone: '+886' },
|
||||
{ code: 'TJ', label: 'country.tajikistan', phone: '+992' },
|
||||
{ code: 'TZ', label: 'country.tanzania', phone: '+255' },
|
||||
{ code: 'TH', label: 'country.thailand', phone: '+66' },
|
||||
{ code: 'TL', label: 'country.timor_leste', phone: '+670' },
|
||||
{ code: 'TG', label: 'country.togo', phone: '+228' },
|
||||
{ code: 'TK', label: 'country.tokelau', phone: '+690' },
|
||||
{ code: 'TO', label: 'country.tonga', phone: '+676' },
|
||||
{ code: 'TT', label: 'country.trinidad_and_tobago', phone: '+1868' },
|
||||
{ code: 'TN', label: 'country.tunisia', phone: '+216' },
|
||||
{ code: 'TR', label: 'country.turkey', phone: '+90' },
|
||||
{ code: 'TM', label: 'country.turkmenistan', phone: '+993' },
|
||||
{ code: 'TC', label: 'country.turks_and_caicos_islands', phone: '+1649' },
|
||||
{ code: 'TV', label: 'country.tuvalu', phone: '+688' },
|
||||
{ code: 'VI', label: 'country.us_virgin_islands', phone: '+1340' },
|
||||
{ code: 'UG', label: 'country.uganda', phone: '+256' },
|
||||
{ code: 'UA', label: 'country.ukraine', phone: '+380' },
|
||||
{ code: 'AE', label: 'country.united_arab_emirates', phone: '+971' },
|
||||
{ code: 'GB', label: 'country.united_kingdom', phone: '+44' },
|
||||
{ code: 'US', label: 'country.united_states', phone: '+1' },
|
||||
{ code: 'UY', label: 'country.uruguay', phone: '+598' },
|
||||
{ code: 'UZ', label: 'country.uzbekistan', phone: '+998' },
|
||||
{ code: 'VU', label: 'country.vanuatu', phone: '+678' },
|
||||
{ code: 'VA', label: 'country.vatican_city', phone: '+39' },
|
||||
{ code: 'VE', label: 'country.venezuela', phone: '+58' },
|
||||
{ code: 'VN', label: 'country.vietnam', phone: '+84' },
|
||||
{ code: 'WF', label: 'country.wallis_and_futuna', phone: '+681' },
|
||||
{ code: 'EH', label: 'country.western_sahara', phone: '+212' },
|
||||
{ code: 'YE', label: 'country.yemen', phone: '+967' },
|
||||
{ code: 'ZM', label: 'country.zambia', phone: '+260' },
|
||||
{ code: 'ZW', label: 'country.zimbabwe', phone: '+263' },
|
||||
];
|
||||
32
src/features/authentication/types/completionFormApiTypes.ts
Normal file
32
src/features/authentication/types/completionFormApiTypes.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
export interface GenericApiResponse {
|
||||
success: boolean;
|
||||
message: string;
|
||||
errorCode?: number;
|
||||
}
|
||||
|
||||
export interface SendEmailOtpPayload {
|
||||
email: string;
|
||||
}
|
||||
|
||||
export interface ConfirmEmailOtpPayload {
|
||||
email: string;
|
||||
otpCode: string;
|
||||
}
|
||||
|
||||
export interface CompleteUserInfoPayload {
|
||||
userId: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
gender: 0 | 1 | 2;
|
||||
nationalId: string;
|
||||
birthDate: Date | null;
|
||||
country: string;
|
||||
savePassword?: boolean;
|
||||
password?: string;
|
||||
saveEmail?: boolean;
|
||||
email?: string;
|
||||
}
|
||||
|
||||
export interface CompleteUserInfoResponse extends GenericApiResponse {
|
||||
validations: { property: string; message: string }[] | null;
|
||||
}
|
||||
73
src/features/authentication/types/settingForm.ts
Normal file
73
src/features/authentication/types/settingForm.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
import { type Dispatch, type SetStateAction } from 'react';
|
||||
|
||||
export enum Gender {
|
||||
None = 0,
|
||||
Female = 1,
|
||||
Male = 2,
|
||||
}
|
||||
|
||||
export interface DateOfBirthProps {
|
||||
value: Date | null;
|
||||
onChange: (date: Date | null) => void;
|
||||
}
|
||||
|
||||
export interface EmailSectionProps {
|
||||
showEmail: boolean;
|
||||
setShowEmail: (checked: boolean) => void;
|
||||
email: string;
|
||||
setEmail: (email: string) => void;
|
||||
correctEmail: boolean;
|
||||
codeSent: boolean;
|
||||
verificationCode: string;
|
||||
setVerificationCode: (code: string) => void;
|
||||
buttonState: 'default' | 'counting' | 'sent';
|
||||
getButtonLabel: () => string;
|
||||
handleSendCode: () => void;
|
||||
handleVerifyCode: () => void;
|
||||
emailVerified: boolean;
|
||||
loading: boolean;
|
||||
handleEditEmail: () => void;
|
||||
}
|
||||
|
||||
export interface PasswordSectionProps {
|
||||
showPasswordSection: boolean;
|
||||
setShowPasswordSection: (checked: boolean) => void;
|
||||
password: string;
|
||||
setPassword: (password: string) => void;
|
||||
confirmPassword: string;
|
||||
setConfirmPassword: (confirmPassword: string) => void;
|
||||
matchPassword: boolean;
|
||||
hasNumber: boolean;
|
||||
hasMinLength: boolean;
|
||||
hasUpperAndLower: boolean;
|
||||
hasSpecialChar: boolean;
|
||||
validPassword: boolean;
|
||||
showValidations: boolean;
|
||||
}
|
||||
|
||||
export interface ValidationItemProps {
|
||||
isValid: boolean;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface PersonalInfoFieldsProps {
|
||||
firstName: string;
|
||||
setFirstName: (v: string) => void;
|
||||
lastName: string;
|
||||
setLastName: (v: string) => void;
|
||||
sex: Gender;
|
||||
setSex: Dispatch<SetStateAction<Gender>>;
|
||||
country: string;
|
||||
setCountry: (country: string) => void;
|
||||
nationalId: string;
|
||||
setNationalId: (v: string) => void;
|
||||
birthDate: Date | null;
|
||||
setBirthDate: (d: Date | null) => void;
|
||||
}
|
||||
|
||||
export interface SubmitProps {
|
||||
onSubmit: () => void;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
success: boolean;
|
||||
}
|
||||
@@ -1,24 +1,47 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
type ApiFunction<T, P> = (params?: P) => Promise<{ data: T }>;
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { type ApiResponse } from '@/types/apiResponse';
|
||||
|
||||
export function useApi<T, P>(apiFunction: ApiFunction<T, P>) {
|
||||
// Define options for the hook
|
||||
interface UseApiOptions {
|
||||
// If true, the API call will be executed immediately on mount
|
||||
immediate?: boolean;
|
||||
}
|
||||
|
||||
export function useApi<T extends ApiResponse, P extends any[]>(
|
||||
apiFunction: (...args: P) => Promise<{ data: T }>,
|
||||
options: UseApiOptions = {},
|
||||
) {
|
||||
const [data, setData] = useState<T | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<unknown>(null);
|
||||
|
||||
const execute = async (params?: P) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await apiFunction(params);
|
||||
setData(response.data);
|
||||
} catch (err) {
|
||||
setError(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
const execute = useCallback(
|
||||
async (...args: P) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const response = await apiFunction(...args);
|
||||
|
||||
setData(response.data);
|
||||
} catch (err) {
|
||||
// TODO: can handle some common errors here, 400 and 500 errors
|
||||
setError(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[apiFunction],
|
||||
);
|
||||
|
||||
// If the 'immediate' option is true, execute the function on mount
|
||||
useEffect(() => {
|
||||
if (options.immediate) {
|
||||
// We pass undefined as params for the initial call.
|
||||
execute(...(undefined as unknown as P));
|
||||
}
|
||||
};
|
||||
}, [execute, options.immediate]);
|
||||
|
||||
return { data, loading, error, execute };
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ const getToken = () => localStorage.getItem('authToken');
|
||||
|
||||
const apiClient = axios.create({
|
||||
// Define the base URL for all API requests
|
||||
baseURL: 'https://accounts.business-harmony.com/swagger/index.html',
|
||||
baseURL: 'https://accounts.business-harmony.com/api/',
|
||||
|
||||
// Set a timeout for requests (e.g., 10 seconds)
|
||||
timeout: 10000,
|
||||
|
||||
@@ -13,6 +13,18 @@ export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
const direction = i18n.dir(i18n.language);
|
||||
|
||||
return createTheme({
|
||||
components: {
|
||||
MuiSelect: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
textAlign: 'left',
|
||||
},
|
||||
select: {
|
||||
textAlign: 'left',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
direction: direction,
|
||||
colorSchemes: {
|
||||
light: {
|
||||
|
||||
12
src/utils/persianDigit.tsx
Normal file
12
src/utils/persianDigit.tsx
Normal 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;
|
||||
};
|
||||
17
src/utils/regex.ts
Normal file
17
src/utils/regex.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
export function regex(password: string, email: 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);
|
||||
const correctEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
|
||||
return {
|
||||
hasNumber,
|
||||
hasMinLength,
|
||||
hasUpperAndLower,
|
||||
hasSpecialChar,
|
||||
validPassword:
|
||||
hasNumber && hasMinLength && hasUpperAndLower && hasSpecialChar,
|
||||
correctEmail,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user