97 lines
2.5 KiB
TypeScript
97 lines
2.5 KiB
TypeScript
import SealInput from '@/components/seal-form/seal-input';
|
|
import externalLinks from '@/constants/external-links';
|
|
import { LockOutlined, UserOutlined } from '@ant-design/icons';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Button, Checkbox, Form, FormInstance } from 'antd';
|
|
|
|
interface LocalUserFormProps {
|
|
handleLogin: (values: any) => void;
|
|
form: FormInstance;
|
|
}
|
|
|
|
const LocalUserForm: React.FC<LocalUserFormProps> = (props) => {
|
|
const { handleLogin, form } = props;
|
|
const intl = useIntl();
|
|
|
|
return (
|
|
<Form
|
|
form={form}
|
|
style={{ width: '360px', margin: '0 auto' }}
|
|
onFinish={handleLogin}
|
|
>
|
|
<Form.Item
|
|
name="username"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: intl.formatMessage(
|
|
{ id: 'common.form.rule.input' },
|
|
{
|
|
name: intl.formatMessage({ id: 'common.form.username' })
|
|
}
|
|
)
|
|
}
|
|
]}
|
|
>
|
|
<SealInput.Input
|
|
label={intl.formatMessage({ id: 'common.form.username' })}
|
|
prefix={<UserOutlined />}
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="password"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: intl.formatMessage(
|
|
{ id: 'common.form.rule.input' },
|
|
{
|
|
name: intl.formatMessage({ id: 'common.form.password' })
|
|
}
|
|
)
|
|
}
|
|
]}
|
|
>
|
|
<SealInput.Password
|
|
prefix={<LockOutlined />}
|
|
label={intl.formatMessage({ id: 'common.form.password' })}
|
|
/>
|
|
</Form.Item>
|
|
<div
|
|
className="flex-center flex-between"
|
|
style={{
|
|
marginBottom: 24
|
|
}}
|
|
>
|
|
<Form.Item noStyle name="autoLogin" valuePropName="checked">
|
|
<Checkbox style={{ marginLeft: 5 }}>
|
|
<span style={{ color: 'var(--ant-color-text-secondary)' }}>
|
|
{intl.formatMessage({ id: 'common.login.rember' })}
|
|
</span>
|
|
</Checkbox>
|
|
</Form.Item>
|
|
<Button
|
|
type="link"
|
|
size="small"
|
|
href={externalLinks.resetPassword}
|
|
target="_blank"
|
|
style={{ padding: 0 }}
|
|
>
|
|
{intl.formatMessage({ id: 'common.button.forgotpassword' })}
|
|
</Button>
|
|
</div>
|
|
<Button
|
|
htmlType="submit"
|
|
type="primary"
|
|
block
|
|
style={{ height: '48px', fontSize: '14px' }}
|
|
>
|
|
{intl.formatMessage({ id: 'common.button.login' })}
|
|
</Button>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export default LocalUserForm;
|