Merge branch 'develop' into feat/user-completion-form

src/features/authorization/api/authorizationAPI.ts

@@ -0,0 +1,104 @@
+import type { ApiResponse } from '@/types/apiResponse';
+import type { FetchPromise } from '@/types/fetchPromise';
+import type {
+  CompleteUserInformationRequest,
+  ConfirmEmailOtpRequest,
+  ConfirmForgetPassCodeRequest,
+  ConfirmOtpResponse,
+  ConfirmSmsOtpRequest,
+  GetUserStatusByPhoneNumberOrEmailRequest,
+  GetUserStatusByPhoneNumberOrEmailResponse,
+  LoginOrSignUpWithGoogleRequest,
+  LoginOrSignUpWithGoogleResponse,
+  LoginRequest,
+  LoginResponse,
+  PasswordLoginRequest,
+  ResetPasswordRequest,
+  ResetPasswordResponse,
+  SendEmailOtpRequest,
+  SendForgetPassCodeRequest,
+  SendSmsOtpRequest,
+} from '../types/userTypes';
+
+const API_URL = 'https://accounts.business-harmony.com/api';
+
+export const fetchRequest = <T = ApiResponse>(
+  url: string,
+  body: Object | null,
+): FetchPromise<T> => {
+  return fetch(`${API_URL}/${url}`, {
+    body: JSON.stringify(body),
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+// GetUserStatusByPhoneNumberOrEmail
+
+export const getUserStatusByPhoneNumberOrEmail = async (
+  body: GetUserStatusByPhoneNumberOrEmailRequest,
+) => {
+  return fetchRequest<GetUserStatusByPhoneNumberOrEmailResponse>(
+    'User/GetUserStatusByPhoneNumberOrEmail',
+    body,
+  );
+};
+
+export const loginOrSignUpWithOtp = async (body: LoginRequest) => {
+  return fetchRequest<LoginResponse>('User/LoginOrSignUpWithOtp', body);
+};
+
+export const loginWithPassword = async (body: PasswordLoginRequest) => {
+  return fetchRequest<LoginResponse>('User/LoginWithPassword', body);
+};
+
+export const sendSmsOtp = async (body: SendSmsOtpRequest) => {
+  return fetchRequest<ApiResponse>('User/SendSmsOtp', body);
+};
+
+export const sendEmailOtp = async (body: SendEmailOtpRequest) => {
+  return fetchRequest<ApiResponse>('User/SendEmailOtp', body);
+};
+
+export const confirmSmsOtp = async (body: ConfirmSmsOtpRequest) => {
+  return fetchRequest<ConfirmOtpResponse>('User/ConfirmSmsOtp', body);
+};
+
+export const confirmEmailOtp = async (body: ConfirmEmailOtpRequest) => {
+  return fetchRequest<ConfirmOtpResponse>('User/ConfirmEmailOtp', body);
+};
+
+export const resetPassword = async (body: ResetPasswordRequest) => {
+  return fetchRequest<ResetPasswordResponse>('User/ResetPassword', body);
+};
+
+export const sendForgetPassCode = async (body: SendForgetPassCodeRequest) => {
+  return fetchRequest<ApiResponse>('User/SendForgetPassCode', body);
+};
+
+export const confirmForgetPassCode = async (
+  body: ConfirmForgetPassCodeRequest,
+) => {
+  return fetchRequest<ConfirmOtpResponse>('User/ConfirmForgetPassCode', body);
+};
+
+export const loginOrSignUpWithGoogle = async (
+  body: LoginOrSignUpWithGoogleRequest,
+) => {
+  return fetchRequest<LoginOrSignUpWithGoogleResponse>(
+    'User/LoginOrSignUpWithGoogle',
+    body,
+  );
+};
+
+export const completeUserInformation = async (
+  body: CompleteUserInformationRequest,
+) => {
+  return fetchRequest<ApiResponse>('User/CompleteUserInformation', body);
+};
+
+export const logOut = async () => {
+  return fetchRequest<ApiResponse>('User/LogOut', {});
+};

src/features/authorization/components/AuthenticationCard.tsx

@@ -0,0 +1,23 @@
+import { Paper } from '@mui/material';
+import { type PropsWithChildren } from 'react';
+
+// Beacuse in the otp verify there is a element outside of the authentication card
+export const AuthenticationCard = ({ children }: PropsWithChildren) => {
+  return (
+    <Paper
+      elevation={0}
+      sx={{
+        borderRadius: 4,
+        p: {
+          xs: 4,
+          md: 6,
+        },
+        marginInline: 2,
+        width: (t) => `calc(100% - ${t.spacing(2)})`,
+        maxWidth: '552px',
+      }}
+    >
+      {children}
+    </Paper>
+  );
+};

src/features/authorization/components/AuthenticationSteps/AuthenticationSteps.tsx

@@ -0,0 +1,139 @@
+import { useState, type JSX } from 'react';
+import { LoginRegisterForm } from './LoginRegiserForm';
+import type { AuthMode, AuthStep, AuthType } from '../../types/authTypes';
+import { OtpVerifyForm } from './OtpVerifyForm';
+import { isNumeric } from '@/utils/regexes/isNumeric';
+import { CompleteSignUp } from './CompleteSignUp';
+import { EnterPasswordForm } from './EnterPasswordForm';
+import { UserStatus } from '../../types/userTypes';
+import type { CountryCode, GUID } from '@/types/commonTypes';
+import { VerifyPhoneNumber } from './VerifyPhoneNumber';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+export const AuthenticationSteps = (): JSX.Element => {
+  const navigate = useNavigate();
+  const DEFAULT_RETURN_URL = '/profile';
+  const [searchParams] = useSearchParams();
+  const authReturnUrl: string =
+    searchParams.get('returnUrl') ?? DEFAULT_RETURN_URL;
+  const [authMode, setAuthMode] = useState<AuthMode>('register');
+  const [authType, setAuthType] = useState<AuthType>('phone');
+  const [currentStep, setCurrentStep] = useState<AuthStep>('emailOrPhone');
+  const [loginRegisterValue, setLoginRegisterValue] = useState<string>('');
+  const [countryCode, setCountryCode] = useState<CountryCode>('+98');
+  const [addPhoneCountryCode, setAddPhoneCountryCode] =
+    useState<CountryCode>('+98');
+  const [addedPhoneNumberValue, setAddedPhoneNumberValue] =
+    useState<string>('');
+
+  const handleLoginRegister = (value: string, userStatus: UserStatus) => {
+    setAuthType(isNumeric(value) ? 'phone' : 'email');
+
+    switch (userStatus) {
+      case UserStatus.NotRegistered:
+        setAuthMode('register');
+        setCurrentStep('verify');
+        break;
+
+      case UserStatus.RegisteredWithoutPassword:
+        setAuthMode('login');
+        setCurrentStep('verify');
+
+        break;
+
+      case UserStatus.RegisteredWithPassword:
+        setAuthMode('login');
+        setCurrentStep('enterPassword');
+
+        break;
+    }
+  };
+
+  const handleUserLoggedIn = (userId: GUID) => {
+    localStorage.setItem('userID', userId);
+
+    redirectToReturnUrl();
+  };
+
+  const handleConfrimPhoneNumber = (userId: GUID) => {
+    localStorage.setItem('userID', userId);
+
+    setCurrentStep('addPhoneNumber');
+  };
+
+  const handlePhoneNumberVerified = () => {
+    redirectToReturnUrl();
+  };
+
+  const redirectToReturnUrl = () => {
+    if (authReturnUrl === DEFAULT_RETURN_URL) {
+      navigate(DEFAULT_RETURN_URL);
+    } else {
+      location.href = authReturnUrl;
+    }
+  };
+
+  return (
+    <>
+      {currentStep === 'emailOrPhone' && (
+        <LoginRegisterForm
+          authReturnUrl={authReturnUrl}
+          onGoogleAuthenticated={handleUserLoggedIn}
+          countryCode={countryCode}
+          setCountryCode={setCountryCode}
+          loginRegisterValue={loginRegisterValue}
+          setLoginRegisterValue={setLoginRegisterValue}
+          authType={authType}
+          setAuthType={setAuthType}
+          onLoginRegisterSubmit={handleLoginRegister}
+        />
+      )}
+
+      {currentStep === 'verify' && (
+        <OtpVerifyForm
+          onVerifyPhoneNumber={handleConfrimPhoneNumber}
+          authReturnUrl={authReturnUrl}
+          countryCode={countryCode}
+          onOTPVerified={handleUserLoggedIn}
+          onEditValue={() => setCurrentStep('emailOrPhone')}
+          authMode={authMode}
+          authType={authType}
+          value={loginRegisterValue}
+        />
+      )}
+
+      {currentStep === 'enterPassword' && (
+        <EnterPasswordForm
+          authReturnUrl={authReturnUrl}
+          loginRegisterValue={loginRegisterValue}
+          countryCode={countryCode}
+          authType={authType}
+          onLoggedIn={handleUserLoggedIn}
+          onEditValue={() => setCurrentStep('emailOrPhone')}
+          onLoginWithOTP={() => setCurrentStep('verify')}
+          emailOrPhone={loginRegisterValue}
+        />
+      )}
+
+      {currentStep === 'addPhoneNumber' && (
+        <CompleteSignUp
+          countryCode={addPhoneCountryCode}
+          setCountryCode={setAddPhoneCountryCode}
+          value={addedPhoneNumberValue}
+          setValue={setAddedPhoneNumberValue}
+          email={loginRegisterValue}
+          onCompleteSignUp={() => setCurrentStep('addedPhoneNumberVerify')}
+        />
+      )}
+
+      {currentStep === 'addedPhoneNumberVerify' && (
+        <VerifyPhoneNumber
+          countryCode={countryCode}
+          onEditValue={() => setCurrentStep('addPhoneNumber')}
+          value={addedPhoneNumberValue}
+          onPhoneNumberVerified={handlePhoneNumberVerified}
+        />
+      )}
+    </>
+  );
+};

src/features/authorization/components/AuthenticationSteps/CompleteSignUp.tsx

@@ -0,0 +1,118 @@
+import { Button, TextField, Typography } from '@mui/material';
+import parsePhoneNumberFromString from 'libphonenumber-js';
+import { useRef, useState, type Dispatch } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AuthenticationCard } from '../AuthenticationCard';
+import { CountryCodeSelector } from '../CountryCodeSelector';
+import { sendSmsOtp } from '../../api/authorizationAPI';
+import type { CountryCode } from '@/types/commonTypes';
+
+export interface CompleteSignUpProps {
+  email: string;
+  value: string;
+  setValue: Dispatch<string>;
+  countryCode: CountryCode;
+  setCountryCode: Dispatch<CountryCode>;
+  onCompleteSignUp: (countryCode: string, value: string) => void;
+}
+
+export const CompleteSignUp = ({
+  email,
+  value,
+  setValue,
+  countryCode,
+  setCountryCode,
+  onCompleteSignUp,
+}: CompleteSignUpProps) => {
+  const { t } = useTranslation('authentication');
+  const [error, setError] = useState<string>();
+  const textFieldRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [touched, setTouched] = useState<boolean>(false);
+  const inputError: boolean = touched && !!error;
+  const [sendOtpLoading, setSendOtpLoading] = useState<boolean>(false);
+
+  const isPhoneValid = (code: string, phone: string) => {
+    const phoneNumber = parsePhoneNumberFromString(code + phone);
+
+    return phoneNumber && phoneNumber.isValid();
+  };
+
+  const handleBlur = () => {
+    setTouched(true);
+
+    handleValueError();
+  };
+
+  const handleValueError = () => {
+    if (!value) {
+      setError(t('loginForm.thisFieldIsRequired'));
+    }
+    if (!isPhoneValid(countryCode, value)) {
+      setError(t('loginForm.phoneNumberIsInvalid'));
+    } else {
+      setError(undefined);
+    }
+  };
+
+  const handleCompleteSignUp = async () => {
+    handleValueError();
+
+    if (!value || !isPhoneValid(countryCode, value)) {
+      inputRef.current?.focus();
+    } else {
+      setSendOtpLoading(true);
+
+      await sendSmsOtp({ phoneNumber: countryCode + value });
+      onCompleteSignUp(countryCode, value);
+
+      setSendOtpLoading(false);
+    }
+  };
+
+  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}
+              />
+            ),
+          },
+        }}
+        sx={{ my: 4 }}
+      />
+
+      <Button loading={sendOtpLoading} onClick={handleCompleteSignUp}>
+        {t('verify.confirmAndContinue')}
+      </Button>
+    </AuthenticationCard>
+  );
+};

