Skip to content

Instantly share code, notes, and snippets.

@mattatcha
Last active October 15, 2015 21:36
Show Gist options
  • Save mattatcha/45fe03135e3a7ab18b36 to your computer and use it in GitHub Desktop.
Save mattatcha/45fe03135e3a7ab18b36 to your computer and use it in GitHub Desktop.
var Fluxxor = require('fluxxor');
var request = require('superagent');
var AuthStore = Fluxxor.createStore({
actions: {
"LOGIN_AUTH": "onLoginAuth",
},
initialize: function() {
this.currentUser = {};
this.isLoggedIn = false;
this.isLoggingIn = false;
},
onLoginAuth: function(payload) {
this.isLoggingIn = true;
email = payload.email.trim();
password = payload.password.trim();
if (email !== '' && password !== '') {
request
.post(AppCfg.apiUrl + '/auth/login')
.type('form')
.send({
email: email,
password, password
})
.end(function(error, res){
console.log(res);
if (res.status == 200) {
this._setLoggedIn(res.body.token);
} else {
this._setLoggedOut({
error: res.text
});
console.log("Authentication failed");
}
}.bind(this));
}
return this.emit('change');
},
getState: function() {
return {
currentUser: this.currentUser,
isLoggedIn: this.isLoggedIn,
isLoggingIn: this.isLoggingIn
};
},
_setLoggedOut: function() {
localStorage.removeItem('loginToken');
this.isLoggingIn = false;
this.isLoggedIn = false;
return this.emit('change');
},
_setLoggedIn: function(token) {
if (token != null || token != '') {
localStorage.setItem('loginToken', token);
this.isLoggingIn = false;
this.isLoggedIn = true;
return this.emit('change');
} else {
console.log('errror');
return _setLoggedOut({
error: "There was an error logging in."
});
}
}
});
var Panel = require('../components/Panel.jsx');
var Fluxxor = require('fluxxor');
var FluxChildMixin = Fluxxor.FluxChildMixin(React);
var StoreWatchMixin = Fluxxor.StoreWatchMixin;
var LoginPage = React.createClass({
mixins: [FluxChildMixin],
getStateFromFlux: function() {
var flux = this.getFlux();
return {
AuthStore: this.getFlux().store("AuthStore")
}
},
handleSubmit: function(e) {
console.log(this.getFlux());
e.preventDefault();
var email = this.refs.email.getDOMNode().value.trim();
var password = this.refs.password.getDOMNode().value.trim();
// AuthActions.login(email, password);
this.getFlux().actions.loginAuth(email, password);
},
render: function() {
return (
<Panel className="form-login" title="Login" hasBody>
<form className = "form-horizontal" onSubmit={this.handleSubmit}>
<div className="input-group field">
<span className="input-group-addon"><i className="fa fa-user fa-fw"></i></span>
<input type="text" className="form-control" placeholder="Email Address" ref="email" required/>
</div>
<div className="input-group field">
<span className="input-group-addon"><i className="fa fa-lock fa-fw"></i ></span>
<input type="password" className="form-control" placeholder="Password" ref="password" required/>
</div>
<div className="field">
<button type="submit" role="button" className="btn btn-primary btn-block" value="Post">
<LoginLoading isLoggingIn={this.state.AuthStore.isLoggingIn} /> Log in </button>
</div>
</form>
</Panel>
);
}
});
var LoginLoading = React.createClass({
render: function() {
var style = {};
if(!this.props.isLoggingIn === true) {
style.display = 'none';
}
return (
<i className="fa fa-cog fa-spin" style={style}></i>
);
}
});
module.exports = LoginPage;
@Webkadabra
Copy link

Thank you for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment