2015-07-13 16:59:12 +02:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
import React from 'react';
|
2015-10-01 11:16:38 +02:00
|
|
|
import { History } from 'react-router';
|
2015-07-13 16:59:12 +02:00
|
|
|
|
|
|
|
import GlobalNotificationModel from '../../models/global_notification_model';
|
|
|
|
import GlobalNotificationActions from '../../actions/global_notification_actions';
|
|
|
|
|
|
|
|
import UserStore from '../../stores/user_store';
|
|
|
|
import UserActions from '../../actions/user_actions';
|
|
|
|
|
|
|
|
import Form from './form';
|
|
|
|
import Property from './property';
|
|
|
|
|
2015-08-07 15:08:02 +02:00
|
|
|
import ApiUrls from '../../constants/api_urls';
|
2015-07-13 16:59:12 +02:00
|
|
|
import AppConstants from '../../constants/application_constants';
|
2015-10-12 17:55:02 +02:00
|
|
|
import AscribeSpinner from '../ascribe_spinner';
|
2015-07-13 16:59:12 +02:00
|
|
|
|
|
|
|
import { getLangText } from '../../utils/lang_utils';
|
|
|
|
|
|
|
|
|
|
|
|
let LoginForm = React.createClass({
|
|
|
|
propTypes: {
|
2015-07-13 19:53:16 +02:00
|
|
|
headerMessage: React.PropTypes.string,
|
|
|
|
submitMessage: React.PropTypes.string,
|
2015-07-13 16:59:12 +02:00
|
|
|
redirectOnLoggedIn: React.PropTypes.bool,
|
2015-07-21 15:05:42 +02:00
|
|
|
redirectOnLoginSuccess: React.PropTypes.bool,
|
2015-10-01 11:16:38 +02:00
|
|
|
location: React.PropTypes.object
|
2015-07-13 16:59:12 +02:00
|
|
|
},
|
|
|
|
|
2015-10-01 11:16:38 +02:00
|
|
|
mixins: [History],
|
2015-07-13 19:53:16 +02:00
|
|
|
|
2015-07-13 16:59:12 +02:00
|
|
|
getDefaultProps() {
|
|
|
|
return {
|
2015-07-15 00:37:45 +02:00
|
|
|
headerMessage: getLangText('Enter ascribe'),
|
|
|
|
submitMessage: getLangText('Log in'),
|
2015-07-13 16:59:12 +02:00
|
|
|
redirectOnLoggedIn: true,
|
|
|
|
redirectOnLoginSuccess: true
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState() {
|
|
|
|
return UserStore.getState();
|
|
|
|
},
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
UserStore.listen(this.onChange);
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
UserStore.unlisten(this.onChange);
|
|
|
|
},
|
|
|
|
|
|
|
|
onChange(state) {
|
|
|
|
this.setState(state);
|
|
|
|
},
|
|
|
|
|
2015-10-06 18:28:15 +02:00
|
|
|
handleSuccess({ success }){
|
2015-07-13 16:59:12 +02:00
|
|
|
let notification = new GlobalNotificationModel('Login successful', 'success', 10000);
|
|
|
|
GlobalNotificationActions.appendGlobalNotification(notification);
|
|
|
|
|
2015-10-09 13:51:21 +02:00
|
|
|
if(success) {
|
2015-11-02 15:38:37 +01:00
|
|
|
UserActions.fetchCurrentUser(true);
|
2015-10-06 18:28:15 +02:00
|
|
|
}
|
2015-07-13 16:59:12 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
render() {
|
2015-10-01 11:16:38 +02:00
|
|
|
let email = this.props.location.query.email || null;
|
2015-07-13 16:59:12 +02:00
|
|
|
return (
|
|
|
|
<Form
|
2015-07-13 19:53:16 +02:00
|
|
|
className="ascribe-form-bordered"
|
2015-07-13 16:59:12 +02:00
|
|
|
ref="loginForm"
|
2015-08-07 15:08:02 +02:00
|
|
|
url={ApiUrls.users_login}
|
2015-07-13 16:59:12 +02:00
|
|
|
handleSuccess={this.handleSuccess}
|
2015-08-26 15:41:59 +02:00
|
|
|
autoComplete="on"
|
2015-07-13 16:59:12 +02:00
|
|
|
buttons={
|
|
|
|
<button
|
|
|
|
type="submit"
|
2015-10-12 17:55:02 +02:00
|
|
|
className="btn btn-default btn-wide">
|
2015-07-15 00:37:45 +02:00
|
|
|
{this.props.submitMessage}
|
2015-07-13 16:59:12 +02:00
|
|
|
</button>}
|
|
|
|
spinner={
|
2015-10-12 17:55:02 +02:00
|
|
|
<span className="btn btn-default btn-wide btn-spinner">
|
|
|
|
<AscribeSpinner color="dark-blue" size="md" />
|
2015-07-13 18:13:47 +02:00
|
|
|
</span>
|
2015-07-13 16:59:12 +02:00
|
|
|
}>
|
2015-08-06 10:23:01 +02:00
|
|
|
<div className="ascribe-form-header">
|
2015-07-15 00:37:45 +02:00
|
|
|
<h3>{this.props.headerMessage}</h3>
|
2015-08-06 10:23:01 +02:00
|
|
|
</div>
|
2015-07-13 16:59:12 +02:00
|
|
|
<Property
|
|
|
|
name='email'
|
|
|
|
label={getLangText('Email')}>
|
|
|
|
<input
|
|
|
|
type="email"
|
|
|
|
placeholder={getLangText('Enter your email')}
|
2015-09-16 19:00:59 +02:00
|
|
|
defaultValue={email}
|
2015-07-13 16:59:12 +02:00
|
|
|
required/>
|
|
|
|
</Property>
|
|
|
|
<Property
|
|
|
|
name='password'
|
|
|
|
label={getLangText('Password')}>
|
|
|
|
<input
|
|
|
|
type="password"
|
|
|
|
placeholder={getLangText('Enter your password')}
|
|
|
|
required/>
|
|
|
|
</Property>
|
|
|
|
</Form>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
export default LoginForm;
|