src/features/authorization/components/AuthenticationSteps/EnterPasswordForm.tsx

@@ -0,0 +1,190 @@
+import { useRef, useState } from 'react';
+import { AuthenticationCard } from '../AuthenticationCard';
+import { ArrowLeft, Edit2, Eye, EyeSlash } from 'iconsax-react';
+import {
+  Box,
+  Button,
+  IconButton,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Toast } from '@/components/Toast';
+import { Link } from 'react-router-dom';
+import type { AuthType } from '../../types/authTypes';
+import type { CountryCode, GUID } from '@/types/commonTypes';
+import {
+  loginWithPassword,
+  sendEmailOtp,
+  sendSmsOtp,
+} from '../../api/authorizationAPI';
+import type { PasswordLoginRequest } from '../../types/userTypes';
+
+export interface EnterPasswordFormProps {
+  onEditValue: () => void;
+  onLoginWithOTP: () => void;
+  onLoggedIn: (userId: GUID) => void;
+  emailOrPhone: string;
+  authType: AuthType;
+  loginRegisterValue: string;
+  countryCode: CountryCode;
+  authReturnUrl: string;
+}
+
+export const EnterPasswordForm = ({
+  onEditValue,
+  onLoginWithOTP,
+  onLoggedIn,
+  emailOrPhone,
+  authType,
+  loginRegisterValue,
+  countryCode,
+  authReturnUrl,
+}: EnterPasswordFormProps) => {
+  const { t } = useTranslation('authentication');
+  const [passValue, setPassValue] = useState<string>('');
+  const [inputTouched, setInputTouched] = useState<boolean>(false);
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [loginLoading, setLoginLoading] = useState<boolean>(false);
+  const [isLoginStatusSuccess, setIsLoginStatusSuccess] = useState<boolean>();
+  const [loginAlertOpen, setLoginAlertOpen] = useState<boolean>(false);
+  const [loginFailedMessage, setLoginFailedMessage] = useState<string>('');
+  const [sendOtpLoading, setSendOtpLoading] = useState<boolean>(false);
+
+  const handleBlur = () => {
+    setInputTouched(true);
+  };
+
+  const handleSubmit = async () => {
+    if (!passValue) {
+      inputRef.current?.focus();
+    } else {
+      setLoginLoading(true);
+
+      const apiRequest: PasswordLoginRequest = {
+        phoneNumber:
+          authType === 'phone' ? countryCode + loginRegisterValue : undefined,
+        email: authType === 'email' ? loginRegisterValue : undefined,
+        password: passValue,
+        returnUrl: authReturnUrl,
+      };
+      const result = await loginWithPassword(apiRequest);
+      const jsonRes = await result.json();
+
+      if (jsonRes.success) {
+        setIsLoginStatusSuccess(true);
+        onLoggedIn(jsonRes.userId);
+      } else {
+        setIsLoginStatusSuccess(false);
+        setLoginFailedMessage(jsonRes.message);
+      }
+      setLoginAlertOpen(true);
+      setLoginLoading(false);
+    }
+  };
+
+  const handleLoginWithOtp = async () => {
+    setSendOtpLoading(true);
+
+    if (authType === 'phone') {
+      await sendSmsOtp({ phoneNumber: countryCode + loginRegisterValue });
+    } else {
+      await sendEmailOtp({ email: loginRegisterValue });
+    }
+
+    setSendOtpLoading(false);
+    onLoginWithOTP();
+  };
+
+  return (
+    <AuthenticationCard>
+      <Toast
+        open={loginAlertOpen}
+        onClose={() => setLoginAlertOpen(false)}
+        color={!isLoginStatusSuccess ? 'error' : 'success'}
+      >
+        {!isLoginStatusSuccess
+          ? loginFailedMessage
+          : t('verify.youHaveSuccessfullyLoggedIn')}
+      </Toast>
+
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 4,
+          mb: 0.5,
+        }}
+      >
+        <Typography variant="h5">
+          {t('enterPassword.loginWithPassword')}
+        </Typography>
+
+        <Button
+          variant="outlined"
+          size="large"
+          sx={{ width: 'auto' }}
+          endIcon={<Edit2 />}
+          onClick={onEditValue}
+        >
+          {emailOrPhone}
+        </Button>
+      </Box>
+
+      <Typography variant="body2" color="textSecondary" sx={{ mt: 1, mb: 2 }}>
+        {t('enterPassword.enterThePasswordYouSetForYourAccount')}
+      </Typography>
+
+      <TextField
+        label={t('enterPassword.loginPassword')}
+        type={showPassword ? 'text' : 'password'}
+        value={passValue}
+        inputRef={inputRef}
+        onChange={(e) => setPassValue(e.target.value)}
+        onBlur={handleBlur}
+        error={!passValue && inputTouched}
+        helperText={
+          !passValue && inputTouched ? t('loginForm.thisFieldIsRequired') : ''
+        }
+        autoFocus
+        slotProps={{
+          htmlInput: { sx: { lineHeight: 1.5 } },
+          input: {
+            endAdornment: (
+              <IconButton
+                color="primary"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? <Eye /> : <EyeSlash />}
+              </IconButton>
+            ),
+          },
+        }}
+        sx={{ my: 4 }}
+      />
+
+      <Button
+        onClick={handleLoginWithOtp}
+        sx={{ width: 'auto', mb: 2 }}
+        variant="text"
+        loading={sendOtpLoading}
+        endIcon={<ArrowLeft />}
+      >
+        {t('enterPassword.loginWithOneTimeCode')}
+      </Button>
+
+      <Stack spacing={1}>
+        <Button loading={loginLoading} onClick={handleSubmit}>
+          {t('verify.confirmAndLogin')}
+        </Button>
+        <Link to="/forget-password">
+          <Button variant="text">{t('enterPassword.iForgotMyPassword')}</Button>
+        </Link>
+      </Stack>
+    </AuthenticationCard>
+  );
+};

