fix: styles

src/components/CountryFlag.tsx

@@ -26,7 +26,7 @@ export function CountryFlag({ code }: CountryFlagProps) {
         alt={displayName}
         width="24"
         height="16"
-        style={{ borderRadius: '2px', border: '1px solid #ccc' }}
+        style={{ borderRadius: 0.25, border: '1px solid' }}
       />
       <Typography variant="body2">{displayName}</Typography>
     </Box>

src/features/authentication/api/types.ts

@@ -0,0 +1,44 @@
+export interface TokenRequestPayload {
+  grant_type: 'password';
+  username: string;
+  password: string;
+  client_id: string;
+  scope: string;
+}
+
+export interface TokenApiResponse {
+  access_token: string;
+}
+
+export interface GenericApiResponse {
+  success: boolean;
+  message: string;
+  errorCode?: number;
+}
+
+export interface SendEmailOtpPayload {
+  email: string;
+}
+
+export interface ConfirmEmailOtpPayload {
+  email: string;
+  otpCode: string;
+}
+
+export interface CompleteUserInfoPayload {
+  userId: string;
+  firstName: string;
+  lastName: string;
+  gender: 0 | 1 | 2;
+  nationalId: string;
+  birthDate: Date | null;
+  country: string;
+  savePassword?: boolean;
+  password?: string;
+  saveEmail?: boolean;
+  email?: string;
+}
+
+export interface CompleteUserInfoResponse extends GenericApiResponse {
+  validations: { property: string; message: string }[] | null;
+}

src/features/authentication/api/userCompletion.ts

@@ -0,0 +1,56 @@
+import {
+  type SendEmailOtpPayload,
+  type TokenApiResponse,
+  type ConfirmEmailOtpPayload,
+  type CompleteUserInfoPayload,
+  type CompleteUserInfoResponse,
+  type GenericApiResponse,
+} from './types';
+import axios from 'axios';
+import apiClient from '@/lib/apiClient';
+
+const AUTH_API_URL = 'https://accounts.business-harmony.com';
+
+export const getTokenApi = async (): Promise<TokenApiResponse> => {
+  const body = new URLSearchParams();
+  body.set('grant_type', 'password');
+  body.set('username', 'zareian.1381@gmail.com');
+  body.set('password', '123@Qweasd');
+  body.set('client_id', 'harmony_identity');
+  body.set('scope', 'openid harmony_identity profile offline_access');
+
+  const { data } = await axios.post<TokenApiResponse>(
+    `${AUTH_API_URL}/connect/token`,
+    body.toString(),
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+    },
+  );
+  return data;
+};
+
+export const sendEmailOtpApi = async (
+  payload: SendEmailOtpPayload,
+): Promise<GenericApiResponse & { codeSentAnyway?: boolean }> => {
+  const { data } = await apiClient.post('/User/SendEmailOtp', payload);
+  return data;
+};
+
+export const confirmEmailOtpApi = async (
+  payload: ConfirmEmailOtpPayload,
+): Promise<GenericApiResponse> => {
+  const { data } = await apiClient.post('/User/ConfirmEmailOtp', payload);
+  return data;
+};
+
+export const completeUserInformationApi = async (
+  payload: CompleteUserInfoPayload,
+): Promise<CompleteUserInfoResponse> => {
+  const { data } = await apiClient.post(
+    '/User/CompleteUserInformation',
+    payload,
+  );
+  return data;
+};

