chore: useToast replaced with all Toast components used in feature

package.json

@@ -17,6 +17,7 @@
     "@mui/stylis-plugin-rtl": "^7.2.0",
     "@rkheftan/harmony-ui": "^0.1.6",
     "@types/stylis": "^4.2.7",
+    "axios": "^1.11.0",
     "i18next": "^25.3.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",

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

@@ -10,7 +10,6 @@ import {
   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';
@@ -20,6 +19,7 @@ import {
   sendSmsOtp,
 } from '../../api/authorizationAPI';
 import type { PasswordLoginRequest } from '../../types/userTypes';
+import { Icon, useToast } from '@rkheftan/harmony-ui';
 
 export interface EnterPasswordFormProps {
   onEditValue: () => void;
@@ -49,9 +49,8 @@ export const EnterPasswordForm = ({
   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 toast = useToast();
 
   const handleBlur = () => {
     setInputTouched(true);
@@ -76,11 +75,18 @@ export const EnterPasswordForm = ({
       if (jsonRes.success) {
         setIsLoginStatusSuccess(true);
         onLoggedIn(jsonRes.userId);
+
+        toast({
+          message: t('verify.youHaveSuccessfullyLoggedIn'),
+          severity: 'success',
+        });
       } else {
         setIsLoginStatusSuccess(false);
-        setLoginFailedMessage(jsonRes.message);
+        toast({
+          message: jsonRes.message,
+          severity: 'error',
+        });
       }
-      setLoginAlertOpen(true);
       setLoginLoading(false);
     }
   };
@@ -100,16 +106,6 @@ export const EnterPasswordForm = ({
 
   return (
     <AuthenticationCard>
-      <Toast
-        open={loginAlertOpen}
-        onClose={() => setLoginAlertOpen(false)}
-        color={!isLoginStatusSuccess ? 'error' : 'success'}
-      >
-        {!isLoginStatusSuccess
-          ? loginFailedMessage
-          : t('verify.youHaveSuccessfullyLoggedIn')}
-      </Toast>
-
       <Box
         sx={{
           display: 'flex',
@@ -128,7 +124,7 @@ export const EnterPasswordForm = ({
           variant="outlined"
           size="large"
           sx={{ width: 'auto' }}
-          endIcon={<Edit2 />}
+          endIcon={<Icon Component={Edit2} />}
           onClick={onEditValue}
         >
           {emailOrPhone}
@@ -159,7 +155,11 @@ export const EnterPasswordForm = ({
                 color="primary"
                 onClick={() => setShowPassword(!showPassword)}
               >
-                {showPassword ? <Eye /> : <EyeSlash />}
+                {showPassword ? (
+                  <Icon Component={Eye} />
+                ) : (
+                  <Icon Component={EyeSlash} />
+                )}
               </IconButton>
             ),
           },
@@ -172,7 +172,7 @@ export const EnterPasswordForm = ({
         sx={{ width: 'auto', mb: 2 }}
         variant="text"
         loading={sendOtpLoading}
-        endIcon={<ArrowLeft />}
+        endIcon={<Icon Component={ArrowLeft} />}
       >
         {t('enterPassword.loginWithOneTimeCode')}
       </Button>

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

@@ -5,6 +5,7 @@ import type { GoogleCodeClientResponse } from '../../types/userTypes';
 import { loginOrSignUpWithGoogle } from '../../api/authorizationAPI';
 import type { GUID } from '@/types/commonTypes';
 import { Google } from 'iconsax-react';
+import { Icon } from '@rkheftan/harmony-ui';
 
 export interface GoogleAuthenticationProps {
   disabled: boolean;
@@ -73,7 +74,7 @@ export const GoogleAuthentication = ({
       disabled={disabled}
       loading={loginWithGoogleLoading}
       variant="outlined"
-      startIcon={<Google variant="Bold" />}
+      startIcon={<Icon Component={Google} variant="Bold" />}
     >
       {t('loginForm.loginWithGoogle')}
     </Button>

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

@@ -12,6 +12,7 @@ import { Toast } from '@/components/Toast';
 import type { CountryCode, GUID } from '@/types/commonTypes';
 import { GoogleAuthentication } from './GoogleAuthentication';
 import { isPhoneNumber } from '@/utils/regexes/isValidPhoneNumber';
+import { useToast } from '@rkheftan/harmony-ui';
 
 export interface LoginRegisterFormProps {
   loginRegisterValue: string;
@@ -42,8 +43,8 @@ export function LoginRegisterForm({
   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 toast = useToast();
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = event.target.value;
@@ -99,7 +100,10 @@ export function LoginRegisterForm({
       if (jsonResult.success) {
         onLoginRegisterSubmit(loginRegisterValue, jsonResult.userStatus);
       } else {
-        setErrorMessage(jsonResult.message);
+        toast({
+          message: jsonResult.message,
+          severity: 'error',
+        });
       }
       setCheckStatusLoading(false);
     } else {
@@ -112,14 +116,6 @@ export function LoginRegisterForm({
 
   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">

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

@@ -13,6 +13,7 @@ import {
   sendSmsOtp,
 } from '../../api/authorizationAPI';
 import type { CountryCode, GUID } from '@/types/commonTypes';
+import { Icon, useToast } from '@rkheftan/harmony-ui';
 
 interface OtpVerifyFormProps {
   value: string;
@@ -37,15 +38,14 @@ export function OtpVerifyForm({
 }: OtpVerifyFormProps) {
   const [otpCode, setOtpCode] = useState<string>('');
   const [otpDigitInvalid, setOtpDigitInvalid] = useState<boolean>(false);
-  const [verifyStatus, setVerifyStatus] = useState<'success' | 'failed'>();
+  const [isStatusSuccess, setIsStatusSuccess] = useState<boolean>();
-  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);
+  const toast = useToast();
 
   useEffect(() => {
     let interval: NodeJS.Timeout;
@@ -102,23 +102,34 @@ export function OtpVerifyForm({
     const jsonRes = await result.json();
 
     if (jsonRes.success) {
-      setVerifyStatus('success');
+      setIsStatusSuccess(true);
 
       if (jsonRes.registeredWithOutPhoneNumber) {
         onVerifyPhoneNumber(jsonRes.userId);
       } else {
         onOTPVerified(jsonRes.userId);
       }
+
+      toast({
+        message:
+          authMode === 'login'
+            ? t('verify.youHaveSuccessfullyLoggedIn')
+            : t('verify.youHaveSuccessfullySignedIn'),
+        severity: 'success',
+      });
     } else {
-      setVerifyStatus('failed');
+      setIsStatusSuccess(false);
-      setErrorMessage(jsonRes.message);
+
+      toast({
+        message: jsonRes.message,
+        severity: 'error',
+      });
     }
 
-    setVerifyAlertOpen(true);
     setVerifyStatusLoading(false);
   };
 
-  const otpMessage = (): string => {
+  const otpMessageFn = (): string => {
     if (authType === 'phone' && authMode === 'login') {
       return t(
         'verify.a4DigitVerificationCodeHasBeenSentToYourBobileNumberPleaseEnterIt',
@@ -140,26 +151,11 @@ export function OtpVerifyForm({
     return '';
   };
 
-  const toastMessage =
+  const otpMessage = otpMessageFn();
-    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',
@@ -176,7 +172,7 @@ export function OtpVerifyForm({
             variant="outlined"
             size="large"
             sx={{ textTransform: 'lowercase', width: 'auto' }}
-            endIcon={<Edit2 />}
+            endIcon={<Icon Component={Edit2} />}
             onClick={onEditValue}
           >
             {authType === 'phone' ? countryCode + value : value}
@@ -184,12 +180,12 @@ export function OtpVerifyForm({
         </Box>
 
         <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
-          {otpMessage()}
+          {otpMessage}
         </Typography>
 
         <DigitInput
-          error={otpDigitInvalid || verifyStatus === 'failed'}
+          error={otpDigitInvalid || isStatusSuccess === false}
-          success={verifyStatus === 'success'}
+          success={isStatusSuccess === true}
           onChange={(value) => setOtpCode(value)}
         />
 

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

@@ -8,6 +8,7 @@ import { AuthenticationCard } from '../AuthenticationCard';
 import type { ConfirmSmsOtpRequest } from '../../types/userTypes';
 import { confirmSmsOtp, sendSmsOtp } from '../../api/authorizationAPI';
 import type { CountryCode } from '@/types/commonTypes';
+import { Icon, useToast } from '@rkheftan/harmony-ui';
 
 interface VerifyPhoneNumberProps {
   value: string;
@@ -24,15 +25,14 @@ export function VerifyPhoneNumber({
 }: VerifyPhoneNumberProps) {
   const [otpCode, setOtpCode] = useState<string>('');
   const [otpDigitInvalid, setOtpDigitInvalid] = useState<boolean>(false);
-  const [verifyStatus, setVerifyStatus] = useState<'success' | 'failed'>();
+  const [isStatusSuccess, setIsStatusSuccess] = useState<boolean>();
-  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);
+  const toast = useToast();
 
   useEffect(() => {
     let interval: NodeJS.Timeout;
@@ -78,37 +78,27 @@ export function VerifyPhoneNumber({
       const jsonRes = await result.json();
 
       if (jsonRes.success) {
-        setVerifyStatus('success');
+        setIsStatusSuccess(true);
+        toast({
+          message: t('verify.youHaveSuccessfullyLoggedIn'),
+          severity: 'success',
+        });
         onPhoneNumberVerified();
       } else {
-        setVerifyStatus('failed');
+        setIsStatusSuccess(false);
-        setErrorMessage(jsonRes.message);
+        toast({
+          message:
+            jsonRes.message ?? t('verify.theVerificationCodeIsIncorrect'),
+          severity: 'error',
+        });
       }
-
-      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',
@@ -125,7 +115,7 @@ export function VerifyPhoneNumber({
             variant="outlined"
             size="large"
             sx={{ textTransform: 'lowercase', width: 'auto' }}
-            endIcon={<Edit2 />}
+            endIcon={<Icon Component={Edit2} />}
             onClick={onEditValue}
           >
             {countryCode + value}
@@ -139,8 +129,8 @@ export function VerifyPhoneNumber({
         </Typography>
 
         <DigitInput
-          error={otpDigitInvalid || verifyStatus === 'failed'}
+          error={otpDigitInvalid || isStatusSuccess === false}
-          success={verifyStatus === 'success'}
+          success={isStatusSuccess === true}
           onChange={(value) => setOtpCode(value)}
         />
 

src/features/authorization/components/CountryCodeSelector.tsx

@@ -15,6 +15,7 @@ import ReactCountryFlag from 'react-country-flag';
 import { useTranslation } from 'react-i18next';
 import { countries, type Country } from '../../../countries';
 import type { CountryCode } from '@/types/commonTypes';
+import { Icon } from '@rkheftan/harmony-ui';
 interface CountryCodeSelectorProps {
   show: boolean;
   value: CountryCode;
@@ -114,7 +115,7 @@ export function CountryCodeSelector({
         }}
       >
         {/* This inner Box prevents the content from being squeezed during the transition */}
-        <ArrowDown2 size="24" variant="Bold" />
+        <Icon Component={ArrowDown2} size="medium" variant="Bold" />
 
         <Typography
           variant="body1"

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

@@ -20,6 +20,7 @@ import type { ResetPasswordRequest } from '../../types/userTypes';
 import type { AuthType } from '../../types/authTypes';
 import type { CountryCode } from '@/types/commonTypes';
 import { resetPassword } from '../../api/authorizationAPI';
+import { Icon, useToast } from '@rkheftan/harmony-ui';
 
 export interface ChangePasswordProps {
   onEditInfo: () => void;
@@ -50,13 +51,7 @@ export const ChangePassword = ({
   const confirmInputRef = useRef<HTMLInputElement>(null);
   const [changePasswordLoading, setChangePasswordLoading] =
     useState<boolean>(false);
-  const [changePasswordStatus, setChangePasswordStatus] = useState<
+  const toast = useToast();
-    'success' | 'failed'
-  >();
-  const [changePassAlertOpen, setChangePassAlertOpen] =
-    useState<boolean>(false);
-  const [changePassFailedMessage, setChangePassFailedMessage] =
-    useState<string>('');
 
   const passwordValidationRules = [
     { title: t('forgetPassword.includingANumber'), validator: containsNumber },
@@ -100,13 +95,17 @@ export const ChangePassword = ({
       const jsonRes = await result.json();
 
       if (jsonRes.success) {
-        setChangePasswordStatus('success');
         onPasswordChanged();
+        toast({
+          message: t('forgetPassword.passwordChangedSuccessfully'),
+          severity: 'success',
+        });
       } else {
-        setChangePasswordStatus('failed');
+        toast({
-        setChangePassFailedMessage(jsonRes.message);
+          message: jsonRes.message,
+          severity: 'error',
+        });
       }
-      setChangePassAlertOpen(true);
 
       setChangePasswordLoading(false);
     }
@@ -123,16 +122,6 @@ export const ChangePassword = ({
 
   return (
     <AuthenticationCard>
-      <Toast
-        open={changePassAlertOpen}
-        onClose={() => setChangePassAlertOpen(false)}
-        color={changePasswordStatus === 'failed' ? 'error' : 'success'}
-      >
-        {changePasswordStatus === 'failed'
-          ? changePassFailedMessage
-          : t('forgetPassword.passwordChangedSuccessfully')}
-      </Toast>
-
       <Box
         sx={{
           display: 'flex',
@@ -151,7 +140,7 @@ export const ChangePassword = ({
           variant="outlined"
           size="large"
           sx={{ textTransform: 'lowercase', width: 'auto' }}
-          endIcon={<Edit2 />}
+          endIcon={<Icon Component={Edit2} />}
           onClick={onEditInfo}
         >
           {forgettedPasswordInfo}
@@ -177,14 +166,22 @@ export const ChangePassword = ({
             startAdornment: confirmPassValue &&
               isValidPassword(passValue) &&
               passValue === confirmPassValue && (
-                <TickCircle variant="Bold" color={theme.palette.success.main} />
+                <Icon
+                  Component={TickCircle}
+                  variant="Bold"
+                  color="success.main"
+                />
               ),
             endAdornment: passValue ? (
               <IconButton
                 color="primary"
                 onClick={() => setShowPassword(!showPassword)}
               >
-                {showPassword ? <Eye /> : <EyeSlash />}
+                {showPassword ? (
+                  <Icon Component={Eye} />
+                ) : (
+                  <Icon Component={EyeSlash} />
+                )}
               </IconButton>
             ) : (
               ''
@@ -198,12 +195,11 @@ export const ChangePassword = ({
         <Stack spacing={1} sx={{ mt: 2 }}>
           {passwordValidationRules.map((rule) => (
             <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
-              <TickCircle
+              <Icon
+                Component={TickCircle}
                 variant={rule.validator(passValue) ? 'Bold' : 'Linear'}
                 color={
-                  rule.validator(passValue)
+                  rule.validator(passValue) ? 'success.main' : 'primary.light'
-                    ? theme.palette.success.main
-                    : theme.palette.primary.light
                 }
               />
 
@@ -227,14 +223,22 @@ export const ChangePassword = ({
             startAdornment: confirmPassValue &&
               isValidPassword(passValue) &&
               passValue === confirmPassValue && (
-                <TickCircle variant="Bold" color={theme.palette.success.main} />
+                <Icon
+                  Component={TickCircle}
+                  variant="Bold"
+                  color="success.main"
+                />
               ),
             endAdornment: confirmPassValue ? (
               <IconButton
                 color="primary"
                 onClick={() => setShowConfirmPassword(!showConfirmPassword)}
               >
-                {showConfirmPassword ? <Eye /> : <EyeSlash />}
+                {showConfirmPassword ? (
+                  <Icon Component={Eye} />
+                ) : (
+                  <Icon Component={EyeSlash} />
+                )}
               </IconButton>
             ) : (
               ''

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

@@ -4,8 +4,10 @@ import { ForgettedPasswordInfo } from './ForgettedPasswordInfo';
 import { ForgetPasswordOtp } from './ForgetPasswordOtp';
 import { ChangePassword } from './ChangePassword';
 import type { CountryCode } from '@/types/commonTypes';
+import { useNavigate } from 'react-router-dom';
 
 export const ForgetPasswordContainer = () => {
+  const navigate = useNavigate();
   const [forgetPassCurrentStep, setForgetPassCurrentStep] = useState<
     'enterInfo' | 'verifyOtp' | 'setPassword'
   >('enterInfo');
@@ -27,7 +29,7 @@ export const ForgetPasswordContainer = () => {
   };
 
   const handlePasswordChanged = () => {
-    console.log('changingPasswordTo');
+    navigate('/login');
   };
 
   return (

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

@@ -6,9 +6,16 @@ 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 {
+  ConfirmForgetPassCodeRequest,
+  SendForgetPassCodeRequest,
+} from '../../types/userTypes';
 import type { CountryCode } from '@/types/commonTypes';
-import { confirmForgetPassCode } from '../../api/authorizationAPI';
+import {
+  confirmForgetPassCode,
+  sendForgetPassCode,
+} from '../../api/authorizationAPI';
+import { Icon, useToast } from '@rkheftan/harmony-ui';
 
 interface ForgetPasswordOtpProps {
   forgettedPasswordInfo: string;
@@ -27,14 +34,14 @@ export function ForgetPasswordOtp({
 }: ForgetPasswordOtpProps) {
   const [otpCode, setOtpCode] = useState<string>('');
   const [otpDigitInvalid, setOtpDigitInvalid] = useState<boolean>(false);
-  const [verifyStatus, setVerifyStatus] = useState<'failed' | 'success'>();
+  const [isStatusSuccess, setIsStatusSuccess] = useState<boolean>();
   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);
+  const toast = useToast();
 
   useEffect(() => {
     let interval: NodeJS.Timeout;
@@ -49,18 +56,19 @@ export function ForgetPasswordOtp({
     return () => clearInterval(interval);
   }, [resendTimer]);
 
-  const handleResendOTPCode = () => {
+  const handleResendOTPCode = async () => {
     setResendLoading(true);
 
-    // TODO: Call API here instead of settimeout
+    const sendCodeRequest: SendForgetPassCodeRequest = {
+      email: infoType === 'email' ? forgettedPasswordInfo : undefined,
+      phoneNumber:
+        infoType === 'phone' ? countryCode + forgettedPasswordInfo : undefined,
+    };
+    const result = await sendForgetPassCode(sendCodeRequest);
 
-    setTimeout(() => {
+    setResendTimer(120);
-      console.log('resended');
+    setCanResend(false);
-
+    setResendLoading(false);
-      setResendTimer(120);
-      setCanResend(false);
-      setResendLoading(false);
-    }, 1000);
   };
 
   const formatTime = (seconds: number) => {
@@ -90,11 +98,14 @@ export function ForgetPasswordOtp({
       const jsonRes = await result.json();
 
       if (jsonRes.success) {
-        setVerifyStatus('success');
+        setIsStatusSuccess(true);
         onOTPVerified(otpCode);
       } else {
-        setVerifyStatus('failed');
+        setIsStatusSuccess(false);
-        setVerifyAlertMessage(jsonRes.message);
+        toast({
+          message: jsonRes.message,
+          severity: 'error',
+        });
       }
 
       setVerifyStatusLoading(false);
@@ -104,14 +115,6 @@ export function ForgetPasswordOtp({
   return (
     <Stack alignItems="center">
       <AuthenticationCard>
-        <Toast
-          open={!!verifyAlertMessage}
-          onClose={() => setVerifyAlertMessage(undefined)}
-          color={'error'}
-        >
-          {verifyAlertMessage}
-        </Toast>
-
         <Box
           sx={{
             display: 'flex',
@@ -130,7 +133,7 @@ export function ForgetPasswordOtp({
             variant="outlined"
             size="large"
             sx={{ textTransform: 'lowercase', width: 'auto' }}
-            endIcon={<Edit2 />}
+            endIcon={<Icon Component={Edit2} />}
             onClick={onEditInfo}
           >
             {infoType === 'phone'
@@ -150,8 +153,8 @@ export function ForgetPasswordOtp({
         </Typography>
 
         <DigitInput
-          error={otpDigitInvalid || verifyStatus === 'failed'}
+          error={otpDigitInvalid || isStatusSuccess === false}
-          success={verifyStatus === 'success'}
+          success={isStatusSuccess === true}
           onChange={(value) => setOtpCode(value)}
         />
 

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

@@ -11,6 +11,7 @@ import { sendForgetPassCode } from '../../api/authorizationAPI';
 import type { SendForgetPassCodeRequest } from '../../types/userTypes';
 import { Toast } from '@/components/Toast';
 import { isPhoneNumber } from '@/utils/regexes/isValidPhoneNumber';
+import { useToast } from '@rkheftan/harmony-ui';
 
 export interface ForgettedPasswordInfoProps {
   forgettedPasswordInfo: string;
@@ -36,9 +37,9 @@ export function ForgettedPasswordInfo({
   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 toast = useToast();
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = event.target.value;
@@ -92,7 +93,10 @@ export function ForgettedPasswordInfo({
       const jsonRes = await result.json();
 
       if (!jsonRes.success) {
-        setErrorMessage(jsonRes.message);
+        toast({
+          message: jsonRes.message,
+          severity: 'error',
+        });
       }
 
       setSendCodeLoading(false);
@@ -108,14 +112,6 @@ export function ForgettedPasswordInfo({
 
   return (
     <AuthenticationCard>
-      <Toast
-        color="error"
-        onClose={() => setErrorMessage(undefined)}
-        open={!!errorMessage}
-      >
-        {errorMessage}
-      </Toast>
-
       <Stack spacing={1}>
         <Typography variant="h5">
           {t('forgetPassword.forgetPassword')}

src/features/authorization/index.ts

@@ -0,0 +1,2 @@
+export * from './routes/AuthenticationPage';
+export * from './routes/ForgetPasswordPage';

src/routes/config.tsx

@@ -1,4 +1,8 @@
 import { Layout } from '@/components/Layout/Layout';
+import {
+  AuthenticationPage,
+  ForgetPasswordPage,
+} from '@/features/authorization';
 import {
   Calendar,
   Devices,
@@ -27,6 +31,18 @@ export interface RouteConfig {
 
 // can lazy load component if needed (ex. lazy(() => import('@/features/home/routes/HomePage'));)
 export const appRoutes: RouteConfig[] = [
+  {
+    path: '/',
+    element: <Navigate to="/setting/profile" replace />,
+  },
+  {
+    path: '/login',
+    element: <AuthenticationPage />,
+  },
+  {
+    path: '/forget-password',
+    element: <ForgetPasswordPage />,
+  },
   {
     path: '/',
     element: <Navigate to="/setting/profile" replace />,

src/theme/colors.ts

@@ -4,7 +4,7 @@ import type { Palette } from './color.type';
 export const PALETTE: Palette = {
   primary: {
     light: {
-      main: blue[400],
+      main: blue.A400,
       dark: blue[700],
       light: blue[100],
       contrastText: '#FFFFFF',