src/features/authorization/components/AuthenticationSteps/GoogleAuthentication.tsx

@@ -0,0 +1,81 @@
+import { Button } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { GoogleCodeClientResponse } from '../../types/userTypes';
+import { loginOrSignUpWithGoogle } from '../../api/authorizationAPI';
+import type { GUID } from '@/types/commonTypes';
+import { Google } from 'iconsax-react';
+
+export interface GoogleAuthenticationProps {
+  disabled: boolean;
+  authReturnUrl: string;
+  onGoogleAuthenticated: (userId: GUID) => void;
+}
+
+export const GoogleAuthentication = ({
+  disabled,
+  authReturnUrl,
+  onGoogleAuthenticated,
+}: GoogleAuthenticationProps) => {
+  const { t } = useTranslation('authentication');
+  const [loginWithGoogleLoading, setLoginWithGoogleLoading] =
+    useState<boolean>(false);
+
+  const clientRef = useRef<any>(null);
+
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src = 'https://accounts.google.com/gsi/client';
+    script.async = true;
+    script.defer = true;
+    document.body.appendChild(script);
+
+    script.onload = () => {
+      clientRef.current = google.accounts.oauth2.initCodeClient({
+        client_id: import.meta.env.VITE_GOOGLE_CLIENT_ID,
+        scope: 'openid email profile',
+        ux_mode: 'popup',
+        response_type: 'id_token',
+        callback: async (resp: GoogleCodeClientResponse) => {
+          setLoginWithGoogleLoading(true);
+
+          const result = await loginOrSignUpWithGoogle({
+            idToken: resp.id_token,
+            returnUrl: authReturnUrl,
+          });
+          const jsonRes = await result.json();
+
+          if (jsonRes.success) {
+            onGoogleAuthenticated(jsonRes.userId);
+          } else {
+            // Todo: Add useToast to handle error
+          }
+
+          setLoginWithGoogleLoading(false);
+        },
+      });
+    };
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  const handleGoogleLogin = () => {
+    if (clientRef.current) {
+      clientRef.current.requestCode();
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleGoogleLogin}
+      disabled={disabled}
+      loading={loginWithGoogleLoading}
+      variant="outlined"
+      startIcon={<Google variant="Bold" />}
+    >
+      {t('loginForm.loginWithGoogle')}
+    </Button>
+  );
+};

src/features/authorization/components/AuthenticationSteps/LoginRegiserForm.tsx

@@ -0,0 +1,170 @@
+import { Button, Stack, TextField, Typography } from '@mui/material';
+import { useRef, useState, type Dispatch } from 'react';
+import { useTranslation } from 'react-i18next';
+import { isNumeric } from '@/utils/regexes/isNumeric';
+import type { AuthType } from '../../types/authTypes';
+import { isEmail } from '@/utils/regexes/isEmail';
+import { AuthenticationCard } from '../AuthenticationCard';
+import { CountryCodeSelector } from '../CountryCodeSelector';
+import type { UserStatus } from '../../types/userTypes';
+import { getUserStatusByPhoneNumberOrEmail } from '../../api/authorizationAPI';
+import { Toast } from '@/components/Toast';
+import type { CountryCode, GUID } from '@/types/commonTypes';
+import { GoogleAuthentication } from './GoogleAuthentication';
+import { isPhoneNumber } from '@/utils/regexes/isValidPhoneNumber';
+
+export interface LoginRegisterFormProps {
+  loginRegisterValue: string;
+  setLoginRegisterValue: Dispatch<string>;
+  countryCode: CountryCode;
+  setCountryCode: Dispatch<CountryCode>;
+  authType: AuthType;
+  setAuthType: Dispatch<AuthType>;
+  onLoginRegisterSubmit: (value: string, userStatus: UserStatus) => void;
+  authReturnUrl: string;
+  onGoogleAuthenticated: (userId: GUID) => void;
+}
+
+export function LoginRegisterForm({
+  loginRegisterValue,
+  setLoginRegisterValue,
+  countryCode,
+  setCountryCode,
+  authType,
+  setAuthType,
+  onLoginRegisterSubmit,
+  authReturnUrl,
+  onGoogleAuthenticated,
+}: LoginRegisterFormProps) {
+  const [checkStatusLoading, setCheckStatusLoading] = useState<boolean>(false);
+  const { t } = useTranslation('authentication');
+  const textFieldRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [error, setError] = useState<string>();
+  const [touched, setTouched] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string>();
+  const inputError: boolean = touched && !!error;
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    setLoginRegisterValue(newValue);
+
+    // If the new value contains only digits (or is empty), it's a phone number
+    if (isNumeric(newValue)) {
+      setAuthType('phone');
+    } else {
+      setAuthType('email');
+    }
+  };
+
+  const handleBlur = () => {
+    setTouched(true);
+    validateInput(loginRegisterValue, authType);
+  };
+
+  const validateInput = (
+    value: string,
+    authType: AuthType,
+    setErrors: boolean = true,
+  ): boolean => {
+    if (!value) {
+      if (setErrors) setError(t('loginForm.thisFieldIsRequired'));
+      return false;
+    }
+
+    if (authType === 'email' && !isEmail(value)) {
+      if (setErrors) setError(t('loginForm.emailIsInvalid'));
+      return false;
+    }
+
+    if (authType === 'phone' && !isPhoneNumber(countryCode, value)) {
+      if (setErrors) setError(t('loginForm.phoneNumberIsInvalid'));
+      return false;
+    }
+
+    if (setErrors) setError(undefined);
+    return true;
+  };
+
+  const handleSubmit = async () => {
+    if (validateInput(loginRegisterValue, authType, false)) {
+      setCheckStatusLoading(true);
+      const result = await getUserStatusByPhoneNumberOrEmail({
+        phoneNumber:
+          authType === 'phone' ? countryCode + loginRegisterValue : undefined,
+        email: authType === 'email' ? loginRegisterValue : undefined,
+      });
+      const jsonResult = await result.json();
+
+      if (jsonResult.success) {
+        onLoginRegisterSubmit(loginRegisterValue, jsonResult.userStatus);
+      } else {
+        setErrorMessage(jsonResult.message);
+      }
+      setCheckStatusLoading(false);
+    } else {
+      inputRef.current?.focus();
+      validateInput(loginRegisterValue, authType);
+    }
+  };
+
+  const showAdornment = authType === 'phone' && loginRegisterValue.length > 0;
+
+  return (
+    <AuthenticationCard>
+      <Toast
+        color="error"
+        onClose={() => setErrorMessage(undefined)}
+        open={!!errorMessage}
+      >
+        {errorMessage}
+      </Toast>
+
+      <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}
+              />
+            ),
+          },
+        }}
+        sx={{ my: 4 }}
+      />
+
+      <Stack spacing={2}>
+        <Button loading={checkStatusLoading} onClick={handleSubmit}>
+          {t('loginForm.submitButton')}
+        </Button>
+
+        <GoogleAuthentication
+          authReturnUrl={authReturnUrl}
+          onGoogleAuthenticated={onGoogleAuthenticated}
+          disabled={checkStatusLoading}
+        />
+      </Stack>
+    </AuthenticationCard>
+  );
+}

src/features/authorization/components/AuthenticationSteps/OtpVerifyForm.tsx