src/features/authentication/components/EmailSection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import {
   TextField,
   Box,
@@ -28,7 +28,7 @@ interface EmailSectionProps {
   handleSendCode: () => void;
   handleVerifyCode: () => void;
   emailVerified: boolean;
-  isVerifyingCode: boolean;
+  loading: boolean;
   handleEditEmail: () => void;
 }
 
@@ -46,15 +46,13 @@ export function EmailSection({
   handleSendCode,
   handleVerifyCode,
   emailVerified,
-  isVerifyingCode,
+  loading,
   handleEditEmail,
 }: EmailSectionProps) {
   const { t } = useTranslation('completionForm');
 
   const onSendCodeClick = () => {
-    if (!correctEmail) {
-      return;
-    }
+    if (!correctEmail) return;
     handleSendCode();
   };
 
@@ -62,15 +60,6 @@ export function EmailSection({
     setShowEmail(e.target.checked);
   };
 
-  useEffect(() => {
-    if (emailVerified) {
-    }
-  }, [emailVerified]);
-
-  const fieldSx = {
-    flex: '1 1 260px',
-  };
-
   return (
     <>
       <FormGroup>
@@ -90,7 +79,6 @@ export function EmailSection({
           </Typography>
         </Box>
       </FormGroup>
-
       {showEmail && (
         <Box
           sx={{
@@ -105,10 +93,7 @@ export function EmailSection({
               display: 'flex',
               flexWrap: 'wrap',
               gap: 2,
-              justifyContent: 'center',
-              '@media(min-width: 600px)': {
-                justifyContent: 'flex-start',
-              },
+              justifyContent: { xs: 'center', sm: 'flex-start' },
             }}
           >
             <TextField
@@ -118,40 +103,39 @@ export function EmailSection({
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               error={email.length > 0 && !correctEmail}
-              sx={fieldSx}
-              InputProps={{
-                startAdornment:
-                  !isVerifyingCode && emailVerified ? (
-                    <InputAdornment position="end">
-                      <Icon
-                        Component={TickCircle}
-                        size="medium"
-                        variant="Bold"
-                        color="success.main"
-                      />
-                    </InputAdornment>
-                  ) : null,
-                endAdornment:
-                  buttonState === 'counting' ? (
-                    <InputAdornment position="start">
-                      <IconButton onClick={handleEditEmail}>
+              sx={{ flex: '1 1 260px' }}
+              slotProps={{
+                input: {
+                  startAdornment:
+                    !loading && emailVerified ? (
+                      <InputAdornment position="end">
                         <Icon
-                          Component={Edit}
-                          color="primary.main"
+                          Component={TickCircle}
                           size="medium"
+                          variant="Bold"
+                          color="success.main"
                         />
-                      </IconButton>
-                    </InputAdornment>
-                  ) : null,
-              }}
-              inputProps={{
-                style: {
-                  paddingLeft: buttonState === 'counting' ? '0px' : undefined,
+                      </InputAdornment>
+                    ) : null,
+                  endAdornment:
+                    buttonState === 'counting' ? (
+                      <InputAdornment position="start">
+                        <IconButton onClick={handleEditEmail}>
+                          <Icon
+                            Component={Edit}
+                            color="primary.main"
+                            size="medium"
+                          />
+                        </IconButton>
+                      </InputAdornment>
+                    ) : null,
+                  sx: {
+                    paddingLeft: buttonState === 'counting' ? 0 : undefined,
+                  },
                 },
               }}
             />
-
-            {!isVerifyingCode && !emailVerified && (
+            {!loading && !emailVerified && (
               <Button
                 type="button"
                 variant="text"
@@ -167,7 +151,6 @@ export function EmailSection({
               </Button>
             )}
           </Box>
-
           {email && (
             <Typography
               sx={{ color: correctEmail ? 'success.main' : 'error.main' }}
@@ -176,17 +159,13 @@ export function EmailSection({
               {correctEmail ? '' : t('completion.emailCorrectForm')}
             </Typography>
           )}
-
           {!emailVerified && codeSent && correctEmail && (
             <Box
               sx={{
                 display: 'flex',
                 flexWrap: 'wrap',
                 gap: 2,
-                justifyContent: 'center',
-                '@media(min-width: 600px)': {
-                  justifyContent: 'flex-start',
-                },
+                justifyContent: { xs: 'center', sm: 'flex-start' },
               }}
             >
               <TextField
@@ -194,21 +173,21 @@ export function EmailSection({
                 variant="outlined"
                 value={verificationCode}
                 onChange={(e) => setVerificationCode(e.target.value)}
-                sx={fieldSx}
-                disabled={isVerifyingCode}
+                sx={{ flex: '1 1 260px' }}
+                disabled={loading}
               />
               <Button
                 variant="contained"
                 onClick={handleVerifyCode}
-                disabled={isVerifyingCode}
+                disabled={loading}
                 sx={{
                   width: { xs: '100%', sm: '156px' },
                   border: 0.5,
                   textTransform: 'none',
                 }}
               >
-                {isVerifyingCode ? (
-                  <CircularProgress />
+                {loading ? (
+                  <CircularProgress size={20} />
                 ) : (
                   t('completion.checkCodeButton')
                 )}

src/features/authentication/components/PasswordSection.tsx

@@ -46,7 +46,7 @@ export function PasswordSection({
 }: PasswordSectionProps) {
   const { t } = useTranslation('completionForm');
   const [showPasswordText, setShowPasswordText] = useState(false);
-  const [showPasswordRepititonText, setShowPasswordRepetitionText] =
+  const [showPasswordRepetitionText, setShowPasswordRepetitionText] =
     useState(false);
 
   const handleTogglePasswordSection = (
@@ -59,10 +59,6 @@ export function PasswordSection({
   const handleTogglePasswordRepetitionEye = () =>
     setShowPasswordRepetitionText((prev) => !prev);
 
-  const fieldSx = {
-    flex: '1 1 260px',
-  };
-
   return (
     <>
       <FormGroup>
@@ -102,10 +98,7 @@ export function PasswordSection({
               display: 'flex',
               flexWrap: 'wrap',
               gap: 2,
-              justifyContent: 'center',
-              '@media(min-width: 600px)': {
-                justifyContent: 'flex-start',
-              },
+              justifyContent: { xs: 'center', sm: 'flex-start' },
             }}
           >
             <TextField
@@ -114,30 +107,26 @@ export function PasswordSection({
               onChange={(e) => setPassword(e.target.value)}
               variant="outlined"
               type={showPasswordText ? 'text' : 'password'}
-              sx={fieldSx}
+              sx={{
+                flex: '1 1 260px',
+                '& .MuiInputBase-input': {
+                  pr: 8, // Increased padding to accommodate both icons
+                },
+              }}
               InputProps={{
                 endAdornment: (
-                  <InputAdornment position="end" sx={{ height: 'unset' }}>
+                  <InputAdornment position="end">
                     <Box
                       sx={{
                         display: 'flex',
                         alignItems: 'center',
-                        width: '100%',
+                        justifyContent: 'flex-end',
+                        minWidth: '64px', // Adjusted to fit both icons
                       }}
                     >
-                      {validPassword && (
-                        <Box sx={{ position: 'absolute', left: 0, px: 2 }}>
-                          <Icon
-                            Component={TickCircle}
-                            size="medium"
-                            color="success.main"
-                            variant="Bold"
-                          />
-                        </Box>
-                      )}
                       <IconButton
                         onClick={handleTogglePasswordEye}
-                        sx={{ ml: validPassword ? 0.5 : 'auto' }}
+                        sx={{ p: 0.5 }}
                       >
                         {showPasswordText ? (
                           <Icon
@@ -153,15 +142,18 @@ export function PasswordSection({
                           />
                         )}
                       </IconButton>
+                      {validPassword && (
+                        <Icon
+                          Component={TickCircle}
+                          size="medium"
+                          color="success.main"
+                          variant="Bold"
+                        />
+                      )}
                     </Box>
                   </InputAdornment>
                 ),
               }}
-              inputProps={{
-                style: {
-                  paddingRight: validPassword ? '48px' : '20px',
-                },
-              }}
             />
 
             <TextField
@@ -175,56 +167,26 @@ export function PasswordSection({
                   ? t('completion.notCompatibility')
                   : ' '
               }
-              type={showPasswordRepititonText ? 'text' : 'password'}
-              sx={fieldSx}
+              type={showPasswordRepetitionText ? 'text' : 'password'}
+              sx={{
+                flex: '1 1 260px',
+              }}
               InputProps={{
                 endAdornment: (
-                  <InputAdornment position="end" sx={{ height: 'unset' }}>
+                  <InputAdornment position="end">
                     <Box
                       sx={{
                         display: 'flex',
                         alignItems: 'center',
-                        width: '100%',
+                        justifyContent: 'flex-end',
+                        minWidth: '64px',
                       }}
                     >
-                      {confirmPassword.length > 0 &&
-                        (matchPassword ? (
-                          <Box sx={{ position: 'absolute', left: 0, px: 2 }}>
-                            <Icon
-                              Component={TickCircle}
-                              size="medium"
-                              color="success.main"
-                              variant="Bold"
-                            />
-                          </Box>
-                        ) : (
-                          <Box
-                            sx={{
-                              position: 'absolute',
-                              left: 0,
-                              alignItems: 'center',
-                              px: 2,
-                            }}
-                          >
-                            <Icon
-                              Component={CloseCircle}
-                              size="medium"
-                              color="error.main"
-                              variant="Bold"
-                            />
-                          </Box>
-                        ))}
-
                       <IconButton
                         onClick={handleTogglePasswordRepetitionEye}
-                        sx={{
-                          ml:
-                            confirmPassword.length > 0 && matchPassword
-                              ? 0.5
-                              : 'auto',
-                        }}
+                        sx={{ p: 0.5 }}
                       >
-                        {showPasswordRepititonText ? (
+                        {showPasswordRepetitionText ? (
                           <Icon
                             Component={Eye}
                             color="primary.main"
@@ -238,18 +200,18 @@ export function PasswordSection({
                           />
                         )}
                       </IconButton>
+                      {confirmPassword.length > 0 && (
+                        <Icon
+                          Component={matchPassword ? TickCircle : CloseCircle}
+                          size="medium"
+                          color={matchPassword ? 'success.main' : 'error.main'}
+                          variant="Bold"
+                        />
+                      )}
                     </Box>
                   </InputAdornment>
                 ),
               }}
-              inputProps={{
-                style: {
-                  paddingRight:
-                    confirmPassword.length > 0 && matchPassword
-                      ? '48px'
-                      : '45px',
-                },
-              }}
             />
           </Box>
 
@@ -259,10 +221,7 @@ export function PasswordSection({
                 display: 'flex',
                 flexWrap: 'wrap',
                 gap: 2,
-                justifyContent: 'center',
-                '@media(min-width: 600px)': {
-                  justifyContent: 'flex-start',
-                },
+                justifyContent: { xs: 'center', sm: 'flex-start' },
               }}
             >
               <Box

src/features/authentication/components/PasswordValidation.tsx

@@ -32,7 +32,6 @@ export function PasswordValidationItem({
         variant="body2"
         color="text.primary"
         sx={{
-          fontSize: { xs: '0.85rem', sm: '0.875rem' },
           wordBreak: 'break-word',
           flex: 1,
         }}

src/features/authentication/components/PersonalInfoFields.tsx

@@ -15,14 +15,15 @@ import DateOfBirth from './DateOfBirth';
 import { countries } from '../data/Countries';
 import { CountryFlag } from '@/components/CountryFlag';
 import { Icon } from '@rkheftan/harmony-ui';
+import { Gender } from './types';
 
 interface PersonalInfoFieldsProps {
   firstName: string;
   setFirstName: (v: string) => void;
   lastName: string;
   setLastName: (v: string) => void;
-  sex: 'male' | 'female';
-  setSex: Dispatch<SetStateAction<'female' | 'male'>>;
+  sex: Gender;
+  setSex: Dispatch<SetStateAction<Gender>>;
   country: string;
   setCountry: (country: string) => void;
   nationalId: string;
@@ -46,19 +47,32 @@ export function PersonalInfoFields({
   setCountry,
 }: PersonalInfoFieldsProps) {
   const { t } = useTranslation('completionForm');
+
   const countryOptions = countries.map((c) => ({
     code: c.code,
     label: t(c.label, { ns: 'countries' }),
   }));
+
   const currentCountry = countryOptions.find((c) => c.code === country) || null;
 
-  const handleChangeSex = (e: SelectChangeEvent<'male' | 'female'>) => {
-    setSex(e.target.value as 'female' | 'male');
+  const handleChangeSex = (e: SelectChangeEvent<Gender>) => {
+    setSex(e.target.value as Gender);
   };
 
-  const fieldSx = {
-    flex: '1 1 260px',
-  };
+  const genderOptions = [
+    {
+      value: Gender.Female,
+      icon: Woman,
+      label: t('completion.woman'),
+      color: '#F50057',
+    },
+    {
+      value: Gender.Male,
+      icon: Man,
+      label: t('completion.man'),
+      color: '#0091EA',
+    },
+  ];
 
   return (
     <Box sx={{ display: 'flex', justifyContent: 'center' }}>
@@ -76,10 +90,7 @@ export function PersonalInfoFields({
             display: 'flex',
             flexWrap: 'wrap',
             gap: 2,
-            justifyContent: 'center',
-            '@media(min-width: 600px)': {
-              justifyContent: 'flex-start',
-            },
+            justifyContent: { xs: 'center', sm: 'flex-start' },
           }}
         >
           <TextField
@@ -88,7 +99,7 @@ export function PersonalInfoFields({
             variant="outlined"
             value={firstName}
             onChange={(e) => setFirstName(e.target.value)}
-            sx={fieldSx}
+            sx={{ flex: '1 1 260px' }}
           />
           <TextField
             label={t('completion.familyName')}
@@ -96,7 +107,7 @@ export function PersonalInfoFields({
             variant="outlined"
             value={lastName}
             onChange={(e) => setLastName(e.target.value)}
-            sx={fieldSx}
+            sx={{ flex: '1 1 260px' }}
           />
         </Box>
 
@@ -105,31 +116,24 @@ export function PersonalInfoFields({
             display: 'flex',
             flexWrap: 'wrap',
             gap: 2,
-            justifyContent: 'center',
-            '@media(min-width: 600px)': {
-              justifyContent: 'flex-start',
-            },
+            justifyContent: { xs: 'center', sm: 'flex-start' },
           }}
         >
-          <FormControl sx={fieldSx}>
+          <FormControl sx={{ flex: '1 1 260px' }}>
             <InputLabel>{t('completion.gender')}</InputLabel>
             <Select
               value={sex}
               label={t('completion.gender')}
               onChange={handleChangeSex}
             >
-              <MenuItem value="female">
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <Icon Component={Woman} color="#F50057" size="small" />
-                  {t('completion.woman')}
-                </Box>
-              </MenuItem>
-              <MenuItem value="male">
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <Icon Component={Man} size="small" color="#0091EA" />
-                  {t('completion.man')}
-                </Box>
-              </MenuItem>
+              {genderOptions.map((g) => (
+                <MenuItem key={g.value} value={g.value}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Icon Component={g.icon} size="small" color={g.color} />
+                    {g.label}
+                  </Box>
+                </MenuItem>
+              ))}
             </Select>
           </FormControl>
 
@@ -139,7 +143,7 @@ export function PersonalInfoFields({
             value={nationalId}
             onChange={(e) => setNationalId(e.target.value)}
             variant="outlined"
-            sx={fieldSx}
+            sx={{ flex: '1 1 260px' }}
           />
         </Box>
 
@@ -148,20 +152,15 @@ export function PersonalInfoFields({
             display: 'flex',
             flexWrap: 'wrap',
             gap: 2,
-            justifyContent: 'center',
-            '@media(min-width: 600px)': {
-              justifyContent: 'flex-start',
-            },
+            justifyContent: { xs: 'center', sm: 'flex-start' },
           }}
         >
           <Autocomplete
-            sx={fieldSx}
+            sx={{ flex: '1 1 260px' }}
             options={countryOptions}
             getOptionLabel={(option) => option.label}
             value={currentCountry}
-            onChange={(_, newValue) => {
-              setCountry(newValue?.code || '');
-            }}
+            onChange={(_, newValue) => setCountry(newValue?.code || '')}
             renderOption={(props, option) => (
               <Box component="li" {...props} key={option.code}>
                 <CountryFlag code={option.code} />
@@ -174,7 +173,7 @@ export function PersonalInfoFields({
             clearOnEscape
           />
 
-          <Box sx={fieldSx}>
+          <Box sx={{ flex: '1 1 260px' }}>
             <DateOfBirth value={birthDate} onChange={setBirthDate} />
           </Box>
         </Box>

src/features/authentication/components/SubmitSection.tsx

@@ -33,7 +33,7 @@ export function SubmitSection({ onSubmit, loading, error, success }: Props) {
           flexWrap: 'wrap',
           gap: 2,
           px: { xs: 2, sm: 0 },
-          mb: '17px',
+          mb: 2,
           justifyContent: { xs: 'center', sm: 'flex-start' },
         }}
       >
@@ -46,10 +46,10 @@ export function SubmitSection({ onSubmit, loading, error, success }: Props) {
           }}
           color="text.primary"
         >
-          {t('completion.agreementPart1')}{' '}
+          {t('completion.agreementPart1')}
           <Link href="#" onClick={handleOpenDialog}>
             {t('completion.agreementLinkText')}
-          </Link>{' '}
+          </Link>
           {t('completion.agreementPart2')}
         </Typography>
 
@@ -65,9 +65,7 @@ export function SubmitSection({ onSubmit, loading, error, success }: Props) {
         >
           {loading
             ? t('completion.submitting')
-            : success
-              ? t('completion.registerButton')
-              : t('completion.registerButton')}
+            : t('completion.registerButton')}
         </Button>
         {error && <Typography color="error">{error}</Typography>}
       </Box>

src/features/authentication/components/UserCompletionForm.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, Button } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import Logo from '@/components/Logo';
 import { PersonalInfoFields } from './PersonalInfoFields';
@@ -11,7 +11,13 @@ import { useToast } from '@rkheftan/harmony-ui';
 import { AxiosError } from 'axios';
 import { regex } from '../../../utils/regex';
 import { toLocaleDigits } from '../../../utils/persianDigit';
+import axios, { isAxiosError } from 'axios';
 import i18n from '@/config/i18n';
+import { Gender } from './types'; // ✅ Added
+
+interface TokenApiResponse {
+  access_token: string;
+}
 
 export function UserCompletionForm() {
   const { t } = useTranslation('completionForm');
@@ -20,7 +26,9 @@ export function UserCompletionForm() {
   const [lastName, setLastName] = useState('');
   const [nationalId, setNationalId] = useState('');
   const [birthDate, setBirthDate] = useState<Date | null>(null);
-  const [sex, setSex] = useState<'female' | 'male'>('female');
+
+  // ✅ Corrected section: use Gender enum
+  const [sex, setSex] = useState<Gender>(Gender.Female);
   const [country, setCountry] = useState('');
 
   const [showPasswordSection, setShowPasswordSection] = useState(false);
@@ -38,15 +46,14 @@ export function UserCompletionForm() {
   const [emailVerified, setEmailVerified] = useState(false);
   const [isVerifyingCode, setIsVerifyingCode] = useState(false);
 
-  const correctEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-
   const {
     hasNumber,
     hasMinLength,
     hasUpperAndLower,
     hasSpecialChar,
     validPassword,
-  } = regex(password);
+    correctEmail,
+  } = regex(password, email);
   const matchPassword = password === confirmPassword;
   const [showPasswordValidations, setShowPasswordValidations] = useState(false);
 
@@ -95,6 +102,42 @@ export function UserCompletionForm() {
     return t('completion.vericationCodeButton');
   };
 
+  const [tokenError, setTokenError] = useState<string | null>(null);
+  const apiUrl = 'https://accounts.business-harmony.com';
+  const tokenEndpoint = `${apiUrl}/connect/token`;
+  const getToken = async () => {
+    setTokenError(null);
+    try {
+      const body = new URLSearchParams();
+      body.set('grant_type', 'password');
+      body.set('username', 'zareian.1381@gmail.com');
+      body.set('password', '123@Qweasd');
+      body.set('client_id', 'harmony_identity');
+      body.set('scope', 'openid harmony_identity profile offline_access');
+      const response = await axios.post<TokenApiResponse>(
+        tokenEndpoint,
+        body.toString(),
+        {
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+        },
+      );
+      if (response.data?.access_token) {
+        localStorage.setItem('authToken', response.data.access_token);
+      } else {
+        throw new Error('No access token in response');
+      }
+    } catch (error: unknown) {
+      let message = 'Failed to get token';
+      if (isAxiosError(error) && error.response) {
+        message = `Request failed with status ${error.response.status}`;
+      } else if (error instanceof Error) {
+        message = error.message;
+      }
+      setTokenError(message);
+    }
+  };
   const storedToken = localStorage.getItem('authToken');
 
   const handleSendCode = async () => {
@@ -218,7 +261,7 @@ export function UserCompletionForm() {
           userId: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
           firstName,
           lastName,
-          gender: sex === 'female' ? 2 : 1,
+          gender: sex === Gender.Female ? 2 : 1, // ✅ Corrected
           nationalId,
           savePassword: showPasswordSection,
           password: showPasswordSection ? password : undefined,
@@ -302,8 +345,8 @@ export function UserCompletionForm() {
           setNationalId={setNationalId}
           birthDate={birthDate}
           setBirthDate={setBirthDate}
-          sex={sex}
-          setSex={setSex}
+          sex={sex} // ✅ Corrected
+          setSex={setSex} // ✅ Corrected
           country={country}
           setCountry={setCountry}
         />
@@ -338,7 +381,7 @@ export function UserCompletionForm() {
           handleSendCode={handleSendCode}
           handleVerifyCode={handleVerifyCode}
           emailVerified={emailVerified}
-          isVerifyingCode={isVerifyingCode}
+          loading={isVerifyingCode}
           handleEditEmail={handleEditEmail}
         />
         <SubmitSection
@@ -347,6 +390,15 @@ export function UserCompletionForm() {
           error={error}
           success={success}
         />
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={getToken}
+          size="large"
+          sx={{ textTransform: 'none' }}
+        >
+          Get Token
+        </Button>
       </Box>
     </Box>
   );

src/features/authentication/components/types.ts

@@ -0,0 +1,5 @@
+export enum Gender {
+  None = 0,
+  Female = 1,
+  Male = 2,
+}

src/utils/regex.ts

@@ -1,8 +1,9 @@
-export function regex(password: string) {
+export function regex(password: string, email: string) {
   const hasNumber = /\d/.test(password);
   const hasMinLength = password.length >= 8;
   const hasUpperAndLower = /[A-Z]/.test(password) && /[a-z]/.test(password);
   const hasSpecialChar = /[!@#$%^&*]/.test(password);
+  const correctEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
 
   return {
     hasNumber,
@@ -11,5 +12,6 @@ export function regex(password: string) {
     hasSpecialChar,
     validPassword:
       hasNumber && hasMinLength && hasUpperAndLower && hasSpecialChar,
+    correctEmail,
   };
 }