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

feat: country selection, add birthdate and add error messages for textfields

Browse Source
This commit is contained in:
Koosha Lahouti
2025-07-22 17:36:35 +03:30
committed by Koosha Lahouti
parent 9e471670d3
commit 09e4dfa917
4 changed files with 220 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/locales/fa/completionForm.json
View File

@@ -21,13 +21,14 @@
"hasMinLength": "حداقل 8 کاراکتر",
"hasUpperAndLower": "شامل یک حرف کوچک و بزرگ",
"hasSpecialChar": "شامل علامت (!@#$%^&*)",
"notCompatibility": "مطابقت ندارد",
"emailCorrectForm": "فرم درست ایمیل را وارد کنید",
"notCompatibility": "تکرار رمز عبور با رمز عبور یکسان نمی باشد",
"emailCorrectForm": "ساختار ایمیل صحیح نیست",
"agreementPart1": " ادامه فرایند ثبت نام به منزله تایید و قبول",
"agreementLinkText": " قوانین و مقررات هارمونی",
"agreementPart2": "می باشد.",
"sent": "ارسال شد!",
"country": "کشور",
"dateOfBirth": "تاریخ تولد(اختیاری)"
"dateOfBirth": "تاریخ تولد(اختیاری)",
"invalidCountry": "کشور انتخاب شده صحیح نیست"
}
}

19
src/features/authentication/components/EmailSection.tsx
View File