@@ -0,0 +1,225 @@
+import { useTranslation } from 'react-i18next';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import { Edit2 } from 'iconsax-react';
+import DigitInput from '@/components/components/DigitsInput';
+import type { AuthMode, AuthType } from '../../types/authTypes';
+import { useEffect, useState } from 'react';
+import { Toast } from '@/components/Toast';
+import { AuthenticationCard } from '../AuthenticationCard';
+import type { LoginRequest } from '../../types/userTypes';
+import {
+  loginOrSignUpWithOtp,
+  sendEmailOtp,
+  sendSmsOtp,
+} from '../../api/authorizationAPI';
+import type { CountryCode, GUID } from '@/types/commonTypes';
+
+interface OtpVerifyFormProps {
+  value: string;
+  countryCode: CountryCode;
+  authType: AuthType;
+  authMode: AuthMode;
+  onEditValue: () => void;
+  onOTPVerified: (userId: GUID) => void;
+  onVerifyPhoneNumber: (userId: GUID) => void;
+  authReturnUrl: string;
+}
+
+export function OtpVerifyForm({
+  value,
+  countryCode,
+  authType,
+  authMode,
+  onEditValue,
+  onOTPVerified,
+  onVerifyPhoneNumber,
+  authReturnUrl,
+}: OtpVerifyFormProps) {
+  const [otpCode, setOtpCode] = useState<string>('');
+  const [otpDigitInvalid, setOtpDigitInvalid] = useState<boolean>(false);
+  const [verifyStatus, setVerifyStatus] = useState<'success' | 'failed'>();
+  const [errorMessage, setErrorMessage] = useState<string>();
+  const [verifyStatusLoading, setVerifyStatusLoading] =
+    useState<boolean>(false);
+  const [verifyAlertOpen, setVerifyAlertOpen] = useState<boolean>(false);
+  const { t } = useTranslation('authentication');
+  const [resendTimer, setResendTimer] = useState<number>(120);
+  const [canResend, setCanResend] = useState(false);
+  const [resendLoading, setResendLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (resendTimer > 0) {
+      interval = setInterval(() => {
+        setResendTimer((prev) => prev - 1);
+      }, 1000);
+    } else {
+      setCanResend(true);
+    }
+
+    return () => clearInterval(interval);
+  }, [resendTimer]);
+
+  const handleResendOTPCode = async () => {
+    setResendLoading(true);
+
+    if (authType === 'phone') {
+      await sendSmsOtp({ phoneNumber: countryCode + value });
+    } else {
+      await sendEmailOtp({ email: value });
+    }
+
+    setResendTimer(120);
+    setCanResend(false);
+    setResendLoading(false);
+  };
+
+  const formatTime = (seconds: number) => {
+    const min = Math.floor(seconds / 60);
+    const sec = seconds % 60;
+    return `${min}:${sec.toString().padStart(2, '0')}`;
+  };
+
+  const handleVerifyOTP = () => {
+    if (!otpCode || otpCode.length < 4) {
+      setOtpDigitInvalid(true);
+    } else {
+      handleLoginOrSignUp();
+    }
+  };
+
+  const handleLoginOrSignUp = async () => {
+    setOtpDigitInvalid(false);
+    setVerifyStatusLoading(true);
+
+    const loginRequest: LoginRequest = {
+      otpCode: otpCode,
+      phoneNumber: authType === 'phone' ? countryCode + value : undefined,
+      email: authType === 'email' ? value : undefined,
+      returnUrl: authReturnUrl,
+    };
+    const result = await loginOrSignUpWithOtp(loginRequest);
+    const jsonRes = await result.json();
+
+    if (jsonRes.success) {
+      setVerifyStatus('success');
+
+      if (jsonRes.registeredWithOutPhoneNumber) {
+        onVerifyPhoneNumber(jsonRes.userId);
+      } else {
+        onOTPVerified(jsonRes.userId);
+      }
+    } else {
+      setVerifyStatus('failed');
+      setErrorMessage(jsonRes.message);
+    }
+
+    setVerifyAlertOpen(true);
+    setVerifyStatusLoading(false);
+  };
+
+  const otpMessage = (): string => {
+    if (authType === 'phone' && authMode === 'login') {
+      return t(
+        'verify.a4DigitVerificationCodeHasBeenSentToYourBobileNumberPleaseEnterIt',
+      );
+    } else if (authType === 'phone' && authMode === 'register') {
+      return t(
+        'verify.thereIsNoAccountWithThisNumberA4DigitVerificationCodeHasBeenSentToThisNumberToCreateANewAccount',
+      );
+    } else if (authType === 'email' && authMode === 'login') {
+      return t(
+        'verify.a4digitVerificationCodeHasBeenSentToYourEmailAddressPleaseEnterIt',
+      );
+    } else if (authType === 'email' && authMode === 'register') {
+      return t(
+        'verify.thereIsNoAccountWithThisEmailAddressA4DigitVerificationCodeHasBeenSentToThisEmailAddressToCreateANewAccount',
+      );
+    }
+
+    return '';
+  };
+
+  const toastMessage =
+    verifyStatus === 'failed'
+      ? (errorMessage ?? t('verify.theVerificationCodeIsIncorrect'))
+      : verifyStatus === 'success' && authMode === 'register'
+        ? t('verify.youHaveSuccessfullySignedIn')
+        : verifyStatus === 'success' && authMode === 'login'
+          ? t('verify.youHaveSuccessfullyLoggedIn')
+          : '';
+
+  return (
+    <Stack alignItems="center">
+      <AuthenticationCard>
+        <Toast
+          open={verifyAlertOpen}
+          onClose={() => setVerifyAlertOpen(false)}
+          color={verifyStatus === 'failed' ? 'error' : 'success'}
+        >
+          {toastMessage}
+        </Toast>
+
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 4,
+            mb: 0.5,
+          }}
+        >
+          <Typography variant="h5">{t('verify.verify')}</Typography>
+
+          <Button
+            variant="outlined"
+            size="large"
+            sx={{ textTransform: 'lowercase', width: 'auto' }}
+            endIcon={<Edit2 />}
+            onClick={onEditValue}
+          >
+            {authType === 'phone' ? countryCode + value : value}
+          </Button>
+        </Box>
+
+        <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
+          {otpMessage()}
+        </Typography>
+
+        <DigitInput
+          error={otpDigitInvalid || verifyStatus === 'failed'}
+          success={verifyStatus === 'success'}
+          onChange={(value) => setOtpCode(value)}
+        />
+
+        <Button onClick={handleVerifyOTP} loading={verifyStatusLoading}>
+          {authMode === 'register'
+            ? t('verify.confirmAndContinue')
+            : t('verify.confirmAndLogin')}
+        </Button>
+      </AuthenticationCard>
+
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: 'center',
+          alignItems: 'center',
+          mt: 1.5,
+        }}
+      >
+        <Typography variant="body1">{t('verify.resendCodeIn')}</Typography>
+
+        <Button
+          variant="text"
+          loading={resendLoading}
+          sx={{ width: 'auto' }}
+          onClick={canResend ? handleResendOTPCode : undefined}
+        >
+          {canResend && t('verify.resendCode')}
+          {!canResend && `${formatTime(resendTimer)} ${t('verify.moreMinute')}`}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,174 @@
+import { useTranslation } from 'react-i18next';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import { Edit2 } from 'iconsax-react';
+import DigitInput from '@/components/components/DigitsInput';
+import { useEffect, useState } from 'react';
+import { Toast } from '@/components/Toast';
+import { AuthenticationCard } from '../AuthenticationCard';
+import type { ConfirmSmsOtpRequest } from '../../types/userTypes';
+import { confirmSmsOtp, sendSmsOtp } from '../../api/authorizationAPI';
+import type { CountryCode } from '@/types/commonTypes';
+
+interface VerifyPhoneNumberProps {
+  value: string;
+  countryCode: CountryCode;
+  onEditValue: () => void;
+  onPhoneNumberVerified: () => void;
+}
+
+export function VerifyPhoneNumber({
+  value,
+  countryCode,
+  onEditValue,
+  onPhoneNumberVerified,
+}: VerifyPhoneNumberProps) {
+  const [otpCode, setOtpCode] = useState<string>('');
+  const [otpDigitInvalid, setOtpDigitInvalid] = useState<boolean>(false);
+  const [verifyStatus, setVerifyStatus] = useState<'success' | 'failed'>();
+  const [errorMessage, setErrorMessage] = useState<string>();
+  const [verifyStatusLoading, setVerifyStatusLoading] =
+    useState<boolean>(false);
+  const [verifyAlertOpen, setVerifyAlertOpen] = useState<boolean>(false);
+  const { t } = useTranslation('authentication');
+  const [resendTimer, setResendTimer] = useState<number>(120);
+  const [canResend, setCanResend] = useState(false);
+  const [resendLoading, setResendLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (resendTimer > 0) {
+      interval = setInterval(() => {
+        setResendTimer((prev) => prev - 1);
+      }, 1000);
+    } else {
+      setCanResend(true);
+    }
+
+    return () => clearInterval(interval);
+  }, [resendTimer]);
+
+  const handleResendOTPCode = async () => {
+    setResendLoading(true);
+
+    await sendSmsOtp({ phoneNumber: countryCode + value });
+
+    setResendTimer(120);
+    setCanResend(false);
+    setResendLoading(false);
+  };
+
+  const formatTime = (seconds: number) => {
+    const min = Math.floor(seconds / 60);
+    const sec = seconds % 60;
+    return `${min}:${sec.toString().padStart(2, '0')}`;
+  };
+
+  const handleVerifyOTP = async () => {
+    if (!otpCode || otpCode.length < 4) {
+      setOtpDigitInvalid(true);
+    } else {
+      setOtpDigitInvalid(false);
+      setVerifyStatusLoading(true);
+
+      const confirmSmsOtpRequest: ConfirmSmsOtpRequest = {
+        otpCode: otpCode,
+        phoneNumber: countryCode + value,
+      };
+      const result = await confirmSmsOtp(confirmSmsOtpRequest);
+      const jsonRes = await result.json();
+
+      if (jsonRes.success) {
+        setVerifyStatus('success');
+        onPhoneNumberVerified();
+      } else {
+        setVerifyStatus('failed');
+        setErrorMessage(jsonRes.message);
+      }
+
+      setVerifyAlertOpen(true);
+      setVerifyStatusLoading(false);
+    }
+  };
+
+  const verifyAlertMessage = (): string => {
+    if (verifyStatus === 'failed') {
+      return errorMessage ?? t('verify.theVerificationCodeIsIncorrect');
+    } else {
+      return t('verify.youHaveSuccessfullyLoggedIn');
+    }
+  };
+
+  return (
+    <Stack alignItems="center">
+      <AuthenticationCard>
+        <Toast
+          open={verifyAlertOpen}
+          onClose={() => setVerifyAlertOpen(false)}
+          color={verifyStatus === 'failed' ? 'error' : 'success'}
+        >
+          {verifyAlertMessage()}
+        </Toast>
+
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 4,
+            mb: 0.5,
+          }}
+        >
+          <Typography variant="h5">{t('verify.verify')}</Typography>
+
+          <Button
+            variant="outlined"
+            size="large"
+            sx={{ textTransform: 'lowercase', width: 'auto' }}
+            endIcon={<Edit2 />}
+            onClick={onEditValue}
+          >
+            {countryCode + value}
+          </Button>
+        </Box>
+
+        <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
+          {t(
+            'verify.a4DigitVerificationCodeHasBeenSentToYourBobileNumberPleaseEnterIt',
+          )}
+        </Typography>
+
+        <DigitInput
+          error={otpDigitInvalid || verifyStatus === 'failed'}
+          success={verifyStatus === 'success'}
+          onChange={(value) => setOtpCode(value)}
+        />
+
+        <Button onClick={handleVerifyOTP} loading={verifyStatusLoading}>
+          {t('verify.confirmAndLogin')}
+        </Button>
+      </AuthenticationCard>
+
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: 'center',
+          alignItems: 'center',
+          mt: 1.5,
+        }}
+      >
+        <Typography variant="body1">{t('verify.resendCodeIn')}</Typography>
+
+        <Button
+          variant="text"
+          loading={resendLoading}
+          sx={{ width: 'auto' }}
+          onClick={canResend ? handleResendOTPCode : undefined}
+        >
+          {canResend && t('verify.resendCode')}
+          {!canResend && `${formatTime(resendTimer)} ${t('verify.moreMinute')}`}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}

