index.js 4.98 KB
Newer Older
zhanghaozhe committed
1 2
import React, { Component } from 'react';
import './set-password.scss'
zhanghaozhe committed
3
import { withFormik, Form, Field } from "formik";
zhanghaozhe committed
4 5 6
import PasswordInput from '../common/passwordInput'
import Button from '../common/Button'
import classnames from 'classnames'
zhanghaozhe committed
7
import { compose } from 'redux'
8 9 10 11 12
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";
zhanghaozhe committed
13
import { isEmpty } from "lodash";
zhanghaozhe committed
14
import { connect } from "react-redux";
zhanghaozhe committed
15 16


17
class SetPassword extends Component {
zhanghaozhe committed
18 19

    render() {
zhanghaozhe committed
20 21
        let {values, errors, location} = this.props
        let {from} = location.state || {from: {pathname: '/'}}
zhanghaozhe committed
22
        return (
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
            <>
                <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}
                                    />
                                )
                            }}
                        />
zhanghaozhe committed
41 42
                        <Button className={'btn-active'}
                                active={values.password && values.agreement && isEmpty(errors)}>完成</Button>
43 44 45 46 47 48 49 50 51 52 53
                        <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>
zhanghaozhe committed
54 55
                    <div className="skip"
                         style={{display: from && from.pathname.includes('forgot-password') ? 'none' : 'block'}}>
56 57 58 59
                        <Link replace to='/passport/account-login'>跳过</Link>
                    </div>
                </div>
            </>
zhanghaozhe committed
60 61 62 63
        );
    }
}

zhanghaozhe committed
64
const formikConfig = {
65 66 67 68 69 70 71 72
    mapPropsToValues() {
        return {
            password: '',
            agreement: true
        }
    },
    handleSubmit: (values, {props}) => {

zhanghaozhe committed
73 74 75 76 77 78
        let {from} = props.location.state || {from: {pathname: '/'}}
        if (from.pathname.includes('forgot-password')) {
            forgotPasswordReset(values, props);
        } else {
            bindMobileSetPassword(values, props)
        }
zhanghaozhe committed
79

80 81
    },
    validateOnChange: false,
zhanghaozhe committed
82
    validate: values => {
83 84 85 86 87 88 89 90 91 92 93
        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
zhanghaozhe committed
94 95 96
    }
}

zhanghaozhe committed
97 98 99 100

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

zhanghaozhe committed
101
    http.post(`${API['passport-api']}/account/up_pass_by_${key === 'email' ? 'email' : 'phone'}`, {
zhanghaozhe committed
102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
        [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) {

zhanghaozhe committed
119
    http.post(`${API['passport-api']}/bind_mobile/set_pwd_new`, {
zhanghaozhe committed
120 121 122 123 124 125
        uid: props.user.data.uid,
        password: encrypt(values.password)
    })
        .then(res => {
            if (res.data.errno == 200) {
                Toast.info('密码设置成功')
zhanghaozhe committed
126
                let {from} = location.state || {from: {pathname: '/'}}
zhanghaozhe committed
127 128 129 130 131 132 133 134 135
                setTimeout(function () {
                    props.history.replace(from.pathname)
                }, 1000)
            } else {
                Toast.info(res.data.msg, 2, null, false)
            }
        })
}

zhanghaozhe committed
136
export default compose(
zhanghaozhe committed
137 138 139 140
    connect(
        state => ({user: state.user}),
        null
    ),
zhanghaozhe committed
141 142
    withFormik(formikConfig)
)(SetPassword);