index.tsx 6.71 KB
Newer Older
陈帅's avatar
陈帅 committed
1 2
import { Alert, Checkbox, Icon } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
3
import React, { Component } from 'react';
陈帅's avatar
陈帅 committed
4 5

import { CheckboxChangeEvent } from 'antd/es/checkbox';
陈帅's avatar
陈帅 committed
6
import { Dispatch } from 'redux';
陈帅's avatar
陈帅 committed
7
import { FormComponentProps } from 'antd/es/form';
陈帅's avatar
陈帅 committed
8 9 10
import Link from 'umi/link';
import { connect } from 'dva';
import { IStateType } from './model';
陈帅's avatar
陈帅 committed
11 12
import LoginComponents from './components/Login';
import styles from './style.less';
陈帅's avatar
陈帅 committed
13

陈帅's avatar
陈帅 committed
14
const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginComponents;
15

陈帅's avatar
陈帅 committed
16 17
interface PAGE_NAME_UPPER_CAMEL_CASEProps {
  dispatch: Dispatch<any>;
陈帅's avatar
陈帅 committed
18 19 20
  BLOCK_NAME_CAMEL_CASE: IStateType;
  submitting: boolean;
}
陈帅's avatar
陈帅 committed
21
interface PAGE_NAME_UPPER_CAMEL_CASEState {
陈帅's avatar
陈帅 committed
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
  type: string;
  autoLogin: boolean;
}
export interface FromDataType {
  userName: string;
  password: string;
  mobile: string;
  captcha: string;
}

@connect(
  ({
    BLOCK_NAME_CAMEL_CASE,
    loading,
  }: {
    BLOCK_NAME_CAMEL_CASE: IStateType;
    loading: {
      effects: {
        [key: string]: string;
      };
    };
  }) => ({
    BLOCK_NAME_CAMEL_CASE,
    submitting: loading.effects['BLOCK_NAME_CAMEL_CASE/login'],
陈帅's avatar
陈帅 committed
46
  }),
陈帅's avatar
陈帅 committed
47
)
陈帅's avatar
陈帅 committed
48 49 50
class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
  PAGE_NAME_UPPER_CAMEL_CASEProps,
  PAGE_NAME_UPPER_CAMEL_CASEState