src/features/authorization/components/CountryCodeSelector.tsx

@@ -0,0 +1,254 @@
+import {
+  Box,
+  InputAdornment,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useMemo, useRef, useState, type RefObject } from 'react';
+import { ArrowDown2 } from 'iconsax-react';
+import ReactCountryFlag from 'react-country-flag';
+import { useTranslation } from 'react-i18next';
+import { countries, type Country } from '../../../countries';
+import type { CountryCode } from '@/types/commonTypes';
+interface CountryCodeSelectorProps {
+  show: boolean;
+  value: CountryCode;
+  onChange: (newValue: CountryCode) => void;
+  menuAnchor: HTMLElement | null;
+  onCloseFocusRef: RefObject<HTMLInputElement | null>;
+}
+
+/**
+ * An animated country code adornment that fades and slides into view.
+ * Its visibility is controlled by the `show` prop.
+ */
+export function CountryCodeSelector({
+  show,
+  value,
+  onChange,
+  menuAnchor,
+  onCloseFocusRef,
+}: CountryCodeSelectorProps) {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const open = Boolean(anchorEl);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const menuWidth = menuAnchor ? menuAnchor.clientWidth : 'auto';
+  const { t, i18n } = useTranslation();
+
+  const selectedCountry =
+    countries.find((c) => c.phone === value) || countries[0];
+
+  const handleClick = () => {
+    setAnchorEl(menuAnchor);
+  };
+
+  const handleClose = () => {
+    setTimeout(() => {
+      setAnchorEl(null);
+    }, 0);
+    setTimeout(() => {
+      onCloseFocusRef.current?.focus();
+    }, 100);
+    setSearchTerm(''); // Reset search on close
+  };
+
+  const handleSelect = (country: Country) => {
+    onChange(country.phone);
+    handleClose();
+  };
+
+  const handleMenuEntered = () => {
+    // Focus the input field after the menu has finished opening
+    searchInputRef.current?.focus();
+  };
+
+  const filteredCountries = useMemo(
+    () =>
+      countries.filter(
+        (country) =>
+          t(country.label).toLowerCase().includes(searchTerm.toLowerCase()) ||
+          country.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          country.phone.includes(searchTerm),
+      ),
+    [searchTerm],
+  );
+
+  return (
+    <InputAdornment
+      position={i18n.dir() === 'rtl' ? 'start' : 'end'}
+      sx={{
+        mx: 0,
+      }}
+    >
+      <Box
+        onClick={handleClick}
+        sx={{
+          // Animate width and opacity based on the 'show' prop
+          width: show ? 'auto' : 0,
+          opacity: show ? 1 : 0,
+          transition: (theme) =>
+            theme.transitions.create(['width', 'opacity'], {
+              duration: theme.transitions.duration.standard,
+            }),
+
+          // Prevent content from wrapping or spilling out during animation
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+
+          // layout styles
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.25,
+          pl: show ? 0.25 : 0,
+
+          '&:hover': {
+            cursor: 'pointer',
+          },
+        }}
+      >
+        {/* This inner Box prevents the content from being squeezed during the transition */}
+        <ArrowDown2 size="24" variant="Bold" />
+
+        <Typography
+          variant="body1"
+          color="text.primary"
+          component="div"
+          sx={{ direction: 'rtl' }} // TODO: need to fixed for both en and fa
+        >
+          {value}
+        </Typography>
+
+        <ReactCountryFlag
+          countryCode={selectedCountry.code}
+          svg
+          style={{
+            height: '1.5rem',
+            width: '1.5rem',
+            // TODO: Check alignment for better styling definition
+            marginTop: '-2px',
+            marginRight: '4px',
+          }}
+        />
+
+        <Menu
+          anchorEl={anchorEl}
+          open={open}
+          onClose={handleClose}
+          slotProps={{
+            list: {
+              sx: {
+                // Set the width to match the anchor element's width
+                width: menuWidth,
+                height: '18.75rem',
+              },
+            },
+            transition: {
+              onEntered: handleMenuEntered,
+            },
+          }}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'left',
+          }}
+        >
+          <Box
+            sx={{
+              position: 'sticky',
+              top: 0,
+              zIndex: 1,
+              p: 1,
+              backgroundColor: 'background.paper',
+            }}
+          >
+            <TextField
+              inputRef={searchInputRef}
+              size="small"
+              fullWidth
+              label={t('labels.search')}
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </Box>
+
+          {/* Can improve preformance with using virtual scrolling */}
+          <Box sx={{ width: '100%', maxHeight: '14.75rem', overflow: 'auto' }}>
+            {filteredCountries.length === 0 ? (
+              <MenuItem disabled>
+                <ListItem>
+                  <ListItemText>{t('messages.noResualtFound')}</ListItemText>
+                </ListItem>
+              </MenuItem>
+            ) : (
+              filteredCountries.map((country) => (
+                <MenuItem
+                  key={country.code}
+                  selected={country.phone === value}
+                  onClick={() => handleSelect(country)}
+                >
+                  <ListItemIcon>
+                    <ReactCountryFlag
+                      countryCode={country.code}
+                      svg
+                      style={{
+                        height: '1.125rem',
+                        width: '1.125rem',
+                      }}
+                    />
+                  </ListItemIcon>
+                  <ListItemText primary={t(country.label)} />
+                  <Typography color="text.secondary">
+                    {country.phone}
+                  </Typography>
+                </MenuItem>
+              ))
+            )}
+          </Box>
+
+          {/* virtual scrolling  */}
+          {/* <Virtuoso
+            style={{ height: '14.75rem' }} // Adjust height to account for the search bar
+            data={filteredCountries}
+            components={{
+              EmptyPlaceholder: () => (
+                <MenuItem disabled>
+                  <ListItemText>{t('messages.noResultFound')}</ListItemText>
+                </MenuItem>
+              ),
+            }}
+            initialTopMostItemIndex={countries.indexOf(selectedCountry)}
+            itemContent={(_, country) => (
+              <MenuItem
+                key={country.code}
+                selected={country.phone === value}
+                onClick={() => handleSelect(country)}
+              >
+                <ListItemIcon>
+                  <ReactCountryFlag
+                    countryCode={country.code}
+                    svg
+                    style={{ fontSize: '1.25em', lineHeight: '1.25em' }}
+                  />
+                </ListItemIcon>
+                <ListItemText primary={country.label} />
+                <Typography variant="body2" color="text.secondary">
+                  {country.phone}
+                </Typography>
+              </MenuItem>
+            )}
+          /> */}
+        </Menu>
+      </Box>
+    </InputAdornment>
+  );
+}

