"ListBasicList/src/index.tsx" did not exist on "57d4e8f91943554ad715ec6eecbcf4023721623a"
index.tsx 10.4 KB
Newer Older
陈帅's avatar
陈帅 committed
1 2
import { Button, Col, Form, Input, Popover, Progress, Row, Select, message } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
3
import React, { Component } from 'react';
陈帅's avatar
陈帅 committed
4

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

const FormItem = Form.Item;
afc163's avatar
afc163 committed
14
const { Option } = Select;
15 16 17
const InputGroup = Input.Group;

const passwordStatusMap = {
18 19
  ok: (
    <div className={styles.success}>
20
      <FormattedMessage id="BLOCK_NAME.strength.strong" />
21 22 23 24
    </div>
  ),
  pass: (
    <div className={styles.warning}>
25
      <FormattedMessage id="BLOCK_NAME.strength.medium" />
26 27 28 29
    </div>
  ),
  poor: (
    <div className={styles.error}>
30
      <FormattedMessage id="BLOCK_NAME.strength.short" />
31 32
    </div>
  ),
33 34
};

陈帅's avatar
陈帅 committed
35 36 37 38 39
const passwordProgressMap: {
  ok: 'success';
  pass: 'normal';
  poor: 'exception';
} = {
40 41
  ok: 'success',
  pass: 'normal',
jim's avatar
jim committed
42
  poor: 'exception',
43 44
};

陈帅's avatar
陈帅 committed
45
interface BLOCK_NAME_CAMEL_CASEProps extends FormComponentProps {
陈帅's avatar
陈帅 committed
46
  dispatch: Dispatch<any>;
陈帅's avatar
陈帅 committed
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
  BLOCK_NAME_CAMEL_CASE: IStateType;
  submitting: boolean;
}
interface BLOCK_NAME_CAMEL_CASEState {
  count: number;
  confirmDirty: boolean;
  visible: boolean;
  help: string;
  prefix: string;
}

export interface IUserRegisterParams {
  mail: string;
  password: string;
  confirm: string;
  mobile: string;
  captcha: string;
  prefix: 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/submit'],
陈帅's avatar
陈帅 committed
81
  }),
陈帅's avatar
陈帅 committed
82 83 84 85 86 87
)
class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
  BLOCK_NAME_CAMEL_CASEProps,
  BLOCK_NAME_CAMEL_CASEState
