feat: add using enter instead pushing the button

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';
@@ -120,51 +120,62 @@ export function LoginRegisterForm({
 
   return (
     <AuthenticationCard>
-      <Stack spacing={1}>
-        <Typography variant="h5">{t('loginForm.title')}</Typography>
-        <Typography variant="body2" color="text.secondary">
-          {t('loginForm.description')}
-        </Typography>
-      </Stack>
-
-      <TextField
-        ref={textFieldRef}
-        inputRef={inputRef}
-        label={t('loginForm.emailOrPhoneLabel')}
-        value={loginRegisterValue}
-        onChange={handleInputChange}
-        onBlur={handleBlur}
-        error={inputError}
-        helperText={inputError ? error : ''}
-        autoFocus
-        slotProps={{
-          htmlInput: { dir: 'auto', sx: { lineHeight: 1.5, paddingX: 0 } },
-          input: {
-            endAdornment: (
-              <CountryCodeSelector
-                value={countryCode}
-                onChange={setCountryCode}
-                show={showAdornment}
-                menuAnchor={textFieldRef.current}
-                onCloseFocusRef={inputRef}
-              />
-            ),
-          },
+      <Box
+        component="form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (!userStatusLoading) {
+            void handleSubmit();
+          }
         }}
-        sx={{ my: 4 }}
-      />
+      >
+        <Stack spacing={1}>
+          <Typography variant="h5">{t('loginForm.title')}</Typography>
+          <Typography variant="body2" color="text.secondary">
+            {t('loginForm.description')}
+          </Typography>
+        </Stack>
 
-      <Stack spacing={2}>
-        <Button loading={userStatusLoading} onClick={handleSubmit}>
-          {t('loginForm.submitButton')}
-        </Button>
-
-        <GoogleAuthentication
-          authFactory={authFactory}
-          onGoogleAuthenticated={onGoogleAuthenticated}
-          disabled={userStatusLoading}
+        <TextField
+          ref={textFieldRef}
+          inputRef={inputRef}
+          label={t('loginForm.emailOrPhoneLabel')}
+          value={loginRegisterValue}
+          onChange={handleInputChange}
+          onBlur={handleBlur}
+          error={inputError}
+          helperText={inputError ? error : ''}
+          autoFocus
+          slotProps={{
+            htmlInput: { dir: 'auto', sx: { lineHeight: 1.5, paddingX: 0 } },
+            input: {
+              endAdornment: (
+                <CountryCodeSelector
+                  value={countryCode}
+                  onChange={setCountryCode}
+                  show={showAdornment}
+                  menuAnchor={textFieldRef.current}
+                  onCloseFocusRef={inputRef}
+                />
+              ),
+            },
+          }}
+          sx={{ my: 4 }}
         />
-      </Stack>
+
+        <Stack spacing={2}>
+          <Button loading={userStatusLoading} type="submit">
+            {t('loginForm.submitButton')}
+          </Button>
+
+          <GoogleAuthentication
+            authFactory={authFactory}
+            onGoogleAuthenticated={onGoogleAuthenticated}
+            disabled={userStatusLoading}
+          />
+        </Stack>
+      </Box>
     </AuthenticationCard>
   );
 }