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

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>
)}
</>