src/features/authorization/components/ForgetPassword/ChangePassword.tsx

@@ -0,0 +1,254 @@
+import { useRef, useState } from 'react';
+import { AuthenticationCard } from '../AuthenticationCard';
+import { Edit2, Eye, EyeSlash, TickCircle } from 'iconsax-react';
+import {
+  Box,
+  Button,
+  IconButton,
+  Stack,
+  TextField,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Toast } from '@/components/Toast';
+import { containsNumber } from '@/utils/regexes/containsNumber';
+import { containsSymbol } from '@/utils/regexes/containsSymbol';
+import { least8Chars } from '@/utils/regexes/least8Chars';
+import { hasUpperAndLowerLetter } from '@/utils/regexes/hasUpperAndLowerLetter';
+import type { ResetPasswordRequest } from '../../types/userTypes';
+import type { AuthType } from '../../types/authTypes';
+import type { CountryCode } from '@/types/commonTypes';
+import { resetPassword } from '../../api/authorizationAPI';
+
+export interface ChangePasswordProps {
+  onEditInfo: () => void;
+  onPasswordChanged: () => void;
+  forgettedPasswordInfo: string;
+  infoType: AuthType;
+  countryCode: CountryCode;
+}
+
+export const ChangePassword = ({
+  onEditInfo,
+  onPasswordChanged,
+  forgettedPasswordInfo,
+  infoType,
+  countryCode,
+}: ChangePasswordProps) => {
+  const theme = useTheme();
+  const { t } = useTranslation('authentication');
+  const [passValue, setPassValue] = useState<string>('');
+  const [confirmPassValue, setConfirmPassValue] = useState<string>('');
+  const [inputTouched, setInputTouched] = useState<boolean>(false);
+  const [confirmInputTouched, setConfirmInputTouched] =
+    useState<boolean>(false);
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [showConfirmPassword, setShowConfirmPassword] =
+    useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const confirmInputRef = useRef<HTMLInputElement>(null);
+  const [changePasswordLoading, setChangePasswordLoading] =
+    useState<boolean>(false);
+  const [changePasswordStatus, setChangePasswordStatus] = useState<
+    'success' | 'failed'
+  >();
+  const [changePassAlertOpen, setChangePassAlertOpen] =
+    useState<boolean>(false);
+  const [changePassFailedMessage, setChangePassFailedMessage] =
+    useState<string>('');
+
+  const passwordValidationRules = [
+    { title: t('forgetPassword.includingANumber'), validator: containsNumber },
+    { title: t('forgetPassword.atLeast8Characters'), validator: least8Chars },
+    {
+      title: t('forgetPassword.containsAnUppercaseAndLowercaseLetter'),
+      validator: hasUpperAndLowerLetter,
+    },
+    { title: t('forgetPassword.ContainsASymbol'), validator: containsSymbol },
+  ];
+
+  const handleBlur = () => {
+    setInputTouched(true);
+  };
+
+  const handleConfirmPassBlur = () => {
+    setConfirmInputTouched(true);
+  };
+
+  const handleSubmit = async () => {
+    if (!passValue || !isValidPassword(passValue)) {
+      setInputTouched(true);
+      inputRef.current?.focus();
+    } else if (passValue !== confirmPassValue) {
+      setConfirmInputTouched(true);
+      confirmInputRef.current?.focus();
+    } else {
+      setChangePasswordLoading(true);
+
+      const apiRequest: ResetPasswordRequest = {
+        email: infoType === 'email' ? forgettedPasswordInfo : undefined,
+        phoneNumber:
+          infoType === 'phone'
+            ? countryCode + forgettedPasswordInfo
+            : undefined,
+        newPassword: passValue,
+        confirmNewPassword: confirmPassValue,
+      };
+
+      const result = await resetPassword(apiRequest);
+      const jsonRes = await result.json();
+
+      if (jsonRes.success) {
+        setChangePasswordStatus('success');
+        onPasswordChanged();
+      } else {
+        setChangePasswordStatus('failed');
+        setChangePassFailedMessage(jsonRes.message);
+      }
+      setChangePassAlertOpen(true);
+
+      setChangePasswordLoading(false);
+    }
+  };
+
+  const isValidPassword = (value: string) => {
+    return (
+      containsNumber(value) &&
+      containsSymbol(value) &&
+      least8Chars(value) &&
+      hasUpperAndLowerLetter(value)
+    );
+  };
+
+  return (
+    <AuthenticationCard>
+      <Toast
+        open={changePassAlertOpen}
+        onClose={() => setChangePassAlertOpen(false)}
+        color={changePasswordStatus === 'failed' ? 'error' : 'success'}
+      >
+        {changePasswordStatus === 'failed'
+          ? changePassFailedMessage
+          : t('forgetPassword.passwordChangedSuccessfully')}
+      </Toast>
+
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 4,
+          mb: 0.5,
+        }}
+      >
+        <Typography variant="h5">
+          {t('forgetPassword.changePassword')}
+        </Typography>
+
+        <Button
+          variant="outlined"
+          size="large"
+          sx={{ textTransform: 'lowercase', width: 'auto' }}
+          endIcon={<Edit2 />}
+          onClick={onEditInfo}
+        >
+          {forgettedPasswordInfo}
+        </Button>
+      </Box>
+
+      <Typography variant="body2" color="textSecondary" sx={{ mt: 1, mb: 2 }}>
+        {t('forgetPassword.createANewPassword')}
+      </Typography>
+
+      <TextField
+        label={t('forgetPassword.newPassword')}
+        type={showPassword ? 'text' : 'password'}
+        value={passValue}
+        inputRef={inputRef}
+        onChange={(e) => setPassValue(e.target.value)}
+        onBlur={handleBlur}
+        error={inputTouched && !isValidPassword(passValue)}
+        autoFocus
+        slotProps={{
+          htmlInput: { sx: { lineHeight: 1.5, paddingInlineStart: 1 } },
+          input: {
+            startAdornment: confirmPassValue &&
+              isValidPassword(passValue) &&
+              passValue === confirmPassValue && (
+                <TickCircle variant="Bold" color={theme.palette.success.main} />
+              ),
+            endAdornment: passValue ? (
+              <IconButton
+                color="primary"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? <Eye /> : <EyeSlash />}
+              </IconButton>
+            ) : (
+              ''
+            ),
+          },
+        }}
+        sx={{ mt: 4 }}
+      />
+
+      {!isValidPassword(passValue) && (
+        <Stack spacing={1} sx={{ mt: 2 }}>
+          {passwordValidationRules.map((rule) => (
+            <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+              <TickCircle
+                variant={rule.validator(passValue) ? 'Bold' : 'Linear'}
+                color={
+                  rule.validator(passValue)
+                    ? theme.palette.success.main
+                    : theme.palette.primary.light
+                }
+              />
+
+              <Typography variant="body2">{rule.title}</Typography>
+            </Stack>
+          ))}
+        </Stack>
+      )}
+
+      <TextField
+        label={t('forgetPassword.confirmPassword')}
+        type={showConfirmPassword ? 'text' : 'password'}
+        value={confirmPassValue}
+        inputRef={confirmInputRef}
+        onChange={(e) => setConfirmPassValue(e.target.value)}
+        onBlur={handleConfirmPassBlur}
+        error={confirmInputTouched && confirmPassValue !== passValue}
+        slotProps={{
+          htmlInput: { sx: { lineHeight: 1.5, paddingInlineStart: 1 } },
+          input: {
+            startAdornment: confirmPassValue &&
+              isValidPassword(passValue) &&
+              passValue === confirmPassValue && (
+                <TickCircle variant="Bold" color={theme.palette.success.main} />
+              ),
+            endAdornment: confirmPassValue ? (
+              <IconButton
+                color="primary"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+              >
+                {showConfirmPassword ? <Eye /> : <EyeSlash />}
+              </IconButton>
+            ) : (
+              ''
+            ),
+          },
+        }}
+        sx={{ my: 4 }}
+      />
+
+      <Stack spacing={1}>
+        <Button loading={changePasswordLoading} onClick={handleSubmit}>
+          {t('forgetPassword.confirm')}
+        </Button>
+      </Stack>
+    </AuthenticationCard>
+  );
+};

