Merge pull request #32 from rkheftan/fix/enter

feat: add using enter instead pushing the button

.env

@@ -1,6 +1,6 @@
 VITE_GOOGLE_CLIENT_ID=https://272098283932-bft2gvlgjn8edopg0lnqjq1i9ekdmipt.apps.googleusercontent.com
 VITE_DEFUALT_AUTH_RETURN_URL=/setting/profile
-VITE_APP_URL=https://account.business-harmony.com
+VITE_APP_URL=https://accounts.business-harmony.com
 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

src/features/authentication/components/AuthenticationSteps/CompleteSignUp.tsx

@@ -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';
@@ -78,6 +78,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>
@@ -94,7 +102,7 @@ export const CompleteSignUp = ({
           inputRef={inputRef}
           label={t('completeSignUp.phoneNumber')}
           value={value}
-        onChange={handleChange}
+          onChange={(e) => setValue(e.target.value)}
           onBlur={handleBlur}
           error={inputError}
           helperText={inputError ? error : ''}
@@ -116,9 +124,10 @@ export const CompleteSignUp = ({
           sx={{ my: 4 }}
         />
 
-      <Button loading={sendSmsLoading} onClick={handleCompleteSignUp}>
+        <Button loading={sendSmsLoading} type="submit">
           {t('verify.confirmAndContinue')}
         </Button>
+      </Box>
     </AuthenticationCard>
   );
 };

src/features/authentication/components/AuthenticationSteps/EnterPasswordForm.tsx

@@ -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,

src/features/authentication/components/AuthenticationSteps/GoogleAuthentication.tsx

@@ -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 {

src/features/authentication/components/AuthenticationSteps/LoginRegiserForm.tsx

@@ -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';
@@ -124,6 +124,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">
@@ -159,7 +169,7 @@ export function LoginRegisterForm({
         />
 
         <Stack spacing={2}>
-        <Button loading={userStatusLoading} onClick={handleSubmit}>
+          <Button loading={userStatusLoading} type="submit">
             {t('loginForm.submitButton')}
           </Button>
 
@@ -169,6 +179,7 @@ export function LoginRegisterForm({
             disabled={userStatusLoading}
           />
         </Stack>
+      </Box>
     </AuthenticationCard>
   );
 }

src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx

@@ -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

src/features/authentication/components/AuthenticationSteps/VerifyPhoneNumber.tsx

@@ -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

src/features/authentication/components/ForgetPassword/ForgetPasswordOtp.tsx

@@ -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
+          <Button type="submit" loading={confirmForgetPassCodeLoading}>
-          onClick={handleVerifyOTP}
-          loading={confirmForgetPassCodeLoading}
-        >
             {t('forgetPassword.confirm')}
           </Button>
+        </Box>
       </AuthenticationCard>
 
       <Stack

src/features/authentication/components/UserCompletionForm/SubmitSection.tsx

@@ -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' },

src/features/authentication/routes/UserCompletionPage.tsx

@@ -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>

src/features/authentication/types/settingForm.ts

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

src/features/profile/components/security/PasswordDialog.tsx

@@ -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>
   );
 }

src/features/profile/components/userInformation/PersonalInformation.tsx

@@ -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);
               }}
             />
-            )}
+            <InfoRowEdit ref={infoRowEditRef} data={data} setData={setData} />
-            {data &&
+          </Box>
-              (isEditing ? (
-                <InfoRowEdit
-                  ref={infoRowEditRef}
-                  data={data}
-                  setData={setData}
-                />
         ) : (
+          <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>

src/features/profile/components/userInformation/PhoneNumber.tsx

@@ -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();
+    void loadProfile();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [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, t]);
-  }, [countryCode, phoneNumber, phoneNumberTouched]);
 
   useEffect(() => {
+    if (!verificationCodeTouched) return;
     if (!verificationCode) {
       setVerificationCodeError(t('settingForm.verificationCodeRequired'));
       return;
     }
     setVerificationCodeError(undefined);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [verificationCode, verificationCodeTouched, t]);
-  }, [verificationCode, verificationCodeTouched]);
-
-  const isPhoneValid = (code: string, phone: string) => {
-    const phoneNum = parsePhoneNumberFromString(code + phone);
-    return phoneNum?.isValid();
-  };
 
   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 (!verificationCode || verificationCodeError) return;
-    if (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) => {

src/features/profile/components/userInformation/phoneNumber/PhoneActionButtons.tsx

@@ -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.editPhoneNumber')}
-          ? t('settingForm.saveButton')
-          : t('settingForm.editPhoneNumber')}
         </Button>
+      )}
     </Box>
   );
 }

src/features/profile/components/userInformation/socialMedia/SocialMediaDialog.tsx

@@ -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>
   );
 }

src/features/profile/types/settingsType.ts

@@ -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 {