index.js

import React, { Component } from 'react';
import './set-password.scss'
import { withFormik, Form, Field } from "formik";
import PasswordInput from '../common/passwordInput'
import Button from '../common/Button'
import classnames from 'classnames'
import { compose } from 'redux'
import { HeaderBar } from "@/common";
import { http, api } from "@/utils";
import { Toast } from "antd-mobile";
import { encrypt } from "@/components/passport/encryption";
import { Link } from "react-router-dom";
import { isEmpty } from "lodash";
import { connect } from "react-redux";


class SetPassword extends Component {

    render() {
        let {values, errors, location} = this.props
        let {from} = location.state || {from: {pathname: '/'}}
        return (
            <>
                <HeaderBar arrow={true} title={'设置密码'}/>
                <div className={'set-password'}>
                    <p className='title'>密码需要包含6-16位字母及数字</p>
                    <Form>
                        <Field
                            name='password'
                            render={({field}) => {
                                return (
                                    <PasswordInput
                                        autoComplete={'on'}
                                        placeholder={'设置密码'}
                                        onChange={this.handleChange}
                                        {...field}
                                    />
                                )
                            }}
                        />
                        <Button className={'btn-active'}
                                active={values.password && values.agreement && isEmpty(errors)}>完成</Button>
                        <label htmlFor="agreement" className='user-agreement'>
                            <Field type='checkbox'
                                   name='agreement'
                                   id='agreement'
                                   className={classnames([
                                       this.props.values.agreement ? 'iconfont iconiconfront-3' : 'disagree'
                                   ])}
                            />
                            同意<span>《七月在线用户使用协议》</span>
                        </label>
                    </Form>
                    <div className="skip"
                         style={{display: from && from.pathname.includes('forgot-password') ? 'none' : 'block'}}>
                        <Link replace to='/passport/account-login'>跳过</Link>
                    </div>
                </div>
            </>
        );
    }
}

const formikConfig = {
    mapPropsToValues() {
        return {
            password: '',
            agreement: true
        }
    },
    handleSubmit: (values, {props}) => {

        let {from} = props.location.state || {from: {pathname: '/'}}
        if (from.pathname.includes('forgot-password')) {
            forgotPasswordReset(values, props);
        } else {
            bindMobileSetPassword(values, props)
        }

    },
    validateOnChange: false,
    validate: values => {
        let errors = {}
        const re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
        if (!re.test(values.password)) {
            errors.password = '密码需要包含6-16位字母及数字'
            Toast.info(errors.password, 2, null, false)
        }
        if (!values.agreement) {
            errors.agreement = '您须同意《七月在线用户使用协议》'
            Toast.info(errors.agreement, 2, null, false)
        }
        return errors
    }
}


function forgotPasswordReset(values, props) {
    let key = sessionStorage.getItem('r_type') === 'email' ? 'email' : 'tel'

    http.post(`${API['passport-api']}/account/up_pass_by_${key === 'email' ? 'email' : 'phone'}`, {
        [key]: sessionStorage.getItem(key),
        password: encrypt(values.password)
    })
        .then(res => {
            if (res.data.errno == 200) {
                Toast.info('密码设置成功')
                setTimeout(function () {
                    props.history.replace('/passport/account-login')
                }, 1000)
            } else {
                Toast.info(res.data.msg, 2, null, false)
            }
        })
}

function bindMobileSetPassword(values, props) {

    http.post(`${API['passport-api']}/bind_mobile/set_pwd_new`, {
        uid: props.user.data.uid,
        password: encrypt(values.password)
    })
        .then(res => {
            if (res.data.errno == 200) {
                Toast.info('密码设置成功')
                let {from} = location.state || {from: {pathname: '/'}}
                setTimeout(function () {
                    props.history.replace(from.pathname)
                }, 1000)
            } else {
                Toast.info(res.data.msg, 2, null, false)
            }
        })
}

export default compose(
    connect(
        state => ({user: state.user}),
        null
    ),
    withFormik(formikConfig)
)(SetPassword);