diff --git a/src/langs/fa.json b/src/langs/fa.json index 45b426f..b234e0d 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -23,6 +23,9 @@ "enter_info_login": "لطفا اطلاعات خود را وارد کنید.", "mobile_or_email": " شماره موبایل یا ایمیل", "enter_mobile_or_email": " شماره موبایل یا ایمیل خود را وارد کنید", + "mobile": "شماره موبایل", + "enter_mobile": "شماره موبایل خود را وارد کنید", + "otp_sent": "کد تایید ارسال شد", "have_account": "آیا حساب کاربری ندارید؟", "register": "ثبت نام", "enter_otp": "کد تایید را وارد کنید", diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx index e38571a..e88f39d 100644 --- a/src/pages/auth/Login.tsx +++ b/src/pages/auth/Login.tsx @@ -4,11 +4,10 @@ import LogoSmallImage from '../../assets/images/logo-small.svg' import { useAuthStore } from './store/AuthStore' import LoginStep1 from './components/LoginStep1' import LoginStep2 from './components/LoginStep2' -import LoginStep3 from './components/LoginStep3' const Login: FC = () => { - const { stepLogin, phone, email } = useAuthStore() + const { stepLogin, phone } = useAuthStore() return (
@@ -24,11 +23,7 @@ const Login: FC = () => { : stepLogin === 2 && !!phone ? - : stepLogin === 2 && !!email ? - - : stepLogin === 3 ? - - : null + : null }
diff --git a/src/pages/auth/components/LoginStep1.tsx b/src/pages/auth/components/LoginStep1.tsx index 6df0eeb..98ba61a 100644 --- a/src/pages/auth/components/LoginStep1.tsx +++ b/src/pages/auth/components/LoginStep1.tsx @@ -1,55 +1,46 @@ import { type FC } from 'react' import Input from '../../../components/Input' import { useTranslation } from 'react-i18next' -import { type LoginType } from '../types/AuthTypes' import { useFormik } from 'formik' import * as Yup from 'yup' import { useAuthStore } from '../store/AuthStore' import Error from '../../../components/Error' import Button from '../../../components/Button' -import { isEmail } from '../../../config/func' -import { useCheckHasAccount, useLoginWithOtp } from '../hooks/useAuthData' +import { useLoginWithOtp } from '../hooks/useAuthData' import { toast } from 'react-toastify' import { type ErrorType } from '../../../helpers/types' +import { useParams } from 'react-router-dom' + +type LoginStep1FormType = { + phone: string; +} const LoginStep1: FC = () => { const { t } = useTranslation('global') - const { setPhone, phone, setStepLogin, setEmail } = useAuthStore() + const { setPhone, phone, setStepLogin } = useAuthStore() const loginWithOtp = useLoginWithOtp() - const checkHasAccount = useCheckHasAccount() + const { slug } = useParams() - const formik = useFormik({ + const formik = useFormik({ initialValues: { - phone_email: phone, + phone: phone, }, validationSchema: Yup.object({ - phone_email: Yup.string() + phone: Yup.string() .required(t('errors.required')) }), onSubmit(values) { - if (isEmail(values.phone_email)) { - setEmail(values.phone_email) - checkHasAccount.mutate({ email: values.phone_email }, { - onSuccess() { - setStepLogin(2) - }, - onError(error: ErrorType) { - toast.error(error?.response?.data?.error?.message[0]) - }, - }) - } else { - setPhone(values.phone_email) - loginWithOtp.mutate({ phone: values.phone_email }, { - onSuccess() { - setStepLogin(2) - toast.success(t('auth.otp_sent')) - }, - onError(error: ErrorType) { - toast.error(error?.response?.data?.error?.message[0]) - }, - }) - } + setPhone(values.phone) + loginWithOtp.mutate({ phone: values.phone, slug: slug as string }, { + onSuccess() { + setStepLogin(2) + toast.success(t('auth.otp_sent')) + }, + onError(error: ErrorType) { + toast.error(error?.response?.data?.error?.message[0]) + }, + }) }, }) @@ -66,19 +57,19 @@ const LoginStep1: FC = () => {
{ - formik.touched.phone_email && formik.errors.phone_email && + formik.touched.phone && formik.errors.phone && } @@ -89,7 +80,7 @@ const LoginStep1: FC = () => { label={t('auth.next')} className='mt-8' onClick={() => formik.handleSubmit()} - isLoading={loginWithOtp.isPending || checkHasAccount.isPending} + isLoading={loginWithOtp.isPending} />
diff --git a/src/pages/auth/components/LoginStep2.tsx b/src/pages/auth/components/LoginStep2.tsx index 775f586..df7eccb 100644 --- a/src/pages/auth/components/LoginStep2.tsx +++ b/src/pages/auth/components/LoginStep2.tsx @@ -7,12 +7,12 @@ import { useAuthStore } from '../store/AuthStore' import Button from '../../../components/Button' import OTPInput from 'react-otp-input' import { useCountDown } from '../../../hooks/useCountDown' -// import ArrowLeftIcon from '../../../assets/images/arrow-left.svg' import { Pages } from '../../../config/Pages' import { useOtpVerify } from '../hooks/useAuthData' import { type ErrorType } from '../../../helpers/types' import { toast } from 'react-toastify' import { setToken, setRefreshToken } from '../../../config/func' +import { useParams } from 'react-router-dom' const LoginStep2: FC = () => { @@ -20,25 +20,26 @@ const LoginStep2: FC = () => { const { phone, setStepLogin } = useAuthStore() const { value } = useCountDown(2, true) const otpVerify = useOtpVerify() + const { slug } = useParams() - const formik = useFormik({ + const formik = useFormik<{ otp: string }>({ initialValues: { - phone: phone, - code: '' + otp: '' }, validationSchema: Yup.object({ - code: Yup.string() + otp: Yup.string() .required(t('errors.required')) }), onSubmit(values) { const params: OtpVerifyType = { phone: phone, - code: values.code + otp: values.otp, + slug: slug as string } otpVerify.mutate(params, { onSuccess(data) { - setToken(data?.data?.accessToken?.token) - setRefreshToken(data?.data?.refreshToken?.token) + setToken(data?.data?.tokens?.accessToken?.token) + setRefreshToken(data?.data?.tokens?.refreshToken?.token) window.location.href = Pages.dashboard }, onError(error: ErrorType) { @@ -75,17 +76,25 @@ const LoginStep2: FC = () => {
formik.setFieldValue('code', otp)} - renderInput={(props) => } + containerStyle={{ direction: 'ltr', width: '100%' }} + onChange={(otp: string) => formik.setFieldValue('otp', otp)} + renderInput={(props) => + + } />
{ - formik.touched.code && formik.errors.code && -
{formik.errors.code}
+ formik.touched.otp && formik.errors.otp && +
{formik.errors.otp}
}
diff --git a/src/pages/auth/service/AuthService.ts b/src/pages/auth/service/AuthService.ts index 0ea880e..85edad8 100644 --- a/src/pages/auth/service/AuthService.ts +++ b/src/pages/auth/service/AuthService.ts @@ -15,12 +15,12 @@ export const loginWithPassword = async (params: LoginWithPasswordType) => { }; export const loginWithOtp = async (params: LoginWithOtpType) => { - const { data } = await axios.post(`/auth/otp/send`, params); + const { data } = await axios.post(`/admin/auth/otp/request`, params); return data; }; export const otpVerify = async (params: OtpVerifyType) => { - const { data } = await axios.post(`/auth/otp/verify/admin`, params); + const { data } = await axios.post(`/admin/auth/otp/verify`, params); return data; }; export const checkHasAccount = async (params: CheckHasAccountType) => { diff --git a/src/pages/auth/types/AuthTypes.ts b/src/pages/auth/types/AuthTypes.ts index 60ef40b..1a562e5 100644 --- a/src/pages/auth/types/AuthTypes.ts +++ b/src/pages/auth/types/AuthTypes.ts @@ -25,11 +25,13 @@ export type LoginWithPasswordType = XOR< export type LoginWithOtpType = { phone: string; + slug: string; }; export type OtpVerifyType = { phone: string; - code: string; + otp: string; + slug: string; }; export type CheckHasAccountType = { diff --git a/src/router/Auth.tsx b/src/router/Auth.tsx index e7693f3..b85f96d 100644 --- a/src/router/Auth.tsx +++ b/src/router/Auth.tsx @@ -6,7 +6,7 @@ import Login from '../pages/auth/Login' const Auth: FC = () => { return ( sa - } /> + } /> ) }