src/features/authorization/components/ForgetPassword/ForgetPasswordContainer.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import type { AuthType } from '../../types/authTypes';
+import { ForgettedPasswordInfo } from './ForgettedPasswordInfo';
+import { ForgetPasswordOtp } from './ForgetPasswordOtp';
+import { ChangePassword } from './ChangePassword';
+import type { CountryCode } from '@/types/commonTypes';
+
+export const ForgetPasswordContainer = () => {
+  const [forgetPassCurrentStep, setForgetPassCurrentStep] = useState<
+    'enterInfo' | 'verifyOtp' | 'setPassword'
+  >('enterInfo');
+  const [forgettedPasswordInfo, setForgettedPasswordInfo] =
+    useState<string>('');
+  const [infoCountryCode, setInfoCountryCode] = useState<CountryCode>('+98');
+  const [infoType, setInfoType] = useState<AuthType>('email');
+
+  const handleVerifyOtp = () => {
+    setForgetPassCurrentStep('verifyOtp');
+  };
+
+  const handleEditInfo = () => {
+    setForgetPassCurrentStep('enterInfo');
+  };
+
+  const handleOtpVerified = () => {
+    setForgetPassCurrentStep('setPassword');
+  };
+
+  const handlePasswordChanged = () => {
+    console.log('changingPasswordTo');
+  };
+
+  return (
+    <>
+      {forgetPassCurrentStep === 'enterInfo' && (
+        <ForgettedPasswordInfo
+          infoType={infoType}
+          setInfoType={setInfoType}
+          forgettedPasswordInfo={forgettedPasswordInfo}
+          setForgettedPasswordInfo={setForgettedPasswordInfo}
+          onVerifyOtp={handleVerifyOtp}
+          countryCode={infoCountryCode}
+          setCountryCode={setInfoCountryCode}
+        />
+      )}
+
+      {forgetPassCurrentStep === 'verifyOtp' && (
+        <ForgetPasswordOtp
+          countryCode={infoCountryCode}
+          infoType={infoType}
+          onEditInfo={handleEditInfo}
+          forgettedPasswordInfo={forgettedPasswordInfo}
+          onOTPVerified={handleOtpVerified}
+        />
+      )}
+
+      {forgetPassCurrentStep === 'setPassword' && (
+        <ChangePassword
+          onEditInfo={handleEditInfo}
+          forgettedPasswordInfo={forgettedPasswordInfo}
+          onPasswordChanged={handlePasswordChanged}
+          infoType={infoType}
+          countryCode={infoCountryCode}
+        />
+      )}
+    </>
+  );
+};

src/features/authorization/components/ForgetPassword/ForgetPasswordOtp.tsx

@@ -0,0 +1,185 @@
+import { useTranslation } from 'react-i18next';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import { Edit2 } from 'iconsax-react';
+import DigitInput from '@/components/components/DigitsInput';
+import type { AuthType } from '../../types/authTypes';
+import { useEffect, useState } from 'react';
+import { Toast } from '@/components/Toast';
+import { AuthenticationCard } from '../AuthenticationCard';
+import type { ConfirmForgetPassCodeRequest } from '../../types/userTypes';
+import type { CountryCode } from '@/types/commonTypes';
+import { confirmForgetPassCode } from '../../api/authorizationAPI';
+
+interface ForgetPasswordOtpProps {
+  forgettedPasswordInfo: string;
+  infoType: AuthType;
+  countryCode: CountryCode;
+  onEditInfo: () => void;
+  onOTPVerified: (otpCode: string) => void;
+}
+
+export function ForgetPasswordOtp({
+  forgettedPasswordInfo,
+  infoType,
+  countryCode,
+  onEditInfo,
+  onOTPVerified,
+}: ForgetPasswordOtpProps) {
+  const [otpCode, setOtpCode] = useState<string>('');
+  const [otpDigitInvalid, setOtpDigitInvalid] = useState<boolean>(false);
+  const [verifyStatus, setVerifyStatus] = useState<'failed' | 'success'>();
+  const [verifyStatusLoading, setVerifyStatusLoading] =
+    useState<boolean>(false);
+  const [verifyAlertMessage, setVerifyAlertMessage] = useState<string>();
+  const { t } = useTranslation('authentication');
+  const [resendTimer, setResendTimer] = useState<number>(120);
+  const [canResend, setCanResend] = useState(false);
+  const [resendLoading, setResendLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (resendTimer > 0) {
+      interval = setInterval(() => {
+        setResendTimer((prev) => prev - 1);
+      }, 1000);
+    } else {
+      setCanResend(true);
+    }
+
+    return () => clearInterval(interval);
+  }, [resendTimer]);
+
+  const handleResendOTPCode = () => {
+    setResendLoading(true);
+
+    // TODO: Call API here instead of settimeout
+
+    setTimeout(() => {
+      console.log('resended');
+
+      setResendTimer(120);
+      setCanResend(false);
+      setResendLoading(false);
+    }, 1000);
+  };
+
+  const formatTime = (seconds: number) => {
+    const min = Math.floor(seconds / 60);
+    const sec = seconds % 60;
+    return `${min}:${sec.toString().padStart(2, '0')}`;
+  };
+
+  const handleVerifyOTP = async () => {
+    if (!otpCode || otpCode.length < 4) {
+      setOtpDigitInvalid(true);
+    } else {
+      setOtpDigitInvalid(false);
+      setVerifyStatusLoading(true);
+
+      // Change setTimeout to api call
+      const apiRequest: ConfirmForgetPassCodeRequest = {
+        email: infoType === 'email' ? forgettedPasswordInfo : undefined,
+        phoneNumber:
+          infoType === 'phone'
+            ? countryCode + forgettedPasswordInfo
+            : undefined,
+        code: otpCode,
+      };
+
+      const result = await confirmForgetPassCode(apiRequest);
+      const jsonRes = await result.json();
+
+      if (jsonRes.success) {
+        setVerifyStatus('success');
+        onOTPVerified(otpCode);
+      } else {
+        setVerifyStatus('failed');
+        setVerifyAlertMessage(jsonRes.message);
+      }
+
+      setVerifyStatusLoading(false);
+    }
+  };
+
+  return (
+    <Stack alignItems="center">
+      <AuthenticationCard>
+        <Toast
+          open={!!verifyAlertMessage}
+          onClose={() => setVerifyAlertMessage(undefined)}
+          color={'error'}
+        >
+          {verifyAlertMessage}
+        </Toast>
+
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 4,
+            mb: 0.5,
+          }}
+        >
+          <Typography variant="h5">
+            {t('forgetPassword.forgetPassword')}
+          </Typography>
+
+          <Button
+            variant="outlined"
+            size="large"
+            sx={{ textTransform: 'lowercase', width: 'auto' }}
+            endIcon={<Edit2 />}
+            onClick={onEditInfo}
+          >
+            {infoType === 'phone'
+              ? countryCode + forgettedPasswordInfo
+              : forgettedPasswordInfo}
+          </Button>
+        </Box>
+
+        <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
+          {infoType === 'email'
+            ? t(
+                'forgetPassword.anEmailContainingARecoveryCodeHasBeenSentToThisEmailAddress',
+              )
+            : t(
+                'forgetPassword.anCodeContainingARecoveryCodeHasBeenSentToThisPhoneNumber',
+              )}
+        </Typography>
+
+        <DigitInput
+          error={otpDigitInvalid || verifyStatus === 'failed'}
+          success={verifyStatus === 'success'}
+          onChange={(value) => setOtpCode(value)}
+        />
+
+        <Button onClick={handleVerifyOTP} loading={verifyStatusLoading}>
+          {t('forgetPassword.confirm')}
+        </Button>
+      </AuthenticationCard>
+
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: 'center',
+          alignItems: 'center',
+          mt: 1.5,
+        }}
+      >
+        <Typography variant="body1">{t('verify.resendCodeIn')}</Typography>
+
+        <Button
+          variant="text"
+          loading={resendLoading}
+          sx={{ width: 'auto' }}
+          onClick={canResend ? handleResendOTPCode : undefined}
+        >
+          {canResend && t('verify.resendCode')}
+          {!canResend && `${formatTime(resendTimer)} ${t('verify.moreMinute')}`}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}

src/features/authorization/components/ForgetPassword/ForgettedPasswordInfo.tsx

