educoder/public/react/src/modules/user/FindPasswordComponent.js

import React, {Component} from 'react';

import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";

import {getImageUrl, DragValidator} from 'educoder';
import {Tabs, Input, Checkbox, Button, notification} from 'antd';
import axios from 'axios';
import './common.css'

const TabPane = Tabs.TabPane
const loginInputsyl = {
    "width": " 100%",
    "height": "40px",
}

//父组件 EducoderLogin.js
class LoginRegisterComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            login: "",
            password: "",
            passwords: "",
            seconds: 60,
            codes: "",
            getverificationcodes: true,
            Phonenumberisnotco: undefined,
            Phonenumberisnotcobool: false,
            s: 'text',
            classpass: "text",
            readonlyInput: true,
        }
    }


    openNotification = (messge) => {
        notification.open({
            message: "提示",
            description:
            messge,
            onClick: () => {
                console.log('Notification Clicked!');
            },
        });
    };
    StudyMakeMoney = () => { // 调用父组件方法
        this.props.Setshowbool();

    }

    // 点击表单后，改变type
    changeType = () => {
        this.setState({classpass: 'password'});
    }
    changeTypey = () => {

    }
    //倒计时
    getverificationcode = () => {
        if (this.state.Phonenumberisnotcobool === false ||this.state.Phonenumberisnotcobool === undefined) {
            if (this.state.login&&this.state.login.length === 0) {
                this.openNotification("请输入手机号或邮箱");
                return
            } else {
                this.openNotification("请输入正确的手机号或邮箱");
            }
            return;
        }
        if (this.state.getverificationcodes === true) {
            this.setState({
                getverificationcodes: undefined,
            })
            let timer = setInterval(() => {
                this.setState((preState) => ({
                    seconds: preState.seconds - 1,
                }), () => {
                    if (this.state.seconds == 0) {
                        clearInterval(timer);
                        this.setState({
                            getverificationcodes: false,
                            seconds: 60,
                        })
                    }
                });
            }, 1000)
            this.SMSverification();
        } else {
            this.setState({
                getverificationcodes: undefined,
            })
            let timer = setInterval(() => {
                this.setState((preState) => ({
                    seconds: preState.seconds - 1,
                }), () => {
                    if (this.state.seconds == 0) {
                        clearInterval(timer);
                        this.setState({
                            getverificationcodes: false,
                            seconds: 60,

                        })
                    }
                });
            }, 1000)
            this.SMSverification();
        }
    }
    //短信验证
    SMSverification = () => {
        var url = `/accounts/get_verification_code.json`;
        axios.get((url), {
            params: {
                login: this.state.login,
                type: 2,
            }
        }).then((result) => {
            //验证有问题{"status":1,"message":"success"}
            console.log(result);


        }).catch((error) => {
            console.log(error);

        })
    }

    cancelReadOnly = () => {
        this.setState({
            readonlyInput: false,
        })
    }
    //找回密码
    Retrievepassword = () => {
        if (this.state.Phonenumberisnotcobool === false) {
            if (this.state.login.length === 0) {
                this.openNotification("请输入手机号或邮箱");
                return
            }
            this.openNotification("请输入正确的手机号或邮箱");
            return;
        }

        if (this.state.login === undefined || this.state.login == "") {
            this.openNotification(`请输入登录手机号码或邮箱`);
            return
        } else if (this.state.password === undefined || this.state.password == "") {
            this.openNotification(`请输入密码`);
            return
        } else if (this.state.passwords === undefined || this.state.passwords == "") {
            this.openNotification(`请输入密码`);
            return
        } else if (this.state.password !== this.state.passwords) {
            this.openNotification(`两次密码不相同`);
            return
        } else if (this.state.codes === undefined || this.state.codes == "") {
            this.openNotification(`请输入验证码`);
            return
        }
        var url = "/accounts/reset_password.json";
        axios.post(url, {
            login: this.state.login,
            code: this.state.codes,
            new_password: this.state.password,
            new_password_confirmation: this.state.passwords,
        }).then((result) => {
            // console.log(result);
            //登录成功，会生成session
            this.openNotification("找回密码成功，请重新登入。");
            window.location.href = "/login"
        }).catch((error) => {

        })


    }
    openNotification = (messge) => {
        notification.open({
            message: "提示",
            description:
            messge,
            onClick: () => {
                console.log('Notification Clicked!');
            },
        });
    };
    loginInputonChange = (e) => {
        // console.log(e.target.value);
        this.setState({
            login: e.target.value,
        })


    }
    loginInputonChanges = (e) => {
        // console.log(e.target.value);
        this.setState({
            password: e.target.value,
        })


    }
    loginInputonChangess = (e) => {
        // console.log(e.target.value);
        this.setState({
            passwords: e.target.value,
        })


    }
    //获取code
    codesonChange = (e) => {
        this.setState({
            codes: e.target.value
        })
    }
    inputOnBlur = (e) => {
        this.isCorrectname(e.target.value);
        // this.Emailphonenumberverification(e.target.value, id);
    }
    isCorrectname = (value) => {
        console.log(value.length);
        if (value.length === 0) {
            this.setState({
                Phonenumberisnotco: undefined,
                Phonenumberisnotcobool: false,
            })
            return;
        }
        // var telephone = $("#telephoneAdd.tianjia_phone").val();
        var regph = /^[1][3,4,5,6,7,8][0-9]{9}$/;
        // var email = $("#add_email.tianjia_email").val();
        var regemail = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

        // [1]手机号开头必须是1    [3,4,5,6,7,8] 第二位是3-8中的一个 [0-9]{9} 后边9位可以是0-9的任意数字。
        var stringdata = undefined;
        if (!regph.test(value)) {
            stringdata = "手机号格式不正确";
            this.setState({
                Phonenumberisnotco: stringdata,
                Phonenumberisnotcobool: false,
            })
        } else {
            this.setState({
                Phonenumberisnotco: undefined,
                Phonenumberisnotcobool: true,
            })
            return
        }

        if (!regemail.test(value)) {
            if ((value.indexOf("@") != -1) === true) {
                stringdata = "邮箱格式不正确";
            } else {
                stringdata = "手机号格式不正确";

            }
            this.setState({
                Phonenumberisnotco: stringdata,
                Phonenumberisnotcobool: false,
            })

            this.Emailphonenumberverification(value)
            return
        } else {
            this.setState({
                Phonenumberisnotco: undefined,
                Phonenumberisnotcobool: true,
            })
            return
        }
    }
    //邮箱手机号验证
    Emailphonenumberverification = (value) => {
        var url = `/accounts/valid_email_and_phone.json`;
        axios.get((url), {
            params: {
                login: value,
                type: 2,
            }
        }).then((result) => {
            //验证有问题{"status":1,"message":"success"}
            // console.log(result);
            this.openNotification("验证码已发送，请注意查收!",2);


        }).catch((error) => {
            console.log(error);
            // this.setState({
            //     login:"",
            //     logins:"",
            // })
        })
    }

    render() {
        const {
            activeKey,
            // 登录
            autoLogin,
            // 注册
            readAgreement, dragOk,
            login,
            password,
            passwords,
            classpass,
            seconds,
            getverificationcodes,
            Phonenumberisnotco,
            readonlyInput,
            codes,
        } = this.state
        // height: 346px;
        return (

            <div className="login_register_content" style={{height: "482px"}}>
                <Input type="text" name="username" value={"namename"}
                       style={{height: '0', width: '0', border: 'none', display: "none"}}/>
                <Input type="password" name="password" id="password" value={"123123123"}
                       style={{height: '0', width: '0', border: 'none', display: "none"}}/>
                <style>{`

              .login_section .section_header {
                margin-bottom: 16px;
                font-size: 18px;
                width: 100%;
                text-align: center;
                border-bottom: 1px solid rgb(234, 234, 234);
                height: 69px;
                color: #05101A;
                line-height: 69px;
              }
          `}</style>

                <div className="login_section">
                    <div className="section_header">
                        找回密码
                    </div>
                    <div style={{width: '340px'}}>
                        <style>
                            {
                                `
                                .ant-input {
    font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    display: inline-block;
    padding: 4px 11px;
    width: 100%;
    height: 38px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.65);
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
                                `
                            }
                        </style>
                        <Input style={loginInputsyl} type="text" autoComplete="off" onClick={this.changeTypey}
                               placeholder="输入注册手机号或邮箱" value={this.state.login} onBlur={(e) => this.inputOnBlur(e)}
                               onChange={this.loginInputonChange} style={{marginTop: '10px',height: "38px"}}></Input>
                        {
                            Phonenumberisnotco && Phonenumberisnotco != "" ?
                                <p className="color-red  mt5 mb5" style={{width: " 100%", height: "20px"}}>
                                    <span className="fl" style={{textAlign:"center",width: " 100%"}}>{Phonenumberisnotco}</span>
                                </p>
                                : <div style={{height: "25px"}}></div>
                        }
                        <DragValidator
                            height={38}  successGreenColor="#45E15F"
                            style={{height:"38px",width:"100%"}}
                            dragOkCallback={this.dragOkCallback}
                        ></DragValidator>
                        <Input type={classpass}
                               onClick={this.changeType} autoComplete="new-password"  onChange={this.loginInputonChanges}
                               value={this.state.password}   style={{width:"100%",height:"38px",marginTop:'25px'}}  placeholder="输入8~16位密码，区分大小写"></Input>
                        <Input  type={classpass}
                               onClick={this.changeType} autoComplete="new-password"
                               onChange={this.loginInputonChangess} value={this.state.passwords}
                               style={{height:"38px",marginTop:'25px',width:"100%"}}
                               placeholder="再次输入新密码"></Input>

                        <div className={"mt25"}>
                            <Input className="fl mr5" type="text" autoComplete="off" style={{
                                width: "210px",
                                height: "38px",
                            }} placeholder="请输入验证码"
                                   onChange={this.codesonChange}
                                   value={codes}
                            >
                            </Input>
                            {
                                getverificationcodes === undefined ?
                                    <Button className="fl ml5 " disabled
                                            style={{"width": "120px", "text-align": "center", "height": "38px",}}
                                            size={"large"}>重新发送{seconds}s</Button>
                                    : getverificationcodes === true ?
                                    <Button className="fl ml5 "
                                            style={{"width": "120px", "text-align": "center", "height": "38px"}}
                                            type="primary"
                                            onClick={() => this.getverificationcode()} size={"large"}>获取验证码</Button>
                                    :
                                    <Button className="fl ml5 "
                                            style={{"width": "120px", "text-align": "center", "height": "38px"}}
                                            type="primary"
                                            onClick={() => this.getverificationcode()} size={"large"}>重新发送</Button>
                            }


                        </div>

                        <Button className="login_btn" size={"large"} type="primary"
                                style={{height:"46px"}}
                                onClick={this.Retrievepassword}>完成</Button>
                    </div>
                </div>

            </div>
        );
    }
}

export default (LoginRegisterComponent);