100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
import { Button, Form, Input, Tabs } from 'antd';
|
|
import type { LoginPageLogic, LoginTab } from '../LoginPageLogic';
|
|
|
|
export default function LoginFormCard({ logic }: { logic: LoginPageLogic }) {
|
|
const { tab, setTab, loading, onLogin, onRegister } = logic;
|
|
const [loginForm] = Form.useForm();
|
|
const [registerForm] = Form.useForm();
|
|
|
|
const handleRegister = async (values: any) => {
|
|
const result = await onRegister(values);
|
|
if (result) {
|
|
loginForm.setFieldsValue({
|
|
phone: result.phone,
|
|
password: result.password,
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="login-card">
|
|
<div className="login-card-header">
|
|
<h2 className="login-card-title">欢迎回来</h2>
|
|
<div className="login-card-subtitle">使用手机号登录或注册以继续</div>
|
|
</div>
|
|
|
|
<Tabs
|
|
activeKey={tab}
|
|
onChange={(key) => setTab(key as LoginTab)}
|
|
items={[
|
|
{
|
|
key: 'login',
|
|
label: '登录',
|
|
children: (
|
|
<Form
|
|
form={loginForm}
|
|
layout="vertical"
|
|
onFinish={onLogin}
|
|
className="login-form"
|
|
>
|
|
<Form.Item
|
|
name="phone"
|
|
label="手机号"
|
|
rules={[
|
|
{ required: true, message: '请填写手机号' },
|
|
]}
|
|
>
|
|
<Input placeholder="13800138000" size="large" autoFocus />
|
|
</Form.Item>
|
|
<Form.Item name="password" label="密码" rules={[{ required: true }]}>
|
|
<Input.Password placeholder="••••••" size="large" />
|
|
</Form.Item>
|
|
<Button type="primary" htmlType="submit" loading={loading} block size="large" className="login-submit-btn">
|
|
登录
|
|
</Button>
|
|
</Form>
|
|
)
|
|
},
|
|
{
|
|
key: 'register',
|
|
label: '注册',
|
|
children: (
|
|
<Form
|
|
form={registerForm}
|
|
layout="vertical"
|
|
onFinish={handleRegister}
|
|
className="login-form"
|
|
>
|
|
<Form.Item
|
|
name="phone"
|
|
label="手机号"
|
|
rules={[
|
|
{ required: true, message: '请填写手机号' },
|
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式' }
|
|
]}
|
|
>
|
|
<Input placeholder="13800138000" size="large" />
|
|
</Form.Item>
|
|
<Form.Item name="name" label="昵称" rules={[{ required: true }]}>
|
|
<Input placeholder="张三" size="large" />
|
|
</Form.Item>
|
|
<Form.Item name="password" label="密码" rules={[{ required: true, min: 6, message: '至少 6 位' }]}>
|
|
<Input.Password placeholder="••••••" size="large" />
|
|
</Form.Item>
|
|
<Form.Item name="inviteCode" label="邀请码（可选）">
|
|
<Input placeholder="如果你是被邀请的用户" size="large" />
|
|
</Form.Item>
|
|
<Button type="primary" htmlType="submit" loading={loading} block size="large" className="login-submit-btn">
|
|
创建账户
|
|
</Button>
|
|
</Form>
|
|
)
|
|
}
|
|
]}
|
|
/>
|
|
|
|
<div className="login-footer">登录即表示你已同意我们的服务条款与隐私政策</div>
|
|
</div>
|
|
);
|
|
}
|