忘记密码

src/common/ClearableInput/clearable-input.scss

@@ -8,6 +8,7 @@
         border: 1px solid $border_ccc;
         border-radius: 3px;
         -webkit-appearance: none;
+        font-size: 15px;
 
         &::-webkit-input-placeholder {
             color: $color_999;

src/components/passport/common/Button/index.js

@@ -3,9 +3,9 @@ import './button.scss'
 
 import classnames from 'classnames'
 
-const Button = ({className, children}) => {
+const Button = ({children, active}) => {
     return (
-        <button className={classnames('custom-button', className)}>
+        <button className={classnames('custom-button', {active})}>
             {children}
         </button>
     );

src/components/passport/common/veriCodeInput/index.js

@@ -18,10 +18,6 @@ class VeriCodeInput extends Component {
     }
     timer = null
 
-    componentDidMount() {
-        console.log(this.props);
-    }
-
 
     countDown = () => {
         let {count} = this.state
@@ -52,8 +48,8 @@ class VeriCodeInput extends Component {
     }
 
     getType = () => {
-        const {value} = this.props
-        if (validateEmail(value)) {
+        const {account} = this.props
+        if (validateEmail(account)) {
             return 'email'
         }
     }
@@ -61,14 +57,15 @@ class VeriCodeInput extends Component {
 
     sendCode = () => {
         if (!this.validate()) return
+        console.log(this.getType())
         this.getType() === 'email' ? this.sendEmail() : this.sendSMS();
         return true;
     }
 
     sendEmail = () => {
-        const {value, challenge} = this.props
+        const {account, challenge} = this.props
         http.post(`${api['passport-api']}/send_email_code`, {
-            email: value,
+            email: account,
             challenge
         }).then(res => {
             if (res.data.errno === 0) {
@@ -111,7 +108,7 @@ class VeriCodeInput extends Component {
         } else {
             content = '手机号或电子邮件不能为空'
         }
-        if (hasTel && !tel || !hasTel && !account) {
+        if ((hasTel && !tel) || (!hasTel && !account)) {
             Toast.info(content, 2, null, false)
             return false
         }

src/components/passport/forgotPassword/index.js

@@ -41,6 +41,7 @@ class ForgotPassword extends Component {
             values,
             errors
         } = this.props
+        console.log(this.props)
         return (
             <div className={'forgot-password'}>
                 <HeaderBar title='忘记密码'/>
@@ -62,23 +63,29 @@ class ForgotPassword extends Component {
                                     />)
                             }}
                         />
-                        <Field
-                            name='veriCode'
-                            render={({field}) => {
-                                return (
-                                    <VeriCodeInput
-                                        {...field}
-                                        className={'verify-code'}
-                                        icon={<i className={'iconfont iconduanxin'}
-                                                 style={{fontSize: '20px', left: '12px'}}
-                                        />}
-                                    />
-                                )
-                            }}
-                        />
+                        {
+                            this.state.validate &&
+                            <Field
+                                name='veriCode'
+                                render={({field}) => {
+                                    return (
+                                        <VeriCodeInput
+                                            {...field}
+                                            className={'verify-code'}
+                                            icon={<i className={'iconfont iconduanxin'}
+                                                     style={{fontSize: '20px', left: '12px'}}
+                                            />}
+                                            account={values.account}
+                                            challenge={this.state.validate}
+                                            instance={this.state.captchaInstance}
+                                        />
+                                    )
+                                }}
+                            />
+                        }
+                        <Captcha getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
+                        <Button active={values.account && values.veriCode && isEmpty(errors)}>下一步</Button>
                     </Form>
-                    <Captcha getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
-                    <Button active={values.account && values.veriCode && isEmpty(errors)}>下一步</Button>
                 </div>
             </div>
         );
@@ -101,6 +108,7 @@ const formikConfig = {
         return errors
     },
     handleSubmit(values, {props}) {
+        console.log(props)
         props.quickLogin({
             phone_num: values.account,
             phone_code: values.veriCode
@@ -118,9 +126,9 @@ const formikConfig = {
 }
 
 export default compose(
-    withFormik(formikConfig),
     connect(
         null,
         {quickLogin}
-    )
+    ),
+    withFormik(formikConfig)
 )(ForgotPassword)
\ No newline at end of file

src/components/passport/setPassword/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'
 
 class SetPassword extends Component {
 
@@ -26,14 +26,25 @@ class SetPassword extends Component {
     }
 
     render() {
+
         return (
             <div className={'set-password'}>
                 <p className='title'>密码需要包含6-16位字母及数字</p>
-                <PasswordInput
-                    placeholder={'设置密码'}
-                    onChange={this.handleChange}
-                />
-                <Button className={'btn-active'}>完成</Button>
+                <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,
@@ -47,4 +58,15 @@ class SetPassword extends Component {
     }
 }
 
-export default SetPassword;
\ No newline at end of file
+const formikConfig = {
+    mapValuesToProps: () => ({
+        password: ''
+    }),
+    handleSubmit: (values) => {
+
+    }
+}
+
+export default compose(
+    withFormik(formikConfig)
+)(SetPassword);
\ No newline at end of file