Skip to content

M
mr-julyedu
Commit 27c875f8 by zhanghaozhe
Options

微博登录绑定手机号

parent 77363ffc
Showing with 254 additions and 253 deletions
src/components/activity/index.js
......@@ -26,7 +26,7 @@ class Activity extends Component {
getGift = () => {
if(this.props.user.hasError) {
this.props.history.push('/passport');
this.props.history.push('/passport', {from: this.props.location.pathname});
} else {
Toast.info('领取成功，你可前往七月在线官网/APP进行查看', 2);
localStorage.setItem('lingqu', 1);
......
src/components/passport/bindingTel/index.js
import React, { Component } from 'react';
import React, { Component } from 'react'
import './binding-tel.scss'
import { withFormik, Field, Form } from "formik";
import { http, getParam } from "@/utils";
import { compose } from "redux";
import { connect } from "react-redux";
import { setCurrentUser } from "@/store/userAction";
import { withFormik, Field, Form } from "formik"
import { http, getParam } from "@/utils"
import { compose } from "redux"
import { connect } from "react-redux"
import { setCurrentUser } from "@/store/userAction"
import Captcha from '@/common/Captcha'
import { HeaderBar } from '@/common'
......@@ -13,147 +13,147 @@ import { HeaderBar } from '@/common'
import ClearableInput from '../common/clearableInputWithCountryCodes'
import Button from '../common/Button'
import VeriCodeInput from '../common/veriCodeInput'
import { Toast } from "antd-mobile";
import { isEmpty } from "lodash";
import { Toast } from "antd-mobile"
import { isEmpty } from "lodash"
class BindingTel extends Component {
state = {
validate: null,
captchaInstance: null
}
state = {
validate: null,
captchaInstance: null
}
getCaptchaInstance = instance => {
this.setState({
captchaInstance: instance
})
}
onVerify = (err, data) => {
if (err) {
console.log(err)
} else {
this.setState({
validate: data.validate
})
}
getCaptchaInstance = instance => {
this.setState({
captchaInstance: instance
})
}
onVerify = (err, data) => {
if (err) {
console.log(err)
} else {
this.setState({
validate: data.validate
})
}
}
render() {
const {
values,
errors,
country
} = this.props
return (
<>
<HeaderBar title={'绑定手机号'} arrow={true}/>
<div className={'binding-tel'}>
<p className={'title'}>为提高您的账号安全，请绑定手机号</p>
<Form>
<Field
name='tel'
render={({field, form}) => {
return (
<ClearableInput
{...field}
setFieldValue={form.setFieldValue}
placeholder={'请输入需要绑定的手机号'}
wrapperClass={'tel'}
country={country}
/>
render() {
const {
values,
errors,
country
} = this.props
return (
<>
<HeaderBar title={'绑定手机号'} arrow={true}/>
<div className={'binding-tel'}>
<p className={'title'}>为提高您的账号安全，请绑定手机号</p>
<Form>
<Field
name='tel'
render={({field, form}) => {
return (
<ClearableInput
{...field}
setFieldValue={form.setFieldValue}
placeholder={'请输入需要绑定的手机号'}
wrapperClass={'tel'}
country={country}
/>
)
}}
/>
<Field
name='veriCode'
render={({field}) => {
return (
<VeriCodeInput
{...field}
className={'verification'}
icon={<i className={'iconfont iconduanxin'}
style={{fontSize: '20px', left: '12px'}}
/>}
placeholder={'验证码'}
account={values.tel}
tel={values.tel}
challenge={this.state.validate}
instance={this.state.captchaInstance}
action={'auth'}
country={country}
/>
)
}}
/>
<Field
name='veriCode'
render={({field}) => {
return (
<VeriCodeInput
{...field}
className={'verification'}
icon={<i className={'iconfont iconduanxin'}
style={{fontSize: '20px', left: '12px'}}
/>}
placeholder={'验证码'}
account={values.tel}
tel={values.tel}
challenge={this.state.validate}
instance={this.state.captchaInstance}
action={'auth'}
country={country}
/>
)
}}
/>
<Captcha onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/>
<Button className={'complete-btn'}
active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button>
</Form>
</div>
</>
);
}
)
}}
/>
<Captcha onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/>
<Button className={'complete-btn'}
active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button>
</Form>
</div>
</>
)
}
}
const formikConfig = {
mapPropsToValues() {
return {
tel: '',
veriCode: ''
}
},
validateOnChange: true,
validate(values) {
let errors = {}
if (!/\d/.test(values.tel)) {
errors.tel = '请输入正确的手机号'
}
if (!values.veriCode) {
errors.veriCode = '请填写验证码'
mapPropsToValues() {
return {
tel: '',
veriCode: ''
}
},
validateOnChange: true,
validate(values) {
let errors = {}
if (!/\d/.test(values.tel)) {
errors.tel = '请输入正确的手机号'
}
if (!values.veriCode) {
errors.veriCode = '请填写验证码'
}
return errors
},
handleSubmit(values, {props}) {
http.post(`${API['passport-api']}/bind_mobile`, {
phone_num: values.tel,
phone_code: values.veriCode,
mkey: getParam('mkey'),
area_code: '00' + props.country.num,
plat: 5
}).then(res => {
const data = res.data
if (data.errno == 200) {
if (data.data['is_set_pwd']) {
props.history.replace(`/passport/set-password`, {
user: {
hasError: false,
data: {
uid: data.data.uid
},
msg: data.data.msg,
stage: 'binding'
}
})
} else {
location.assign(data.data['jump_url'])
}
return errors
},
handleSubmit(values, {props}) {
http.post(`${API['passport-api']}/bind_mobile`, {
phone_num: values.tel,
phone_code: values.veriCode,
mkey: getParam('mkey'),
area_code: '00'+props.country.num,
plat: 5
}).then(res => {
const data = res.data
if (data.errno == 200) {
if (data.data['is_set_pwd']) {
props.setCurrentUser({
hasError: false,
data: {
uid: data.data.uid
},
msg: data.data.msg,
stage: 'binding'
})
props.history.replace(`/passport/set-password`)
} else {
location.assign(data.data['jump_url'])
}
} else {
Toast.info(data.msg, 2, null, false)
}
})
}
} else {
Toast.info(data.msg, 2, null, false)
}
})
}
}
export default compose(
connect(
state => ({country: state.country}),
{setCurrentUser}
),
withFormik(formikConfig),
)(BindingTel);
connect(
state => ({country: state.country}),
{setCurrentUser}
),
withFormik(formikConfig),
)(BindingTel)
src/components/passport/index.js
......@@ -23,6 +23,7 @@ class Passport extends Component {
redirectURL = '/'
count = 1
blackList = new Set(['/passport/binding-tel', '/passport/set-password'])
constructor(props) {
super(props)
......@@ -85,7 +86,7 @@ class Passport extends Component {
routeWhenUserLoggedIn = () => {
let {hasError} = this.props.user
if (!hasError) {
if (!hasError && !this.blackList.has(this.props.location.pathname)) {
const redirectURI = getParam('redirect')
redirectURI ? (window.location.href = redirectURI) : this.props.history.go(-this.count)
}
......@@ -108,7 +109,9 @@ class Passport extends Component {
<Route path={match.url + '/account-login'} component={AccountLogin}/>
<Route path={match.url + '/forgot-password'} component={ForgotPassword}/>
<Route path={match.url + '/forgot-password-email'} component={ForgotPasswordEmail}/>
<Route path={match.url + '/set-password'} component={SetPassword}/>
<Route path={match.url + '/set-password'} render={props => {
return <SetPassword {...props} count={this.count}/>
}}/>
<Route path={match.url + '/binding-tel'} component={BindingTel}/>
</Switch>
</div>
......@@ -123,4 +126,4 @@ export default compose(
null
),
WithFullSize
)(Passport)
\ No newline at end of file
)(Passport)
src/components/passport/setPassword/index.js
import React, { Component } from 'react';
import React, { Component } from 'react'
import './set-password.scss'
import { withFormik, Form, Field } from "formik";
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";
import { HeaderBar } from "@/common"
import { http } 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"
import { setCurrentUser } from '@/store/userAction'
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>
</>
);
}
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}) => {
mapPropsToValues() {
return {
password: '',
agreement: true
}
},
handleSubmit: (values, {props}) => {
let from = props.location.state && props.location.state.from || {pathname: '/'}
if (from.pathname.includes('forgot-password')) {
forgotPasswordReset(values, props);
} else {
bindMobileSetPassword(values, props)
}
let from = props.location.state && 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
},
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'
let key = sessionStorage.getItem('r_type') === 'email' ? 'email' : 'tel'
let requestKey = key === 'email' ? 'email' : 'phone'
http.post(`${API['passport-api']}/account/up_pass_by_${requestKey}`, {
[requestKey]: sessionStorage.getItem(key),
password: encrypt(values.password)
let requestKey = key === 'email' ? 'email' : 'phone'
http.post(`${API['passport-api']}/account/up_pass_by_${requestKey}`, {
[requestKey]: 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)
}
})
.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)
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 = props.location.state && props.location.state.from || {pathname: '/'}
setTimeout(function () {
props.history.replace(from.pathname)
}, 1000)
} else {
Toast.info(res.data.msg, 2, null, false)
}
})
.then(res => {
if (res.data.errno == 200) {
Toast.info('密码设置成功')
let from = props.location.state && props.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);
\ No newline at end of file
connect(
state => ({user: state.user}),
{setCurrentUser}
),
withFormik(formikConfig)
)(SetPassword)
src/router/router-config.js
......@@ -207,7 +207,7 @@ export default [
},
// 定金-邀请好友助力
{
path: '/expand/index',
path: '/expand/indexactivity',
component: ExpandShare
},
{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment