From ba69b5a5b2c3fdda8ee17941d716a21b10f4cf04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E4=BA=91=E5=AF=8C?= Date: Fri, 12 Apr 2024 14:31:14 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=99=BB=E5=BD=95=E6=8F=90=E7=A4=BAtoa?= =?UTF-8?q?st=E6=94=B9=E4=B8=BAalert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(main)/(empty-layout)/login/page.jsx | 17 ++++++++++++-- app/(main)/(empty-layout)/register/page.jsx | 17 ++++++++++++-- package.json | 2 ++ pnpm-lock.yaml | 22 ++++++++++++++++++ utils/alert.js | 25 +++++++++++++++++++++ 5 files changed, 79 insertions(+), 4 deletions(-) create mode 100644 utils/alert.js diff --git a/app/(main)/(empty-layout)/login/page.jsx b/app/(main)/(empty-layout)/login/page.jsx index 98de4d1..e0a43ef 100644 --- a/app/(main)/(empty-layout)/login/page.jsx +++ b/app/(main)/(empty-layout)/login/page.jsx @@ -8,10 +8,12 @@ import { useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import { toast } from 'react-hot-toast' import { useDispatch } from 'react-redux' +import { useRouter } from 'next/navigation' import { usePostDataMutation } from '@/store/slices/fetchApiSlice' import { DisplayError, Loading } from '@/components' import { userLogin } from '@/store/slices/authSlice' +import alert, { confirmAlert } from '@/utils/alert' const schema = z.object({ email: z @@ -28,6 +30,7 @@ const schema = z.object({ export default function LoginPage() { const dispatch = useDispatch() + const router = useRouter() const [postData, { data, isSuccess, isError, isLoading, error }] = usePostDataMutation() @@ -42,12 +45,22 @@ export default function LoginPage() { useEffect(() => { if (isSuccess) { - toast.success(data.msg) + // toast.success(data.msg) + alert('success', data.msg) dispatch(userLogin(data.data)) reset() + router.push('/') } if (isError) { - toast.error(error?.data.err) + // toast.error(error?.data.err) + confirmAlert({ + title: '您的登录有问题', + text: error?.data?.err, + icon: 'warning', + confirmButtonText: '去注册', + }).then(result => { + if (result.isConfirmed) router.push('/register') + }) } }, [isSuccess, isError]) diff --git a/app/(main)/(empty-layout)/register/page.jsx b/app/(main)/(empty-layout)/register/page.jsx index ffbff69..a57f87f 100644 --- a/app/(main)/(empty-layout)/register/page.jsx +++ b/app/(main)/(empty-layout)/register/page.jsx @@ -8,10 +8,12 @@ import { useEffect } from 'react' import { useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import { useDispatch } from 'react-redux' +import { useRouter } from 'next/navigation' import { usePostDataMutation } from '@/store/slices/fetchApiSlice' import { userLogin } from '@/store/slices/authSlice' import { DisplayError, Loading } from '@/components' +import alert, { confirmAlert } from '@/utils/alert' const schema = z .object({ @@ -43,6 +45,7 @@ const schema = z export default function RegisterPage() { const dispatch = useDispatch() + const router = useRouter() const [postData, { data, isSuccess, isError, isLoading, error }] = usePostDataMutation() @@ -57,12 +60,22 @@ export default function RegisterPage() { useEffect(() => { if (isSuccess) { - toast.success('注册成功') + // toast.success('注册成功') + alert('success', data.msg) dispatch(userLogin(data.data)) reset() + router.push('/') } if (isError) { - toast.error(error?.data?.err) + confirmAlert({ + title: '您的注册有问题', + text: error?.data?.err, + icon: 'warning', + confirmButtonText: '去登录', + }).then(result => { + if (result.isConfirmed) router.push('/login') + }) + // toast.error(error?.data?.err) } }, [isSuccess, isError]) diff --git a/package.json b/package.json index 814ae54..37c2ceb 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,8 @@ "react-hot-toast": "^2.4.1", "react-icons": "^5.0.1", "react-redux": "^9.1.0", + "sweetalert2": "^11.10.7", + "sweetalert2-react-content": "^5.0.7", "zod": "^3.22.4" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 496c9b2..334066f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,6 +44,12 @@ dependencies: react-redux: specifier: ^9.1.0 version: 9.1.0(@types/react@18.2.74)(react@18.2.0)(redux@5.0.1) + sweetalert2: + specifier: ^11.10.7 + version: 11.10.7 + sweetalert2-react-content: + specifier: ^5.0.7 + version: 5.0.7(react-dom@18.2.0)(react@18.2.0)(sweetalert2@11.10.7) zod: specifier: ^3.22.4 version: 3.22.4 @@ -3786,6 +3792,22 @@ packages: engines: {node: '>= 0.4'} dev: true + /sweetalert2-react-content@5.0.7(react-dom@18.2.0)(react@18.2.0)(sweetalert2@11.10.7): + resolution: {integrity: sha512-8Fk82Mpk45lFXpJWKIFF/lq8k/dJKDDQGFcuqVosaL/qRdViyAs5+u37LoTGfnOIvf+rfQB3PAXcp1XLLn+0ew==} + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + sweetalert2: ^11.0.0 + dependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + sweetalert2: 11.10.7 + dev: false + + /sweetalert2@11.10.7: + resolution: {integrity: sha512-5Jlzrmaitay6KzU+2+LhYu9q+L4v/dZ8oZyEDH14ep0C/QilCnFLHmqAyD/Lhq/lm5DiwsOs6Tr58iv8k3wyGg==} + dev: false + /synckit@0.8.8: resolution: {integrity: sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==} engines: {node: ^14.18.0 || >=16.0.0} diff --git a/utils/alert.js b/utils/alert.js new file mode 100644 index 0000000..0c38196 --- /dev/null +++ b/utils/alert.js @@ -0,0 +1,25 @@ +import Swal from 'sweetalert2' +import withReactContent from 'sweetalert2-react-content' + +const MySwal = withReactContent(Swal) + +const alert = (icon, msg) => + MySwal.fire({ + position: 'center', + icon, + title: msg, + showConfirmButton: false, + timer: 2000, + }) + +export const confirmAlert = ({ title, text, icon, confirmButtonText }) => + Swal.fire({ + title, + text, + icon, + showCancelButton: false, + confirmButtonColor: '#3085d6', + confirmButtonText, + }) + +export default alert