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

fix: styles

Browse Source
This commit is contained in:
Koosha Lahouti
2025-07-22 12:08:48 +03:30
committed by Koosha Lahouti
parent 4f3f25abc1
commit 6d94a0d037
9 changed files with 152 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
public/locales/en/completionForm.json Normal file
View File

@@ -0,0 +1,31 @@
{
"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"
}
}

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

@@ -25,6 +25,7 @@
"emailCorrectForm": "فرم درست ایمیل را وارد کنید",
"agreementPart1": " ادامه فرایند ثبت نام به منزله تایید و قبول",
"agreementLinkText": " قوانین و مقررات هارمونی",
"agreementPart2": "می باشد."
"agreementPart2": "می باشد.",
"sent": "ارسال شد!"
}
}

2
src/App.tsx
View File

@@ -9,6 +9,7 @@ import {
import './App.css';
import { useTranslation } from 'react-i18next';
import { LanguageManager } from './components/LanguageManager';
import { UserCompletionForm } from './features/authentication/components/UserCompletionForm';
function App() {
const { t } = useTranslation();
@@ -18,6 +19,7 @@ function App() {
<>
<CssBaseline />
<LanguageManager />
<UserCompletionForm />
<div style={{ padding: '16px' }}>
<Typography variant="h3">{t('helloWorld')}</Typography>
<Box

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

@@ -57,18 +57,7 @@ export function EmailSection({
<>
<FormGroup>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 6 }}>
<Switch
checked={showEmail}
onChange={handleToggleEmail}
sx={{
'& .MuiSwitch-switchBase.Mui-checked': {
color: '#2979FF',
},
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
backgroundColor: '#2979FF',
},
}}
/>
<Switch checked={showEmail} onChange={handleToggleEmail} />
<Typography sx={{ color: showEmail ? '#2979FF' : 'black' }}>
{t('completion.determineEmail')}
</Typography>
@@ -89,33 +78,45 @@ export function EmailSection({
}}
InputProps={{
startAdornment:
buttonState === 'counting' ? (
<InputAdornment position="start">
<IconButton size="small" onClick={handleEditEmail}>
<Edit size="20" color="#2979FF" />
</IconButton>
!isVerifyingCode && emailVerified ? (
<InputAdornment position="end">
<TickCircle
size="24"
color="#2e7d32"
variant="Bold"
style={{
position: 'absolute',
right: 0,
marginRight: '16px',
}}
/>
</InputAdornment>
) : null,
endAdornment:
!isVerifyingCode && emailVerified ? (
<TickCircle size="16" color="#2e7d32" variant="Bold" />
buttonState === 'counting' ? (
<InputAdornment position="start">
<IconButton onClick={handleEditEmail}>
<Edit
size="20"
color="#2979FF"
style={{ position: 'absolute', left: 0 }}
/>
</IconButton>
</InputAdornment>
) : null,
}}
inputProps={{
style: {
paddingLeft: buttonState === 'counting' ? '0px' : undefined,
},
}}
/>
{email && (
<Typography
sx={{ color: correctEmail ? 'green' : 'red' }}
variant="caption"
>
{correctEmail ? '' : t('completion.emailCorrectForm')}
</Typography>
)}
</Box>
{!isVerifyingCode && !emailVerified && (
<Button
variant="text"
onClick={handleSendCode}
sx={{ width: '200px', color: '#2979FF' }}
sx={{ width: '156px', color: '#2979FF' }}
disabled={
buttonState === 'sent' ||
buttonState === 'counting' ||
@@ -160,7 +161,7 @@ export function EmailSection({
},
}}
>
<Refresh size="20" color="text.secondary" />
<Refresh size="24" color="text.secondary" />
</Box>
) : (
t('completion.checkCodeButton')

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

@@ -45,6 +45,8 @@ export function PasswordSection({
}: PasswordSectionProps) {
const { t } = useTranslation('completionForm');
const [showPasswordText, setShowPasswordText] = useState(false);
const [showPasswordRepititonText, setShowPasswordRepetitionText] =
useState(false);
const handleTogglePasswordSection = (
e: React.ChangeEvent<HTMLInputElement>,
@@ -56,6 +58,10 @@ export function PasswordSection({
setShowPasswordText((prev) => !prev);
};
const handleTogglePasswordRepetitionEye = () => {
setShowPasswordRepetitionText((prev) => !prev);
};
return (
<>
<FormGroup>
@@ -63,14 +69,10 @@ export function PasswordSection({
<Switch
checked={showPasswordSection}
onChange={handleTogglePasswordSection}
sx={{
'& .MuiSwitch-switchBase.Mui-checked': { color: '#2979FF' },
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
backgroundColor: '#2979FF',
},
}}
/>
<Typography sx={{ color: showPasswordSection ? '#2979FF' : 'black' }}>
<Typography
sx={{ color: showPasswordSection ? '#2979FF' : 'text.primary' }}
>
{t('completion.determinePassword')}
</Typography>
</Box>
@@ -88,25 +90,45 @@ export function PasswordSection({
sx={{ width: '309px' }}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{validPassword && (
<TickCircle
size="16"
color="#2e7d32"
variant="Bold"
style={{ marginRight: '8px' }}
/>
)}
<IconButton onClick={handleTogglePasswordEye}>
{showPasswordText ? (
<EyeSlash size="20" color="#000" />
) : (
<Eye size="20" color="#000" />
<InputAdornment position="end" sx={{ height: 'unset' }}>
<Box
sx={{
display: 'flex',
alignItems: 'center',
width: '100%',
}}
>
{validPassword && (
<TickCircle
size="24"
color="#14AE5C"
variant="Bold"
style={{
position: 'absolute',
right: 0,
marginRight: '16px',
}}
/>
)}
</IconButton>
<IconButton
onClick={handleTogglePasswordEye}
sx={{ ml: validPassword ? 0.5 : 'auto' }}
>
{showPasswordText ? (
<Eye size="24" color="#2979FF" />
) : (
<EyeSlash size="24" color="#2979FF" />
)}
</IconButton>
</Box>
</InputAdornment>
),
}}
inputProps={{
style: {
paddingRight: validPassword ? '48px' : '20px',
},
}}
/>
{password && (
@@ -147,28 +169,48 @@ export function PasswordSection({
: ' '
}
sx={{ width: '309px' }}
type={showPasswordText ? 'text' : 'password'}
type={showPasswordRepititonText ? 'text' : 'password'}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{confirmPassword.length > 0 && matchPassword && (
<TickCircle
size="16"
color="#2e7d32"
variant="Bold"
style={{ marginRight: '8px' }}
/>
)}
<IconButton onClick={handleTogglePasswordEye}>
{showPasswordText ? (
<EyeSlash size="20" color="#000" />
) : (
<Eye size="20" color="#000" />
<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>
<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',
},
}}
/>
</Box>
)}

2
src/features/authentication/components/PasswordValidation.tsx
View File

@@ -14,7 +14,7 @@ export function PasswordValidationItem({
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
<TickCircle
size="16"
color={isValid ? '#2e7d32' : '#2979FF'}
color={isValid ? '#14AE5C' : '#2979FF'}
variant={isValid ? 'Bold' : 'Outline'}
/>
<Typography variant="body2" color="text.primary">

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

@@ -44,10 +44,8 @@ export function PersonalInfoFields({ sex, setSex }: PersonalInfoFieldsProps) {
<Box sx={{ display: 'flex', gap: 2 }}>
<FormControl sx={{ width: '309px' }}>
<InputLabel id="sex-label">{t('completion.gender')}</InputLabel>
<InputLabel>{t('completion.gender')}</InputLabel>
<Select
labelId="sex-label"
id="sex"
value={sex}
label={t('completion.gender')}
onChange={handleChange}

2
src/features/authentication/components/SubmitSection.tsx
View File

@@ -6,7 +6,7 @@ export function SubmitSection() {
return (
<Box sx={{ display: 'flex', gap: 2, px: 6, mb: '17px' }}>
<Typography variant="body2" sx={{ flex: 1 }}>
<Typography variant="body2" sx={{ flex: 1 }} color="text.primary">
{t('completion.agreementPart1')}
<Link target="_blank" sx={{ color: '#2979FF' }}>
{t('completion.agreementLinkText')}

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

@@ -66,7 +66,7 @@ export function UserCompletionForm() {
str.replace(/\d/g, (d: string) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d)]);
const getButtonLabel = () => {
if (buttonState === 'sent') return 'ارسال شد!';
if (buttonState === 'sent') return t('completion.sent');
if (buttonState === 'counting') {
const minutes = String(Math.floor(countdown / 60)).padStart(2, '0');
const seconds = String(countdown % 60).padStart(2, '0');
@@ -82,7 +82,7 @@ export function UserCompletionForm() {
setTimeout(() => {
setButtonState('counting');
setCountdown(60);
}, 1000);
}, 500);
};
const handleVerifyCode = () => {
@@ -90,7 +90,7 @@ export function UserCompletionForm() {
setTimeout(() => {
setIsVerifyingCode(false);
setEmailVerified(true);
}, 1000);
}, 500);
};
const handleEditEmail = () => {
@@ -112,7 +112,7 @@ export function UserCompletionForm() {
<Box
sx={{
width: '730px',
backgroundColor: 'white',
backgroundColor: '#FFFFFF',
border: '1px solid #ccc',
display: 'flex',
flexDirection: 'column',