import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Button } from 'components/Form'
import CheckCode from 'components/VerificationCode/CheckCode'

import { LOG } from 'utils'

export default class JoinAccount extends Component {
    static propTypes = {
        onSuccess: PropTypes.func,
        styles: PropTypes.object

    }
    static defaultProps = {
        onSuccess: () => { LOG('重置密码成功prop未定义') }

    }
    handelSendEmail = () => {
        alert('验证码已经发送到您的邮箱，请查收，并通过验证码进行修改操作')
    }
    handelReset = () => {
        this.props.onSuccess()
    }
    state = {errorInfo: '', loading: false}

    render () {
        const {styles} = this.props

        return (
            <div className={`${styles.changeEmail} ${styles.form}`}>
                <div>
                    <p className={styles.title}>oauth用户关联邮箱</p>
                    <p className={styles.tips} style={{fontSize: 12}}>为了提供更加安全便捷的服务，请关联邮箱</p>
                    <input className={`${styles.inputText} ${styles.email}`} placeholder='邮箱地址或电话号码' type='text' />
                    <CheckCode />
                    <p className={styles.error}>{this.state.errorInfo}</p>
                    <Button onClick={this.handelReset}>确认</Button>
                </div>
            </div>
        )
    }
}