chore: useToast replaced with all Toast components used in feature

2025-08-15 19:36:23 +03:30
parent aa2e341baa
commit e7b596005b
15 changed files with 964 additions and 1444 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
--- a/src/features/authorization/components/AuthenticationSteps/EnterPasswordForm.tsx
+++ b/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>
--- a/src/features/authorization/components/AuthenticationSteps/GoogleAuthentication.tsx
+++ b/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>
--- a/src/features/authorization/components/AuthenticationSteps/LoginRegiserForm.tsx
+++ b/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">
--- a/src/features/authorization/components/AuthenticationSteps/OtpVerifyForm.tsx
+++ b/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 [errorMessage, setErrorMessage] = useState<string>();
+  const [isStatusSuccess, setIsStatusSuccess] = useState<boolean>();
  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');
-      setErrorMessage(jsonRes.message);
+      setIsStatusSuccess(false);
+
+      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 =
-    verifyStatus === 'failed'
-      ? (errorMessage ?? t('verify.theVerificationCodeIsIncorrect'))
-      : verifyStatus === 'success' && authMode === 'register'
-        ? t('verify.youHaveSuccessfullySignedIn')
-        : verifyStatus === 'success' && authMode === 'login'
-          ? t('verify.youHaveSuccessfullyLoggedIn')
-          : '';
+  const otpMessage = otpMessageFn();

  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'}
-          success={verifyStatus === 'success'}
+          error={otpDigitInvalid || isStatusSuccess === false}
+          success={isStatusSuccess === true}
          onChange={(value) => setOtpCode(value)}
        />

--- a/src/features/authorization/components/AuthenticationSteps/VerifyPhoneNumber.tsx
+++ b/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 [errorMessage, setErrorMessage] = useState<string>();
+  const [isStatusSuccess, setIsStatusSuccess] = useState<boolean>();
  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');
-        setErrorMessage(jsonRes.message);
+        setIsStatusSuccess(false);
+        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'}
-          success={verifyStatus === 'success'}
+          error={otpDigitInvalid || isStatusSuccess === false}
+          success={isStatusSuccess === true}
          onChange={(value) => setOtpCode(value)}
        />

--- a/src/features/authorization/components/CountryCodeSelector.tsx
+++ b/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"
--- a/src/features/authorization/components/ForgetPassword/ChangePassword.tsx
+++ b/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<
-    'success' | 'failed'
-  >();
-  const [changePassAlertOpen, setChangePassAlertOpen] =
-    useState<boolean>(false);
-  const [changePassFailedMessage, setChangePassFailedMessage] =
-    useState<string>('');
+  const toast = useToast();

  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');
-        setChangePassFailedMessage(jsonRes.message);
+        toast({
+          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)
-                    ? theme.palette.success.main
-                    : theme.palette.primary.light
+                  rule.validator(passValue) ? 'success.main' : '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>
            ) : (
              ''
--- a/src/features/authorization/components/ForgetPassword/ForgetPasswordContainer.tsx
+++ b/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 (
--- a/src/features/authorization/components/ForgetPassword/ForgetPasswordOtp.tsx
+++ b/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(() => {
-      console.log('resended');
-
-      setResendTimer(120);
-      setCanResend(false);
-      setResendLoading(false);
-    }, 1000);
+    setResendTimer(120);
+    setCanResend(false);
+    setResendLoading(false);
  };

  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');
-        setVerifyAlertMessage(jsonRes.message);
+        setIsStatusSuccess(false);
+        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'}
-          success={verifyStatus === 'success'}
+          error={otpDigitInvalid || isStatusSuccess === false}
+          success={isStatusSuccess === true}
          onChange={(value) => setOtpCode(value)}
        />

--- a/src/features/authorization/components/ForgetPassword/ForgettedPasswordInfo.tsx
+++ b/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')}
--- a/src/features/authorization/index.ts
+++ b/src/features/authorization/index.ts
@@ -0,0 +1,2 @@
+export * from './routes/AuthenticationPage';
+export * from './routes/ForgetPasswordPage';
--- a/src/routes/config.tsx
+++ b/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 />,
--- a/src/theme/colors.ts
+++ b/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',