fix(verify): click is required for account verifying

GZTimeWalker · Aug 11, 2023 · 1af7dd5 · 1af7dd5
1 parent d6d6f09
commit 1af7dd5
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 59 deletions.
diff --git a/src/GZCTF/ClientApp/src/pages/account/Confirm.tsx b/src/GZCTF/ClientApp/src/pages/account/Confirm.tsx
@@ -1,6 +1,6 @@
-import { FC, useEffect, useRef } from 'react'
+import { FC, useState } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
-import { Text } from '@mantine/core'
+import { Button, Text } from '@mantine/core'
 import { showNotification } from '@mantine/notifications'
 import { mdiCheck, mdiClose } from '@mdi/js'
 import { Icon } from '@mdi/react'
@@ -14,40 +14,72 @@ const Confirm: FC = () => {
   const sp = new URLSearchParams(location.search)
   const token = sp.get('token')
   const email = sp.get('email')
-  const runOnce = useRef(false)
+  const [disabled, setDisabled] = useState(false)
 
   usePageTitle('邮箱验证')
 
-  useEffect(() => {
-    if (token && email && !runOnce.current) {
-      runOnce.current = true
-      api.account
-        .accountMailChangeConfirm({ token, email })
-        .then(() => {
-          showNotification({
-            color: 'teal',
-            title: '邮箱已验证',
-            message: window.atob(email),
-            icon: <Icon path={mdiCheck} size={1} />,
-          })
-        })
-        .catch(() => {
-          showNotification({
-            color: 'red',
-            title: '邮箱验证失败',
-            message: '参数错误，请检查',
-            icon: <Icon path={mdiClose} size={1} />,
-          })
+  const verify = async (event: React.FormEvent) => {
+    event.preventDefault()
+
+    if (!token || !email) {
+      showNotification({
+        color: 'red',
+        title: '邮箱验证失败',
+        message: '参数缺失，请检查',
+        icon: <Icon path={mdiClose} size={1} />,
+      })
+      return
+    }
+
+    setDisabled(true)
+    api.account
+      .accountMailChangeConfirm({ token, email })
+      .then(() => {
+        showNotification({
+          color: 'teal',
+          title: '邮箱已验证',
+          message: window.atob(email),
+          icon: <Icon path={mdiCheck} size={1} />,
         })
-        .finally(() => {
-          navigate('/')
+        navigate('/')
+      })
+      .catch(() => {
+        showNotification({
+          color: 'red',
+          title: '邮箱验证失败',
+          message: '参数错误，请检查',
+          icon: <Icon path={mdiClose} size={1} />,
         })
-    }
-  }, [])
+      })
+      .finally(() => {
+        setDisabled(false)
+      })
+  }
 
   return (
-    <AccountView>
-      <Text>验证邮箱中……</Text>
+    <AccountView onSubmit={verify}>
+      {email && token ? (
+        <>
+          <Text size="md" fw={500}>
+            {window.atob(email)} 你好👋
+          </Text>
+          <Text size="md" fw={500}>
+            请点击下方按钮确认更改邮箱
+          </Text>
+          <Button mt="lg" type="submit" w="50%" disabled={disabled}>
+            确认邮箱
+          </Button>
+        </>
+      ) : (
+        <>
+          <Text size="md" fw={500}>
+            Ouch! 你的链接好像有问题
+          </Text>
+          <Text size="md" fw={500}>
+            请检查链接是否正确后再次访问
+          </Text>
+        </>
+      )}
     </AccountView>
   )
 }

diff --git a/src/GZCTF/ClientApp/src/pages/account/Verify.tsx b/src/GZCTF/ClientApp/src/pages/account/Verify.tsx
@@ -1,6 +1,6 @@
-import { FC, useEffect, useRef } from 'react'
+import { FC, useState } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
-import { Text } from '@mantine/core'
+import { Button, Text } from '@mantine/core'
 import { showNotification } from '@mantine/notifications'
 import { mdiCheck, mdiClose } from '@mdi/js'
 import { Icon } from '@mdi/react'
@@ -9,45 +9,77 @@ import { usePageTitle } from '@Utils/usePageTitle'
 import api from '@Api'
 
 const Verify: FC = () => {
+  const navigate = useNavigate()
   const location = useLocation()
   const sp = new URLSearchParams(location.search)
   const token = sp.get('token')
   const email = sp.get('email')
-  const navigate = useNavigate()
-  const runOnce = useRef(false)
+  const [disabled, setDisabled] = useState(false)
 
   usePageTitle('账户验证')
 
-  useEffect(() => {
-    if (token && email && !runOnce.current) {
-      runOnce.current = true
-      api.account
-        .accountVerify({ token, email })
-        .then(() => {
-          showNotification({
-            color: 'teal',
-            title: '账户已验证，请登录',
-            message: window.atob(email),
-            icon: <Icon path={mdiCheck} size={1} />,
-          })
-        })
-        .catch(() => {
-          showNotification({
-            color: 'red',
-            title: '账户验证失败',
-            message: '参数错误，请检查',
-            icon: <Icon path={mdiClose} size={1} />,
-          })
+  const verify = async (event: React.FormEvent) => {
+    event.preventDefault()
+
+    if (!token || !email) {
+      showNotification({
+        color: 'red',
+        title: '账户验证失败',
+        message: '参数缺失，请检查',
+        icon: <Icon path={mdiClose} size={1} />,
+      })
+      return
+    }
+
+    setDisabled(true)
+    api.account
+      .accountVerify({ token, email })
+      .then(() => {
+        showNotification({
+          color: 'teal',
+          title: '账户已验证，请登录',
+          message: window.atob(email),
+          icon: <Icon path={mdiCheck} size={1} />,
         })
-        .finally(() => {
-          navigate('/account/login')
+        navigate('/account/login')
+      })
+      .catch(() => {
+        showNotification({
+          color: 'red',
+          title: '账户验证失败',
+          message: '参数错误，请检查',
+          icon: <Icon path={mdiClose} size={1} />,
         })
-    }
-  }, [])
+      })
+      .finally(() => {
+        setDisabled(false)
+      })
+  }
 
   return (
-    <AccountView>
-      <Text>验证中……</Text>
+    <AccountView onSubmit={verify}>
+      {email && token ? (
+        <>
+          <Text size="md" fw={500}>
+            {window.atob(email)} 你好👋
+          </Text>
+          <Text size="md" fw={500}>
+            请点击下方按钮验证账户
+          </Text>
+          <Button mt="lg" type="submit" w="50%" disabled={disabled}>
+            验证账户
+          </Button>
+        </>
+      ) : (
+        <>
+          <Text size="md" fw={500}>
+            Ouch! 你的链接好像有问题
+          </Text>
+          <Text size="md" fw={500}>
+            请检查链接是否正确后再次访问
+          </Text>
+        </>
+      )}
     </AccountView>
   )
 }