login

src/app/auth/login/types/Types.ts

@@ -6,4 +6,5 @@ export type LoginOTPRequestType = {
 export type LoginVerifyOTPType = {
   phone: string;
   otp: string;
+  slug: string;
 };

src/features/auth/components/StepEnterNumber.tsx

@@ -36,10 +36,9 @@ function StepEnterNumber() {
     onSubmit: (values) => {
       if (name) {
         values.slug = name as string
-        values.phone = 'abas'
         mutateOtpRequest(values, {
           onSuccess: () => {
-            toast(t('auth.otp_sent'))
+            toast(t('otp_sent'), 'success')
             setStep(AUTH_STEP.ENTER_OTP)
           },
           onError: (error) => {
@@ -95,17 +94,21 @@ function StepEnterNumber() {
             />
           )}
           {step === AUTH_STEP.ENTER_OTP && (
-            <StepOtp phone={formik.values.phone} />
+            <StepOtp phone={formik.values.phone} slug={formik.values.slug} />
           )}
         </div>
-        <Button
-          disabled={!formik.isValid}
-          pending={isPending}
-          type='button'
-          onClick={() => formik.handleSubmit()}
-        >
-          {t('Enter.ButtonSubmit')}
-        </Button>
+        {
+          step === AUTH_STEP.ENTER_NUMBER && (
+            <Button
+              disabled={!formik.isValid}
+              pending={isPending}
+              type='button'
+              onClick={() => formik.handleSubmit()}
+            >
+              {t('Enter.ButtonSubmit')}
+            </Button>
+          )
+        }
       </div>
     </>
   )

src/features/auth/components/StepOtp.tsx

@@ -6,30 +6,38 @@ import * as Yup from 'yup'
 import { useTranslation } from 'react-i18next'
 import { useOtpVerify } from '@/app/auth/login/hooks/useAuthData'
 import { toast } from '@/components/Toast'
+import Button from '@/components/button/PrimaryButton'
+import { extractErrorMessage } from '@/lib/func'
+
 
 type Props = {
-    phone: string
+    phone: string,
+    slug: string
 }
 
-const StepOtp = ({ phone }: Props) => {
+const StepOtp = ({ phone, slug }: Props) => {
 
     const { t } = useTranslation('auth')
-    const { mutate: mutateOtpVerify } = useOtpVerify()
+    const { mutate: mutateOtpVerify, isPending } = useOtpVerify()
     const formik = useFormik<LoginVerifyOTPType>({
         initialValues: {
             phone: phone,
-            otp: ''
+            otp: '',
+            slug: slug
         },
         validationSchema: Yup.object({
             otp: Yup.string().required(t('Errors.OTPRequired'))
         }),
         onSubmit: (values) => {
             mutateOtpVerify(values, {
-                onSuccess: () => {
-                    toast(t('auth.otp_verified'))
+                onSuccess: (data) => {
+                    toast(t('otp_verified'), 'success')
+                    localStorage.setItem(process.env.NEXT_PUBLIC_TOKEN_NAME as string, data?.data?.tokens?.accessToken?.token as string)
+                    localStorage.setItem(process.env.NEXT_PUBLIC_REFRESH_TOKEN_NAME as string, data?.data?.tokens?.refreshToken?.token as string)
+                    window.location.href = `/${slug}`
                 },
                 onError: (error) => {
-                    console.log(error)
+                    toast(extractErrorMessage(error), 'error')
                 }
             })
         }
@@ -49,9 +57,19 @@ const StepOtp = ({ phone }: Props) => {
                         type='tel'
                         autoComplete="one-time-code"
                         inputMode="numeric"
-                        className='w-full h-[45px] sm:h-[50px] flex-1 mx-1 sm:mx-2 bg-white border border-gray-300 outline-0 rounded-[10px] text-center text-lg sm:text-xl' />
+                        className='w-full h-[45px] sm:h-[50px] flex-1 mx-1 sm:mx-2 bg-white border border-gray-300 outline-0 rounded-[10px] text-center text-sm' />
                 }
             />
+
+            <Button
+                className='mt-10'
+                disabled={!formik.isValid}
+                pending={isPending}
+                type='button'
+                onClick={() => formik.handleSubmit()}
+            >
+                {t('OTP.ButtonSubmit')}
+            </Button>
         </div>
     )
 }

src/locales/fa/auth.json

@@ -30,6 +30,8 @@
     "LabelRememberance": "مرا به خاطر بسپار",
     "ButtonSubmit": "ورود به منو"
   },
+  "otp_sent": "کد فعالسازی ارسال شد.",
+  "otp_verified": "کد فعالسازی با موفقیت تأیید شد.",
   "Errors": {
     "PasswordLength": "کلمه عبور باید شامل حداقل 6 کاراکتر باشد",
     "PasswordMatch": "تکرار کلمه عبور مطابقت ندارد",