danak/danak-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sign in

Browse Source
This commit is contained in:
hamid zarghami
2025-01-22 10:23:52 +03:30
parent 99573f050a
commit ab441a593c
18 changed files with 344 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+3 -1
View File
@@ -1 +1,3 @@
VITE_TOKEN_NAME = 'dsc_token'
VITE_TOKEN_NAME = 'dsc_token'
VITE_REFRESH_TOKEN_NAME = 'dsc_refresh_token'
VITE_BASE_URL = 'http://192.168.0.235:3500'
package-lock.json
Generated
+111
View File
@@ -11,6 +11,7 @@
"@headlessui/react": "^2.2.0",
"@material-tailwind/react": "^2.1.10",
"@tanstack/react-query": "^5.62.8",
"axios": "^1.7.9",
"formik": "^2.4.6",
"i18next": "^24.2.0",
"iconsax-react": "^0.0.8",
@@ -23,6 +24,7 @@
"react-multi-date-picker": "^4.5.2",
"react-otp-input": "^3.1.1",
"react-router-dom": "^7.1.0",
"react-spinners": "^0.15.0",
"react-toastify": "^11.0.2",
"swiper": "^11.2.1",
"tailwind-merge": "^2.5.5",
@@ -2227,6 +2229,12 @@
"node": ">=10"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"license": "MIT"
},
"node_modules/attr-accept": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
@@ -2274,6 +2282,17 @@
"postcss": "^8.1.0"
}
},
"node_modules/axios": {
"version": "1.7.9",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
"integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2482,6 +2501,18 @@
"dev": true,
"license": "MIT"
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"license": "MIT",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2583,6 +2614,15 @@
"node": ">=0.10.0"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"license": "MIT",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/didyoumean": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2995,6 +3035,26 @@
"dev": true,
"license": "ISC"
},
"node_modules/follow-redirects": {
"version": "1.15.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"license": "MIT",
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/foreground-child": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
@@ -3012,6 +3072,20 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/form-data": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
"license": "MIT",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/formik": {
"version": "2.4.6",
"resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz",
@@ -3625,6 +3699,27 @@
"node": ">=8.6"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"license": "MIT",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4089,6 +4184,12 @@
"integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
"license": "MIT"
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"license": "MIT"
},
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4330,6 +4431,16 @@
"react-dom": ">=18"
}
},
"node_modules/react-spinners": {
"version": "0.15.0",
"resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.15.0.tgz",
"integrity": "sha512-ZO3/fNB9Qc+kgpG3SfdlMnvTX6LtLmTnOogb3W6sXIaU/kZ1ydEViPfZ06kSOaEsor58C/tzXw2wROGQu3X2pA==",
"license": "MIT",
"peerDependencies": {
"react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/react-toastify": {
"version": "11.0.2",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.2.tgz",
package.json
+2
View File
@@ -13,6 +13,7 @@
"@headlessui/react": "^2.2.0",
"@material-tailwind/react": "^2.1.10",
"@tanstack/react-query": "^5.62.8",
"axios": "^1.7.9",
"formik": "^2.4.6",
"i18next": "^24.2.0",
"iconsax-react": "^0.0.8",
@@ -25,6 +26,7 @@
"react-multi-date-picker": "^4.5.2",
"react-otp-input": "^3.1.1",
"react-router-dom": "^7.1.0",
"react-spinners": "^0.15.0",
"react-toastify": "^11.0.2",
"swiper": "^11.2.1",
"tailwind-merge": "^2.5.5",
src/App.tsx
-3
View File
@@ -54,9 +54,6 @@ const App: FC = () => {
}, [])
console.log('us', isLogin);
return (
<BrowserRouter>
<QueryClientProvider client={queryClient}>
src/components/Button.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { ButtonHTMLAttributes, FC, memo, ReactNode } from 'react'
import ReactLoading from 'react-loading'
import MoonLoader from "react-spinners/MoonLoader"
import { XOR } from '../helpers/types'
import { clx } from '../helpers/utils'
@@ -21,7 +21,7 @@ const Button: FC<Props> = memo((props: Props) => {
<button {...props} className={`${buttonClass} ${props.className}`} >
{
props.isLoading ?
<ReactLoading type='spin' color={'white'} width={20} height={20} />
<MoonLoader color="white" size={20} />
:
props.label || props.children
}
src/config/axios.ts
+27
View File
@@ -0,0 +1,27 @@
import axios from "axios";
const axiosInstance = axios.create({
baseURL: import.meta.env.VITE_BASE_URL,
});
axiosInstance.interceptors.response.use(
(response) => response,
(error) => {
if (error.response.status === 401) {
localStorage.removeItem(import.meta.env.VITE_TOKEN_NAME);
window.location.href = "/auth";
}
return Promise.reject(error);
}
);
axiosInstance.interceptors.request.use(async function (config) {
const token = localStorage.getItem(import.meta.env.VITE_TOKEN_NAME)
? localStorage.getItem(import.meta.env.VITE_TOKEN_NAME)
: "";
config.headers.Authorization = "Bearer " + token;
return config;
});
export default axiosInstance;
src/config/func.ts
+4
View File
@@ -0,0 +1,4 @@
export function isEmail(input: string): boolean {
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return emailRegex.test(input);
}
src/helpers/types.ts
+13 -3
View File
@@ -5,6 +5,16 @@ export type XOR<T, U> = T | U extends object
: T | U;
export type ItemsSelectType = {
value: any,
label: string,
}
value: string;
label: string;
};
export type ErrorType = Error & {
response?: {
data?: {
error: {
message: string[];
};
};
};
};
src/index.css
+5
View File
@@ -126,3 +126,8 @@ tbody tr {
.overflowX::-webkit-scrollbar {
display: none;
}
.Toastify__toast {
direction: rtl;
font-family: "irancell" !important;
}
src/langs/fa.json
+2 -1
View File
@@ -35,7 +35,8 @@
"enter_password_step3": "رمز عبور را وارد کنید",
"enter_your_password": "رمز عبور خود را وارد کنید.",
"forgot_password": "فراموشی رمز عبور",
"login_with_otp": "ورود با رمز عبور یکبار مصرف"
"login_with_otp": "ورود با رمز عبور یکبار مصرف",
"otp_sent": "کد تایید ارسال شد"
},
"errors": {
"required": "این فیلد اجباری می باشد"
src/pages/auth/Login.tsx
+8 -4
View File
@@ -8,7 +8,9 @@ import LoginStep3 from './components/LoginStep3'
const Login: FC = () => {
const { stepLogin } = useAuthStore()
const { stepLogin, phone, email } = useAuthStore()
console.log(phone, email, stepLogin);
return (
@@ -23,11 +25,13 @@ const Login: FC = () => {
stepLogin === 1 ?
<LoginStep1 />
:
stepLogin === 2 ?
stepLogin === 2 && !!phone ?
<LoginStep2 />
: stepLogin === 3 ?
: stepLogin === 2 && !!email ?
<LoginStep3 />
: null
: stepLogin === 3 ?
<LoginStep3 />
: null
}
</div>
src/pages/auth/components/LoginStep1.tsx
+30 -3
View File
@@ -9,11 +9,17 @@ import Error from '../../../components/Error'
import Button from '../../../components/Button'
import { Link } from 'react-router-dom'
import { Pages } from '../../../config/Pages'
import { isEmail } from '../../../config/func'
import { useCheckHasAccount, useLoginWithOtp } from '../hooks/useAuthData'
import { toast } from 'react-toastify'
import { ErrorType } from '../../../helpers/types'
const LoginStep1: FC = () => {
const { t } = useTranslation('global')
const { setPhone, phone, setStepLogin } = useAuthStore()
const { setPhone, phone, setStepLogin, setEmail } = useAuthStore()
const loginWithOtp = useLoginWithOtp()
const checkHasAccount = useCheckHasAccount()
const formik = useFormik<LoginType>({
initialValues: {
@@ -24,8 +30,28 @@ const LoginStep1: FC = () => {
.required(t('errors.required'))
}),
onSubmit(values) {
setPhone(values.phone_email)
setStepLogin(2)
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])
},
})
}
},
})
@@ -65,6 +91,7 @@ const LoginStep1: FC = () => {
label={t('auth.next')}
className='mt-8'
onClick={() => formik.handleSubmit()}
isLoading={loginWithOtp.isPending || checkHasAccount.isPending}
/>
<div className='mt-6 flex justify-center gap-2 items-center text-sm'>
src/pages/auth/components/LoginStep2.tsx
+36 -15
View File
@@ -1,34 +1,49 @@
import { FC, useState } from 'react'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { LoginType } from '../types/AuthTypes'
import { OtpVerifyType } from '../types/AuthTypes'
import { useFormik } from 'formik'
import * as Yup from 'yup'
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 ArrowLeftIcon from '../../../assets/images/arrow-left.svg'
import { Pages } from '../../../config/Pages'
import { useOtpVerify } from '../hooks/useAuthData'
import { ErrorType } from '../../../helpers/types'
import { toast } from 'react-toastify'
const LoginStep2: FC = () => {
const { t } = useTranslation('global')
const { setPhone, phone, setStepLogin } = useAuthStore()
const [otpValue, setOtpValue] = useState<string>()
const { phone, setStepLogin } = useAuthStore()
const { value } = useCountDown(2, true)
const otpVerify = useOtpVerify()
const formik = useFormik<LoginType>({
const formik = useFormik<OtpVerifyType>({
initialValues: {
phone_email: phone,
phone: phone,
code: ''
},
validationSchema: Yup.object({
phone_email: Yup.string()
code: Yup.string()
.required(t('errors.required'))
}),
onSubmit(values) {
setPhone(values.phone_email)
localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, 'token')
window.location.href = Pages.dashboard
const params: OtpVerifyType = {
phone: phone,
code: values.code
}
otpVerify.mutate(params, {
onSuccess(data) {
localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, data?.data?.accessToken?.token)
localStorage.setItem(import.meta.env.VITE_REFRESH_TOKEN_NAME, data?.data?.refreshToken?.token)
window.location.href = Pages.dashboard
},
onError(error: ErrorType) {
toast.error(error?.response?.data?.error?.message[0])
},
})
},
})
@@ -59,14 +74,19 @@ const LoginStep2: FC = () => {
<div className='mt-2 w-full flex justify-center dltr otp'>
<OTPInput
shouldAutoFocus
value={otpValue}
value={formik.values.code}
numInputs={5}
inputType='tel'
onChange={(otp: string) => setOtpValue(otp)}
onChange={(otp: string) => formik.setFieldValue('code', otp)}
renderInput={(props) => <input {...props} className='w-full h-[50px] flex-1 mx-2 bg-white border rounded-2.5' />}
/>
</div>
{
formik.touched.code && formik.errors.code &&
<div className='text-xs mt-2 text-red-500'>{formik.errors.code}</div>
}
<div className='flex mt-4 justify-end'>
<div className='flex gap-1 text-description text-xs'>
<div>{value}</div>
@@ -81,14 +101,15 @@ const LoginStep2: FC = () => {
label={t('auth.login')}
className='mt-8'
onClick={() => formik.handleSubmit()}
isLoading={otpVerify.isPending}
/>
<div onClick={() => setStepLogin(3)} className='mt-6 cursor-pointer flex gap-2 items-center text-sm'>
{/* <div onClick={() => setStepLogin(3)} className='mt-6 cursor-pointer flex gap-2 items-center text-sm'>
<p className='text-description'>
{t('auth.login_with_password')}
</p>
<img src={ArrowLeftIcon} className='w-5' />
</div>
</div> */}
</div>
)
}
src/pages/auth/components/LoginStep3.tsx
+20 -7
View File
@@ -1,7 +1,7 @@
import { FC } from 'react'
import Input from '../../../components/Input'
import { useTranslation } from 'react-i18next'
import { LoginPasswordType } from '../types/AuthTypes'
import { LoginWithPasswordType } from '../types/AuthTypes'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { useAuthStore } from '../store/AuthStore'
@@ -10,24 +10,36 @@ import Button from '../../../components/Button'
import { Link } from 'react-router-dom'
import { Pages } from '../../../config/Pages'
import ArrowLeftIcon from '../../../assets/images/arrow-left.svg'
import { useLoginWithPassword } from '../hooks/useAuthData'
import { toast } from 'react-toastify'
import { ErrorType } from '../../../helpers/types'
const LoginStep3: FC = () => {
const { t } = useTranslation('global')
const { setStepLogin } = useAuthStore()
const { setStepLogin, email } = useAuthStore()
const loginWithPassword = useLoginWithPassword()
const formik = useFormik<LoginPasswordType>({
const formik = useFormik<LoginWithPasswordType>({
initialValues: {
password: '',
email: email
},
validationSchema: Yup.object({
phone_email: Yup.string()
password: Yup.string()
.required(t('errors.required'))
}),
onSubmit(values) {
console.log(values)
localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, 'token')
window.location.href = Pages.dashboard
loginWithPassword.mutate(values, {
onSuccess(data) {
localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, data?.data?.accessToken?.token)
localStorage.setItem(import.meta.env.VITE_REFRESH_TOKEN_NAME, data?.data?.refreshToken?.token)
window.location.href = Pages.dashboard
},
onError(error: ErrorType) {
toast.error(error?.response?.data?.error?.message[0])
},
})
},
})
@@ -51,6 +63,7 @@ const LoginStep3: FC = () => {
name='password'
onChange={formik.handleChange}
value={formik.values.password}
error_text={formik.touched.password && formik.errors.password ? formik.errors.password : ''}
/>
{
src/pages/auth/hooks/useAuthData.tsx
+27
View File
@@ -0,0 +1,27 @@
import { useMutation } from '@tanstack/react-query';
import * as api from '../service/AuthService'
import { CheckHasAccountType, LoginWithOtpType, LoginWithPasswordType, OtpVerifyType } from '../types/AuthTypes';
export const useLoginWithPassword = () => {
return useMutation({
mutationFn: (variables: LoginWithPasswordType) => api.loginWithPassword(variables),
});
};
export const useLoginWithOtp = () => {
return useMutation({
mutationFn: (variables: LoginWithOtpType) => api.loginWithOtp(variables),
});
};
export const useOtpVerify = () => {
return useMutation({
mutationFn: (variables: OtpVerifyType) => api.otpVerify(variables),
});
};
export const useCheckHasAccount = () => {
return useMutation({
mutationFn: (variables: CheckHasAccountType) => api.checkHasAccount(variables),
});
};
src/pages/auth/service/AuthService.ts
+26
View File
@@ -0,0 +1,26 @@
import axios from "../../../config/axios";
import {
CheckHasAccountType,
LoginWithOtpType,
LoginWithPasswordType,
OtpVerifyType,
} from "../types/AuthTypes";
export const loginWithPassword = async (params: LoginWithPasswordType) => {
const { data } = await axios.post(`/auth/login/password`, params);
return data;
};
export const loginWithOtp = async (params: LoginWithOtpType) => {
const { data } = await axios.post(`/auth/otp/send`, params);
return data;
};
export const otpVerify = async (params: OtpVerifyType) => {
const { data } = await axios.post(`/auth/otp/verify`, params);
return data;
};
export const checkHasAccount = async (params: CheckHasAccountType) => {
const { data } = await axios.post(`/auth/check`, params);
return data;
};
src/pages/auth/store/AuthStore.ts
+4
View File
@@ -6,6 +6,10 @@ export const useAuthStore = create<AuthStoreType>((set) => ({
setPhone(value) {
set({ phone: value });
},
email: "",
setEmail(value) {
set({ email: value });
},
stepLogin: 1,
setStepLogin(value) {
set({ stepLogin: value });
src/pages/auth/types/AuthTypes.ts
+24
View File
@@ -1,3 +1,5 @@
import { XOR } from "../../../helpers/types";
export type LoginType = {
phone_email: string;
};
@@ -8,6 +10,28 @@ export type LoginPasswordType = {
export type AuthStoreType = {
phone: string;
setPhone: (value: string) => void;
email: string;
setEmail: (value: string) => void;
stepLogin: number;
setStepLogin: (value: number) => void;
};
export type LoginWithPasswordType = XOR<
{ email: string },
{ phone: number }
> & {
password: string;
};
export type LoginWithOtpType = {
phone: string;
};
export type OtpVerifyType = {
phone: string;
code: string;
};
export type CheckHasAccountType = {
email: string;
};