@@ -72,6 +72,7 @@ export function EmailSection({
variant="outlined"
value={email}
onChange={(e) => setEmail(e.target.value)}
error={!correctEmail}
sx={{
width: !isVerifyingCode && !emailVerified ? '446px' : '634px',
transition: 'width 0.3s',
@@ -111,17 +112,25 @@ export function EmailSection({
},
}}
/>
{email && (
<Typography
sx={{ color: correctEmail ? 'green' : 'red' }}
variant="caption"
>
{correctEmail ? '' : t('completion.emailCorrectForm')}
</Typography>
)}
</Box>
{!isVerifyingCode && !emailVerified && (
<Button
variant="text"
onClick={handleSendCode}
sx={{ width: '156px' }}
disabled={
buttonState === 'sent' ||
buttonState === 'counting' ||
!correctEmail
}
// disabled={
// buttonState === 'sent' ||
// buttonState === 'counting' ||
// !correctEmail
// }
>
{getButtonLabel()}
</Button>

208
src/features/authentication/components/PasswordSection.tsx
View File

@@ -9,7 +9,7 @@ import {
InputAdornment,
} from '@mui/material';
import { useTranslation } from 'react-i18next';
import { TickCircle, Eye, EyeSlash } from 'iconsax-react';
import { TickCircle, Eye, EyeSlash, CloseCircle } from 'iconsax-react';
import { PasswordValidationItem } from './PasswordValidation';
interface PasswordSectionProps {
@@ -66,10 +66,12 @@ export function PasswordSection({
<>
<FormGroup>
<Box sx={{ display: 'flex', gap: 0.5, px: 6, alignItems: 'center' }}>
<Switch
checked={showPasswordSection}
onChange={handleTogglePasswordSection}
/>
<Box dir="ltr">
<Switch
checked={showPasswordSection}
onChange={handleTogglePasswordSection}
/>
</Box>
<Typography
sx={{ color: showPasswordSection ? '#2979FF' : 'text.primary' }}
>
@@ -79,8 +81,8 @@ export function PasswordSection({
</FormGroup>
{showPasswordSection && (
<Box sx={{ display: 'flex', gap: 2, px: 6 }}>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, px: 6 }}>
<Box sx={{ display: 'flex', gap: 2 }}>
<TextField
label={t('completion.password')}
value={password}
@@ -131,87 +133,121 @@ export function PasswordSection({
}}
/>
{password && (
<Box sx={{ mt: 1 }}>
{showValidations && (
<Box sx={{ mt: 1 }}>
<PasswordValidationItem
isValid={hasNumber}
label={t('completion.hasNumber')}
/>
<PasswordValidationItem
isValid={hasMinLength}
label={t('completion.hasMinLength')}
/>
<PasswordValidationItem
isValid={hasUpperAndLower}
label={t('completion.hasUpperAndLower')}
/>
<PasswordValidationItem
isValid={hasSpecialChar}
label={t('completion.hasSpecialChar')}
/>
</Box>
)}
</Box>
)}
<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')
: ' '
}
sx={{ width: '309px' }}
type={showPasswordRepititonText ? 'text' : 'password'}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{ height: 'unset' }}>
<Box
sx={{
display: 'flex',
alignItems: 'center',
width: '100%',
}}
>
{confirmPassword.length > 0 ? (
matchPassword ? (
<TickCircle
size="24"
color="#14AE5C"
variant="Bold"
style={{
position: 'absolute',
right: 0,
marginRight: '16px',
}}
/>
) : (
<CloseCircle
size="24"
color="red"
variant="Bold"
style={{
position: 'absolute',
right: 0,
marginRight: '16px',
}}
/>
)
) : null}
<IconButton
onClick={handleTogglePasswordRepetitionEye}
sx={{
ml:
confirmPassword.length > 0 && matchPassword
? 0.5
: 'auto',
}}
>
{showPasswordRepititonText ? (
<Eye size="24" color="#2979FF" />
) : (
<EyeSlash size="24" color="#2979FF" />
)}
</IconButton>
</Box>
</InputAdornment>
),
}}
inputProps={{
style: {
paddingRight:
confirmPassword.length > 0 && matchPassword
? '48px'
: '45px',
},
}}
/>
</Box>
<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')
: ' '
}
sx={{ width: '309px' }}
type={showPasswordRepititonText ? 'text' : 'password'}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{ height: 'unset' }}>
<Box
sx={{
display: 'flex',
alignItems: 'center',
width: '100%',
}}
>
{confirmPassword.length > 0 && matchPassword && (
<TickCircle
size="24"
color="#14AE5C"
variant="Bold"
style={{
position: 'absolute',
right: 0,
marginRight: '16px',
}}
/>
)}
<IconButton
onClick={handleTogglePasswordRepetitionEye}
sx={{ ml: validPassword ? 0.5 : 'auto' }}
>
{showPasswordRepititonText ? (
<Eye size="24" color="#2979FF" />
) : (
<EyeSlash size="24" color="#2979FF" />
)}
</IconButton>
</Box>
</InputAdornment>
),
}}
inputProps={{
style: {
paddingRight: validPassword ? '48px' : '20px',
},
}}
/>
{password && showValidations && (
<Box sx={{ display: 'flex', gap: 2 }}>
<Box
sx={{
width: '317px',
display: 'flex',
flexDirection: 'column',
}}
>
<PasswordValidationItem
isValid={hasNumber}
label={t('completion.hasNumber')}
/>
<PasswordValidationItem
isValid={hasMinLength}
label={t('completion.hasMinLength')}
/>
</Box>
<Box
sx={{
width: '317px',
display: 'flex',
flexDirection: 'column',
}}
>
<PasswordValidationItem
isValid={hasUpperAndLower}
label={t('completion.hasUpperAndLower')}
/>
<PasswordValidationItem
isValid={hasSpecialChar}
label={t('completion.hasSpecialChar')}
/>
</Box>
</Box>
)}
</Box>
)}
</>

195
src/features/authentication/components/PersonalInfoFields.tsx
View File

