diff --git a/package-lock.json b/package-lock.json index d528328..eb009a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "@types/node": "^24.0.10", "@types/react": "^19.1.8", "@types/react-dom": "^19.1.6", + "@types/stylis": "^4.2.7", "@typescript-eslint/eslint-plugin": "^8.35.1", "@typescript-eslint/parser": "^8.35.1", "@vitejs/plugin-react": "^4.5.2", @@ -1882,6 +1883,13 @@ "@types/react": "*" } }, + "node_modules/@types/stylis": { + "version": "4.2.7", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.7.tgz", + "integrity": "sha512-VgDNokpBoKF+wrdvhAAfS55OMQpL6QRglwTwNC3kIgBrzZxA4WsFj+2eLfEA/uMUDzBcEhYmjSbwQakn/i3ajA==", + "dev": true, + "license": "MIT" + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.35.1", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.35.1.tgz", diff --git a/package.json b/package.json index a876532..eb041d6 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "@types/node": "^24.0.10", "@types/react": "^19.1.8", "@types/react-dom": "^19.1.6", + "@types/stylis": "^4.2.7", "@typescript-eslint/eslint-plugin": "^8.35.1", "@typescript-eslint/parser": "^8.35.1", "@vitejs/plugin-react": "^4.5.2", diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx index 78b89a1..d9376be 100644 --- a/src/components/Toast.tsx +++ b/src/components/Toast.tsx @@ -1,5 +1,5 @@ import { Alert, Snackbar, type AlertColor } from '@mui/material'; -import React, { type PropsWithChildren } from 'react'; +import { type PropsWithChildren } from 'react'; export interface ToastProps extends PropsWithChildren { color: AlertColor | undefined; diff --git a/src/features/authorization/components/AuthenticationCard.tsx b/src/features/authorization/components/AuthenticationCard.tsx index a4f5e0d..6c49575 100644 --- a/src/features/authorization/components/AuthenticationCard.tsx +++ b/src/features/authorization/components/AuthenticationCard.tsx @@ -1,5 +1,5 @@ -import { Box, Paper } from '@mui/material'; -import React, { type PropsWithChildren } from 'react'; +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) => { diff --git a/src/features/authorization/components/AuthenticationSteps/AuthenticationSteps.tsx b/src/features/authorization/components/AuthenticationSteps/AuthenticationSteps.tsx index 481f5a8..edba9e0 100644 --- a/src/features/authorization/components/AuthenticationSteps/AuthenticationSteps.tsx +++ b/src/features/authorization/components/AuthenticationSteps/AuthenticationSteps.tsx @@ -1,15 +1,10 @@ -import React, { useState, type JSX } from 'react'; +import { useState, type JSX } from 'react'; import { LoginRegisterForm } from './LoginRegiserForm'; import type { AuthMode, AuthType } from '../../types/authTypes'; import { OtpVerifyForm } from './OtpVerifyForm'; import { isNumeric } from '@/utils/regexes/isNumeric'; import { CompleteSignUp } from './CompleteSignUp'; import { EnterPasswordForm } from './EnterPasswordForm'; -import { - getUserStatusByPhoneNumberOrEmail, - sendEmailOtp, - sendSmsOtp, -} from '../../api/authorizationAPI'; import { UserStatus } from '../../types/userTypes'; import type { CountryCode, GUID } from '@/types/commonTypes'; import { VerifyPhoneNumber } from './VerifyPhoneNumber'; @@ -134,11 +129,9 @@ export const AuthenticationSteps = (): JSX.Element => { {currentStep === 'addedPhoneNumberVerify' && ( setCurrentStep('addPhoneNumber')} value={addedPhoneNumberValue} - email={loginRegisterValue} onPhoneNumberVerified={handlePhoneNumberVerified} /> )} diff --git a/src/features/authorization/components/AuthenticationSteps/CompleteSignUp.tsx b/src/features/authorization/components/AuthenticationSteps/CompleteSignUp.tsx index 063892c..0394f8c 100644 --- a/src/features/authorization/components/AuthenticationSteps/CompleteSignUp.tsx +++ b/src/features/authorization/components/AuthenticationSteps/CompleteSignUp.tsx @@ -1,6 +1,6 @@ -import { Box, Button, Paper, TextField, Typography } from '@mui/material'; +import { Button, TextField, Typography } from '@mui/material'; import parsePhoneNumberFromString from 'libphonenumber-js'; -import React, { useRef, useState, type Dispatch } from 'react'; +import { useRef, useState, type Dispatch } from 'react'; import { useTranslation } from 'react-i18next'; import { AuthenticationCard } from '../AuthenticationCard'; import { CountryCodeSelector } from '../CountryCodeSelector'; diff --git a/src/features/authorization/components/AuthenticationSteps/EnterPasswordForm.tsx b/src/features/authorization/components/AuthenticationSteps/EnterPasswordForm.tsx index 56dadd4..8fa1206 100644 --- a/src/features/authorization/components/AuthenticationSteps/EnterPasswordForm.tsx +++ b/src/features/authorization/components/AuthenticationSteps/EnterPasswordForm.tsx @@ -1,6 +1,6 @@ -import React, { useRef, useState } from 'react'; +import { useRef, useState } from 'react'; import { AuthenticationCard } from '../AuthenticationCard'; -import { ArrowLeft, Edit2, Eye, EyeSlash, MaskLeft } from 'iconsax-reactjs'; +import { ArrowLeft, Edit2, Eye, EyeSlash } from 'iconsax-reactjs'; import { Box, Button, @@ -11,7 +11,7 @@ import { } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { Toast } from '@/components/Toast'; -import { Link, Navigate, useSearchParams } from 'react-router'; +import { Link } from 'react-router'; import type { AuthType } from '../../types/authTypes'; import type { CountryCode, GUID } from '@/types/commonTypes'; import { @@ -19,7 +19,7 @@ import { sendEmailOtp, sendSmsOtp, } from '../../api/authorizationAPI'; -import type { LoginRequest, PasswordLoginRequest } from '../../types/userTypes'; +import type { PasswordLoginRequest } from '../../types/userTypes'; export interface EnterPasswordFormProps { onEditValue: () => void; diff --git a/src/features/authorization/components/AuthenticationSteps/GoogleAuthentication.tsx b/src/features/authorization/components/AuthenticationSteps/GoogleAuthentication.tsx index c5c49cf..90ad828 100644 --- a/src/features/authorization/components/AuthenticationSteps/GoogleAuthentication.tsx +++ b/src/features/authorization/components/AuthenticationSteps/GoogleAuthentication.tsx @@ -1,18 +1,11 @@ import { Button } from '@mui/material'; import { Google } from 'iconsax-reactjs'; -import React, { useEffect, useRef, useState } from 'react'; +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'; -declare global { - interface Window { - google: typeof google; - } - const google: any; -} - export interface GoogleAuthenticationProps { disabled: boolean; authReturnUrl: string; diff --git a/src/features/authorization/components/AuthenticationSteps/LoginRegiserForm.tsx b/src/features/authorization/components/AuthenticationSteps/LoginRegiserForm.tsx index 1f7aa5a..0f7f048 100644 --- a/src/features/authorization/components/AuthenticationSteps/LoginRegiserForm.tsx +++ b/src/features/authorization/components/AuthenticationSteps/LoginRegiserForm.tsx @@ -1,16 +1,8 @@ -import { - Box, - Button, - Paper, - Stack, - TextField, - Typography, -} from '@mui/material'; +import { Button, Stack, TextField, Typography } from '@mui/material'; import { useRef, useState, type Dispatch } from 'react'; import { useTranslation } from 'react-i18next'; -import { Google } from 'iconsax-reactjs'; import { isNumeric } from '@/utils/regexes/isNumeric'; -import type { AuthMode, AuthType } from '../../types/authTypes'; +import type { AuthType } from '../../types/authTypes'; import { isEmail } from '@/utils/regexes/isEmail'; import parsePhoneNumberFromString from 'libphonenumber-js'; import { AuthenticationCard } from '../AuthenticationCard'; @@ -45,10 +37,9 @@ export function LoginRegisterForm({ onGoogleAuthenticated, }: LoginRegisterFormProps) { const [checkStatusLoading, setCheckStatusLoading] = useState(false); - const { t, i18n } = useTranslation('authentication'); + const { t } = useTranslation('authentication'); const textFieldRef = useRef(null); const inputRef = useRef(null); - const dir = i18n.dir(); const [error, setError] = useState(); const [touched, setTouched] = useState(false); const [errorMessage, setErrorMessage] = useState(); diff --git a/src/features/authorization/components/AuthenticationSteps/OtpVerifyForm.tsx b/src/features/authorization/components/AuthenticationSteps/OtpVerifyForm.tsx index bc5a4c0..d5eaec5 100644 --- a/src/features/authorization/components/AuthenticationSteps/OtpVerifyForm.tsx +++ b/src/features/authorization/components/AuthenticationSteps/OtpVerifyForm.tsx @@ -1,18 +1,13 @@ import { useTranslation } from 'react-i18next'; -import { Alert, Box, Button, Snackbar, Stack, Typography } from '@mui/material'; +import { Box, Button, Stack, Typography } from '@mui/material'; import { Edit2 } from 'iconsax-reactjs'; 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 { - ConfirmEmailOtpRequest, - LoginRequest, -} from '../../types/userTypes'; -import { useSearchParams } from 'react-router'; +import type { LoginRequest } from '../../types/userTypes'; import { - confirmEmailOtp, loginOrSignUpWithOtp, sendEmailOtp, sendSmsOtp, diff --git a/src/features/authorization/components/AuthenticationSteps/VerifyPhoneNumber.tsx b/src/features/authorization/components/AuthenticationSteps/VerifyPhoneNumber.tsx index d35baba..10c6abd 100644 --- a/src/features/authorization/components/AuthenticationSteps/VerifyPhoneNumber.tsx +++ b/src/features/authorization/components/AuthenticationSteps/VerifyPhoneNumber.tsx @@ -1,33 +1,22 @@ import { useTranslation } from 'react-i18next'; -import { Alert, Box, Button, Snackbar, Stack, Typography } from '@mui/material'; +import { Box, Button, Stack, Typography } from '@mui/material'; import { Edit2 } from 'iconsax-reactjs'; 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 { ConfirmSmsOtpRequest, LoginRequest } from '../../types/userTypes'; -import { useSearchParams } from 'react-router'; -import { - confirmSmsOtp, - loginOrSignUpWithOtp, - sendEmailOtp, - sendSmsOtp, -} from '../../api/authorizationAPI'; -import type { CountryCode, GUID } from '@/types/commonTypes'; +import type { ConfirmSmsOtpRequest } from '../../types/userTypes'; +import { confirmSmsOtp, sendSmsOtp } from '../../api/authorizationAPI'; +import type { CountryCode } from '@/types/commonTypes'; interface VerifyPhoneNumberProps { - authReturnUrl: string; value: string; - email: string; countryCode: CountryCode; onEditValue: () => void; onPhoneNumberVerified: () => void; } export function VerifyPhoneNumber({ - authReturnUrl, - email, value, countryCode, onEditValue, diff --git a/src/features/authorization/components/CountryCodeSelector.tsx b/src/features/authorization/components/CountryCodeSelector.tsx index 04ad265..849e986 100644 --- a/src/features/authorization/components/CountryCodeSelector.tsx +++ b/src/features/authorization/components/CountryCodeSelector.tsx @@ -13,7 +13,6 @@ import { useMemo, useRef, useState, type RefObject } from 'react'; import { ArrowDown2 } from 'iconsax-reactjs'; import ReactCountryFlag from 'react-country-flag'; import { useTranslation } from 'react-i18next'; -import { Virtuoso } from 'react-virtuoso'; import { countries, type Country } from '../data/countries'; import type { CountryCode } from '@/types/commonTypes'; interface CountryCodeSelectorProps { diff --git a/src/features/authorization/components/ForgetPassword/ChangePassword.tsx b/src/features/authorization/components/ForgetPassword/ChangePassword.tsx index b4b35dd..6928596 100644 --- a/src/features/authorization/components/ForgetPassword/ChangePassword.tsx +++ b/src/features/authorization/components/ForgetPassword/ChangePassword.tsx @@ -1,13 +1,6 @@ -import React, { useRef, useState } from 'react'; +import { useRef, useState } from 'react'; import { AuthenticationCard } from '../AuthenticationCard'; -import { - ArrowLeft, - Edit2, - Eye, - EyeSlash, - MaskLeft, - TickCircle, -} from 'iconsax-reactjs'; +import { Edit2, Eye, EyeSlash, TickCircle } from 'iconsax-reactjs'; import { Box, Button, diff --git a/src/features/authorization/components/ForgetPassword/ForgetPasswordContainer.tsx b/src/features/authorization/components/ForgetPassword/ForgetPasswordContainer.tsx index a980bed..137b413 100644 --- a/src/features/authorization/components/ForgetPassword/ForgetPasswordContainer.tsx +++ b/src/features/authorization/components/ForgetPassword/ForgetPasswordContainer.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import type { AuthType } from '../../types/authTypes'; import { ForgettedPasswordInfo } from './ForgettedPasswordInfo'; import { ForgetPasswordOtp } from './ForgetPasswordOtp'; @@ -14,7 +14,7 @@ export const ForgetPasswordContainer = () => { const [infoCountryCode, setInfoCountryCode] = useState('+98'); const [infoType, setInfoType] = useState('email'); - const handleVerifyOtp = (value: string) => { + const handleVerifyOtp = () => { setForgetPassCurrentStep('verifyOtp'); }; diff --git a/src/features/authorization/components/ForgetPassword/ForgetPasswordOtp.tsx b/src/features/authorization/components/ForgetPassword/ForgetPasswordOtp.tsx index 5f50a7f..cede6af 100644 --- a/src/features/authorization/components/ForgetPassword/ForgetPasswordOtp.tsx +++ b/src/features/authorization/components/ForgetPassword/ForgetPasswordOtp.tsx @@ -1,8 +1,8 @@ import { useTranslation } from 'react-i18next'; -import { Alert, Box, Button, Snackbar, Stack, Typography } from '@mui/material'; +import { Box, Button, Stack, Typography } from '@mui/material'; import { Edit2 } from 'iconsax-reactjs'; import DigitInput from '@/components/components/DigitsInput'; -import type { AuthMode, AuthType } from '../../types/authTypes'; +import type { AuthType } from '../../types/authTypes'; import { useEffect, useState } from 'react'; import { Toast } from '@/components/Toast'; import { AuthenticationCard } from '../AuthenticationCard'; @@ -96,8 +96,10 @@ export function ForgetPasswordOtp({ const jsonRes = await result.json(); if (jsonRes.success) { + setVerifyStatus('success'); onOTPVerified(otpCode); } else { + setVerifyStatus('failed'); setVerifyAlertMessage(jsonRes.message); } diff --git a/src/features/authorization/components/ForgetPassword/ForgettedPasswordInfo.tsx b/src/features/authorization/components/ForgetPassword/ForgettedPasswordInfo.tsx index cc9abf3..2ccf34e 100644 --- a/src/features/authorization/components/ForgetPassword/ForgettedPasswordInfo.tsx +++ b/src/features/authorization/components/ForgetPassword/ForgettedPasswordInfo.tsx @@ -1,16 +1,8 @@ -import { - Box, - Button, - Paper, - Stack, - TextField, - Typography, -} from '@mui/material'; +import { Button, Stack, TextField, Typography } from '@mui/material'; import { useRef, useState, type Dispatch } from 'react'; import { useTranslation } from 'react-i18next'; -import { Google } from 'iconsax-reactjs'; import { isNumeric } from '@/utils/regexes/isNumeric'; -import type { AuthMode, AuthType } from '../../types/authTypes'; +import type { AuthType } from '../../types/authTypes'; import { isEmail } from '@/utils/regexes/isEmail'; import parsePhoneNumberFromString from 'libphonenumber-js'; import { AuthenticationCard } from '../AuthenticationCard'; @@ -39,10 +31,9 @@ export function ForgettedPasswordInfo({ countryCode, setCountryCode, }: ForgettedPasswordInfoProps) { - const { t, i18n } = useTranslation('authentication'); + const { t } = useTranslation('authentication'); const textFieldRef = useRef(null); const inputRef = useRef(null); - const dir = i18n.dir(); const [error, setError] = useState(); const [touched, setTouched] = useState(false); const [errorMessage, setErrorMessage] = useState(); diff --git a/src/features/authorization/routes/AuthenticationPage.tsx b/src/features/authorization/routes/AuthenticationPage.tsx index d34cc01..47917cf 100644 --- a/src/features/authorization/routes/AuthenticationPage.tsx +++ b/src/features/authorization/routes/AuthenticationPage.tsx @@ -1,9 +1,6 @@ import { FlexBox } from '@/components/components/common/FlexBox'; import Logo from '@/components/Logo'; -import { Paper } from '@mui/material'; -import { useState } from 'react'; import { AuthenticationSteps } from '../components/AuthenticationSteps/AuthenticationSteps'; -import { ForgetPasswordContainer } from '../components/ForgetPassword/ForgetPasswordContainer'; export function AuthenticationPage() { return ( diff --git a/src/features/authorization/routes/ForgetPasswordPage.tsx b/src/features/authorization/routes/ForgetPasswordPage.tsx index d30290e..f54d961 100644 --- a/src/features/authorization/routes/ForgetPasswordPage.tsx +++ b/src/features/authorization/routes/ForgetPasswordPage.tsx @@ -1,8 +1,5 @@ import { FlexBox } from '@/components/components/common/FlexBox'; import Logo from '@/components/Logo'; -import { Paper } from '@mui/material'; -import { useState } from 'react'; -import { AuthenticationSteps } from '../components/AuthenticationSteps/AuthenticationSteps'; import { ForgetPasswordContainer } from '../components/ForgetPassword/ForgetPasswordContainer'; export function ForgetPasswordPage() { diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 0000000..3a11320 --- /dev/null +++ b/src/global.d.ts @@ -0,0 +1,12 @@ +import React from 'react'; + +declare global { + namespace JSX { + interface Element extends React.ReactElement {} + } + + interface Window { + google: typeof google; + } + const google: any; +} diff --git a/vite.config.d.ts b/vite.config.d.ts new file mode 100644 index 0000000..340562a --- /dev/null +++ b/vite.config.d.ts @@ -0,0 +1,2 @@ +declare const _default: import("vite").UserConfig; +export default _default; diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..70ef262 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import path from 'path'; +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], + resolve: { + alias: { + '@': path.resolve(__dirname, './src'), + }, + }, +});