feat: add using enter instead pushing the button

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';
@@ -69,47 +69,56 @@ export const CompleteSignUp = ({
 
   return (
     <AuthenticationCard>
-      <Typography variant="h5" sx={{ mb: 0.5 }}>
-        {t('completeSignUp.completeSignUp')}
-      </Typography>
-
-      <Typography variant="body2" color="textSecondary" sx={{ mt: 1, mb: 2 }}>
-        {t(
-          'completeSignUp.emailHasBeenSuccessfullyVerifiedPleaseEnterYourContactNumberToContinue',
-          { email },
-        )}
-      </Typography>
-
-      <TextField
-        ref={textFieldRef}
-        inputRef={inputRef}
-        label={t('completeSignUp.phoneNumber')}
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        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={true}
-                menuAnchor={textFieldRef.current}
-                onCloseFocusRef={inputRef}
-              />
-            ),
-          },
+      <Box
+        component="form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (!sendSmsLoading) void handleCompleteSignUp();
         }}
-        sx={{ my: 4 }}
-      />
+      >
+        <Typography variant="h5" sx={{ mb: 0.5 }}>
+          {t('completeSignUp.completeSignUp')}
+        </Typography>
 
-      <Button loading={sendSmsLoading} onClick={handleCompleteSignUp}>
-        {t('verify.confirmAndContinue')}
-      </Button>
+        <Typography variant="body2" color="textSecondary" sx={{ mt: 1, mb: 2 }}>
+          {t(
+            'completeSignUp.emailHasBeenSuccessfullyVerifiedPleaseEnterYourContactNumberToContinue',
+            { email },
+          )}
+        </Typography>
+
+        <TextField
+          ref={textFieldRef}
+          inputRef={inputRef}
+          label={t('completeSignUp.phoneNumber')}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          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={true}
+                  menuAnchor={textFieldRef.current}
+                  onCloseFocusRef={inputRef}
+                />
+              ),
+            },
+          }}
+          sx={{ my: 4 }}
+        />
+
+        <Button loading={sendSmsLoading} type="submit">
+          {t('verify.confirmAndContinue')}
+        </Button>
+      </Box>
     </AuthenticationCard>
   );
 };