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

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

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;
@@ -166,43 +165,54 @@ export function OtpVerifyForm({
     <Stack alignItems="center">
       <AuthenticationCard>
         <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: 4,
-            mb: 0.5,
+          component="form"
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!loginSignUpLoading) {
+              void handleVerifyOTP();
+            }
           }}
         >
-          <Typography variant="h5">{t('verify.verify')}</Typography>
-
-          <Button
-            variant="outlined"
-            size="large"
-            sx={{ textTransform: 'lowercase', width: 'auto' }}
-            endIcon={<Icon Component={Edit2} />}
-            onClick={onEditValue}
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 4,
+              mb: 0.5,
+            }}
           >
-            {authType === 'phone' ? countryCode + value : value}
+            <Typography variant="h5">{t('verify.verify')}</Typography>
+
+            <Button
+              variant="outlined"
+              size="large"
+              sx={{ textTransform: 'lowercase', width: 'auto' }}
+              endIcon={<Icon Component={Edit2} />}
+              onClick={onEditValue}
+            >
+              {authType === 'phone' ? countryCode + value : value}
+            </Button>
+          </Box>
+
+          <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
+            {otpMessage}
+          </Typography>
+
+          <DigitInput
+            error={otpDigitInvalid || isStatusSuccess === false}
+            success={isStatusSuccess === true}
+            onChange={(value) => setOtpCode(value)}
+          />
+
+          <Button type="submit" loading={loginSignUpLoading}>
+            {authMode === 'register'
+              ? t('verify.confirmAndContinue')
+              : t('verify.confirmAndLogin')}
           </Button>
         </Box>
-
-        <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
-          {otpMessage}
-        </Typography>
-
-        <DigitInput
-          error={otpDigitInvalid || isStatusSuccess === false}
-          success={isStatusSuccess === true}
-          onChange={(value) => setOtpCode(value)}
-        />
-
-        <Button onClick={handleVerifyOTP} loading={loginSignUpLoading}>
-          {authMode === 'register'
-            ? t('verify.confirmAndContinue')
-            : t('verify.confirmAndLogin')}
-        </Button>
       </AuthenticationCard>
 
       <Stack

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

@@ -96,43 +96,54 @@ export function VerifyPhoneNumber({
     <Stack alignItems="center">
       <AuthenticationCard>
         <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: 4,
-            mb: 0.5,
+          component="form"
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!confirmSmsOtpLoading) {
+              void handleVerifyOTP();
+            }
           }}
         >
-          <Typography variant="h5">{t('verify.verify')}</Typography>
-
-          <Button
-            variant="outlined"
-            size="large"
-            sx={{ textTransform: 'lowercase', width: 'auto' }}
-            endIcon={<Icon Component={Edit2} />}
-            onClick={onEditValue}
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 4,
+              mb: 0.5,
+            }}
           >
-            {countryCode + value}
+            <Typography variant="h5">{t('verify.verify')}</Typography>
+
+            <Button
+              variant="outlined"
+              size="large"
+              sx={{ textTransform: 'lowercase', width: 'auto' }}
+              endIcon={<Icon Component={Edit2} />}
+              onClick={onEditValue}
+            >
+              {countryCode + value}
+            </Button>
+          </Box>
+
+          <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
+            {t(
+              'verify.a4DigitVerificationCodeHasBeenSentToYourBobileNumberPleaseEnterIt',
+            )}
+          </Typography>
+
+          <DigitInput
+            error={otpDigitInvalid || isStatusSuccess === false}
+            success={isStatusSuccess === true}
+            onChange={(value) => setOtpCode(value)}
+          />
+
+          <Button type="submit" loading={confirmSmsOtpLoading}>
+            {t('verify.confirmAndLogin')}
           </Button>
         </Box>
-
-        <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
-          {t(
-            'verify.a4DigitVerificationCodeHasBeenSentToYourBobileNumberPleaseEnterIt',
-          )}
-        </Typography>
-
-        <DigitInput
-          error={otpDigitInvalid || isStatusSuccess === false}
-          success={isStatusSuccess === true}
-          onChange={(value) => setOtpCode(value)}
-        />
-
-        <Button onClick={handleVerifyOTP} loading={confirmSmsOtpLoading}>
-          {t('verify.confirmAndLogin')}
-        </Button>
       </AuthenticationCard>
 
       <Stack