陈帅's avatar
陈帅 committed
51
> {
陈帅's avatar
陈帅 committed
52
  state: PAGE_NAME_UPPER_CAMEL_CASEState = {
53
    type: 'account',
ddcat1115's avatar
ddcat1115 committed
54
    autoLogin: true,
jim's avatar
jim committed
55
  };
陈帅's avatar
陈帅 committed
56

陈帅's avatar
陈帅 committed
57
  loginForm: FormComponentProps['form'] | undefined | null;
58

陈帅's avatar
陈帅 committed
59
  onTabChange = (type: string) => {
afc163's avatar
afc163 committed
60
    this.setState({ type });
jim's avatar
jim committed
61
  };
陈帅's avatar
陈帅 committed
62

63 64
  onGetCaptcha = () =>
    new Promise((resolve, reject) => {
陈帅's avatar
陈帅 committed
65 66 67 68
      if (!this.loginForm) {
        return;
      }
      this.loginForm.validateFields(['mobile'], {}, (err: any, values: FromDataType) => {
69 70 71
        if (err) {
          reject(err);
        } else {
陈帅's avatar
陈帅 committed
72
          const { dispatch } = this.props;
陈帅's avatar
陈帅 committed
73
          ((dispatch({
74
            type: 'BLOCK_NAME_CAMEL_CASE/getCaptcha',
陈帅's avatar
陈帅 committed
75
            payload: values.mobile,
陈帅's avatar
陈帅 committed
76
          }) as unknown) as Promise<any>)
77 78 79 80 81
            .then(resolve)
            .catch(reject);
        }
      });
    });
陈帅's avatar
陈帅 committed
82

陈帅's avatar
陈帅 committed
83
  handleSubmit = (err: any, values: FromDataType) => {
ddcat1115's avatar
ddcat1115 committed
84 85
    const { type } = this.state;
    if (!err) {
陈帅's avatar
陈帅 committed
86 87
      const { dispatch } = this.props;
      dispatch({
88
        type: 'BLOCK_NAME_CAMEL_CASE/login',
ddcat1115's avatar
ddcat1115 committed
89 90 91 92 93 94
        payload: {
          ...values,
          type,
        },
      });
    }
jim's avatar
jim committed
95
  };
96

陈帅's avatar
陈帅 committed
97
  changeAutoLogin = (e: CheckboxChangeEvent) => {
ddcat1115's avatar
ddcat1115 committed
98 99 100
    this.setState({
      autoLogin: e.target.checked,
    });
jim's avatar
jim committed
101
  };
102

陈帅's avatar
陈帅 committed
103
  renderMessage = (content: string) => (
104 105
    <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
  );
106 107

  render() {
108 109
    const { BLOCK_NAME_CAMEL_CASE, submitting } = this.props;
    const { status, type: loginType } = BLOCK_NAME_CAMEL_CASE;
陈帅's avatar
陈帅 committed
110
    const { type, autoLogin } = this.state;
111 112
    return (
      <div className={styles.main}>
陈帅's avatar
陈帅 committed
113
        <LoginComponents
114 115 116
          defaultActiveKey={type}
          onTabChange={this.onTabChange}
          onSubmit={this.handleSubmit}
陈帅's avatar
陈帅 committed
117
          ref={(form: any) => {
118 119 120
            this.loginForm = form;
          }}
        >
121 122 123
          <Tab key="account" tab={formatMessage({ id: 'BLOCK_NAME.login.tab-login-credentials' })}>
            {status === 'error' &&
              loginType === 'account' &&
Amumu's avatar
Amumu committed
124
              !submitting &&
xiaohuoni's avatar
xiaohuoni committed
125
              this.renderMessage(
陈帅's avatar
陈帅 committed
126
                formatMessage({ id: 'BLOCK_NAME.login.message-invalid-credentials' }),
xiaohuoni's avatar
xiaohuoni committed
127
              )}
128 129
            <UserName
              name="userName"
130
              placeholder={`${formatMessage({ id: 'BLOCK_NAME.login.userName' })}: admin or user`}
131 132 133
              rules={[
                {
                  required: true,
134
                  message: formatMessage({ id: 'BLOCK_NAME.userName.required' }),
135 136
                },
              ]}
陈帅's avatar
陈帅 committed
137
            />
陈帅's avatar
陈帅 committed
138 139
            <Password
              name="password"
140
              placeholder={`${formatMessage({ id: 'BLOCK_NAME.login.password' })}: ant.design`}
141 142 143
              rules={[
                {
                  required: true,
144
                  message: formatMessage({ id: 'BLOCK_NAME.password.required' }),
145 146
                },
              ]}
陈帅's avatar
陈帅 committed
147 148 149
              onPressEnter={() =>
                this.loginForm && this.loginForm.validateFields(this.handleSubmit)
              }
陈帅's avatar
陈帅 committed
150
            />
ddcat1115's avatar
ddcat1115 committed
151
          </Tab>
152 153 154
          <Tab key="mobile" tab={formatMessage({ id: 'BLOCK_NAME.login.tab-login-mobile' })}>
            {status === 'error' &&
              loginType === 'mobile' &&
Amumu's avatar
Amumu committed
155
              !submitting &&
Rayron Victor's avatar
Rayron Victor committed
156
              this.renderMessage(
陈帅's avatar
陈帅 committed
157
                formatMessage({ id: 'BLOCK_NAME.login.message-invalid-verification-code' }),
Rayron Victor's avatar
Rayron Victor committed
158
              )}
陈帅's avatar
陈帅 committed
159
            <Mobile
160
              name="mobile"
161
              placeholder={formatMessage({ id: 'BLOCK_NAME.phone-number.placeholder' })}
162 163 164
              rules={[
                {
                  required: true,
165
                  message: formatMessage({ id: 'BLOCK_NAME.phone-number.required' }),
166 167 168
                },
                {
                  pattern: /^1\d{10}$/,
169
                  message: formatMessage({ id: 'BLOCK_NAME.phone-number.wrong-format' }),
170 171 172
                },
              ]}
            />
陈帅's avatar
陈帅 committed
173 174
            <Captcha
              name="captcha"
175
              placeholder={formatMessage({ id: 'BLOCK_NAME.verification-code.placeholder' })}
陈帅's avatar
陈帅 committed
176 177
              countDown={120}
              onGetCaptcha={this.onGetCaptcha}
178 179
              getCaptchaButtonText={formatMessage({ id: 'BLOCK_NAME.form.get-captcha' })}
              getCaptchaSecondText={formatMessage({ id: 'BLOCK_NAME.captcha.second' })}
180 181 182
              rules={[
                {
                  required: true,
183
                  message: formatMessage({ id: 'BLOCK_NAME.verification-code.required' }),
184 185
                },
              ]}
陈帅's avatar
陈帅 committed
186
            />
ddcat1115's avatar
ddcat1115 committed
187 188
          </Tab>
          <div>
陈帅's avatar
陈帅 committed
189
            <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
190
              <FormattedMessage id="BLOCK_NAME.login.remember-me" />
jim's avatar
jim committed
191 192
            </Checkbox>
            <a style={{ float: 'right' }} href="">
193
              <FormattedMessage id="BLOCK_NAME.login.forgot-password" />
jim's avatar
jim committed
194
            </a>
ddcat1115's avatar
ddcat1115 committed
195
          </div>
196
          <Submit loading={submitting}>
197
            <FormattedMessage id="BLOCK_NAME.login.login" />
198
          </Submit>
ddcat1115's avatar
ddcat1115 committed
199
          <div className={styles.other}>
200
            <FormattedMessage id="BLOCK_NAME.login.sign-in-with" />
陈帅's avatar
陈帅 committed
201 202 203
            <Icon type="alipay-circle" className={styles.icon} theme="outlined" />
            <Icon type="taobao-circle" className={styles.icon} theme="outlined" />
            <Icon type="weibo-circle" className={styles.icon} theme="outlined" />
陈帅's avatar
陈帅 committed
204
            <Link className={styles.register} to="/user/register">
205
              <FormattedMessage id="BLOCK_NAME.login.signup" />
jim's avatar
jim committed
206
            </Link>
ddcat1115's avatar
ddcat1115 committed
207
          </div>
陈帅's avatar
陈帅 committed
208
        </LoginComponents>
209 210 211 212
      </div>
    );
  }
}
陈帅's avatar
陈帅 committed
213

陈帅's avatar
陈帅 committed
214
export default PAGE_NAME_UPPER_CAMEL_CASE;