忘记密码，设置密码

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/forgotPassword/forgot-password.scss

@@ -22,4 +22,5 @@
         margin-bottom: 21px;
     }
 
+
 }
\ No newline at end of file

src/components/passport/forgotPassword/index.js

@@ -110,21 +110,26 @@ const formikConfig = {
 
 
         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.data.errno == 0){
+            if (res.data.errno == 0) {
                 props.history.push('/passport/set-password')
-            }else {
+            } else {
                 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