2015-06-20 16:43:18 +02:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import Router from 'react-router';
|
|
|
|
|
|
|
|
import GlobalNotificationModel from '../models/global_notification_model';
|
|
|
|
import GlobalNotificationActions from '../actions/global_notification_actions';
|
|
|
|
|
2015-06-25 11:49:45 +02:00
|
|
|
import UserStore from '../stores/user_store';
|
2015-07-02 15:40:54 +02:00
|
|
|
import UserActions from '../actions/user_actions';
|
2015-06-25 11:49:45 +02:00
|
|
|
|
2015-06-20 16:43:18 +02:00
|
|
|
import Form from './ascribe_forms/form';
|
|
|
|
import Property from './ascribe_forms/property';
|
|
|
|
|
|
|
|
import apiUrls from '../constants/api_urls';
|
2015-06-25 15:25:34 +02:00
|
|
|
import AppConstants from '../constants/application_constants';
|
2015-06-20 16:43:18 +02:00
|
|
|
|
2015-07-01 18:58:13 +02:00
|
|
|
import { getLangText } from '../utils/lang_utils';
|
|
|
|
|
2015-06-30 14:46:28 +02:00
|
|
|
let Link = Router.Link;
|
2015-06-20 16:43:18 +02:00
|
|
|
|
|
|
|
let LoginContainer = React.createClass({
|
2015-07-02 15:40:54 +02:00
|
|
|
propTypes: {
|
|
|
|
message: React.PropTypes.string,
|
|
|
|
redirectOnLoggedIn: React.PropTypes.bool,
|
|
|
|
redirectOnLoginSuccess: React.PropTypes.bool
|
|
|
|
},
|
|
|
|
|
2015-06-20 16:43:18 +02:00
|
|
|
mixins: [Router.Navigation],
|
|
|
|
|
2015-07-02 15:40:54 +02:00
|
|
|
getDefaultProps() {
|
|
|
|
return {
|
2015-07-03 10:45:37 +02:00
|
|
|
message: getLangText('Log in to') + ' ascribe ...',
|
2015-07-02 15:40:54 +02:00
|
|
|
redirectOnLoggedIn: true,
|
|
|
|
redirectOnLoginSuccess: true
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2015-06-25 11:49:45 +02:00
|
|
|
getInitialState() {
|
|
|
|
return UserStore.getState();
|
|
|
|
},
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
UserStore.listen(this.onChange);
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
UserStore.unlisten(this.onChange);
|
|
|
|
},
|
|
|
|
|
|
|
|
onChange(state) {
|
|
|
|
this.setState(state);
|
2015-06-25 12:56:43 +02:00
|
|
|
|
|
|
|
// if user is already logged in, redirect him to piece list
|
2015-07-02 15:40:54 +02:00
|
|
|
if(this.state.currentUser && this.state.currentUser.email && this.props.redirectOnLoggedIn) {
|
2015-06-25 11:49:45 +02:00
|
|
|
this.transitionTo('pieces');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-06-20 16:43:18 +02:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div className="ascribe-login-wrapper">
|
|
|
|
<br/>
|
|
|
|
<div className="ascribe-login-text ascribe-login-header">
|
2015-07-02 15:40:54 +02:00
|
|
|
{this.props.message}
|
2015-06-20 16:43:18 +02:00
|
|
|
</div>
|
|
|
|
<LoginForm />
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
let LoginForm = React.createClass({
|
2015-07-02 15:40:54 +02:00
|
|
|
propTypes: {
|
|
|
|
redirectOnLoginSuccess: React.PropTypes.bool
|
|
|
|
},
|
|
|
|
|
2015-06-20 16:43:18 +02:00
|
|
|
handleSuccess(){
|
|
|
|
let notification = new GlobalNotificationModel('Login successsful', 'success', 10000);
|
|
|
|
GlobalNotificationActions.appendGlobalNotification(notification);
|
|
|
|
|
2015-07-02 15:40:54 +02:00
|
|
|
// register_piece is waiting for a login success as login_container and it is wrapped
|
|
|
|
// in a slides_container component.
|
|
|
|
// The easiest way to check if the user was successfully logged in is to fetch the user
|
|
|
|
// in the user store (which is obviously only possible if the user is logged in), since
|
|
|
|
// register_piece is listening to the changes of the user_store.
|
|
|
|
UserActions.fetchCurrentUser();
|
|
|
|
|
|
|
|
/* Taken from http://stackoverflow.com/a/14916411 */
|
2015-06-25 23:25:03 +02:00
|
|
|
/*
|
2015-06-24 15:52:43 +02:00
|
|
|
We actually have to trick the Browser into showing the "save password" dialog
|
|
|
|
as Chrome expects the login page to be reloaded after the login.
|
|
|
|
Users on Stack Overflow claim this is a bug in chrome and should be fixed in the future.
|
|
|
|
Until then, we redirect the HARD way, but reloading the whole page using window.location
|
|
|
|
*/
|
2015-07-02 15:40:54 +02:00
|
|
|
if(this.props.redirectOnLoginSuccess) {
|
|
|
|
window.location = AppConstants.baseUrl + 'collection';
|
|
|
|
}
|
2015-06-20 16:43:18 +02:00
|
|
|
},
|
2015-06-24 15:52:43 +02:00
|
|
|
|
2015-06-20 16:43:18 +02:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<Form
|
2015-06-24 15:52:43 +02:00
|
|
|
ref="loginForm"
|
2015-06-20 16:43:18 +02:00
|
|
|
url={apiUrls.users_login}
|
2015-06-22 10:50:22 +02:00
|
|
|
handleSuccess={this.handleSuccess}
|
|
|
|
buttons={
|
2015-06-24 15:52:43 +02:00
|
|
|
<button
|
|
|
|
type="submit"
|
|
|
|
className="btn ascribe-btn ascribe-btn-login">
|
2015-07-01 18:58:13 +02:00
|
|
|
{getLangText('Log in to')} ascribe
|
2015-06-22 10:50:22 +02:00
|
|
|
</button>}
|
|
|
|
spinner={
|
|
|
|
<button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
|
|
|
|
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
|
|
|
|
</button>
|
|
|
|
}>
|
2015-06-20 16:43:18 +02:00
|
|
|
<Property
|
|
|
|
name='email'
|
2015-07-01 18:58:13 +02:00
|
|
|
label={getLangText('Email')}>
|
2015-06-20 16:43:18 +02:00
|
|
|
<input
|
|
|
|
type="email"
|
2015-07-01 18:58:13 +02:00
|
|
|
placeholder={getLangText('Enter your email')}
|
2015-06-20 16:43:18 +02:00
|
|
|
autoComplete="on"
|
2015-06-24 15:52:43 +02:00
|
|
|
name="username"
|
2015-06-20 16:43:18 +02:00
|
|
|
required/>
|
|
|
|
</Property>
|
|
|
|
<Property
|
|
|
|
name='password'
|
2015-07-01 18:58:13 +02:00
|
|
|
label={getLangText('Password')}>
|
2015-06-20 16:43:18 +02:00
|
|
|
<input
|
|
|
|
type="password"
|
2015-07-01 18:58:13 +02:00
|
|
|
placeholder={getLangText('Enter your password')}
|
2015-06-20 16:43:18 +02:00
|
|
|
autoComplete="on"
|
2015-06-24 15:52:43 +02:00
|
|
|
name="password"
|
2015-06-20 16:43:18 +02:00
|
|
|
required/>
|
|
|
|
</Property>
|
|
|
|
<hr />
|
|
|
|
<div className="ascribe-login-text">
|
2015-07-01 18:58:13 +02:00
|
|
|
{getLangText('Not an ascribe user')}? <Link to="signup">{getLangText('Sign up')}...</Link><br/>
|
|
|
|
{getLangText('Forgot my password')}? <Link to="password_reset">{getLangText('Rescue me')}...</Link>
|
2015-06-20 16:43:18 +02:00
|
|
|
</div>
|
|
|
|
</Form>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2015-07-01 18:58:13 +02:00
|
|
|
export default LoginContainer;
|