Ant-design-pro: 关于登陆页面的一个小建议

[DingTaiKeji]

登陆页面获取验证码事件没有验证手机号是否合法，可增加验证逻辑:

1. 当点击获取验证码的时候检测输入合法性；
2. 获取之后如果手机号改变，可重新获取验证码；
3. 如果已经获取了验证码的，而获取验证码按钮被激活，让其失效，则重新等待60。

[afc163]

欢迎 PR ~

[DingTaiKeji]

Login拆分成组件不好修改

[SynChron1zed]

@afc163 手机登陆 没有focus 也可以获取验证码倒计时

[wgwxf]

一个登陆页，拆的这么复杂，果然是前端工程师。。。o(╯□╰)o

[chenshuai2144]

声明式语法。。已经很简单了

[wgwxf]

感觉ant pro又是以组件的方式写框架，太多兼容式写法了，明明可以实现的很简单，比如新加的权限，各种嵌套调用。

[geewonii]

my god，看得头晕眼花

[shengbeiniao]

这个登录组件写的真失败，Login嵌套Form，但却没办法返回父级form对象，导致form的各种方法如validateFields无法调用，另外验证码居然和input输入框捆绑，但却没有validate，还有炫技一般的用map封装LoginItem，真是无语

[afc163]

@shengbeiniao 这是开源项目，有任何好的建议和改进都欢迎直接给我们 PR~ 😄

[NeoGitCrt1]

求大神指导一下，点击获取验证码按钮的时候怎么取得用户输入的手机号，谢谢

[shengbeiniao]

@NeoGitCrt1 改Login组件下面LoginItem源码

    onGetCaptcha = () => {
        let error=this.context.form.getFieldError('phone');
        if(typeof error==='undefined'){
          let count = 59;
          this.setState({ count });
          if (this.props.onGetCaptcha) {
            this.props.onGetCaptcha();
          }
          this.interval = setInterval(() => {
            count -= 1;
            this.setState({ count });
            if (count === 0) {
              clearInterval(this.interval);
            }
          }, 1000);
        }
      }

    //调用方代码
    onPhoneChange=(e)=>{
         this.setState({
            phone:e.target.value
         });
    };

    <Mobile name="phone" placeholder="请输入手机号" onChange={this.onPhoneChange}/>
    <Captcha name="captcha" placeholder="请输入验证码" onGetCaptcha={this.onGetCaptcha}/>

[lyingd]

结合这个pr： https://github.com/ant-design/ant-design-pro/pull/1296 ，可以做到外部检查通过后触发获取验证码倒计时，下面代码或许是获取Login组件内部form的正确姿势：

  loginForm
  onGetCaptcha = () => {
    return new Promise((resolve, reject) => {
      this.loginForm.validateFieldsAndScroll(['mobile'], {}, (err, values) => {
        const { type } = this.state;
        if (err) {
          reject()
        } else {
          resolve()
        }
      })
    })
  }

  render() {
    const { login, submitting } = this.props;
    const { type } = this.state;
    return (
      <div className={styles.main}>
        <Login
          defaultActiveKey={type}
          onTabChange={this.onTabChange}
          onSubmit={this.handleSubmit}
          ref={(obj) => { this.loginForm = obj }}
        >
          <Tab key="account" tab="账户密码登录">
            {
              login.status === 'error' &&
              login.type === 'account' &&
              !login.submitting &&
              this.renderMessage('账户或密码错误（admin/888888）')
            }
            <UserName name="userName" placeholder="admin/user" />
            <Password name="password" placeholder="888888/123456" />
          </Tab>
          <Tab key="mobile" tab="手机号登录">
            {
              login.status === 'error' &&
              login.type === 'mobile' &&
              !login.submitting &&
              this.renderMessage('验证码错误')
            }
            <Mobile name="mobile" />
            <Captcha name="captcha" onGetCaptcha={this.onGetCaptcha} />
          </Tab>
          <div>
            <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>自动登录</Checkbox>
            <a style={{ float: 'right' }} href="">忘记密码</a>
          </div>
          <Submit loading={submitting}>登录</Submit>
          <div className={styles.other}>
            其他登录方式
            <Icon className={styles.icon} type="alipay-circle" />
            <Icon className={styles.icon} type="taobao-circle" />
            <Icon className={styles.icon} type="weibo-circle" />
            <Link className={styles.register} to="/user/register">注册账户</Link>
          </div>
        </Login>
      </div>
    );
  }

[NeoGitCrt1]

非常感谢楼上大神们的回复！！思路打开了。
我那天是改了LoginItem组件源码实现的。
今天看到return new Promise这个思路觉得这样处理比较灵活。我这边是用邮箱接验证码的，就自己照着Mobile加了一个Mail的子组件，里面的name是'mail'，还在纠结把getFieldValue('mail')写死在LoginItem比较丑怎么优化呢，哈哈。

[taoqianbao]

可不可以把 登录页，抽取出来，单独一个页面啊？ 把ant-design-pro改成多页面？ 因为登录页面要下载那么多资源，太慢了；