Alessander França Alessander França - 5 months ago 23
jQuery Question

react not working with bad request

I am checking the login via jquery using this methods:

module.exports = {
login: function(username, pass, cb) {
if (localStorage.token) {
if (cb) cb(true)
return
}
this.getToken(username, pass, (res) => {
if (res.authenticated) {
localStorage.token = res.token
if (cb) cb(true)
} else {
if (cb) cb(false)
}
})
},

logout: function() {
delete localStorage.token
},

loggedIn: function() {
return !!localStorage.token
},

getToken: function(username, pass, cb) {
$.ajax({
type: 'POST',
url: '/obtain-auth-token/',
data: {
email_or_username: username,
password: pass
},
success: function(res){
cb({
authenticated: true,
token: res.token
})
}
})
},
}


My login validation is working correctly, if the user and password are correct it redirects to app page. But if is incorrect I receive this message at terminal:

POST http://url_base/obtain-auth-token/ 400 (Bad Request)

and this element:

<p>Bad login information</p>


Does not appears at my login page.

I think that the problem is this error from jQuery but I don't know how to solve this.

I am using this repository how reference: https://github.com/reactjs/react-router/blob/master/examples/auth-flow/auth.js

Here is my LoginPage:

'use strict'

import React from 'react'
import { Router, browserHistory } from 'react-router'
import '../../../css/login.css'
import '../../../css/animation.css'
import Logo from '../icons/Logo'
import auth from './auth'

class LoginPage extends React.Component{
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
error: false,
loggedIn: auth.loggedIn()
}

}

handleSubmit(ev) {
ev.preventDefault()

var username = this.refs.username.value
var pass = this.refs.pass.value

auth.login(username, pass, (loggedIn) => {
if (loggedIn) {
const { location } = this.props
if (location.state && location.state.nextPathname) {
browserHistory.push(location.state.nextPathname)
} else {
browserHistory.push('app')
}
}
else{
this.setState({error:true});
}
})
}



render() {

return (
<div id="login" className="login">
<div className="login-content">
<div id="login-content-container" className="login-content-container">
<Logo svgClass="login-content-container-logo" width="270" height="35"/>
<form className="login-content-container-form" onSubmit={this.handleSubmit}>
<input className="login-content-container-form-input" type="text" ref="username" placeholder="username"/>
<input className="login-content-container-form-input" type="password" ref="pass" placeholder="password"/>
<button className="login-content-container-form-button">login</button>
</form>
{this.state.error && (
<p>Bad login information</p>
)}
</div>
</div>
</div>
);
}
}

export default LoginPage

Answer

It simply because you haven't handled the ajax error callback in getToken

getToken: function(username, pass, cb) {
        $.ajax({
            type: 'POST',
            url: '/obtain-auth-token/',
            data: {
                email_or_username: username,
                password: pass
            },
            success: function(res){
                cb({
                    authenticated: true,
                    token: res.token
                })
            },
            error: function () { cb({authenticated: false}); }
        })
    }, 
Comments