Skip to content

Commit c1cfee7

Browse files
Ohh-889Ohh-889
committed
fix: optimize the verification rules for duplicate calls
1 parent d3e04d6 commit c1cfee7

File tree

6 files changed

+114
-129
lines changed

6 files changed

+114
-129
lines changed

‎src/features/form/SubmitEnterButton.tsx‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎src/features/form/index.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
11
export * from './form';
2-
3-
export { default as SubmitEnterButton } from './SubmitEnterButton';

‎src/pages/(blank)/login/code-login/index.tsx‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { Button, Form, Input, Space } from 'antd';
2-
3-
import { SubmitEnterButton, useFormRules } from '@/features/form';
1+
import { useFormRules } from '@/features/form';
42
import { useRouter } from '@/features/router';
53

4+
type FormValues = {
5+
code: string;
6+
phone: string;
7+
};
8+
69
const CodeLogin = () => {
7-
const [form] = Form.useForm();
10+
const [form] = AForm.useForm<FormValues>();
811

912
const { getCaptcha, isCounting, label, loading } = useCaptcha();
1013

@@ -13,8 +16,8 @@ const CodeLogin = () => {
1316
const { formRules } = useFormRules();
1417

1518
const { navigateUp } = useRouter();
16-
async function handleSubmit() {
17-
const params = await form.validateFields();
19+
20+
function handleSubmit(params: FormValues) {
1821
console.log(params);
1922

2023
// request to reset password
@@ -25,65 +28,66 @@ const CodeLogin = () => {
2528
getCaptcha('17260711111');
2629
}
2730

31+
useKeyPress('enter', () => {
32+
form.submit();
33+
});
34+
2835
return (
2936
<>
3037
<h3 className="text-18px text-primary font-medium">{t('page.login.codeLogin.title')}</h3>
31-
<Form
38+
<AForm
3239
className="pt-24px"
3340
form={form}
3441
onFinish={handleSubmit}
3542
>
36-
<Form.Item
43+
<AForm.Item
3744
name="phone"
3845
rules={formRules.phone}
3946
>
40-
<Input placeholder={t('page.login.common.phonePlaceholder')} />
41-
</Form.Item>
47+
<AInput placeholder={t('page.login.common.phonePlaceholder')} />
48+
</AForm.Item>
4249

43-
<Form.Item
50+
<AForm.Item
4451
name="code"
4552
rules={formRules.code}
4653
>
4754
<div className="w-full flex-y-center gap-16px">
48-
<Input
49-
placeholder={t('page.login.common.codePlaceholder')}
50-
v-model:value="model.code"
51-
/>
52-
<Button
55+
<AInput placeholder={t('page.login.common.codePlaceholder')} />
56+
<AButton
5357
disabled={isCounting}
5458
loading={loading}
5559
size="large"
5660
onClick={sendCaptcha}
5761
>
5862
{label}
59-
</Button>
63+
</AButton>
6064
</div>
61-
</Form.Item>
62-
<Space
65+
</AForm.Item>
66+
<ASpace
6367
className="w-full"
6468
direction="vertical"
6569
size={18}
6670
>
67-
<SubmitEnterButton
71+
<AButton
6872
block
73+
htmlType="submit"
6974
shape="round"
7075
size="large"
7176
type="primary"
72-
onClick={handleSubmit}
7377
>
7478
{t('common.confirm')}
75-
</SubmitEnterButton>
79+
</AButton>
7680

77-
<Button
81+
<AButton
7882
block
7983
shape="round"
8084
size="large"
8185
onClick={navigateUp}
8286
>
8387
{t('page.login.common.back')}
84-
</Button>
85-
</Space>
86-
</Form>
88+
</AButton>
89+
</ASpace>
90+
</AForm>
8791
</>
8892
);
8993
};

‎src/pages/(blank)/login/index.tsx‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { Button, Checkbox, Divider, Input, Space } from 'antd';
2-
31
import { loginModuleRecord } from '@/constants/app';
42
import { useInitAuth } from '@/features/auth/auth';
5-
import { SubmitEnterButton, useFormRules } from '@/features/form';
3+
import { useFormRules } from '@/features/form';
64

75
type AccountKey = 'admin' | 'super' | 'user';
6+
87
interface Account {
98
key: AccountKey;
109
label: string;
@@ -53,8 +52,7 @@ const PwdLogin = () => {
5352
}
5453
];
5554

56-
async function handleSubmit() {
57-
const params = await form.validateFields();
55+
function handleSubmit(params: LoginParams) {
5856
toLogin(params);
5957
}
6058

@@ -74,83 +72,88 @@ const PwdLogin = () => {
7472
navigate('reset-pwd');
7573
}
7674

75+
useKeyPress('enter', () => {
76+
form.submit();
77+
});
78+
7779
return (
7880
<>
7981
<h3 className="text-18px text-primary font-medium">{t('page.login.pwdLogin.title')}</h3>
8082
<AForm
8183
className="pt-24px"
8284
form={form}
8385
initialValues={INITIAL_VALUES}
86+
onFinish={handleSubmit}
8487
>
8588
<AForm.Item
8689
name="userName"
8790
rules={userNameRules}
8891
>
89-
<Input />
92+
<AInput />
9093
</AForm.Item>
9194

9295
<AForm.Item
9396
name="password"
9497
rules={pwd}
9598
>
96-
<Input.Password autoComplete="password" />
99+
<AInput.Password autoComplete="password" />
97100
</AForm.Item>
98-
<Space
101+
<ASpace
99102
className="w-full"
100103
direction="vertical"
101104
size={24}
102105
>
103106
<div className="flex-y-center justify-between">
104-
<Checkbox>{t('page.login.pwdLogin.rememberMe')}</Checkbox>
107+
<ACheckbox>{t('page.login.pwdLogin.rememberMe')}</ACheckbox>
105108

106-
<Button
109+
<AButton
107110
type="text"
108111
onClick={goResetPwd}
109112
>
110113
{t('page.login.pwdLogin.forgetPassword')}
111-
</Button>
114+
</AButton>
112115
</div>
113-
<SubmitEnterButton
116+
<AButton
114117
block
118+
htmlType="submit"
115119
loading={loading}
116120
shape="round"
117121
size="large"
118122
type="primary"
119-
onClick={handleSubmit}
120123
>
121124
{t('common.confirm')}
122-
</SubmitEnterButton>
125+
</AButton>
123126
<div className="flex-y-center justify-between gap-12px">
124-
<Button
127+
<AButton
125128
block
126129
className="flex-1"
127130
onClick={goCodeLogin}
128131
>
129132
{t(loginModuleRecord['code-login'])}
130-
</Button>
131-
<Button
133+
</AButton>
134+
<AButton
132135
block
133136
className="flex-1"
134137
onClick={goRegister}
135138
>
136139
{t(loginModuleRecord.register)}
137-
</Button>
140+
</AButton>
138141
</div>
139-
<Divider className="!m-0 !text-14px !text-#666">{t('page.login.pwdLogin.otherAccountLogin')}</Divider>
142+
<ADivider className="!m-0 !text-14px !text-#666">{t('page.login.pwdLogin.otherAccountLogin')}</ADivider>
140143
<div className="flex-center gap-12px">
141144
{accounts.map(item => {
142145
return (
143-
<Button
146+
<AButton
144147
key={item.key}
145148
type="primary"
146149
onClick={() => handleAccountLogin(item)}
147150
>
148151
{item.label}
149-
</Button>
152+
</AButton>
150153
);
151154
})}
152155
</div>
153-
</Space>
156+
</ASpace>
154157
</AForm>
155158
</>
156159
);

‎src/pages/(blank)/login/register/index.tsx‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { Button, Form, Input, Space } from 'antd';
2-
3-
import { SubmitEnterButton, useFormRules } from '@/features/form';
1+
import { useFormRules } from '@/features/form';
42
import { useRouter } from '@/features/router';
53

64
interface FormModel {
@@ -17,12 +15,11 @@ const Register = () => {
1715

1816
const { navigateUp } = useRouter();
1917

20-
const [form] = Form.useForm<FormModel>();
18+
const [form] = AForm.useForm<FormModel>();
2119

2220
const { createConfirmPwdRule, formRules } = useFormRules();
2321

24-
async function handleSubmit() {
25-
const params = await form.validateFields();
22+
function handleSubmit(params: FormModel) {
2623
console.log(params);
2724

2825
// request to reset password
@@ -33,72 +30,77 @@ const Register = () => {
3330
getCaptcha('17260711111');
3431
}
3532

33+
useKeyPress('enter', () => {
34+
form.submit();
35+
});
36+
3637
return (
3738
<>
3839
<h3 className="text-18px text-primary font-medium">{t('page.login.register.title')}</h3>
39-
<Form
40+
<AForm
4041
className="pt-24px"
4142
form={form}
43+
onFinish={handleSubmit}
4244
>
43-
<Form.Item
45+
<AForm.Item
4446
name="phone"
4547
rules={formRules.phone}
4648
>
47-
<Input placeholder={t('page.login.common.phonePlaceholder')} />
48-
</Form.Item>
49-
<Form.Item
49+
<AInput placeholder={t('page.login.common.phonePlaceholder')} />
50+
</AForm.Item>
51+
<AForm.Item
5052
name="code"
5153
rules={formRules.code}
5254
>
5355
<div className="w-full flex-y-center gap-16px">
54-
<Input placeholder={t('page.login.common.codePlaceholder')} />
55-
<Button
56+
<AInput placeholder={t('page.login.common.codePlaceholder')} />
57+
<AButton
5658
disabled={isCounting}
5759
loading={loading}
5860
size="large"
5961
onClick={sendCaptcha}
6062
>
6163
{label}
62-
</Button>
64+
</AButton>
6365
</div>
64-
</Form.Item>
65-
<Form.Item
66+
</AForm.Item>
67+
<AForm.Item
6668
name="password"
6769
rules={formRules.pwd}
6870
>
69-
<Input placeholder={t('page.login.common.passwordPlaceholder')} />
70-
</Form.Item>
71-
<Form.Item
71+
<AInput placeholder={t('page.login.common.passwordPlaceholder')} />
72+
</AForm.Item>
73+
<AForm.Item
7274
name="confirmPassword"
7375
rules={createConfirmPwdRule(form)}
7476
>
75-
<Input placeholder={t('page.login.common.confirmPasswordPlaceholder')} />
76-
</Form.Item>
77-
<Space
77+
<AInput placeholder={t('page.login.common.confirmPasswordPlaceholder')} />
78+
</AForm.Item>
79+
<ASpace
7880
className="w-full"
7981
direction="vertical"
8082
size={18}
8183
>
82-
<SubmitEnterButton
84+
<AButton
8385
block
86+
htmlType="submit"
8487
shape="round"
8588
size="large"
8689
type="primary"
87-
onClick={handleSubmit}
8890
>
8991
{t('common.confirm')}
90-
</SubmitEnterButton>
92+
</AButton>
9193

92-
<Button
94+
<AButton
9395
block
9496
shape="round"
9597
size="large"
9698
onClick={navigateUp}
9799
>
98100
{t('page.login.common.back')}
99-
</Button>
100-
</Space>
101-
</Form>
101+
</AButton>
102+
</ASpace>
103+
</AForm>
102104
</>
103105
);
104106
};

0 commit comments

Comments
 (0)