@@ -5,9 +5,11 @@ import {
MenuItem,
Select,
Box,
type SelectChangeEvent,
Autocomplete,
} from '@mui/material';
import { useTranslation } from 'react-i18next';
import { Woman, Man } from 'iconsax-react';
import { useState } from 'react';
interface PersonalInfoFieldsProps {
sex: string;
@@ -23,116 +25,65 @@ export function PersonalInfoFields({
setCountry,
}: PersonalInfoFieldsProps) {
const { t } = useTranslation('completionForm');
const [countryError, setCountryError] = useState(false);
const countries = [
{ name: 'Afghanistan', fa: 'افغانستان', flag: 'af' },
{ name: 'Albania', fa: 'آلبانی', flag: 'al' },
{ name: 'Algeria', fa: 'الجزایر', flag: 'dz' },
{ name: 'Andorra', fa: 'آندورا', flag: 'ad' },
{ name: 'Angola', fa: 'آنگولا', flag: 'ao' },
{ name: 'Argentina', fa: 'آرژانتین', flag: 'ar' },
{ name: 'Armenia', fa: 'ارمنستان', flag: 'am' },
{ name: 'Australia', fa: 'استرالیا', flag: 'au' },
{ name: 'Austria', fa: 'اتریش', flag: 'at' },
{ name: 'Azerbaijan', fa: 'آذربایجان', flag: 'az' },
{ name: 'Bahamas', fa: 'باهاما', flag: 'bs' },
{ name: 'Bahrain', fa: 'بحرین', flag: 'bh' },
{ name: 'Bangladesh', fa: 'بنگلادش', flag: 'bd' },
{ name: 'Barbados', fa: 'باربادوس', flag: 'bb' },
{ name: 'Belarus', fa: 'بلاروس', flag: 'by' },
{ name: 'Belgium', fa: 'بلژیک', flag: 'be' },
{ name: 'Belize', fa: 'بلیز', flag: 'bz' },
{ name: 'Benin', fa: 'بنین', flag: 'bj' },
{ name: 'Bhutan', fa: 'بوتان', flag: 'bt' },
{ name: 'Bolivia', fa: 'بولیوی', flag: 'bo' },
{ name: 'Bosnia and Herzegovina', fa: 'بوسنی و هرزگوین', flag: 'ba' },
{ name: 'Botswana', fa: 'بوتسوانا', flag: 'bw' },
{ name: 'Brazil', fa: 'برزیل', flag: 'br' },
{ name: 'Brunei', fa: 'برونئی', flag: 'bn' },
{ name: 'Bulgaria', fa: 'بلغارستان', flag: 'bg' },
{ name: 'Burkina Faso', fa: 'بورکینافاسو', flag: 'bf' },
{ name: 'Burundi', fa: 'بوروندی', flag: 'bi' },
{ name: 'Cambodia', fa: 'کامبوج', flag: 'kh' },
{ name: 'Cameroon', fa: 'کامرون', flag: 'cm' },
{ name: 'Canada', fa: 'کانادا', flag: 'ca' },
{ name: 'Cape Verde', fa: 'کیپ ورد', flag: '🇨🇻' },
{
name: 'Central African Republic',
fa: 'جمهوری آفریقای مرکزی',
flag: 'cf',
},
{ name: 'Chad', fa: 'چاد', flag: 'td' },
{ name: 'Chile', fa: 'شیلی', flag: 'cl' },
{ name: 'China', fa: 'چین', flag: 'cn' },
{ name: 'Colombia', fa: 'کلمبیا', flag: 'co' },
{ name: 'Comoros', fa: 'کومور', flag: 'km' },
{ name: 'Congo (Brazzaville)', fa: 'کنگو (برازاویل)', flag: 'cg' },
{ name: 'Congo (Kinshasa)', fa: 'کنگو (کینشاسا)', flag: 'cd' },
{ name: 'Costa Rica', fa: 'کاستاریکا', flag: 'cr' },
{ name: 'Croatia', fa: 'کرواسی', flag: 'hr' },
{ name: 'Cuba', fa: 'کوبا', flag: 'cu' },
{ name: 'Cyprus', fa: 'قبرس', flag: 'cy' },
{ name: 'Czech Republic', fa: 'جمهوری چک', flag: 'cz' },
{ name: 'Denmark', fa: 'دانمارک', flag: 'dk' },
{ name: 'Djibouti', fa: 'جیبوتی', flag: 'dj' },
{ name: 'Dominica', fa: 'دومینیکا', flag: 'dm' },
{ name: 'Dominican Republic', fa: 'جمهوری دومینیکن', flag: 'do' },
{ name: 'Ecuador', fa: 'اکوادور', flag: 'ec' },
{ name: 'Egypt', fa: 'مصر', flag: 'eg' },
{ name: 'El Salvador', fa: 'السالوادور', flag: 'sv' },
{ name: 'Equatorial Guinea', fa: 'گینه استوایی', flag: 'gq' },
{ name: 'Eritrea', fa: 'اریتره', flag: 'er' },
{ name: 'Estonia', fa: 'استونی', flag: 'ee' },
{ name: 'Eswatini', fa: 'اسواتینی', flag: 'az' },
{ name: 'Ethiopia', fa: 'اتیوپی', flag: 'et' },
{ name: 'Fiji', fa: 'فیجی', flag: 'fj' },
{ name: 'Finland', fa: 'فنلاند', flag: 'fi' },
{ name: 'France', fa: 'فرانسه', flag: 'fr' },
{ name: 'Gabon', fa: 'گابون', flag: 'ga' },
{ name: 'Gambia', fa: 'گامبیا', flag: 'gm' },
{ name: 'Georgia', fa: 'گرجستان', flag: 'ge' },
{ name: 'Germany', fa: 'آلمان', flag: 'de' },
{ name: 'Ghana', fa: 'غنا', flag: 'gh' },
{ name: 'Greece', fa: 'یونان', flag: 'gr' },
{ name: 'Guatemala', fa: 'گواتمالا', flag: 'gt' },
{ name: 'India', fa: 'هند', flag: 'in' },
{ name: 'Indonesia', fa: 'اندونزی', flag: 'id' },
{ name: 'Iran', fa: 'ایران', flag: 'ir' },
{ name: 'Iraq', fa: 'عراق', flag: 'iq' },
{ name: 'Ireland', fa: 'ایرلند', flag: 'ie' },
{ name: 'Israel', fa: 'اسرائیل', flag: 'il' },
{ name: 'Italy', fa: 'ایتالیا', flag: 'it' },
{ name: 'Japan', fa: 'ژاپن', flag: 'jp' },
{ name: 'Jordan', fa: 'اردن', flag: 'jo' },
{ name: 'Kazakhstan', fa: 'قزاقستان', flag: 'kz' },
{ name: 'Kuwait', fa: 'کویت', flag: 'kw' },
{ name: 'Lebanon', fa: 'لبنان', flag: 'lb' },
{ name: 'Malaysia', fa: 'مالزی', flag: 'my' },
{ name: 'Netherlands', fa: 'هلند', flag: 'nl' },
{ name: 'Norway', fa: 'نروژ', flag: 'no' },
{ name: 'Oman', fa: 'عمان', flag: 'om' },
{ name: 'Pakistan', fa: 'پاکستان', flag: 'pk' },
{ name: 'Palestine', fa: 'فلسطین', flag: 'ps' },
{ name: 'Qatar', fa: 'قطر', flag: 'qa' },
{ name: 'Russia', fa: 'روسیه', flag: 'ru' },
{ name: 'Saudi Arabia', fa: 'عربستان سعودی', flag: 'sa' },
{ name: 'Spain', fa: 'اسپانیا', flag: 'es' },
{ name: 'Sweden', fa: 'سوئد', flag: 'se' },
{ name: 'Switzerland', fa: 'سوئیس', flag: 'ch' },
{ name: 'Syria', fa: 'سوریه', flag: 'sy' },
{ name: 'Turkey', fa: 'ترکیه', flag: 'tr' },
{ name: 'Ukraine', fa: 'اوکراین', flag: 'ua' },
{ name: 'United Arab Emirates', fa: 'امارات متحده عربی', flag: 'ae' },
{ name: 'United Kingdom', fa: 'بریتانیا', flag: 'gb' },
{ name: 'United States', fa: 'ایالات متحده آمریکا', flag: 'us' },
{ name: 'Yemen', fa: 'یمن', flag: 'ye' },
];
const handleChange = (e: SelectChangeEvent) => {
const handleChangeSex = (e: any) => {
setSex(e.target.value);
};
const handleChangeCountry = (e: SelectChangeEvent) => {
setCountry(e.target.value);
const handleChangeCountry = (_: any, newValue: any) => {
setCountry(newValue ? newValue.name : '');
setCountryError(false);
};
const handleCountryBlur = (e: React.FocusEvent<HTMLInputElement>) => {
const inputValue = e.target.value.trim();
const exists = countries.some((c) => c.fa === inputValue);
if (inputValue && !exists) {
setCountryError(true);
} else {
setCountryError(false);
}
};
const handleInputChange = (_: any, value: string) => {
const exists = countries.some((c) => c.fa === value.trim());
if (value.trim() && !exists) {
setCountryError(true);
} else {
setCountryError(false);
}
};
return (
@@ -142,17 +93,13 @@ export function PersonalInfoFields({
label={t('completion.name')}
placeholder={t('completion.name')}
variant="outlined"
sx={{
width: '309px',
}}
sx={{ width: '309px' }}
/>
<TextField
label={t('completion.familyName')}
placeholder={t('completion.familyName')}
variant="outlined"
sx={{
width: '309px',
}}
sx={{ width: '309px' }}
/>
</Box>
@@ -162,10 +109,20 @@ export function PersonalInfoFields({
<Select
value={sex}
label={t('completion.gender')}
onChange={handleChange}
onChange={handleChangeSex}
>
<MenuItem value="female">{t('completion.man')}</MenuItem>
<MenuItem value="male">{t('completion.woman')}</MenuItem>
<MenuItem value="female">
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Woman size={20} color="#F50057" />
{t('completion.woman')}
</Box>
</MenuItem>
<MenuItem value="male">
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Man size={20} color="#0091EA" />
{t('completion.man')}
</Box>
</MenuItem>
</Select>
</FormControl>
@@ -173,45 +130,53 @@ export function PersonalInfoFields({
label={t('completion.optionalNationalCode')}
placeholder={t('completion.optionalNationalCode')}
variant="outlined"
sx={{
width: '309px',
}}
sx={{ width: '309px' }}
/>
</Box>
<Box sx={{ display: 'flex', gap: 2 }}>
<FormControl sx={{ width: '309px' }}>
<InputLabel>{t('completion.country')}</InputLabel>
<Select
value={country}
label={t('completion.country')}
onChange={handleChangeCountry}
>
{countries.map((c) => (
<MenuItem key={c.name} value={c.name}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<span>
<img
src={`https://flagcdn.com/w40/${c.flag}.png`}
alt={c.name}
width="24"
height="16"
style={{ borderRadius: '2px', border: '1px solid #ccc' }}
/>
</span>
<span>{c.fa}</span>
</Box>
</MenuItem>
))}
</Select>
</FormControl>
<Autocomplete
options={countries}
getOptionLabel={(c) => (typeof c === 'string' ? c : c.fa)}
value={countries.find((c) => c.name === country) || null}
onChange={handleChangeCountry}
onInputChange={handleInputChange}
freeSolo
noOptionsText=""
renderOption={(props, c) => (
<Box
component="li"
{...props}
sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
>
<img
src={`https://flagcdn.com/w40/${c.flag}.png`}
width="24"
height="24"
style={{ borderRadius: '2px', border: '1px solid #ccc' }}
alt={c.name}
/>
{c.fa}
</Box>
)}
renderInput={(params) => (
<TextField
{...params}
label={t('completion.country')}
variant="outlined"
error={countryError}
helperText={countryError ? t('completion.invalidCountry') : ''}
onBlur={handleCountryBlur}
/>
)}
sx={{ width: '309px' }}
/>
<TextField
label={t('completion.dateOfBirth')}
placeholder={t('completion.dateOfBirth')}
variant="outlined"
sx={{
width: '309px',
}}
sx={{ width: '309px' }}
/>
</Box>
</Box>