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

feat: add using enter instead pushing the button

Browse Source
This commit is contained in:
Koosha Lahouti
2025-09-14 00:02:08 +03:30
parent 9ec1415f70
commit 19bbf55904
17 changed files with 675 additions and 559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env
View File

@@ -1,8 +1,8 @@
VITE_GOOGLE_CLIENT_ID=https://272098283932-bft2gvlgjn8edopg0lnqjq1i9ekdmipt.apps.googleusercontent.com
VITE_DEFUALT_AUTH_RETURN_URL=/setting/profile
VITE_APP_URL=https://accounts.business-harmony.com
VITE_API_URL=https://accounts.business-harmony.com/apiapp/api
VITE_IDENTITY_URL=https://accounts.business-harmony.com/apiapp/connect/token
VITE_API_URL=https://accounts.business-harmony.com/api
VITE_IDENTITY_URL=https://accounts.business-harmony.com/connect/token
VITE_IDENTITY_CLIENT_ID=harmony_identity
VITE_IDENTITY_SCOPE=openid profile offline_access
IMAGE_BASE_URL=https://accounts.business-harmony.com/uploads/

13
src/features/authentication/components/AuthenticationSteps/CompleteSignUp.tsx
View File

@@ -1,4 +1,4 @@
import { Button, TextField, Typography } from '@mui/material';
import { Box, Button, TextField, Typography } from '@mui/material';
import parsePhoneNumberFromString from 'libphonenumber-js';
import { useRef, useState, type Dispatch } from 'react';
import { useTranslation } from 'react-i18next';
@@ -69,6 +69,14 @@ export const CompleteSignUp = ({
return (
<AuthenticationCard>
<Box
component="form"
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
if (!sendSmsLoading) void handleCompleteSignUp();
}}
>
<Typography variant="h5" sx={{ mb: 0.5 }}>
{t('completeSignUp.completeSignUp')}
</Typography>
@@ -107,9 +115,10 @@ export const CompleteSignUp = ({
sx={{ my: 4 }}
/>
<Button loading={sendSmsLoading} onClick={handleCompleteSignUp}>
<Button loading={sendSmsLoading} type="submit">
{t('verify.confirmAndContinue')}
</Button>
</Box>
</AuthenticationCard>
);
};

1
src/features/authentication/components/AuthenticationSteps/EnterPasswordForm.tsx
View File

@@ -21,7 +21,6 @@ import {
import type { LoginResult, PasswordLoginRequest } from '../../types/userTypes';
import { Icon, useToast } from '@rkheftan/harmony-ui';
import { useApi } from '@/hooks/useApi';
import { useAuth } from '@/hooks/useAuth';
import {
generateTokenWithPassword,
type GenerateTokenResponse,

1
src/features/authentication/components/AuthenticationSteps/GoogleAuthentication.tsx
View File

@@ -14,7 +14,6 @@ import {
generateTokenWithGoogle,
type GenerateTokenResponse,
} from '../../api/identityAPI';
import { useAuth } from '@/hooks/useAuth';
import type { AuthFactory } from '../../types/authTypes';
export interface GoogleAuthenticationProps {

15
src/features/authentication/components/AuthenticationSteps/LoginRegiserForm.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Stack, TextField, Typography } from '@mui/material';
import { Button, Stack, TextField, Typography, Box } from '@mui/material';
import { useRef, useState, type Dispatch } from 'react';
import { useTranslation } from 'react-i18next';
import { isNumeric } from '@/utils/regexes/isNumeric';
@@ -120,6 +120,16 @@ export function LoginRegisterForm({
return (
<AuthenticationCard>
<Box
component="form"
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
if (!userStatusLoading) {
void handleSubmit();
}
}}
>
<Stack spacing={1}>
<Typography variant="h5">{t('loginForm.title')}</Typography>
<Typography variant="body2" color="text.secondary">
@@ -155,7 +165,7 @@ export function LoginRegisterForm({
/>
<Stack spacing={2}>
<Button loading={userStatusLoading} onClick={handleSubmit}>
<Button loading={userStatusLoading} type="submit">
{t('loginForm.submitButton')}
</Button>
@@ -165,6 +175,7 @@ export function LoginRegisterForm({
disabled={userStatusLoading}
/>
</Stack>
</Box>
</AuthenticationCard>
);
}

14
src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx
View File

@@ -18,7 +18,6 @@ import {
generateTokenWithOtp,
type GenerateTokenResponse,
} from '../../api/identityAPI';
import { useAuth } from '@/hooks/useAuth';
interface OtpVerifyFormProps {
value: string;
@@ -165,6 +164,16 @@ export function OtpVerifyForm({
return (
<Stack alignItems="center">
<AuthenticationCard>
<Box
component="form"
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
if (!loginSignUpLoading) {
void handleVerifyOTP();
}
}}
>
<Box
sx={{
display: 'flex',
@@ -198,11 +207,12 @@ export function OtpVerifyForm({
onChange={(value) => setOtpCode(value)}
/>
<Button onClick={handleVerifyOTP} loading={loginSignUpLoading}>
<Button type="submit" loading={loginSignUpLoading}>
{authMode === 'register'
? t('verify.confirmAndContinue')
: t('verify.confirmAndLogin')}
</Button>
</Box>
</AuthenticationCard>
<Stack

13
src/features/authentication/components/AuthenticationSteps/VerifyPhoneNumber.tsx
View File

@@ -95,6 +95,16 @@ export function VerifyPhoneNumber({
return (
<Stack alignItems="center">
<AuthenticationCard>
<Box
component="form"
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
if (!confirmSmsOtpLoading) {
void handleVerifyOTP();
}
}}
>
<Box
sx={{
display: 'flex',
@@ -130,9 +140,10 @@ export function VerifyPhoneNumber({
onChange={(value) => setOtpCode(value)}
/>
<Button onClick={handleVerifyOTP} loading={confirmSmsOtpLoading}>
<Button type="submit" loading={confirmSmsOtpLoading}>
{t('verify.confirmAndLogin')}
</Button>
</Box>
</AuthenticationCard>
<Stack

16
src/features/authentication/components/ForgetPassword/ForgetPasswordOtp.tsx
View File

@@ -115,6 +115,16 @@ export function ForgetPasswordOtp({
return (
<Stack alignItems="center">
<AuthenticationCard>
<Box
component="form"
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
if (!confirmForgetPassCodeLoading) {
void handleVerifyOTP();
}
}}
>
<Box
sx={{
display: 'flex',
@@ -158,12 +168,10 @@ export function ForgetPasswordOtp({
onChange={(value) => setOtpCode(value)}
/>
<Button
onClick={handleVerifyOTP}
loading={confirmForgetPassCodeLoading}
>
<Button type="submit" loading={confirmForgetPassCodeLoading}>
{t('forgetPassword.confirm')}
</Button>
</Box>
</AuthenticationCard>
<Stack

5
src/features/authentication/components/UserCompletionForm/SubmitSection.tsx
View File

@@ -11,7 +11,7 @@ import {
import { useTranslation } from 'react-i18next';
import { type SubmitProps } from '../../types/settingForm';
export function SubmitSection({ onSubmit, loading }: SubmitProps) {
export function SubmitSection({ loading }: SubmitProps) {
const { t, i18n } = useTranslation('completionForm');
const [openDialog, setOpenDialog] = useState(false);
@@ -50,8 +50,9 @@ export function SubmitSection({ onSubmit, loading }: SubmitProps) {
<Button
variant="contained"
onClick={onSubmit}
type="submit"
disabled={loading}
form="completionForm"
sx={{
width: { xs: '100%', sm: '247px' },
alignSelf: { xs: 'stretch', sm: 'center' },

12
src/features/authentication/routes/UserCompletionPage.tsx
View File

@@ -388,6 +388,15 @@ export function UserCompletionPage() {
scrollbarGutter: 'stable both-edges',
}}
maxWidth="730px"
>
<Box
component="form"
id="completionForm"
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
void handleSubmit();
}}
>
<Box
sx={{
@@ -463,7 +472,8 @@ export function UserCompletionPage() {
handleBlur={handleBlur}
/>
<SubmitSection onSubmit={handleSubmit} loading={isSubmitting} />
<SubmitSection loading={isSubmitting} />
</Box>
</Box>
</AuthenticationCard>
</FlexBox>

1
src/features/authentication/types/settingForm.ts
View File

@@ -72,6 +72,5 @@ export interface PersonalInfoFieldsProps extends ValidationProps {
}
export interface SubmitProps {
onSubmit: () => void;
loading: boolean;
}

26
src/features/profile/components/security/PasswordDialog.tsx
View File

@@ -46,6 +46,12 @@ export function PasswordDialog({
const [showConfirm, setShowConfirm] = useState(false);
const navigate = useNavigate();
const onFormSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
e.preventDefault();
e.stopPropagation();
if (!loading) handleSubmit();
};
return (
<Dialog
open={open}
@@ -69,6 +75,7 @@ export function PasswordDialog({
</Box>
</DialogTitle>
<Box component="form" onSubmit={onFormSubmit}>
<DialogContent
sx={{
display: 'flex',
@@ -89,7 +96,10 @@ export function PasswordDialog({
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => setShowCurrent(!showCurrent)}>
<IconButton
onClick={() => setShowCurrent(!showCurrent)}
type="button"
>
<Icon Component={showCurrent ? Eye : EyeSlash} />
</IconButton>
</InputAdornment>
@@ -115,7 +125,10 @@ export function PasswordDialog({
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => setShowNew(!showNew)}>
<IconButton
onClick={() => setShowNew(!showNew)}
type="button"
>
<Icon Component={showNew ? Eye : EyeSlash} />
</IconButton>
</InputAdornment>
@@ -160,7 +173,10 @@ export function PasswordDialog({
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => setShowConfirm(!showConfirm)}>
<IconButton
onClick={() => setShowConfirm(!showConfirm)}
type="button"
>
<Icon Component={showConfirm ? Eye : EyeSlash} />
</IconButton>
</InputAdornment>
@@ -174,7 +190,8 @@ export function PasswordDialog({
fullWidth
sx={{ height: 48, textTransform: 'none' }}
variant="contained"
onClick={handleSubmit}
type="submit"
disabled={loading}
>
{loading ? (
<CircularProgress size={24} color="inherit" />
@@ -183,6 +200,7 @@ export function PasswordDialog({
)}
</Button>
</DialogActions>
</Box>
</Dialog>
);
}

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

@@ -14,7 +14,6 @@ import { useProfile } from '../../hooks/useProfile';
export function PersonalInformation() {
const imageBaseUrl = import.meta.env.IMAGE_BASE_URL;
const { t } = useTranslation('setting');
const [isEditing, setIsEditing] = useState(false);
const [uploadedImageUrl, setUploadedImageUrl] = useState<string | null>(null);
@@ -29,18 +28,14 @@ export function PersonalInformation() {
const [originalData, setOriginalData] = useState<InfoRowData | null>(null);
const showToast = useToast();
const infoRowEditRef = useRef<{ validateFields: () => boolean }>(null);
const { isLoadingProfile, refetchProfile } = useProfile();
const { loading: isSavingProfile, execute: executeSaveProfile } =
useApi(saveProfile);
useEffect(() => {
const loadProfile = async () => {
const profileData = await refetchProfile();
if (!profileData) return;
if (profileData.success) {
const fetchedData = {
firstName: profileData.firstName ?? '',
@@ -66,7 +61,6 @@ export function PersonalInformation() {
});
}
};
loadProfile();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -85,14 +79,11 @@ export function PersonalInformation() {
if (!data) return;
const isValid = infoRowEditRef.current?.validateFields?.();
if (!isValid) return;
const saveData = await executeSaveProfile({
data,
imageUrl: uploadedImageFile,
});
if (!saveData) return;
if (saveData?.success) {
showToast({
message: t('settingForm.successSaveProfile'),
@@ -101,7 +92,6 @@ export function PersonalInformation() {
setIsEditing(false);
setOriginalData(data);
setUploadedImageFile(null);
// Force a refetch to update the cache with the new data
refetchProfile({ force: true });
} else {
showToast({
@@ -122,6 +112,7 @@ export function PersonalInformation() {
{isEditing ? (
<>
<Button
type="button"
variant="text"
onClick={handleCancelClick}
size="large"
@@ -134,9 +125,11 @@ export function PersonalInformation() {
{t('settingForm.rejectButton')}
</Button>
<Button
onClick={handleSaveClick}
type="submit"
form="profileForm"
size="large"
variant="contained"
disabled={isSavingProfile}
sx={{
textTransform: 'none',
width: { xs: '100%', sm: 'auto' },
@@ -174,8 +167,16 @@ export function PersonalInformation() {
>
<CircularProgress />
</Box>
) : (
) : isEditing ? (
<Box
component="form"
id="profileForm"
noValidate
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
if (!isSavingProfile) void handleSaveClick();
}}
sx={{
mx: { xs: 2, sm: 3, md: 4 },
py: 2,
@@ -185,7 +186,6 @@ export function PersonalInformation() {
bgcolor: 'background.paper',
}}
>
{isEditing && (
<ProfileImage
initials={initials}
uploadedImageUrl={uploadedImageUrl}
@@ -201,21 +201,24 @@ export function PersonalInformation() {
setUploadedImageUrl(null);
}}
/>
)}
{data &&
(isEditing ? (
<InfoRowEdit
ref={infoRowEditRef}
data={data}
setData={setData}
/>
<InfoRowEdit ref={infoRowEditRef} data={data} setData={setData} />
</Box>
) : (
<Box
sx={{
mx: { xs: 2, sm: 3, md: 4 },
py: 2,
display: 'flex',
flexDirection: 'column',
gap: 2,
bgcolor: 'background.paper',
}}
>
<InfoRowDisplay
data={data}
uploadedImageUrl={uploadedImageUrl}
initials={initials}
/>
))}
</Box>
)}
</CardContainer>

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

@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import parsePhoneNumberFromString from 'libphonenumber-js';
import { PageWrapper } from '../PageWrapper';
@@ -40,20 +40,21 @@ export function PhoneNumber() {
const { loading: isSendingCode, execute: executeSendCode } =
useApi(sendVerificationCode);
const { loading: isVerifying, execute: executeConfirmCode } = useApi(
confirmPhoneNumberCode,
);
const { loading: isChangingPhone, execute: executeChangePhone } =
useApi(changePhoneNumber);
const isBusy = useMemo(
() => isVerifying || isSendingCode || isChangingPhone,
[isVerifying, isSendingCode, isChangingPhone],
);
useEffect(() => {
const loadProfile = async () => {
const profileData = await refetchProfile();
if (!profileData) return;
if (profileData?.success) {
setPhones([
{
@@ -69,36 +70,32 @@ export function PhoneNumber() {
});
}
};
loadProfile();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
void loadProfile();
}, [refetchProfile, toast]);
useEffect(() => {
if (!phoneNumberTouched) return;
if (!phoneNumber) {
setPhoneNumberError(t('settingForm.thisFieldIsRequired'));
return;
}
if (!isPhoneValid(countryCode, phoneNumber)) {
const parsed = parsePhoneNumberFromString(countryCode + phoneNumber);
const valid = Boolean(parsed?.isValid());
if (!valid) {
setPhoneNumberError(t('settingForm.phoneNumberIsInvalid'));
} else {
setPhoneNumberError(undefined);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [countryCode, phoneNumber, phoneNumberTouched]);
}, [countryCode, phoneNumber, phoneNumberTouched, t]);
useEffect(() => {
if (!verificationCodeTouched) return;
if (!verificationCode) {
setVerificationCodeError(t('settingForm.verificationCodeRequired'));
return;
}
setVerificationCodeError(undefined);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [verificationCode, verificationCodeTouched]);
const isPhoneValid = (code: string, phone: string) => {
const phoneNum = parsePhoneNumberFromString(code + phone);
return phoneNum?.isValid();
};
}, [verificationCode, verificationCodeTouched, t]);
const handleBlur = (key: string) => {
if (key === 'phoneNumber') {
@@ -126,14 +123,11 @@ export function PhoneNumber() {
const handleSendCode = async () => {
setPhoneNumberTouched(true);
if (phoneNumberError) return;
if (!phoneNumber || phoneNumberError) return;
const result = await executeSendCode({
phoneNumber: countryCode + phoneNumber.replace(/^0/, ''),
});
if (!result) return;
if (result?.success) {
setButtonState('counting');
setIsVerified(false);
@@ -151,18 +145,13 @@ export function PhoneNumber() {
const handleVerifyCode = async () => {
setVerificationCodeTouched(true);
if (verificationCodeError) return;
if (!verificationCode || verificationCodeError) return;
const fullPhoneNumber = countryCode + phoneNumber.replace(/^0/, '');
const confirmResult = await executeConfirmCode({
phoneNumber: fullPhoneNumber,
verifyCode: verificationCode,
});
if (!confirmResult) return;
if (!confirmResult.success || !confirmResult.confirm) {
toast({
message: confirmResult?.message || t('message.serverError'),
@@ -170,19 +159,15 @@ export function PhoneNumber() {
});
return;
}
setIsVerified(true);
toast({
message: t('settingForm.phoneVerified'),
severity: 'success',
});
const changeResult = await executeChangePhone({
phoneNumber: fullPhoneNumber,
});
if (!changeResult) return;
if (changeResult?.success) {
setPhones([
{
@@ -212,6 +197,8 @@ export function PhoneNumber() {
isEditing={isEditing}
toggleEdit={toggleEdit}
t={t}
formId="phoneForm"
isSubmitting={isBusy}
/>
}
>
@@ -228,6 +215,16 @@ export function PhoneNumber() {
<CircularProgress />
</Box>
) : isEditing ? (
<Box
component="form"
id="phoneForm"
noValidate
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
if (!isBusy) void handleVerifyCode();
}}
>
<PhoneEditForm
phoneNumber={phoneNumber}
setPhoneNumber={setPhoneNumber}
@@ -236,19 +233,22 @@ export function PhoneNumber() {
verificationCode={verificationCode}
setVerificationCode={setVerificationCode}
isVerified={isVerified}
isVerifying={isVerifying || isSendingCode || isChangingPhone}
isVerifying={isBusy}
isSendingCode={isSendingCode}
buttonState={buttonState}
setButtonState={setButtonState}
handleSendCode={handleSendCode}
handleVerifyClick={handleVerifyCode}
phoneNumberError={phoneNumberTouched ? phoneNumberError : undefined}
phoneNumberError={
phoneNumberTouched ? phoneNumberError : undefined
}
verificationCodeError={
verificationCodeTouched ? verificationCodeError : undefined
}
handleBlur={handleBlur}
phones={phones}
/>
</Box>
) : (
<PhoneDisplay
phones={phones.map((p) => {

29
src/features/profile/components/userInformation/phoneNumber/PhoneActionButtons.tsx
View File

@@ -8,8 +8,10 @@ export default function PhoneActionButtons({
}: PhoneActionButtonsProps) {
return (
<Box sx={{ display: 'flex', gap: 1 }}>
{isEditing && (
{isEditing ? (
<>
<Button
type="button"
variant="text"
onClick={toggleEdit}
size="large"
@@ -21,23 +23,36 @@ export default function PhoneActionButtons({
>
{t('settingForm.rejectButton')}
</Button>
)}
<Button
type="submit"
form="phoneForm"
size="large"
variant="outlined"
sx={{
borderRadius: 1,
bgcolor: 'primary.main',
color: 'primary.contrastText',
whiteSpace: 'nowrap',
textTransform: 'none',
}}
>
{t('settingForm.saveButton')}
</Button>
</>
) : (
<Button
onClick={toggleEdit}
size="large"
variant="outlined"
sx={{
borderRadius: 1,
bgcolor: isEditing ? 'primary.main' : 'background.default',
color: isEditing ? 'primary.contrastText' : 'primary.main',
whiteSpace: 'nowrap',
textTransform: 'none',
}}
>
{isEditing
? t('settingForm.saveButton')
: t('settingForm.editPhoneNumber')}
{t('settingForm.editPhoneNumber')}
</Button>
)}
</Box>
);
}

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

@@ -54,6 +54,21 @@ export default function SocialMediaDialog({
return true;
};
const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
e.preventDefault();
e.stopPropagation();
if (isLoading) return;
if (dialogStep === 'enterEmail') {
setTouched(true);
if (!validateEmail(emailInput)) return;
onSendCode();
} else {
onConfirmEmail();
}
};
return (
<Dialog
open={open}
@@ -77,6 +92,7 @@ export default function SocialMediaDialog({
</Box>
</DialogTitle>
<Box component="form" onSubmit={handleSubmit}>
<DialogContent
sx={{
display: 'flex',
@@ -86,7 +102,9 @@ export default function SocialMediaDialog({
}}
>
<Box>
<Typography fontWeight="bold">{t('settingForm.newEmail')}</Typography>
<Typography fontWeight="bold">
{t('settingForm.newEmail')}
</Typography>
<Typography variant="body2" color="text.secondary">
{t('settingForm.dialogHeader')}
</Typography>
@@ -109,7 +127,7 @@ export default function SocialMediaDialog({
autoComplete="email"
inputMode="email"
sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 }, mt: 2 }}
autoFocus
autoFocus={dialogStep === 'enterEmail'}
disabled={isLoading || dialogStep === 'enterCode'}
error={touched && !!emailError}
helperText={touched && emailError ? emailError : ' '}
@@ -136,8 +154,8 @@ export default function SocialMediaDialog({
fullWidth
sx={{ height: 48, textTransform: 'none', borderRadius: 2 }}
variant="contained"
type="submit"
disabled={isLoading || (dialogStep === 'enterEmail' && !emailInput)}
onClick={dialogStep === 'enterEmail' ? onSendCode : onConfirmEmail}
>
{isLoading ? (
<CircularProgress size={24} color="inherit" />
@@ -148,6 +166,7 @@ export default function SocialMediaDialog({
)}
</Button>
</Box>
</Box>
</Dialog>
);
}

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

@@ -1,3 +1,5 @@
import type { TFunction } from 'i18next';
export enum Gender {
Male = 2,
Female = 1,
@@ -93,7 +95,9 @@ export interface EmailAccount {
export interface PhoneActionButtonsProps {
isEditing: boolean;
toggleEdit: () => void;
t: (key: string) => string;
t: TFunction<'setting'>;
formId?: string;
isSubmitting?: boolean;
}
export interface PhoneDisplayProps {