feat: add using enter instead pushing the button

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,6 +167,42 @@ 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,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+              bgcolor: 'background.paper',
+            }}
+          >
+            <ProfileImage
+              initials={initials}
+              uploadedImageUrl={uploadedImageUrl}
+              onImageChange={(file) => {
+                setUploadedImageFile(file);
+                const reader = new FileReader();
+                reader.onload = () =>
+                  setUploadedImageUrl(reader.result as string);
+                reader.readAsDataURL(file);
+              }}
+              onRemoveImage={() => {
+                setUploadedImageFile(null);
+                setUploadedImageUrl(null);
+              }}
+            />
+            <InfoRowEdit ref={infoRowEditRef} data={data} setData={setData} />
+          </Box>
         ) : (
           <Box
             sx={{
@@ -185,37 +214,11 @@ export function PersonalInformation() {
               bgcolor: 'background.paper',
             }}
           >
-            {isEditing && (
-              <ProfileImage
-                initials={initials}
-                uploadedImageUrl={uploadedImageUrl}
-                onImageChange={(file) => {
-                  setUploadedImageFile(file);
-                  const reader = new FileReader();
-                  reader.onload = () =>
-                    setUploadedImageUrl(reader.result as string);
-                  reader.readAsDataURL(file);
-                }}
-                onRemoveImage={() => {
-                  setUploadedImageFile(null);
-                  setUploadedImageUrl(null);
-                }}
-              />
-            )}
-            {data &&
-              (isEditing ? (
-                <InfoRowEdit
-                  ref={infoRowEditRef}
-                  data={data}
-                  setData={setData}
-                />
-              ) : (
-                <InfoRowDisplay
-                  data={data}
-                  uploadedImageUrl={uploadedImageUrl}
-                  initials={initials}
-                />
-              ))}
+            <InfoRowDisplay
+              data={data}
+              uploadedImageUrl={uploadedImageUrl}
+              initials={initials}
+            />
           </Box>
         )}
       </CardContainer>