fix: account page: link style and enter

GZTimeWalker · Jul 22, 2022 · 9799a4b · 9799a4b
1 parent 781921d
commit 9799a4b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 31 deletions.
diff --git a/GZCTF/ClientApp/src/pages/account/Recovery.tsx b/GZCTF/ClientApp/src/pages/account/Recovery.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { Link } from 'react-router-dom'
 import { TextInput, Button, Anchor } from '@mantine/core'
-import { useInputState, useWindowEvent } from '@mantine/hooks'
+import { getHotkeyHandler, useInputState } from '@mantine/hooks'
 import { showNotification } from '@mantine/notifications'
 import { mdiCheck, mdiClose } from '@mdi/js'
 import { Icon } from '@mdi/react'
@@ -35,12 +35,6 @@ const Recovery: FC = () => {
       })
   }
 
-  useWindowEvent('keydown', (e) => {
-    if (e.code == 'Enter' || e.code == 'NumpadEnter') {
-      onRecovery()
-    }
-  })
-
   return (
     <AccountView>
       <TextInput
@@ -51,6 +45,7 @@ const Recovery: FC = () => {
         style={{ width: '100%' }}
         value={email}
         onChange={(event) => setEmail(event.currentTarget.value)}
+        onKeyDown={getHotkeyHandler([['Enter', onRecovery]])}
       />
       <Anchor
         sx={(theme) => ({

diff --git a/GZCTF/ClientApp/src/pages/account/Register.tsx b/GZCTF/ClientApp/src/pages/account/Register.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { Button, Anchor, TextInput, PasswordInput } from '@mantine/core'
-import { useInputState, useWindowEvent } from '@mantine/hooks'
+import { getHotkeyHandler, useInputState } from '@mantine/hooks'
 import { showNotification, updateNotification } from '@mantine/notifications'
 import { mdiCheck, mdiClose } from '@mdi/js'
 import { Icon } from '@mdi/react'
@@ -86,11 +86,7 @@ const Register: FC = () => {
       })
   }
 
-  useWindowEvent('keydown', (e) => {
-    if (e.code == 'Enter' || e.code == 'NumpadEnter') {
-      onRegister()
-    }
-  })
+  const enterHandler = getHotkeyHandler([['Enter', onRegister]])
 
   return (
     <AccountView>
@@ -103,6 +99,7 @@ const Register: FC = () => {
         value={email}
         disabled={disabled}
         onChange={(event) => setEmail(event.currentTarget.value)}
+        onKeyDown={enterHandler}
       />
       <TextInput
         required
@@ -113,11 +110,13 @@ const Register: FC = () => {
         value={uname}
         disabled={disabled}
         onChange={(event) => setUname(event.currentTarget.value)}
+        onKeyDown={enterHandler}
       />
       <StrengthPasswordInput
         value={pwd}
         onChange={(event) => setPwd(event.currentTarget.value)}
         disabled={disabled}
+        onKeyDown={enterHandler}
       />
       <PasswordInput
         required
@@ -127,19 +126,18 @@ const Register: FC = () => {
         label="重复密码"
         style={{ width: '100%' }}
         error={pwd !== retypedPwd}
+        onKeyDown={enterHandler}
       />
-      <Link to="/account/login">
-        <Anchor<'a'>
-          sx={(theme) => ({
-            color: theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 7],
-            fontWeight: 500,
-            fontSize: theme.fontSizes.xs,
-            alignSelf: 'end',
-          })}
-        >
-          已经拥有账户？
-        </Anchor>
-      </Link>
+      <Anchor
+        sx={(theme) => ({
+          fontSize: theme.fontSizes.xs,
+          alignSelf: 'end',
+        })}
+        component={Link}
+        to="/account/login"
+      >
+        已经拥有账户？
+      </Anchor>
       <Button fullWidth onClick={onRegister} disabled={disabled}>
         注册
       </Button>

diff --git a/GZCTF/ClientApp/src/pages/account/Reset.tsx b/GZCTF/ClientApp/src/pages/account/Reset.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { Button, PasswordInput } from '@mantine/core'
-import { useInputState, useWindowEvent } from '@mantine/hooks'
+import { getHotkeyHandler, useInputState } from '@mantine/hooks'
 import { showNotification } from '@mantine/notifications'
 import { mdiCheck, mdiClose } from '@mdi/js'
 import { Icon } from '@mdi/react'
@@ -68,11 +68,7 @@ const Reset: FC = () => {
       })
   }
 
-  useWindowEvent('keydown', (e) => {
-    if (e.code == 'Enter' || e.code == 'NumpadEnter') {
-      onReset()
-    }
-  })
+  const enterHandler = getHotkeyHandler([['Enter', onReset]])
 
   return (
     <AccountView>
@@ -81,6 +77,7 @@ const Reset: FC = () => {
         onChange={(event) => setPwd(event.currentTarget.value)}
         label="新密码"
         disabled={disabled}
+        onKeyDown={enterHandler}
       />
       <PasswordInput
         required
@@ -90,6 +87,7 @@ const Reset: FC = () => {
         style={{ width: '100%' }}
         disabled={disabled}
         error={pwd !== retypedPwd}
+        onKeyDown={enterHandler}
       />
       <Button fullWidth onClick={onReset} disabled={disabled}>
         重置密码