@@ -0,0 +1,164 @@
+import { Button, Stack, TextField, Typography } from '@mui/material';
+import { useRef, useState, type Dispatch } from 'react';
+import { useTranslation } from 'react-i18next';
+import { isNumeric } from '@/utils/regexes/isNumeric';
+import type { AuthType } from '../../types/authTypes';
+import { isEmail } from '@/utils/regexes/isEmail';
+import { AuthenticationCard } from '../AuthenticationCard';
+import { CountryCodeSelector } from '../CountryCodeSelector';
+import type { CountryCode } from '@/types/commonTypes';
+import { sendForgetPassCode } from '../../api/authorizationAPI';
+import type { SendForgetPassCodeRequest } from '../../types/userTypes';
+import { Toast } from '@/components/Toast';
+import { isPhoneNumber } from '@/utils/regexes/isValidPhoneNumber';
+
+export interface ForgettedPasswordInfoProps {
+  forgettedPasswordInfo: string;
+  setForgettedPasswordInfo: Dispatch<string>;
+  infoType: AuthType;
+  setInfoType: Dispatch<AuthType>;
+  onVerifyOtp: (value: string) => void;
+  countryCode: CountryCode;
+  setCountryCode: Dispatch<CountryCode>;
+}
+
+export function ForgettedPasswordInfo({
+  forgettedPasswordInfo,
+  setForgettedPasswordInfo,
+  infoType,
+  setInfoType,
+  onVerifyOtp,
+  countryCode,
+  setCountryCode,
+}: ForgettedPasswordInfoProps) {
+  const { t } = useTranslation('authentication');
+  const textFieldRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [error, setError] = useState<string>();
+  const [touched, setTouched] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string>();
+  const [sendCodeLoading, setSendCodeLoading] = useState<boolean>(false);
+  const inputError: boolean = touched && !!error;
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    setForgettedPasswordInfo(newValue);
+
+    // If the new value contains only digits (or is empty), it's a phone number
+    if (isNumeric(newValue)) {
+      setInfoType('phone');
+    } else {
+      setInfoType('email');
+    }
+  };
+
+  const handleBlur = () => {
+    setTouched(true);
+    validateInput(forgettedPasswordInfo, infoType);
+  };
+
+  const validateInput = (
+    value: string,
+    authType: AuthType,
+    setErrors: boolean = true,
+  ) => {
+    if (!value) {
+      if (setErrors) setError(t('loginForm.thisFieldIsRequired'));
+      return false;
+    } else if (authType === 'email' && !isEmail(value)) {
+      if (setErrors) setError(t('loginForm.emailIsInvalid'));
+      return false;
+    } else if (authType === 'phone' && !isPhoneNumber(countryCode, value)) {
+      if (setErrors) setError(t('loginForm.phoneNumberIsInvalid'));
+      return false;
+    } else {
+      if (setErrors) setError(undefined);
+      return true;
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (validateInput(forgettedPasswordInfo, infoType, false)) {
+      setSendCodeLoading(true);
+
+      const sendCodeRequest: SendForgetPassCodeRequest = {
+        email: infoType === 'email' ? forgettedPasswordInfo : undefined,
+        phoneNumber:
+          infoType === 'phone'
+            ? countryCode + forgettedPasswordInfo
+            : undefined,
+      };
+      const result = await sendForgetPassCode(sendCodeRequest);
+      const jsonRes = await result.json();
+
+      if (!jsonRes.success) {
+        setErrorMessage(jsonRes.message);
+      }
+
+      setSendCodeLoading(false);
+      onVerifyOtp(forgettedPasswordInfo);
+    } else {
+      inputRef.current?.focus();
+      validateInput(forgettedPasswordInfo, infoType);
+    }
+  };
+
+  const showAdornment =
+    infoType === 'phone' && forgettedPasswordInfo.length > 0;
+
+  return (
+    <AuthenticationCard>
+      <Toast
+        color="error"
+        onClose={() => setErrorMessage(undefined)}
+        open={!!errorMessage}
+      >
+        {errorMessage}
+      </Toast>
+
+      <Stack spacing={1}>
+        <Typography variant="h5">
+          {t('forgetPassword.forgetPassword')}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {t(
+            'forgetPassword.pleaseEnterYourMobileNumberEmailToRecoverYourPassword',
+          )}
+        </Typography>
+      </Stack>
+
+      <TextField
+        ref={textFieldRef}
+        inputRef={inputRef}
+        label={t('loginForm.emailOrPhoneLabel')}
+        value={forgettedPasswordInfo}
+        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, mb: 8 }}
+      />
+
+      <Stack spacing={2}>
+        <Button loading={sendCodeLoading} onClick={handleSubmit}>
+          {t('forgetPassword.confirm')}
+        </Button>
+      </Stack>
+    </AuthenticationCard>
+  );
+}

src/features/authorization/routes/AuthenticationPage.tsx

@@ -0,0 +1,20 @@
+import { FlexBox } from '@/components/components/common/FlexBox';
+import Logo from '@/components/Logo';
+import { AuthenticationSteps } from '../components/AuthenticationSteps/AuthenticationSteps';
+
+export function AuthenticationPage() {
+  return (
+    <FlexBox
+      direction="column"
+      align="center"
+      justify="center"
+      sx={{
+        minHeight: '100vh',
+        gap: 3,
+      }}
+    >
+      <Logo />
+      <AuthenticationSteps />
+    </FlexBox>
+  );
+}

src/features/authorization/routes/ForgetPasswordPage.tsx

@@ -0,0 +1,20 @@
+import { FlexBox } from '@/components/components/common/FlexBox';
+import Logo from '@/components/Logo';
+import { ForgetPasswordContainer } from '../components/ForgetPassword/ForgetPasswordContainer';
+
+export function ForgetPasswordPage() {
+  return (
+    <FlexBox
+      direction="column"
+      align="center"
+      justify="center"
+      sx={{
+        minHeight: '100vh',
+        gap: 3,
+      }}
+    >
+      <Logo />
+      <ForgetPasswordContainer />
+    </FlexBox>
+  );
+}

src/features/authorization/types/authTypes.ts

@@ -0,0 +1,10 @@
+export type AuthType = 'email' | 'phone';
+
+export type AuthMode = 'register' | 'login';
+
+export type AuthStep =
+  | 'emailOrPhone'
+  | 'verify'
+  | 'enterPassword'
+  | 'addPhoneNumber'
+  | 'addedPhoneNumberVerify';

src/features/authorization/types/userTypes.ts

@@ -0,0 +1,138 @@
+// GetUserStatusByPhoneNumberOrEmail
+
+import type { ApiResponse } from '@/types/apiResponse';
+import type { GUID } from '@/types/commonTypes';
+
+export interface GetUserStatusByPhoneNumberOrEmailRequest {
+  phoneNumber?: string;
+  email?: string;
+}
+
+export interface GetUserStatusByPhoneNumberOrEmailResponse extends ApiResponse {
+  userStatus: UserStatus;
+}
+
+export enum UserStatus {
+  None = 0,
+  RegisteredWithPassword = 1,
+  RegisteredWithoutPassword = 2,
+  NotRegistered = 3,
+}
+
+// LoginOrSignUpWithOtp
+
+export interface LoginRequest {
+  otpCode: string;
+  phoneNumber?: string;
+  email?: string;
+  returnUrl: string;
+}
+
+export interface PasswordLoginRequest {
+  phoneNumber?: string;
+  email?: string;
+  password: string;
+  returnUrl: string;
+}
+
+export interface LoginResponse extends ApiResponse {
+  returnUrl: string;
+  userId: GUID;
+  registeredWithOutPhoneNumber: boolean;
+  completedUserInformation: boolean;
+}
+
+// SendSmsOtp
+
+export interface SendSmsOtpRequest {
+  phoneNumber: string;
+}
+
+// SendEmailOtp
+
+export interface SendEmailOtpRequest {
+  email: string;
+}
+
+// ConfirmOtp
+
+export interface ConfirmEmailOtpRequest {
+  email: string;
+  otpCode: string;
+}
+
+export interface ConfirmSmsOtpRequest {
+  phoneNumber: string;
+  otpCode: string;
+}
+
+export interface ConfirmOtpResponse extends ApiResponse {
+  confirm: boolean;
+}
+
+// ResetPassword
+
+export interface ResetPasswordRequest {
+  email?: string;
+  phoneNumber?: string;
+  newPassword: string;
+  confirmNewPassword: string;
+}
+
+export interface ResetPasswordResponse extends ApiResponse {
+  passwordChanged: boolean;
+}
+
+// SendForgetPassCode
+
+export interface SendForgetPassCodeRequest {
+  email?: string;
+  phoneNumber?: string;
+}
+
+// ConfirmForgetPassCode
+
+export interface ConfirmForgetPassCodeRequest {
+  email?: string;
+  phoneNumber?: string;
+  code: string;
+}
+
+// LoginOrSignUpWithGoogle
+
+export interface GoogleCodeClientResponse {
+  id_token: string;
+}
+
+export interface LoginOrSignUpWithGoogleRequest {
+  idToken: string;
+  returnUrl: string;
+}
+
+export interface LoginOrSignUpWithGoogleResponse extends ApiResponse {
+  userId: GUID;
+  registeredWithOutPhoneNumber: boolean;
+  completedUserInformation: boolean;
+  returnUrl: string;
+}
+
+// CompleteUserInformation
+
+export interface CompleteUserInformationRequest {
+  firstName?: string;
+  lastName?: string;
+  gender?: Gender;
+  nationalCode?: string;
+  savePassword?: boolean;
+  password?: string;
+  saveEmail?: boolean;
+  email?: string;
+  birthDate?: string;
+  countryCode?: string;
+  userId?: GUID;
+}
+
+export enum Gender {
+  Male = 1,
+  Female = 2,
+}