|
@@ -1,205 +0,0 @@
|
|
|
-import { LockOutlined, UserOutlined } from '@ant-design/icons'
|
|
|
-import { Alert, message, notification } from 'antd'
|
|
|
-import React, { useState, useTransition } from 'react'
|
|
|
-import ProForm, { ProFormCheckbox, ProFormText } from '@ant-design/pro-form'
|
|
|
-import {
|
|
|
- useIntl,
|
|
|
- history,
|
|
|
- FormattedMessage,
|
|
|
- SelectLang,
|
|
|
- useModel,
|
|
|
- useRequest,
|
|
|
- createSearchParams
|
|
|
-} from '@umijs/max'
|
|
|
-import { login } from '@/services/api/login'
|
|
|
-import { queryCurrentUser } from '@/services/api/login'
|
|
|
-import consts from '@/utils/consts'
|
|
|
-import styles from './index.less'
|
|
|
-
|
|
|
-const LoginMessage: React.FC<{
|
|
|
- content: string
|
|
|
-}> = ({ content }) => (
|
|
|
- <Alert
|
|
|
- style={{
|
|
|
- marginBottom: 24
|
|
|
- }}
|
|
|
- message={content}
|
|
|
- type="error"
|
|
|
- showIcon
|
|
|
- />
|
|
|
-)
|
|
|
-
|
|
|
-const Login: React.FC = () => {
|
|
|
- const [userLoginState, setUserLoginState] = useState<API.LoginResult>({})
|
|
|
- const [type] = useState<string>('account')
|
|
|
- const [, startTransition] = useTransition()
|
|
|
- const { initialState, setInitialState } = useModel('@@initialState')
|
|
|
- const intl = useIntl()
|
|
|
-
|
|
|
- /** 此方法会跳转到 redirect 参数所在的位置 */
|
|
|
- const goto = userInfo => {
|
|
|
- // console.log(userInfo)
|
|
|
-
|
|
|
- if (!history || !userInfo) return
|
|
|
- const searchParams = createSearchParams(window.location.search)
|
|
|
- const redirect = searchParams.get('redirect')
|
|
|
- history.replace(redirect || '/')
|
|
|
- }
|
|
|
-
|
|
|
- const { run: tryGetUserInfo, loading } = useRequest(queryCurrentUser, {
|
|
|
- manual: true,
|
|
|
- onSuccess: async result => {
|
|
|
- setInitialState({
|
|
|
- ...initialState,
|
|
|
- currentUser: result.currentUser
|
|
|
- })
|
|
|
- startTransition(() => {
|
|
|
- goto(result.currentUser)
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- const { run: tryLogin } = useRequest((values: API.LoginParams) => login(values), {
|
|
|
- manual: true,
|
|
|
- onSuccess: async result => {
|
|
|
- window.localStorage.setItem('TOKEN_ID', result)
|
|
|
- message.success('登录成功')
|
|
|
- await tryGetUserInfo()
|
|
|
- },
|
|
|
- onError: () => {
|
|
|
- setUserLoginState({ ...userLoginState, code: -1 })
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- const handleSubmit = async (values: API.LoginParams) => {
|
|
|
- try {
|
|
|
- await tryLogin(values)
|
|
|
- } catch (error) {
|
|
|
- message.error('登录失败,请重试')
|
|
|
- }
|
|
|
- }
|
|
|
- const { code } = userLoginState
|
|
|
-
|
|
|
- return (
|
|
|
- <div className={styles.container}>
|
|
|
- <div className={[styles.smallBox, 'border rounded-xl'].join(' ')}>
|
|
|
- <div className={styles.lang} data-lang>
|
|
|
- {SelectLang && <SelectLang />}
|
|
|
- </div>
|
|
|
- <div className={styles.content}>
|
|
|
- <div className={styles.top}>
|
|
|
- <div className={styles.header}>
|
|
|
- <div className="flex justify-center">
|
|
|
- <img alt="logo" className={styles.logo} src="/logo.png" />
|
|
|
- <span className={styles.title}>珠海市政府投资项目经济技术指标库</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className={styles.desc}>{intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}</div>
|
|
|
- </div>
|
|
|
- <div className={styles.main}>
|
|
|
- <ProForm
|
|
|
- initialValues={{
|
|
|
- autoLogin: true
|
|
|
- }}
|
|
|
- isKeyPressSubmit
|
|
|
- submitter={{
|
|
|
- searchConfig: {
|
|
|
- submitText: intl.formatMessage({
|
|
|
- id: 'pages.login.submit',
|
|
|
- defaultMessage: '登录'
|
|
|
- })
|
|
|
- },
|
|
|
- render: (_, dom) => dom.pop(),
|
|
|
- submitButtonProps: {
|
|
|
- loading,
|
|
|
- size: 'large',
|
|
|
- style: {
|
|
|
- width: '100%'
|
|
|
- }
|
|
|
- }
|
|
|
- }}
|
|
|
- onFinish={values => handleSubmit(values as API.LoginParams)}>
|
|
|
- {/* <Tabs activeKey={type} onChange={setType}>
|
|
|
- <Tabs.TabPane
|
|
|
- key="account"
|
|
|
- tab={intl.formatMessage({
|
|
|
- id: 'pages.login.accountLogin.tab',
|
|
|
- defaultMessage: '账户密码登录'
|
|
|
- })}
|
|
|
- />
|
|
|
- </Tabs> */}
|
|
|
-
|
|
|
- {code === consts.RET_CODE.ERROR && <LoginMessage content={'账户或密码错误'} />}
|
|
|
- {type === 'account' && (
|
|
|
- <>
|
|
|
- <ProFormText
|
|
|
- name="account"
|
|
|
- fieldProps={{
|
|
|
- size: 'large',
|
|
|
- prefix: <UserOutlined className={styles.prefixIcon} />
|
|
|
- }}
|
|
|
- placeholder={intl.formatMessage({
|
|
|
- id: 'pages.login.username.placeholder',
|
|
|
- defaultMessage: '请输入用户名'
|
|
|
- })}
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.username.required"
|
|
|
- defaultMessage="请输入用户名!"
|
|
|
- />
|
|
|
- )
|
|
|
- }
|
|
|
- ]}
|
|
|
- />
|
|
|
- <ProFormText.Password
|
|
|
- name="password"
|
|
|
- fieldProps={{
|
|
|
- size: 'large',
|
|
|
- prefix: <LockOutlined className={styles.prefixIcon} />
|
|
|
- }}
|
|
|
- placeholder={intl.formatMessage({
|
|
|
- id: 'pages.login.password.placeholder',
|
|
|
- defaultMessage: '请输入密码!'
|
|
|
- })}
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: (
|
|
|
- <FormattedMessage
|
|
|
- id="pages.login.password.required"
|
|
|
- defaultMessage="请输入密码!"
|
|
|
- />
|
|
|
- )
|
|
|
- }
|
|
|
- ]}
|
|
|
- />
|
|
|
- </>
|
|
|
- )}
|
|
|
-
|
|
|
- {/* {status === 'error' && loginType === 'mobile' && <LoginMessage content="验证码错误" />} */}
|
|
|
- <div
|
|
|
- style={{
|
|
|
- marginBottom: 24
|
|
|
- }}>
|
|
|
- <ProFormCheckbox noStyle name="autoLogin">
|
|
|
- <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
|
|
|
- </ProFormCheckbox>
|
|
|
- <a
|
|
|
- style={{
|
|
|
- float: 'right'
|
|
|
- }}>
|
|
|
- <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </ProForm>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
-}
|
|
|
-
|
|
|
-export default Login
|