> {
  state: BLOCK_NAME_CAMEL_CASEState = {
88 89 90 91
    count: 0,
    confirmDirty: false,
    visible: false,
    help: '',
ddcat1115's avatar
ddcat1115 committed
92 93
    prefix: '86',
  };
陈帅's avatar
陈帅 committed
94

陈帅's avatar
陈帅 committed
95
  interval: number | undefined;
96

jim's avatar
jim committed
97
  componentDidUpdate() {
陈帅's avatar
陈帅 committed
98 99
    const { BLOCK_NAME_CAMEL_CASE, form } = this.props;
    const account = form.getFieldValue('mail');
100
    if (BLOCK_NAME_CAMEL_CASE.status === 'ok') {
陈帅's avatar
陈帅 committed
101
      message.success('注册成功!');
陈帅's avatar
陈帅 committed
102 103 104 105 106 107
      router.push({
        pathname: '/user/register-result',
        state: {
          account,
        },
      });
108 109
    }
  }
陈帅's avatar
陈帅 committed
110

111 112 113
  componentWillUnmount() {
    clearInterval(this.interval);
  }
陈帅's avatar
陈帅 committed
114

115 116 117
  onGetCaptcha = () => {
    let count = 59;
    this.setState({ count });
陈帅's avatar
陈帅 committed
118
    this.interval = window.setInterval(() => {
119 120 121 122 123 124
      count -= 1;
      this.setState({ count });
      if (count === 0) {
        clearInterval(this.interval);
      }
    }, 1000);
ddcat1115's avatar
ddcat1115 committed
125
  };
126 127

  getPasswordStatus = () => {
afc163's avatar
afc163 committed
128
    const { form } = this.props;
129 130 131 132 133 134 135
    const value = form.getFieldValue('password');
    if (value && value.length > 9) {
      return 'ok';
    }
    if (value && value.length > 5) {
      return 'pass';
    }
jim's avatar
jim committed
136
    return 'poor';
ddcat1115's avatar
ddcat1115 committed
137
  };
138

陈帅's avatar
陈帅 committed
139
  handleSubmit = (e: React.FormEvent) => {
140
    e.preventDefault();
陈帅's avatar
陈帅 committed
141 142
    const { form, dispatch } = this.props;
    form.validateFields({ force: true }, (err, values) => {
ddcat1115's avatar
ddcat1115 committed
143
      if (!err) {
陈帅's avatar
陈帅 committed
144 145
        const { prefix } = this.state;
        dispatch({
146
          type: 'BLOCK_NAME_CAMEL_CASE/submit',
ddcat1115's avatar
ddcat1115 committed
147 148
          payload: {
            ...values,
陈帅's avatar
陈帅 committed
149
            prefix,
ddcat1115's avatar
ddcat1115 committed
150 151
          },
        });
152
      }
ddcat1115's avatar
ddcat1115 committed
153 154
    });
  };
155

陈帅's avatar
陈帅 committed
156
  checkConfirm = (rule: any, value: string, callback: (messgae?: string) => void) => {
afc163's avatar
afc163 committed
157
    const { form } = this.props;
158
    if (value && value !== form.getFieldValue('password')) {
159
      callback(formatMessage({ id: 'BLOCK_NAME.password.twice' }));
160 161 162
    } else {
      callback();
    }
ddcat1115's avatar
ddcat1115 committed
163
  };
164

陈帅's avatar
陈帅 committed
165
  checkPassword = (rule: any, value: string, callback: (messgae?: string) => void) => {
陈帅's avatar
陈帅 committed
166
    const { visible, confirmDirty } = this.state;
167 168
    if (!value) {
      this.setState({
169
        help: formatMessage({ id: 'BLOCK_NAME.password.required' }),
170 171 172 173 174 175 176
        visible: !!value,
      });
      callback('error');
    } else {
      this.setState({
        help: '',
      });
陈帅's avatar
陈帅 committed
177
      if (!visible) {
178 179 180 181 182 183 184
        this.setState({
          visible: !!value,
        });
      }
      if (value.length < 6) {
        callback('error');
      } else {
afc163's avatar
afc163 committed
185
        const { form } = this.props;
陈帅's avatar
陈帅 committed
186
        if (value && confirmDirty) {
187 188 189 190 191
          form.validateFields(['confirm'], { force: true });
        }
        callback();
      }
    }
ddcat1115's avatar
ddcat1115 committed
192 193
  };

陈帅's avatar
陈帅 committed
194
  changePrefix = (value: string) => {
ddcat1115's avatar
ddcat1115 committed
195 196 197 198
    this.setState({
      prefix: value,
    });
  };
199 200

  renderPasswordProgress = () => {
afc163's avatar
afc163 committed
201
    const { form } = this.props;
202 203
    const value = form.getFieldValue('password');
    const passwordStatus = this.getPasswordStatus();
ddcat1115's avatar
ddcat1115 committed
204
    return value && value.length ? (
205 206
      <div className={styles[`progress-${passwordStatus}`]}>
        <Progress
陈帅's avatar
陈帅 committed
207
          default={passwordProgressMap[passwordStatus]}
208 209 210 211 212 213
          status={passwordProgressMap[passwordStatus]}
          className={styles.progress}
          strokeWidth={6}
          percent={value.length * 10 > 100 ? 100 : value.length * 10}
          showInfo={false}
        />
ddcat1115's avatar
ddcat1115 committed
214 215 216
      </div>
    ) : null;
  };
217 218

  render() {
Andreas Cederström's avatar
Andreas Cederström committed
219
    const { form, submitting } = this.props;
220
    const { getFieldDecorator } = form;
陈帅's avatar
陈帅 committed
221
    const { count, prefix, help, visible } = this.state;
222 223
    return (
      <div className={styles.main}>
224
        <h3>
225
          <FormattedMessage id="BLOCK_NAME.register.register" />
226
        </h3>
227 228 229
        <Form onSubmit={this.handleSubmit}>
          <FormItem>
            {getFieldDecorator('mail', {
ddcat1115's avatar
ddcat1115 committed
230 231 232
              rules: [
                {
                  required: true,
233
                  message: formatMessage({ id: 'BLOCK_NAME.email.required' }),
ddcat1115's avatar
ddcat1115 committed
234 235 236
                },
                {
                  type: 'email',
237
                  message: formatMessage({ id: 'BLOCK_NAME.email.wrong-format' }),
ddcat1115's avatar
ddcat1115 committed
238 239
                },
              ],
240
            })(
xiaohuoni's avatar
xiaohuoni committed
241 242 243
              <Input
                size="large"
                placeholder={formatMessage({ id: 'BLOCK_NAME.email.placeholder' })}
陈帅's avatar
陈帅 committed
244
              />,
245
            )}
246
          </FormItem>
陈帅's avatar
陈帅 committed
247
          <FormItem help={help}>
248
            <Popover
陈帅's avatar
陈帅 committed
249
              getPopupContainer={node =>
陈帅's avatar
陈帅 committed
250
                node && node.parentNode ? (node.parentNode as HTMLElement) : node
陈帅's avatar
陈帅 committed
251
              }
252
              content={
ddcat1115's avatar
ddcat1115 committed
253
                <div style={{ padding: '4px 0' }}>
254 255
                  {passwordStatusMap[this.getPasswordStatus()]}
                  {this.renderPasswordProgress()}
ddcat1115's avatar
ddcat1115 committed
256
                  <div style={{ marginTop: 10 }}>
257
                    <FormattedMessage id="BLOCK_NAME.strength.msg" />
ddcat1115's avatar
ddcat1115 committed
258
                  </div>
259 260 261 262
                </div>
              }
              overlayStyle={{ width: 240 }}
              placement="right"
陈帅's avatar
陈帅 committed
263
              visible={visible}
264 265
            >
              {getFieldDecorator('password', {
ddcat1115's avatar
ddcat1115 committed
266 267 268 269 270
                rules: [
                  {
                    validator: this.checkPassword,
                  },
                ],
271 272 273 274
              })(
                <Input
                  size="large"
                  type="password"
275
                  placeholder={formatMessage({ id: 'BLOCK_NAME.password.placeholder' })}
陈帅's avatar
陈帅 committed
276
                />,
277
              )}
278 279 280 281
            </Popover>
          </FormItem>
          <FormItem>
            {getFieldDecorator('confirm', {
ddcat1115's avatar
ddcat1115 committed
282 283 284
              rules: [
                {
                  required: true,
285
                  message: formatMessage({ id: 'BLOCK_NAME.confirm-password.required' }),
ddcat1115's avatar
ddcat1115 committed
286 287 288 289 290
                },
                {
                  validator: this.checkConfirm,
                },
              ],
291 292 293 294
            })(
              <Input
                size="large"
                type="password"
295
                placeholder={formatMessage({ id: 'BLOCK_NAME.confirm-password.placeholder' })}
陈帅's avatar
陈帅 committed
296
              />,
297
            )}
298 299
          </FormItem>
          <FormItem>
ddcat1115's avatar
ddcat1115 committed
300 301 302 303 304 305 306 307 308 309 310 311 312 313
            <InputGroup compact>
              <Select
                size="large"
                value={prefix}
                onChange={this.changePrefix}
                style={{ width: '20%' }}
              >
                <Option value="86">+86</Option>
                <Option value="87">+87</Option>
              </Select>
              {getFieldDecorator('mobile', {
                rules: [
                  {
                    required: true,
314
                    message: formatMessage({ id: 'BLOCK_NAME.phone-number.required' }),
ddcat1115's avatar
ddcat1115 committed
315 316
                  },
                  {
317
                    pattern: /^\d{11}$/,
318
                    message: formatMessage({ id: 'BLOCK_NAME.phone-number.wrong-format' }),
ddcat1115's avatar
ddcat1115 committed
319 320
                  },
                ],
321 322 323 324
              })(
                <Input
                  size="large"
                  style={{ width: '80%' }}
325
                  placeholder={formatMessage({ id: 'BLOCK_NAME.phone-number.placeholder' })}
陈帅's avatar
陈帅 committed
326
                />,
327
              )}
328 329 330 331 332 333
            </InputGroup>
          </FormItem>
          <FormItem>
            <Row gutter={8}>
              <Col span={16}>
                {getFieldDecorator('captcha', {
ddcat1115's avatar
ddcat1115 committed
334 335 336
                  rules: [
                    {
                      required: true,
337
                      message: formatMessage({ id: 'BLOCK_NAME.verification-code.required' }),
ddcat1115's avatar
ddcat1115 committed
338 339
                    },
                  ],
340 341 342
                })(
                  <Input
                    size="large"
343
                    placeholder={formatMessage({ id: 'BLOCK_NAME.verification-code.placeholder' })}
陈帅's avatar
陈帅 committed
344
                  />,
345
                )}
346 347 348
              </Col>
              <Col span={8}>
                <Button
ddcat1115's avatar
ddcat1115 committed
349
                  size="large"
陈帅's avatar
陈帅 committed
350
                  disabled={!!count}
351 352 353
                  className={styles.getCaptcha}
                  onClick={this.onGetCaptcha}
                >
354 355
                  {count
                    ? `${count} s`
356
                    : formatMessage({ id: 'BLOCK_NAME.register.get-verification-code' })}
357 358 359 360 361
                </Button>
              </Col>
            </Row>
          </FormItem>
          <FormItem>
ddcat1115's avatar
ddcat1115 committed
362 363
            <Button
              size="large"
Andreas Cederström's avatar
Andreas Cederström committed
364
              loading={submitting}
ddcat1115's avatar
ddcat1115 committed
365 366 367 368
              className={styles.submit}
              type="primary"
              htmlType="submit"
            >
369
              <FormattedMessage id="BLOCK_NAME.register.register" />
370
            </Button>
lijiehua's avatar
lijiehua committed
371
            <Link className={styles.login} to="/user/login">
372
              <FormattedMessage id="BLOCK_NAME.register.sign-in" />
ddcat1115's avatar
ddcat1115 committed
373
            </Link>
374 375 376 377 378 379
          </FormItem>
        </Form>
      </div>
    );
  }
}
lijiehua's avatar
lijiehua committed
380

陈帅's avatar
陈帅 committed
381
export default Form.create<BLOCK_NAME_CAMEL_CASEProps>()(PAGE_NAME_UPPER_CAMEL_CASE);