|
@@ -9,7 +9,7 @@ import { useLoading } from 'hook'
|
|
|
|
|
|
import type { LoginParams } from 'api'
|
|
|
import type { FormItemProps } from 'antd'
|
|
|
-import type { ReactElement } from 'react'
|
|
|
+import type { ComponentType } from 'react'
|
|
|
|
|
|
type LoginInfo = LoginParams & { markpsw: boolean }
|
|
|
|
|
@@ -18,38 +18,78 @@ const setCache = (data: LoginInfo) => localStorage.setItem(KEY, JSON.stringify(d
|
|
|
const getCache = (): LoginInfo | undefined => localStorage.getItem(KEY) && JSON.parse(localStorage.getItem(KEY)!)
|
|
|
const delCache = () => localStorage.removeItem(KEY)
|
|
|
|
|
|
-const getLoginInputs = (): (FormItemProps & { node: ReactElement })[] => ([
|
|
|
- {
|
|
|
- name: 'phoneNum',
|
|
|
- initialValue: getCache()?.phoneNum,
|
|
|
- rules: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3|4|5|7|8][0-9]\d{8}$/ }],
|
|
|
- node: <Input placeholder='请输入账号' size="large" prefix={<UserOutlined />} />
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'password',
|
|
|
- initialValue: getCache()?.password,
|
|
|
- rules: [{ required: true, message: '请输入正确的密码', pattern: /^[^\u4e00-\u9fa5]{1,16}$/, min: 1, max: 16 }],
|
|
|
- node: <Input.Password placeholder='请输入密码' size="large" prefix={<LockOutlined />} />
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'markpsw',
|
|
|
- initialValue: getCache()?.markpsw,
|
|
|
- valuePropName: 'checked',
|
|
|
- node: <Checkbox>记住密码</Checkbox>
|
|
|
- },
|
|
|
- {
|
|
|
- node: <Button type='primary' htmlType='submit' size="large" children="登录" block />
|
|
|
- }
|
|
|
-])
|
|
|
+interface PriceInputProps<T> {
|
|
|
+ value?: T;
|
|
|
+ onChange?: (value: T) => void;
|
|
|
+}
|
|
|
+
|
|
|
+const getLoginInputs = (loginFrom: LoginInfo): (FormItemProps & { node: ComponentType<PriceInputProps<any>> })[] => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ name: 'phoneNum',
|
|
|
+ rules: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3|4|5|7|8][0-9]\d{8}$/ }],
|
|
|
+ initialValue: loginFrom.phoneNum,
|
|
|
+ node: (props: PriceInputProps<LoginInfo['phoneNum']>) => (<Input
|
|
|
+ placeholder='请输入账号'
|
|
|
+ size="large"
|
|
|
+ prefix={<UserOutlined />}
|
|
|
+ value={props.value}
|
|
|
+ onChange={ev => {
|
|
|
+ const phoneNum = ev.target.value
|
|
|
+ if (phoneNum.length <= 11) {
|
|
|
+ props.onChange && props.onChange(phoneNum)
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'password',
|
|
|
+ rules: [{ required: true, message: '请输入正确的密码', pattern: /^[^\u4e00-\u9fa5]{1,16}$/, min: 1, max: 16 }],
|
|
|
+ node: (props) => <Input.Password
|
|
|
+ placeholder='请输入密码'
|
|
|
+ size="large"
|
|
|
+ prefix={<LockOutlined />}
|
|
|
+ value={props.value}
|
|
|
+ onChange={ev => {
|
|
|
+ const password = ev.target.value
|
|
|
+ if (password.length <= 16) {
|
|
|
+ props.onChange && props.onChange(password)
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'markpsw',
|
|
|
+ initialValue: getCache()?.markpsw,
|
|
|
+ valuePropName: 'checked',
|
|
|
+ node: (props: any) => <Checkbox
|
|
|
+ checked={props.checked}
|
|
|
+ onChange={ev => {
|
|
|
+ props.onChange && props.onChange(ev.target.checked)
|
|
|
+ }}
|
|
|
+ children="记住密码"
|
|
|
+ />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ node: () => <Button type='primary' htmlType='submit' size="large" children="登录" block />
|
|
|
+ }
|
|
|
+ ]
|
|
|
+}
|
|
|
|
|
|
export const Login = () => {
|
|
|
const dispatch = useDispatch()
|
|
|
const navigate = useNavigate()
|
|
|
const [loading, setPromise] = useLoading()
|
|
|
+ const cacheLogin = getCache() || {
|
|
|
+ phoneNum: '',
|
|
|
+ password: '',
|
|
|
+ markpsw: false
|
|
|
+}
|
|
|
|
|
|
- const renderOptions = getLoginInputs().map(({node, ...props}, i) => (
|
|
|
- <Form.Item {...props} key={i} children={node} />
|
|
|
- ))
|
|
|
+ const renderOptions = getLoginInputs(cacheLogin)
|
|
|
+ .map(({node: Node, ...props}, i) => (
|
|
|
+ <Form.Item {...props} key={i} children={<Node />} />
|
|
|
+ ))
|
|
|
const loginHandler = async (data: LoginInfo) => {
|
|
|
await setPromise(dispatch(postLogin(data)).unwrap())
|
|
|
navigate(RoutePath.home, { replace: true })
|