Skip to content

M
mr-julyedu
Commit 8d6d862a by wangshuo
Options

Merge branch 'master' of gitlab.julyedu.com:baiguangyao/mr-julyedu

parents bb58baaf fb665f8d
Showing with 163 additions and 78 deletions
src/common/ClearableInput/index.js
......@@ -12,7 +12,7 @@ class ClearableInput extends Component {
inputClass,
type = 'text',
icon,
setValues,
setFieldValue,
...rest
} = this.props
let clearIconStyle = {
......@@ -31,7 +31,7 @@ class ClearableInput extends Component {
<i
className={'iconfont icondanseshixintubiao-3 clear'}
onClick={() => {
setValues({[name]: ''})
setFieldValue(name,'')
}}
style={clearIconStyle}
/>
......
src/components/passport/accountLogin/index.js
......@@ -12,9 +12,15 @@ import Header from "../common/Header";
import Input from '../common/Input'
import LoginButton from '../common/LoginButton'
import PasswordInput from '../common/passwordInput'
import { Toast } from "antd-mobile";
class AccountLogin extends PureComponent {
componentDidMount() {
console.log(this.props.values);
}
render() {
const {
errors,
......@@ -69,9 +75,12 @@ const formikConfig = {
props.accountLogin({
username, password
}).then(res => {
console.log(res);
if (!res.hasError) {
let {from} = props.location.state || {from: {pathname: '/'}}
history.push(from.pathname)
} else {
Toast.info(res.msg, 2, null, false)
}
})
}
......
src/components/passport/common/Input/index.js
......@@ -6,12 +6,16 @@ function Input({
icon,
wrapperClass,
children,
value,
name,
...rest
}) {
return (
<div className={classnames('input-wrapper', wrapperClass)}>
<input
className='input'
name={name}
value={value}
{...rest}
/>
{icon}
......
src/components/passport/common/veriCodeInput/index.js
......@@ -21,7 +21,6 @@ class VeriCodeInput extends Component {
countDown = () => {
let {count} = this.state
if (!this.state.isFirst) {
Toast.info('请重新进行滑块验证', 2, null, false)
this.props.instance.refresh()
......@@ -57,7 +56,6 @@ class VeriCodeInput extends Component {
sendCode = () => {
if (!this.validate()) return
console.log(this.getType())
this.getType() === 'email' ? this.sendEmail() : this.sendSMS();
return true;
}
......@@ -82,6 +80,10 @@ class VeriCodeInput extends Component {
sendSMS = () => {
const {action, tel, challenge} = this.props
if (!tel) {
Toast.info('请输入手机号或邮箱地址')
return
}
http.post(`${api['passport-api']}/quick_sms`, {
phone_num: tel,
action: action || 'login',
......@@ -103,16 +105,29 @@ class VeriCodeInput extends Component {
const {tel, challenge, account} = this.props
let hasTel = has(this.props, 'tel')
let content
if (hasTel) {
content = '手机号码不能为空'
if (!tel) {
content = '手机号码不能为空'
}
if (validateTel(tel)) {
content = '请输入正确格式的手机号码'
}
} else {
content = '手机号或电子邮件不能为空'
if (!account) {
content = '手机号或电子邮件不能为空'
}
if (!validateTel(account) && !validateEmail(account)) {
content = '请输入正确格式的手机号或电子邮件'
}
}
if ((hasTel && !tel) || (!hasTel && !account)) {
if (content) {
Toast.info(content, 2, null, false)
return false
}
if (!challenge) {
Toast.info('请进行滑块验证', 2, null, false)
return false
......@@ -121,10 +136,10 @@ class VeriCodeInput extends Component {
}
render() {
let {type = 'number', className, ...rest} = this.props
let { className, ...rest} = this.props
return (
<Input
type={type}
type={'number'}
wrapperClass={className}
{...rest}
>
......
src/components/passport/forgotPassword/forgot-password.scss
......@@ -22,4 +22,5 @@
margin-bottom: 21px;
}
}
\ No newline at end of file
src/components/passport/forgotPassword/index.js
......@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
import { compose } from 'redux';
import { Toast } from "antd-mobile";
import { HeaderBar, Captcha, ClearableInput } from "@/common";
import { validateTel, validateEmail } from "@/utils";
import { validateTel, validateEmail, http, api } from "@/utils";
import { quickLogin } from '@/store/userAction';
import { isEmpty } from "lodash";
......@@ -52,10 +52,10 @@ class ForgotPassword extends Component {
return (
<ClearableInput
{...field}
setValues={form.setValues}
type={'tel'}
placeholder={'请输入注册时的邮箱账号或手机号'}
wrapperClass={'tel-input'}
setFieldValue={form.setFieldValue}
icon={<i className={'iconfont iconshouji'}
style={{fontSize: '22px', left: '11px'}}
/>}
......@@ -107,17 +107,30 @@ const formikConfig = {
return errors
},
handleSubmit(values, {props}) {
console.log(props)
props.quickLogin({
phone_num: values.account,
phone_code: values.veriCode
let account, address
if (validateEmail(values.account)) {
account = 'email'
address = 'check_email_code'
sessionStorage.setItem('r_type', 'email')
sessionStorage.setItem('email', values.account)
} else {
account = 'phone_num'
address = 'check_phone_code'
sessionStorage.setItem('r_type', 'phone')
sessionStorage.setItem('tel', values.account)
}
http.post(`${api['passport-api']}/${address}`, {
[account]: values.account,
code: values.veriCode
}).then(res => {
if (res.hasError) {
Toast.info(res.msg);
if (res.data.errno == 0) {
props.history.push('/passport/set-password')
} else {
let state = props.location.state || {from: {pathname: '/'}}
props.history.replace(state.from)
Toast.info(res.data.msg)
}
})
},
......
src/components/passport/passport.scss
.passport {
height: 100%;
display: flex;
}
\ No newline at end of file
src/components/passport/setPassword/index.js
......@@ -5,65 +5,98 @@ 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";
class SetPassword extends Component {
constructor(props) {
super(props);
this.state = {
password: '',
agree: true
};
}
handleChange = (val) => {
this.setState({password: val});
}
toggleAgree = () => {
this.setState({agree: !this.state.agree});
}
class SetPassword extends Component {
render() {
return (
<div className={'set-password'}>
<p className='title'>密码需要包含6-16位字母及数字</p>
<Form>
<Field
name='password'
render={({field}) => {
return (
<PasswordInput
placeholder={'设置密码'}
onChange={this.handleChange}
{...field}
/>
)
}}
/>
<Button className={'btn-active'}>完成</Button>
</Form>
<p className='user-agreement'>
<i className={classnames({
'iconfont iconiconfront-3': this.state.agree,
disagree: !this.state.agree
})} onClick={this.toggleAgree}/>
同意<span>《七月在线用户使用协议》</span>
</p>
<p className='skip'>跳过</p>
</div>
<>
<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'}>完成</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">
<Link replace to='/passport/account-login'>跳过</Link>
</div>
</div>
</>
);
}
}
const formikConfig = {
mapValuesToProps: () => ({
password: ''
}),
handleSubmit: (values) => {
mapPropsToValues() {
return {
password: '',
agreement: true
}
},
handleSubmit: (values, {props}) => {
let key = sessionStorage.getItem('r_type') === 'email' ? 'email' : 'tel'
let encrypted = encrypt(values.password)
http.post(`${api['passport-api']}/up_pass${key === 'tel' && '_by_phone' || ''}`, {
[key]: sessionStorage.getItem(key),
pass: encrypted,
re_pass: encrypted
})
.then(res => {
if (res.data.errno == 0) {
Toast.info('密码设置成功')
setTimeout(function () {
props.history.replace('/passport')
}, 1000)
} else {
Toast.info(res.data.msg, 2, null, false)
}
})
},
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
}
}
......
src/components/passport/setPassword/set-password.scss
......@@ -17,7 +17,15 @@
.user-agreement {
line-height: 30px;
i {
span {
vertical-align: middle;
color: $active;
}
input{
-webkit-appearance: none;
border: none;
outline: 0;
margin-right: 3px;
font-size: 21px;
vertical-align: middle;
......@@ -33,19 +41,14 @@
&::before {
content: '';
display: inline-block;
width: 19px;
height: 19px;
width: 17px;
height: 17px;
border: 1px solid $border_ccc;
border-radius: 50%;
}
}
}
span {
vertical-align: middle;
color: $active;
}
}
.skip {
......@@ -54,4 +57,11 @@
color: $color_999;
text-align: center;
}
.input-wrapper {
input {
padding-left: 17px;
}
}
}
\ No newline at end of file
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