add svg-captcha

src/components/account/LoginForm.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { PropTypes, connect } from '../../family'
 import { login } from '../../actions/account'
 import { Link } from 'react-router-dom'
+import { serve } from '../../config'
 import Mock from 'mockjs'
 import './LoginForm.css'
 
@@ -16,6 +17,8 @@ const mockUser = process.env.NODE_ENV === 'development'
     password: ''
   })
 
+mockUser.captchaId = Date.now()
+
 // 展示组件
 class LoginForm extends Component {
   static contextTypes = {
@@ -44,14 +47,19 @@ class LoginForm extends Component {
               <label>密码：</label>
               <input value={this.state.password} type='password' onChange={e => this.setState({ password: e.target.value })} className='form-control' placeholder='Password' required />
             </div>
+            <div className='form-group'>
+              <label>验证码：</label>
+              <input onChange={e => this.setState({ captcha: e.target.value })} className='form-control' placeholder='验证码' required />
+              <img src={`${serve}/captcha?t=${this.state.captchaId || ''}`} onClick={e => this.setState({ captchaId: Date.now() })} alt="captcha"/>
+            </div>
           </div>
           <div className='footer'>
             <button type='submit' className='btn btn-primary w140 mr20'>提交</button>
             <Link to='/account/register'>注册</Link>
           </div>
-          {this.props.auth.errMsg &&
+          {this.props.auth.message &&
             <div className='alert alert-danger fade show' role='alert'>
-              {this.props.auth.errMsg}
+              {this.props.auth.message}
             </div>
           }
         </form>

src/relatives/AccountRelative.js

@@ -14,7 +14,7 @@ export default {
         case AccountAction.fetchLoginInfoFailed().type:
           return {}
         case AccountAction.loginFailed().type:
-          return { errMsg: '登陆错误，账户或密码错误。' }
+          return { message: action.message }
         default:
           return state
       }
@@ -68,11 +68,11 @@ export default {
     * [AccountAction.login().type] (action) {
       try {
         const user = yield call(AccountService.login, action.user)
-        if (user) {
+        if (user && user.id) {
           yield put(AccountAction.loginSucceeded(user))
           if (action.onResolved) action.onResolved()
-        } else {
+        } else if (user && user.errMsg) {
-          yield put(AccountAction.loginFailed())
+          yield put(AccountAction.loginFailed(user.errMsg))
         }
       } catch (e) {
         console.error(e.message)

src/relatives/services/Account.js

@@ -20,11 +20,11 @@ export default {
       .then(json => json.data)
   },
   // 用户登陆
-  login ({ email, password }) {
+  login ({ email, password, captcha }) {
     return fetch(`${serve}/account/login`, {
       ...CREDENTIALS,
       method: 'POST',
-      body: JSON.stringify({ email, password }),
+      body: JSON.stringify({ email, password, captcha }),
       headers: { 'Content-Type': 'application/json' }
     })
       .then(res => res.json())