@ant-design/icons#MailTwoTone JavaScript Examples

The following examples show how to use @ant-design/icons#MailTwoTone. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.jsx    From the-eye-knows-the-garbage with MIT License 4 votes vote down vote up
Login = props => {
  const { userLogin = {}, submitting } = props;
  const [timing, setTiming] = useState(false);
  const { status, type: loginType, errors } = userLogin;
  const [autoLogin, setAutoLogin] = useState(true);
  const [challengeKey, setChallengeKey] = useState('key');
  const [codeImg, setCodeImg] = useState(null);
  const [codeLoading, setCodeLoading] = useState(true);
  const loginAccountFormRef = useRef();
  const loginEmailFormRef = useRef();
  const onGetCaptcha = useCallback(async email => {
    const { onGetEmail } = props;
    const ret = onGetEmail(email);
    console.log('ret');
    console.log(ret);
    setTiming(true);
  }, []);
  useEffect(() => {
    onGetChallenge();
  }, [errors]);
  const onGetChallenge = () => {
    getCode().then((res) => {
      setCodeImg(res && res.image_url);
      setChallengeKey(res && res.key);
      setCodeLoading(false);
    }).catch((err) => {
      console.log(err);
    });
  };
  const onGetEmail = (email) => {
    getEmailCaptcha(email).then((response) => {
      message.success('发送成功,请前往邮箱查看');
    }).catch((err) => {
      fieldErrorHandle(err, loginEmailFormRef);
    });
  };
  const handleAccountSubmit = values => {
    const { dispatch } = props;
    const res = dispatch({
      type: 'login/login',
      payload: { ...values, type: "account", key: challengeKey },
    });
    res.then(err => {
      if (err.data && err.data instanceof Object && 'fields_errors' in err.data) {
        fieldErrorHandle(err, loginAccountFormRef);
      }
    });
  };

  const handleEmailSubmit = values => {
    const { dispatch } = props;
    const res = dispatch({
      type: 'login/login',
      payload: { ...values, type: "email", key: challengeKey },
    });
    res.then(err => {
      if (err.data && err.data instanceof Object && 'fields_errors' in err.data) {
        fieldErrorHandle(err, loginEmailFormRef);
      }
    });
  };

  return (
    <div className={styles.main}>

      <Tabs defaultActiveKey="account">
        <TabPane key="account" tab="账户密码登录">
          <Form ref={loginAccountFormRef} onFinish={handleAccountSubmit}>
            <Form.Item
              style={{ marginBottom: 24 }}
              name="userName"
              placeholder="用户名"
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            >
              <Input size="large" placeholder='请输入用户名' prefix={<UserOutlined
                style={{
                  color: '#1890ff',
                }}
                className={styles.prefixIcon}
              />} />
            </Form.Item>
            <Form.Item
              style={{ marginBottom: 24 }}
              name="password"
              placeholder="密码"
              rules={[
                {
                  required: true,
                  message: '请输入密码!',
                },
              ]}
            >

              <Input.Password size="large" placeholder='请输入密码'
                prefix={<LockTwoTone className={styles.prefixIcon} />} />
            </Form.Item>
            <Row gutter={8}>
              <Col span={16}>
                <Form.Item name="pic_captcha"
                  placeholder="验证码"
                  rules={[
                    {
                      required: true,
                      message: '请输入验证码!',
                    },
                  ]}>
                  <Input size="large" placeholder='请输入验证码'
                    prefix={<IconFont type="iconyanzhengma" className={styles.prefixIcon} />} />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Spin spinning={codeLoading}>
                  <img alt="Captcha"
                    style={{ width: '100%', height: 35, marginTop: 2.5, marginLeft: 10 }}
                    src={codeImg}
                    onClick={onGetChallenge}
                  />
                </Spin>
              </Col>
            </Row>
            <Form.Item>
              <Button size="large" type="primary" className={styles.submit} htmlType="submit">登录</Button>
            </Form.Item>
          </Form>
        </TabPane>
        <TabPane key="email" tab="邮箱验证码登录">
          <Form ref={loginEmailFormRef} onFinish={handleEmailSubmit}>
            <Form.Item
              name="email"
              placeholder="邮箱"
              rules={[
                {
                  required: true,
                  message: '请输入邮箱地址!',
                },
                {
                  pattern: /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/,
                  message: '邮箱地址格式错误!',
                },
              ]}
            >
              <Input size="large" placeholder='请输入邮箱' prefix={<MailTwoTone className={styles.prefixIcon} />} />
            </Form.Item>
            <Row gutter={8}>
              <Col span={16}>
                <Form.Item name="captcha"
                  placeholder="验证码"
                  countDown={120}
                  getCaptchaButtonText=""
                  getCaptchaSecondText="秒"
                  rules={[
                    {
                      required: true,
                      message: '请输入邮箱验证码!',
                    },
                  ]}>
                  <Input size="large" placeholder='请输入邮箱验证码'
                    prefix={<IconFont type="iconyanzhengma" className={styles.prefixIcon} />} />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Button
                  disabled={timing}
                  className={styles.getCaptcha}
                  size="large"
                  onClick={() => {
                    const value = loginEmailFormRef.current.getFieldValue('email');
                    if (!value) {
                      message.error('请先输入邮箱,再发送');
                    } else {
                      const value_error = loginEmailFormRef.current.getFieldError('email');
                      if (value_error.length !== 0) {
                        message.error('请先修正邮箱,再发送');
                      } else {
                        onGetEmail(value);
                      }
                    }

                  }}
                >
                  {timing ? `${count} 秒` : '获取验证码'}
                </Button>
              </Col>
            </Row>
            <Form.Item>
              <Button size="large" type="primary" className={styles.submit} htmlType="submit">登录</Button>
            </Form.Item>
          </Form>

        </TabPane>
      </Tabs>

    </div>
  );
}