feat: 登录提示toast改为alert

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])
 

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])
 

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": {

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