shop-admin/src/pages/auth/components/LoginStep1.tsx

import { type FC } from 'react'
import Input from '../../../components/Input'
import { useTranslation } from 'react-i18next'
import { type LoginWithPasswordType } 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 { useLoginWithPassword } from '../hooks/useAuthData'
import { toast } from 'react-toastify'
import { type ErrorType } from '../../../helpers/types'
import { setRefreshToken, setToken } from '../../../config/func'
import { Pages } from '../../../config/Pages'

const LoginStep1: FC = () => {

    const { t } = useTranslation('global')
    const { setEmail } = useAuthStore()
    const loginWithPassword = useLoginWithPassword()

    const formik = useFormik<LoginWithPasswordType>({
        initialValues: {
            email: '',
            password: '',
        },
        validationSchema: Yup.object({
            email: Yup.string()
                .email(t('errors.invalid_email'))
                .required(t('errors.required')),
            password: Yup.string()
                .required(t('errors.required'))
        }),
        onSubmit(values) {
            setEmail(values.email)
            loginWithPassword.mutate(values, {
                onSuccess(data) {
                    if (data?.results?.accessToken?.token && data?.results?.refreshToken?.token) {
                        setToken(data.results.accessToken.token)
                        setRefreshToken(data.results.refreshToken.token)
                        window.location.href = Pages.dashboard
                    }
                },
                onError(error: ErrorType) {
                    toast.error(error?.response?.data?.error?.message[0])
                },
            })
        },
    })

    return (
        <div>
            <div className='mt-5'>
                <h2 className='text-2xl font-bold'>
                    {t('auth.welcome')}
                </h2>
                <p className='text-description text-sm mt-2'>
                    {t('auth.enter_info_login')}
                </p>
            </div>

            <div className='mt-16 space-y-6'>
                <Input
                    label={t('auth.email')}
                    placeholder={t('auth.enter_email')}
                    type='email'
                    className='text-right'
                    name='email'
                    onChange={formik.handleChange}
                    value={formik.values.email}
                    error_text={formik.touched.email && formik.errors.email ? formik.errors.email : ''}
                />

                <Input
                    label={t('auth.password')}
                    placeholder={t('auth.enter_password')}
                    type='password'
                    className='text-right'
                    name='password'
                    onChange={formik.handleChange}
                    value={formik.values.password}
                    error_text={formik.touched.password && formik.errors.password ? formik.errors.password : ''}
                />

                {
                    formik.touched.email && formik.errors.email &&
                    <Error
                        errorText={formik.errors.email}
                    />
                }

                {
                    formik.touched.password && formik.errors.password &&
                    <Error
                        errorText={formik.errors.password}
                    />
                }
            </div>

            <Button
                label={t('auth.login')}
                className='mt-8'
                onClick={() => formik.handleSubmit()}
                isLoading={loginWithPassword.isPending}
            />

        </div>
    )
}

export default LoginStep1